From 720e2d514f8a71e0d595277565316e5352bc4917 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A0=82=E7=B3=96?= <qq2178503051@163.com>
Date: Sat, 20 Dec 2025 15:12:07 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E4=BB=93=E5=BA=93=E7=AE=A1=E7=90=86):=20?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=BA=93=E4=BD=8D=E6=8B=86=E5=88=86=E5=90=88?=
 =?UTF-8?q?=E5=B9=B6=E5=8A=9F=E8=83=BD=E5=8F=8A=E7=95=8C=E9=9D=A2=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在WarehouseInterlaced组件中添加列级别的拆分/合并切换按钮
- 重构API接口，支持payload参数传递和超时设置
- 在overview页面实现拆分合并操作的处理逻辑
- 优化仓库网格布局和样式，移除右键菜单功能
- 添加操作确认提示和加载状态显示
---
 klp-ui/src/api/wms/actualWarehouse.js         |  20 +-
 .../warehouse/components/WarehouseBird.vue    |   6 +-
 .../components/WarehouseInterlaced.vue        | 526 ++++++++----------
 klp-ui/src/views/wms/warehouse/overview.vue   |  60 +-
 4 files changed, 301 insertions(+), 311 deletions(-)

diff --git a/klp-ui/src/api/wms/actualWarehouse.js b/klp-ui/src/api/wms/actualWarehouse.js
index 582ea0b1..ac82cd13 100644
--- a/klp-ui/src/api/wms/actualWarehouse.js
+++ b/klp-ui/src/api/wms/actualWarehouse.js
@@ -91,19 +91,15 @@ export function generateLocations(data) {
 /**
  * 分割库区
  */
-export function splitActualWarehouse(warehouseId) {
-  let locationIds = warehouseId
-  // 如果warehouseId不是数组，则转换为数组
-  if (!Array.isArray(warehouseId)) {
-    locationIds = [warehouseId];
-  }
+export function splitActualWarehouse(payload) {
   return request({
     url: '/wms/actualWarehouse/split',
     method: 'post',
+    timeout: 100000,
     data: {
-      locationIds: locationIds,
       action: 1,
       splitType: 0,
+      ...payload
     }
   })
 }
@@ -111,19 +107,15 @@ export function splitActualWarehouse(warehouseId) {
 /**
  * 合并库区
  */
-export function mergeActualWarehouse(warehouseId) {
-  let locationIds = warehouseId
-  // 如果warehouseId不是数组，则转换为数组
-  if (!Array.isArray(warehouseId)) {
-    locationIds = [warehouseId];
-  }
+export function mergeActualWarehouse(payload) {
   return request({
     url: '/wms/actualWarehouse/merge',
     method: 'post',
+    timeout: 100000,
     data: {
-      locationIds: locationIds,
       action: 0,
       splitType: 0,
+      ...payload
     }
   })
 }
diff --git a/klp-ui/src/views/wms/warehouse/components/WarehouseBird.vue b/klp-ui/src/views/wms/warehouse/components/WarehouseBird.vue
index f334c5b9..55f079fc 100644
--- a/klp-ui/src/views/wms/warehouse/components/WarehouseBird.vue
+++ b/klp-ui/src/views/wms/warehouse/components/WarehouseBird.vue
@@ -48,7 +48,7 @@
         <div class="empty-text">该分类下暂无库位数据</div>
         <el-button type="primary" icon="el-icon-plus" @click="openInitDialog">初始化库位</el-button>
       </div>
-      <warehouse-interlaced v-else="warehouseList.length" :columns="columns" @split-warehouse="handleSplitWarehouse"/>
+      <warehouse-interlaced v-else="warehouseList.length" :columns="columns" @split-warehouse="handleSplitWarehouse" @merge-warehouse="handleMergeWarehouse" />
     </div>
   </div>
 </template>
@@ -91,6 +91,10 @@ export default {
     handleSplitWarehouse(warehouse) {
       this.$emit('split-warehouse', warehouse);
     },
+
+    handleMergeWarehouse(warehouse) {
+      this.$emit('merge-warehouse', warehouse);
+    },
     /**
      * 解析第三级库位编码
      */
diff --git a/klp-ui/src/views/wms/warehouse/components/WarehouseInterlaced.vue b/klp-ui/src/views/wms/warehouse/components/WarehouseInterlaced.vue
index 61cda867..122d21d7 100644
--- a/klp-ui/src/views/wms/warehouse/components/WarehouseInterlaced.vue
+++ b/klp-ui/src/views/wms/warehouse/components/WarehouseInterlaced.vue
@@ -1,49 +1,43 @@
 <template>
-  <div class="multi-layer-grid" @click="closeContextMenu" @keydown.esc="closeContextMenu">
-    <!-- 顶部列标尺 -->
+  <div class="multi-layer-grid" ref="gridContainer">
+    <!-- 列标尺区域 - 添加切换按钮 -->
     <div class="col-ruler" :style="{ '--cell-width': `${cellWidth}px` }">
       <div class="ruler-empty"></div>
       <div v-for="col in sortedColumnKeys" :key="`col-${col}`" class="ruler-item">
-        {{ col }}
+        <!-- 列标尺文本 -->
+        <span class="column-number">{{ col }}</span>
+        <!-- 拆分/合并切换按钮 -->
+        <button class="split-merge-toggle"
+          :class="{ 'is-split': getColumnLevel(col) === 4, 'is-merge': getColumnLevel(col) === 3 }"
+          @click.stop="handleColumnToggle(col)" :title="getColumnLevel(col) === 3 ? '点击切换为小卷状态' : '点击切换为大卷状态'">
+          <i class="el-icon-s-tools"></i>
+          <span class="toggle-text">{{ getColumnLevel(col) === 3 ? '大卷状态' : '小卷状态' }}</span>
+        </button>
       </div>
     </div>
 
-    <!-- 左侧行标尺 + 库位网格 -->
     <div class="row-grid-wrapper">
-      <!-- 左侧行标尺（高度固定） -->
       <div class="row-ruler" :style="{ '--total-height': `${rulerTotalHeight}px` }">
         <div v-for="row in rulerMaxRow" :key="`row-${row}`" class="ruler-item">
           {{ row }}
         </div>
       </div>
 
-      <!-- 网格容器（列→左右容器→格子） -->
       <div class="grid-container" :style="{
         '--half-cell-width': `${halfCellWidth}px`,
         '--cell-width': `${cellWidth}px`,
         '--column-count': sortedColumnKeys.length * 2,
         '--total-height': `${rulerTotalHeight}px`
       }">
-        <!-- 逐列渲染：每列对应左右两个容器 -->
         <template v-for="column in sortedColumnKeys">
-          <!-- 左容器：承载当前列的layer1库位 -->
-          <div 
-            class="column-container layer-1-container"
-            :style="{
-              gridRow: '1 / -1',
-              gridColumn: `${(column - 1) * 2 + 1} / ${(column - 1) * 2 + 2}`,
-              '--item-height': `${getWarehouseCellHeight(column)}px`
-            }"
-          >
-            <!-- 左容器内渲染layer1的单个格子（无偏移） -->
-            <div 
-              v-for="warehouse in getColumnLayerWarehouses(column, 1)" 
-              :key="`warehouse-1-${warehouse.actualWarehouseId}`"
-              class="warehouse-cell layer-1" 
-              :class="{ disabled: warehouse.isEnabled === 0 }" 
-              @click="handleCellClick(warehouse)"
-              @contextmenu.prevent="(e) => openContextMenu(e, warehouse)"
-            >
+          <div class="column-container layer-1-container" v-if="columnWarehouseData[column]" :style="{
+            gridRow: '1 / -1',
+            gridColumn: `${(column - 1) * 2 + 1} / ${(column - 1) * 2 + 2}`,
+            '--item-height': `${columnWarehouseData[column].cellHeight}px`
+          }">
+            <div v-for="warehouse in columnWarehouseData[column].layer1"
+              :key="`warehouse-1-${warehouse.actualWarehouseId}`" class="warehouse-cell layer-1"
+              :class="{ disabled: warehouse.isEnabled === 0 }" @click.stop="handleCellClick(warehouse)">
               <div class="cell-name">
                 <div class="cell-line1">{{ warehouse.actualWarehouseName || '-' }}</div>
                 <div class="cell-line2">{{ warehouse.currentCoilNo || '-' }}</div>
@@ -51,30 +45,19 @@
             </div>
           </div>
 
-          <!-- 右容器：承载当前列的layer2库位（核心修改：新增高度计算） -->
-          <div 
-            class="column-container layer-2-container"
-            :style="{
-              gridRow: '1 / -1',
-              gridColumn: `${(column - 1) * 2 + 2} / ${(column - 1) * 2 + 3}`,
-              '--item-height': `${getWarehouseCellHeight(column)}px`,
-              '--offset-value': `${getWarehouseCellHeight(column) * 0.5}px`,
-              // 新增：第二层容器高度 = 格子总高度 + 偏移量（半个格子）
-              height: `${(getColumnLayerWarehouses(column, 2).length * getWarehouseCellHeight(column))}px`
-            }"
-          >
-            <!-- 右容器内渲染layer2的单个格子（向下偏移半个高度） -->
-            <div 
-              v-for="warehouse in getColumnLayerWarehouses(column, 2)" 
-              :key="`warehouse-2-${warehouse.actualWarehouseId}`"
-              class="warehouse-cell layer-2" 
-              :class="{ disabled: warehouse.isEnabled === 0 }" 
-              :style="{
-                transform: `translateY(var(--offset-value))`
-              }"
-              @click="handleCellClick(warehouse)"
-              @contextmenu.prevent="(e) => openContextMenu(e, warehouse)"
-            >
+          <div class="column-container layer-2-container" v-if="columnWarehouseData[column]" :style="{
+            gridRow: '1 / -1',
+            gridColumn: `${(column - 1) * 2 + 2} / ${(column - 1) * 2 + 3}`,
+            '--item-height': `${columnWarehouseData[column].cellHeight}px`,
+            '--offset-value': `${columnWarehouseData[column].cellHeight * 0.5}px`,
+            height: `${(columnWarehouseData[column].layer2.length * columnWarehouseData[column].cellHeight)}px`
+          }">
+            <div v-for="warehouse in columnWarehouseData[column].layer2"
+              :key="`warehouse-2-${warehouse.actualWarehouseId}`" class="warehouse-cell layer-2"
+              :class="{ disabled: warehouse.isEnabled === 0 }" :style="{
+                transform: `translateY(var(--offset-value))`,
+                position: 'relative'
+              }" @click.stop="handleCellClick(warehouse)">
               <div class="cell-name">
                 <div class="cell-line1">{{ warehouse.actualWarehouseName || '-' }}</div>
                 <div class="cell-line2">{{ warehouse.currentCoilNo || '-' }}</div>
