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 => {
+    initOptions() {
-        this.list = response.data.map(item => ({
+      // 重置状态
-          ...item,
+      this.loadedChildren = {};
-          isDisabled: !item.isEnabled
+      this.allLoadedNodes = [];
-        }));
+      this.warehouseOptions = [];
-        const options = [];
+
-        if (this.showTop) {
+      if (this.showTop) {
-          const top = { actualWarehouseId: 0, actualWarehouseName: '顶级节点', children: [] };
+        // 显示顶级节点：标记 children: null 表示需要懒加载子节点
-          top.children = this.handleTree(response.data, 'actualWarehouseId', 'parentId');
+        const topNode = {
-          options.push(top);
+          actualWarehouseId: 0,
-        } else {
+          actualWarehouseName: '顶级节点',
-          options.push(...this.handleTree(response.data, 'actualWarehouseId', 'parentId'));
+          children: null, // 关键：标记为未加载子节点
-        }
+          isDisabled: false
-        this.warehouseOptions = options;
+        };
-      });
+        this.warehouseOptions.push(topNode);
-    },
+        this.allLoadedNodes.push(topNode);
-    handleTree(data, id, parentId) {
+      } else {
-      const cloneData = JSON.parse(JSON.stringify(data));
+        // 不显示顶级节点：直接加载 parentId=0 的节点作为顶级（初始标记为未加载）
-      return cloneData.filter(father => {
+        this.warehouseOptions.push({
-        const branchArr = cloneData.filter(child => father[id] === child[parentId]);
+          actualWarehouseId: 'temp-parent-0', // 临时父节点ID（仅用于触发首次加载）
-        if (branchArr.length > 0) father.children = branchArr;
+          actualWarehouseName: '加载中...',
-        return father[parentId] === 0 || father[parentId] === null;
+          children: null,
-      });
+          isDisabled: true
-    },
+        });
-    normalizer(node) {
+        // 触发首次加载 parentId=0 的节点
-      if (node.children && !node.children.length) {
+        this.loadOptions({
-        delete node.children;
+          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,
+        id: node.actualWarehouseId, // 节点唯一ID
-        label: node.actualWarehouseName,
+        label: node.actualWarehouseName, // 显示文本
-        children: node.children
+        children: node.children, // 子节点（null=未加载，[]=无节点）
+        isDisabled: node.isDisabled, // 是否禁用
+        raw: node // 保留原始节点数据，方便后续查找
       };
     },
+
+    /** 选中值变化时触发（仅单选） */
     onInput(val) {
-      // 选中顶级节点时，返回null
+      this.$emit('input', val);
-      if (val === 0) {
+    },
-        this.$emit('input', 0);
+
-        this.innerValue = 0;
+    /** 外部刷新方法（如需重新加载数据可调用） */
-      } else {
+    refresh() {
-        this.$emit('input', val);
+      this.initOptions();
-        // 查找完整的实际仓库对象
-        const actualWarehouse = this.list.find(item => item.actualWarehouseId === val);
-        this.$emit('change', actualWarehouse);
-      }
     }
   }
 };
-</script>
+</script>

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

@@ -1,16 +1,7 @@
-
 <template>
