From ff6acdde63657f91f9ccd59dd1f619ce24ca6368 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A0=82=E7=B3=96?= <qq2178503051@163.com>
Date: Mon, 24 Nov 2025 13:51:39 +0800
Subject: [PATCH] =?UTF-8?q?refactor(ActualWarehouseSelect):=20=E6=9B=BF?=
 =?UTF-8?q?=E6=8D=A2el-select=E4=B8=BAtreeselect=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E5=B9=B6=E4=BC=98=E5=8C=96=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

重构实际仓库选择组件，使用vue-treeselect替代原有el-select实现树形选择功能
优化数据处理逻辑，增加对顶级节点的支持
调整样式布局，限制最大宽度为200px
---
 .../ActualWarehouseSelect/index.vue           | 141 +++++++-------
 klp-ui/src/views/wms/warehouse/real.vue       | 172 ++++++------------
 2 files changed, 126 insertions(+), 187 deletions(-)

diff --git a/klp-ui/src/components/KLPService/ActualWarehouseSelect/index.vue b/klp-ui/src/components/KLPService/ActualWarehouseSelect/index.vue
index 07a9ad3d..a8b3e603 100644
--- a/klp-ui/src/components/KLPService/ActualWarehouseSelect/index.vue
+++ b/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>
diff --git a/klp-ui/src/views/wms/warehouse/real.vue b/klp-ui/src/views/wms/warehouse/real.vue
index a059a5a7..1d2841e7 100644
--- a/klp-ui/src/views/wms/warehouse/real.vue
+++ b/klp-ui/src/views/wms/warehouse/real.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="60px">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
       <el-form-item label="库位编码" prop="actualWarehouseCode">
         <el-input
           v-model="queryParams.actualWarehouseCode"
-          placeholder="请输入库位编码"
+          placeholder="请输入实际库区/库位编码"
           clearable
           @keyup.enter.native="handleQuery"
         />
@@ -12,26 +12,26 @@
       <el-form-item label="库位名称" prop="actualWarehouseName">
         <el-input
           v-model="queryParams.actualWarehouseName"
-          placeholder="请输入库位名称"
+          placeholder="请输入实际库区/库位名称"
           clearable
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <!-- <el-form-item label="库位类型" prop="warehouseType">
-        <el-select v-model="queryParams.warehouseType" placeholder="请选择库位类型" clearable>
-          <el-option
-            v-for="dict in dict.type.warehouse_type"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
-        </el-select>
-      </el-form-item> -->
-      <el-form-item label="启用状态" prop="isEnabled">
-        <el-select v-model="queryParams.isEnabled" placeholder="请选择启用状态" clearable>
-          <el-option label="启用" :value="1" />
-          <el-option label="禁用" :value="0" />
-        </el-select>
+      <el-form-item label="排序号" prop="sortNo">
+        <el-input
+          v-model="queryParams.sortNo"
+          placeholder="请输入同级排序号"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="是否启用" prop="isEnabled">
+        <el-input
+          v-model="queryParams.isEnabled"
+          placeholder="请输入是否启用"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
       </el-form-item>
       <el-form-item>
 	    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
@@ -61,28 +61,18 @@
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <KLPTable
+    <el-table
       v-if="refreshTable"
       v-loading="loading"
-      :data="warehouseList"
+      :data="actualWarehouseList"
       row-key="actualWarehouseId"
       :default-expand-all="isExpandAll"
       :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
     >
-      <!-- <el-table-column label="上级节点" prop="parentId" /> -->
       <el-table-column label="库位编码" align="center" prop="actualWarehouseCode" />
       <el-table-column label="库位名称" align="center" prop="actualWarehouseName" />
-      <!-- <el-table-column label="库位类型" align="center" prop="warehouseType">
-        <template slot-scope="scope">
-          <dict-tag :options="dict.type.warehouse_type" :value="scope.row.warehouseType"/>
-        </template>
-      </el-table-column> -->
-      <el-table-column label="排序号" align="center" prop="sortNo" />
-      <el-table-column label="启用状态" align="center" prop="isEnabled">
-        <template slot-scope="scope">
-          <span>{{ scope.row.isEnabled == 1 ? '启用' : '禁用' }}</span>
-        </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">
@@ -92,12 +82,12 @@
             icon="el-icon-edit"
             @click="handleUpdate(scope.row)"
           >修改</el-button>