@@ -85,34 +68,7 @@
       </div>
     </div>
 
-    <!-- 自定义右键菜单 -->
-    <div 
-      v-if="contextMenuVisible"
-      class="custom-contextmenu"
-      :style="{
-        top: `${contextMenuTop}px`,
-        left: `${contextMenuLeft}px`,
-        zIndex: 9999
-      }"
-      @click.stop
-    >
-      <ul>
-        <li @click="handleContextMenuClick('view')">查看详情</li>
-        <li class="menu-divider"></li>
-        <li 
-          @click="handleContextMenuClick('delete')"
-          :class="{ disabled: currentContextWarehouse.isEnabled === 0 }"
-        >
-          删除库位
-        </li>
-        <li class="menu-divider"></li>
-        <li @click="handleContextMenuClick('split')" v-if="currentContextWarehouse.splitStatus == 0">拆分整列</li>
-        <li @click="handleContextMenuClick('merge')" v-if="currentContextWarehouse.splitStatus == 1">合并整列</li>
-      </ul>
-    </div>
-
-    <!-- 库位详情弹窗 -->
-    <el-dialog title="钢卷库位详情" :visible.sync="dialogVisible" width="600px" destroy-on-close append-to-body center>
+    <el-dialog title="钢卷库位详情" :visible.sync="dialogOpen" width="600px" append-to-body>
       <el-descriptions :column="2" border size="small" v-if="currentWarehouse">
         <el-descriptions-item label="库位编码">{{ currentWarehouse.actualWarehouseCode }}</el-descriptions-item>
         <el-descriptions-item label="库位名称">{{ currentWarehouse.actualWarehouseName || '无' }}</el-descriptions-item>
