From f8c2838f7318af220b53ef4c509cfe9b2382f770 Mon Sep 17 00:00:00 2001 From: 田源 <lastanimals@163.com> Date: 星期一, 11 十二月 2023 18:41:44 +0800 Subject: [PATCH] 整合代码 --- Source/UBCS-WEB/src/views/integration/integrationIndex.vue | 295 ++++++++++++++++++++++++++++++++++++---------------------- 1 files changed, 181 insertions(+), 114 deletions(-) diff --git a/Source/UBCS-WEB/src/views/integration/integrationIndex.vue b/Source/UBCS-WEB/src/views/integration/integrationIndex.vue index 9e65713..4ff3f1a 100644 --- a/Source/UBCS-WEB/src/views/integration/integrationIndex.vue +++ b/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">*閫夋嫨鍒嗙被杩涜灞炴�ц繃婊�, 鎴栬�呰緭鍏ュ睘鎬х殑鍏ㄦ嫾鎴栬�呯畝鎷艰繘琛屾煡璇�! 濡�: 濮撳悕 (鍙緭鍏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="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: [], + // 鏍憄opos鏇挎崲鍊� defaultProps: { children: 'children', label: 'name', id: 'oid', isLeaf: '' }, + transferProps: { + key: 'oid', + label: 'name' + + }, + // 闆嗗洟鍒嗙被鏍戝�� groupVal: '', + // 宸︿晶鏍戦�夋嫨鐨刬d鍊� 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> \ No newline at end of file +</style> -- Gitblit v1.9.3