-          <!-- <el-button
+          <el-button
             size="mini"
             type="text"
             icon="el-icon-plus"
             @click="handleAdd(scope.row)"
-          >新增</el-button> -->
+          >新增</el-button>
           <el-button
             size="mini"
             type="text"
@@ -106,39 +96,26 @@
           >删除</el-button>
         </template>
       </el-table-column>
-    </KLPTable>
+    </el-table>
 
-    <!-- 添加或修改库位/库区/库位自关联对话框 -->
+    <!-- 添加或修改实际库区/库位自关联对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
-        <!-- <el-form-item label="上级节点" prop="parentId">
-          <WarehouseSelect v-model="form.parentId" placeholder="请选择上级节点" />
-        </el-form-item> -->
+      <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" />
+        </el-form-item>
         <el-form-item label="库位编码" prop="actualWarehouseCode">
-          <el-input v-model="form.actualWarehouseCode" placeholder="请输入库位编码" />
+          <el-input v-model="form.actualWarehouseCode" placeholder="请输入实际库区/库位编码" />
         </el-form-item>
         <el-form-item label="库位名称" prop="actualWarehouseName">
-          <el-input v-model="form.actualWarehouseName" placeholder="请输入库位名称" />
+          <el-input v-model="form.actualWarehouseName" placeholder="请输入实际库区/库位名称" />
         </el-form-item>
-        <!-- <el-form-item label="库位类型" prop="warehouseType">
-          <el-select v-model="form.warehouseType" placeholder="请选择库位类型">
-            <el-option
-              v-for="dict in dict.type.warehouse_type"
-              :key="dict.value"
-              :label="dict.label"
-              :value="parseInt(dict.value)"
-            ></el-option>
-          </el-select>
+        <el-form-item label="排序" prop="sortNo">
+          <el-input v-model="form.sortNo" 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="sortNo">
-          <el-input v-model="form.sortNo" placeholder="请输入排序号" />
-        </el-form-item>
-        <el-form-item label="启用状态" prop="isEnabled">
-          <el-select v-model="form.isEnabled" placeholder="请选择启用状态">
-            <el-option label="启用" :value="1" />
-            <el-option label="禁用" :value="0" />
-          </el-select>
-        </el-form-item>
         <el-form-item label="备注" prop="remark">
           <el-input v-model="form.remark" placeholder="请输入备注" />
         </el-form-item>
