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 |  112 +++++++++++++++++++++++++++++++++++++++++++++----------
 1 files changed, 91 insertions(+), 21 deletions(-)

diff --git a/src/views/dnc/base/modules/DeviceStructure/DeviceStructureTree.vue b/src/views/dnc/base/modules/DeviceStructure/DeviceStructureTree.vue
index fef8b3d..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,7 +91,12 @@
       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
@@ -102,6 +120,10 @@
           })
       },
 
+      /**
+       * 閫氳繃鍙充晶tab鏍忔墍鍦╝ctiveKey璁剧疆褰撳墠璁惧鐨凬C鏂囨。绫诲瀷
+       * @param documentActiveTabKey 鍙充晶tab鏍忕殑activeKey
+       */
       setCurrentDeviceDocClassCode(documentActiveTabKey) {
         if (documentActiveTabKey === 1) this.currentDeviceDocClassCode = 'SEND'
         else this.currentDeviceDocClassCode = 'REC'
@@ -119,7 +141,6 @@
         this.$bus.$emit('sendDeviceTreeNodeInfo', this.currentSelected)
         if (selectedKeys.length === 0) return
         this.selectedKeys = selectedKeys
-
       },
 
       /**
@@ -128,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)
       },
 
       /**
@@ -140,7 +163,6 @@
        */
       handleTreeExpand(expandedKeys) {
         this.expandedKeys = this.beforeSearchExpandedKeys = expandedKeys
-        console.log('beforeSearchExpandedKeys', this.beforeSearchExpandedKeys)
         this.autoExpandParent = false
       },
 
@@ -210,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)
       },
 
       /**
@@ -219,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]()
       }
     }
   }
@@ -247,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