搜索

src/designer/viewWidgets/toolbox/ToolboxView.vue

@@ -13,7 +13,9 @@
   <div class="calc-left-panel toolbox-view">
     <el-menu class="el-menu-vertical-demo"
              @open="handleOpen"
-             @close="handleClose">
+             @close="handleClose"
+             :default-openeds="defaultExpandedKeys"
+             >
       <el-sub-menu v-for="itemType in itemTypes" :title="itemType.label" :index="itemType.name">
         <template #title>
           <component :is="renderIcon(itemType.icon)" />
@@ -28,7 +30,6 @@
       </el-sub-menu>
     </el-menu>
   </div>
-
 </template>
 <script>
 import { renderIcon } from '@/utils/webutils.js'
@@ -38,6 +39,7 @@ export default {
   data() {
     return {
       searchKeyword: '',
+      defaultExpandedKeys: [],
       itemTypes: [
         {
           name: 'point', icon: 'antd AimOutlined', label: '点',
@@ -59,19 +61,19 @@ export default {
         {
           name: 'store', icon: 'fa BuildingRegular', label: '存储',
           children: [
-            { name: 'queue', icon: 'element Queue', label: '暂存区' },
+            { name: 'queue', icon: 'antd CodeSandboxCircleFilled', label: '暂存区' },
-            { name: 'ground_rack', icon: 'element GroundRack', label: '地堆区' },
+            { name: 'ground_rack', icon: 'antd CodeSandboxOutlined', label: '地堆区' },
-            { name: 'rack', icon: 'element Rack', label: '常规货架' },
+            { name: 'rack', icon: 'antd BgColorsOutlined', label: '常规货架' },
-            { name: 'asrs_rack', icon: 'element AsrsRack', label: '立库货架' },
+            { name: 'asrs_rack', icon: 'antd InsertRowBelowOutlined', label: '立库货架' },
-            { name: 'flash_rack', icon: 'element FlashRack', label: '密集库货架' },
+            { name: 'flash_rack', icon: 'antd TableOutlined', label: '密集库货架' },
-            { name: 'shuttle_rack', icon: 'element ShuttleRack', label: '多穿库货架' },
+            { name: 'shuttle_rack', icon: 'antd BorderOuterOutlined', label: '多穿库货架' },
-            { name: 'pd', icon: 'element Pd', label: '层间线' }
+            { name: 'pd', icon: 'antd BorderInnerOutlined', label: '层间线' }
           ]
         },
         {
           name: 'executer', icon: 'antd CarOutlined', label: '任务执行器',
           children: [
-            { name: 'stacker', icon: 'element Stacker', label: '堆垛机' },
+            { name: 'stacker', icon: 'antd BuildOutlined', label: '堆垛机' },
             { name: 'laser', icon: 'element Laser', label: '两向穿梭车' },
             { name: 'flash', icon: 'element Flash', label: '四向穿梭车' },
             { name: 'flash_tp', icon: '', label: '穿梭板' },
@@ -119,7 +121,36 @@ export default {
     },
     handleClose(key, keyPath) {
       console.log(key, keyPath)
+    },
+    updateFilteredItemsAndExpand() {
+      const expandedKeys = [];
+      this.itemTypes.forEach(itemType => {
+        const filteredChildren = itemType.children.filter(item =>
+            item.label.includes(this.searchKeyword) || item.name.includes(this.searchKeyword));
+        if (filteredChildren.length > 0) {
+          expandedKeys.push(itemType.name);
         }
+        itemType.children = filteredChildren;
+      });
+      this.defaultExpandedKeys = expandedKeys;
+    }
+  },
+  watch:{
+    searchKeyword(newVal) {
+      if (!newVal) {
+        // 如果搜索框为空，则重置菜单状态
+        this.itemTypes.forEach(itemType => {
+          itemType.children = this.originalItemTypes.find(originalItemType => originalItemType.name === itemType.name).children;
+        });
+        this.defaultExpandedKeys = [];
+      } else {
+        this.updateFilteredItemsAndExpand();
+      }
+    }
+  },
+  mounted() {
+    // 保存原始的 itemTypes 用于重置
+    this.originalItemTypes = JSON.parse(JSON.stringify(this.itemTypes));
   }
 }
 </script>