From f2d1b5615b05c002ec63db4df7164c9ed3ecc4a3 Mon Sep 17 00:00:00 2001 From: zhaowei <zhaowei> Date: 星期二, 26 八月 2025 16:42:21 +0800 Subject: [PATCH] 1、优化产品结构树以及设备结构树、列表右键菜单重复右键后出现window菜单问题 2、优化产品结构树节点删除后的loading展示时机 3、优化产品以及设备结构树权限配置获取列表时的loading展示时机 --- src/views/dnc/base/modules/DeviceStructure/DeviceStructureTree.vue | 113 ++++++++++++++++++++++++++++++++++++++++++++++---------- 1 files changed, 92 insertions(+), 21 deletions(-) diff --git a/src/views/dnc/base/modules/DeviceStructure/DeviceStructureTree.vue b/src/views/dnc/base/modules/DeviceStructure/DeviceStructureTree.vue index a930ddd..c2db72b 100644 --- a/src/views/dnc/base/modules/DeviceStructure/DeviceStructureTree.vue +++ b/src/views/dnc/base/modules/DeviceStructure/DeviceStructureTree.vue @@ -1,30 +1,34 @@ <template> - <a-card class="tree_con" :loading="cardLoading" :bordered="false" @contextmenu.native="e=>e.preventDefault()"> + <a-card class="tree_con" :loading="cardLoading" :bordered="false" @contextmenu.native.stop="openBaseContextMenu"> <a-spin :spinning="loading"> <div style="display: flex;flex-direction: column;height: 100%"> <div style="display: flex"> <a-input placeholder="杈撳叆鍏抽敭瀛楄繘琛屾悳绱�" allowClear v-model="searchInput" @change="handleSearchInputChange"/> - <a-dropdown :trigger="['click']" placement="bottomCenter" style="margin: 0 8px"> - <a-menu slot="overlay"> - <a-menu-item key="1" @click="expandedKeys = allTreeKeys">灞曞紑鎵�鏈�</a-menu-item> - <a-menu-item key="2" @click="expandedKeys = ['-1']">鍚堝苟鎵�鏈�</a-menu-item> - <a-menu-item key="3" @click="getTreeDataByApi">鍒锋柊</a-menu-item> - </a-menu> - <a-button> - <a-icon type="bars"/> - </a-button> - </a-dropdown> + <!-- <a-dropdown :trigger="['click']" placement="bottomCenter" style="margin: 0 8px">--> + <!-- <a-menu slot="overlay">--> + <!-- <a-menu-item key="1" @click="expandedKeys = allTreeKeys">灞曞紑鎵�鏈�</a-menu-item>--> + <!-- <a-menu-item key="2" @click="expandedKeys = ['-1']">鍚堝苟鎵�鏈�</a-menu-item>--> + <!-- <a-menu-item key="3" @click="getTreeDataByApi">鍒锋柊</a-menu-item>--> + <!-- </a-menu>--> + <!-- <a-button>--> + <!-- <a-icon type="bars"/>--> + <!-- </a-button>--> + <!-- </a-dropdown>--> </div> <!--璁惧缁撴瀯鏍�--> - <div style="flex: 1;overflow:auto;margin-top: 10px"> + <div id="tree-container" style="flex: 1;overflow:auto;margin-top: 10px"> <a-tree blockNode show-icon :expandedKeys.sync="expandedKeys" :selectedKeys="selectedKeys" :treeData="treeDataSource" :autoExpandParent="autoExpandParent" @select="handleTreeSelect" @expand="handleTreeExpand" @rightClick="handleTreeRightClick"> - <template slot="title" slot-scope="{ title, parentId, entity, key:treeKey,equipmentId,type}"> - <DeviceStructureTreeContextMenu ref="contextMenuRef" - :treeParams="{title,treeKey,searchValue,equipmentId,entity,type,param:currentDeviceDocClassCode}"/> + <template slot="title" slot-scope="{ title }"> + <span v-if="title.indexOf(searchValue) > -1"> + {{ title.substr(0, title.indexOf(searchValue)) }} + <span class="replaceSearch">{{ searchValue }}</span> + {{ title.substr(title.indexOf(searchValue) + searchValue.length) }} + </span> + <span v-else>{{ title }}</span> </template> <a-icon slot="switcherIcon" type="down"/> @@ -37,6 +41,12 @@ <!--鏉冮檺閰嶇疆寮圭獥--> <AssignPermissionModal :currentTreeNodeInfo="rightClickSelected" @submitSuccess="getTreeDataByApi"/> + + <!--璁惧缁撴瀯鏍戞爲鑺傜偣鍙抽敭鑿滃崟锛堟爲鑺傜偣瑙﹀彂锛�--> + <device-structure-tree-context-menu ref="mainContextmenuRef" :treeParams="rightClickSelected"/> + + <!--璁惧缁撴瀯鏍戝熀鏈彸閿彍鍗�(绌虹櫧澶勮Е鍙�)--> + <DeviceStructureBaseContextMenu ref="baseContextmenuRef"/> </a-card> </template> @@ -44,10 +54,13 @@ import dncApi from '@/api/dnc' import DeviceStructureTreeContextMenu from './DeviceStructureTreeContextMenu' import AssignPermissionModal from './Permission/AssignPermissionModal' + import DeviceStructureBaseContextMenu + from '@views/dnc/base/modules/DeviceStructure/DeviceStructureBaseContextMenu.vue' export default { name: 'DeviceStructureTree', components: { + DeviceStructureBaseContextMenu, AssignPermissionModal, DeviceStructureTreeContextMenu }, @@ -78,10 +91,16 @@ this.$bus.$on('treeMenuItemMethodTrigger', this.triggerCorrespondingMethod) this.$bus.$on('handleSwitchDeviceDocClassCode', this.setCurrentDeviceDocClassCode) }, + beforeDestroy() { + this.$bus.$off('treeMenuItemMethodTrigger', this.triggerCorrespondingMethod) + this.$bus.$off('handleSwitchDeviceDocClassCode', this.setCurrentDeviceDocClassCode) + }, methods: { + // 璋冪敤鎺ュ彛鑾峰彇鏍戠殑鏁版嵁 getTreeDataByApi() { this.loading = true this.cardLoading = true + this.treeDataSource = [] dncApi.getDeviceTreeDataApi() .then(res => { if (res.success) { @@ -101,6 +120,10 @@ }) }, + /** + * 閫氳繃鍙充晶tab鏍忔墍鍦╝ctiveKey璁剧疆褰撳墠璁惧鐨凬C鏂囨。绫诲瀷 + * @param documentActiveTabKey 鍙充晶tab鏍忕殑activeKey + */ setCurrentDeviceDocClassCode(documentActiveTabKey) { if (documentActiveTabKey === 1) this.currentDeviceDocClassCode = 'SEND' else this.currentDeviceDocClassCode = 'REC' @@ -118,7 +141,6 @@ this.$bus.$emit('sendDeviceTreeNodeInfo', this.currentSelected) if (selectedKeys.length === 0) return this.selectedKeys = selectedKeys - }, /** @@ -127,10 +149,12 @@ * @param node 鑺傜偣瀵硅薄 */ handleTreeRightClick({ event, node }) { + if (this.$refs.baseContextmenuRef) this.$refs.baseContextmenuRef.menuVisible = false const record = node.dataRef // 鑻ュ彸閿椂褰撳墠鍙充晶灞曠ず灞傜骇涓鸿澶囧眰绾т笖褰撳墠鍙抽敭鏍戝眰绾у悓涓鸿澶囧眰绾ф椂鍒欏湪瑙﹀彂鍙抽敭鑿滃崟鍔熻兘鏃跺悓鏃惰Е鍙戝乏閿�変腑鍔熻兘 if (this.currentSelected.type === 2 && record.type === 2) this.handleTreeSelect([record.key], { node }) - this.rightClickSelected = Object.assign({}, record) + this.rightClickSelected = Object.assign({ param: this.currentDeviceDocClassCode }, record) + this.openMainContextMenu(event) }, /** @@ -139,7 +163,6 @@ */ handleTreeExpand(expandedKeys) { this.expandedKeys = this.beforeSearchExpandedKeys = expandedKeys - console.log('beforeSearchExpandedKeys', this.beforeSearchExpandedKeys) this.autoExpandParent = false }, @@ -209,8 +232,29 @@ } }, - triggerCorrespondingMethod({ methodName }) { - if (this[methodName]) this[methodName]() + /** + * 鎵撳紑鏍戣妭鐐硅彍鍗曚簨浠� + * @param event 鏍戣妭鐐逛簨浠跺璞� + */ + openMainContextMenu(event) { + this.$refs.mainContextmenuRef.menuStyle.top = event.clientY + 'px' + this.$refs.mainContextmenuRef.menuStyle.left = event.clientX + 'px' + this.$refs.mainContextmenuRef.menuVisible = true + document.body.addEventListener('click', this.handleMainContextMenuClose) + }, + + /** + * 鏍戞墍鍦ㄧ埗鍏冪礌鐨勫彸閿簨浠� + * @param event 浜嬩欢瀵硅薄 + */ + openBaseContextMenu(event) { + event.preventDefault() + if (event.target.id !== 'tree-container') return + if (this.$refs.mainContextmenuRef) this.$refs.mainContextmenuRef.menuVisible = false + this.$refs.baseContextmenuRef.menuStyle.top = event.clientY + 'px' + this.$refs.baseContextmenuRef.menuStyle.left = event.clientX + 'px' + this.$refs.baseContextmenuRef.menuVisible = true + document.body.addEventListener('click', this.handleBaseContextMenuClose) }, /** @@ -218,11 +262,32 @@ * @param treeNode */ setTreeNodeIcon(treeNode) { - if (!treeNode.equipmentId) { + if (+treeNode.type === 1) { treeNode.slots = { icon: 'workshop' } } else { treeNode.slots = { icon: 'device' } } + }, + + // 鎺у埗涓昏鍙抽敭鑿滃崟鍏抽棴 + handleMainContextMenuClose() { + if (this.$refs.mainContextmenuRef) this.$refs.mainContextmenuRef.menuVisible = false + document.body.removeEventListener('click', this.handleMainContextMenuClose) + }, + + // 鎺у埗鍩虹鍙抽敭鑿滃崟鍏抽棴 + handleBaseContextMenuClose() { + this.$refs.baseContextmenuRef.menuVisible = false + document.body.removeEventListener('click', this.handleBaseContextMenuClose) + }, + + // 鍒锋柊閲嶆柊鑾峰彇鏍戠殑鏁版嵁 + handleTreeReload() { + this.getTreeDataByApi() + }, + + triggerCorrespondingMethod({ methodName }) { + if (this[methodName]) this[methodName]() } } } @@ -246,6 +311,12 @@ width: 8px; } + .replaceSearch { + color: #40a9ff; + font-weight: bold; + background-color: rgb(204, 204, 204); + } + @media screen and (min-width: 1920px) { .tree_con { height: 748px !important; -- Gitblit v1.9.3