From aee67ef5bf2e57a148bfded1cb986378e35e7e01 Mon Sep 17 00:00:00 2001 From: ludc Date: 星期四, 18 四月 2024 00:49:22 +0800 Subject: [PATCH] Merge remote-tracking branch 'origin/master' --- Source/UBCS-WEB/src/views/integration/integrationIndex.vue | 501 ++++++++++++++++++++++++++++++++++++++++++++---------- 1 files changed, 403 insertions(+), 98 deletions(-) diff --git a/Source/UBCS-WEB/src/views/integration/integrationIndex.vue b/Source/UBCS-WEB/src/views/integration/integrationIndex.vue index 72b09d6..083d865 100644 --- a/Source/UBCS-WEB/src/views/integration/integrationIndex.vue +++ b/Source/UBCS-WEB/src/views/integration/integrationIndex.vue @@ -1,56 +1,88 @@ <template> <div> <el-container style="height: 100%; border: 1px solid #fff"> - <el-card :style="{ marginRight: '10px' }"> - <el-aside style="background-color: #fff" width="220px"> + <el-card style="margin-right: 10px;height: calc(100vh - 125px);overflow: auto"> + <el-aside style="background-color: #fff;" width="210px"> <el-input v-model="filterText" placeholder="杈撳叆鍏抽敭瀛楄繘琛岃繃婊�"> </el-input> - <el-menu :default-openeds="['1', '3']" > - <el-tree ref="tree" :data="treeData" :filter-node-method="filterNode" :props="defaultProps" + <el-menu :default-openeds="['1', '3']"> + <el-tree ref="tree" :data="treeData" :filter-node-method="filterNode" :props="defaultProps" accordion class="filter-tree" empty-text="鏆傛棤鏁版嵁" @node-click="handelTreeCell"> + <template slot-scope="{ node, data }" class="el-tree-node__label"> + <el-tooltip :content="$createElement('div', { domProps: { innerHTML: node.label } })" class="item" + effect="dark" + open-delay="500" + placement="right-start"> + <span style="font-size: 14px;"> + {{ (node || {}).label }} + </span> + </el-tooltip> + </template> </el-tree> </el-menu> </el-aside> </el-card> <el-main> - <el-card> + <el-card style="height: calc(100vh - 128px)"> <el-form :model="form"> - <el-form-item label="闆嗗洟鍒嗙被" label-width="70px" size="small"> + <el-form-item label="闆嗗洟鍒嗙被" label-width="80px" size="small"> <el-select ref="selectTree" v-model="groupVal" clearable placeholder="璇烽�夋嫨" popper-class="popperTreeSelect"> - <el-option :label="groupVal" :value="groupVal"> - <el-tree ref="groupTree" :data="groupTreeData" :props="defaultProps" empty-text="鏆傛棤鏁版嵁" - @node-click="handleNodeClick"> + <el-option :disabled="true" :label="groupVal" :value="groupVal"> + <el-tree ref="groupTree" + :data="groupTreeData" + :default-checked-keys="defaultCheckedKeys" + :default-expanded-keys="defaultCheckedKeys" + :props="defaultProps" + empty-text="鏆傛棤鏁版嵁" + node-key="oid" + show-checkbox + @check="handleCheck"> </el-tree> </el-option> </el-select> </el-form-item> </el-form> - <el-card> + <el-card style="height:38vh"> <avue-crud ref="crudMapping" :data="mappingData" :option="optionMapping" :table-loading="loading" @select="setCurrentRow" @row-update="handleMapingUpdate" - @row-click="handleMapingClick" @row-dblclick="handleMapingRowClick" @selection-change="selectionChange" + @row-click="handleMapingClick" @row-dblclick="handleMapingRowClick" + @selection-change="selectionChange" @select-all="handleSelectAll"> + <template slot="radio" + slot-scope="{row}"> + + <el-radio v-model="selectRow" :label="row.$index">-</el-radio> + </template> <template slot="menuLeft"> - <el-button :disabled="disabledPush" icon="el-icon-plus" size="small" type="primary" - @click="dialogPush = true">鏂� 澧� + <!-- <el-button :disabled="disabledPush" icon="el-icon-plus" size="small" type="primary"--> + <!-- @click="dialogPush = true">鏂� 澧�--> + <!-- </el-button>--> + <el-button v-if="permissionList.saveBtn" icon="el-icon-check" size="small" type="primary" + @click="handleSave">淇� 瀛� </el-button> - <el-button icon="el-icon-check" size="small" type="primary" @click="handleSave">淇� 瀛� + <el-button v-if="permissionList.allSyncBtn" 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('all')">鍚屾涓绘ā鍨� + <el-button v-if="permissionList.oneSyncBtn" icon="el-icon-connection" size="small" + type="primary" @click="handleSync('one')">鍚屾璇︾粏妯″瀷 </el-button> - <el-button icon="el-icon-connection" size="small" type="primary" - @click="handleSync('one')">鍚屾璇︾粏妯″瀷 + <el-button v-if="permissionList.autoBtn" icon="el-icon-coordinate" size="small" + type="primary" @click="handlerAuto">鑷姩濉厖 </el-button> </template> </avue-crud> </el-card> - <el-card :style="{ marginTop: '20px'}"> + <el-card style="margin-top: 10px;height: 38vh"> <avue-crud ref="crudRange" :data="rangeData" :option="optinoRange" :style="{ marginTop: '-20px'}" @row-update="handleUpdate" @row-dblclick="handleRowClick"> + <template slot="menuLeft"> + <el-button v-if="permissionList.bottomAutoBtn" icon="el-icon-coordinate" size="small" + type="primary" @click="handlerBottomAuto">鑷姩濉厖 + </el-button> + </template> </avue-crud> </el-card> </el-card> @@ -63,6 +95,7 @@ <script> import integrationTransfer from './integrationTransfer.vue' import pinyin from 'js-pinyin' +import {mapGetters} from "vuex"; import { referCodeClassifyTree, referTree, @@ -72,6 +105,7 @@ listCodeAttributeByClassId, syncClassifyModel } from '@/api/integration/integration.js' +import {getByGroupAttrMapping, getEnumAttrByClsOidAndAttrId} from "@/api/vciAttrbute"; export default { components: { @@ -95,6 +129,10 @@ highlightCurrentRow: true, } return { + selectRow: "", + targetNameList: [], // 鍏冩暟鎹繑鍥炲悕绉� + defaultCheckedKeys: [], + isNodeDisabled: true, // 琛ㄥ崟鍊� form: { // 闆嗗洟鏍戞樉绀哄�� @@ -117,21 +155,21 @@ // 灞炴�ф槧灏勫彇鍊艰〃閰嶇疆 optinoRange: { title: '灞炴�ф槧灏勫彇鍊艰寖鍥�', - maxHeight: '300px', - header: false, + maxHeight: '280px', rowKey: 'oid', + refreshBtn: false, column: [ {label: '灞炴�ч泦鍥㈡灇涓惧��', prop: 'numTextValue', minWidth: 80}, {label: '闆嗗洟灞炴�ф灇涓炬樉绀哄悕绉�', prop: 'numText', minWidth: 80}, { - label: 'MDM鏋氫妇鍊�', + label: 'CODE鏋氫妇鍊�', prop: 'targetNumTextValue', minWidth: 80, cell: true, blur: (value) => window.handleBlur(value, 'range') }, { - label: 'MDM鏋氫妇鏄剧ず鍚嶇О', + label: 'CODE鏋氫妇鏄剧ず鍚嶇О', prop: 'targetNumText', minWidth: 80, cell: true, @@ -142,11 +180,25 @@ }, // 灞炴�ф槧灏勮〃閰嶇疆 optionMapping: { - maxHeight: '500px', + maxHeight: '280px', header: true, rowKey: 'oid', selection: false, + refreshBtn: false, + delBtn: false, + addBtn: false, + columnBtn: false, + searchShow: true, + emptyBtn: false, + searchBtn: false, + searchShowBtn: false, + cellBtn: true, + border: true, + searchMenuSpan: 8, + highlightCurrentRow: true, + $cellEdit: true, column: [ + {label: '', prop: 'radio', width: 60, hide: false}, {label: '闆嗗洟鍒嗙被', prop: 'sourceClassifyName', minWidth: 80}, {label: '鎵�灞炶鍥�', prop: 'viewName', minWidth: 80}, {label: '闆嗗洟灞炴��', prop: 'sourceAttrName', minWidth: 80}, @@ -154,28 +206,38 @@ { label: '灞炴�у悕绉�', prop: 'targetAttrName', - minWidth: 80, - }, - { - label: '榛樿鍊�', - prop: 'defaultValue', - minWidth: 140, + type: 'select', cell: true, - blur: (value) => window.handleBlur(value, 'mapping') + filterable: true, + minWidth: 80, + props: { + label: 'targetAttrName', + value: 'targetAttrName' + }, + dicData: [], }, + // { + // label: '榛樿鍊�', + // prop: 'defaultValue', + // minWidth: 140, + // cell: true, + // blur: (value) => window.handleBlur(value, 'mapping') + // }, ], - ...options }, // 涓绘暟鎹垎绫绘爲 treeData: [], // 闆嗗洟鍒嗙被鏍� groupTreeData: [], - // 鏍憄opos鏇挎崲鍊� + // 鏍憄rpos鏇挎崲鍊� defaultProps: { children: 'children', label: 'name', id: 'oid', - isLeaf: '' + isLeaf: '', + // disabled:()=>{ + // return true + // } }, transferProps: { key: 'oid', @@ -191,6 +253,8 @@ mappingForm: {}, // 瀹氭椂鍣� times: null, + TreeOid: "", + tableSelectId: '' } }, @@ -206,7 +270,6 @@ mounted() { let that = this window.handleBlur = that.handleBlur - }, computed: { filtermapping() { @@ -217,9 +280,129 @@ return obj.targetAttrName }) return transfer - } + }, + targetColumn() { + return this.optionMapping.column.find(column => column.prop === 'targetAttrName'); + }, + ...mapGetters(["permission"]), + permissionList() { + return { + allSyncBtn: this.vaildData(this.permission.integration.integration_allSync, false), + autoBtn: this.vaildData(this.permission.integration.integration_auto, false), + bottomAutoBtn: this.vaildData(this.permission.integration.integration_bottomAuto, false), + oneSyncBtn: this.vaildData(this.permission.integration.integration_oneSync, false), + saveBtn: this.vaildData(this.permission.integration.integration_save, false), + } + }, }, methods: { + handlerAuto() { + if (!this.TreeOid || this.TreeOid === "") { + return; + } + // 杩囨护鍑洪泦鍥㈠睘鎬х殑key鍊� + const groupArray = this.mappingData ? this.mappingData.map(obj => obj.sourceAttrKey) : []; + // 鑾峰彇鍒伴渶瑕佽嚜鍔ㄥ~鍏呯殑鍊� + getByGroupAttrMapping({classifyId: this.TreeOid, groupAttrKeyList: groupArray}) + .then(res => { + // 鍗曠嫭鎶婅繑鍥炲�肩殑groupAttrKey鏀句竴涓暟缁勶紝鐒跺悗杩囨护鍑鸿繑鍥炲�肩殑groupAttrKey鏄惁绛変簬琛ㄦ牸鏁版嵁涓殑sourceAttrKey + // const groupReturnData = res.data && res.data.data ? res.data.data.map(item => item.groupAttrKey) : []; + const groupReturnData = res.data.data; + // 杩囨护鍖归厤 + // console.log(groupReturnData) + this.mappingData.forEach(mappingItem => { + groupReturnData.forEach(groupItem => { + if (mappingItem.sourceAttrKey === groupItem.groupAttrKey) { + const result = this.transferData.find(obj => obj.id.toLowerCase() === groupItem.codeMetaAttrKey.toLowerCase()); + if (result) { + mappingItem.targetAttrId = groupItem.codeMetaAttrOid.toLowerCase(); + mappingItem.targetAttrName = groupItem.codeMetaAttrName.toLowerCase(); + mappingItem.targetAttrKey = groupItem.codeMetaAttrKey.toLowerCase(); + } else { + mappingItem.targetAttrId = ''; + mappingItem.targetAttrName = ''; + mappingItem.targetAttrKey = ''; + } + } + }) + }) + this.$message.success('鑷姩濉厖鎴愬姛锛岃纭灞炴�у悗鐐瑰嚮淇濆瓨锛�'); + }) + .catch(error => { + console.log(error) + this.$message.error('濉厖澶辫触锛岃绋嶅悗鍐嶈瘯锛�'); + }); + }, + handlerBottomAuto() { + if (this.rangeData.length <= 0) { + this.$message.warning('璇烽�夋嫨涓�鏉℃灇涓剧被鍨嬪睘鎬�!') + return + } + getEnumAttrByClsOidAndAttrId({classifyId: this.TreeOid, codeMetaAttrKey: this.tableSelectId}).then(res => { + const data = res.data.data; + this.rangeData.forEach(rangeItem => { + data.forEach(dataItem => { + const similarity = this.calculateSimilarity(rangeItem.numText, dataItem.itemName); + if (similarity > 70) { + rangeItem.targetNumTextValue = rangeItem.numTextValue; + rangeItem.targetNumText = dataItem.itemName; + } + }) + }) + this.$message.success('鑷姩濉厖鎴愬姛锛岃纭灞炴�у悗鐐瑰嚮淇濆瓨锛�') + }) + }, + calculateSimilarity(str1, str2) { + // 璁$畻缂栬緫璺濈 + function editDistance(s1, s2) { + s1 = s1.toLowerCase(); + s2 = s2.toLowerCase(); + + const costs = []; + for (let i = 0; i <= s1.length; i++) { + let lastValue = i; + for (let j = 0; j <= s2.length; j++) { + if (i === 0) + costs[j] = j; + else { + if (j > 0) { + let newValue = costs[j - 1]; + if (s1.charAt(i - 1) !== s2.charAt(j - 1)) + newValue = Math.min(Math.min(newValue, lastValue), + costs[j]) + 1; + costs[j - 1] = lastValue; + lastValue = newValue; + } + } + } + if (i > 0) + costs[s2.length] = lastValue; + } + return costs[s2.length]; + } + + // 璁$畻鐩镐技搴︾櫨鍒嗘瘮 + function similarityPercent(s1, s2) { + let maxLength = Math.max(s1.length, s2.length); + let distance = editDistance(s1, s2); + return ((maxLength - distance) / maxLength) * 100; + } + + // 璋冪敤鐩镐技搴﹁绠楀嚱鏁板苟杩斿洖鐧惧垎姣斿舰寮忕殑鐩镐技搴� + const similarity = similarityPercent(str1, str2); + return similarity; + }, + getTargetName(data) { + this.targetColumn.dicData = data.filter(item => item.name && item.name.trim() !== "") // 杩囨护鎺塶ame涓虹┖鐨勫睘鎬� + .map(item => { + return { + targetAttrId: item.oid, + targetAttrKey: item.id, + targetAttrName: item.name, + // disabled: false + } + }); + }, // 鎺ュ彛宸︿晶鏍� async getReferCodeClassifyTree() { this.treeData = [] @@ -243,7 +426,13 @@ if (response.status === 200) { this.loading = false this.mappingData = response.data.data - // console.log(this.filtermapping) + + // for (const item of this.mappingData) { + // if (item.targetAttrName && item.targetAttrId && item.targetAttrKey) { + // const targetObject = this.targetColumn.dicData.find(obj => obj.targetAttrName === item.targetAttrName); + // targetObject.disabled = true; + // } + // } } }, // 鎺ュ彛鑾峰彇灞炴�ф槧灏勫彇鍊艰寖鍥� @@ -262,29 +451,86 @@ const response = await listCodeAttributeByClassId({codeClassifyId: oid}) if (response.status === 200) { const data = response.data.data - this.transferData = data + this.transferData = data; + this.getTargetName(data) + // console.log(data) } }, // 鎺ュ彛鑾峰彇闆嗗洟鍒嗙被鏍� - async referTree(oid, checked) { - this.groupTreeData = [] - const response = await referTree({'conditionMap[codeclsfid]': oid, parentOid: '0'}) + async referTree(oid) { + this.groupTreeData = []; + const response = await referTree({'conditionMap[codeclsfid]': oid, parentOid: '0'}); 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 + this.groupTreeData = response.data; // 灏嗚幏鍙栧埌鐨勬暟鎹祴鍊肩粰闆嗗洟鍒嗙被鏍戞暟鎹� + + await this.filterCheckedNodes(this.groupTreeData, this.defaultCheckedKeys); + await this.$nextTick(() => { + this.$refs.groupTree.setCheckedKeys(this.defaultCheckedKeys); + }); + + this.handlerTreeData(this.groupTreeData); + + this.defaultCheckedKeys = []; + } + }, + // 杩囨护鍑烘潵checked涓簍rue鐨勮妭鐐� + filterCheckedNodes(data, checkedNodes) { + data.forEach(node => { + if (node.checked) { + checkedNodes.push(node.oid); + this.getGridAttrMapping(node.oid); + this.form.groupValue = node.oid; + this.groupVal = node.name; + } + + if (node.children && node.children.length > 0) { + this.filterCheckedNodes(node.children, checkedNodes); + } + }); + }, + // 杩囨护澶勭悊姣忎釜鑺傜偣 + handlerTreeNode(node) { + // 鏍规嵁鑺傜偣绂佺敤鐘舵�佽缃妭鐐规槸鍚︾鐢� + this.$set(node, 'disabled', !node.checked); + if (node.children && node.children.length > 0) { + // 閫掑綊寰幆澶勭悊鎵�鏈夊瓙鑺傜偣 + node.children.forEach(child => this.handlerTreeNode(child)); + } + }, + // 妫�鏌ユ墍鏈夎妭鐐规槸鍚﹂兘鏄湭绂佺敤鐘舵�� + allNodeChecked(data) { + for (const node of data) { + // 濡傛灉瀛樺湪绂佺敤鑺傜偣杩斿洖false + if (node.checked) { + return false; + } + // 濡傛灉瀛樺湪瀛愯妭鐐逛笖瀛愯妭鐐瑰瓨鍦ㄧ鐢ㄨ妭鐐癸紝鍒欒繑鍥瀎alse + if (node.children && !this.allNodeChecked(node.children)) { + return false; } } + // 娌℃湁绂佺敤鑺傜偣杩斿洖true + return true; + }, + // 闆嗗洟鍒嗙被鏍戠鐢ㄦ暟鎹鐞嗘暣鍚堟柟娉� + handlerTreeData(data) { + if (this.allNodeChecked(data)) { + // 濡傛灉鎵�鏈夎妭鐐归兘鏈鐢ㄥ皢鎵�鏈夎妭鐐硅缃负false + data.forEach(node => { + this.$set(node, 'disabled', false); // Vue 3 涓彲鑳戒笉闇�瑕佽繖鏍峰仛 + }); + return; + } + // 鏌ユ壘绂佺敤鑺傜偣 + let checkedNode = data.find(node => node.checked); + data.forEach(node => { + // 濡傛灉鑺傜偣涓嶆槸绂佺敤鑺傜偣璁剧疆涓簍rue + this.$set(node, 'disabled', node !== checkedNode); + if (node.children && node.children.length > 0) { + // 璋冪敤寰幆鑺傜偣 + this.handlerTreeNode(node); + } + }); }, // 宸︿晶鏍戣繃婊ゆ悳绱� filterNode(value, data) { @@ -293,6 +539,17 @@ }, // 淇濆瓨鎸夐挳 async handleSave() { + const getTargetCorresponding = (row) => { + return this.targetColumn.dicData.find(column => column.targetAttrName === row.targetAttrName); + } + for (const item of this.mappingData) { + item.$cellEdit = false; + if (item.targetAttrName && !item.targetAttrId && !item.targetAttrKey) { + const {targetAttrId, targetAttrKey, targetAttrName} = await getTargetCorresponding(item); + Object.assign(item, {targetAttrId, targetAttrKey, targetAttrName}); + } + } + this.mappingData[this.selectRow].dockingPreAttrRangeVoList = (this.rangeData) const response = await batchAddSave({dockingPreAttrMappingVOList: this.mappingData}) if (response.status === 200) { this.$message({ @@ -313,13 +570,18 @@ message: "璇烽�夋嫨涓�鏉¢泦鍥㈠垎绫�" }); } else { - const response = await syncClassifyModel(param) - if (response.status === 200) { - console.log(response) + try { + const response = await syncClassifyModel(param); + if (response.status === 200) { + this.$message.success(response.data.msg) + } + } catch (error) { + console.error(error); } } }, handelTransferSave(event) { + // console.log(event) let that = this const transferValue = event.value if (Object.keys(that.mappingForm).length == 0) { @@ -329,25 +591,26 @@ }); } 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 + that.mappingData[findRow].targetAttrName = transferValue[0].name; + that.mappingData[findRow].targetAttrId = transferValue[0].oid; + that.mappingData[findRow].targetAttrKey = transferValue[0].id; + this.dialogPush = false; } }, // 宸︿晶鏍戠偣鍑� 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) - } + this.TreeOid = event.oid; + this.treeParam.codeClassifyId = event.oid + this.form.groupValue = '' + this.groupVal = '' + this.tableData = [] + this.mappingData = [] + this.referTree(event.oid) + this.getListCodeByClassId(event.oid) }, - // 闆嗗洟鍒嗙被鏍戠偣鍑� - handleNodeClick(data) { + // 闆嗗洟鍒嗙被鏍戦�夋嫨 + handleCheck(data) { this.form.groupValue = data.oid this.groupVal = data.name this.$refs.selectTree.blur() @@ -371,6 +634,9 @@ }, // 闆嗗洟鏄犲皠灞炴�ц閫夋嫨锛堝崟鍑伙級 handleMapingClick(row) { + // console.log(row) + this.tableSelectId = row.targetAttrKey || ""; + this.selectRow = row.$index; clearTimeout(this.times) this.mappingForm = row this.times = setTimeout(() => { @@ -395,13 +661,42 @@ done(); }, // 灞炴�у彇鍊艰寖鍥村崟鍏冩牸缂栬緫鍚� - handleMapingUpdate(row, index, done) { - this.$message({ - showClose: true, - message: "淇敼鎴愬姛", - type: "success", - }); - done(); + async handleMapingUpdate(row, index, done) { + const getTargetCorresponding = async (row) => { + return this.targetColumn.dicData.find(column => column.targetAttrName === row.targetAttrName); + }; + + try { + if (!row.targetAttrName) { + this.$message.warning('璇烽�夋嫨瑕佷繚瀛樼殑灞炴�у悕绉帮紒'); + done(); + return; + } + + // 鑾峰彇鐩爣灞炴�т俊鎭� + const {targetAttrId, targetAttrKey, targetAttrName} = await getTargetCorresponding(row); + + + // 鏇存柊琛屾暟鎹� + Object.assign(row, { + targetAttrId: targetAttrId.toLowerCase(), + targetAttrKey: targetAttrKey.toLowerCase(), + targetAttrName: targetAttrName.toLowerCase() + }); + + const response = await batchAddSave({dockingPreAttrMappingVOList: [row]}); + + if (response.status === 200) { + this.$message({ + type: "success", + message: "淇敼鎴愬姛!" + }); + } + } catch (error) { + console.error('澶勭悊鏄犲皠鏇存柊鏃跺嚭閿欙細', error); + } finally { + done(); + } }, // 闆嗗洟鏄犲皠灞炴�ч�夋嫨锛堝崟閫夛級 selectionChange(selection) { @@ -415,37 +710,47 @@ } }, setCurrentRow(selection, row) { + console.log(selection, row) this.mappingForm = row this.disabledPush = false }, handleSelectAll(selection) { this.$refs.crudMapping.toggleSelection() - } + }, + } } </script> <style lang="scss" scoped> - .setstyle { - min-height: 200px; - padding: 0 !important; - margin: 0; - overflow: auto; - cursor: default !important; +.setstyle { + min-height: 200px; + padding: 0 !important; + margin: 0; + overflow: auto; + cursor: default !important; +} + +::v-deep { + .el-transfer-panel__list { + width: 100%; + height: 370px; } - ::v-deep{ - .el-transfer-panel__list { - width: 100%; - height: 370px; - } - .el-transfer-panel__body { - height: 370px; - } - .el-input { - width: auto; - } - .el-transfer-panel { - width: 270px; - } + .el-transfer-panel__body { + height: 370px; } + + .el-input { + width: auto; + } + + .el-transfer-panel { + width: 270px; + } + + .el-scrollbar__view { + height: 100px; + } +} + </style> -- Gitblit v1.9.3