From b20cda4e73a514af58467344a615716633918db9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A0=82=E7=B3=96?= <qq2178503051@163.com>
Date: Fri, 5 Dec 2025 11:29:28 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E4=BB=93=E5=BA=93=E7=AE=A1=E7=90=86):=20?=
 =?UTF-8?q?=E6=96=B0=E5=A2=9E=E4=BB=93=E5=BA=93=E5=8F=AF=E8=A7=86=E5=8C=96?=
 =?UTF-8?q?=E9=B8=9F=E7=9E=B0=E5=9B=BE=E7=BB=84=E4=BB=B6=E5=8F=8A=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

新增 WarehouseBird 和 WarehouseGrid 组件实现仓库库位可视化展示
添加 QRCode 组件用于生成库位二维码
实现库位初始化功能，支持批量生成库位
优化库位展示，支持行列转置和详情查看
修复部分显示字段名称问题
---
 klp-ui/src/api/wms/actualWarehouse.js         |   8 +
 klp-ui/src/components/QRCode/index.vue        |  50 +++
 klp-ui/src/views/wms/coil/actflow.vue         |   2 +-
 klp-ui/src/views/wms/coil/panels/base.vue     |   2 +-
 .../warehouse/components/WarehouseBird.vue    | 220 ++++++++++
 .../warehouse/components/WarehouseGrid.vue    | 371 +++++++++++++++++
 klp-ui/src/views/wms/warehouse/overview.vue   | 390 ++++++++++++++++++
 klp-ui/src/views/wms/warehouse/real.vue       |   1 -
 .../impl/WmsActualWarehouseServiceImpl.java   |   2 +-
 9 files changed, 1042 insertions(+), 4 deletions(-)
 create mode 100644 klp-ui/src/components/QRCode/index.vue
 create mode 100644 klp-ui/src/views/wms/warehouse/components/WarehouseBird.vue
 create mode 100644 klp-ui/src/views/wms/warehouse/components/WarehouseGrid.vue
 create mode 100644 klp-ui/src/views/wms/warehouse/overview.vue

diff --git a/klp-ui/src/api/wms/actualWarehouse.js b/klp-ui/src/api/wms/actualWarehouse.js
index 348b5bd5..ef9c4228 100644
--- a/klp-ui/src/api/wms/actualWarehouse.js
+++ b/klp-ui/src/api/wms/actualWarehouse.js
@@ -79,3 +79,11 @@ export function treeActualWarehouseTwoLevel(query) {
     params: query
   })
 }
