feat(仓库管理): 实现实际仓库的懒加载功能

- 在WarehouseTree组件中为实际仓库类型添加懒加载支持
- 重构ActualWarehouseSelect组件实现树形选择器的懒加载
- 在real.vue页面中使用懒加载表格展示仓库数据
- 优化表单验证和操作逻辑，提升用户体验

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

@@ -1,5 +1,5 @@
 <template>
-  <div style="width: 100%; max-width: 200px;">
+  <div style="width: 100%; max-width: 300px;">
     <treeselect
       :max-height="200"
       v-model="innerValue"
@@ -7,9 +7,8 @@
       :normalizer="normalizer"
       :placeholder="placeholder"
       :clearable="clearable"
-      :disable-branch-nodes="true"
-      :show-count="true"
       search-nested
+      :load-options="loadOptions"
       @input="onInput"
     />
   </div>
@@ -19,15 +18,14 @@
 import Treeselect from '@riophae/vue-treeselect';
 import '@riophae/vue-treeselect/dist/vue-treeselect.css';
 import { listActualWarehouse } from '@/api/wms/actualWarehouse';
-
-
+import { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect';
 
 export default {
   name: 'ActualWarehouseSelect',
   components: { Treeselect },
   props: {
     value: {
-      type: [Number, String, null],
+      type: [Number, String, null], // 仅保留单选类型
       default: null
     },
     placeholder: {
@@ -40,72 +38,119 @@ export default {
     },
     showTop: {
       type: Boolean,
-      default: true // 是否显示顶级节点
+      default: true // 是否显示顶级节点（actualWarehouseId=0）
     }
   },
   data() {
     return {
-      warehouseOptions: [],
       innerValue: this.value,
-      list: []
+      warehouseOptions: [], // 初始选项（含未加载子节点的节点，标记 children: null）
+      loadedChildren: {}, // 缓存已加载的子节点：key=父节点ID，value=子节点数组
+      allLoadedNodes: [] // 存储所有已加载的节点，用于快速查找完整对象
     };
   },
   watch: {
     value(val) {
       this.innerValue = val;
-    }
+    },
   },
   mounted() {
-    this.loadOptions();
+    this.initOptions();
   },
   methods: {
-    loadOptions() {
-      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;
-      });
-    },
-    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;
+    /** 初始化顶级选项 */
+    initOptions() {
+      // 重置状态
+      this.loadedChildren = {};
+      this.allLoadedNodes = [];
+      this.warehouseOptions = [];
+
+      if (this.showTop) {
+        // 显示顶级节点：标记 children: null 表示需要懒加载子节点
+        const topNode = {
+          actualWarehouseId: 0,
+          actualWarehouseName: '顶级节点',
+          children: null, // 关键：标记为未加载子节点
+          isDisabled: false
+        };
+        this.warehouseOptions.push(topNode);
+        this.allLoadedNodes.push(topNode);
+      } else {
+        // 不显示顶级节点：直接加载 parentId=0 的节点作为顶级（初始标记为未加载）
+        this.warehouseOptions.push({
+          actualWarehouseId: 'temp-parent-0', // 临时父节点ID（仅用于触发首次加载）
+          actualWarehouseName: '加载中...',
+          children: null,
+          isDisabled: true
+        });
+        // 触发首次加载 parentId=0 的节点
+        this.loadOptions({
+          action: LOAD_CHILDREN_OPTIONS,
+          parentNode: { id: 0 },
+          callback: (children) => {
+            this.warehouseOptions = children;
+          }
+        });
       }
+    },
+
+    /** 懒加载核心方法 */
+    loadOptions({ action, parentNode, callback, instanceId }) {
+      // 仅处理 "加载子节点" 动作
+      if (action !== LOAD_CHILDREN_OPTIONS) {
+        callback();
+        return;
+      }
+      console.log('加载子节点请求参数：', parentNode);
+
+      const parentId = parentNode.actualWarehouseId; // 当前父节点ID（对应 actualWarehouseId）
+
+      // 2. 调用接口加载子节点（parentId 作为查询条件）
+      listActualWarehouse({ parentId }).then(response => {
+        const children = response.data.map(item => ({
+          ...item,
+          isDisabled: !item.isEnabled, // 禁用未启用的节点
+          children: item.hasChildren ?? true ? null : [] // 有子节点则标记 children: null（需懒加载），否则空数组
+        }));
+
+        // 如果没有子节点了，则不添加children属性
+        if (children.length === 0) {
+          delete parentNode.children;
+          callback()
+          return;
+        }
+
+        // 5. 给父节点赋值子节点（treeselect 自动渲染）
+        parentNode.children = children;
+
+        // 6. 回调通知加载成功
+        callback();
+      }).catch((error) => {
+        console.error('加载子节点失败：', error);
+        callback(new Error('加载失败，请重试'));
+      });
+    },
+
+    /** 节点格式标准化 */
+    normalizer(node) {
       return {
-        id: node.actualWarehouseId,
-        label: node.actualWarehouseName,
-        children: node.children
+        id: node.actualWarehouseId, // 节点唯一ID
+        label: node.actualWarehouseName, // 显示文本
+        children: node.children, // 子节点（null=未加载，[]=无节点）
+        isDisabled: node.isDisabled, // 是否禁用
+        raw: node // 保留原始节点数据，方便后续查找
       };
     },
+
+    /** 选中值变化时触发（仅单选） */
     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);
