Source/UBCS-WEB/src/views/integration/integrationIndex.vue

@@ -18,7 +18,7 @@
                        <el-form-item label="集团分类" label-width="70px" size="small">
                            <el-select clearable ref="selectTree" v-model="form.groupValue" placeholder="请选择"
                                popper-class="popperTreeSelect">
                                <el-option :value="groupVal" :label="groupVal"> 
                                <el-option :value="groupVal" :label="groupVal">
                                    <el-tree ref="groupTree" :data="groupTreeData" empty-text="暂无数据" :props="defaultProps"
                                        @node-click="handleNodeClick">
                                    </el-tree>
@@ -27,24 +27,22 @@

                        </el-form-item>
                    </el-form>
                    <avue-crud :table-loading="loading" :data="tableData" :option="option" ref="crud" @cell-class-name="handelCellRow"
                        @cell-click="handleCellClick">
                        <template slot="menuLeft">
                            <el-button icon="el-icon-plus" size="small" type="primary" @click="dialogPush = true">新 增
                            </el-button>
                            <el-button icon="el-icon-check" size="small" type="primary" @click="handleSave">保 存
                            </el-button>
                            <el-button icon="el-icon-connection" size="small" type="primary" @click="handleSync">同步模型
                            </el-button>
                        </template>
                        <template slot="defaultValue" slot-scope="{scope}">
                            <!-- <el-input v-model="scope.row.defaultValue" v-if="scope.row.index === tableRowIndex && scope.column.index === tableColumnIndex" @blur="inputBlur"> </el-input> -->
                            <span>{{ scope }}</span>
                        </template>
                    </avue-crud>
                    <el-card>
                        <avue-crud :table-loading="loading" :data="mappingData" :option="optionMapping" ref="crudMapping"
                            @row-update="handleUpdate" @row-click="handleMapingRowClick">
                            <template slot="menuLeft">
                                <el-button icon="el-icon-plus" size="small" type="primary" @click="dialogPush = true">新 增
                                </el-button>
                                <el-button icon="el-icon-check" size="small" type="primary" @click="handleSave">保 存
                                </el-button>
                                <el-button icon="el-icon-connection" size="small" type="primary" @click="handleSync">同步模型
                                </el-button>
                            </template>
                        </avue-crud>
                    </el-card>
                    <el-card :style="{ marginTop: '20px' }">
                        <avue-crud :data="tablesData" :option="optinos" ref="crud" 
                        @cell-click="handleCellClick">
                        <avue-crud :data="rangeData" :option="optinoRange" ref="crudRange" @row-update="handleUpdate"
                            @row-dblclick="handleRowClick">
                        </avue-crud>
                    </el-card>
                </el-card>
@@ -59,7 +57,7 @@
            </el-form>
            <p class="text_tip">*选择分类进行属性过滤, 或者输入属性的全拼或者简拼进行查询! 如: 姓名 (可输入xm或xinming )</p>
            <transfer v-model="transferValue" :data="transferData" :filter-method="filterMethod"
                filter-placeholder="请输入属性拼音全拼或者拼音缩写" @left-check-change="handelLeftCheck"></transfer>
                filter-placeholder="请输入拼音全拼或者拼音缩写" @left-check-change="handelLeftCheck"></transfer>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogPush = false">取 消</el-button>
                <el-button type="primary" @click="dialogPush = false">保 存</el-button>