+
+export function generateLocations(data) {
+  return request({
+    url: '/wms/actualWarehouse/generateLocations',
+    method: 'post',
+    data
+  })
+}
diff --git a/klp-ui/src/components/QRCode/index.vue b/klp-ui/src/components/QRCode/index.vue
new file mode 100644
index 00000000..9139b049
--- /dev/null
+++ b/klp-ui/src/components/QRCode/index.vue
@@ -0,0 +1,50 @@
+<template>
+  <canvas ref="qrcode"></canvas>
+</template>
+
+<script>
+import QRCode from 'qrcode';
+
+export default {
+  name: 'QRCode',
+  props: {
+    content: {
+      type: String,
+      required: true
+    },
+    size: {
+      type: Number,
+      default: 90
+    }
+  },  
+  data() {
+    return {
+      qrcode: null
+    }
+  },
+  watch: {
+    content: {
+      handler(newVal, oldVal) {
+        if (newVal !== oldVal) {
+          this.generateQRCode();
+        }
+      },
+      immediate: true
+    }
+  },
+  mounted() {
+    this.generateQRCode();
+  },
+  methods: {
+    generateQRCode() {
+      const el = this.$refs.qrcode;
+      const content = this.content;
+      QRCode.toCanvas(el, content, {
+        width: this.size,
+        height: this.size,
+        margin: 0
+      });
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/klp-ui/src/views/wms/coil/actflow.vue b/klp-ui/src/views/wms/coil/actflow.vue
index 97d3858c..b7d33039 100644
--- a/klp-ui/src/views/wms/coil/actflow.vue
+++ b/klp-ui/src/views/wms/coil/actflow.vue
@@ -121,7 +121,7 @@
         </template>
       </el-table-column>
 
-      <el-table-column label="创建人" align="center" prop="createBy" width="100" />
+      <el-table-column label="创建人" align="center" prop="createByName" width="100" />
       <el-table-column label="操作人" align="center" prop="operatorName" width="100" />
 
       <el-table-column label="处理时间" align="center" prop="processTime" width="155" :show-overflow-tooltip="true">
diff --git a/klp-ui/src/views/wms/coil/panels/base.vue b/klp-ui/src/views/wms/coil/panels/base.vue
index af7a082e..ae720572 100644
--- a/klp-ui/src/views/wms/coil/panels/base.vue
+++ b/klp-ui/src/views/wms/coil/panels/base.vue
@@ -102,7 +102,7 @@
       <el-table-column v-if="showAbnormal" label="异常数量" align="center" prop="abnormalCount"></el-table-column>
       <el-table-column label="更新时间" align="center" prop="updateTime" />
       <el-table-column label="发货时间" align="center" v-if="showExportTime" prop="exportTime" />
-      <el-table-column label="更新人" align="center" prop="updateBy" />
+      <el-table-column label="更新人" align="center" prop="updateByName" />
 
       <el-table-column label="二维码" v-if="qrcode">
         <template slot-scope="scope">
diff --git a/klp-ui/src/views/wms/warehouse/components/WarehouseBird.vue b/klp-ui/src/views/wms/warehouse/components/WarehouseBird.vue
new file mode 100644
index 00000000..46f11373
--- /dev/null
+++ b/klp-ui/src/views/wms/warehouse/components/WarehouseBird.vue
@@ -0,0 +1,220 @@
+<template>
+  <div class="bird-container">
+    <!-- 统计信息卡片 -->
+    <div class="statistics-card">
+      <el-card shadow="hover">
+        <div class="statistics-item">
+          <span class="label">总库位数：</span>
+          <span class="value">{{ statistics.total }}</span>
+        </div>
+        <div class="statistics-item">
+          <span class="label">总层数：</span>
+          <span class="value">{{ statistics.layerCount }}</span>
+        </div>
+        <div class="statistics-item">
+          <span class="label">各层库位分布：</span>
+          <span class="value">
+            <span v-for="(count, layer) in statistics.layerDetail" :key="layer">
+              第{{ layer }}层：{{ count }}个
+            </span>
+          </span>
+        </div>
+      </el-card>
+    </div>
+
+    <!-- 分层库位容器 -->
+    <div class="layers-container">
+      <!-- 遍历每层，渲染 Grid 组件 -->
+      <div v-for="(layerData, layer) in layers" :key="layer" class="layer-section">
+        <el-divider content-position="left">第{{ layer }}层库位</el-divider>
+        <WarehouseGrid :layer="layer" :layer-data="layerData" />
+      </div>
+
+      <!-- 无数据提示 -->
+      <div class="empty-tip" v-if="Object.keys(layers).length === 0 && warehouseList.length > 0">
+        暂无解析到有效的库位分层数据
+      </div>
+      <div class="empty-tip" v-if="warehouseList.length === 0">
+        <div class="empty-text">该分类下暂无库位数据</div>
+        <el-button type="primary" icon="el-icon-plus" @click="openInitDialog">初始化库位</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import WarehouseGrid from './WarehouseGrid.vue';
+
+export default {
+  name: "WarehouseBird",
+  components: { WarehouseGrid },
+  props: {
+    // 原始库位列表
+    warehouseList: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      // 分层库位数据
+      layers: {},
+      // 统计信息
+      statistics: {
+        total: 0,
+        layerCount: 0,
+        layerDetail: {}
+      }
+    };
+  },
+  watch: {
+    // 监听库位列表变化，重新构建分层数据
+    warehouseList: {
+      immediate: true,
+      handler(newVal) {
+        this.buildWarehouseBox(newVal);
+      }
+    }
+  },
+  methods: {
+    /**
+     * 解析库位编码
+     */
+    parseWarehouseCode(code) {
+      if (!code) return null;
+      const reg = /^([A-Za-z])(\d+[A-Za-z])(\d)(\d{2})-(\d+)$/;
+      const match = code.match(reg);
+
+      if (!match) {
+        console.warn(`库位编码解析失败：${code}，格式不符合规范`);
+        return null;
+      }
+
+      return {
+        warehouseFirst: match[1],
+        warehouseSecond: match[2],
+        column: Number(match[3]),
+        row: Number(match[4]),
+        layer: match[5],
+      };
+    },
+
+    /**
+     * 构建分层库位数据结构
+     */
+    buildWarehouseBox(list) {
+      const layerMap = {};
+      const statistics = {
+        total: list.length,
+        layerCount: 0,
+        layerDetail: {},
+      };
+
+      // 按层分组
+      list.forEach((warehouse) => {
+        const codeInfo = this.parseWarehouseCode(warehouse.actualWarehouseCode);
+        if (!codeInfo) return;
+
+        const { layer, row, column } = codeInfo;
+        warehouse.parsedInfo = codeInfo;
+
+        if (!layerMap[layer]) {
+          layerMap[layer] = {
+            maxRow: 0,
+            maxColumn: 0,
+            warehouses: [],
+            emptyCount: 0
+          };
+        }
+
+        layerMap[layer].maxRow = Math.max(layerMap[layer].maxRow, row);
+        layerMap[layer].maxColumn = Math.max(layerMap[layer].maxColumn, column);
+        layerMap[layer].warehouses.push(warehouse);
+      });
+
+      // 处理空占位和排序
+      Object.keys(layerMap).forEach((layer) => {
+        const layerData = layerMap[layer];
+        const totalGrid = layerData.maxRow * layerData.maxColumn;
+        layerData.emptyCount = Math.max(0, totalGrid - layerData.warehouses.length);
+        
+        // 按行号+列号排序
+        layerData.warehouses.sort((a, b) => {
+          if (a.parsedInfo.row !== b.parsedInfo.row) {
+            return a.parsedInfo.row - b.parsedInfo.row;
+          }
+          return a.parsedInfo.column - b.parsedInfo.column;
+        });
+      });
+
+      // 更新统计信息
+      statistics.layerCount = Object.keys(layerMap).length;
+      Object.keys(layerMap).forEach((layer) => {
+        statistics.layerDetail[layer] = layerMap[layer].warehouses.length;
+      });
+
+      this.layers = layerMap;
+      this.statistics = statistics;
+    },
+
+    /**
+     * 打开初始化弹窗（透传至根组件）
+     */
+    openInitDialog() {
+      this.$emit('open-init-dialog');
+    }
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.bird-container {
+  width: 100%;
+  height: 100%;
+}
+
+// 统计卡片样式
+.statistics-card {
+  margin-bottom: 16px;
+
+  .statistics-item {
+    margin-bottom: 8px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    .label {
+      color: #606266;
+      font-size: 14px;
+    }
+
+    .value {
+      color: #303133;
+      font-size: 14px;
+      font-weight: 500;
+      margin-left: 8px;
+    }
+  }
+}
+
+// 分层容器样式
+.layers-container {
+  .layer-section {
+    margin-bottom: 24px;
+  }
+
+  .empty-tip {
+    text-align: center;
+    padding: 32px;
+    color: #909399;
+    font-size: 14px;
+    background: #fff;
+    border-radius: 8px;
+
+    .empty-text {
+      margin-bottom: 16px;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/klp-ui/src/views/wms/warehouse/components/WarehouseGrid.vue b/klp-ui/src/views/wms/warehouse/components/WarehouseGrid.vue
new file mode 100644
index 00000000..5048e0df
--- /dev/null
+++ b/klp-ui/src/views/wms/warehouse/components/WarehouseGrid.vue
@@ -0,0 +1,371 @@
+<template>
+  <div class="grid-wrapper">
+    <!-- 转置按钮 -->
+    <el-button 
+      type="text" 
+      icon="el-icon-refresh-left" 
+      size="mini"
+      @click="toggleTranspose"
+      class="transpose-btn"
+    >
+      {{ isTransposed ? '恢复行列' : '行列转置' }}
+    </el-button>
+
+    <!-- 核心滚动容器：列标尺 + 网格区域共享滚动条 -->
+    <div class="grid-scroll-container" ref="scrollContainerRef">
+      <!-- 滚动内容容器：列标尺 + 行标尺+网格 -->
+      <div class="scroll-content">
+        <!-- 列标尺（顶部） -->
+        <div class="col-ruler">
+          <div class="ruler-empty"></div>
+          <div v-for="col in transposedLayerData.maxColumn" :key="`col-${layer}-${col}`" class="ruler-item">
+            {{ col }}
+          </div>
+        </div>
+
+        <!-- 行标尺 + 库位网格 -->
+        <div class="row-grid-wrapper">
+          <!-- 行标尺（左侧） -->
+          <div class="row-ruler">
+            <div v-for="row in transposedLayerData.maxRow" :key="`row-${layer}-${row}`" class="ruler-item">
+              {{ row }}
+            </div>
+          </div>
+
+          <!-- 库位网格 -->
+          <div class="grid-container" :style="{ gridTemplateColumns: `repeat(${transposedLayerData.maxColumn}, 80px)` }">
+            <!-- 库位格子 -->
+            <div v-for="warehouse in transposedLayerData.warehouses" :key="warehouse.actualWarehouseId"
+              class="warehouse-cell" :class="{ disabled: warehouse.isEnabled === 0 }"
+              @click="handleCellClick(warehouse)">
+              <div class="cell-code">{{ warehouse.actualWarehouseCode }}</div>
+              <div class="cell-name">{{ warehouse.actualWarehouseName || '-' }}</div>
+            </div>
+
+            <!-- 空库位占位 -->
+            <div class="warehouse-cell empty-cell" v-for="i in transposedLayerData.emptyCount" :key="`empty-${layer}-${i}`">
+              <div class="cell-code">-</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 库位详情弹窗 -->
+    <el-dialog title="库位详情" :visible.sync="dialogVisible" width="600px" destroy-on-close append-to-body center>
+      <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>
+        <el-descriptions-item label="所属层级">{{ currentWarehouse.parsedInfo.layer || '未知' }}</el-descriptions-item>
+        <!-- 弹窗内行列显示适配转置状态 -->
+        <el-descriptions-item label="行号">
+          {{ isTransposed ? currentWarehouse.parsedInfo.column : currentWarehouse.parsedInfo.row || '未知' }}
+        </el-descriptions-item>
+        <el-descriptions-item label="列号">
+          {{ isTransposed ? currentWarehouse.parsedInfo.row : 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="启用状态">
+          <el-tag :type="currentWarehouse.isEnabled === 1 ? 'success' : 'danger'">
+            {{ currentWarehouse.isEnabled === 1 ? '启用' : '禁用' }}
+          </el-tag>
+        </el-descriptions-item>
+        <el-descriptions-item label="库位码">
+          <QRCode :content="currentWarehouse.actualWarehouseId" size="60" />
+        </el-descriptions-item>
+        <el-descriptions-item label="创建时间" span="2">{{ currentWarehouse.createTime || '无' }}</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';
+
+export default {
+  name: "WarehouseGrid",
+  components: { QRCode },
+  props: {
+    // 层号
+    layer: {
+      type: [String, Number],
+      required: true
+    },
+    // 层数据
+    layerData: {
+      type: Object,
+      required: true,
+      default: () => ({
+        maxRow: 0,
+        maxColumn: 0,
+        warehouses: [],
+        emptyCount: 0
+      })
+    }
+  },
+  data() {
+    return {
+      // 弹窗状态
+      dialogVisible: false,
+      currentWarehouse: null,
+      // 转置状态：false-原始布局 | true-行列转置
+      isTransposed: false
+    };
+  },
+  computed: {
+    /**
+     * 处理转置后的层数据（视图层映射，不修改原数据）
+     */
+    transposedLayerData() {
+      const { maxRow, maxColumn, warehouses } = this.layerData;
+      
+      // 转置后的基础行列数
+      const transMaxRow = this.isTransposed ? maxColumn : maxRow;
+      const transMaxColumn = this.isTransposed ? maxRow : maxColumn;
+
+      // 深拷贝库位数据，避免修改原数据
+      const transWarehouses = JSON.parse(JSON.stringify(warehouses)).map(item => {
+        // 转置时互换行列解析值
+        if (this.isTransposed && item.parsedInfo) {
+          const { row, column } = item.parsedInfo;
+          item.parsedInfo.row = column;
+          item.parsedInfo.column = row;
+        }
+        return item;
+      });
+
+      // 转置后重新排序（原：行→列 | 转置：列→行）
+      transWarehouses.sort((a, b) => {
+        if (a.parsedInfo.row !== b.parsedInfo.row) {
+          return a.parsedInfo.row - b.parsedInfo.row;
+        }
+        return a.parsedInfo.column - b.parsedInfo.column;
+      });
+
+      // 转置后重新计算空占位数量
+      const totalGrid = transMaxRow * transMaxColumn;
+      const emptyCount = Math.max(0, totalGrid - transWarehouses.length);
+
+      return {
+        maxRow: transMaxRow,
+        maxColumn: transMaxColumn,
+        warehouses: transWarehouses,
+        emptyCount
+      };
+    }
+  },
+  methods: {
+    /**
+     * 切换转置状态
+     */
+    toggleTranspose() {
+      this.isTransposed = !this.isTransposed;
+      // 重置弹窗选中状态（可选）
+      this.dialogVisible = false;
+      this.currentWarehouse = null;
+    },
+
+    /**
+     * 点击库位格子展示详情
+     */
+    handleCellClick(warehouse) {
+      this.currentWarehouse = warehouse;
+      this.dialogVisible = true;
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.grid-wrapper {
+  background: #fff;
+  border-radius: 8px;
+  overflow: hidden;
+  width: 100%;
+  position: relative; // 为转置按钮提供定位上下文
+  min-height: 100px; // 防止空数据时高度为0
+}
+
+// 转置按钮（固定位置）
+.transpose-btn {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  z-index: 20; // 高于滚动容器
+  color: #409eff;
+  height: 30px;
+  line-height: 30px;
+  padding: 0 8px;
+  background: rgba(255, 255, 255, 0.9);
+  border-radius: 4px;
+
+  &:hover {
+    color: #1e88e5;
+    background: #e8f4ff;
+  }
+}
+
+// 核心滚动容器：横向滚动，列标尺+网格共享滚动条
+.grid-scroll-container {
+  width: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+  position: relative;
+  padding-bottom: 8px; // 给滚动条留空间
+  // 优化滚动条样式
+  &::-webkit-scrollbar {
+    height: 8px;
+  }
+  &::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 4px;
+  }
+  &::-webkit-scrollbar-thumb {
+    background: #c1c1c1;
+    border-radius: 4px;
+    &:hover {
+      background: #a8a8a8;
+    }
+  }
+  // 兼容非webkit浏览器
+  scrollbar-width: thin;
+  scrollbar-color: #c1c1c1 #f1f1f1;
+}
+
+// 滚动内容容器：列标尺 + 行标尺+网格
+.scroll-content {
+  display: inline-block;
+  background: #fff;
+}
+
+// 列标尺样式
+.col-ruler {
+  display: flex;
+  height: 30px;
+  line-height: 30px;
+  background: #eef2f7;
+  border-bottom: 1px solid #dcdfe6;
+
+  .ruler-empty {
+    width: 30px;
+    text-align: center;
+    font-weight: 600;
+    color: #606266;
+    border-right: 1px solid #dcdfe6;
+    flex-shrink: 0;
+  }
+
+  .ruler-item {
+    width: 80px;
+    text-align: center;
+    font-weight: 600;
+    color: #606266;
+    border-right: 1px solid #dcdfe6;
+    box-sizing: border-box;
+    flex-shrink: 0;
+  }
+}
+
+// 行标尺 + 网格容器
+.row-grid-wrapper {
+  display: flex;
+  width: 100%;
+}
+
+// 行标尺样式
+.row-ruler {
+  width: 30px;
+  background: #eef2f7;
+  border-right: 1px solid #dcdfe6;
+  flex-shrink: 0;
+
+  .ruler-item {
+    height: 80px;
+    line-height: 80px;
+    text-align: center;
+    font-weight: 600;
+    color: #606266;
+    border-bottom: 1px solid #dcdfe6;
+    box-sizing: border-box;
+  }
+}
+
+// 库位网格容器
+.grid-container {
+  display: grid;
+  gap: 0;
+  box-sizing: border-box;
+
+  // 库位格子
+  .warehouse-cell {
+    height: 80px;
+    width: 80px;
+    border: 1px solid #e6e6e6;
+    border-radius: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    transition: all 0.2s;
+    box-sizing: border-box;
+    margin: 0;
+
+    &:hover {
+      border-color: #409eff;
+      background: #e8f4ff;
+      z-index: 1;
+    }
+
+    &.disabled {
+      background: #f5f5f5;
+      color: #909399;
+      cursor: not-allowed;
+
+      &:hover {
+        border-color: #e6e6e6;
+        background: #f5f5f5;
+      }
+    }
+
+    .cell-code {
+      font-size: 14px;
+      font-weight: 600;
+      margin-bottom: 4px;
+    }
+
+    .cell-name {
+      font-size: 12px;
+      color: #606266;
+    }
+  }
+
+  // 空占位格子
+  .empty-cell {
+    background: #fafafa;
+    border-style: solid;
+    border-color: #e6e6e6;
+
+    .cell-code {
+      color: #c0c4cc;
+    }
+  }
+}
+
+// 弹窗样式优化
+::v-deep(.el-descriptions) {
+  .el-descriptions-item__label {
+    font-weight: 500;
+    color: #606266;
+  }
+
+  .el-descriptions-item__content {
+    color: #303133;
+  }
+}
+</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
new file mode 100644
index 00000000..b48ac860
--- /dev/null
+++ b/klp-ui/src/views/wms/warehouse/overview.vue
@@ -0,0 +1,390 @@
+<template>
+  <div class="app-container">
+    <!-- 整体布局 -->
+    <div class="layout-container">
+      <!-- 左侧树形结构 -->
+      <div class="tree-container" 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"
+          :disabled="isSwitching"
+        >
+        </el-tree>
+      </div>
+
+      <!-- 右侧仓库信息区域 - 替换为 Bird 组件 -->
+      <div class="warehouse-container" v-if="selectedNodeId" v-loading="rightLoading" 
+           element-loading-text="加载中..." element-loading-spinner="el-icon-loading">
+        <WarehouseBird :warehouse-list="warehouseList" />
+      </div>
+
+      <!-- 未选中节点提示 -->
+      <div class="empty-select-tip" v-if="!selectedNodeId">
+        请选择左侧仓库分类查看库位信息
+      </div>
+    </div>
+
+    <!-- 库位初始化弹窗 -->
+    <el-dialog title="库位初始化" :visible.sync="initDialogVisible" width="700px" destroy-on-close append-to-body center>
+      <el-form ref="initFormRef" :model="initForm" :rules="initFormRules" label-width="100px" size="mini">
+        <!-- 可视化网格选择区域 -->
+        <el-form-item label="行列选择" prop="gridSelect">
+          <div class="grid-selector-container">
+            <div class="selector-tip">
+              拖动/点击选择网格范围（当前：{{ initForm.rowCount || 0 }}行 × {{ initForm.columnCount || 0 }}列）
+            </div>
+            <div class="grid-selector" 
+                 @mousemove="handleGridHover" 
+                 @click="confirmGridSelect"
+                 @mouseleave="resetGridHover">
+              <div v-for="row in 50" :key="`grid-row-${row}`" class="grid-selector-row">
+                <div 
+                  v-for="col in 10" 
+                  :key="`grid-col-${col}`"
+                  class="grid-selector-cell"
+                  :class="{
+                    hovered: row <= hoverRow && col <= hoverCol,
+                    selected: row <= initForm.rowCount && col <= initForm.columnCount
+                  }">
+                </div>
+              </div>
+            </div>
+          </div>
+        </el-form-item>
+        <el-form-item label="层数" prop="layerCount">
+          <el-input-number size="mini" v-model="initForm.layerCount" :min="1" :max="99" placeholder="请输入层数（1-99）"
+            style="width: 100%;" />
+        </el-form-item>
+        <el-form-item label="编码前缀" prop="prefix">
+          <el-input v-model="initForm.prefix" disabled placeholder="系统自动生成" />
+        </el-form-item>
+      </el-form>
+      <template slot="footer">
+        <el-button @click="initDialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="submitInitForm">确认初始化</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listActualWarehouse, treeActualWarehouseTwoLevel, getActualWarehouse, generateLocations } from "@/api/wms/actualWarehouse";
+import WarehouseBird from './components/WarehouseBird.vue';
+
+export default {
+  name: "Overview",
+  components: { WarehouseBird },
+  data() {
+    // 自定义验证规则：正整数
+    const positiveIntegerValidator = (rule, value, callback) => {
+      if (!value) {
+        callback(new Error('请输入正整数'));
+      } else if (!/^[1-9]\d*$/.test(value)) {
+        callback(new Error('请输入大于0的正整数'));
+      } else {
+        callback();
+      }
+    };
+
+    // 网格选择验证规则
+    const gridSelectValidator = (rule, value, callback) => {
+      if (!this.initForm.rowCount || !this.initForm.columnCount) {
+        callback(new Error('请先选择网格行列数'));
+      } else {
+        callback();
+      }
+    };
+
+    return {
+      warehouseTree: [],
+      treeProps: { label: "actualWarehouseName", children: "children" },
+      selectedNodeId: "",
+      selectedNode: null,
+      warehouseList: [], // 透传给 Bird 组件的原始数据
+      // 初始化弹窗相关
+      initDialogVisible: false,
+      initForm: {
+        rowCount: '', columnCount: '', layerCount: '', prefix: '', parentId: ''
+      },
+      hoverRow: 0,
+      hoverCol: 0,
+      initFormRules: {
+        gridSelect: [{ validator: gridSelectValidator, trigger: 'change' }],
+        layerCount: [{ validator: positiveIntegerValidator, trigger: 'blur' }],
+        parentId: [{ required: true, message: '父节点ID不能为空', trigger: 'blur' }]
+      },
+      // 加载状态
+      treeLoading: false,
+      rightLoading: false,
+      isSwitching: false,
+      nodeClickTimer: null,
+    };
+  },
+  created() {
+    this.getWarehouseTree();
+  },
+  beforeDestroy() {
+    if (this.nodeClickTimer) clearTimeout(this.nodeClickTimer);
+  },
+  methods: {
+    // 获取树形数据
+    getWarehouseTree() {
+      this.treeLoading = true;
+      treeActualWarehouseTwoLevel()
+        .then((res) => { this.warehouseTree = res.data || []; })
+        .catch((err) => { this.$message.error("获取仓库树形数据失败：" + err.message); })
+        .finally(() => { this.treeLoading = false; });
+    },
+
+    // 树节点点击
+    handleNodeClick(node) {
+      if (this.isSwitching) return;
+      if (this.nodeClickTimer) clearTimeout(this.nodeClickTimer);
+
+      this.nodeClickTimer = setTimeout(() => {
+        if (!node.children || node.children.length === 0) {
+          this.isSwitching = true;
+          this.rightLoading = true;
+          this.selectedNodeId = node.actualWarehouseId;
+          this.selectedNode = node;
+          
+          this.getWarehouseList(node.actualWarehouseId)
+            .finally(() => {
+              this.rightLoading = false;
+              this.isSwitching = false;
+            });
+        } else {
+          this.selectedNodeId = "";
+          this.selectedNode = null;
+          this.warehouseList = [];
+        }
+      }, 300);
+    },
+
+    // 获取库位列表
+    getWarehouseList(parentId) {
+      return listActualWarehouse({ parentId })
+        .then((res) => { this.warehouseList = res.data || []; })
+        .catch((err) => {
+          this.$message.error("获取库位数据失败：" + err.message);
+          this.warehouseList = [];
+        });
+    },
+
+    // 打开初始化弹窗
+    async openInitDialog() {
+      if (!this.selectedNode) {
+        this.$message.warning('请先选择左侧仓库分类');
+        return;
+      }
+
+      try {
+        await this.$confirm(
+          '初始化库位将批量生成指定数量的库位数据，此操作不可撤销！请确认是否继续？',
+          '重要提示',
+          { confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning' }
+        );
+      } catch { return; }
+
+      this.$nextTick(() => {
+        this.$refs.initFormRef?.resetFields();
+        this.initForm.rowCount = '';
+        this.initForm.columnCount = '';
+        this.hoverRow = 0;
+        this.hoverCol = 0;
+      });
+
+      const prefix = await this.generateWarehousePrefix(this.selectedNode);
+      this.initForm = {
+        rowCount: '', columnCount: '', layerCount: '',
+        prefix: prefix,
+        parentId: this.selectedNode.actualWarehouseId
+      };
+      this.initDialogVisible = true;
+    },
+
+    // 生成编码前缀
+    async generateWarehousePrefix(node) {
+      try {
+        const parentRes = await getActualWarehouse(node.parentId);
+        const parentCode = parentRes.data.actualWarehouseCode || '';
+        const nodeCode = node.actualWarehouseCode || '';
+        return (parentCode + nodeCode).toUpperCase();
+      } catch (err) {
+        this.$message.error('生成编码前缀失败，将使用默认前缀');
+        return 'DEFAULT';
+      }
+    },
+
+    // 网格选择悬浮
+    handleGridHover(e) {
+      const cell = e.target.closest('.grid-selector-cell');
+      if (!cell) return;
+
+      const row = Array.from(cell.parentElement.parentElement.children).indexOf(cell.parentElement) + 1;
+      const col = Array.from(cell.parentElement.children).indexOf(cell) + 1;
+      this.hoverRow = Math.min(row, 99);
+      this.hoverCol = Math.min(col, 99);
+    },
+
+    // 确认网格选择
+    confirmGridSelect() {
+      if (this.hoverRow < 1 || this.hoverCol < 1) return;
+      this.initForm.rowCount = this.hoverRow;
+      this.initForm.columnCount = this.hoverCol;
+      this.$refs.initFormRef.validateField('gridSelect');
+    },
+
+    // 重置网格悬浮
+    resetGridHover() {
+      this.hoverRow = this.initForm.rowCount || 0;
+      this.hoverCol = this.initForm.columnCount || 0;
+    },
+
+    // 提交初始化表单
+    submitInitForm() {
+      this.$refs.initFormRef.validate(async (valid) => {
+        if (valid) {
+          const params = {
+            rowCount: this.initForm.rowCount,
+            columnCount: this.initForm.columnCount,
+            layerCount: this.initForm.layerCount,
+            prefix: this.initForm.prefix,
+            parentId: this.initForm.parentId
+          };
+
+          const loadingInstance = this.$loading({
+            lock: true, text: '正在初始化库位，请稍候...',
+            spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)'
+          });
+
+          try {
+            await generateLocations(params);
+            this.$message.success('库位初始化成功！');
+            this.initDialogVisible = false;
+            await this.getWarehouseList(this.selectedNodeId);
+          } catch (err) {
+            this.$message.error('库位初始化失败：' + err.message);
+          } finally {
+            loadingInstance.close();
+          }
+        } else {
+          this.$message.warning('请完善表单必填信息！');
+          return false;
+        }
+      });
+    }
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.app-container {
+  width: 100%;
+  height: calc(100vh - 90px);
+  padding: 16px;
+  box-sizing: border-box;
+  background: #f5f7fa;
+}
+
+.layout-container {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  gap: 16px;
+
+  .tree-container {
+    width: 280px;
+    height: 100%;
+    background: #fff;
+    border-radius: 8px;
+    padding: 16px;
+    box-sizing: border-box;
+    overflow-y: auto;
+
+    .warehouse-tree {
+      --el-tree-text-color: #303133;
+      --el-tree-node-hover-bg-color: #e8f4ff;
+      --el-tree-current-bg-color: #409eff;
+      --el-tree-current-text-color: #fff;
+    }
+  }
+
+  .warehouse-container {
+    flex: 1;
+    height: 100%;
+    overflow-y: auto;
+  }
+
+  .empty-select-tip {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #909399;
+    font-size: 16px;
+    background: #fff;
+    border-radius: 8px;
+  }
+}
+
+// 初始化网格选择器样式
+.grid-selector-container {
+  width: 100%;
+  padding: 10px;
+  box-sizing: border-box;
+
+  .selector-tip {
+    margin-bottom: 10px;
+    font-size: 12px;
+    color: #606266;
+  }
+
+  .grid-selector {
+    width: 100%;
+    max-width: 500px;
+    max-height: 300px;
+    overflow: auto;
+    border: 1px solid #e6e6e6;
+    background: #fafafa;
+    cursor: crosshair;
+
+    .grid-selector-row {
+      display: flex;
+
+      .grid-selector-cell {
+        width: 20px;
+        height: 20px;
+        border: 1px solid #e0e0e0;
+        box-sizing: border-box;
+        transition: all 0.1s;
+
+        &.hovered {
+          background: #e8f4ff;
+          border-color: #409eff;
+        }
+
+        &.selected {
+          background: #409eff;
+          border-color: #1e88e5;
+        }
+
+        &:hover {
+          background: #c6e2ff;
+          border-color: #409eff;
+        }
+      }
+    }
+  }
+}
+
+::v-deep(.el-form-item) {
+  margin-bottom: 16px;
+}
+</style>
\ No newline at end of file
diff --git a/klp-ui/src/views/wms/warehouse/real.vue b/klp-ui/src/views/wms/warehouse/real.vue
index 4438b7fd..2e2fdfee 100644
--- a/klp-ui/src/views/wms/warehouse/real.vue
+++ b/klp-ui/src/views/wms/warehouse/real.vue
@@ -328,7 +328,6 @@
 
 <script>
 import {
-  listActualWarehouseTree,
   getActualWarehouse,
   delActualWarehouse,
   addActualWarehouse,
diff --git a/klp-wms/src/main/java/com/klp/service/impl/WmsActualWarehouseServiceImpl.java b/klp-wms/src/main/java/com/klp/service/impl/WmsActualWarehouseServiceImpl.java
index 2297754c..dd25a497 100644
--- a/klp-wms/src/main/java/com/klp/service/impl/WmsActualWarehouseServiceImpl.java
+++ b/klp-wms/src/main/java/com/klp/service/impl/WmsActualWarehouseServiceImpl.java
@@ -85,7 +85,7 @@ public class WmsActualWarehouseServiceImpl implements IWmsActualWarehouseService
             }
             WmsActualWarehouse e = new WmsActualWarehouse();
             e.setParentId(parentId);
-            e.setActualWarehouseType(2L);
+            e.setActualWarehouseType(3L);
             e.setActualWarehouseCode(code);
             e.setActualWarehouseName(code);
             e.setSortNo(0L);