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

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

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 "@riophae/vue-treeselect/dist/vue-treeselect.css";
+// import Treeselect from "@riophae/vue-treeselect";
+// 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,
-      // 重新渲染表格状态
-      refreshTable: true,
-      // 查询参数
+      // 是否全部展开（懒加载下仅控制已加载节点）
+      isExpandAll: false,
+      // 查询参数（核心：parentId用于懒加载子节点）
       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 => {
-        this.actualWarehouseOptions = [];
-        const data = { actualWarehouseId: 0, actualWarehouseName: '顶级节点', children: [] };
-        data.children = this.handleTree(response.data, "actualWarehouseId", "parentId");
-        this.actualWarehouseOptions.push(data);
+
+    // /** 查询实际库区/库位自关联下拉树结构 */
+    // getTreeselect() {
+    //   listActualWarehouse().then(response => {
+    //     this.actualWarehouseOptions = [];
+    //     const data = { actualWarehouseId: 0, actualWarehouseName: '顶级节点', children: [] };
+    //     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,
-        createTime: null,
-        createBy: null,
-        updateTime: null,
-        updateBy: null
+        remark: 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();
-      if (row != null && row.actualWarehouseId) {
+      // this.getTreeselect();
+      // 若从节点操作栏点击新增，设置父节点为当前节点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(() => {
-        this.refreshTable = true;
-      });
+      if (this.isExpandAll) {
+        treeTable.expandAll(); // 展开所有已加载节点
+      } else {
+        treeTable.collapseAll(); // 折叠所有节点
+      }
     },
+
     /** 修改按钮操作 */
     handleUpdate(row) {
-	  this.loading = true;
+      this.loading = true;
       this.reset();
-      this.getTreeselect();
-      if (row != null) {
-        this.form.parentId = row.actualWarehouseId;
-      }
+      // this.getTreeselect();
+      
       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;
-          if (this.form.actualWarehouseId != null) {
-            updateActualWarehouse(this.form).then(response => {
-              this.$modal.msgSuccess("修改成功");
-              this.open = false;
-              this.getList();
-            }).finally(() => {
-              this.buttonLoading = false;
-            });
-          } else {
-            addActualWarehouse(this.form).then(response => {
-              this.$modal.msgSuccess("新增成功");
-              this.open = false;
-              this.getList();
-            }).finally(() => {
-              this.buttonLoading = false;
-            });
-          }
+          this.buttonLoading = true;
+          const request = this.form.actualWarehouseId 
+            ? updateActualWarehouse(this.form) 
+            : addActualWarehouse(this.form);
+          
+          request.then(response => {
+            this.$modal.msgSuccess(this.form.actualWarehouseId ? "修改成功" : "新增成功");
+            this.open = false;
+            this.getList(); // 新增/修改后刷新根节点
+          }).catch(() => {
+            this.$modal.msgError(this.form.actualWarehouseId ? "修改失败" : "新增失败");
+          }).finally(() => {
+            this.buttonLoading = false;
+          });
         }
       });
     },
+
     /** 删除按钮操作 */
     handleDelete(row) {
-      this.$modal.confirm('是否确认删除实际库区/库位自关联编号为"' + row.actualWarehouseId + '"的数据项？').then(() => {
-        this.loading = true;
+      this.$modal.confirm(`是否确认删除实际库区/库位自关联【${row.actualWarehouseName}】？`).then(() => {
         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(() => {
-      }).finally(() => {
-        this.loading = false;
-      });
+      }).catch(() => {});
     }
   }
 };
-</script>
+</script>