@@ -120,8 +76,10 @@
         <el-descriptions-item label="所属层级">{{ currentWarehouse.parsedInfo.layer || '未知' }}</el-descriptions-item>
         <el-descriptions-item label="行号">{{ currentWarehouse.parsedInfo.row || '未知' }}</el-descriptions-item>
         <el-descriptions-item label="列号">{{ currentWarehouse.parsedInfo.column || '未知' }}</el-descriptions-item>
-        <el-descriptions-item label="一级编码">{{ currentWarehouse.parsedInfo.warehouseFirst || '未知' }}</el-descriptions-item>
-        <el-descriptions-item label="二级编码">{{ currentWarehouse.parsedInfo.warehouseSecond || '未知' }}</el-descriptions-item>
+        <el-descriptions-item label="一级编码">{{ currentWarehouse.parsedInfo.warehouseFirst || '未知'
+        }}</el-descriptions-item>
+        <el-descriptions-item label="二级编码">{{ currentWarehouse.parsedInfo.warehouseSecond || '未知'
+        }}</el-descriptions-item>
         <el-descriptions-item label="启用状态">
           <el-tag :type="currentWarehouse.isEnabled === 1 ? 'success' : 'danger'">
             {{ currentWarehouse.isEnabled === 1 ? '未占用' : currentWarehouse.currentCoilNo }}
