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

@@ -16,7 +16,7 @@
                <el-card>
                    <el-form :model="form">
                        <el-form-item label="集团分类" label-width="70px" size="small">
                            <el-select clearable ref="selectTree" v-model="form.groupValue" placeholder="请选择"
                            <el-select clearable ref="selectTree" v-model="groupVal" placeholder="请选择"
                                popper-class="popperTreeSelect">
                                <el-option :value="groupVal" :label="groupVal">
                                    <el-tree ref="groupTree" :data="groupTreeData" empty-text="暂无数据" :props="defaultProps"
@@ -29,65 +29,46 @@
                    </el-form>
                    <el-card>
                        <avue-crud :table-loading="loading" :data="mappingData" :option="optionMapping" ref="crudMapping"
                            @row-update="handleUpdate" @row-click="handleMapingRowClick">
                            @row-update="handleMapingUpdate" @row-click="handleMapingClick"
                            @row-dblclick="handleMapingRowClick" @selection-change="selectionChange" @select="setCurrentRow"
                            @select-all="handleSelectAll">
                            <template slot="menuLeft">
                                <el-button icon="el-icon-plus" size="small" type="primary" @click="dialogPush = true">新 增
                                <el-button icon="el-icon-plus" size="small" type="primary" :disabled="disabledPush"
                                    @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 icon="el-icon-connection" size="small" type="primary"
                                    @click="handleSync('all')">同步主模型
                                </el-button>
                                <el-button icon="el-icon-connection" size="small" type="primary"
                                    @click="handleSync('one')">同步详细模型
                                </el-button>
                            </template>
                        </avue-crud>
                    </el-card>
                    <el-card :style="{ marginTop: '20px' }">
                        <avue-crud :data="rangeData" :option="optinoRange" ref="crudRange" @row-update="handleUpdate"
                    <el-card :style="{ marginTop: '20px'}">
                        <avue-crud :style="{ marginTop: '-20px'}" :data="rangeData" :option="optinoRange" ref="crudRange" @row-update="handleUpdate"
                            @row-dblclick="handleRowClick">
                        </avue-crud>
                    </el-card>
                </el-card>
            </el-main>
        </el-container>
        <el-dialog title="编码属性" :visible.sync="dialogPush" append-to-body="true" destroy-on-close width="30%"
            :before-close="handleClose">
            <el-form :model="form">
                <el-form-item label="查询条件" label-width="70px" size="small">
                    <el-input v-model="form.name" autocomplete="off" @change="handleQuery"></el-input>
                </el-form-item>
            </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>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogPush = false">取 消</el-button>
                <el-button type="primary" @click="dialogPush = false">保 存</el-button>
            </span>
        </el-dialog>
        <integration-transfer :visible.sync="dialogPush" :data="transferData" :disabledData="filtermapping"
            :props="transferProps" @save="handelTransferSave"></integration-transfer>
    </div>
</template>
<script>
import transfer from '@/components/transfer/index'
import integrationTransfer from './integrationTransfer.vue'
import pinyin from 'js-pinyin'
import { referCodeClassifyTree, referTree, gridAttrMapping, gridAttrRanges, batchAddSave, listCodeAttributeByClassId, syncClassifyModel } from '@/api/integration/integration.js'
export default {
    components: {
        transfer
        integrationTransfer
    },
    name: 'Integration',
    data() {
        const generateData = () => {
            pinyin.setOptions({ checkPolyphone: false, charCase: 1 });
            const data = [];
            const cities = ['上海', '北京', '广州', '深圳', '南京', '西安', '成都'];
            cities.forEach((city, index) => {
                data.push({
                    label: city,
                    key: index,
                    pinyin: pinyin.getFullChars(city),
                    pinyins: pinyin.getCamelChars(city),
                });
            });
            return data;
        };
        const options = {
            menu: false,
            delBtn: false,
@@ -101,25 +82,31 @@
            cellBtn: true,
            border: true,
            searchMenuSpan: 8,
            highlightCurrentRow: true,
        }
        return {
            // 表单值
            form: {
                name: '',
                // 集团树显示值
                groupValue: ''
            },
            // 检测新增按钮状态
            disabledPush: true,
            // 表格加载中
            loading: false,
            ishowTree: false,
            search: '',
            transferData: generateData(),
            transferValue: [],
            // 穿梭框数据
            transferData: [],
            // dialog弹窗开关
            dialogPush: false,
            // 属性映射表数据
            mappingData: [],
            // 属性映射取值表数据
            rangeData: [],
            // 主数据树搜索过滤
            filterText: '',
            tableRowIndex: null,
            tableColumnIndex: null,
            // 属性映射取值表配置
            optinoRange: {
                title: '集团属性',
                title: '属性映射取值范围',
                maxHeight: '300px',
                header: false,
                rowKey: 'oid',
@@ -131,37 +118,62 @@
                ],
                ...options
            },
            // 属性映射表配置
            optionMapping: {
                maxHeight: '500px',
                header: true,
                rowKey: 'oid',
                selection: false,
                column: [
                    { label: '集团分类', prop: 'sourceClassifyName', minWidth: 80 },
                    { label: '所属视图', prop: 'viewName', minWidth: 80 },
                    { label: '集团属性', prop: 'sourceAttrName', minWidth: 80 },
                    { label: '分类名称', prop: 'targetClassifyName', minWidth: 80 },
                    { label: '属性名称', prop: 'targetAttrName', minWidth: 80 },
                    { label: '默认值', prop: 'defaultValue', minWidth: 140, cell: true, blur: (value) => window.handleBlur(value, 'mapping') },
                    {
                        label: '属性名称',
                        prop: 'targetAttrName',
                        minWidth: 80,
                    },
                    {
                        label: '默认值',
                        prop: 'defaultValue',
                        minWidth: 140,
                        cell: true,
                        blur: (value) => window.handleBlur(value, 'mapping')
                    },
                ],
                ...options
            },
            // 主数据分类树
            treeData: [],
            // 集团分类树
            groupTreeData: [],
            // 树popos替换值
            defaultProps: {
                children: 'children',
                label: 'name',
                id: 'oid',
                isLeaf: ''
            },
            transferProps: {
                key: 'oid',
                label: 'name'

            },
            // 集团分类树值
            groupVal: '',
            // 左侧树选择的id值
            treeParam: {},
            // 表格选择的行
            rangeForm: {},
            mappingForm: {},
            // 定时器
            times: null,

        }
    },
    watch: {
        filterText(val) {
            console.log(this.$refs.tree)
            this.$refs.tree.filter(val);
        }
    },