@@ -70,7 +68,7 @@
<script>
import transfer from '@/components/transfer/index'
import pinyin from 'js-pinyin'
import { referCodeClassifyTree, referTree, gridAttrMapping } from '@/api/integration/integration.js'
import { referCodeClassifyTree, referTree, gridAttrMapping, gridAttrRanges, batchAddSave, listCodeAttributeByClassId, syncClassifyModel } from '@/api/integration/integration.js'
export default {
    components: {
        transfer
@@ -90,6 +88,20 @@
            });
            return data;
        };
        const options = {
            menu: false,
            delBtn: false,
            addBtn: false,
            index: true,
            columnBtn: false,
            searchShow: true,
            emptyBtn: false,
            searchBtn: false,
            searchShowBtn: false,
            cellBtn: true,
            border: true,
            searchMenuSpan: 8,
        }
        return {
            form: {
                name: '',
@@ -101,65 +113,37 @@
            transferData: generateData(),
            transferValue: [],
            dialogPush: false,
            tableData: [],
            tablesData: [
                {
                    id:'01',
                    groupTypeName:'李四',
                    codeView:'张三',
                    sex:'',
                    typeName:''
                }
            ],
            mappingData: [],
            rangeData: [],
            filterText: '',
            tableRowIndex:null,
            tableColumnIndex:null,
            optinos: {
            tableRowIndex: null,
            tableColumnIndex: null,
            optinoRange: {
                title: '集团属性',
                maxHeight: '300px',
                menu: true,
                delBtn: false,
                addBtn: false,
                index: true,
                header: false,
                columnBtn: false,
                searchShow: true,
                emptyBtn: false,
                searchBtn: false,
                searchShowBtn: false,
                cellBtn: true,
                border: true,
                searchMenuSpan: 8,
                rowKey: 'oid',
                column: [
                    { label: '属性集团枚举值', prop: 'groupTypeName', minWidth: 80, },
                    { label: '集团属性枚举显示名称', prop: 'codeView', minWidth: 80 },
                    { label: 'MDM枚举值', prop: 'sex', minWidth: 80, cell: true },
                    { label: 'MDM枚举显示名称', prop: 'typeName', minWidth: 80, cell: true },
                ]
                    { label: '属性集团枚举值', prop: 'numTextValue', minWidth: 80 },
                    { label: '集团属性枚举显示名称', prop: 'numText', minWidth: 80 },
                    { label: 'MDM枚举值', prop: 'targetNumTextValue', minWidth: 80, cell: true, blur: (value) => window.handleBlur(value, 'range') },
                    { label: 'MDM枚举显示名称', prop: 'targetNumText', minWidth: 80, cell: true, blur: (value) => window.handleBlur(value, 'range') },
                ],
                ...options
            },
            option: {
            optionMapping: {
                maxHeight: '500px',
                menu: true,
                delBtn: false,
                addBtn: false,
                index: true,
                header: true,
                columnBtn: false,
                searchShow: true,
                emptyBtn: false,
                searchBtn: false,
                searchShowBtn: false,
                cellBtn: false,
                border: true,
                searchMenuSpan: 8,
                rowKey: 'oid',
                column: [
                    { label: '集团分类', prop: 'sourceClassifyName', minWidth: 80, },
                    { label: '集团分类', prop: 'sourceClassifyName', minWidth: 80 },
                    { label: '所属视图', prop: 'viewName', minWidth: 80 },
                    { label: '集团属性', prop: 'sourceAttrName', minWidth: 80 },
                    { label: '分类名称', prop: 'targetClassifyName', minWidth: 80, overHidden: true },
                    { label: '属性名称', prop: 'targetAttrName', minWidth: 80},
                    { label: '默认值', prop: 'defaultValue', minWidth: 140, cell: true },
                ]
                    { label: '分类名称', prop: 'targetClassifyName', minWidth: 80 },
                    { label: '属性名称', prop: 'targetAttrName', minWidth: 80 },
                    { label: '默认值', prop: 'defaultValue', minWidth: 140, cell: true, blur: (value) => window.handleBlur(value, 'mapping') },
                ],
                ...options
            },
            treeData: [],
            groupTreeData: [],
@@ -170,7 +154,9 @@
                isLeaf: ''
            },
            groupVal: '',
            treeParam: {}
            treeParam: {},
            rangeForm: {},
            mappingForm: {},
        }
    },
    watch: {
@@ -182,10 +168,12 @@
    created() {
        this.getReferCodeClassifyTree()
        pinyin.setOptions({ checkPolyphone: false, charCase: 1 });
        console.log(pinyin.getFullChars('管理员'))
        console.log(pinyin.getCamelChars('管理员'))
    },
    mounted() {
        window.handleBlur = this.handleBlur
    },
    methods: {
        // 接口左侧树
        async getReferCodeClassifyTree() {
            const param = {
                parentBtmName: "jclass",
@@ -200,16 +188,33 @@
                this.treeData = data.map(item => item.children ? { ...item, ...{ isLeaf: false } } : { ...item, ...{ isLeaf: true } })
            }
        },
        async getlistCodeAttributeByClassId(oid) {
        // 接口获取属性映射
        async getGridAttrMapping(oid) {
            this.loading = true
            console.log(this.treeParam)
            const response = await gridAttrMapping({ sourceClassifyId: oid, ...this.treeParam })
            console.log(response)
            if (response.status === 200) {
                this.loading = false
                this.tableData = response.data.data
                this.mappingData = response.data.data
            }
        },
        // 接口获取属性映射取值范围
        async getGridAttrRanges(oid) {
            this.tablesData = []
            const response = await gridAttrRanges({ meatId: oid })
            console.log(response)
            if (response.status === 200) {
                this.rangeData = response.data
            }
        },
        // 接口获取主数据分类属性信息
        async getListCodeByClassId(oid) {
            // this.tablesData = []
            const response = await listCodeAttributeByClassId({ codeClassifyId: oid })
            console.log(response)
        },
        // 接口获取集团分类树
        async referTree(oid, checked) {
            this.groupTreeData = []
            const response = await referTree({ 'conditionMap[codeclsfid]': oid, parentOid: null })
@@ -229,25 +234,26 @@
                }
            }
        },
        // 左侧树过滤搜索
        filterNode(value, data) {
            console.log(value)
            console.log(data)
            if (!value) return true;
            return data.name.indexOf(value) !== -1;
        },
        handleSave() {

        // 保存按钮
        async handleSave() {
            console.log(this.mappingData)
            // const response = await batchAddSave({ dockingPreAttrMappingVOList: this.tableData })
            // console.log(response)
        },
        handlePush() {

        // 同步数据
        async handleSync() {
            const response = await syncClassifyModel({ dockingPreAttrMappingVOList: this.tableData })
            console.log(response)
        },
        handelLeftCheck(event) {
            console.log(event)
        },
        handelCellRow( {row, column, rowIndex, columnIndex }) {
            row.index = rowIndex
            column.index = columnIndex
        },
        // 新增弹窗查询按钮
        handleQuery(event) {
            console.log(event)
            this.form.name = event
@@ -255,34 +261,66 @@
        filterMethod(item) {
            return item.pinyins.indexOf(this.form.name) > -1;
        },
        // 左侧树点击
        handelTreeCell(event) {
            console.log(event)
            if (event.leaf) {
                this.treeParam.codeClassifyId = event.oid
                this.form.groupValue = ''
                this.groupVal = ''
                this.tableData = []
                this.referTree(event.oid, event.checked)
                this.getListCodeByClassId(event.oid)
            }
        },
        // 集团分类树点击
        handleNodeClick(data) {
            console.log(data)
            this.form.groupValue = data.name
            this.groupVal = data.name
            this.$refs.selectTree.blur()
            this.getlistCodeAttributeByClassId(data.oid)
        },
        handleCellClick(row, column,cell, event) {
            console.log(row)
            console.log(column)
            console.log(cell)
            console.log(event)
          this.tableRowIndex = row.index
          this.tableColumnIndex = column.index
            this.getGridAttrMapping(data.oid)
        },
        inputBlur() {
            this.tableColumnIndex = ''
            this.tableRowIndex = null
        },
        // 属性映射点击每行
        handleCellClick(event) {
            console.log('单击', event)
            // this.tableRowIndex = row.index
            // this.tableColumnIndex = column.index
            // this.getGridAttrRanges(event.metaListId)
        },
        handleBlur(value, event) {
            console.log(value)
            if (event === 'range') this.$refs.crudRange.rowCell(this.rangeForm, this.rangeForm.$index)
            if (event === 'mapping') this.$refs.crudMapping.rowCell(this.mappingForm, this.mappingForm.$index)
        },
        // 属性取值范围单元格编辑
        handleMapingRowClick(row, column, cell, event) {
            this.mappingForm = row
            if (column.label === '默认值') this.$refs.crudMapping.rowCell(row, row.$index)
            else this.getGridAttrRanges(row.metaListId)

        },
        // 属性取值范围单元格编辑
        handleRowClick(row, column, cell, event) {
            this.rangeForm = row
            console.log('单击', row)
            this.$refs.crudRange.rowCell(row, row.$index)
        },
        // 属性取值范围单元格编辑
        handleUpdate(row, index, done, loading) {
            const findRow = this.mappingData.findIndex(item => item.metaListId === row.metaListId)
            console.log(findRow)
            this.mappingData[0].dockingPreAttrRangeVoList = [row]
            console.log('修改后', row)
            this.$message({
                showClose: true,
                message: "修改成功",
                type: "success",
            });
            done();
        }
    }
}