@@ -132,16 +90,12 @@
         </el-descriptions-item>
         <el-descriptions-item label="备注信息" span="2">{{ currentWarehouse.remark || '无' }}</el-descriptions-item>
       </el-descriptions>
-      <template slot="footer">
-        <el-button @click="dialogVisible = false">关闭</el-button>
-      </template>
     </el-dialog>
   </div>
 </template>
 
 <script>
 import QRCode from '@/components/QRCode/index.vue';
-import { Message } from 'element-ui';
 
 export default {
   name: "SteelCoilWarehouse",
@@ -157,99 +111,173 @@ export default {
   },
   data() {
     return {
-      dialogVisible: false,
+      dialogOpen: false,
       currentWarehouse: null,
       containerWidth: 0,
       resizeTimer: null,
-      // 右键菜单
-      contextMenuVisible: false,
-      contextMenuTop: 0,
-      contextMenuLeft: 0,
       currentContextWarehouse: null,
-      // 标尺配置
       rulerRowHeight: 80,
-      rulerMaxRow: 0
+      // rulerMaxRow: 0,
+      isMounted: false
     };
   },
   computed: {
-    // 排序后的列号（数字升序）
     sortedColumnKeys() {
       return Object.keys(this.columns)
         .map(key => Number(key))
         .sort((a, b) => a - b);
     },
-    // 标尺总高度
     rulerTotalHeight() {
       return this.rulerMaxRow * this.rulerRowHeight;
     },
-    // 列宽度（原始列）
     cellWidth() {
       if (!this.containerWidth || this.sortedColumnKeys.length === 0) return 60;
       const availableWidth = Math.max(0, this.containerWidth - 30);
       return availableWidth / this.sortedColumnKeys.length;
     },
-    // 半列宽度（小列/容器宽度）
     halfCellWidth() {
       return this.cellWidth / 2;
+    },
+    columnWarehouseData() {
+      const result = {};
+      this.sortedColumnKeys.forEach(column => {
+        const columnData = this.columns[column] || {};
+        const layer1 = (columnData.layer1 || []).sort((a, b) => a.parsedInfo.row - b.parsedInfo.row);
+        const layer2 = (columnData.layer2 || []).sort((a, b) => a.parsedInfo.row - b.parsedInfo.row);
+        const totalRows = layer1.length;
+        const cellHeight = totalRows === 0
+          ? this.rulerRowHeight
+          : (totalRows > this.rulerMaxRow
+            ? this.rulerTotalHeight / totalRows
+            : this.rulerRowHeight);
+
+        result[column] = {
+          layer1,
+          layer2,
+          cellHeight,
+          totalRows
+        };
+      });
+      return result;
+    },
+    rulerMaxRow() {
+      // 取所有列中level为3的第一层的最大行数
+      const maxRows = Object.values(this.columns)
+        .filter(col => col.layer1?.[0]?.parsedInfo?.level === 3)
+        .map(col => col.layer1?.length || 0);
+      return maxRows.length > 0 ? Math.max(...maxRows) : 0;
     }
   },
   watch: {
-    // 初始化标尺最大行数（仅一次）
     columns: {
       immediate: true,
+      deep: true,
       handler(newVal) {
-        if (this.rulerMaxRow === 0 && Object.keys(newVal).length > 0) {
-          const allMaxRows = Object.values(newVal).map(col => col.maxRow);
-          this.rulerMaxRow = allMaxRows.length > 0 ? Math.max(...allMaxRows) : 0;
+        if (this.isMounted) {
+          clearTimeout(this.resizeTimer);
+          this.resizeTimer = setTimeout(() => {
+            this.calcContainerWidth();
+          }, 50);
         }
-        this.calcContainerWidth();
       }
     }
   },
   mounted() {
+    this.isMounted = true;
     this.calcContainerWidth();
     window.addEventListener('resize', this.handleResize);
-    document.addEventListener('click', this.closeContextMenu);
   },
   beforeUnmount() {
     window.removeEventListener('resize', this.handleResize);
-    document.removeEventListener('click', this.closeContextMenu);
     clearTimeout(this.resizeTimer);
+    this.isMounted = false;
   },
   methods: {
-    // 获取指定列、指定层的库位（按行号排序）
-    getColumnLayerWarehouses(column, layer) {
-      const columnData = this.columns[column];
-      if (!columnData) return [];
-      const layerKey = `layer${layer}`;
-      return columnData[layerKey].sort((a, b) => a.parsedInfo.row - b.parsedInfo.row);
+    // 获取指定列的level值（3=合并，4=拆分）
+    getColumnLevel(column) {
+      const columnData = this.columns[column] || {};
+      // 优先取列级别的level，若无则取第一个库位的level
+      if (columnData.level) return columnData.level;
+      const firstWarehouse = columnData.layer1?.[0] || columnData.layer2?.[0];
+      return firstWarehouse?.parsedInfo?.level || 3; // 默认合并状态
     },
-    // 获取指定列的总行数（layer1 + layer2）
-    getColTotalRows(column) {
-      const columnData = this.columns[column];
-      if (!columnData) return 0;
-      return columnData.layer1.length;
+    // 处理列拆分/合并状态切换
+    handleColumnToggle(column) {
+      const currentLevel = this.getColumnLevel(column);
+      // 切换level：3↔4
+      const newLevel = currentLevel === 3 ? 4 : 3;
+      // 向父组件发送切换事件，由父组件更新columns数据
+      // 如果切换为合并状态，调用handleMergeWarehouse方法
+      // 需要二次确认
+      console.log(this.columns[column])
+      const columnData = this.columns[column] || {};
+      const columnFlag = columnData.layer1?.[0]?.actualWarehouseCode?.substring(0, 4) || ''; // 取前四位
+
+      this.$confirm(`确认将列 ${column} 切换为${newLevel === 3 ? '大卷' : '小卷'}状态吗？`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        // 构造出请求数据
+
+        const payload = {
+          // 列的前四位，例如：F2A1
+          columnFlag,
+        }
+        console.log(payload, newLevel)
+        if (newLevel === 3) {
+          // 获取待分割的ID, 对应列第一层的前五个和第二层的前五个
+          const splitIds = [];
+          const layer1Warehouses = columnData.layer1 || [];
+          const layer2Warehouses = columnData.layer2 || [];
+
+          for (let i = 0; i < layer1Warehouses.length; i++) {
+            if (layer1Warehouses[i]) splitIds.push(layer1Warehouses[i].parentId);
+          }
+          for (let i = 0; i < layer2Warehouses.length; i++) {
+            if (layer2Warehouses[i]) splitIds.push(layer2Warehouses[i].parentId);
+          }
+          // 1. 先统计每个 parentId 出现的次数
+          const countMap = splitIds.reduce((map, id) => {
+            map.set(id, (map.get(id) || 0) + 1);
+            return map;
+          }, new Map());
+
+          // 2. 过滤出至少出现两次的 parentId，再去重（map的key本身唯一，去重可省略但保留更严谨）
+          payload.locationIds = [...new Set(
+            splitIds.filter(id => countMap.get(id) >= 2)
+          )];
+          console.log(payload)
+          this.handleMergeWarehouse(payload);
+        } else if (newLevel === 4) {
+          // 获取待分割的ID, 对应列第一层的前五个和第二层的前五个
+          const splitIds = [];
+          const layer1Warehouses = columnData.layer1 || [];
+          const layer2Warehouses = columnData.layer2 || [];
+          const maxSplitCount = 5; // 最多拆分5个
+          for (let i = 0; i < maxSplitCount; i++) {
+            if (layer1Warehouses[i]) splitIds.push(layer1Warehouses[i].actualWarehouseId);
+            if (layer2Warehouses[i]) splitIds.push(layer2Warehouses[i].actualWarehouseId);
+          }
+          payload.splitIds = splitIds;
+          console.log(payload)
+          // 如果切换为拆分状态，调用handleSplitWarehouse方法
+          this.handleSplitWarehouse(payload);
+        } else {
+          // 其他情况,数据异常
+          this.$message.error(`列 ${column} 切换状态异常,当前状态为${currentLevel}`);
+          // this.handleMergeWarehouse(column);
+          return;
+        }
+      })
+
     },
-    // 判断列是否超限
-    isColOverflow(column) {
-      const totalRows = this.getColTotalRows(column);
-      return totalRows > this.rulerMaxRow;
-    },
-    // 计算列内格子高度
-    getWarehouseCellHeight(column) {
-      const totalRows = this.getColTotalRows(column);
-      if (totalRows === 0) return this.rulerRowHeight;
-      return this.isColOverflow(column) 
-        ? this.rulerTotalHeight / totalRows 
-        : this.rulerRowHeight;
-    },
-    // 获取整列库位ID
     getInterlacedWarehouseIds(warehouse) {
       if (!warehouse?.parsedInfo) return [];
       const { column, row } = warehouse.parsedInfo;
       const columnData = this.columns[column];
       if (!columnData) return [];
-      
+
       const ids = [];
       const layer1Warehouse = columnData.layer1.find(w => w.parsedInfo.row === row);
       const layer2Warehouse = columnData.layer2.find(w => w.parsedInfo.row === row);
@@ -257,9 +285,12 @@ export default {
       if (layer2Warehouse) ids.push(layer2Warehouse.actualWarehouseId);
       return ids;
     },
-    // 容器宽度计算
     calcContainerWidth() {
-      this.containerWidth = this.$el.parentElement?.clientWidth || this.$el.clientWidth || 0;
+      if (!this.$refs.gridContainer) {
+        this.containerWidth = 0;
+        return;
+      }
+      this.containerWidth = this.$refs.gridContainer.clientWidth || 0;
     },
     handleResize() {
       clearTimeout(this.resizeTimer);
@@ -267,100 +298,39 @@ export default {
         this.calcContainerWidth();
       }, 100);
     },
-    // 单个格子点击
     handleCellClick(warehouse) {
-      this.currentWarehouse = warehouse;
-      this.dialogVisible = true;
+      console.log('格子点击触发，仓库数据：', warehouse);
+      this.currentWarehouse = { ...warehouse };
+      this.dialogOpen = true;
     },
-    // 单个格子右键
-    openContextMenu(e, warehouse) {
-      e.stopPropagation();
-      this.currentContextWarehouse = warehouse;
-      this.contextMenuTop = e.clientY;
-      this.contextMenuLeft = e.clientX;
-      this.contextMenuVisible = true;
+    handleSplitWarehouse(payload) {
+      this.$emit('split-warehouse', payload);
     },
-    closeContextMenu() {
-      this.contextMenuVisible = false;
-      this.currentContextWarehouse = null;
+    handleMergeWarehouse(payload) {
+      this.$emit('merge-warehouse', payload);
     },
-    // 右键菜单处理
-    handleContextMenuClick(type) {
-      this.contextMenuVisible = false;
-      if (!this.currentContextWarehouse) return;
-      
-      switch (type) {
-        case 'view':
-          this.handleCellClick(this.currentContextWarehouse);
-          break;
-        case 'delete':
-          this.handleDeleteWarehouse(this.currentContextWarehouse);
-          break;
-        case 'split':
-          this.handleSplitWarehouse();
-          break;
-        case 'merge':
-          this.handleMergeWarehouse();
-          break;
-      }
-    },
-    // 分割库位
-    handleSplitWarehouse() {
-      if (!this.currentContextWarehouse) {
-        this.$message.warning('请先选择要分割的库位');
-        return;
-      }
-      if (this.currentContextWarehouse.isEnabled === 0) {
-        this.$message.warning('已占用库位无法分割');
-        return;
-      }
-      this.$emit('split-warehouse', this.currentContextWarehouse);
-    },
-    // 合并库位
-    handleMergeWarehouse() {
-      if (!this.currentContextWarehouse) {
-        this.$message.warning('请先选择要合并的库位');
-        return;
-      }
-      if (this.currentContextWarehouse.isEnabled === 0) {
-        this.$message.warning('已占用库位无法合并');
-        return;
-      }
-      this.$emit('merge-warehouse', this.currentContextWarehouse);
-    },
-    // 删除库位
-    handleDeleteWarehouse(warehouse) {
-      if (warehouse.isEnabled === 0) {
-        Message.warning('禁用状态的库位无法删除');
-        return;
-      }
-      this.$emit('delete-warehouse', warehouse);
-    }
   }
 };
 </script>
 
 <style scoped lang="scss">
-/* 外层容器 */
 .multi-layer-grid {
-  width: 100% !important;
+  width: 100%;
   height: 100%;
   box-sizing: border-box;
-  margin: 0 !important;
-  padding: 0 !important;
-  overflow: hidden !important;
+  margin: 0;
+  padding: 0;
 }
 
-/* 列标尺 */
 .col-ruler {
   display: flex;
   height: 30px;
   line-height: 30px;
   background: #f5f7fa;
   border-bottom: 1px solid #e4e7ed;
-  width: 100% !important;
+  width: 100%;
   box-sizing: border-box;
-  overflow: hidden !important;
+  overflow: hidden;
 
   .ruler-empty {
     width: 30px;
@@ -379,25 +349,79 @@ export default {
     border-right: 1px solid #e4e7ed;
     box-sizing: border-box;
     flex-shrink: 0;
+    position: relative; // 为切换按钮定位做准备
+
+    // 列号文本
+    .column-number {
+      display: inline-block;
+      z-index: 1;
+      position: relative;
+    }
+
+    // 拆分/合并切换按钮
+    .split-merge-toggle {
+      position: absolute;
+      top: 0;
+      right: 0;
+      transform: translateY(0);
+      background: #fff;
+      border: 1px solid #e4e7ed;
+      border-bottom-left-radius: 4px;
+      border-bottom-right-radius: 4px;
+      padding: 2px 6px;
+      font-size: 11px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      gap: 2px;
+      opacity: 0.7;
+      transition: all 0.2s ease;
+      color: #606266;
+
+      &:hover {
+        opacity: 1;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+      }
+
+      // 拆分状态样式
+      &.is-split {
+        background: #e8f5e9;
+        border-color: #2e7d32;
+        color: #2e7d32;
+      }
+
+      // 合并状态样式
+      &.is-merge {
+        background: #fff3e0;
+        border-color: #e65100;
+        color: #e65100;
+      }
+
+      .el-icon-s-tools {
+        font-size: 10px;
+      }
+
+      .toggle-text {
+        white-space: nowrap;
+      }
+    }
   }
 }
 
-/* 行标尺 + 网格外层 */
 .row-grid-wrapper {
   display: flex;
-  width: 100% !important;
+  width: 100%;
   height: calc(100% - 30px);
   box-sizing: border-box;
-  overflow: hidden !important;
+  overflow: hidden;
 }
 
-/* 左侧行标尺 */
 .row-ruler {
   width: 30px;
   background: #f5f7fa;
   border-right: 1px solid #e4e7ed;
   flex-shrink: 0;
-  overflow: hidden !important;
+  overflow: hidden;
   height: var(--total-height);
 
   .ruler-item {
@@ -411,29 +435,27 @@ export default {
   }
 }
 
-/* 网格容器 */
 .grid-container {
   display: grid;
-  width: 100% !important;
+  width: 100%;
   grid-template-columns: repeat(var(--column-count), minmax(0, var(--half-cell-width)));
-  grid-auto-rows: var(--total-height); /* 每行高度=标尺总高度 */
+  grid-auto-rows: var(--total-height);
   gap: 0px;
   box-sizing: border-box;
-  margin: 0 !important;
-  padding: 0 !important;
+  margin: 0;
+  padding: 0;
   height: var(--total-height);
-  overflow: hidden !important;
+  overflow: hidden;
   -ms-overflow-style: none;
   scrollbar-width: none;
 
   &::-webkit-scrollbar {
-    display: none !important;
-    width: 0 !important;
-    height: 0 !important;
+    display: none;
+    width: 0;
+    height: 0;
   }
 }
 
-/* 列容器（左右小列的外层容器）- 核心修改：移除底部padding，区分两层容器高度 */
 .column-container {
   display: flex;
   flex-direction: column;
@@ -443,25 +465,19 @@ export default {
   border: 1px solid #e4e7ed;
   border-radius: 4px;
 
-  /* 移除：原填补空隙的底部padding */
-  /* padding-bottom: calc(var(--offset-value, 0px) + 2px); */
-
-  /* 左容器（layer1）基础样式：强制100%高度 */
   &.layer-1-container {
     background-color: #fff3e020;
     height: 100%;
   }
 
-  /* 右容器（layer2）基础样式：自动高度，覆盖100% */
   &.layer-2-container {
     background-color: #e8f5e920;
     height: 100%;
   }
 }
 
-/* 单个库位格子（容器内的子元素） */
 .warehouse-cell {
-  height: var(--item-height); /* 动态高度：超限列缩小 */
+  height: var(--item-height);
   border: 1px solid #e4e7ed;
   border-radius: 4px;
   display: flex;
@@ -474,24 +490,19 @@ export default {
   z-index: 1;
   overflow: hidden;
   margin: 1px 0;
-  /* 确保transform偏移不影响点击区域 */
   transform-origin: top center;
 
-  /* 第一层格子样式 */
   &.layer-1:not(.disabled) {
     background: #fff3e0;
     color: #e65100;
   }
 
-  /* 第二层格子样式 */
   &.layer-2:not(.disabled) {
     background: #e8f5e9;
     color: #2e7d32;
-    /* 偏移后增加z-index，避免被遮挡 */
     z-index: 1;
   }
 
-  /* 禁用状态 */
   &.disabled {
     background: #fafafa;
     color: #909399;
@@ -505,7 +516,6 @@ export default {
     }
   }
 
-  /* 单个格子独立hover */
   &:not(.disabled):hover {
     border-color: #90caf9;
     background: #f0f8ff;
@@ -513,7 +523,6 @@ export default {
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
   }
 
-  /* 格子文字 */
   .cell-name {
     width: 100%;
     height: 90%;
@@ -547,7 +556,7 @@ export default {
 
     .disabled & .cell-line1,
     .disabled & .cell-line2 {
-      color: #909399 !important;
+      color: #909399;
     }
 
     .layer-1:not(.disabled) & .cell-line1,
@@ -561,57 +570,4 @@ export default {
     }
   }
 }
-
-/* 右键菜单 */
-.custom-contextmenu {
-  position: fixed;
-  width: 120px;
-  background: #ffffff;
-  border-radius: 4px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
-  border: 1px solid #ebeef5;
-  padding: 5px 0;
-  margin: 0;
-  list-style: none;
-  z-index: 9999;
-
-  ul {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-  }
-
-  li {
-    padding: 6px 15px;
-    cursor: pointer;
-    font-size: 14px;
-    color: #606266;
-    transition: background-color 0.2s;
-
-    &:hover {
-      background-color: #f5f7fa;
-    }
-
-    &.disabled {
-      color: #c0c4cc;
-      cursor: not-allowed;
-
-      &:hover {
-        background-color: #ffffff;
-      }
-    }
-  }
-
-  .menu-divider {
-    height: 1px;
-    margin: 4px 0;
-    background-color: #ebeef5;
-    padding: 0;
-    cursor: default;
-
-    &:hover {
-      background-color: #ebeef5;
-    }
-  }
-}
 </style>
\ No newline at end of file
diff --git a/klp-ui/src/views/wms/warehouse/overview.vue b/klp-ui/src/views/wms/warehouse/overview.vue
index 1230ebbf..8fd3ffcb 100644
--- a/klp-ui/src/views/wms/warehouse/overview.vue
+++ b/klp-ui/src/views/wms/warehouse/overview.vue
@@ -15,7 +15,12 @@
         element-loading-spinner="el-icon-loading">
         <!-- 导出所有二维码 -->
         <!-- <button buttonLoading type="primary" @click="exportAllQrcodes">导出二维码</button> -->
-        <WarehouseBird :warehouse-list="warehouseList" @open-init-dialog="openInitDialog" @split-warehouse="handleSplitWarehouse"/>
+        <WarehouseBird 
+          :warehouse-list="warehouseList" 
+          @open-init-dialog="openInitDialog" 
+          @split-warehouse="handleSplitWarehouse"
+          @merge-warehouse="handleMergeWarehouse"
+        />
       </div>
 
       <!-- 未选中节点提示 -->
@@ -121,18 +126,51 @@ export default {
   },
   methods: {
     /**
-     * 处理分割库位事件
-     */
-    handleSplitWarehouse(warehouse) {
+     * 处理分割库位事件 
+     */ 
+    handleSplitWarehouse(payload) {
       // this.$message.success(`成功分割库位：${warehouse.actualWarehouseCode}`);
-      console.log(warehouse)
-      // splitActualWarehouse(warehouse.actualWarehouseId).then(res => {
-      //   this.$message.success(`成功分割库位：${warehouse.actualWarehouseCode}`);
-      //   this.getWarehouseList(this.selectedNodeId)
-      // }).catch(err => {
-      //   this.$message.error(`分割库位失败：${err.message}`);
-      // })
+      console.log(payload)
+      this.rightLoading = true;
+      const loadingInstance = this.$loading({
+        lock: true,
+        text: '正在转化为小卷库位，这个操作需要一段时间，请稍候...',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      });
+      splitActualWarehouse(payload).then(res => {
+        this.$message.success(`成功转化为小卷库位`);
+        this.getWarehouseList(this.selectedNodeId)
+      }).catch(err => {
+        this.$message.error(`转化为小卷库位失败：${err.message}`);
+      }).finally(() => {
+        this.rightLoading = false;
+        loadingInstance.close();
+      })
     },
+
+    /**
+     * 处理合并库位事件 
+     */
+    handleMergeWarehouse(payload) {
+      this.rightLoading = true;
+      const loadingInstance = this.$loading({
+        lock: true,
+        text: '正在转化为大卷库位，这个操作需要一段时间，请稍候...',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      });
+      mergeActualWarehouse(payload).then(res => {
+        this.$message.success(`成功转化为大卷库位`);
+        this.getWarehouseList(this.selectedNodeId)
+      }).catch(err => {
+        this.$message.error(`转化为大卷库位失败：${err.message}`);
+      }).finally(() => {
+        this.rightLoading = false;
+        loadingInstance.close();
+      })
+    },
+
     // 获取树形数据
     getWarehouseTree() {
       this.treeLoading = true;