-  <el-tree
+  <el-tree v-loading="loading" :data="treeData" :props="treeProps" node-key="warehouseId" highlight-current
-    v-loading="loading"
+    @node-click="handleNodeClick" :expand-on-click-node="false"
-    :data="treeData"
+    :lazy="this.warehouseType === 'real'" :load="loadChildren" class="stock-tree" />
-    :props="treeProps"
-    node-key="warehouseId"
-    highlight-current
-    @node-click="handleNodeClick"
-    :expand-on-click-node="false"
-    :default-expand-all="true"
-    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 => {
+        listActualWarehouse({ parentId: 0 }).then(response => {
-          this.treeData = response.rows.map(item => ({
+          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>
+</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> -->

klp-ui/src/views/wms/warehouse/real.vue

@@ -34,7 +34,7 @@
         />
       </el-form-item>
       <el-form-item>
-	    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
       </el-form-item>
     </el-form>
@@ -61,18 +61,26 @@
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
+    <!-- 懒加载树形表格核心配置：lazy + load + ref -->
     <el-table
-      v-if="refreshTable"
+      ref="treeTable"
       v-loading="loading"
       :data="actualWarehouseList"
       row-key="actualWarehouseId"
-      :default-expand-all="isExpandAll"
+      lazy
+      :load="loadChildren"
       :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
     >
       <el-table-column label="库位编码" align="center" prop="actualWarehouseCode" />
       <el-table-column label="库位名称" align="center" prop="actualWarehouseName" />
+      <el-table-column label="占用状态" align="center" prop="isEnabled">
+        <template slot-scope="scope">
+          <el-tag :type="scope.row.isEnabled === 1 ? 'success' : 'danger'">
+            {{ scope.row.isEnabled === 1 ? '空闲' : '占用' }}
+          </el-tag>
+        </template>
+      </el-table-column>
       <el-table-column label="同级排序号" align="center" prop="sortNo" />
-      <!-- <el-table-column label="是否启用" align="center" prop="isEnabled" /> -->
       <el-table-column label="备注" align="center" prop="remark" />
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
@@ -102,7 +110,8 @@
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
         <el-form-item label="父节点" prop="parentId">
-          <treeselect :max-height="200" v-model="form.parentId" :options="actualWarehouseOptions" :normalizer="normalizer" placeholder="请选择父节点ID" />
+          <ActualWarehouseSelect v-model="form.parentId"></ActualWarehouseSelect>
+          <!-- <treeselect :max-height="200" v-model="form.parentId" :options="actualWarehouseOptions" :normalizer="normalizer" placeholder="请选择父节点ID" /> -->
         </el-form-item>
         <el-form-item label="库位编码" prop="actualWarehouseCode">
           <el-input v-model="form.actualWarehouseCode" placeholder="请输入实际库区/库位编码" />
@@ -111,11 +120,8 @@
           <el-input v-model="form.actualWarehouseName" placeholder="请输入实际库区/库位名称" />
         </el-form-item>
         <el-form-item label="排序" prop="sortNo">
-          <el-input v-model="form.sortNo" placeholder="请输入同级排序号" />
+          <el-input v-model="form.sortNo" type="number" placeholder="请输入同级排序号" />
         </el-form-item>
-        <!-- <el-form-item label="是否启用" prop="isEnabled">
-          <el-input v-model="form.isEnabled" placeholder="请输入是否启用" />
-        </el-form-item> -->
         <el-form-item label="备注" prop="remark">
           <el-input v-model="form.remark" placeholder="请输入备注" />
         </el-form-item>
@@ -130,23 +136,25 @@
 
 <script>
 import { listActualWarehouse, getActualWarehouse, delActualWarehouse, addActualWarehouse, updateActualWarehouse } from "@/api/wms/actualWarehouse";
-import Treeselect from "@riophae/vue-treeselect";
+// import Treeselect from "@riophae/vue-treeselect";
-import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+// import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+import ActualWarehouseSelect from "@/components/KLPService/ActualWarehouseSelect";
 
 export default {
   name: "ActualWarehouse",
   components: {
-    Treeselect
+    // Treeselect,
+    ActualWarehouseSelect
   },
   data() {
     return {
       // 按钮loading
       buttonLoading: false,
-      // 遮罩层
+      // 遮罩层（仅控制根节点加载）
       loading: true,
       // 显示搜索条件
       showSearch: true,
-      // 实际库区/库位自关联表格数据
+      // 根节点数据（懒加载模式下仅存储当前层级数据）
       actualWarehouseList: [],
       // 实际库区/库位自关联树选项
       actualWarehouseOptions: [],
@@ -154,13 +162,11 @@ export default {
       title: "",
       // 是否显示弹出层
       open: false,
-      // 是否展开，默认全部展开
+      // 是否全部展开（懒加载下仅控制已加载节点）
-      isExpandAll: true,
+      isExpandAll: false,
-      // 重新渲染表格状态
+      // 查询参数（核心：parentId用于懒加载子节点）
-      refreshTable: true,
-      // 查询参数
       queryParams: {
-        parentId: undefined,
+        parentId: 0, // 初始加载根节点（parentId=0）
         actualWarehouseCode: undefined,
         actualWarehouseName: undefined,
         actualWarehouseType: undefined,
@@ -171,22 +177,63 @@ export default {
       form: {},
       // 表单校验
       rules: {
+        actualWarehouseCode: [{ required: true, message: "请输入库位编码", trigger: "blur" }],
+        actualWarehouseName: [{ required: true, message: "请输入库位名称", trigger: "blur" }],
+        sortNo: [{ required: true, type: "number", message: "请输入有效排序号", trigger: "blur" }]
       }
     };
   },
   created() {
-    this.getList();
+    this.getList(); // 初始加载根节点
   },
   methods: {
-    /** 查询实际库区/库位自关联列表 */
+    /** 加载根节点数据（parentId=0） */
     getList() {
       this.loading = true;
+      // 强制设置parentId=0，加载根节点
+      this.queryParams.parentId = 0;
       listActualWarehouse(this.queryParams).then(response => {
-        this.actualWarehouseList = this.handleTree(response.data, "actualWarehouseId", "parentId");
+        // 为根节点添加hasChildren标识（后端未返回时默认true，确保显示展开按钮）
+        this.actualWarehouseList = response.data.map(node => ({
+          ...node,
+          hasChildren: node.hasChildren ?? true // 双问号兼容null/undefined
+        }));
+        this.loading = false;
+      }).catch(() => {
         this.loading = false;
       });
     },
-    /** 转换实际库区/库位自关联数据结构 */
+
+    /** 懒加载子节点核心方法（Element UI自带回调） */
+    loadChildren(treeData, treeNode, resolve) {
+      // treeNode：当前展开的父节点对象，treeNode.data为父节点数据
+      console.log(treeNode, resolve);
+      const parentId = treeData.actualWarehouseId;
+      
+      // 构造子节点查询参数（继承当前查询条件，仅修改parentId）
+      const childParams = {
+        ...this.queryParams,
+        parentId: parentId // 关键：用父节点ID作为子节点查询条件
+      };
+
+      // 显示节点加载状态
+      treeNode.loading = true;
+
+      // 调用接口加载子节点
+      listActualWarehouse(childParams).then(response => {
+        const children = response.data.map(node => ({
+          ...node,
+          hasChildren: node.hasChildren ?? false // 子节点默认可能无下级，根据实际业务调整
+        }));
+        treeNode.loading = false;
+        resolve(children); // 回调返回子节点数据，表格自动渲染
+      }).catch(() => {
+        treeNode.loading = false;
+        resolve([]); // 加载失败返回空数组
+      });
+    },
+
+    /** 转换实际库区/库位自关联数据结构（下拉树用） */
     normalizer(node) {
       if (node.children && !node.children.length) {
         delete node.children;
@@ -197,122 +244,147 @@ export default {
         children: node.children
       };
     },
-	/** 查询实际库区/库位自关联下拉树结构 */
+
-    getTreeselect() {
+    // /** 查询实际库区/库位自关联下拉树结构 */
-      listActualWarehouse().then(response => {
+    // getTreeselect() {
-        this.actualWarehouseOptions = [];
+    //   listActualWarehouse().then(response => {
-        const data = { actualWarehouseId: 0, actualWarehouseName: '顶级节点', children: [] };
+    //     this.actualWarehouseOptions = [];
-        data.children = this.handleTree(response.data, "actualWarehouseId", "parentId");
+    //     const data = { actualWarehouseId: 0, actualWarehouseName: '顶级节点', children: [] };
-        this.actualWarehouseOptions.push(data);
+    //     data.children = this.handleTree(response.data, "actualWarehouseId", "parentId");
+    //     this.actualWarehouseOptions.push(data);
+    //   });
+    // },
+
+    // 树形结构处理（仅下拉树用，懒加载表格无需）
+    handleTree(data, id, parentId, children = 'children') {
+      const result = [];
+      const map = {};
+      data.forEach(item => {
+        map[item[id]] = item;
       });
+      data.forEach(item => {
+        const parent = map[item[parentId]];
+        if (parent) {
+          (parent[children] || (parent[children] = [])).push(item);
+        } else {
+          result.push(item);
+        }
+      });
+      return result;
     },
+
     // 取消按钮
     cancel() {
       this.open = false;
       this.reset();
     },
+
     // 表单重置
     reset() {
       this.form = {
         actualWarehouseId: null,
-        parentId: null,
+        parentId: 0, // 默认顶级节点
         actualWarehouseCode: null,
         actualWarehouseName: null,
         actualWarehouseType: 1,
         sortNo: 0,
         isEnabled: null,
         delFlag: null,
-        remark: null,
+        remark: null
-        createTime: null,
-        createBy: null,
-        updateTime: null,
-        updateBy: null
       };
       this.resetForm("form");
     },
-    /** 搜索按钮操作 */
+
+    /** 搜索按钮操作（重新加载根节点 + 清空已加载子节点） */
     handleQuery() {
       this.getList();
+      // 清空表格已加载的子节点缓存
+      if (this.$refs.treeTable) {
+        this.$refs.treeTable.store.clearNodes();
+      }
     },
+
     /** 重置按钮操作 */
     resetQuery() {
       this.resetForm("queryForm");
       this.handleQuery();
     },
+
     /** 新增按钮操作 */
     handleAdd(row) {
       this.reset();
-      this.getTreeselect();
+      // this.getTreeselect();
-      if (row != null && row.actualWarehouseId) {
+      // 若从节点操作栏点击新增，设置父节点为当前节点ID
+      if (row?.actualWarehouseId) {
         this.form.parentId = row.actualWarehouseId;
-      } else {
-        this.form.parentId = 0;
       }
       this.open = true;
       this.title = "添加实际库区/库位自关联";
     },
-    /** 展开/折叠操作 */
+
+    /** 展开/折叠所有已加载节点 */
     toggleExpandAll() {
-      this.refreshTable = false;
+      const treeTable = this.$refs.treeTable;
+      if (!treeTable) return;
+      
       this.isExpandAll = !this.isExpandAll;
-      this.$nextTick(() => {
+      if (this.isExpandAll) {
-        this.refreshTable = true;
+        treeTable.expandAll(); // 展开所有已加载节点
-      });
+      } else {
+        treeTable.collapseAll(); // 折叠所有节点
+      }
     },
+
     /** 修改按钮操作 */
     handleUpdate(row) {
-	  this.loading = true;
+      this.loading = true;
       this.reset();
-      this.getTreeselect();
+      // this.getTreeselect();
-      if (row != null) {
+      
-        this.form.parentId = row.actualWarehouseId;
-      }
       getActualWarehouse(row.actualWarehouseId).then(response => {
-	    this.loading = false;
+        this.loading = false;
         this.form = response.data;
         this.open = true;
         this.title = "修改实际库区/库位自关联";
+      }).catch(() => {
+        this.loading = false;
       });
     },
+
     /** 提交按钮 */
     submitForm() {
       this.$refs["form"].validate(valid => {
         if (valid) {
-		  this.buttonLoading = true;
+          this.buttonLoading = true;
-          if (this.form.actualWarehouseId != null) {
+          const request = this.form.actualWarehouseId 
-            updateActualWarehouse(this.form).then(response => {
+            ? updateActualWarehouse(this.form) 
-              this.$modal.msgSuccess("修改成功");
+            : addActualWarehouse(this.form);
-              this.open = false;
+          
-              this.getList();
+          request.then(response => {
-            }).finally(() => {
+            this.$modal.msgSuccess(this.form.actualWarehouseId ? "修改成功" : "新增成功");
-              this.buttonLoading = false;
+            this.open = false;
-            });
+            this.getList(); // 新增/修改后刷新根节点
-          } else {
+          }).catch(() => {
-            addActualWarehouse(this.form).then(response => {
+            this.$modal.msgError(this.form.actualWarehouseId ? "修改失败" : "新增失败");
-              this.$modal.msgSuccess("新增成功");
+          }).finally(() => {
-              this.open = false;
+            this.buttonLoading = false;
-              this.getList();
+          });
-            }).finally(() => {
-              this.buttonLoading = false;
-            });
-          }
         }
       });
     },
+
     /** 删除按钮操作 */
     handleDelete(row) {
-      this.$modal.confirm('是否确认删除实际库区/库位自关联编号为"' + row.actualWarehouseId + '"的数据项？').then(() => {
+      this.$modal.confirm(`是否确认删除实际库区/库位自关联【${row.actualWarehouseName}】？`).then(() => {
-        this.loading = true;
         return delActualWarehouse(row.actualWarehouseId);
       }).then(() => {
-        this.loading = false;
+        this.getList(); // 删除后刷新根节点
-        this.getList();
+        if (this.$refs.treeTable) {
+          this.$refs.treeTable.store.clearNodes();
+        }
         this.$modal.msgSuccess("删除成功");
-      }).catch(() => {
+      }).catch(() => {});
-      }).finally(() => {
-        this.loading = false;
-      });
     }
   }
 };
-</script>
+</script>