refactor(ActualWarehouseSelect): 替换el-select为treeselect组件并优化功能

重构实际仓库选择组件，使用vue-treeselect替代原有el-select实现树形选择功能
优化数据处理逻辑，增加对顶级节点的支持
调整样式布局，限制最大宽度为200px

klp-ui/src/components/KLPService/ActualWarehouseSelect/index.vue

@@ -1,32 +1,30 @@
 <template>
-  <el-select
-    v-model="selected"
-    :placeholder="placeholder"
-    :clearable="clearable"
-    :disabled="disabled"
-    :size="size"
-    filterable
-    @change="onChange"
-    style="width: 100%"
-  >
-    <el-option
-      v-for="item in warehouseOptions"
-      :key="item.actualWarehouseId"
-      :label="item.actualWarehouseName"
-      :value="item.actualWarehouseId"
-    >
-      <span :style="{ paddingLeft: item.level * 20 + 'px' }">
-        {{ item.actualWarehouseName }}
-      </span>
-    </el-option>
-  </el-select>
+  <div style="width: 100%; max-width: 200px;">
+    <treeselect
+      :max-height="200"
+      v-model="innerValue"
+      :options="warehouseOptions"
+      :normalizer="normalizer"
+      :placeholder="placeholder"
+      :clearable="clearable"
+      :disable-branch-nodes="true"
+      :show-count="true"
+      search-nested
+      @input="onInput"
+    />
+  </div>
 </template>
 
 <script>
+import Treeselect from '@riophae/vue-treeselect';
+import '@riophae/vue-treeselect/dist/vue-treeselect.css';
 import { listActualWarehouse } from '@/api/wms/actualWarehouse';
 
+
+
 export default {
   name: 'ActualWarehouseSelect',
+  components: { Treeselect },
   props: {
     value: {
       type: [Number, String, null],
@@ -34,34 +32,27 @@ export default {
     },
     placeholder: {
       type: String,
-      default: '请选择实际库区/库位'
+      default: '请选择库区/仓库/库位'
     },
     clearable: {
       type: Boolean,
       default: true
     },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    size: {
-      type: String,
-      default: 'mini'
-    },
     showTop: {
       type: Boolean,
-      default: false // 是否显示顶级节点
+      default: true // 是否显示顶级节点
     }
   },
   data() {
     return {
       warehouseOptions: [],
-      selected: this.value
+      innerValue: this.value,
+      list: []
     };
   },
   watch: {
     value(val) {
-      this.selected = val;
+      this.innerValue = val;
     }
   },
   mounted() {
@@ -69,52 +60,52 @@ export default {
   },
   methods: {
     loadOptions() {
-      listActualWarehouse({ pageSize: 1000 }).then(response => {
-        console.log('实际库区/库位自关联API返回数据:', response);
-        const data = response.rows || [];
-        console.log('处理后的数据:', data);
-        // this.warehouseOptions = this.buildTreeOptions(data);
-        this.warehouseOptions = data;
-        console.log('构建的树形选项:', this.warehouseOptions);
-      }).catch(error => {
-        console.error("加载仓库选项失败:", error);
-        this.warehouseOptions = [];
-      });
-    },
-    buildTreeOptions(data, parentId = null, level = 0) {
-      const options = [];
-      
-      data.forEach(item => {
-        if (item.parentId === parentId) {
-          const option = {
-            warehouseId: item.warehouseId,
-            warehouseName: item.warehouseName,
-            level: level
-          };
-          
-          // 递归构建子节点
-          const children = this.buildTreeOptions(data, item.warehouseId, level + 1);
-          if (children.length > 0) {
-            options.push(option);
-            options.push(...children);
-          } else {
-            options.push(option);
-          }
+      listActualWarehouse().then(response => {
+        this.list = response.data.map(item => ({
+          ...item,
+          isDisabled: !item.isEnabled
+        }));
+        const options = [];
+        if (this.showTop) {
+          const top = { actualWarehouseId: 0, actualWarehouseName: '顶级节点', children: [] };
+          top.children = this.handleTree(response.data, 'actualWarehouseId', 'parentId');
+          options.push(top);
+        } else {
+          options.push(...this.handleTree(response.data, 'actualWarehouseId', 'parentId'));
         }
+        this.warehouseOptions = options;
       });
-      
-      return options;
     },
-    onChange(val) {
-      this.$emit('input', val);
-      this.$emit('change', val);
+    handleTree(data, id, parentId) {
+      const cloneData = JSON.parse(JSON.stringify(data));
+      return cloneData.filter(father => {
+        const branchArr = cloneData.filter(child => father[id] === child[parentId]);
+        if (branchArr.length > 0) father.children = branchArr;
+        return father[parentId] === 0 || father[parentId] === null;
+      });
+    },
+    normalizer(node) {
+      if (node.children && !node.children.length) {
+        delete node.children;
+      }
+      return {
+        id: node.actualWarehouseId,
+        label: node.actualWarehouseName,
+        children: node.children
+      };
+    },
+    onInput(val) {
+      // 选中顶级节点时，返回null
+      if (val === 0) {
+        this.$emit('input', 0);
+        this.innerValue = 0;
+      } else {
+        this.$emit('input', val);
+        // 查找完整的实际仓库对象
+        const actualWarehouse = this.list.find(item => item.actualWarehouseId === val);
+        this.$emit('change', actualWarehouse);
+      }
     }
   }
 };
 </script>
-
-<style scoped>
-.el-select {
-  width: 100%;
-}
-</style>