@@ -170,11 +182,25 @@
        pinyin.setOptions({ checkPolyphone: false, charCase: 1 });
    },
    mounted() {
        window.handleBlur = this.handleBlur
        let that = this
        window.handleBlur = that.handleBlur

    },
    computed: {
        filtermapping() {
            const data = this.mappingData.filter(item => {
                return !(Object.prototype.hasOwnProperty.call(item, 'targetAttrName') && (item.targetAttrName === null || item.targetAttrName === undefined || item.targetAttrName === ""))
            })
            const transfer = data.map(obj => {
                return obj.targetAttrName
            })
            return transfer
        }
    },
    methods: {
        // 接口左侧树
        async getReferCodeClassifyTree() {
            this.treeData = []
            const param = {
                parentBtmName: "jclass",
                valueField: "oid",
@@ -182,7 +208,6 @@
                parentFieldName: "id"
            }
            const response = await referCodeClassifyTree(param)
            console.log(response)
            if (response.status === 200) {
                let data = response.data;
                this.treeData = data.map(item => item.children ? { ...item, ...{ isLeaf: false } } : { ...item, ...{ isLeaf: true } })
@@ -190,35 +215,38 @@
        },
        // 接口获取属性映射
        async getGridAttrMapping(oid) {
            this.mappingData = []
            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.mappingData = response.data.data
                // console.log(this.filtermapping)
            }
        },
        // 接口获取属性映射取值范围
        async getGridAttrRanges(oid) {
            this.tablesData = []
            this.rangeData = []
            const response = await gridAttrRanges({ meatId: oid })
            console.log(response)
            if (response.status === 200) {
                this.rangeData = response.data
                // console.log(response.data)
                this.rangeData = response.data.data
            }
        },
        // 接口获取主数据分类属性信息
        async getListCodeByClassId(oid) {
            // this.tablesData = []
            this.transferData = []
            pinyin.setOptions({ checkPolyphone: false, charCase: 1 });
            const response = await listCodeAttributeByClassId({ codeClassifyId: oid })
            console.log(response)
            if (response.status === 200) {
                const data = response.data.data
                this.transferData = data
            }
        },
        // 接口获取集团分类树
        async referTree(oid, checked) {
            this.groupTreeData = []
            const response = await referTree({ 'conditionMap[codeclsfid]': oid, parentOid: null })
            console.log(response)
            if (response.status === 200) {
                if (checked) {
                    let items = response.data.map(item => {
@@ -241,25 +269,47 @@
        },
        // 保存按钮
        async handleSave() {
            console.log(this.mappingData)
            // const response = await batchAddSave({ dockingPreAttrMappingVOList: this.tableData })
            // console.log(response)
            const response = await batchAddSave({ dockingPreAttrMappingVOList: this.mappingData })
            if (response.status === 200) {
                this.$message({
                    type: "success",
                    message: "保存成功!"
                });
            }
        },
        // 同步数据
        async handleSync() {
            const response = await syncClassifyModel({ dockingPreAttrMappingVOList: this.tableData })
            console.log(response)
        async handleSync(type = 'all') {
            let param = { operationType: type }
            if (type === 'one') {
                param.classifyId = this.form.groupValue
            }
            if (this.form.groupValue === '' && type === 'one') {
                this.$message({
                    type: "error",
                    message: "请选择一条集团分类"
                });
            } else {
                const response = await syncClassifyModel(param)
                if (response.status === 200) {
                    console.log(response)
                }
            }
        },
        handelLeftCheck(event) {
            console.log(event)
        },
        // 新增弹窗查询按钮
        handleQuery(event) {
            console.log(event)
            this.form.name = event
        },
        filterMethod(item) {
            return item.pinyins.indexOf(this.form.name) > -1;
        handelTransferSave(event) {
            let that = this
            const transferValue = event.value
            if (Object.keys(that.mappingForm).length == 0) {
                this.$message({
                    type: "error",
                    message: "请选择一条数据!"
                });
            } else {
                const findRow = that.mappingData.findIndex(item => item.metaListId === that.mappingForm.metaListId)
                that.mappingData[findRow].targetAttrName = transferValue[0].name
                that.mappingData[findRow].targetAttrId = transferValue[0].oid
                this.dialogPush = false
            }

        },
        // 左侧树点击
        handelTreeCell(event) {
@@ -274,63 +324,83 @@
        },
        // 集团分类树点击
        handleNodeClick(data) {
            console.log(data)
            this.form.groupValue = data.name
            this.form.groupValue = data.oid
            this.groupVal = data.name
            this.$refs.selectTree.blur()
            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) {
        // 集团映射属性行选择单元格编辑（双击）
        handleMapingRowClick(row, column) {
            clearTimeout(this.times)
            this.mappingForm = row
            if (column.label === '默认值') this.$refs.crudMapping.rowCell(row, row.$index)
            else this.getGridAttrRanges(row.metaListId)

            if (column.label === '默认值' || column.label === '属性名称') this.$refs.crudMapping.rowCell(row, row.$index)
        },
        // 属性取值范围单元格编辑
        handleRowClick(row, column, cell, event) {
        // 集团映射属性行选择（单击）
        handleMapingClick(row) {
            clearTimeout(this.times)
            this.mappingForm = row
            this.times = setTimeout(() => {
                this.$refs.crudMapping.toggleSelection([row]);
            }, 300)
        },
        // 属性取值范围单元格编辑（双击）
        handleRowClick(row) {
            this.rangeForm = row
            console.log('单击', row)
            this.$refs.crudRange.rowCell(row, row.$index)
        },
        // 属性取值范围单元格编辑
        handleUpdate(row, index, done, loading) {
        // 属性取值范围单元格编辑后
        handleUpdate(row, index, done) {
            const findRow = this.mappingData.findIndex(item => item.metaListId === row.metaListId)
            console.log(findRow)
            this.mappingData[0].dockingPreAttrRangeVoList = [row]
            console.log('修改后', row)
            this.rangeData[index] = row
            this.mappingData[findRow].dockingPreAttrRangeVoList = (this.rangeData)
            this.$message({
                showClose: true,
                message: "修改成功",
                type: "success",
            });
            done();
        },
        // 属性取值范围单元格编辑后
        handleMapingUpdate(row, index, done) {
            this.$message({
                showClose: true,
                message: "修改成功",
                type: "success",
            });
            done();
        },
        // 集团映射属性选择（单选）
        selectionChange(selection) {
            if (selection.length > 1) {
                const nowVal = selection.shift();
                this.$refs.crudMapping.toggleRowSelection(nowVal, false);
            } else if (selection.length === 1) {
                // 对单选数据的操作写在这里
                this.disabledPush = false
                this.getGridAttrRanges(this.mappingForm.metaListId)
            }
        },
        setCurrentRow(selection, row) {
            this.mappingForm = row
            this.disabledPush = false
        },
        handleSelectAll(selection) {
            this.$refs.crudMapping.toggleSelection()
        }
    }
}
</script>
<style lang="scss" scoped>
.text_tip {
    padding: 10px 0;
    color: #F56C6C;
}

.setstyle {
    min-height: 200px;
    padding: 0 !important;
@@ -339,23 +409,20 @@
    cursor: default !important;
}

/deep/ .el-transfer-panel__list {
::v-deep(.el-transfer-panel__list) {
    width: 100%;
    height: 370px;
}

/deep/ .el-input {
::v-deep(.el-transfer-panel__body) {
    height: 370px;
}

::v-deep(.el-input) {
    width: auto;
}

/deep/ .el-transfer-panel {
::v-deep(.el-transfer-panel) {
    width: 270px;
}

/deep/ .el-transfer-panel__list {
    height: 370px;
}

/deep/ .el-transfer-panel__body {
    height: 370px;
}
</style>
</style>