-      }
+      this.$emit('input', val);
+    },
+
+    /** 外部刷新方法（如需重新加载数据可调用） */
+    refresh() {
+      this.initOptions();
     }
   }
 };
-</script>
+</script>

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

@@ -1,16 +1,7 @@
-
 <template>
-  <el-tree
-    v-loading="loading"
-    :data="treeData"
-    :props="treeProps"
-    node-key="warehouseId"
-    highlight-current
-    @node-click="handleNodeClick"
-    :expand-on-click-node="false"
-    :default-expand-all="true"
-    class="stock-tree"
-  />
+  <el-tree v-loading="loading" :data="treeData" :props="treeProps" node-key="warehouseId" highlight-current
+    @node-click="handleNodeClick" :expand-on-click-node="false"
+    :lazy="this.warehouseType === 'real'" :load="loadChildren" class="stock-tree" />
 </template>
 
 <script>
@@ -45,16 +36,28 @@ export default {
     }
   },
   methods: {
+    loadChildren(node, resolve) {
+      console.log(node);
+      if (node.level === 0) {
+        // resolve(this.handleTree(this.treeData, 'warehouseId', 'parentId'));
+      } else {
+        listActualWarehouse({ parentId: node.data.actualWarehouseId }).then(response => {
+          resolve(response.data.map(item => ({
+            ...item,
+            warehouseLabel: item.actualWarehouseName
+          })));
+        });
+      }
+    },
     getWarehouseTree() {
       this.loading = true;
       if (this.warehouseType === 'real') {
-        listActualWarehouse({ pageSize: 1000 }).then(response => {
-          this.treeData = response.rows.map(item => ({
+        listActualWarehouse({ parentId: 0 }).then(response => {
+          this.treeData = response.data.map(item => ({
             ...item,
             warehouseLabel: item.actualWarehouseName
           }))
           this.loading = false;
-          // this.treeData = [{ warehouseName: '全部', value: undefined },  ...this.handleTree(response.rows, 'warehouseId', 'parentId')];
         });
       } else {
         listWarehouse().then(response => {
@@ -63,7 +66,6 @@ export default {
             warehouseLabel: item.warehouseName
           }))
           this.loading = false;
-          // this.treeData = [{ warehouseName: '全部', value: undefined },  ...this.handleTree(response.data, 'warehouseId', 'parentId')];
         });
       }
     },
@@ -80,22 +82,4 @@ export default {
     }
   }
 };
-</script>
-
-<!-- <style scoped>
-.stock-tree-card {
-  height: 100%;
-  border: none;
-  box-shadow: none;
-}
-.stock-tree-title {
-  font-weight: bold;
-  font-size: 16px;
-  padding: 8px 0;
-}
-.stock-tree {
-  min-height: 500px;
-  max-height: 80vh;
-  overflow-y: auto;
-}
-</style> -->
+</script>