@@ -155,14 +132,11 @@
 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 ActualWarehouseSelect from '@/components/ActualWarehouseSelect';
 
 export default {
   name: "ActualWarehouse",
-  // dicts: ['warehouse_type'],
   components: {
-    Treeselect,
-    // ActualWarehouseSelect
+    Treeselect
   },
   data() {
     return {
@@ -172,10 +146,10 @@ export default {
       loading: true,
       // 显示搜索条件
       showSearch: true,
-      // 库位/库区/库位自关联表格数据
-      warehouseList: [],
-      // 库位/库区/库位自关联树选项
-      warehouseOptions: [],
+      // 实际库区/库位自关联表格数据
+      actualWarehouseList: [],
+      // 实际库区/库位自关联树选项
+      actualWarehouseOptions: [],
       // 弹出层标题
       title: "",
       // 是否显示弹出层
@@ -189,7 +163,7 @@ export default {
         parentId: undefined,
         actualWarehouseCode: undefined,
         actualWarehouseName: undefined,
-        warehouseType: undefined,
+        actualWarehouseType: undefined,
         sortNo: undefined,
         isEnabled: undefined,
       },
@@ -197,15 +171,6 @@ export default {
       form: {},
       // 表单校验
       rules: {
-        actualWarehouseCode: [
-          { required: true, message: "库区编码不能为空", trigger: "blur" }
-        ],
-        actualWarehouseName: [
-          { required: true, message: "库区名称不能为空", trigger: "blur" }
-        ],
-        // warehouseType: [
-        //   { required: true, message: "类型不能为空", trigger: "change" }
-        // ],
       }
     };
   },
@@ -213,27 +178,15 @@ export default {
     this.getList();
   },
   methods: {
-    /** 查询库位/库区/库位自关联列表 */
+    /** 查询实际库区/库位自关联列表 */
     getList() {
       this.loading = true;
-      listActualWarehouse({...this.queryParams, pageNum: 1, pageSize: 1000}).then(response => {
-        const list = response.rows;
-        // const list = this.handleTree(response.data, "warehouseId", "parentId");
-        // // 递归遍历list，通过sortNo排序
-        const sort = (list) => {
-          list.sort((a, b) => a.sortNo - b.sortNo);
-          list.forEach(item => {
-            if (item.children) {
-              sort(item.children);
-            }
-          });
-        };
-        sort(list)
-        this.warehouseList = list;
+      listActualWarehouse(this.queryParams).then(response => {
+        this.actualWarehouseList = this.handleTree(response.data, "actualWarehouseId", "parentId");
         this.loading = false;
       });
     },
-    /** 转换库位/库区/库位自关联数据结构 */
+    /** 转换实际库区/库位自关联数据结构 */
     normalizer(node) {
       if (node.children && !node.children.length) {
         delete node.children;
@@ -244,15 +197,15 @@ export default {
         children: node.children
       };
     },
-	/** 查询库位/库区/库位自关联下拉树结构 */
+	/** 查询实际库区/库位自关联下拉树结构 */
     getTreeselect() {
       listActualWarehouse().then(response => {
-        this.warehouseOptions = [];
+        this.actualWarehouseOptions = [];
         const data = { actualWarehouseId: 0, actualWarehouseName: '顶级节点', children: [] };
         data.children = this.handleTree(response.data, "actualWarehouseId", "parentId");
-        this.warehouseOptions.push(data);
+        this.actualWarehouseOptions.push(data);
       });
-    }, 
+    },
     // 取消按钮
     cancel() {
       this.open = false;
@@ -265,9 +218,9 @@ export default {
         parentId: null,
         actualWarehouseCode: null,
         actualWarehouseName: null,
-        warehouseType: 1,
-        sortNo: null,
-        isEnabled: 1,
+        actualWarehouseType: 1,
+        sortNo: 0,
+        isEnabled: null,
         delFlag: null,
         remark: null,
         createTime: null,
@@ -296,7 +249,7 @@ export default {
         this.form.parentId = 0;
       }
       this.open = true;
-      this.title = "添加库位/库区/库位自关联";
+      this.title = "添加实际库区/库位自关联";
     },
     /** 展开/折叠操作 */
     toggleExpandAll() {
@@ -318,21 +271,16 @@ export default {
 	    this.loading = false;
         this.form = response.data;
         this.open = true;
-        this.title = "修改库位/库区/库位自关联";
+        this.title = "修改实际库区/库位自关联";
       });
     },
     /** 提交按钮 */
     submitForm() {
       this.$refs["form"].validate(valid => {
         if (valid) {
-          this.buttonLoading = true;
-          // 处理 parentId 为 0 的情况
-          let submitData = { ...this.form };
-          if (submitData.parentId === 0) {
-            delete submitData.parentId;
-          }
+		  this.buttonLoading = true;
           if (this.form.actualWarehouseId != null) {
-            updateActualWarehouse(submitData).then(response => {
+            updateActualWarehouse(this.form).then(response => {
               this.$modal.msgSuccess("修改成功");
               this.open = false;
               this.getList();
@@ -340,7 +288,7 @@ export default {
               this.buttonLoading = false;
             });
           } else {
-            addActualWarehouse(submitData).then(response => {
+            addActualWarehouse(this.form).then(response => {
               this.$modal.msgSuccess("新增成功");
               this.open = false;
               this.getList();
@@ -353,7 +301,7 @@ export default {
     },
     /** 删除按钮操作 */
     handleDelete(row) {
-      this.$modal.confirm('是否确认删除库位/库区/库位自关联编号为"' + row.actualWarehouseId + '"的数据项？').then(() => {
+      this.$modal.confirm('是否确认删除实际库区/库位自关联编号为"' + row.actualWarehouseId + '"的数据项？').then(() => {
         this.loading = true;
         return delActualWarehouse(row.actualWarehouseId);
       }).then(() => {