feat(组件): 为DragResizeBox添加localStorage持久化功能

添加storageKey属性支持将位置和尺寸保存到localStorage
初始化时优先读取存储值，拖动结束后自动保存
同时优化了CoilSelector的钢卷地图显示逻辑

klp-ui/src/components/CoilSelector/index.vue

@@ -20,7 +20,7 @@
     <el-dialog title="选择钢卷" :visible.sync="dialogVisible" :width="dialogWidth" :close-on-click-modal="false"
       @close="handleClose" append-to-body :fullscreen="orderBy">
       <!-- 搜索区域 -->
-      <el-form v-if="!rangeMode" :model="queryParams" class="search-form">
+      <el-form v-if="!rangeMode" inline :model="queryParams" class="search-form">
         <!-- <el-form-item label="类型">
           <el-select v-model="queryParams.selectType" placeholder="请选择类型" size="small">
             <el-option label="成品" value="product" />
@@ -62,12 +62,13 @@
         </el-form-item>
         <el-form-item label="实际库区" v-if="orderBy">
           <actual-warehouse-select v-model="queryParams.actualWarehouseId" placeholder="请选择实际库区" canSelectLevel2
-            canSelectDisabled @select="handleWarehouseChange" />
+            canSelectDisabled :clearInput="false" clearable />
         </el-form-item>
 
         <el-form-item>
           <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
           <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
+          <el-checkbox style="margin-left: 10px;" v-model="showCoilMap" size="small">显示钢卷地图</el-checkbox>
         </el-form-item>
       </el-form>
 
@@ -122,8 +123,13 @@
       </div>
 
       <!-- 一个可以拖拽和调节大小的浮层 -->
-      <DragResizeBox v-if="selectedNodeId" @size-change="handleSizeChange">
-        <div style="height: 100%; width: 100%; overflow-y: scroll;">
+      <DragResizeBox v-if="showCoilMap" @size-change="handleSizeChange" storageKey="coil-map">
+        <div style="height: 100%; width: 100%; overflow-y: scroll; display: flex; background-color: #fff;">
+          <div style="min-width: 150px; position: sticky; top: 0;" v-loading="treeLoading">
+            <el-tree ref="warehouseTreeRef" :data="warehouseTree" :props="treeProps" node-key="actualWarehouseId"
+              @node-click="handleNodeClick" :expand-on-click-node="false" highlight-current class="warehouse-tree">
+            </el-tree>
+          </div>
           <warehouse-bird-mini ref="warehouseBirdMini" v-loading="warehouseLoading" :warehouseList="warehouseList" :id="selectedNodeId"
             :canToggle="false" :canRelease="false" />
         </div>
@@ -135,6 +141,7 @@
 <script>
 import { listMaterialCoil } from '@/api/wms/coil';
 import { listActualWarehouse } from "@/api/wms/actualWarehouse";
+import { treeActualWarehouseTwoLevel } from "@/api/wms/actualWarehouse";
 import MemoInput from '@/components/MemoInput/index.vue';
 import MutiSelect from '@/components/MutiSelect/index.vue';
 import { defaultColumns } from './data';
@@ -216,6 +223,7 @@ export default {
   },
   data() {
     return {
+      showCoilMap: false,
       loading: false,
       coilList: [],
       total: 0,
@@ -242,6 +250,9 @@ export default {
       warehouseList: [],
       selectedNodeId: null,
       warehouseLoading: false,
+      warehouseTree: [],
+      treeProps: { label: "actualWarehouseName", children: "children" },
+      treeLoading: false,
     };
   },
   computed: {
@@ -323,6 +334,9 @@ export default {
     if (this.initialCoil) {
       this.selectedCoil = this.initialCoil;
     }
+    if (this.orderBy) {
+      this.getWarehouseTree();
+    }
   },
   methods: {
     // 获取库位列表
@@ -336,6 +350,22 @@ export default {
           this.warehouseLoading = false;
         });
     },
+    handleNodeClick(data) {
+      console.log('data', data);
+      if (data.actualWarehouseType != 2) {
+        return;
+      }
+      this.selectedNodeId = data.actualWarehouseId;
+      this.getWarehouseList(data.actualWarehouseId);
+    },
+     // 获取树形数据
+    getWarehouseTree() {
+      this.treeLoading = true;
+      treeActualWarehouseTwoLevel()
+        .then((res) => { this.warehouseTree = res.data || []; })
+        .catch((err) => { this.$message.error("获取仓库树形数据失败：" + err.message); })
+        .finally(() => { this.treeLoading = false; });
+    },
     // 处理大小变化
     handleSizeChange(size) {
       console.log('size', size);
@@ -587,13 +617,6 @@ export default {
   margin-top: 4px;
 }
 
-.search-form {
-  margin-bottom: 20px;
-  display: flex;
-  align-items: center;
-  gap: 16px;
-}
-
 ::v-deep .el-dialog__body {
   padding: 20px;
   max-height: calc(100vh - 200px);