From e9a8d94454583645a194a7837ec6be495226eb04 Mon Sep 17 00:00:00 2001 From: wangting <675591594@qq.com> Date: 星期五, 11 八月 2023 16:55:02 +0800 Subject: [PATCH] 修改页面展示 --- Source/UBCS-WEB/src/views/integration/integrationIndex.vue | 616 ++++++++++++++++++++++++++++++++----------------------- 1 files changed, 358 insertions(+), 258 deletions(-) diff --git a/Source/UBCS-WEB/src/views/integration/integrationIndex.vue b/Source/UBCS-WEB/src/views/integration/integrationIndex.vue index 37dd110..c7cff47 100644 --- a/Source/UBCS-WEB/src/views/integration/integrationIndex.vue +++ b/Source/UBCS-WEB/src/views/integration/integrationIndex.vue @@ -6,264 +6,170 @@ <el-input placeholder="杈撳叆鍏抽敭瀛楄繘琛岃繃婊�" v-model="filterText"> </el-input> <el-menu :default-openeds="['1', '3']"> - <el-tree class="filter-tree" :data="treeData" :props="defaultProps" default-expand-all - :filter-node-method="filterNode" ref="tree"> + <el-tree class="filter-tree" :data="treeData" accordion :props="defaultProps" + :filter-node-method="filterNode" empty-text="鏆傛棤鏁版嵁" ref="tree" @node-click="handelTreeCell"> </el-tree> </el-menu> </el-aside> </el-card> <el-main> <el-card> - <avue-crud :data="tableData" :option="option" ref="crud" @row-update="addUpdate" @row-save="rowSave" - @row-click="handleRowClick"> - <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 :style="{ marginTop: '20px' }"> - <avue-crud :data="tableData" :option="optinos" ref="crud" @row-update="addUpdate" - @row-save="rowSave" @row-click="handleRowClick"> + <el-form :model="form"> + <el-form-item label="闆嗗洟鍒嗙被" label-width="70px" size="small"> + <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" + @node-click="handleNodeClick"> + </el-tree> + </el-option> + </el-select> + + </el-form-item> + </el-form> + <el-card> + <avue-crud :table-loading="loading" :data="mappingData" :option="optionMapping" ref="crudMapping" + @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" :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('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 :style="{ marginTop: '-20px'}" :data="rangeData" :option="optinoRange" ref="crudRange" @row-update="handleUpdate" + @row-dblclick="handleRowClick"> </avue-crud> </el-card> </el-card> - <el-dialog title="缂栫爜灞炴��" :visible.sync="dialogPush" destroy-on-close append-to-body="true" 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">*閫夋嫨鍒嗙被杩涜灞炴�ц繃婊�, 鎴栬�呰緭鍏ュ睘鎬х殑鍏ㄦ嫾鎴栬�呯畝鎷艰繘琛屾煡璇�! 濡�: 濮撳悕 (鍙緭鍏m鎴杧inming )</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="dialogVisible = false">淇� 瀛�</el-button> - </span> - </el-dialog> </el-main> </el-container> + <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, + addBtn: false, + index: true, + columnBtn: false, + searchShow: true, + emptyBtn: false, + searchBtn: false, + searchShowBtn: false, + cellBtn: true, + border: true, + searchMenuSpan: 8, + highlightCurrentRow: true, + } return { + // 琛ㄥ崟鍊� form: { - name: '', + // 闆嗗洟鏍戞樉绀哄�� + groupValue: '' }, - transferData: generateData(), - transferValue: [], + // 妫�娴嬫柊澧炴寜閽姸鎬� + disabledPush: true, + // 琛ㄦ牸鍔犺浇涓� + loading: false, + // 绌挎妗嗘暟鎹� + transferData: [], + // dialog寮圭獥寮�鍏� dialogPush: false, - tableData: [ - { - id: 1, - groupTypeName: '浜哄憳', - codeView: '缂栫爜瑙嗗浘', - sex: '鎬у埆', - typeName: '铻烘爴', - attributeName: '', - defaultValue: '', - }, - { - id: 2, - groupTypeName: '浜哄憳', - codeView: '缂栫爜瑙嗗浘', - sex: '鎬у埆', - typeName: '铻烘爴', - attributeName: '', - defaultValue: '', - }, - { - id: 3, - groupTypeName: '浜哄憳', - codeView: '缂栫爜瑙嗗浘', - sex: '鎬у埆', - typeName: '铻烘爴', - attributeName: '', - defaultValue: '', - }, - { - id: 3, - groupTypeName: '浜哄憳', - codeView: '缂栫爜瑙嗗浘', - sex: '鎬у埆', - typeName: '铻烘爴', - attributeName: '', - defaultValue: '', - }, - { - id: 3, - groupTypeName: '浜哄憳', - codeView: '缂栫爜瑙嗗浘', - sex: '鎬у埆', - typeName: '铻烘爴', - attributeName: '', - defaultValue: '', - }, - { - id: 3, - groupTypeName: '浜哄憳', - codeView: '缂栫爜瑙嗗浘', - sex: '鎬у埆', - typeName: '铻烘爴', - attributeName: '', - defaultValue: '', - }, - { - id: 3, - groupTypeName: '浜哄憳', - codeView: '缂栫爜瑙嗗浘', - sex: '鎬у埆', - typeName: '铻烘爴', - attributeName: '', - defaultValue: '', - }, - { - id: 3, - groupTypeName: '浜哄憳', - codeView: '缂栫爜瑙嗗浘', - sex: '鎬у埆', - typeName: '铻烘爴', - attributeName: '', - defaultValue: '', - }, - { - id: 3, - groupTypeName: '浜哄憳', - codeView: '缂栫爜瑙嗗浘', - sex: '鎬у埆', - typeName: '铻烘爴', - attributeName: '', - defaultValue: '', - } - ], + // 灞炴�ф槧灏勮〃鏁版嵁 + mappingData: [], + // 灞炴�ф槧灏勫彇鍊艰〃鏁版嵁 + rangeData: [], + // 涓绘暟鎹爲鎼滅储杩囨护 filterText: '', - optinos: { - title: '闆嗗洟灞炴��', + // 灞炴�ф槧灏勫彇鍊艰〃閰嶇疆 + 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 }, - { label: 'MDM鏋氫妇鏄剧ず鍚嶇О', prop: 'typeName', minWidth: 80, overHidden: 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: true, - border: true, - searchMenuSpan: 8, + 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: 'groupTypeName', + label: '灞炴�у悕绉�', + prop: 'targetAttrName', minWidth: 80, - type: "select", - dicUrl: "/api/ubcs-system/dict/dictionary?code=org_category", - props: { - label: "dictValue", - value: "dictKey" - }, - slot: true, - search: true, - rules: [{ - message: "璇疯緭鍏ラ泦鍥㈠垎绫诲悕绉�" - }] }, - { label: '鎵�灞炶鍥�', prop: 'codeView', minWidth: 80 }, - { label: '闆嗗洟灞炴��', prop: 'sex', minWidth: 80 }, - { label: '鍒嗙被鍚嶇О', prop: 'typeName', minWidth: 80, overHidden: true }, - { label: '灞炴�у悕绉�', prop: 'attributeName', minWidth: 80, cell: true }, - { label: '榛樿鍊�', prop: 'defaultValue', minWidth: 140, cell: true }, - ] + { + label: '榛樿鍊�', + prop: 'defaultValue', + minWidth: 140, + cell: true, + blur: (value) => window.handleBlur(value, 'mapping') + }, + ], + ...options }, - treeData: [{ - id: 1, - label: '涓�绾� 1', - children: [{ - id: 4, - label: '浜岀骇 1-1', - children: [{ - id: 9, - label: '涓夌骇 1-1-1' - }, { - id: 10, - label: '涓夌骇 1-1-2' - }] - }] - }, { - id: 2, - label: '涓�绾� 2', - children: [{ - id: 5, - label: '浜岀骇 2-1' - }, { - id: 6, - label: '浜岀骇 2-2' - }] - }, { - id: 3, - label: '涓�绾� 3', - children: [{ - id: 7, - label: '浜岀骇 3-1' - }, { - id: 8, - label: '浜岀骇 3-2' - }] - }], + // 涓绘暟鎹垎绫绘爲 + treeData: [], + // 闆嗗洟鍒嗙被鏍� + groupTreeData: [], + // 鏍憄opos鏇挎崲鍊� defaultProps: { children: 'children', - label: 'label' - } + label: 'name', + id: 'oid', + isLeaf: '' + }, + transferProps: { + key: 'oid', + label: 'name' + + }, + // 闆嗗洟鍒嗙被鏍戝�� + groupVal: '', + // 宸︿晶鏍戦�夋嫨鐨刬d鍊� + treeParam: {}, + // 琛ㄦ牸閫夋嫨鐨勮 + rangeForm: {}, + mappingForm: {}, + // 瀹氭椂鍣� + times: null, + } }, watch: { @@ -272,71 +178,265 @@ } }, created() { + this.getReferCodeClassifyTree() pinyin.setOptions({ checkPolyphone: false, charCase: 1 }); - console.log(pinyin.getFullChars('绠$悊鍛�')) - console.log(pinyin.getCamelChars('绠$悊鍛�')) + }, + mounted() { + 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", + textField: "name", + parentFieldName: "id" + } + const response = await referCodeClassifyTree(param) + if (response.status === 200) { + let data = response.data; + this.treeData = data.map(item => item.children ? { ...item, ...{ isLeaf: false } } : { ...item, ...{ isLeaf: true } }) + } + }, + // 鎺ュ彛鑾峰彇灞炴�ф槧灏� + async getGridAttrMapping(oid) { + this.mappingData = [] + this.loading = true + const response = await gridAttrMapping({ sourceClassifyId: oid, ...this.treeParam }) + if (response.status === 200) { + this.loading = false + this.mappingData = response.data.data + console.log(this.filtermapping) + } + }, + // 鎺ュ彛鑾峰彇灞炴�ф槧灏勫彇鍊艰寖鍥� + async getGridAttrRanges(oid) { + this.rangeData = [] + const response = await gridAttrRanges({ meatId: oid }) + if (response.status === 200) { + console.log(response.data) + this.rangeData = response.data.data + } + }, + // 鎺ュ彛鑾峰彇涓绘暟鎹垎绫诲睘鎬т俊鎭� + async getListCodeByClassId(oid) { + this.transferData = [] + pinyin.setOptions({ checkPolyphone: false, charCase: 1 }); + const response = await listCodeAttributeByClassId({ codeClassifyId: oid }) + 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 }) + if (response.status === 200) { + if (checked) { + let items = response.data.map(item => { + let obj = {} + if (item.checked) obj = { ...item } + else obj = null + return obj + }) + var r = items.filter(s => { return s && s.trim() }); + this.groupTreeData = r + } else { + this.groupTreeData = response.data + } + } + }, + // 宸︿晶鏍戣繃婊ゆ悳绱� filterNode(value, data) { if (!value) return true; - return data.label.indexOf(value) !== -1; + return data.name.indexOf(value) !== -1; }, - handleSave() { + // 淇濆瓨鎸夐挳 + async handleSave() { + console.log(this.mappingData) + const response = await batchAddSave({ dockingPreAttrMappingVOList: this.mappingData }) + console.log(response) + if (response.status === 200) { + this.$message({ + type: "success", + message: "淇濆瓨鎴愬姛!" + }); + } + }, + // 鍚屾鏁版嵁 + 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 { + console.log(param) + const response = await syncClassifyModel(param) + if (response.status === 200) { + console.log(response) + } + } + }, + handelTransferSave(event) { + let that = this + console.log(event) + 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 + } }, - handlePush() { - + // 宸︿晶鏍戠偣鍑� + handelTreeCell(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) + } }, - handelLeftCheck(event) { - console.log(event) + // 闆嗗洟鍒嗙被鏍戠偣鍑� + handleNodeClick(data) { + this.form.groupValue = data.oid + this.groupVal = data.name + this.$refs.selectTree.blur() + this.getGridAttrMapping(data.oid) }, - addUpdate(event, done) { - console.log(event) - done() + // 闆嗗洟鍒嗙被澶卞幓鐒︾偣 + inputBlur() { + this.tableColumnIndex = '' + this.tableRowIndex = null }, - rowSave(event, done) { - console.log(event) - done() + // 澶卞幓鐒︾偣 + handleBlur(value, event) { + if (event === 'range') this.$refs.crudRange.rowCell(this.rangeForm, this.rangeForm.$index) + if (event === 'mapping') this.$refs.crudMapping.rowCell(this.mappingForm, this.mappingForm.$index) }, - handleRowClick(row, event, column) { + // 闆嗗洟鏄犲皠灞炴�ц閫夋嫨鍗曞厓鏍肩紪杈戯紙鍙屽嚮锛� + handleMapingRowClick(row, column) { + clearTimeout(this.times) + this.mappingForm = row + if (column.label === '榛樿鍊�' || column.label === '灞炴�у悕绉�') this.$refs.crudMapping.rowCell(row, row.$index) + }, + // 闆嗗洟鏄犲皠灞炴�ц閫夋嫨锛堝崟鍑伙級 + handleMapingClick(row) { + clearTimeout(this.times) + this.mappingForm = row + this.times = setTimeout(() => { + this.$refs.crudMapping.toggleSelection([row]); + }, 300) + }, + // 灞炴�у彇鍊艰寖鍥村崟鍏冩牸缂栬緫锛堝弻鍑伙級 + handleRowClick(row) { + this.rangeForm = row + this.$refs.crudRange.rowCell(row, row.$index) + }, + // 灞炴�у彇鍊艰寖鍥村崟鍏冩牸缂栬緫鍚� + handleUpdate(row, index, done) { console.log(row) - console.log(event) - console.log(column) + console.log(index) + const findRow = this.mappingData.findIndex(item => item.metaListId === row.metaListId) + this.rangeData[index] = row + console.log(this.rangeData) + this.mappingData[findRow].dockingPreAttrRangeVoList = (this.rangeData) + console.log('淇敼鍚�', row) + this.$message({ + showClose: true, + message: "淇敼鎴愬姛", + type: "success", + }); + done(); }, - handleQuery(event) { - console.log(event) - this.form.name = event + // 灞炴�у彇鍊艰寖鍥村崟鍏冩牸缂栬緫鍚� + handleMapingUpdate(row, index, done) { + console.log(row) + console.log('淇敼鍚�', row) + this.$message({ + showClose: true, + message: "淇敼鎴愬姛", + type: "success", + }); + done(); }, - filterMethod(query, item) { - return item.pinyins.indexOf(this.form.name) > -1; + // 闆嗗洟鏄犲皠灞炴�ч�夋嫨锛堝崟閫夛級 + selectionChange(selection) { + console.log(selection) + console.log(this.mappingForm) + 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) { + console.log(row) + this.mappingForm = row + this.disabledPush = false + }, + handleSelectAll(selection) { + console.log(selection) + this.$refs.crudMapping.toggleSelection() + } } } </script> <style lang="scss" scoped> -.text_tip { - padding: 10px 0; - color: #F56C6C; +.setstyle { + min-height: 200px; + padding: 0 !important; + margin: 0; + overflow: auto; + 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> \ No newline at end of file +</style> -- Gitblit v1.9.3