From 2bd09e2cf4bca727229c6b82342522935c807fc6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A0=82=E7=B3=96?= <qq2178503051@163.com>
Date: Wed, 17 Sep 2025 15:59:03 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20=E4=BB=93=E5=BA=93=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 gear-ui3/src/api/{wms => oms}/customer.js     |   0
 gear-ui3/src/api/{wms => oms}/order.js        |   0
 gear-ui3/src/api/{wms => oms}/orderDetail.js  |   0
 gear-ui3/src/api/wms/stock.js                 |  55 ++
 gear-ui3/src/api/wms/stockIo.js               | 134 ++++
 gear-ui3/src/api/wms/stockIoDetail.js         |  44 ++
 gear-ui3/src/api/wms/stockLog.js              |  44 ++
 gear-ui3/src/api/wms/warehouse.js             |  44 ++
 .../src/components/ChartWrapper/index.vue     | 207 ++++++
 .../src/components/CustomerSelect/index.vue   |   2 +-
 gear-ui3/src/components/FileUpload/index.vue  |   2 +-
 gear-ui3/src/components/GearTable/index.vue   |   4 +-
 .../src/components/ImagePreview/index.vue     |   4 +-
 .../ProductSelect/BomPanel/index.vue          |   2 +-
 .../src/components/WarehouseSelect/index.vue  | 119 ++++
 .../src/components/WarehouseTree/index.vue    |  75 +++
 gear-ui3/src/utils/enums.js                   |  36 +-
 gear-ui3/src/views/dashboard/home.vue         |   6 +-
 .../report/components/ProjectReportDetail.vue |   2 +-
 gear-ui3/src/views/info/report/dashboard.vue  |   2 +-
 gear-ui3/src/views/oms/customer/index.vue     |   6 +-
 gear-ui3/src/views/oms/dashboard/index.vue    |   6 +-
 .../src/views/oms/order/panels/detail.vue     |   6 +-
 .../src/views/oms/order/panels/orderPage.vue  |   6 +-
 .../src/views/product/components/BomPanel.vue |   2 +-
 gear-ui3/src/views/wms/ledger/index.vue       | 287 +++++++++
 gear-ui3/src/views/wms/stock/box.vue          | 167 +++++
 gear-ui3/src/views/wms/stock/index.vue        | 410 ++++++++++++
 gear-ui3/src/views/wms/stock/panels/bar.vue   | 214 ++++++
 .../src/views/wms/stock/panels/reattree.vue   | 269 ++++++++
 gear-ui3/src/views/wms/stock/panels/resize.js |  85 +++
 .../src/views/wms/stock/panels/stockIo.vue    | 104 +++
 .../src/views/wms/stock/panels/trendChart.vue | 406 ++++++++++++
 gear-ui3/src/views/wms/stockIo/in.vue         |  13 +
 gear-ui3/src/views/wms/stockIo/index.vue      | 488 ++++++++++++++
 gear-ui3/src/views/wms/stockIo/move.vue       |  13 +
 gear-ui3/src/views/wms/stockIo/out.vue        |  13 +
 .../src/views/wms/stockIo/panels/barcode.vue  | 424 ++++++++++++
 .../src/views/wms/stockIo/panels/detail.vue   | 609 ++++++++++++++++++
 .../views/wms/stockIo/panels/returnCreate.vue | 435 +++++++++++++
 .../views/wms/stockIo/panels/stockIoPage.vue  | 373 +++++++++++
 gear-ui3/src/views/wms/stockIo/return.vue     |  13 +
 gear-ui3/src/views/wms/warehouse/index.vue    | 375 +++++++++++
 43 files changed, 5473 insertions(+), 33 deletions(-)
 rename gear-ui3/src/api/{wms => oms}/customer.js (100%)
 rename gear-ui3/src/api/{wms => oms}/order.js (100%)
 rename gear-ui3/src/api/{wms => oms}/orderDetail.js (100%)
 create mode 100644 gear-ui3/src/api/wms/stock.js
 create mode 100644 gear-ui3/src/api/wms/stockIo.js
 create mode 100644 gear-ui3/src/api/wms/stockIoDetail.js
 create mode 100644 gear-ui3/src/api/wms/stockLog.js
 create mode 100644 gear-ui3/src/api/wms/warehouse.js
 create mode 100644 gear-ui3/src/components/ChartWrapper/index.vue
 create mode 100644 gear-ui3/src/components/WarehouseSelect/index.vue
 create mode 100644 gear-ui3/src/components/WarehouseTree/index.vue
 create mode 100644 gear-ui3/src/views/wms/ledger/index.vue
 create mode 100644 gear-ui3/src/views/wms/stock/box.vue
 create mode 100644 gear-ui3/src/views/wms/stock/index.vue
 create mode 100644 gear-ui3/src/views/wms/stock/panels/bar.vue
 create mode 100644 gear-ui3/src/views/wms/stock/panels/reattree.vue
 create mode 100644 gear-ui3/src/views/wms/stock/panels/resize.js
 create mode 100644 gear-ui3/src/views/wms/stock/panels/stockIo.vue
 create mode 100644 gear-ui3/src/views/wms/stock/panels/trendChart.vue
 create mode 100644 gear-ui3/src/views/wms/stockIo/in.vue
 create mode 100644 gear-ui3/src/views/wms/stockIo/index.vue
 create mode 100644 gear-ui3/src/views/wms/stockIo/move.vue
 create mode 100644 gear-ui3/src/views/wms/stockIo/out.vue
 create mode 100644 gear-ui3/src/views/wms/stockIo/panels/barcode.vue
 create mode 100644 gear-ui3/src/views/wms/stockIo/panels/detail.vue
 create mode 100644 gear-ui3/src/views/wms/stockIo/panels/returnCreate.vue
 create mode 100644 gear-ui3/src/views/wms/stockIo/panels/stockIoPage.vue
 create mode 100644 gear-ui3/src/views/wms/stockIo/return.vue
 create mode 100644 gear-ui3/src/views/wms/warehouse/index.vue

diff --git a/gear-ui3/src/api/wms/customer.js b/gear-ui3/src/api/oms/customer.js
similarity index 100%
rename from gear-ui3/src/api/wms/customer.js
rename to gear-ui3/src/api/oms/customer.js
diff --git a/gear-ui3/src/api/wms/order.js b/gear-ui3/src/api/oms/order.js
similarity index 100%
rename from gear-ui3/src/api/wms/order.js
rename to gear-ui3/src/api/oms/order.js
diff --git a/gear-ui3/src/api/wms/orderDetail.js b/gear-ui3/src/api/oms/orderDetail.js
similarity index 100%
rename from gear-ui3/src/api/wms/orderDetail.js
rename to gear-ui3/src/api/oms/orderDetail.js
diff --git a/gear-ui3/src/api/wms/stock.js b/gear-ui3/src/api/wms/stock.js
new file mode 100644
index 0000000..3356dfa
--- /dev/null
+++ b/gear-ui3/src/api/wms/stock.js
@@ -0,0 +1,55 @@
+import request from '@/utils/request'
+
+// 查询库存：原材料/产品与库区/库位的存放关系列表
+export function listStock(query) {
+  return request({
+    url: '/gear/stock/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询库存：原材料/产品与库区/库位的存放关系详细
+export function getStock(stockId) {
+  return request({
+    url: '/gear/stock/' + stockId,
+    method: 'get'
+  })
+}
+
+// 新增库存：原材料/产品与库区/库位的存放关系
+export function addStock(data) {
+  return request({
+    url: '/gear/stock',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改库存：原材料/产品与库区/库位的存放关系
+export function updateStock(data) {
+  return request({
+    url: '/gear/stock',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除库存：原材料/产品与库区/库位的存放关系
+export function delStock(stockId) {
+  return request({
+    url: '/gear/stock/' + stockId,
+    method: 'delete'
+  })
+}
+
+// 物料追溯：根据批次号查找所有关联的单据明细
+export function getStockTrace(batchNo) {
+  return request({
+    url: '/gear/stockIoDetail/batch',
+    method: 'post',
+    data: {
+      batchNo
+    }
+  })
+}
diff --git a/gear-ui3/src/api/wms/stockIo.js b/gear-ui3/src/api/wms/stockIo.js
new file mode 100644
index 0000000..fa8dd36
--- /dev/null
+++ b/gear-ui3/src/api/wms/stockIo.js
@@ -0,0 +1,134 @@
+import request from '@/utils/request'
+
+// 查询出入库单主列表
+export function listStockIo(query) {
+  return request({
+    url: '/gear/stockIo/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询出入库单主详细
+export function getStockIo(stockIoId) {
+  return request({
+    url: '/gear/stockIo/' + stockIoId,
+    method: 'get'
+  })
+}
+
+// 新增出入库单主
+export function addStockIo(data) {
+  return request({
+    url: '/gear/stockIo',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改出入库单主
+export function updateStockIo(data) {
+  return request({
+    url: '/gear/stockIo',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除出入库单主
+export function delStockIo(stockIoId) {
+  return request({
+    url: '/gear/stockIo/' + stockIoId,
+    method: 'delete'
+  })
+}
+
+// 审核出入库单
+export function auditStockIo(stockIoId) {
+  return request({
+    url: '/gear/stockIo/audit/' + stockIoId,
+    method: 'post'
+  })
+}
+
+// 撤销出入库单
+export function cancelStockIo(stockIoId) {
+  return request({
+    url: '/gear/stockIo/cancel/' + stockIoId,
+    method: 'post'
+  })
+}
+
+// 根据类型和ID查询明细
+export function detailByTypeAndId(ioType, stockIoId) {
+  return request({
+    url: '/gear/stockIo/detailByTypeAndId',
+    method: 'get',
+    params: {
+      ioType,
+      stockIoId
+    }
+  })
+}
+
+// 更新出入库单状态
+export function updateStockIoStatus(stockIoId, status) {
+  return request({
+    url: '/gear/stockIo/updateStatus/' + stockIoId,
+    method: 'post',
+    params: {
+      status
+    }
+  })
+}
+
+/**
+ * 创建入库单，含明细
+ * 入库单主表：
+ * 单号：stockIoCode
+ * 类型: ioType,
+ * 业务类型：bizType,
+ * 状态：status,    
+ * 备注：remark,
+ * 
+ * 入库单明细：
+ * warehouseId: 仓库ID,
+ * itemType: 物料类型,
+ * itemId: 物料ID,
+ * quantity: 数量,
+ * unit: 单位,
+ * batchNo: 批次号,
+ * remark: 备注
+ * 
+ */
+export function addStockIoWithDetail(data) {
+  return request({
+    url: '/gear/stockIo/withDetail',
+    method: 'post',
+    data: data
+  })
+}
+
+export function scanInStock(data) {
+  return request({
+    url: '/gear/stockIo/scanInStock',
+    method: 'post',
+    data: data
+  })
+}
+
+export function scanOutStock(data) {
+  return request({
+    url: '/gear/stockIo/scanOutStock',
+    method: 'post',
+    data: data
+  })
+}
+
+export function returnStock(data) {
+  return request({
+    url: '/gear/stockIo/returnStock',
+    method: 'post',
+    data: data
+  })
+}
\ No newline at end of file
diff --git a/gear-ui3/src/api/wms/stockIoDetail.js b/gear-ui3/src/api/wms/stockIoDetail.js
new file mode 100644
index 0000000..5596ace
--- /dev/null
+++ b/gear-ui3/src/api/wms/stockIoDetail.js
@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询出入库单明细列表
+export function listStockIoDetail(query) {
+  return request({
+    url: '/gear/stockIoDetail/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询出入库单明细详细
+export function getStockIoDetail(detailId) {
+  return request({
+    url: '/gear/stockIoDetail/' + detailId,
+    method: 'get'
+  })
+}
+
+// 新增出入库单明细
+export function addStockIoDetail(data) {
+  return request({
+    url: '/gear/stockIoDetail',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改出入库单明细
+export function updateStockIoDetail(data) {
+  return request({
+    url: '/gear/stockIoDetail',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除出入库单明细
+export function delStockIoDetail(detailId) {
+  return request({
+    url: '/gear/stockIoDetail/' + detailId,
+    method: 'delete'
+  })
+}
diff --git a/gear-ui3/src/api/wms/stockLog.js b/gear-ui3/src/api/wms/stockLog.js
new file mode 100644
index 0000000..4a2d9bc
--- /dev/null
+++ b/gear-ui3/src/api/wms/stockLog.js
@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询库存流水列表
+export function listStockLog(query) {
+  return request({
+    url: '/gear/stockLog/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询库存流水详细
+export function getStockLog(id) {
+  return request({
+    url: '/gear/stockLog/' + id,
+    method: 'get'
+  })
+}
+
+// 新增库存流水
+export function addStockLog(data) {
+  return request({
+    url: '/gear/stockLog',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改库存流水
+export function updateStockLog(data) {
+  return request({
+    url: '/gear/stockLog',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除库存流水
+export function delStockLog(id) {
+  return request({
+    url: '/gear/stockLog/' + id,
+    method: 'delete'
+  })
+}
diff --git a/gear-ui3/src/api/wms/warehouse.js b/gear-ui3/src/api/wms/warehouse.js
new file mode 100644
index 0000000..a21cbbc
--- /dev/null
+++ b/gear-ui3/src/api/wms/warehouse.js
@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询仓库/库区/库位自关联列表
+export function listWarehouse(query) {
+  return request({
+    url: '/gear/warehouse/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询仓库/库区/库位自关联详细
+export function getWarehouse(warehouseId) {
+  return request({
+    url: '/gear/warehouse/' + warehouseId,
+    method: 'get'
+  })
+}
+
+// 新增仓库/库区/库位自关联
+export function addWarehouse(data) {
+  return request({
+    url: '/gear/warehouse',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改仓库/库区/库位自关联
+export function updateWarehouse(data) {
+  return request({
+    url: '/gear/warehouse',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除仓库/库区/库位自关联
+export function delWarehouse(warehouseId) {
+  return request({
+    url: '/gear/warehouse/' + warehouseId,
+    method: 'delete'
+  })
+}
diff --git a/gear-ui3/src/components/ChartWrapper/index.vue b/gear-ui3/src/components/ChartWrapper/index.vue
new file mode 100644
index 0000000..18664e9
--- /dev/null
+++ b/gear-ui3/src/components/ChartWrapper/index.vue
@@ -0,0 +1,207 @@
+<template>
+  <div class="chart-wrapper" ref="chartWrapper">
+    <!-- 操作按钮组 -->
+    <!-- <div class="chart-actions">
+      <button 
+        class="action-btn fullscreen-btn" 
+        @click="toggleFullscreen"
+        title="全屏预览"
+      >
+        <i :class="isFullscreen? 'Close' : 'Fullscreen'"></i>
+      </button>
+    </div> -->
+    
+    <!-- 图表容器（插槽内容） -->
+    <div class="chart-container" ref="chartContainer">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      isFullscreen: false, // 是否处于全屏状态
+      fullscreenElement: null, // 存储全屏元素引用
+    };
+  },
+  mounted() {
+    // 监听浏览器全屏状态变化事件
+    document.addEventListener('fullscreenchange', this.handleFullscreenChange);
+    document.addEventListener('webkitfullscreenchange', this.handleFullscreenChange);
+    document.addEventListener('mozfullscreenchange', this.handleFullscreenChange);
+    document.addEventListener('msfullscreenchange', this.handleFullscreenChange);
+  },
+  methods: {
+    // 切换全屏/退出全屏
+    toggleFullscreen() {
+      if (!this.isFullscreen) {
+        this.enterFullscreen();
+      } else {
+        this.exitFullscreen();
+      }
+    },
+    
+    // 进入全屏模式
+    enterFullscreen() {
+      const container = this.$refs.chartWrapper;
+      
+      // 不同浏览器的全屏 API 兼容
+      if (container.requestFullscreen) {
+        container.requestFullscreen();
+      } else if (container.webkitRequestFullscreen) { /* Safari */
+        container.webkitRequestFullscreen();
+      } else if (container.msRequestFullscreen) { /* IE11 */
+        container.msRequestFullscreen();
+      } else if (container.mozRequestFullScreen) { /* Firefox */
+        container.mozRequestFullScreen();
+      }
+      
+      this.fullscreenElement = container;
+    },
+    
+    // 退出全屏模式
+    exitFullscreen() {
+      if (!document.fullscreenElement) return;
+      
+      // 不同浏览器的退出全屏 API 兼容
+      if (document.exitFullscreen) {
+        document.exitFullscreen();
+      } else if (document.webkitExitFullscreen) { /* Safari */
+        document.webkitExitFullscreen();
+      } else if (document.msExitFullscreen) { /* IE11 */
+        document.msExitFullscreen();
+      } else if (document.mozCancelFullScreen) { /* Firefox */
+        document.mozCancelFullScreen();
+      }
+      
+      this.fullscreenElement = null;
+    },
+    
+    // 处理全屏状态变化
+    handleFullscreenChange() {
+      // 检查当前是否处于全屏状态
+      const isFull =!!(
+        document.fullscreenElement ||
+        document.webkitFullscreenElement ||
+        document.mozFullScreenElement ||
+        document.msFullscreenElement
+      );
+      
+      this.isFullscreen = isFull;
+      
+      // 触发窗口 resize 事件，让图表自适应
+      this.triggerResize();
+    },
+    
+    // 触发窗口 resize 事件（让图表自适应）
+    triggerResize() {
+      const event = document.createEvent('Event');
+      event.initEvent('resize', true, true);
+      window.dispatchEvent(event);
+    }
+  },
+  beforeDestroy() {
+    // 移除事件监听
+    document.removeEventListener('fullscreenchange', this.handleFullscreenChange);
+    document.removeEventListener('webkitfullscreenchange', this.handleFullscreenChange);
+    document.removeEventListener('mozfullscreenchange', this.handleFullscreenChange);
+    document.removeEventListener('msfullscreenchange', this.handleFullscreenChange);
+    
+    // 组件销毁时如果处于全屏状态则退出
+    if (this.isFullscreen) {
+      this.exitFullscreen();
+    }
+  }
+};
+</script>
+
+<style scoped>
+.chart-wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  min-height: 100px; /* 最小高度防止内容为空时样式异常 */
+}
+
+/* 全屏状态下的样式调整 */
+.chart-wrapper:-webkit-full-screen {
+  background-color: #fff;
+  width: 100%!important;
+  height: 100%!important;
+}
+
+.chart-wrapper:-moz-full-screen {
+  background-color: #fff;
+  width: 100%!important;
+  height: 100%!important;
+}
+
+.chart-wrapper:fullscreen {
+  background-color: #fff;
+  width: 100%!important;
+  height: 100%!important;
+}
+
+.chart-container {
+  width: 100%;
+  height: 100%;
+  min-height: inherit;
+}
+
+/* 操作按钮组样式 */
+.chart-actions {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  z-index: 10; /* 确保按钮在图表上方 */
+  display: flex;
+  gap: 8px;
+}
+
+.action-btn {
+  width: 32px;
+  height: 32px;
+  border-radius: 4px;
+  border: none;
+  background-color: rgba(255, 255, 255, 0.8);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  transition: all 0.2s ease;
+}
+
+.action-btn:hover {
+  background-color: #fff;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+}
+
+/* 图标样式（适配 Element UI 图标） */
+.action-btn i {
+  font-size: 16px;
+  color: #666;
+}
+
+.action-btn:hover i {
+  color: #1890ff;
+}
+
+/* 全屏状态下的按钮样式优化 */
+:fullscreen.chart-actions {
+  top: 20px;
+  right: 20px;
+}
+
+:-webkit-full-screen.chart-actions {
+  top: 20px;
+  right: 20px;
+}
+
+:-moz-full-screen.chart-actions {
+  top: 20px;
+  right: 20px;
+}
+</style>
\ No newline at end of file
diff --git a/gear-ui3/src/components/CustomerSelect/index.vue b/gear-ui3/src/components/CustomerSelect/index.vue
index ed1dafc..ade8903 100644
--- a/gear-ui3/src/components/CustomerSelect/index.vue
+++ b/gear-ui3/src/components/CustomerSelect/index.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script>
-  import { listCustomer } from '@/api/wms/customer';
+  import { listCustomer } from '@/api/oms/customer';
 
   export default {
     name: 'CustomerSelect',
diff --git a/gear-ui3/src/components/FileUpload/index.vue b/gear-ui3/src/components/FileUpload/index.vue
index 90578c1..ba3176d 100644
--- a/gear-ui3/src/components/FileUpload/index.vue
+++ b/gear-ui3/src/components/FileUpload/index.vue
@@ -29,7 +29,7 @@
     <transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
       <li :key="file.url" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in fileList">
         <el-link :href="`${file.url}`" :underline="false" target="_blank">
-          <span class="el-icon-document"> {{ getFileName(file.name) }} </span>
+          <span class="Document"> {{ getFileName(file.name) }} </span>
         </el-link>
         <div class="ele-upload-list__item-content-action">
           <el-link :underline="false" @click="handleDelete(index)" type="danger">删除</el-link>
diff --git a/gear-ui3/src/components/GearTable/index.vue b/gear-ui3/src/components/GearTable/index.vue
index 1802e11..a61d5b1 100644
--- a/gear-ui3/src/components/GearTable/index.vue
+++ b/gear-ui3/src/components/GearTable/index.vue
@@ -83,7 +83,7 @@ import ColumnRender from './ColumnRender.vue';
 import Eclipse from './renderer/eclipse.vue';
 
 export default {
-  name: "KLPTable",
+  name: "el-table",
   components: {
     ColumnRender,
     Eclipse,
@@ -199,7 +199,7 @@ export default {
     }
   },
   mounted() {
-    console.log("KLPTable 初始化完成，原生实例：", this.getTableInstance());
+    console.log("el-table 初始化完成，原生实例：", this.getTableInstance());
   }
 };
 </script>
diff --git a/gear-ui3/src/components/ImagePreview/index.vue b/gear-ui3/src/components/ImagePreview/index.vue
index ace8a3b..becc11f 100644
--- a/gear-ui3/src/components/ImagePreview/index.vue
+++ b/gear-ui3/src/components/ImagePreview/index.vue
@@ -24,11 +24,11 @@ const props = defineProps({
   },
   width: {
     type: [Number, String],
-    default: ""
+    default: "50px"
   },
   height: {
     type: [Number, String],
-    default: ""
+    default: "50px"
   }
 })
 
diff --git a/gear-ui3/src/components/ProductSelect/BomPanel/index.vue b/gear-ui3/src/components/ProductSelect/BomPanel/index.vue
index 3d6a563..e33f517 100644
--- a/gear-ui3/src/components/ProductSelect/BomPanel/index.vue
+++ b/gear-ui3/src/components/ProductSelect/BomPanel/index.vue
@@ -5,7 +5,7 @@
       <el-button type="primary" :loading="createLoading" :disabled="createLoading" @click="handleCreate"
         class="create-button">
         <template v-if="!createLoading">
-          <i class="el-icon-plus"></i> 创建BOM
+          <i class="Plus"></i> 创建BOM
         </template>
         <template v-else>
           创建中...
diff --git a/gear-ui3/src/components/WarehouseSelect/index.vue b/gear-ui3/src/components/WarehouseSelect/index.vue
new file mode 100644
index 0000000..00de50e
--- /dev/null
+++ b/gear-ui3/src/components/WarehouseSelect/index.vue
@@ -0,0 +1,119 @@
+<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.warehouseId"
+      :label="item.warehouseName"
+      :value="item.warehouseId"
+    >
+      <span :style="{ paddingLeft: item.level * 20 + 'px' }">
+        {{ item.warehouseName }}
+      </span>
+    </el-option>
+  </el-select>
+</template>
+
+<script>
+import { listWarehouse } from '@/api/wms/warehouse';
+
+export default {
+  name: 'WarehouseSelect',
+  props: {
+    value: {
+      type: [Number, String, null],
+      default: null
+    },
+    placeholder: {
+      type: String,
+      default: '请选择仓库'
+    },
+    clearable: {
+      type: Boolean,
+      default: true
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    size: {
+      type: String,
+      default: 'mini'
+    },
+    showTop: {
+      type: Boolean,
+      default: false // 是否显示顶级节点
+    }
+  },
+  data() {
+    return {
+      warehouseOptions: [],
+      selected: this.value
+    };
+  },
+  watch: {
+    value(val) {
+      this.selected = val;
+    }
+  },
+  mounted() {
+    this.loadOptions();
+  },
+  methods: {
+    loadOptions() {
+      listWarehouse().then(response => {
+        console.log('仓库API返回数据:', response);
+        const data = response.data || [];
+        console.log('处理后的数据:', data);
+        this.warehouseOptions = this.buildTreeOptions(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);
+          }
+        }
+      });
+      
+      return options;
+    },
+    onChange(val) {
+      this.$emit('input', val);
+      this.$emit('change', val);
+    }
+  }
+};
+</script>
+
+<style scoped>
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/gear-ui3/src/components/WarehouseTree/index.vue b/gear-ui3/src/components/WarehouseTree/index.vue
new file mode 100644
index 0000000..5a3b19c
--- /dev/null
+++ b/gear-ui3/src/components/WarehouseTree/index.vue
@@ -0,0 +1,75 @@
+
+<template>
+  <el-tree
+    :data="treeData"
+    :props="treeProps"
+    node-key="warehouseId"
+    highlight-current
+    @node-click="handleNodeClick"
+    :expand-on-click-node="false"
+    :default-expand-all="true"
+    class="stock-tree"
+  />
+</template>
+
+<script>
+import { listWarehouse } from '@/api/wms/warehouse';
+
+export default {
+  name: "WarehouseTree",
+  props: {
+    treeProps: {
+      type: Object,
+      default: () => ({
+        children: 'children',
+        label: 'warehouseName',
+        isLeaf: () => false
+      })
+    }
+  },
+  data() {
+    return {
+      treeData: []
+    };
+  },
+  created() {
+    this.getWarehouseTree();
+  },
+  methods: {
+    getWarehouseTree() {
+      listWarehouse().then(response => {
+        this.treeData = this.handleTree(response.data, 'warehouseId', 'parentId');
+      });
+    },
+    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;
+      });
+    },
+    handleNodeClick(node) {
+      this.$emit('node-click', node);
+    }
+  }
+};
+</script>
+
+<!-- <style scoped>
+.stock-tree-card {
+  height: 100%;
+  border: none;
+  box-shadow: none;
+}
+.stock-tree-title {
+  font-weight: bold;
+  font-size: 16px;
+  padding: 8px 0;
+}
+.stock-tree {
+  min-height: 500px;
+  max-height: 80vh;
+  overflow-y: auto;
+}
+</style> -->
diff --git a/gear-ui3/src/utils/enums.js b/gear-ui3/src/utils/enums.js
index e374d77..3249536 100644
--- a/gear-ui3/src/utils/enums.js
+++ b/gear-ui3/src/utils/enums.js
@@ -1,10 +1,3 @@
-export const EExpressType = {
-  SF: "SF",
-  ZTO: "ZTO",
-  BEST: "Best",
-  STO: "STO",
-}
-
 // 订单状态
 export const EOrderStatus = {
   NEW: 0,
@@ -13,3 +6,32 @@ export const EOrderStatus = {
   CANCEL: 3
 }
 
+// 采购计划状态
+export const EPurchasePlanStatus = {
+  NEW: 0,
+  PRUCHASEING: 1,
+  FINISH: 2,
+  CANCEL: 3
+}
+
+// 采购明细状态
+export const EPurchaseDetailStatus = {
+  NEW: 0,
+  ONWAY: 1,
+  ARRIVAL: 2,
+  REVIEW: 3,
+  FINISH: 4
+}
+
+// 物品类型枚举
+export const ITEM_TYPE = {
+  RAW_MATERIAL: 'raw_material', // 原材料
+  PRODUCT: 'product'            // 产品
+};
+
+export const EExpressType = {
+  SF: "SF",
+  ZTO: "ZTO",
+  BEST: "Best",
+  STO: "STO",
+}
diff --git a/gear-ui3/src/views/dashboard/home.vue b/gear-ui3/src/views/dashboard/home.vue
index b4f9cbc..086b5fe 100644
--- a/gear-ui3/src/views/dashboard/home.vue
+++ b/gear-ui3/src/views/dashboard/home.vue
@@ -28,10 +28,10 @@ import DashboardLayout from './layout/index.vue';
 import DashboardChartsGrid from './grid/index.vue';
 
 // API 请求（业务逻辑）
-import { listOrder } from '@/api/wms/order';
-import { listOrderDetail } from '@/api/wms/orderDetail';
+import { listOrder } from '@/api/oms/order';
+import { listOrderDetail } from '@/api/oms/orderDetail';
 import { listReturnExchange } from '@/api/oa/returnExchange';
-import { listCustomer } from '@/api/wms/customer';
+import { listCustomer } from '@/api/oms/customer';
 
 // 路由实例
 const router = useRouter();
diff --git a/gear-ui3/src/views/info/report/components/ProjectReportDetail.vue b/gear-ui3/src/views/info/report/components/ProjectReportDetail.vue
index a901eaa..f3c4074 100644
--- a/gear-ui3/src/views/info/report/components/ProjectReportDetail.vue
+++ b/gear-ui3/src/views/info/report/components/ProjectReportDetail.vue
@@ -8,7 +8,7 @@
   >
     <template #header>
       <div class="dialog-title flex items-center gap-2">
-        <i class="el-icon-document"></i>
+        <i class="Document"></i>
         <span>项目报工详情</span>
       </div>
     </template>
diff --git a/gear-ui3/src/views/info/report/dashboard.vue b/gear-ui3/src/views/info/report/dashboard.vue
index 01411e0..3856c14 100644
--- a/gear-ui3/src/views/info/report/dashboard.vue
+++ b/gear-ui3/src/views/info/report/dashboard.vue
@@ -274,7 +274,7 @@ export default {
       // const pct = (t,y) => y===0 ? '—' : (((t-y)/y)*100).toFixed(1) + '%';
       // this.summaryCards = [
       //   { title:'今日报工人数', value:todayCount, displayChange:`${pct(todayCount,yc)} 较昨日`, changeClass: todayCount-yc>=0?'up':'down', icon:'el-icon-user', iconColor:'#67C23A' },
-      //   { title:'进行中项目', value:inProgressProjects, displayChange:`${pct(inProgressProjects,yp)} 较昨日`, changeClass: inProgressProjects-yp>=0?'up':'down', icon:'el-icon-document', iconColor:'#409EFF' },
+      //   { title:'进行中项目', value:inProgressProjects, displayChange:`${pct(inProgressProjects,yp)} 较昨日`, changeClass: inProgressProjects-yp>=0?'up':'down', icon:'Document', iconColor:'#409EFF' },
       //   { title:'本月报工', value:completionRate, displayChange:`${pct(completionRate,ycr)} 较上月`, changeClass: completionRate-ycr>=0?'up':'down', icon:'el-icon-data-analysis', iconColor:'#E6A23C' },
       //   { title:'异常预警', value:exceptions, exception:true, icon:'el-icon-warning', iconColor:'#F56C6C' }
       // ];
diff --git a/gear-ui3/src/views/oms/customer/index.vue b/gear-ui3/src/views/oms/customer/index.vue
index 11e9014..4de1347 100644
--- a/gear-ui3/src/views/oms/customer/index.vue
+++ b/gear-ui3/src/views/oms/customer/index.vue
@@ -174,7 +174,7 @@
 </template>
 
 <script>
-import { listCustomer, getCustomer, delCustomer, addCustomer, updateCustomer } from "@/api/wms/customer";
+import { listCustomer, getCustomer, delCustomer, addCustomer, updateCustomer } from "@/api/oms/customer";
 
 export default {
   name: "Customer",
@@ -239,8 +239,8 @@ export default {
       //     fixed: 'right',
       //     render: (h, row) => {
       //       const actions = [];
-      //       actions.push(<el-button type="text" size="small" icon="el-icon-edit" onClick={() => this.handleUpdate(row)}>修改</el-button>)
-      //       actions.push(<el-button type="text" size="small" icon="el-icon-delete" onClick={() => this.handleDelete(row)}>删除</el-button>)
+      //       actions.push(<el-button type="text" size="small" icon="Edit" onClick={() => this.handleUpdate(row)}>修改</el-button>)
+      //       actions.push(<el-button type="text" size="small" icon="Delete" onClick={() => this.handleDelete(row)}>删除</el-button>)
       //       return actions;
       //     }
       //   }
diff --git a/gear-ui3/src/views/oms/dashboard/index.vue b/gear-ui3/src/views/oms/dashboard/index.vue
index fdb8fa8..31d3b36 100644
--- a/gear-ui3/src/views/oms/dashboard/index.vue
+++ b/gear-ui3/src/views/oms/dashboard/index.vue
@@ -157,10 +157,10 @@ import * as echarts from 'echarts'
 import { 
   UserFilled, ShoppingCart, Money, RefreshRight 
 } from '@element-plus/icons-vue'
-import { listOrder } from '@/api/wms/order'
-import { listOrderDetail } from '@/api/wms/orderDetail'
+import { listOrder } from '@/api/oms/order'
+import { listOrderDetail } from '@/api/oms/orderDetail'
 import { listReturnExchange } from '@/api/oa/returnExchange'
-import { listCustomer } from '@/api/wms/customer'
+import { listCustomer } from '@/api/oms/customer'
 
 const { proxy } = getCurrentInstance()
 const { order_status } = proxy.useDict("order_status")
diff --git a/gear-ui3/src/views/oms/order/panels/detail.vue b/gear-ui3/src/views/oms/order/panels/detail.vue
index d20a401..eb76b9e 100644
--- a/gear-ui3/src/views/oms/order/panels/detail.vue
+++ b/gear-ui3/src/views/oms/order/panels/detail.vue
@@ -81,13 +81,12 @@
 </template>
 
 <script>
-import { listOrderDetail, getOrderDetail, delOrderDetail, addOrderDetail, updateOrderDetail } from "@/api/wms/orderDetail";
-import { getOrder } from "@/api/wms/order";
+import { listOrderDetail, getOrderDetail, delOrderDetail, addOrderDetail, updateOrderDetail } from "@/api/oms/orderDetail";
+import { getOrder } from "@/api/oms/order";
 import ProductSelect from '@/components/ProductSelect';
 import { EOrderStatus } from "@/utils/enums";
 import ProductInfo from '@/components/Renderer/ProductInfo.vue';
 import BomInfoMini from '@/components/Renderer/BomInfoMini.vue';
-import KLPTable from '@/components/GearTable/index.vue';
 
 export default {
   name: "OrderDetailPanel",
@@ -102,7 +101,6 @@ export default {
     ProductSelect,
     ProductInfo,
     BomInfoMini,
-    KLPTable
   },
   data() {
     return {
diff --git a/gear-ui3/src/views/oms/order/panels/orderPage.vue b/gear-ui3/src/views/oms/order/panels/orderPage.vue
index d3b4404..f68b2af 100644
--- a/gear-ui3/src/views/oms/order/panels/orderPage.vue
+++ b/gear-ui3/src/views/oms/order/panels/orderPage.vue
@@ -23,7 +23,7 @@
           <!-- 自定义操作按钮 -->
           <template #actions="{ item }">
             <!-- 删除按钮 -->
-            <el-button size="small" type="text" style="color: red" icon="el-icon-delete"
+            <el-button size="small" type="text" style="color: red" icon="Delete"
               @click.stop="handleDelete(item)"></el-button>
           </template>
         </klp-list>
@@ -50,7 +50,7 @@
                 <el-form ref="detailForm" :model="form" :rules="rules" label-width="80px" size="small" class="mt-4">
                   <el-form-item label="订单ID" prop="orderId">
                     <el-input style="width: 60%;" v-model="form.orderId" placeholder="无" disabled>
-                      <el-button style="padding: -1;" slot="append" size="small" type="text" icon="el-icon-document-copy"
+                      <el-button style="padding: -1;" slot="append" size="small" type="text" icon="Document-copy"
                         @click.stop="copyOrderId(form.orderId)"></el-button>
                     </el-input>
                   </el-form-item>
@@ -162,7 +162,7 @@
 </template>
 
 <script>
-import { getOrder, delOrder, addOrder, updateOrder, listOrder } from "@/api/wms/order";
+import { getOrder, delOrder, addOrder, updateOrder, listOrder } from "@/api/oms/order";
 import OrderDetailPanel from './detail.vue';
 import { EOrderStatus } from "@/utils/enums";
 import CustomerSelect from '@/components/CustomerSelect/index.vue';
diff --git a/gear-ui3/src/views/product/components/BomPanel.vue b/gear-ui3/src/views/product/components/BomPanel.vue
index de1606a..cc5da4b 100644
--- a/gear-ui3/src/views/product/components/BomPanel.vue
+++ b/gear-ui3/src/views/product/components/BomPanel.vue
@@ -5,7 +5,7 @@
       <el-button type="primary" :loading="createLoading" :disabled="createLoading" @click="handleCreate"
         class="create-button">
         <template v-if="!createLoading">
-          <i class="el-icon-plus"></i> 创建BOM
+          <i class="Plus"></i> 创建BOM
         </template>
         <template v-else>
           创建中...
diff --git a/gear-ui3/src/views/wms/ledger/index.vue b/gear-ui3/src/views/wms/ledger/index.vue
new file mode 100644
index 0000000..303436a
--- /dev/null
+++ b/gear-ui3/src/views/wms/ledger/index.vue
@@ -0,0 +1,287 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="存储位置" prop="warehouseId">
+        <WarehouseSelect v-model="queryParams.warehouseId" placeholder="请选择仓库/库区/库位" clearable @change="getList" />
+      </el-form-item>
+
+      <el-form-item label="变动时间" prop="changeTime">
+        <el-date-picker 
+          clearable
+          v-model="queryParams.changeTime"
+          type="daterange"
+          value-format="yyyy-MM-dd"
+          placeholder="请选择实际库存变动时间">
+        </el-date-picker>
+      </el-form-item>
+
+      <el-form-item label="批次号" prop="batchNo">
+        <el-input v-model="queryParams.batchNo" placeholder="请输入批次号" />
+      </el-form-item>
+
+      <el-form-item>
+        <el-button type="primary" icon="Search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="Refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="Download"
+          size="mini"
+          @click="handleExport"
+        >导出</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="stockLogList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="存储位置" align="center" prop="warehouseName" />
+      <el-table-column label="物品ID" align="center" prop="itemId">
+        <template #default="scope">
+          <RawMaterialInfo v-if="scope.row.itemType == 'raw_material'" :material-id="scope.row.itemId" />
+          <ProductInfo v-else-if="scope.row.itemType == 'product' || scope.row.itemType == 'semi'" :product-id="scope.row.itemId" />
+        </template>
+      </el-table-column>
+      <el-table-column label="物品类型" align="center" prop="itemType">
+        <template #default="scope">
+          <dict-tag :options="stock_item_type" :value="scope.row.itemType" />
+        </template>
+      </el-table-column>
+      <el-table-column label="变动数量" align="center" prop="changeQty" />
+      <el-table-column label="变动后的库存数量" align="center" prop="afterQty" />
+      <el-table-column label="变动类型" align="center" prop="changeType" />
+      <el-table-column label="库存数量变动时间" align="center" prop="changeTime" width="180">
+        <template #default="scope">
+          <span>{{ parseTime(scope.row.changeTime, '{y}-{m}-{d}') }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="批次号" align="center" prop="batchNo" />
+      <el-table-column label="备注" align="center" prop="remark" />
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template #default="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="Edit"
+            @click="handleUpdate(scope.row)"
+          >修改</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 添加或修改库存流水对话框 -->
+    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="存储位置" prop="warehouseId" disabled>
+          <el-input v-model="form.warehouseId" placeholder="请输入仓库/库区/库位ID" disabled />
+        </el-form-item>
+        <el-form-item label="物品信息" prop="itemId" disabled>
+          <ProductInfo v-if="form.itemType == 'product' || form.itemType == 'semi'" :product-id="form.itemId" />
+        </el-form-item>
+        <el-form-item label="变动数量" prop="changeQty" disabled>
+          <el-input v-model="form.changeQty" placeholder="请输入变动数量" disabled />
+        </el-form-item>
+        <el-form-item label="库存数量" prop="afterQty" disabled>
+          <el-input v-model="form.afterQty" placeholder="请输入变动后的库存数量" disabled />
+        </el-form-item>
+        <el-form-item label="变动时间" prop="changeTime" disabled>
+          <el-date-picker clearable
+            v-model="form.changeTime"
+            type="datetime"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            placeholder="请选择实际库存变动时间" disabled>
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="批次号" prop="batchNo">
+          <el-input v-model="form.batchNo" placeholder="请输入批次号" disabled/>
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" placeholder="请输入备注" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listStockLog, getStockLog, updateStockLog } from "@/api/wms/stockLog";
+import WarehouseSelect from '@/components/WarehouseSelect/index.vue';
+import ProductSelect from '@/components/ProductSelect/index.vue';
+import ProductInfo from '@/components/Renderer/ProductInfo.vue';
+
+export default {
+  name: "StockLog",
+  components: {
+    WarehouseSelect,
+    ProductSelect,
+    ProductInfo,
+  },
+  setup() {
+    const { proxy } = getCurrentInstance();
+    const { stock_item_type } = proxy.useDict('stock_item_type');
+    return {
+      stock_item_type,
+    };
+  },
+  data() {
+    return {
+      // 按钮loading
+      buttonLoading: false,
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 库存流水表格数据
+      stockLogList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 20,
+        warehouseId: undefined,
+        itemId: undefined,
+        itemType: undefined,
+        changeQty: undefined,
+        afterQty: undefined,
+        changeType: undefined,
+        changeTime: undefined,
+        batchNo: undefined,
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+      }
+    };
+  },
+  created() {
+    const itemId = this.$route.query.itemId;
+    const itemType = this.$route.query.itemType;
+    if (itemId && itemType) {
+      this.queryParams.itemId = itemId;
+      this.queryParams.itemType = itemType;
+    }
+    this.getList();
+  },
+  methods: {
+    /** 查询库存流水列表 */
+    getList() {
+      this.loading = true;
+      const { changeTime, ...payload } = {
+        ...this.queryParams,
+        startTime: this.queryParams.changeTime ? this.queryParams.changeTime[0] + ' 00:00:00' : undefined,
+        endTime: this.queryParams.changeTime ? this.queryParams.changeTime[1] + ' 23:59:59' : undefined
+      }
+      listStockLog(payload).then(response => {
+        this.stockLogList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: undefined,
+        warehouseId: undefined,
+        itemId: undefined,
+        itemType: undefined,
+        changeQty: undefined,
+        afterQty: undefined,
+        changeType: undefined,
+        changeTime: undefined,
+        remark: undefined,
+        createTime: undefined,
+        createBy: undefined,
+        updateTime: undefined,
+        updateBy: undefined,
+        delFlag: undefined
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.id)
+      this.single = selection.length!==1
+      this.multiple = !selection.length
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.loading = true;
+      this.reset();
+      const id = row.id || this.ids
+      getStockLog(id).then(response => {
+        this.loading = false;
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改库存流水";
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          this.buttonLoading = true;
+          if (this.form.id != null) {
+            updateStockLog(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            }).finally(() => {
+              this.buttonLoading = false;
+            });
+          }
+        }
+      });
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('klp/stockLog/export', {
+        ...this.queryParams
+      }, `stockLog_${new Date().getTime()}.xlsx`)
+    }
+  }
+};
+</script>
diff --git a/gear-ui3/src/views/wms/stock/box.vue b/gear-ui3/src/views/wms/stock/box.vue
new file mode 100644
index 0000000..3c310e0
--- /dev/null
+++ b/gear-ui3/src/views/wms/stock/box.vue
@@ -0,0 +1,167 @@
+<template>
+  <div style="display: flex; height: calc(100vh - 100px);">
+    <!-- 左侧导航树 -->
+    <div style="width: 280px; min-width: 200px; border-right: 1px solid #eee; padding: 10px 0;">
+      <el-tree :data="warehouseTreeData" node-key="warehouseId" :props="treeProps" highlight-current
+        @node-click="handleTreeNodeClick" :default-expand-all="true" style="height: 100%; overflow-y: auto;" />
+    </div>
+    <!-- 右侧图表 -->
+    <div style="flex: 1; height: calc(100vh - 100px); overflow-y: scroll; overflow-x: hidden;">
+      <el-row :gutter="10">
+        <el-col :span="12">
+          <el-card>
+            <template #header>
+              物料统计TOP10
+            </template>
+            <div style="height: 300px;">
+              <ChartWrapper>
+                <material-bar ref="materialBar" :stock-data="stockData"
+                  :selected-warehouse-id="currentTreeNode ? currentTreeNode.warehouseId : null"
+                  :warehouse-tree-data="warehouseTreeData" />
+              </ChartWrapper>
+            </div>
+            
+          </el-card>
+        </el-col>
+
+        <el-col :span="12">
+          <el-card>
+            <template #header>
+              变动趋势
+              <el-date-picker style="float: right;" v-model="defaultTimeRange" type="daterange" range-separator="至"
+                start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" />
+            </template>
+            <div style="height: 300px;">
+              <ChartWrapper>
+                <TrendChart ref="trendChart" :warehouseId="currentTreeNode ? currentTreeNode.warehouseId : null"
+                  :time-range="defaultTimeRange"></TrendChart>
+              </ChartWrapper>
+            </div>
+          </el-card>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <el-card>
+            <template #header>
+              仓库库存
+            </template>
+            <div style="height: 600px;">
+              <ChartWrapper>
+                <rea-tree ref="reaTree" :stock-data="stockData" :warehouse-tree-data="warehouseTreeData" height="600px" />
+              </ChartWrapper>
+            </div>
+          </el-card>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import { listStock } from "@/api/wms/stock";
+import { listWarehouse } from "@/api/wms/warehouse";
+import ReaTree from './panels/reattree.vue';
+import MaterialBar from './panels/bar.vue';
+import TrendChart from './panels/trendChart.vue';
+import ChartWrapper from '@/components/ChartWrapper/index.vue';
+
+export default {
+  name: "StockBox",
+  components: {
+    ReaTree,
+    MaterialBar,
+    TrendChart,
+    ChartWrapper
+  },
+  data() {
+    return {
+      stockData: [],
+      warehouseData: [],
+      warehouseTreeData: [],
+      treeProps: {
+        label: 'warehouseName',
+        children: 'children',
+        isLeaf: 'isLeaf',
+        id: 'id'
+      },
+      currentTreeNode: null,
+      defaultTimeRange: [
+        new Date(new Date().setDate(new Date().getDate() - 30)).toISOString().split('T')[0],
+        new Date().toISOString().split('T')[0]
+      ]
+    };
+  },
+  mounted() {
+    this.loadData();
+  },
+  methods: {
+    async loadData() {
+      try {
+        const [warehouseRes, stockRes] = await Promise.all([
+          listWarehouse(),
+          listStock({ pageNum: 1, pageSize: 9999 })
+        ]);
+
+        // 处理树结构
+        this.warehouseTreeData = this.handleTree(warehouseRes.data, 'warehouseId', 'parentId');
+        this.stockData = stockRes.rows;
+      } catch (error) {
+        console.error('加载数据失败:', error);
+        this.$message.error('库存数据加载失败');
+      }
+    },
+    // 处理树结构
+    handleTree(data, id, parentId) {
+      if (!Array.isArray(data)) {
+        console.error('handleTree: data is not array', data);
+        return [];
+      }
+
+      const map = {};
+      const tree = [];
+
+      // 创建节点映射
+      data.forEach(item => {
+        map[item[id]] = { ...item, children: [] };
+      });
+
+      // 构建树结构
+      data.forEach(item => {
+        const node = map[item[id]];
+        if (!item[parentId] || item[parentId] === 0) {
+          tree.push(node);
+        } else if (map[item[parentId]]) {
+          map[item[parentId]].children.push(node);
+        }
+      });
+
+      return tree;
+    },
+    // 刷新数据
+    refresh() {
+      this.loadData();
+    },
+    // 导航树点击事件
+    handleTreeNodeClick(node) {
+      this.currentTreeNode = node;
+      if (node && node.warehouseId) {
+        this.$refs.reaTree.highlightNode(node.warehouseId);
+      }
+    }
+  }
+};
+</script>
+
+<style scoped>
+/* 图表容器样式 */
+.treemap-container {
+  width: 100%;
+  height: 100%;
+  min-height: 600px;
+}
+
+.el-row {
+  margin: 10px !important;
+}
+</style>
\ No newline at end of file
diff --git a/gear-ui3/src/views/wms/stock/index.vue b/gear-ui3/src/views/wms/stock/index.vue
new file mode 100644
index 0000000..514cc8c
--- /dev/null
+++ b/gear-ui3/src/views/wms/stock/index.vue
@@ -0,0 +1,410 @@
+<template>
+  <div class="app-container stock-layout">
+    <!-- 左侧树结构 -->
+    <div class="stock-tree-col">
+      <el-card shadow="never" class="stock-tree-card">
+        <div slot="header" class="stock-tree-title">仓库结构</div>
+        <WarehouseTree @node-click="handleTreeSelect" />
+      </el-card>
+    </div>
+    <!-- 右侧内容 -->
+    <div class="stock-main-col">
+      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+        <!-- 移除仓库筛选项 -->
+        <!-- <MaterialSelect :itemType.sync="queryParams.itemType" :itemId.sync="queryParams.itemId" @change="getList" /> -->
+        <el-form-item label="单位" prop="unit">
+          <el-input v-model="queryParams.unit" placeholder="请输入单位" clearable @keyup.enter.native="handleQuery" />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+          <el-button type="warning" plain icon="Download" size="mini" @click="handleExport">导出</el-button>
+          <!-- 合并批次<el-switch v-model="queryParams.mergeBatch" :active-value="1" :inactive-value="0" @change="handleQuery" /> -->
+        </el-form-item>
+      </el-form>
+
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+
+      <el-table v-loading="loading" :data="stockList" @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column label="仓库" align="center" prop="warehouseName" />
+        <el-table-column label="物品类型" align="center" prop="itemType">
+          <template #default="scope">
+            <dict-tag :options="stock_item_type" :value="scope.row.itemType" />
+          </template>
+        </el-table-column>
+        <el-table-column label="物品" align="center" prop="itemName">
+          <template #default="scope">
+            <ProductInfo v-if="scope.row.itemType == 'product' || scope.row.itemType == 'semi'" :productId="scope.row.itemId">
+              <template #default="{ product }">
+                {{ product.productName }}({{ product.productCode }})
+              </template>
+            </ProductInfo>
+            <!-- <RawMaterialInfo v-else-if="scope.row.itemType === 'raw_material'" :materialId="scope.row.itemId">
+              <template #default="{ material }">
+                {{ material.rawMaterialName }}({{ material.rawMaterialCode }})
+              </template>
+            </RawMaterialInfo> -->
+          </template>
+        </el-table-column>
+        <el-table-column label="BOM">
+          <template #default="scope">
+            <BomInfoMini :itemType="scope.row.itemType" :itemId="scope.row.itemId" />
+          </template> 
+        </el-table-column>
+        <el-table-column label="库存数量" align="center" prop="quantity" />
+        <!-- <el-table-column label="在途数量" align="center" prop="onTheWay" /> -->
+        <el-table-column label="单位" align="center" prop="unit" />
+        <el-table-column label="批次号" align="center" prop="batchNo" />
+        <el-table-column label="备注" align="center" prop="remark" />
+        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+          <template #default="scope">
+            <el-button type="text" size="small" @click="handleTrace(scope.row)">物料追溯</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
+        @pagination="getList" />
+
+      <!-- 添加或修改库存对话框（保持不变） -->
+      <el-dialog :title="title" v-model="open" width="500px" append-to-body>
+        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+          <el-form-item label="仓库/库区/库位ID" prop="warehouseId">
+            <warehouse-select v-model="form.warehouseId" placeholder="请选择仓库/库区/库位" style="width: 100%;" clearable />
+          </el-form-item>
+          <el-form-item label="物品类型" prop="itemType">
+            <el-select v-model="form.itemType" placeholder="请选择物品类型">
+              <el-option v-for="dict in stock_item_type" :key="dict.value" :label="dict.label"
+                :value="dict.value"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="物品" prop="itemId">
+            <!-- <raw-material-select v-if="form.itemType === 'rawMaterial'" v-model="form.itemId" placeholder="请选择原材料"
+              style="width: 100%;" clearable /> -->
+            <product-select v-if="form.itemType === 'product'" v-model="form.itemId" placeholder="请选择产品"
+              style="width: 100%;" clearable />
+            <el-input v-else v-model="form.itemId" placeholder="请先选择物品类型" :disabled="true" style="width: 100%;" />
+          </el-form-item>
+          <el-form-item label="库存数量" prop="quantity">
+            <el-input v-model="form.quantity" placeholder="请输入库存数量" />
+          </el-form-item>
+          <el-form-item label="单位" prop="unit">
+            <el-input v-model="form.unit" placeholder="请输入单位" />
+          </el-form-item>
+          <el-form-item label="批次号" prop="batchNo">
+            <el-input v-model="form.batchNo" placeholder="请输入批次号" />
+          </el-form-item>
+          <el-form-item label="备注" prop="remark">
+            <el-input v-model="form.remark" placeholder="请输入备注" />
+          </el-form-item>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </el-dialog>
+
+      <el-dialog v-model="stockBoxVisible" title="暂存单据" width="800px" append-to-body>
+        <stock-io :data="stockBoxData" @generateBill="handleGenerateBill" />
+      </el-dialog>
+
+      <el-dialog v-model="stockTraceVisible" title="物料追溯" width="800px" append-to-body>
+        <el-table :data="stockTraceList" style="width: 100%">
+          <el-table-column label="单据类型" align="center" prop="ioType">
+            <template #default="scope">
+              <dict-tag :options="stock_io_type" :value="scope.row.ioType" />
+            </template>
+          </el-table-column>
+          <el-table-column label="单据ID" align="center" prop="stockIoId" />
+          <el-table-column label="单据编号" align="center" prop="stockIoCode" />
+          <!-- <el-table-column label="创建时间" align="center" prop="createTime" /> -->
+          <el-table-column label="变更数量" align="center" prop="quantity" />
+          <el-table-column label="备注" align="center" prop="remark" />
+        </el-table>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import { listStock, delStock, addStock, updateStock, getStockTrace } from "@/api/wms/stock";
+import { addStockIoWithDetail } from "@/api/wms/stockIo";
+import ProductSelect from "@/components/ProductSelect";
+import WarehouseSelect from "@/components/WarehouseSelect";
+import StockBox from './box';
+import ProductInfo from "@/components/Renderer/ProductInfo";
+import BomInfoMini from "@/components/Renderer/BomInfoMini";
+import StockIo from './panels/stockIo.vue';
+import WarehouseTree from "@/components/WarehouseTree/index.vue";
+
+export default {
+  name: "Stock",
+  setup() {
+    const { proxy } = getCurrentInstance();
+    const { stock_item_type, stock_io_type } = proxy.useDict('stock_item_type', 'stock_io_type');
+    return {
+      stock_item_type,
+      stock_io_type,
+    };
+  },
+  components: {
+    WarehouseSelect,
+    ProductSelect,
+    StockBox,
+    ProductInfo,
+    BomInfoMini,
+    StockIo,
+    WarehouseTree,
+  },
+  data() {
+    return {
+      // 库存分析对话框显示状态
+      stockBoxVisible: false,
+      // 按钮loading
+      buttonLoading: false,
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 库存：原材料/产品与库区/库位的存放关系表格数据
+      stockList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 20,
+        warehouseId: undefined,
+        itemType: undefined,
+        itemId: undefined,
+        quantity: undefined,
+        unit: undefined,
+        batchNo: undefined,
+        mergeBatch: false,
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        warehouseId: [
+          { required: true, message: "仓库/库区/库位ID不能为空", trigger: "blur" }
+        ],
+        itemType: [
+          { required: true, message: "物品类型不能为空", trigger: "change" }
+        ],
+        itemId: [
+          { required: true, message: "物品ID不能为空", trigger: "blur" }
+        ],
+        quantity: [
+          { required: true, message: "库存数量不能为空", trigger: "blur" }
+        ],
+        unit: [
+          { required: true, message: "单位不能为空", trigger: "blur" }
+        ],
+        batchNo: [
+          { required: true, message: "批次号不能为空", trigger: "blur" }
+        ],
+      },
+      // 暂存用于创建出库单或移库单的数据
+      stockBoxData: [],
+      stockBoxVisible: false,
+      // 选中的数据
+      selectedRows: [],
+      stockTraceList: [],
+      stockTraceVisible: false,
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询库存：原材料/产品与库区/库位的存放关系列表 */
+    getList() {
+      this.loading = true;
+      listStock(this.queryParams).then(response => {
+        this.stockList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    // 树节点点击
+    handleTreeSelect(node) {
+      this.queryParams.warehouseId = node.warehouseId;
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        stockId: undefined,
+        warehouseId: undefined,
+        itemType: undefined,
+        itemId: undefined,
+        quantity: undefined,
+        unit: undefined,
+        batchNo: undefined,
+        remark: undefined,
+        delFlag: undefined,
+        createTime: undefined,
+        createBy: undefined,
+        updateTime: undefined,
+        updateBy: undefined
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.selectedRows = selection;
+      this.ids = selection.map(item => item.stockId)
+      this.single = selection.length !== 1
+      this.multiple = !selection.length
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          this.buttonLoading = true;
+          if (this.form.stockId != null) {
+            updateStock(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            }).finally(() => {
+              this.buttonLoading = false;
+            });
+          } else {
+            addStock(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            }).finally(() => {
+              this.buttonLoading = false;
+            });
+          }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const stockIds = row.stockId || this.ids;
+      this.$modal.confirm('是否确认删除库存：原材料/产品与库区/库位的存放关系编号为"' + stockIds + '"的数据项？').then(() => {
+        this.loading = true;
+        return delStock(stockIds);
+      }).then(() => {
+        this.loading = false;
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {
+      }).finally(() => {
+        this.loading = false;
+      });
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('wms/stock/export', {
+        ...this.queryParams
+      }, `stock_${new Date().getTime()}.xlsx`)
+    },
+    handleStockBox() {
+      // 添加到暂存单据中，并且去重,去重依据为stockId是否相同
+      const list = [...this.selectedRows, ...this.stockBoxData];
+      console.log(list);
+      const uniqueStockBoxData = list.filter((item, index, self) =>
+        index === self.findIndex(t => t.stockId === item.stockId)
+      );
+      this.stockBoxData = uniqueStockBoxData;
+      
+      this.$modal.msgSuccess("暂存成功，请点击“暂存单据”按钮生成单据");
+    },
+    handleGenerateBill(data) {
+      addStockIoWithDetail(data).then(response => {
+        this.$modal.msgSuccess("生成单据成功");
+      });
+    },
+    handleViewStockBox() {
+      // 查看暂存单据
+      console.log(this.stockBoxData);
+      this.stockBoxVisible = true;
+    },
+    handleTrace(row) {
+      // 查询对应批次号的的出库和入库单据明细并展示
+      getStockTrace(row.batchNo).then(response => {
+        this.stockTraceList = response.data;
+        this.stockTraceVisible = true;
+      });
+    }
+  }
+};
+</script>
+
+<style scoped>
+.stock-layout {
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+}
+
+.stock-tree-col {
+  width: 260px;
+  max-width: 300px;
+  background: #fff;
+  border-right: 1px solid #f0f0f0;
+  height: 100%;
+  padding-right: 0;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+}
+
+.stock-tree-card {
+  height: 100%;
+  border: none;
+  box-shadow: none;
+}
+
+.stock-tree-title {
+  font-weight: bold;
+  font-size: 16px;
+  padding: 8px 0;
+}
+
+.stock-tree {
+  min-height: 500px;
+  max-height: 80vh;
+  overflow-y: auto;
+}
+
+.stock-main-col {
+  flex: 1;
+  padding-left: 24px;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+</style>
diff --git a/gear-ui3/src/views/wms/stock/panels/bar.vue b/gear-ui3/src/views/wms/stock/panels/bar.vue
new file mode 100644
index 0000000..255454c
--- /dev/null
+++ b/gear-ui3/src/views/wms/stock/panels/bar.vue
@@ -0,0 +1,214 @@
+<template>
+  <div ref="chartContainer" style="height: 100%;"></div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+
+export default {
+  name: "MaterialBar",
+  props: {
+    // 图表高度
+    height: {
+      type: String,
+      default: '300px'
+    },
+    // 库存数据
+    stockData: {
+      type: Array,
+      default: () => []
+    },
+    // 选中的仓库ID
+    selectedWarehouseId: {
+      type: [String, Number],
+      default: null
+    },
+    // 仓库树数据
+    warehouseTreeData: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      chart: null
+    };
+  },
+  watch: {
+    stockData: {
+      handler: 'updateChart',
+      deep: true
+    },
+    selectedWarehouseId: {
+      handler: 'updateChart',
+      immediate: true
+    }
+  },
+  mounted() {
+    this.initChart();
+    this.updateChart();
+  },
+  methods: {
+    initChart() {
+      if (this.chart) {
+        this.chart.dispose();
+      }
+      this.chart = echarts.init(this.$refs.chartContainer);
+      window.addEventListener('resize', this.handleResize);
+    },
+    handleResize() {
+      this.chart && this.chart.resize();
+    },
+    // 获取所有子仓库ID（包括自身）
+    getAllWarehouseIds(warehouseId) {
+      const ids = new Set();
+      
+      const findChildren = (treeData, targetId) => {
+        for (const node of treeData) {
+          if (String(node.warehouseId) === String(targetId)) {
+            // 找到目标节点，收集它和它的所有子节点的ID
+            const collectIds = (node) => {
+              ids.add(String(node.warehouseId));
+              if (node.children) {
+                node.children.forEach(child => collectIds(child));
+              }
+            };
+            collectIds(node);
+            return true;
+          }
+          if (node.children && findChildren(node.children, targetId)) {
+            return true;
+          }
+        }
+        return false;
+      };
+
+      if (warehouseId) {
+        findChildren(this.warehouseTreeData, warehouseId);
+      }
+      
+      return ids;
+    },
+    
+    // 处理数据，获取前10的物料
+    processData() {
+      let filteredData;
+      
+      if (this.selectedWarehouseId) {
+        // 获取选中仓库及其所有子仓库的ID
+        const warehouseIds = this.getAllWarehouseIds(this.selectedWarehouseId);
+        // 过滤属于这些仓库的数据
+        filteredData = this.stockData.filter(item => warehouseIds.has(String(item.warehouseId)));
+      } else {
+        filteredData = this.stockData;
+      }
+
+      // 按物料分组并汇总数量
+      const materialMap = new Map();
+      filteredData.forEach(item => {
+        const key = item.itemName;
+        const quantity = Number(item.quantity) || 0;
+        const currentQuantity = materialMap.get(key) || 0;
+        materialMap.set(key, currentQuantity + quantity);
+      });
+
+      // 转换为数组并排序
+      const sortedData = Array.from(materialMap.entries())
+        .map(([name, value]) => ({ name, value }))
+        .sort((a, b) => b.value - a.value)
+        .slice(0, 10); // 只取前10名
+
+      return sortedData;
+    },
+    updateChart() {
+      if (!this.chart) return;
+
+      const data = this.processData();
+      const names = data.map(item => item.name);
+      const values = data.map(item => item.value);
+
+      // 计算最大值，用于设置图表的最大刻度
+      const maxValue = Math.max(...values);
+      const interval = Math.ceil(maxValue / 5); // 将刻度分为5份
+
+      const option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          },
+          formatter: (params) => {
+            const data = params[0];
+            return `${data.name}<br/>数量: ${data.value}`;
+          }
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'value',
+          boundaryGap: [0, 0.01],
+          max: Math.ceil(maxValue / interval) * interval,
+          interval: interval
+        },
+        yAxis: {
+          type: 'category',
+          data: names,
+          axisTick: {
+            alignWithLabel: true
+          },
+          axisLabel: {
+            formatter: (value) => {
+              // 如果名称太长，截断并添加省略号
+              if (value.length > 10) {
+                return value.substring(0, 10) + '...';
+              }
+              return value;
+            }
+          }
+        },
+        series: [
+          {
+            name: '数量',
+            type: 'bar',
+            data: values,
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                { offset: 0, color: '#83bff6' },
+                { offset: 0.5, color: '#188df0' },
+                { offset: 1, color: '#188df0' }
+              ])
+            },
+            emphasis: {
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                  { offset: 0, color: '#2378f7' },
+                  { offset: 0.7, color: '#2378f7' },
+                  { offset: 1, color: '#83bff6' }
+                ])
+              }
+            },
+            label: {
+              show: true,
+              position: 'right',
+              formatter: '{c}'
+            }
+          }
+        ]
+      };
+
+      this.chart.setOption(option, true);
+    }
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.handleResize);
+    if (this.chart) {
+      this.chart.dispose();
+      this.chart = null;
+    }
+  }
+};
+</script>
diff --git a/gear-ui3/src/views/wms/stock/panels/reattree.vue b/gear-ui3/src/views/wms/stock/panels/reattree.vue
new file mode 100644
index 0000000..517d54e
--- /dev/null
+++ b/gear-ui3/src/views/wms/stock/panels/reattree.vue
@@ -0,0 +1,269 @@
+<template>
+  <div ref="chartContainer" :style="{ height: '100%' }"></div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+
+export default {
+  name: "ReaTree",
+  props: {
+    // 图表高度
+    height: {
+      type: String,
+      default: '600px'
+    },
+    // 库存数据
+    stockData: {
+      type: Array,
+      default: () => []
+    },
+    // 仓库数据树
+    warehouseTreeData: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      chart: null
+    };
+  },
+  mounted() {
+    this.initChart();
+    this.updateChartData();
+  },
+  watch: {
+    stockData: {
+      handler: 'updateChartData',
+      deep: true
+    },
+    warehouseTreeData: {
+      handler: 'updateChartData',
+      deep: true
+    }
+  },
+  methods: {
+    initChart() {
+      if (this.chart) {
+        this.chart.dispose();
+      }
+      this.chart = echarts.init(this.$refs.chartContainer);
+      window.addEventListener('resize', this.handleResize);
+    },
+    handleResize() {
+      this.chart && this.chart.resize();
+    },
+    // 创建树形数据
+    createTreeData() {
+      // 递归构建仓库树
+      const buildWarehouseTree = (warehouseNode, parentId = '') => {
+        const stocks = this.stockData.filter(stock => stock.warehouseId === warehouseNode.warehouseId);
+        const children = [];
+        let totalQuantity = 0;
+        
+        // 添加库存物品
+        stocks.forEach(stock => {
+          const quantity = Number(stock.quantity) || 0;
+          totalQuantity += quantity;
+          children.push({
+            id: `${warehouseNode.warehouseId}_${stock.itemCode || stock.itemName}`,
+            name: stock.itemName,
+            value: quantity,
+            itemInfo: {
+              type: stock.itemType,
+              code: stock.itemCode,
+              unit: stock.unit,
+              batchNo: stock.batchNo
+            }
+          });
+        });
+
+        // 递归处理子仓库
+        if (warehouseNode.children && warehouseNode.children.length > 0) {
+          warehouseNode.children.forEach(child => {
+            const childNode = buildWarehouseTree(child, warehouseNode.warehouseId);
+            if (childNode.value > 0) {
+              children.push(childNode);
+              totalQuantity += childNode.value;
+            }
+          });
+        }
+
+        return {
+          id: String(warehouseNode.warehouseId),
+          name: warehouseNode.warehouseName,
+          value: totalQuantity,
+          warehouseInfo: {
+            code: warehouseNode.warehouseCode
+          },
+          children: children.length > 0 ? children : undefined
+        };
+      };
+
+      return this.warehouseTreeData.map(warehouse => buildWarehouseTree(warehouse));
+    },
+    // 获取层级样式配置
+    getLevelOption() {
+      return [
+        {
+          itemStyle: {
+            borderColor: '#555',
+            borderWidth: 4,
+            gapWidth: 3
+          },
+          emphasis: {
+            itemStyle: {
+              borderColor: '#333'
+            }
+          },
+          upperLabel: {
+            show: true,
+            height: 35,
+            fontSize: 16,
+            fontWeight: 'bold',
+            color: '#333'
+          }
+        },
+        {
+          itemStyle: {
+            borderColor: '#777',
+            borderWidth: 3,
+            gapWidth: 2
+          },
+          emphasis: {
+            itemStyle: {
+              borderColor: '#555'
+            }
+          },
+          upperLabel: {
+            show: true,
+            height: 28,
+            fontSize: 14
+          }
+        },
+        {
+          itemStyle: {
+            borderColor: '#999',
+            borderWidth: 2,
+            gapWidth: 1
+          },
+          emphasis: {
+            itemStyle: {
+              borderColor: '#777'
+            }
+          }
+        }
+      ];
+    },
+    // 获取物料单位
+    getItemUnit(data) {
+      return data.itemInfo?.unit || '';
+    },
+    // 获取物料类型名称
+    getItemTypeName(type) {
+      const typeMap = {
+        raw_material: '原材料',
+        product: '产品',
+        semi_product: '半成品'
+      };
+      return typeMap[type] || type || '未分类';
+    },
+    // 更新图表数据
+    updateChartData() {
+      if (!this.chart) return;
+
+      const treeData = this.createTreeData();
+      const option = {
+        tooltip: {
+          formatter: (info) => {
+            const value = info.value || 0;
+            const treePath = info.treePathInfo || [];
+            let path = '';
+
+            for (let i = 0; i < treePath.length; i++) {
+              if (treePath[i].name) {
+                path += treePath[i].name;
+                if (i < treePath.length - 1) path += '/';
+              }
+            }
+
+            const content = [];
+            content.push(`<div class="tooltip-title">${echarts.format.encodeHTML(path)}</div>`);
+            content.push(`库存数量: ${echarts.format.addCommas(value)} ${this.getItemUnit(info.data)}`);
+
+            if (info.data.itemInfo) {
+              const item = info.data.itemInfo;
+              content.push(`物料类型: ${this.getItemTypeName(item.type)}`);
+              content.push(`物料编码: ${item.code || '无'}`);
+              if (item.batchNo) content.push(`批次号: ${item.batchNo}`);
+            }
+
+            return content.join('<br>');
+          }
+        },
+        series: [{
+          name: '库存',
+          type: 'treemap',
+          visibleMin: 300,
+          leafDepth: 2,
+          label: {
+            show: true,
+            fontSize: 12,
+            formatter: (params) => {
+              if (params.data.itemInfo) {
+                const unit = params.data.itemInfo.unit || '';
+                return `${params.name}\n${params.value}${unit}`;
+              }
+              return params.name;
+            },
+            ellipsis: true
+          },
+          upperLabel: {
+            show: true,
+            fontWeight: 'bold'
+          },
+          itemStyle: {
+            borderColor: '#fff',
+            borderWidth: 1
+          },
+          levels: this.getLevelOption(),
+          data: treeData
+        }]
+      };
+
+      this.chart.setOption(option, true);
+    },
+    // 高亮指定节点
+    highlightNode(id) {
+      if (!this.chart) return;
+      
+      this.chart.dispatchAction({
+        type: 'highlight',
+        seriesIndex: 0,
+        targetNodeId: id
+      });
+
+      this.chart.dispatchAction({
+        type: 'treemapRootToNode',
+        seriesIndex: 0,
+        targetNodeId: id
+      });
+    }
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.handleResize);
+    if (this.chart) {
+      this.chart.dispose();
+      this.chart = null;
+    }
+  }
+};
+</script>
+
+<style scoped>
+.tooltip-title {
+  font-weight: bold;
+  margin-bottom: 5px;
+}
+</style>
diff --git a/gear-ui3/src/views/wms/stock/panels/resize.js b/gear-ui3/src/views/wms/stock/panels/resize.js
new file mode 100644
index 0000000..28992ed
--- /dev/null
+++ b/gear-ui3/src/views/wms/stock/panels/resize.js
@@ -0,0 +1,85 @@
+// 防抖函数：避免频繁触发 resize
+function debounce(fn, delay = 100) {
+  let timer = null;
+  return function (...args) {
+    if (timer) clearTimeout(timer);
+    timer = setTimeout(() => {
+      fn.apply(this, args);
+      timer = null;
+    }, delay);
+  };
+}
+
+export default {
+  data() {
+    return {
+      // 存储ResizeObserver实例
+      resizeObserver: null,
+      // 标记是否已初始化监听
+      isResizeListening: false
+    };
+  },
+  methods: {
+    /**
+     * 初始化尺寸监听
+     * @param {HTMLElement} container - 图表容器DOM（默认取this.$refs.chartContainer）
+     */
+    initResizeListener(container) {
+      // 防止重复初始化
+      if (this.isResizeListening) return;
+
+      // 默认使用组件内的chartContainer作为监听目标
+      const target = container || this.$refs.chartContainer;
+      if (!target) {
+        console.warn('未找到图表容器，无法初始化尺寸监听');
+        return;
+      }
+
+      // 创建ResizeObserver实例
+      this.resizeObserver = new ResizeObserver(
+        debounce(entries => {
+          // 触发图表重绘
+          this.handleContainerResize(entries);
+        })
+      );
+
+      // 开始监听容器尺寸变化
+      this.resizeObserver.observe(target);
+      this.isResizeListening = true;
+    },
+
+    /**
+     * 处理容器尺寸变化
+     * @param {ResizeObserverEntry[]} entries - ResizeObserver回调参数
+     */
+    handleContainerResize(entries) {
+      // 确保图表实例存在
+      if (this.chart && this.chart.resize) {
+        // 调用ECharts的resize方法重绘图表
+        this.chart.resize();
+      }
+    },
+
+    /**
+     * 销毁尺寸监听
+     */
+    destroyResizeListener() {
+      if (this.resizeObserver) {
+        this.resizeObserver.disconnect();
+        this.resizeObserver = null;
+      }
+      this.isResizeListening = false;
+    }
+  },
+  // 组件挂载后初始化监听
+  mounted() {
+    // 延迟初始化，确保DOM已渲染完成
+    this.$nextTick(() => {
+      this.initResizeListener();
+    });
+  },
+  // 组件销毁前清理监听
+  beforeDestroy() {
+    this.destroyResizeListener();
+  }
+};
\ No newline at end of file
diff --git a/gear-ui3/src/views/wms/stock/panels/stockIo.vue b/gear-ui3/src/views/wms/stock/panels/stockIo.vue
new file mode 100644
index 0000000..94c0ec0
--- /dev/null
+++ b/gear-ui3/src/views/wms/stock/panels/stockIo.vue
@@ -0,0 +1,104 @@
+<template>
+  <div>
+    <el-form :model="form" label-width="120px">
+      <el-form-item label="单号">
+        <el-input v-model="form.stockIoCode" placeholder="请输入单号" />
+      </el-form-item>
+      <el-form-item label="类型">
+        <el-select v-model="form.ioType" placeholder="请选择类型">
+          <el-option label="入库" value="in" />
+          <el-option label="出库" value="out" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="业务类型">
+        <el-select v-model="form.bizType" placeholder="请选择业务类型">
+          <el-option
+            v-for="dict in dict.type.stock_biz_type"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.remark" placeholder="请输入备注" />
+      </el-form-item>
+    </el-form>
+    <el-table :data="stockBoxData" style="width: 100%">
+      <el-table-column type="selection" width="55" />
+      <el-table-column prop="warehouseName" label="仓库" />
+      <el-table-column prop="itemName" label="物料" />
+      <el-table-column prop="quantity" label="数量" width="200">
+        <template #default="scope">
+          <el-input-number :controls=false controls-position="right" v-model="scope.row.count" :min="0" :step="1" :max="scope.row.quantity" />
+        </template>
+      </el-table-column>
+      <el-table-column prop="unit" label="单位" />
+      <el-table-column label="操作" width="100">
+        <template #default="scope">
+          <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div style="text-align: right; margin-top: 10px;">
+      <el-button type="danger" @click="handleDeleteAll">清空</el-button>
+      <el-button type="primary" @click="handleGenerateBill">生成单据</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'StockIo',
+  dicts: ['stock_biz_type'],
+  data() {
+    return {
+      stockBoxData: [],
+      form: {
+        stockIoCode: '',
+        ioType: 'in',
+        bizType: 'stock_io',
+        remark: '',
+      }
+    }
+  },
+  props: {
+    data: {
+      type: Array,
+      default: () => []
+    }
+  },
+  watch: {
+    data: {
+      handler(newVal) {
+        this.stockBoxData = newVal.map(item => ({
+          ...item,
+          count: 0,
+        }));
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  methods: {
+    handleDelete(row) {
+      this.stockBoxData = this.stockBoxData.filter(item => item.stockId !== row.stockId);
+    },
+    handleDeleteAll() {
+      this.stockBoxData = [];
+    },
+    handleGenerateBill() {
+      this.$emit('generateBill', {
+        ...this.form,
+        details: this.stockBoxData.map(item => ({
+          ...item,
+          status: 0,
+          quantity: item.count,
+          batchNo: item.batchNo,
+          remark: item.remark
+        }))
+      });
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/gear-ui3/src/views/wms/stock/panels/trendChart.vue b/gear-ui3/src/views/wms/stock/panels/trendChart.vue
new file mode 100644
index 0000000..106cfce
--- /dev/null
+++ b/gear-ui3/src/views/wms/stock/panels/trendChart.vue
@@ -0,0 +1,406 @@
+<template>
+  <div class="chart-container">
+    <div v-if="isDrilled" class="drill-header">
+      <button @click="backToSummary" class="back-btn">← 返回汇总</button>
+    </div>
+    <div id="trendChart" style="width: 100%; height: 300px;"></div>
+  </div>
+</template>
+
+<script>
+import { listStockLog } from '@/api/wms/stockLog';
+import * as echarts from 'echarts';
+import Resize from './resize';
+
+export default {
+  name: 'TrendChart',
+  mixins: [Resize],
+  data() {
+    return {
+      trendChart: null,
+      allData: [], // 存储原始数据
+      dailySummary: {}, // 存储按天汇总数据
+      isDrilled: false, // 是否处于钻取状态
+      currentDrillDate: '' // 当前钻取的日期
+    };
+  },
+  props: {
+    timeRange: {
+      required: true,
+      type: Array,
+    },
+    warehouseId: {
+      required: false,
+      type: String,
+    },
+  },
+  mounted() {
+    this.initChart();
+    this.getTrendData();
+  },
+  watch: {
+    timeRange: {
+      handler: function() {
+        // 当时间范围变化时，重置钻取状态
+        this.isDrilled = false;
+        this.currentDrillDate = '';
+        this.getTrendData();
+      },
+      immediate: true,
+    },
+    warehouseId: function() {
+      this.isDrilled = false;
+      this.currentDrillDate = '';
+      this.getTrendData();
+    },
+  },
+  methods: {
+    initChart() {
+      this.trendChart = echarts.init(document.getElementById('trendChart'));
+      
+      // 绑定双击事件用于数据钻取
+      this.trendChart.on('dblclick', (params) => {
+        // 如果点击的是坐标轴空白区域，返回汇总视图
+        if (params.componentType === 'grid') {
+          if (this.isDrilled) {
+            this.backToSummary();
+          }
+          return;
+        }
+        
+        // 如果是柱状图元素，进行钻取
+        if (params.componentType === 'series' &&!this.isDrilled) {
+          const dateIndex = params.dataIndex;
+          const sortedDates = Object.keys(this.dailySummary).sort((a, b) => new Date(a) - new Date(b));
+          const drillDate = sortedDates[dateIndex];
+          this.drillDownToDate(drillDate);
+        }
+      });
+      
+      window.addEventListener('resize', () => {
+        this.trendChart.resize();
+      });
+    },
+    
+    getTrendData() {
+      const { timeRange, warehouseId } = this;
+      const params = {
+        startTime: timeRange? timeRange[0] + ' 00:00:00' : '',
+        endTime: timeRange? timeRange[1] + ' 23:59:59' : '',
+        warehouseId,
+        pageSize: 999999,
+        pageNum: 1,
+      };
+      listStockLog(params).then((res) => {
+        this.allData = res.rows;
+        this.processAndRenderData();
+      });
+    },
+    
+    processAndRenderData() {
+      // 按日期分组统计
+      this.dailySummary = {};
+      this.allData.forEach((item) => {
+        const dateArr = item.changeTime.split(' ')[0].split('-');
+        const year = dateArr[0];
+        const month = dateArr[1].padStart(2, '0');
+        const day = dateArr[2].padStart(2, '0');
+        const date = `${year}-${month}-${day}`;
+        const changeQty = parseFloat(item.changeQty);
+        
+        if (!this.dailySummary[date]) {
+          this.dailySummary[date] = {
+            total: 0,
+            items: []
+          };
+        }
+        this.dailySummary[date].total += changeQty;
+        this.dailySummary[date].items.push(item);
+      });
+      
+      // 根据当前状态渲染不同视图
+      if (this.isDrilled) {
+        this.renderDetailChart(this.currentDrillDate);
+      } else {
+        this.renderSummaryChart();
+      }
+    },
+    
+    renderSummaryChart() {
+      const sortedDates = Object.keys(this.dailySummary).sort((a, b) => new Date(a) - new Date(b));
+      const categories = sortedDates;
+      const placeholderData = [0];
+      const incomeData = [];
+      const expensesData = [];
+      let accumulatedValue = 0;
+
+      sortedDates.forEach((date) => {
+        const dailyChange = this.dailySummary[date].total;
+        accumulatedValue += dailyChange;
+        placeholderData.push(accumulatedValue);
+
+        if (dailyChange > 0) {
+          incomeData.push(dailyChange);
+          expensesData.push('-');
+        } else {
+          incomeData.push('-');
+          expensesData.push(Math.abs(dailyChange));
+        }
+      });
+
+      const option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow',
+          },
+          formatter: (params) => {
+            let tar;
+            if (params[1] && params[1].value!== '-') {
+              tar = params[1];
+            } else {
+              tar = params[2];
+            }
+            if (tar) {
+              const date = sortedDates[tar.dataIndex];
+              const itemCount = this.dailySummary[date].items.length;
+              return `
+                <div>日期: ${date}</div>
+                <div>当日库存变化: ${this.dailySummary[date].total}</div>
+                <div>累计库存变化: ${placeholderData[tar.dataIndex + 1]}</div>
+                <div>操作记录: ${itemCount} 条</div>
+                <div style="color:#888">双击查看明细</div>
+              `;
+            }
+            return '';
+          },
+        },
+        legend: {
+          data: ['入库', '出库'],
+          top: 30,
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '15%',
+          containLabel: true,
+        },
+        xAxis: {
+          type: 'category',
+          data: categories,
+          axisLabel: {
+            rotate: 45,
+            interval: 0,
+            fontSize: 12,
+          },
+        },
+        yAxis: {
+          type: 'value',
+          name: '库存变化量',
+          nameLocation:'middle',
+          nameGap: 30,
+        },
+        series: [
+          {
+            name: '占位',
+            type: 'bar',
+            stack: 'Total',
+            silent: true,
+            itemStyle: {
+              color: 'transparent',
+            },
+            data: placeholderData.slice(0, -1),
+          },
+          {
+            name: '入库',
+            type: 'bar',
+            stack: 'Total',
+            label: {
+              show: true,
+              position: 'top',
+              formatter: (params) => params.value!== '-'? `+${params.value}` : '',
+            },
+            itemStyle: {
+              color: '#52c41a',
+            },
+            data: incomeData,
+          },
+          {
+            name: '出库',
+            type: 'bar',
+            stack: 'Total',
+            label: {
+              show: true,
+              position: 'bottom',
+              formatter: (params) => params.value!== '-'? `-${params.value}` : '',
+            },
+            itemStyle: {
+              color: '#f5222d',
+            },
+            data: expensesData,
+          },
+        ],
+      };
+
+      this.trendChart.setOption(option);
+    },
+    
+    // 钻取到指定日期的明细
+    drillDownToDate(date) {
+      this.isDrilled = true;
+      this.currentDrillDate = date;
+      this.renderDetailChart(date);
+    },
+    
+    // 渲染明细图表
+    renderDetailChart(date) {
+      const dayItems = this.dailySummary[date].items.sort((a, b) => new Date(a.changeTime) - new Date(b.changeTime));
+      
+      // 准备明细数据
+      const timeLabels = dayItems.map(item => {
+        const timePart = item.changeTime.split(' ')[1];
+        return timePart.slice(0, 5); // 只显示时分
+      });
+      
+      const values = dayItems.map(item => {
+        const qty = parseFloat(item.changeQty);
+        return {
+          value: qty,
+          itemStyle: {
+            color: qty > 0? '#52c41a' : '#f5222d'
+          },
+          label: {
+            show: true,
+            position: qty > 0? 'top' : 'bottom',
+            formatter: `${qty > 0? '+' : ''}${qty}`
+          }
+        };
+      });
+      
+      // 计算累积值用于阶梯效果
+      const bases = [0];
+      let accumulated = 0;
+      dayItems.forEach((item, index) => {
+        if (index > 0) {
+          accumulated += parseFloat(dayItems[index - 1].changeQty);
+          bases.push(accumulated);
+        }
+      });
+
+      const option = {
+        title: {
+          text: `${date} 库存变动明细`,
+          left: 'center'
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          },
+          formatter: (params) => {
+            const item = dayItems[params[0].dataIndex];
+            return `
+              <div>时间: ${item.changeTime}</div>
+              <div>类型: ${item.changeType}</div>
+              <div>物料ID: ${item.itemId}</div>
+              <div>变化量: ${item.changeQty}</div>
+              <div>操作后数量: ${item.afterQty}</div>
+              ${item.remark? `<div>备注: ${item.remark}</div>` : ''}
+            `;
+          }
+        },
+        grid: {
+          left: '5%',
+          right: '4%',
+          bottom: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          data: timeLabels,
+          axisLabel: {
+            rotate: 45,
+            interval: 0
+          },
+          name: '时间'
+        },
+        yAxis: {
+          type: 'value',
+          name: '数量'
+        },
+        series: [
+          {
+            name: '占位',
+            type: 'bar',
+            stack: 'Detail',
+            silent: true,
+            itemStyle: {
+              color: 'transparent'
+            },
+            data: bases
+          },
+          {
+            name: '变动',
+            type: 'bar',
+            stack: 'Detail',
+            data: values,
+            barWidth: '60%'
+          }
+        ]
+      };
+
+      this.trendChart.setOption(option);
+    },
+    
+    // 返回汇总视图
+    backToSummary() {
+      this.isDrilled = false;
+      this.currentDrillDate = '';
+      this.renderSummaryChart();
+    },
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', () => {
+      this.trendChart.resize();
+    });
+    if (this.trendChart) {
+      this.trendChart.dispose();
+    }
+  },
+};
+</script>
+
+<style scoped>
+.chart-container {
+  position: relative;
+}
+
+.drill-header {
+  padding: 10px 0;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.back-btn {
+  padding: 4px 10px;
+  background-color: #1890ff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.back-btn:hover {
+  background-color: #096dd9;
+}
+
+.drill-header h3 {
+  margin: 0;
+  font-size: 16px;
+  color: #333;
+}
+</style>
diff --git a/gear-ui3/src/views/wms/stockIo/in.vue b/gear-ui3/src/views/wms/stockIo/in.vue
new file mode 100644
index 0000000..efeef1f
--- /dev/null
+++ b/gear-ui3/src/views/wms/stockIo/in.vue
@@ -0,0 +1,13 @@
+<template>
+  <StockIoPage ioType="in" />
+</template>
+
+<script>
+  import StockIoPage from './panels/stockIoPage.vue';
+
+  export default {
+    components: {
+      StockIoPage
+    }
+  }
+</script>
\ No newline at end of file
diff --git a/gear-ui3/src/views/wms/stockIo/index.vue b/gear-ui3/src/views/wms/stockIo/index.vue
new file mode 100644
index 0000000..75681b1
--- /dev/null
+++ b/gear-ui3/src/views/wms/stockIo/index.vue
@@ -0,0 +1,488 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="单号" prop="stockIoCode">
+        <el-input
+          v-model="queryParams.stockIoCode"
+          placeholder="请输入出入库单号"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="类型" prop="ioType">
+        <el-select v-model="queryParams.ioType" placeholder="请选择类型" clearable>
+          <el-option
+            v-for="dict in dict.type.stock_io_type"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="业务类型" prop="bizType">
+        <el-select v-model="queryParams.bizType" placeholder="请选择业务类型" clearable>
+          <el-option
+            v-for="dict in dict.type.stock_biz_type"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="单据状态" prop="status">
+        <el-select v-model="queryParams.status" placeholder="请选择单据状态" clearable>
+          <el-option :key="0" label="草稿" :value="0" />
+          <el-option :key="1" label="待审核" :value="1" />
+          <el-option :key="2" label="已完成" :value="2" />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="Search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="Refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="Plus"
+          size="mini"
+          @click="handleAdd"
+          
+        >新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="success"
+          plain
+          icon="Edit"
+          size="mini"
+          :disabled="single"
+          @click="handleUpdate"
+          
+        >修改</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="Delete"
+          size="mini"
+          :disabled="multiple"
+          @click="handleDelete"
+          
+        >删除</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="Download"
+          size="mini"
+          @click="handleExport"
+          
+        >导出</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="stockIoList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="出入库单ID" align="center" prop="stockIoId" v-if="true"/>
+      <el-table-column label="出入库单号" align="center" prop="stockIoCode" />
+      <el-table-column label="类型" align="center" prop="ioType">
+        <template #default="scope">
+          <el-tag :type="getIoTypeTagType(scope.row.ioType)">
+            {{ getIoTypeLabel(scope.row.ioType) }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="业务类型" align="center" prop="bizType">
+        <template #default="scope">
+          <el-tag :type="getBizTypeTagType(scope.row.bizType)">
+            {{ getBizTypeLabel(scope.row.bizType) }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="单据状态" align="center" prop="status">
+        <template #default="scope">
+          <el-tag :type="scope.row.status === 2 ? 'success' : (scope.row.status === 1 ? 'warning' : 'info')">
+            {{ scope.row.status === 2 ? '已完成' : (scope.row.status === 0 ? '草稿' : '待审核') }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="备注" align="center" prop="remark" />
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template #default="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="Edit"
+            @click="handleUpdate(scope.row)"
+            
+          >修改</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="Delete"
+            @click="handleDelete(scope.row)"
+            
+          >删除</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="Document"
+            @click="showDetail(scope.row)"
+          >明细</el-button>
+          <!-- <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-printer"
+            @click="handleShowBarcodeDrawer(scope.row)"
+          >打印条码</el-button> -->
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 添加或修改出入库单主对话框 -->
+    <el-dialog :title="title" v-model="open" width="600px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
+        <el-form-item label="出入库单号" prop="stockIoCode">
+          <el-input v-model="form.stockIoCode" placeholder="请输入出入库单号" />
+        </el-form-item>
+        <el-form-item label="类型" prop="ioType">
+          <el-select v-model="form.ioType" placeholder="请选择类型">
+            <el-option
+              v-for="dict in dict.type.stock_io_type"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="业务类型" prop="bizType">
+          <el-select v-model="form.bizType" placeholder="请选择业务类型">
+            <el-option
+              v-for="dict in dict.type.stock_biz_type"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="单据状态" prop="status">
+          <el-input v-model="form.status" :value="0" readonly disabled />
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" placeholder="请输入备注" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+    <!-- 明细弹窗 -->
+    <el-dialog
+      title="出入库单详情"
+      v-model="detailDialogVisible"
+      width="1000px"
+      append-to-body
+      @close="onDetailClosed"
+    >
+      <StockIoDetailPanel 
+        :stockIo="detailStockIo" 
+        @status-changed="onStatusChanged"
+      />
+    </el-dialog>
+    <!-- 条码打印抽屉 -->
+    <!-- <el-drawer
+      title="条码打印"
+      v-model="drawerBarcodeVisible"
+      size="100%"
+      direction="btt"
+      :with-header="true"
+    >
+      <BarcodeGenerator
+        v-if="drawerBarcodeVisible"
+        :barcodes="drawerBarcodeData.barcodes"
+        :perRow="drawerBarcodeData.perRow"
+        :barcodeWidth="drawerBarcodeData.barcodeWidth"
+        :barcodeHeight="drawerBarcodeData.barcodeHeight"
+      />
+    </el-drawer> -->
+  </div>
+</template>
+
+<script>
+import { listStockIo, getStockIo, delStockIo, addStockIo, updateStockIo } from "@/api/wms/stockIo";
+import { listStockIoDetail } from "@/api/wms/stockIoDetail";
+import StockIoDetailPanel from './panels/detail.vue';
+import BarcodeGenerator from './panels/barcode.vue';
+
+export default {
+  name: "StockIo",
+  dicts: ['stock_biz_type', 'stock_io_type', 'stock_status'],
+  components: { StockIoDetailPanel, BarcodeGenerator },
+  data() {
+    return {
+      // 按钮loading
+      buttonLoading: false,
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 出入库单主表格数据
+      stockIoList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 20,
+        stockIoCode: undefined,
+        ioType: undefined,
+        bizType: undefined,
+        status: undefined,
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        stockIoId: [
+          { required: true, message: "出入库单ID不能为空", trigger: "blur" }
+        ],
+        stockIoCode: [
+          { required: true, message: "出入库单号不能为空", trigger: "blur" }
+        ],
+        ioType: [
+          { required: true, message: "类型不能为空", trigger: "change" }
+        ],
+        bizType: [
+          { required: true, message: "业务类型不能为空", trigger: "change" }
+        ],
+        status: [
+          { required: true, message: "单据状态不能为空", trigger: "change" }
+        ],
+        delFlag: [
+          { required: true, message: "删除标志不能为空", trigger: "blur" }
+        ],
+        createTime: [
+          { required: true, message: "创建时间不能为空", trigger: "blur" }
+        ],
+        updateTime: [
+          { required: true, message: "更新时间不能为空", trigger: "blur" }
+        ],
+      },
+      detailDialogVisible: false,
+      detailStockIo: null,
+      // 条码打印抽屉相关
+      // drawerBarcodeVisible: false,
+      // drawerBarcodeData: {
+      //   barcodes: [],
+      //   perRow: 3,
+      //   barcodeWidth: 180,
+      //   barcodeHeight: 60
+      // },
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询出入库单主列表 */
+    getList() {
+      this.loading = true;
+      listStockIo(this.queryParams).then(response => {
+        this.stockIoList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        stockIoId: undefined,
+        stockIoCode: undefined,
+        ioType: undefined,
+        bizType: undefined,
+        status: undefined,
+        remark: undefined,
+        delFlag: undefined,
+        createTime: undefined,
+        createBy: undefined,
+        updateTime: undefined,
+        updateBy: undefined
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.stockIoId)
+      this.single = selection.length!==1
+      this.multiple = !selection.length
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.form.status = 0; // 新增时默认草稿状态
+      this.open = true;
+      this.title = "添加出入库单主";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.loading = true;
+      this.reset();
+      const stockIoId = row.stockIoId || this.ids
+      getStockIo(stockIoId).then(response => {
+        this.loading = false;
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改出入库单主";
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          this.buttonLoading = true;
+          if (this.form.stockIoId != null) {
+            updateStockIo(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            }).finally(() => {
+              this.buttonLoading = false;
+            });
+          } else {
+            addStockIo(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            }).finally(() => {
+              this.buttonLoading = false;
+            });
+          }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const stockIoIds = row.stockIoId || this.ids;
+      this.$modal.confirm('是否确认删除出入库单主编号为"' + stockIoIds + '"的数据项？').then(() => {
+        this.loading = true;
+        return delStockIo(stockIoIds);
+      }).then(() => {
+        this.loading = false;
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {
+      }).finally(() => {
+        this.loading = false;
+      });
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('wms/stockIo/export', {
+        ...this.queryParams
+      }, `stockIo_${new Date().getTime()}.xlsx`)
+    },
+    showDetail(row) {
+      this.detailStockIo = { ...row };
+      this.detailDialogVisible = true;
+    },
+    onDetailClosed() {
+      this.getList();
+    },
+    onStatusChanged(updatedStockIo) {
+      // 更新主表中的对应记录状态
+      const index = this.stockIoList.findIndex(item => item.stockIoId === updatedStockIo.stockIoId);
+      if (index !== -1) {
+        this.$set(this.stockIoList, index, updatedStockIo);
+      }
+      // 刷新列表
+      this.getList();
+    },
+    // async handleShowBarcodeDrawer(row) {
+    //   // 获取明细列表
+    //   const res = await listStockIoDetail({ stockIoId: row.stockIoId });
+    //   const details = res.data || res.rows || [];
+    //   // 拼接条码内容 stockIoId_warehouseId_materialId_quantity
+    //   const barcodes = details.filter(el => el.recordType == 0).map(item => {
+    //     return encodeURIComponent(`${row.stockIoId}_${item.warehouseId || ''}_${item.itemId || ''}_${item.quantity || ''}`);
+    //   });
+    //   // this.drawerBarcodeData = {
+    //   //   barcodes,
+    //   //   perRow: 3,
+    //   //   barcodeWidth: 180,
+    //   //   barcodeHeight: 60
+    //   // };
+    //   // this.drawerBarcodeVisible = true;
+    // },
+    getIoTypeTagType(type) {
+      if (type === 'in') return 'success';
+      if (type === 'out') return 'primary';
+      if (type === 'transfer') return 'warning';
+      return '';
+    },
+    getIoTypeLabel(type) {
+      if (type === 'in') return '入库';
+      if (type === 'out') return '出库';
+      if (type === 'transfer') return '移库';
+      return type;
+    },
+    getBizTypeTagType(type) {
+      if (type === 'purchase') return 'success';
+      if (type === 'sales') return 'primary';
+      if (type === 'return') return 'warning';
+      if (type === 'relocation') return 'info';
+      return 'default';
+    },
+    getBizTypeLabel(type) {
+      const map = {
+        purchase: '采购',
+        sales: '销售',
+        return: '退货',
+        relocation: '调拨',
+        other: '其他'
+      };
+      return map[type] || type;
+    }
+  }
+};
+</script>
diff --git a/gear-ui3/src/views/wms/stockIo/move.vue b/gear-ui3/src/views/wms/stockIo/move.vue
new file mode 100644
index 0000000..e505064
--- /dev/null
+++ b/gear-ui3/src/views/wms/stockIo/move.vue
@@ -0,0 +1,13 @@
+<template>
+  <StockIoPage ioType="transfer" />
+</template>
+
+<script>
+  import StockIoPage from './panels/stockIoPage.vue';
+
+  export default {
+    components: {
+      StockIoPage
+    }
+  }
+</script>
\ No newline at end of file
diff --git a/gear-ui3/src/views/wms/stockIo/out.vue b/gear-ui3/src/views/wms/stockIo/out.vue
new file mode 100644
index 0000000..5ed9519
--- /dev/null
+++ b/gear-ui3/src/views/wms/stockIo/out.vue
@@ -0,0 +1,13 @@
+<template>
+  <StockIoPage ioType="out" />
+</template>
+
+<script>
+  import StockIoPage from './panels/stockIoPage.vue';
+
+  export default {
+    components: {
+      StockIoPage
+    }
+  }
+</script>
\ No newline at end of file
diff --git a/gear-ui3/src/views/wms/stockIo/panels/barcode.vue b/gear-ui3/src/views/wms/stockIo/panels/barcode.vue
new file mode 100644
index 0000000..5c7828a
--- /dev/null
+++ b/gear-ui3/src/views/wms/stockIo/panels/barcode.vue
@@ -0,0 +1,424 @@
+<template>
+  <div class="barcode-3col-layout">
+    <!-- 预览区 -->
+    <div class="barcode-preview-col">
+      <div class="iframe-wrapper">
+        <iframe ref="previewIframe" class="barcode-iframe" frameborder="0" :style="iframeStyle"></iframe>
+      </div>
+    </div>
+    <!-- 右侧控制+设置区 -->
+    <div class="barcode-right-col">
+      <!-- 控制区 -->
+      <div class="barcode-control-bar">
+        <el-tabs v-model="activeTab" stretch>
+          <el-tab-pane label="排版设置" name="layout" />
+          <el-tab-pane label="二维码明细" name="detail" />
+        </el-tabs>
+      </div>
+      <!-- 设置区 -->
+      <div class="barcode-settings-panel">
+        <el-form v-if="activeTab==='layout'" label-width="80px" size="small" label-position="top">
+          <!-- 排版设置内容保持不变 -->
+          <el-form-item label="每行数量">
+            <el-input-number :controls=false controls-position="right" v-model="perRow" size="mini" :min="1" :max="10" />
+          </el-form-item>
+          <el-form-item label="二维码尺寸">
+            <el-input-number :controls=false controls-position="right" v-model="barcodeWidth" size="mini" :min="60" :max="600" />
+          </el-form-item>
+          <el-form-item label="纸张尺寸">
+            <el-select v-model="paperSize" placeholder="请选择纸张尺寸" style="width: 160px">
+              <el-option label="A4 (210mm x 297mm)" value="A4" />
+              <el-option label="A5 (148mm x 210mm)" value="A5" />
+              <el-option label="A6 (105mm x 148mm)" value="A6" />
+              <el-option label="自定义" value="custom" />
+            </el-select>
+          </el-form-item>
+          <el-form-item v-if="paperSize==='custom'" label="自定义宽度(mm)">
+            <el-input-number :controls=false controls-position="right" v-model="customPaperWidth" size="mini" :min="50" :max="500" />
+          </el-form-item>
+          <el-form-item v-if="paperSize==='custom'" label="自定义高度(mm)">
+            <el-input-number :controls=false controls-position="right" v-model="customPaperHeight" size="mini" :min="50" :max="500" />
+          </el-form-item>
+          <el-form-item label="方向">
+            <el-radio-group v-model="paperOrientation">
+              <el-radio label="portrait">纵向</el-radio>
+              <el-radio label="landscape">横向</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="handlePrint">打印</el-button>
+          </el-form-item>
+        </el-form>
+        <el-form v-else label-width="80px" size="small" label-position="top">
+          <el-form-item label="二维码明细">
+            <div v-for="(cfg, idx) in barcodeConfigs" :key="idx" style="margin-bottom: 16px; border: 1px solid #eee; border-radius: 4px; padding: 12px 16px; background: #fafbfc;">
+              <div style="margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center;">
+                <span style="font-weight: bold; color: #666;">条码 {{ idx + 1 }}</span>
+                <el-button 
+                  type="text" 
+                  size="mini" 
+                  @click="saveAsImage(cfg.code, cfg.textTpl || cfg.code, idx)"
+                  icon="Download"
+                >
+                  另存为图片
+                </el-button>
+                <el-button 
+                  type="text" 
+                  size="mini" 
+                  @click="handleDelete(cfg, idx)"
+                  icon="Delete"
+                >
+                  删除
+                </el-button>
+              </div>
+              <el-form-item label="二维码内容" label-width="70px" style="margin-bottom: 8px;">
+                <el-input disabled type="textarea" v-model="cfg.code" size="mini" :autosize="{ minRows: 1, maxRows: 3 }" placeholder="请输入条码内容" />
+              </el-form-item>
+              <el-form-item label="生成数量" label-width="70px" style="margin-bottom: 8px;">
+                <el-input-number :controls=false controls-position="right" v-model.number="cfg.count" :min="1" :max="100" size="mini" />
+              </el-form-item>
+              <el-form-item label="下方文字" label-width="70px" style="margin-bottom: 0;">
+                <el-input type="textarea" v-model="cfg.textTpl" size="mini" placeholder="如 箱号" />
+              </el-form-item>
+            </div>
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import QRCode from 'qrcode';
+export default {
+  name: 'BarcodeGenerator',
+  props: {
+    barcodes: {
+      type: Array,
+      required: true
+    }
+  },
+  data() {
+    return {
+      perRow: 3,
+      barcodeWidth: 180,
+      barcodeHeight: 180, // 二维码建议宽高一致
+      barcodeConfigs: [], // [{code, count, textTpl}]
+      previewScale: 1, // 预览缩放比例
+      activeTab: 'layout',
+      paperSize: 'A4',
+      paperOrientation: 'portrait',
+      customPaperWidth: 210,
+      customPaperHeight: 297
+    };
+  },
+  computed: {
+    expandedBarcodes() {
+      let arr = [];
+      this.barcodeConfigs.forEach(cfg => {
+        for (let i = 0; i < (cfg.count || 1); i++) {
+          arr.push(cfg.code);
+        }
+      });
+      return arr;
+    },
+    expandedBarcodeTexts() {
+      let arr = [];
+      this.barcodeConfigs.forEach(cfg => {
+        for (let i = 0; i < (cfg.count || 1); i++) {
+          // 模板替换 {{n}}
+          let text = cfg.textTpl || cfg.code;
+          text = text.replace(/\{\{n\}\}/g, i + 1);
+          arr.push(text);
+        }
+      });
+      return arr;
+    },
+    expandedBarcodeTableData() {
+      return this.expandedBarcodes.map((code, idx) => ({ code, text: this.expandedBarcodeTexts[idx] }));
+    },
+    barcodeRows() {
+      const rows = [];
+      const arr = this.expandedBarcodes;
+      for (let i = 0; i < arr.length; i += this.perRow) {
+        rows.push(arr.slice(i, i + this.perRow));
+      }
+      return rows;
+    },
+    barcodeTextRows() {
+      const rows = [];
+      const arr = this.expandedBarcodeTexts;
+      for (let i = 0; i < arr.length; i += this.perRow) {
+        rows.push(arr.slice(i, i + this.perRow));
+      }
+      return rows;
+    },
+    iframeStyle() {
+      const { width, height } = this.getPaperPx();
+      return {
+        width: width + 'px',
+        minHeight: height + 'px',
+        height: height + 'px',
+        background: '#fff',
+        border: 'none',
+        display: 'block',
+        margin: 0,
+        padding: 0
+      };
+    }
+  },
+  watch: {
+    barcodes: {
+      handler(newVal) {
+        // 初始化barcodeConfigs
+        this.barcodeConfigs = newVal;
+        this.$nextTick(this.renderPreviewIframe);
+      },
+      immediate: true
+    },
+    barcodeConfigs: {
+      handler() { this.$nextTick(this.renderPreviewIframe); },
+      deep: true
+    },
+    perRow() { this.$nextTick(this.renderPreviewIframe); },
+    barcodeWidth() { this.$nextTick(this.renderPreviewIframe); },
+    barcodeHeight() { this.$nextTick(this.renderPreviewIframe); },
+    previewScale() { this.$nextTick(this.renderPreviewIframe); },
+    paperSize() { this.$nextTick(this.renderPreviewIframe); },
+    paperOrientation() { this.$nextTick(this.renderPreviewIframe); },
+    customPaperWidth() { this.$nextTick(this.renderPreviewIframe); },
+    customPaperHeight() { this.$nextTick(this.renderPreviewIframe); }
+  },
+  methods: {
+    getBarcodeId(row, col) {
+      return `barcode-canvas-${row}-${col}`;
+    },
+    getBarcodeText(row, col, code) {
+      if (
+        this.barcodeTextRows[row] &&
+        typeof this.barcodeTextRows[row][col] !== 'undefined' &&
+        this.barcodeTextRows[row][col] !== null &&
+        this.barcodeTextRows[row][col] !== ''
+      ) {
+        return this.barcodeTextRows[row][col];
+      }
+      return code;
+    },
+    handleDelete(cfg, idx) {
+      // this.barcodeConfigs.splice(idx, 1);
+      this.$emit('delete', cfg, idx);
+    },
+    getPaperPx() {
+      // mm to px, 1mm ≈ 3.78px
+      let width, height;
+      if (this.paperSize === 'A4') {
+        width = 210 * 3.78;
+        height = 297 * 3.78;
+      } else if (this.paperSize === 'A5') {
+        width = 148 * 3.78;
+        height = 210 * 3.78;
+      } else if (this.paperSize === 'A6') {
+        width = 105 * 3.78;
+        height = 148 * 3.78;
+      } else {
+        width = this.customPaperWidth * 3.78;
+        height = this.customPaperHeight * 3.78;
+      }
+      if (this.paperOrientation === 'landscape') {
+        return { width: height, height: width };
+      }
+      return { width, height };
+    },
+    getPrintHtml() {
+      const { width, height } = this.getPaperPx();
+      let html = `
+        <html>
+          <head>
+            <title>打印二维码</title>
+            <style>
+              body { margin: 0; padding: 0; background: #fff; }
+              .barcode-list { width: ${width}px; min-height: ${height}px; margin: 0 auto; background: #fff; }
+              .barcode-row { display: flex; margin-bottom: 24px; }
+              .barcode-item { flex: 1; text-align: center; }
+              .barcode-text { margin-top: 8px; font-size: 14px; }
+              html, body { overflow-x: hidden; }
+            </style>
+          </head>
+          <body>
+            <div class="barcode-list">
+      `;
+      this.barcodeRows.forEach((row, rowIndex) => {
+        html += '<div class="barcode-row">';
+        row.forEach((code, colIndex) => {
+          const id = this.getBarcodeId(rowIndex, colIndex);
+          const text = this.getBarcodeText(rowIndex, colIndex, code);
+          html += `<div class="barcode-item">
+            <canvas id="${id}" width="${this.barcodeWidth}" height="${this.barcodeHeight}"></canvas>
+            <div class="barcode-text">${text}</div>
+          </div>`;
+        });
+        html += '</div>';
+      });
+      html += '</div></body></html>';
+      return html;
+    },
+    async renderPreviewIframe() {
+      const iframe = this.$refs.previewIframe;
+      if (!iframe) return;
+      const doc = iframe.contentDocument || iframe.contentWindow.document;
+      doc.open();
+      doc.write(this.getPrintHtml());
+      doc.close();
+      // 渲染二维码
+      setTimeout(async () => {
+        for (let rowIndex = 0; rowIndex < this.barcodeRows.length; rowIndex++) {
+          const row = this.barcodeRows[rowIndex];
+          for (let colIndex = 0; colIndex < row.length; colIndex++) {
+            const code = row[colIndex];
+            const id = this.getBarcodeId(rowIndex, colIndex);
+            const el = doc.getElementById(id);
+            if (el) {
+              await QRCode.toCanvas(el, code, {
+                width: this.barcodeWidth,
+                height: this.barcodeHeight,
+                margin: 0
+              });
+            }
+          }
+        }
+      }, 50);
+    },
+    handlePrint() {
+      const iframe = this.$refs.previewIframe;
+      if (!iframe) return;
+      iframe.contentWindow.focus();
+      iframe.contentWindow.print();
+    },
+    /**
+     * 保存二维码为图片
+     * @param {string} code 二维码内容
+     * @param {string} text 下方文字
+     * @param {number} index 索引，用于生成文件名
+     */
+    async saveAsImage(code, text, index) {
+      try {
+        // 创建临时canvas用于绘制二维码和文字
+        const canvas = document.createElement('canvas');
+        const ctx = canvas.getContext('2d');
+        
+        // 计算总高度（二维码高度 + 文字区域高度）
+        const textHeight = 30; // 文字区域高度
+        canvas.width = this.barcodeWidth;
+        canvas.height = this.barcodeHeight + textHeight;
+        
+        // 绘制二维码
+        const qrCanvas = document.createElement('canvas');
+        qrCanvas.width = this.barcodeWidth;
+        qrCanvas.height = this.barcodeHeight;
+        await QRCode.toCanvas(qrCanvas, code, {
+          width: this.barcodeWidth,
+          height: this.barcodeHeight,
+          margin: 0
+        });
+        
+        // 将二维码绘制到主canvas
+        ctx.drawImage(qrCanvas, 0, 0);
+        
+        // 绘制文字
+        ctx.fillStyle = '#000';
+        ctx.font = '14px Arial';
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'top';
+        ctx.fillText(text, this.barcodeWidth / 2, this.barcodeHeight + 5);
+        
+        // 创建图片链接并下载
+        canvas.toBlob(blob => {
+          const url = URL.createObjectURL(blob);
+          const a = document.createElement('a');
+          a.href = url;
+          // 生成文件名（使用索引和内容摘要）
+          const fileName = `二维码_${index + 1}_${code.substring(0, 10)}.png`;
+          a.download = fileName;
+          document.body.appendChild(a);
+          a.click();
+          document.body.removeChild(a);
+          URL.revokeObjectURL(url);
+        });
+        
+        this.$message.success('图片保存成功');
+      } catch (error) {
+        console.error('保存图片失败:', error);
+        this.$message.error('保存图片失败，请重试');
+      }
+    }
+  },
+  mounted() {
+    this.barcodeConfigs = this.barcodes?.map(b => ({ code: b, count: 1, textTpl: b })) || [];
+    this.renderPreviewIframe();
+  }
+};
+</script>
+
+<style scoped>
+/* 样式保持不变 */
+.barcode-3col-layout {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  min-height: 400px;
+}
+.barcode-preview-col {
+  flex: 1 1 0;
+  min-width: 0;
+  background: #fff;
+  border-right: 1px solid #eee;
+  padding: 24px 0 24px 24px;
+  display: flex;
+  flex-direction: column;
+  height: 90vh;
+  overflow: auto;
+}
+.barcode-right-col {
+  width: 420px;
+  min-width: 320px;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  background: #fafbfc;
+  height: 90vh;
+}
+.barcode-control-bar {
+  border-bottom: 1px solid #eee;
+  background: #fafbfc;
+  padding: 0 16px;
+}
+.barcode-settings-panel {
+  flex: 1;
+  overflow: auto;
+  min-height: 0;
+  max-height: calc(90vh - 48px); /* 48px 约为tabs高度，可根据实际调整 */
+}
+.preview-toolbar {
+  margin-bottom: 12px;
+  display: flex;
+  align-items: center;
+}
+.iframe-wrapper {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  background: #f8f8f8;
+  overflow: auto;
+}
+.barcode-iframe {
+  /* width、height 由:style绑定动态控制 */
+  min-width: 0;
+  min-height: 0;
+  border: none;
+  background: #fff;
+  border-radius: 4px;
+  display: block;
+}
+</style>
\ No newline at end of file
diff --git a/gear-ui3/src/views/wms/stockIo/panels/detail.vue b/gear-ui3/src/views/wms/stockIo/panels/detail.vue
new file mode 100644
index 0000000..5ed7741
--- /dev/null
+++ b/gear-ui3/src/views/wms/stockIo/panels/detail.vue
@@ -0,0 +1,609 @@
+<template>
+  <div class="app-container">
+    <template v-if="stockIo && stockIo.stockIoId">
+      <!-- 主表信息 -->
+      <el-descriptions :title="'单号：' + (stockIo.stockIoCode || '-')" :column="2" border>
+        <el-descriptions-item label="类型">
+          <dict-tag :options="stock_io_type" :value="stockIo.ioType"></dict-tag>
+        </el-descriptions-item>
+        <el-descriptions-item label="业务类型">
+          <dict-tag :options="stock_biz_type" :value="stockIo.bizType"></dict-tag>
+        </el-descriptions-item>
+        <el-descriptions-item label="状态">
+          <el-tag :type="stockIo.status === 2 ? 'success' : (stockIo.status === 1 ? 'warning' : 'info')">
+            {{ stockIo.status === 2 ? '已完成' : (stockIo.status === 0 ? '草稿' : '待审核') }}
+          </el-tag>
+        </el-descriptions-item>
+        <el-descriptions-item label="备注">{{ stockIo.remark }}</el-descriptions-item>
+      </el-descriptions>
+      <br />
+      <!-- 明细表格 -->
+      <!-- <el-tabs v-model="activeTab" style="margin-bottom: 10px;"> -->
+        <!-- <el-tab-pane label="扫码枪" name="scanner">
+          <el-table :data="scannerList" :show-header="true" :border="true" style="width: 100%;" :default-sort="{}" :highlight-current-row="true">
+            <el-table-column type="index" width="55" align="center" label="#" />
+            <el-table-column label="库区/库位" align="center" prop="warehouseName" />
+            <el-table-column v-if="stockIo.ioType === 'transfer'" label="源库区/库位" align="center" prop="fromWarehouseName" />
+            <el-table-column label="物品类型" align="center" prop="itemType">
+              <template #default="scope">
+                <dict-tag :options="stock_item_type" :value="scope.row.itemType" />
+              </template>
+            </el-table-column>
+            <el-table-column label="物品信息" align="center" prop="itemId">
+              <template #default="scope">
+                <product-info v-if="scope.row.itemType === ITEM_TYPE.PRODUCT" :product-id="scope.row.itemId" />
+                <span v-else>{{ scope.row.itemId }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="数量" align="center" prop="quantity" />
+            <el-table-column label="单位" align="center" prop="unit" />
+            <el-table-column label="批次号" align="center" prop="batchNo" />
+            <el-table-column label="备注" align="center" prop="remark" />
+            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+              <template #default="scope">
+                <el-button
+                  size="mini"
+                  type="text"
+                  icon="Edit"
+                  @click="handleUpdate(scope.row)"
+                  :disabled="stockIo.status >= 2"
+                >修改</el-button>
+                <el-button
+                  size="mini"
+                  type="text"
+                  icon="Delete"
+                  @click="handleDelete(scope.row)"
+                  :disabled="stockIo.status >= 2"
+                >删除</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-tab-pane> -->
+        <!-- <el-tab-pane label="手动录入" name="manual"> -->
+          <el-row :gutter="10" class="mb8">
+            <el-col :span="1.5">
+              <el-button
+                type="primary"
+                plain
+                icon="Plus"
+                size="mini"
+                @click="handleAdd"
+                :disabled="stockIo.status >= 2"
+              >新增</el-button>
+            </el-col>
+            <el-col :span="1.5">
+              <el-button
+                type="success"
+                plain
+                icon="Edit"
+                size="mini"
+                :disabled="single || stockIo.status >= 2"
+                @click="handleUpdate"
+              >修改</el-button>
+            </el-col>
+            <el-col :span="1.5">
+              <el-button
+                type="danger"
+                plain
+                icon="Delete"
+                size="mini"
+                :disabled="multiple || stockIo.status >= 2"
+                @click="handleDelete"
+              >删除</el-button>
+            </el-col>
+            <el-col :span="1.5">
+              <el-button
+                type="warning"
+                plain
+                icon="Download"
+                size="mini"
+                @click="handleExport"
+              >导出</el-button>
+            </el-col>
+            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+          </el-row>
+          <el-table v-loading="loading" :data="manualList" @selection-change="handleSelectionChange">
+            <el-table-column type="selection" width="55" align="center" />
+            <el-table-column label="库区/库位" align="center" prop="warehouseName" />
+            <el-table-column
+              v-if="stockIo.ioType === 'transfer'"
+              label="源库区/库位"
+              align="center"
+              prop="fromWarehouseName"
+            />
+            <el-table-column label="物品类型" align="center" prop="itemType">
+              <template #default="scope">
+                <dict-tag :options="stock_item_type" :value="scope.row.itemType" />
+              </template>
+            </el-table-column>
+            <el-table-column label="物品信息" align="center" prop="itemId">
+              <template #default="scope">
+                <product-info v-if="scope.row.itemType === ITEM_TYPE.PRODUCT" :product-id="scope.row.itemId" />
+                <span v-else>{{ scope.row.itemId }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="BOM" align="center">
+              <template #default="scope">
+                <BomInfoMini :item-type="scope.row.itemType" :item-id="scope.row.itemId" />
+              </template>
+            </el-table-column>
+            <el-table-column label="数量" align="center" prop="quantity" />
+            <el-table-column label="单位" align="center" prop="unit" />
+            <el-table-column label="批次号" align="center" prop="batchNo" />
+            <el-table-column label="备注" align="center" prop="remark" />
+            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+              <template #default="scope">
+                <el-button
+                  size="mini"
+                  type="text"
+                  icon="Edit"
+                  @click="handleUpdate(scope.row)"
+                  :disabled="stockIo.status >= 2"
+                >修改</el-button>
+                <el-button
+                  size="mini"
+                  type="text"
+                  icon="Delete"
+                  @click="handleDelete(scope.row)"
+                  :disabled="stockIo.status >= 2"
+                >删除</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        <!-- </el-tab-pane> -->
+
+      <!-- </el-tabs> -->
+      <pagination
+        v-show="total>0"
+        :total="total"
+        :page.sync="queryParams.pageNum"
+        :limit.sync="queryParams.pageSize"
+        @pagination="getList"
+      />
+      <!-- 操作按钮 -->
+      <div style="margin-top: 20px; text-align: right;">
+        <!-- 状态修改按钮 -->
+        <el-button
+          v-if="stockIo.status === 0"
+          type="warning"
+          :loading="statusLoading"
+          @click="handleUpdateStatus"
+        >{{ getStatusButtonText() }}</el-button>
+
+        <!-- 审核按钮 -->
+        <el-button
+          v-if="stockIo.status === 1"
+          type="primary"
+          :loading="auditLoading"
+          @click="handleAudit"
+        >{{ getAuditButtonText() }}</el-button>
+
+        <!-- 撤回按钮 -->
+        <el-button
+          v-if="stockIo.status === 2 && stockIo.ioType !== 'withdraw'"
+          type="warning"
+          :loading="cancelLoading"
+          @click="handleCancel"
+        >撤回</el-button>
+      </div>
+      <!-- 明细编辑弹窗 -->
+      <el-dialog :title="title" v-model="open" width="500px" append-to-body>
+        <el-form ref="form" :model="form" :rules="rules" label-width="120px">
+          <el-form-item label="出入库单ID" prop="stockIoId">
+            <el-input v-model="form.stockIoId" placeholder="请输入出入库单ID" :disabled="true" />
+          </el-form-item>
+          <el-form-item label="库区/库位" prop="warehouseId">
+            <warehouse-select v-model="form.warehouseId" placeholder="请选择库区/库位" />
+          </el-form-item>
+          <el-form-item
+            v-if="stockIo.ioType === 'transfer'"
+            label="源库区/库位"
+            prop="fromWarehouseId"
+          >
+            <warehouse-select v-model="form.fromWarehouseId" placeholder="请选择源库区/库位" />
+          </el-form-item>
+
+          <el-form-item label="产品信息" prop="itemId">
+            <product-select v-model="form.itemId" placeholder="请选择产品" />
+          </el-form-item>
+
+          <!-- <MaterialSelect :itemType.sync="form.itemType" :itemId.sync="form.itemId" @change="onItemChange" /> -->
+          <el-form-item label="数量" prop="quantity">
+            <el-input v-model="form.quantity" placeholder="请输入数量" />
+          </el-form-item>
+          <!-- <el-form-item label="单位" prop="unit">
+            <el-input v-model="form.unit" placeholder="请输入单位" :disabled="unitDisabled" />
+          </el-form-item> -->
+          <el-form-item label="批次号" prop="batchNo">
+            <el-input v-model="form.batchNo" placeholder="请输入批次号" />
+          </el-form-item>
+          <el-form-item label="备注" prop="remark">
+            <el-input v-model="form.remark" placeholder="请输入备注" />
+          </el-form-item>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </el-dialog>
+    </template>
+    <template v-else>
+      <div style="height:200px;text-align:center;line-height:200px;">未获取到主表数据</div>
+    </template>
+  </div>
+</template>
+
+<script>
+import { listStockIoDetail, getStockIoDetail, delStockIoDetail, addStockIoDetail, updateStockIoDetail } from "@/api/wms/stockIoDetail";
+import { auditStockIo, updateStockIoStatus, cancelStockIo, getStockIo, returnStock } from "@/api/wms/stockIo";
+import WarehouseSelect from '@/components/WarehouseSelect';
+import ProductSelect from '@/components/ProductSelect';
+import { ITEM_TYPE } from '@/utils/enums';
+import ProductInfo from "@/components/Renderer/ProductInfo.vue";
+import BomInfoMini from '@/components/Renderer/BomInfoMini.vue';
+
+export default {
+  name: "StockIoDetailPanel",
+  components: {
+    WarehouseSelect,
+    ProductSelect,
+    ProductInfo,
+    BomInfoMini,
+  },
+  setup() {
+    const { proxy } = getCurrentInstance();
+    const { stock_item_type, stock_biz_type, stock_io_type } = proxy.useDict('stock_item_type', 'stock_biz_type', 'stock_io_type');
+    return {
+      stock_item_type,
+      stock_biz_type,
+      stock_io_type,
+    };
+  },
+  props: {
+    stockIo: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      ITEM_TYPE,
+      loading: true,
+      stockIoDetailList: [],
+      total: 0,
+      queryParams: {
+        pageNum: 1,
+        pageSize: 20,
+        stockIoId: undefined
+      },
+      auditLoading: false,
+      open: false,
+      title: '',
+      form: {},
+      buttonLoading: false,
+      rules: {
+        warehouseId: [
+          { required: true, message: "库区/库位不能为空", trigger: "blur" }
+        ],
+        itemType: [
+          { required: true, message: "物品类型不能为空", trigger: "blur" }
+        ],
+        itemId: [
+          { required: true, message: "物品ID不能为空", trigger: "blur" }
+        ],
+        quantity: [
+          { required: true, message: "数量不能为空", trigger: "blur" }
+        ],
+        // unit: [
+        //   { required: true, message: "单位不能为空", trigger: "blur" }
+        // ]
+      },
+      ids: [],
+      single: true,
+      multiple: true,
+      statusLoading: false, // 新增状态修改按钮加载状态
+      cancelLoading: false, // 撤回按钮加载状态
+      unitDisabled: false, // 新增：单位输入框是否禁用
+      activeTab: 'scanner' // 新增：当前激活的标签页
+    };
+  },
+  watch: {
+    'stockIo.stockIoId': {
+      handler(val) {
+        if (val) {
+          this.queryParams.stockIoId = val;
+          this.getList();
+        }
+      },
+      immediate: true
+    }
+  },
+  computed: {
+    // 手动录入的列表,使用recordType区分为0
+    manualList() {
+      return this.stockIoDetailList.filter(item => item.recordType === 0);
+    },
+    // 来自扫码枪的列表，为1
+    scannerList() {
+      return this.stockIoDetailList.filter(item => item.recordType === 1);
+    }
+  },
+  mounted() {
+    if (this.stockIo && this.stockIo.stockIoId) {
+      this.queryParams.stockIoId = this.stockIo.stockIoId;
+      this.getList();
+    }
+  },
+  methods: {
+    getList() {
+      if (!this.queryParams.stockIoId) return;
+      this.loading = true;
+      listStockIoDetail(this.queryParams).then(response => {
+        this.stockIoDetailList = response.rows;
+        this.total = response.total;
+      }).finally(() => {
+        this.loading = false;
+      });
+    },
+    handleAudit() {
+      // 检查是否有明细数据
+      if (!this.stockIoDetailList || this.stockIoDetailList.length === 0) {
+        this.$modal.msgError('请先添加明细数据');
+        return;
+      }
+
+      // 确认审核
+      this.$modal.confirm('确认要审核此出入库单吗？审核后将影响库存数据。').then(() => {
+        this.auditLoading = true;
+        // 如果是退库单，则需要先审核出库单
+        if (this.stockIo.ioType === 'withdraw') {
+          returnStock(this.stockIo).then(response => {
+            this.$modal.msgSuccess('审核成功');
+            this.stockIo.status = 2;
+            // 刷新明细列表
+            this.getList();
+            // 通知父组件状态已更新
+            this.$emit('status-changed', this.stockIo);
+          }).finally(() => {
+            this.auditLoading = false;
+          })
+          return;
+        }
+        auditStockIo(this.stockIo.stockIoId).then(response => {
+          this.$modal.msgSuccess('审核成功');
+          // 更新主表状态
+          this.stockIo.status = 2;
+          // 刷新明细列表
+          this.getList();
+          // 通知父组件状态已更新
+          this.$emit('status-changed', this.stockIo);
+        }).catch(error => {
+          console.error('审核失败:', error);
+          this.$modal.msgError('审核失败：' + (error.message || '未知错误'));
+        }).finally(() => {
+          this.auditLoading = false;
+        });
+      }).catch(() => {
+        // 用户取消审核
+      });
+    },
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.detailId)
+      this.single = selection.length!==1
+      this.multiple = !selection.length
+    },
+    handleAdd() {
+      this.reset();
+      this.form.stockIoId = this.stockIo.stockIoId;
+      this.form.recordType = 0; // 新增时设为手动录入
+      this.open = true;
+      this.title = "添加出入库单明细";
+    },
+    handleUpdate(row) {
+      this.loading = true;
+      this.reset();
+      const detailId = row.detailId || this.ids
+      getStockIoDetail(detailId).then(response => {
+        this.loading = false;
+        this.form = response.data;
+        this.form.recordType = 0; // 修改时强制设为手动录入
+        this.open = true;
+        this.title = "修改出入库单明细";
+      });
+    },
+    submitForm() {
+      // 动态添加源库位验证规则
+      // if (this.stockIo.ioType === 'transfer') {
+      //   this.$set(this.rules, 'fromWarehouseId', [
+      //     { required: true, message: "源库区/库位不能为空", trigger: "blur" }
+      //   ]);
+      // }
+
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          this.buttonLoading = true;
+          if (this.form.detailId != null) {
+            updateStockIoDetail(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            }).finally(() => {
+              this.buttonLoading = false;
+            });
+          } else {
+            addStockIoDetail(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+              this.stockIo.status = 1;
+              // 新增明细后刷新主表状态
+              this.refreshStockIoStatus();
+            }).finally(() => {
+              this.buttonLoading = false;
+            });
+          }
+        }
+      });
+    },
+    handleDelete(row) {
+      const detailIds = row.detailId || this.ids;
+      this.$modal.confirm('是否确认删除出入库单明细编号为"' + detailIds + '"的数据项？').then(() => {
+        this.loading = true;
+        return delStockIoDetail(detailIds);
+      }).then(() => {
+        this.loading = false;
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+        // 删除明细后刷新主表状态
+        this.refreshStockIoStatus();
+      }).catch(() => {
+      }).finally(() => {
+        this.loading = false;
+      });
+    },
+    reset() {
+      this.form = {
+        detailId: undefined,
+        stockIoId: undefined,
+        warehouseId: undefined,
+        fromWarehouseId: undefined,
+        itemType: 'product',
+        itemId: undefined,
+        quantity: undefined,
+        // unit: undefined,
+        batchNo: '',
+        remark: undefined
+      };
+      this.unitDisabled = false; // 新增：重置单位输入框为可编辑
+      this.resetForm("form");
+    },
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    handleExport() {
+      this.download('wms/stockIoDetail/export', {
+        ...this.queryParams
+      }, `stockIoDetail_${new Date().getTime()}.xlsx`)
+    },
+    getAuditButtonText() {
+      if (this.stockIo.ioType === 'in') {
+        return '审核入库';
+      } else if (this.stockIo.ioType === 'out') {
+        return '审核出库';
+      } else if (this.stockIo.ioType === 'transfer') {
+        return '审核移库';
+      } else {
+        return '审核';
+      }
+    },
+    getStatusButtonText() {
+      if (this.stockIo.ioType === 'in') {
+        return '提交入库';
+      } else if (this.stockIo.ioType === 'out') {
+        return '提交出库';
+      } else if (this.stockIo.ioType === 'transfer') {
+        return '提交移库';
+      } else {
+        return '提交';
+      }
+    },
+    handleUpdateStatus() {
+      // 检查是否有明细数据
+      if (!this.stockIoDetailList || this.stockIoDetailList.length === 0) {
+        this.$modal.msgError('请先添加明细数据');
+        return;
+      }
+
+      this.$modal.confirm('确认要提交此出入库单吗？提交后将无法修改明细。').then(() => {
+        this.statusLoading = true;
+        updateStockIoStatus(this.stockIo.stockIoId, 1).then(response => {
+          this.$modal.msgSuccess('状态更新成功');
+          // 更新主表状态
+          this.stockIo.status = 1;
+          // 通知父组件状态已更新
+          this.$emit('status-changed', this.stockIo);
+        }).catch(error => {
+          console.error('状态更新失败:', error);
+          this.$modal.msgError('状态更新失败：' + (error.message || '未知错误'));
+        }).finally(() => {
+          this.statusLoading = false;
+        });
+      }).catch(() => {
+        // 用户取消状态更新
+      });
+    },
+    handleCancel() {
+      this.$modal.confirm('确认要撤回此出入库单吗？撤回后将回滚库存数据。').then(() => {
+        this.cancelLoading = true;
+        cancelStockIo(this.stockIo.stockIoId).then(response => {
+          this.$modal.msgSuccess('撤回成功');
+          // 更新主表状态
+          this.stockIo.status = 1;
+          // 刷新明细列表
+          this.getList();
+          // 通知父组件状态已更新
+          this.$emit('status-changed', this.stockIo);
+        }).catch(error => {
+          console.error('撤回失败:', error);
+          this.$modal.msgError('撤回失败：' + (error.message || '未知错误'));
+        }).finally(() => {
+          this.cancelLoading = false;
+        });
+      }).catch(() => {
+        // 用户取消撤回
+      });
+    },
+    refreshStockIoStatus() {
+      // 刷新主表状态
+      if (this.stockIo && this.stockIo.stockIoId) {
+        getStockIo(this.stockIo.stockIoId).then(response => {
+          const updatedStockIo = response.data;
+          // 更新主表状态
+          this.stockIo.status = updatedStockIo.status;
+          // 通知父组件状态已更新
+          this.$emit('status-changed', this.stockIo);
+        }).catch(error => {
+          console.error('刷新主表状态失败:', error);
+        });
+      }
+    },
+    getIoTypeTagType(type) {
+      if (type === 'in') return 'success';
+      if (type === 'out') return 'primary';
+      if (type === 'transfer') return 'warning';
+      return '';
+    },
+    getIoTypeLabel(type) {
+      if (type === 'in') return '入库';
+      if (type === 'out') return '出库';
+      if (type === 'transfer') return '移库';
+      return type;
+    },
+    getBizTypeLabel(type) {
+      const map = {
+        purchase: '采购',
+        sales: '销售',
+        return: '退货',
+        relocation: '调拨',
+        other: '其他'
+      };
+      return map[type] || type;
+    },
+    getBizTypeTagType(type) {
+      if (type === 'purchase') return 'success';
+      if (type === 'sales') return 'primary';
+      if (type === 'return') return 'warning';
+      if (type === 'relocation') return 'info';
+      return 'default';
+    },
+    // onItemChange(e) {
+    //   if (e && e.unit) {
+    //     this.form.unit = e.unit;
+    //     this.unitDisabled = true;
+    //   }
+    // }
+  }
+}
+</script>
+
diff --git a/gear-ui3/src/views/wms/stockIo/panels/returnCreate.vue b/gear-ui3/src/views/wms/stockIo/panels/returnCreate.vue
new file mode 100644
index 0000000..9a40518
--- /dev/null
+++ b/gear-ui3/src/views/wms/stockIo/panels/returnCreate.vue
@@ -0,0 +1,435 @@
+<template>
+  <div class="app-container">
+    <template v-if="stockIo && stockIo.stockIoId">
+      <el-row>
+        <el-form :model="returnForm" :rules="rules" inline label-width="120px">
+          <el-form-item label="出库单单号">
+            <el-input :value="stockIo.stockIoCode" disabled placeholder="请输入父单号" />
+          </el-form-item>
+          <el-form-item label="出库单ID" prop="parentId">
+            <el-input v-model="returnForm.parentId" disabled placeholder="请输入父单号" />
+          </el-form-item>
+          <el-form-item label="退库单号" prop="stockIoCode">
+            <el-input v-model="returnForm.stockIoCode" placeholder="请输入出入库单号" />
+          </el-form-item>
+
+          <el-form-item label="业务类型" prop="bizType">
+            <el-select v-model="returnForm.bizType" placeholder="请选择业务类型">
+              <el-option v-for="dict in stock_biz_type" :key="dict.value" :label="dict.label"
+                :value="dict.value"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="备注" prop="remark">
+            <el-input type="textarea" v-model="returnForm.remark" placeholder="请输入备注" />
+          </el-form-item>
+        </el-form>
+      </el-row>
+      <el-table v-loading="loading" :data="manualList">
+        <el-table-column label="库区/库位" align="center" prop="warehouseName" />
+        <el-table-column v-if="stockIo.ioType === 'transfer'" label="源库区/库位" align="center" prop="fromWarehouseName" />
+        <el-table-column label="物品类型" align="center" prop="itemType">
+          <template #default="scope">
+            <dict-tag :options="stock_item_type" :value="scope.row.itemType" />
+          </template>
+        </el-table-column>
+        <el-table-column label="物品信息" align="center" prop="itemId">
+          <template #default="scope">
+            <product-info v-if="scope.row.itemType === ITEM_TYPE.PRODUCT" :product-id="scope.row.itemId" />
+            <span v-else>{{ scope.row.itemId }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="BOM" align="center">
+          <template #default="scope">
+            <BomInfoMini :item-type="scope.row.itemType" :item-id="scope.row.itemId" />
+          </template>
+        </el-table-column>
+
+        <el-table-column label="单位" align="center" prop="unit" />
+        <el-table-column label="批次号" align="center" prop="batchNo" />
+        <el-table-column label="备注" align="center" prop="remark" />
+        <el-table-column width="55" label="开关">
+          <template #default="scope">
+            <el-switch v-model="scope.row.switchInput" />
+          </template>
+        </el-table-column>
+        <el-table-column label="数量" width="180" align="center" prop="quantity">
+          <template #default="scope">
+            <el-input-number :controls=false controls-position="right" style="width: 160px;" v-model="scope.row.count" :max="scope.row.quantity"
+              placeholder="请输入数量" @input="handleQuantityInput(scope.row)" />
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
+        @pagination="getList" />
+      <!-- 操作按钮 -->
+      <div style="margin-top: 20px; text-align: right;">
+        <el-button type="primary" @click="submitForm">提交</el-button>
+      </div>
+    </template>
+    <template v-else>
+      <div style="height:200px;text-align:center;line-height:200px;">未获取到主表数据</div>
+    </template>
+  </div>
+</template>
+
+<script>
+import { listStockIoDetail, getStockIoDetail, delStockIoDetail, addStockIoDetail, updateStockIoDetail } from "@/api/wms/stockIoDetail";
+import { auditStockIo, updateStockIoStatus, cancelStockIo, getStockIo, addStockIoWithDetail } from "@/api/wms/stockIo";
+import WarehouseSelect from '@/components/WarehouseSelect';
+import ProductSelect from '@/components/ProductSelect';
+import { ITEM_TYPE } from '@/utils/enums';
+import ProductInfo from "@/components/Renderer/ProductInfo.vue";
+import BomInfoMini from '@/components/Renderer/BomInfoMini.vue';
+
+export default {
+  name: "returnCreatePanel",
+  components: {
+    WarehouseSelect,  
+    ProductSelect,
+    ProductInfo,
+    BomInfoMini,
+  },
+  setup() {
+    const { proxy } = getCurrentInstance();
+    const { stock_item_type, stock_biz_type } = proxy.useDict('stock_item_type', 'stock_biz_type');
+    return {
+      stock_item_type,
+      stock_biz_type,
+    };
+  },
+  props: {
+    stockIo: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      ITEM_TYPE,
+      loading: true,
+      stockIoDetailList: [],
+      total: 0,
+      queryParams: {
+        pageNum: 1,
+        pageSize: 20,
+        stockIoId: undefined
+      },
+      returnForm: {
+
+      },
+      auditLoading: false,
+      open: false,
+      title: '',
+      form: {},
+      buttonLoading: false,
+      rules: {
+        warehouseId: [
+          { required: true, message: "库区/库位不能为空", trigger: "blur" }
+        ],
+        itemType: [
+          { required: true, message: "物品类型不能为空", trigger: "blur" }
+        ],
+        itemId: [
+          { required: true, message: "物品ID不能为空", trigger: "blur" }
+        ],
+        quantity: [
+          { required: true, message: "数量不能为空", trigger: "blur" }
+        ],
+        unit: [
+          { required: true, message: "单位不能为空", trigger: "blur" }
+        ]
+      },
+    };
+  },
+  watch: {
+    'stockIo.stockIoId': {
+      handler(val) {
+        if (val) {
+          this.queryParams.stockIoId = val;
+          this.returnForm.parentId = val;
+          this.getList();
+        }
+      },
+      immediate: true
+    }
+  },
+  computed: {
+    manualList() {
+      return this.stockIoDetailList.filter(item => item.recordType === 0);
+    }
+  },
+  mounted() {
+    if (this.stockIo && this.stockIo.stockIoId) {
+      this.queryParams.stockIoId = this.stockIo.stockIoId;
+      this.getList();
+    }
+  },
+  methods: {
+    getList() {
+      if (!this.queryParams.stockIoId) return;
+      this.loading = true;
+      listStockIoDetail(this.queryParams).then(response => {
+        this.stockIoDetailList = response.rows.map(item => {
+          return {
+            ...item,
+            count: item.quantity,
+            switchInput: true
+          }
+        });
+        this.total = response.total;
+      }).finally(() => {
+        this.loading = false;
+      });
+    },
+    handleAudit() {
+      // 检查是否有明细数据
+      if (!this.stockIoDetailList || this.stockIoDetailList.length === 0) {
+        this.$modal.msgError('请先添加明细数据');
+        return;
+      }
+
+      // 确认审核
+      this.$modal.confirm('确认要审核此出入库单吗？审核后将影响库存数据。').then(() => {
+        this.auditLoading = true;
+        auditStockIo(this.stockIo.stockIoId).then(response => {
+          this.$modal.msgSuccess('审核成功');
+          // 更新主表状态
+          this.$set(this.stockIo, 'status', 2);
+          // 刷新明细列表
+          this.getList();
+          // 通知父组件状态已更新
+          this.$emit('status-changed', this.stockIo);
+        }).catch(error => {
+          console.error('审核失败:', error);
+          this.$modal.msgError('审核失败：' + (error.message || '未知错误'));
+        }).finally(() => {
+          this.auditLoading = false;
+        });
+      }).catch(() => {
+        // 用户取消审核
+      });
+    },
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.detailId)
+      this.single = selection.length !== 1
+      this.multiple = !selection.length
+    },
+    handleQuantityInput(row) {
+      row.count = Math.min(row.count, row.quantity);
+    },
+    handleAdd() {
+      this.reset();
+      this.form.stockIoId = this.stockIo.stockIoId;
+      this.form.recordType = 0; // 新增时设为手动录入
+      this.open = true;
+      this.title = "添加出入库单明细";
+    },
+    handleUpdate(row) {
+      this.loading = true;
+      this.reset();
+      const detailId = row.detailId || this.ids
+      getStockIoDetail(detailId).then(response => {
+        this.loading = false;
+        this.form = response.data;
+        this.form.recordType = 0; // 修改时强制设为手动录入
+        this.open = true;
+        this.title = "修改出入库单明细";
+      });
+    },
+    submitForm() {
+      // 手动校验
+      if (!this.returnForm.stockIoCode) {
+        this.$modal.msgError("请输入退库单号");
+        return;
+      }
+      if (!this.returnForm.bizType) {
+        this.$modal.msgError("请选择业务类型");
+        return;
+      }
+      if (!this.manualList.filter(el => el.switchInput).length) {
+        this.$modal.msgError("请至少选择一个明细");
+        return;
+      }
+      const payload = {
+        stockIoCode: this.returnForm.stockIoCode,
+        bizType: this.returnForm.bizType,
+        remark: this.returnForm.remark,
+        ioType: 'withdraw',
+        parentId: this.returnForm.parentId,
+        details: this.manualList.filter(el => el.switchInput).map(el => {
+          const { detailId, stockIoId, switchInput, ...rest } = el;
+          return {
+            ...rest,
+            quantity: el.count,
+            recordType: 0
+          }
+        })
+      };
+      addStockIoWithDetail(payload).then(response => {
+        this.$modal.msgSuccess("提交成功");
+        this.$emit('finish', this.stockIo);
+      }).catch(error => {
+        this.$modal.msgError("提交失败：" + (error.message || "未知错误"));
+      });
+    },
+    handleDelete(row) {
+      const detailIds = row.detailId || this.ids;
+      this.$modal.confirm('是否确认删除出入库单明细编号为"' + detailIds + '"的数据项？').then(() => {
+        this.loading = true;
+        return delStockIoDetail(detailIds);
+      }).then(() => {
+        this.loading = false;
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+        // 删除明细后刷新主表状态
+        this.refreshStockIoStatus();
+      }).catch(() => {
+      }).finally(() => {
+        this.loading = false;
+      });
+    },
+    reset() {
+      this.form = {
+        detailId: undefined,
+        stockIoId: undefined,
+        warehouseId: undefined,
+        fromWarehouseId: undefined,
+        itemType: undefined,
+        itemId: undefined,
+        quantity: undefined,
+        unit: undefined,
+        batchNo: undefined,
+        remark: undefined
+      };
+      this.unitDisabled = false; // 新增：重置单位输入框为可编辑
+      this.resetForm("form");
+    },
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    handleExport() {
+      this.download('wms/stockIoDetail/export', {
+        ...this.queryParams
+      }, `stockIoDetail_${new Date().getTime()}.xlsx`)
+    },
+    getAuditButtonText() {
+      if (this.stockIo.ioType === 'in') {
+        return '审核入库';
+      } else if (this.stockIo.ioType === 'out') {
+        return '审核出库';
+      } else if (this.stockIo.ioType === 'transfer') {
+        return '审核移库';
+      } else {
+        return '审核';
+      }
+    },
+    getStatusButtonText() {
+      if (this.stockIo.ioType === 'in') {
+        return '提交入库';
+      } else if (this.stockIo.ioType === 'out') {
+        return '提交出库';
+      } else if (this.stockIo.ioType === 'transfer') {
+        return '提交移库';
+      } else {
+        return '提交';
+      }
+    },
+    handleUpdateStatus() {
+      // 检查是否有明细数据
+      if (!this.stockIoDetailList || this.stockIoDetailList.length === 0) {
+        this.$modal.msgError('请先添加明细数据');
+        return;
+      }
+
+      this.$modal.confirm('确认要提交此出入库单吗？提交后将无法修改明细。').then(() => {
+        this.statusLoading = true;
+        updateStockIoStatus(this.stockIo.stockIoId, 1).then(response => {
+          this.$modal.msgSuccess('状态更新成功');
+          // 更新主表状态
+          this.$set(this.stockIo, 'status', 1);
+          // 通知父组件状态已更新
+          this.$emit('status-changed', this.stockIo);
+        }).catch(error => {
+          console.error('状态更新失败:', error);
+          this.$modal.msgError('状态更新失败：' + (error.message || '未知错误'));
+        }).finally(() => {
+          this.statusLoading = false;
+        });
+      }).catch(() => {
+        // 用户取消状态更新
+      });
+    },
+    handleCancel() {
+      this.$modal.confirm('确认要撤回此出入库单吗？撤回后将回滚库存数据。').then(() => {
+        this.cancelLoading = true;
+        cancelStockIo(this.stockIo.stockIoId).then(response => {
+          this.$modal.msgSuccess('撤回成功');
+          // 更新主表状态
+          this.$set(this.stockIo, 'status', 1);
+          // 刷新明细列表
+          this.getList();
+          // 通知父组件状态已更新
+          this.$emit('status-changed', this.stockIo);
+        }).catch(error => {
+          console.error('撤回失败:', error);
+          this.$modal.msgError('撤回失败：' + (error.message || '未知错误'));
+        }).finally(() => {
+          this.cancelLoading = false;
+        });
+      }).catch(() => {
+        // 用户取消撤回
+      });
+    },
+    refreshStockIoStatus() {
+      // 刷新主表状态
+      if (this.stockIo && this.stockIo.stockIoId) {
+        getStockIo(this.stockIo.stockIoId).then(response => {
+          const updatedStockIo = response.data;
+          // 更新主表状态
+          this.$set(this.stockIo, 'status', updatedStockIo.status);
+          // 通知父组件状态已更新
+          this.$emit('status-changed', this.stockIo);
+        }).catch(error => {
+          console.error('刷新主表状态失败:', error);
+        });
+      }
+    },
+    getIoTypeTagType(type) {
+      if (type === 'in') return 'success';
+      if (type === 'out') return 'primary';
+      if (type === 'transfer') return 'warning';
+      return '';
+    },
+    getIoTypeLabel(type) {
+      if (type === 'in') return '入库';
+      if (type === 'out') return '出库';
+      if (type === 'transfer') return '移库';
+      return type;
+    },
+    getBizTypeLabel(type) {
+      const map = {
+        purchase: '采购',
+        sales: '销售',
+        return: '退货',
+        relocation: '调拨',
+        other: '其他'
+      };
+      return map[type] || type;
+    },
+    getBizTypeTagType(type) {
+      if (type === 'purchase') return 'success';
+      if (type === 'sales') return 'primary';
+      if (type === 'return') return 'warning';
+      if (type === 'relocation') return 'info';
+      return 'default';
+    },
+    onItemChange(e) {
+      if (e && e.unit) {
+        this.form.unit = e.unit;
+        this.unitDisabled = true;
+      }
+    }
+  }
+}
+</script>
diff --git a/gear-ui3/src/views/wms/stockIo/panels/stockIoPage.vue b/gear-ui3/src/views/wms/stockIo/panels/stockIoPage.vue
new file mode 100644
index 0000000..2c4c6cc
--- /dev/null
+++ b/gear-ui3/src/views/wms/stockIo/panels/stockIoPage.vue
@@ -0,0 +1,373 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="单号" prop="stockIoCode">
+        <el-input v-model="queryParams.stockIoCode" placeholder="请输入出入库单号" clearable
+          @keyup.enter.native="handleQuery" />
+      </el-form-item>
+      <el-form-item label="业务类型" prop="bizType">
+        <el-select style="width: 100px;" v-model="queryParams.bizType" placeholder="请选择业务类型" clearable>
+          <el-option v-for="dict in stock_biz_type" :key="dict.value" :label="dict.label"
+            :value="dict.value" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="单据状态" prop="status">
+        <el-select style="width: 100px;" v-model="queryParams.status" placeholder="请选择单据状态" clearable>
+          <el-option :key="0" label="草稿" :value="0" />
+          <el-option :key="1" label="待审核" :value="1" />
+          <el-option :key="2" label="已完成" :value="2" />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="Search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="Refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" plain icon="Plus" size="mini" @click="handleAdd">新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="success" plain icon="Edit" size="mini" :disabled="single"
+          @click="handleUpdate">修改</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="danger" plain icon="Delete" size="mini" :disabled="multiple"
+          @click="handleDelete">删除</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="warning" plain icon="Download" size="mini" @click="handleExport">导出</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="stockIoList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="出入库单ID" align="center" prop="stockIoId" v-if="false" />
+      <el-table-column label="出入库单号" align="center" prop="stockIoCode" />
+      <el-table-column label="类型" align="center" prop="ioType">
+        <template #default="scope">
+          <dict-tag :options="stock_io_type" :value="scope.row.ioType"></dict-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="业务类型" align="center" prop="bizType">
+        <template #default="scope">
+          <!-- <el-tag :type="getBizTypeTagType(scope.row.bizType)">
+            {{ getBizTypeLabel(scope.row.bizType) }}
+          </el-tag> -->
+          <dict-tag :options="stock_biz_type" :value="scope.row.bizType"></dict-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="单据状态" align="center" prop="status">
+        <template #default="scope">
+          <el-tag :type="scope.row.status === 2 ? 'success' : (scope.row.status === 1 ? 'warning' : 'info')">
+            {{ scope.row.status === 2 ? '已完成' : (scope.row.status === 0 ? '草稿' : '待审核') }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="备注" align="center" prop="remark" />
+      <el-table-column label="创建时间" align="center" prop="createTime" />
+      <el-table-column label="创建人" align="center" prop="createBy" />
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template #default="scope">
+          <el-button size="mini" type="text" icon="Edit" @click="handleUpdate(scope.row)">修改</el-button>
+          <el-button size="mini" type="text" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
+          <el-button size="mini" type="text" icon="Document" @click="showDetail(scope.row)">明细</el-button>
+          <el-button size="mini" type="text" icon="Document"
+            v-if="scope.row.ioType === 'out' && scope.row.status === 2"
+            @click="showReturnCreate(scope.row)">退库</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
+      @pagination="getList" />
+
+    <!-- 添加或修改出入库单主对话框 -->
+    <el-dialog :title="title" v-model="open" width="600px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
+        <el-form-item label="出入库单号" prop="stockIoCode">
+          <el-input v-model="form.stockIoCode" placeholder="请输入出入库单号" />
+        </el-form-item>
+        <el-form-item label="业务类型" prop="bizType">
+          <el-select v-model="form.bizType" placeholder="请选择业务类型">
+            <el-option v-for="dict in stock_biz_type" :key="dict.value" :label="dict.label"
+              :value="dict.value"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="单据状态" prop="status">
+          <el-input v-model="form.status" :value="0" readonly disabled />
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" placeholder="请输入备注" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+    <!-- 明细弹窗 -->
+    <el-dialog title="单据明细" v-model="detailDialogVisible" width="1000px" append-to-body @close="onDetailClosed">
+      <StockIoDetailPanel :stockIo="detailStockIo" @status-changed="onStatusChanged" />
+    </el-dialog>
+
+    <el-dialog title="退库单" v-model="returnCreateDialogVisible" width="1000px" append-to-body>
+      <ReturnCreatePanel :stockIo="form" @finish="returnCreateDialogVisible = false" />
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listStockIo, getStockIo, delStockIo, addStockIo, updateStockIo } from "@/api/wms/stockIo";
+import StockIoDetailPanel from './detail.vue';
+import ReturnCreatePanel from './returnCreate.vue';
+
+export default {
+  name: "StockIo",
+  setup() {
+    const { proxy } = getCurrentInstance();
+    const { stock_biz_type, stock_status, stock_io_type } = proxy.useDict('stock_biz_type', 'stock_status', 'stock_io_type');
+    return {
+      stock_biz_type,
+      stock_status,
+      stock_io_type,
+    };
+  },
+  components: { StockIoDetailPanel, ReturnCreatePanel },
+  props: {
+    ioType: {
+      require: true
+    }
+  },
+  data() {
+    return {
+      // 按钮loading
+      buttonLoading: false,
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 出入库单主表格数据
+      stockIoList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 20,
+        stockIoCode: undefined,
+        ioType: this.ioType,
+        bizType: undefined,
+        status: undefined,
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        stockIoId: [
+          { required: true, message: "出入库单ID不能为空", trigger: "blur" }
+        ],
+        stockIoCode: [
+          { required: true, message: "出入库单号不能为空", trigger: "blur" }
+        ],
+        bizType: [
+          { required: true, message: "业务类型不能为空", trigger: "change" }
+        ],
+        status: [
+          { required: true, message: "单据状态不能为空", trigger: "change" }
+        ],
+        delFlag: [
+          { required: true, message: "删除标志不能为空", trigger: "blur" }
+        ],
+        createTime: [
+          { required: true, message: "创建时间不能为空", trigger: "blur" }
+        ],
+        updateTime: [
+          { required: true, message: "更新时间不能为空", trigger: "blur" }
+        ],
+      },
+      detailDialogVisible: false,
+      detailStockIo: null,
+      returnCreateDialogVisible: false,
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询出入库单主列表 */
+    getList() {
+      this.loading = true;
+      listStockIo(this.queryParams).then(response => {
+        this.stockIoList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        stockIoId: undefined,
+        stockIoCode: undefined,
+        ioType: this.ioType,
+        bizType: undefined,
+        status: undefined,
+        remark: undefined,
+        delFlag: undefined,
+        createTime: undefined,
+        createBy: undefined,
+        updateTime: undefined,
+        updateBy: undefined
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.stockIoId)
+      this.single = selection.length !== 1
+      this.multiple = !selection.length
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.form.status = 0; // 新增时默认草稿状态
+      this.open = true;
+      this.title = "添加单据";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.loading = true;
+      this.reset();
+      const stockIoId = row.stockIoId || this.ids
+      getStockIo(stockIoId).then(response => {
+        this.loading = false;
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改单据";
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          this.buttonLoading = true;
+          if (this.form.stockIoId != null) {
+            updateStockIo(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            }).finally(() => {
+              this.buttonLoading = false;
+            });
+          } else {
+            addStockIo(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            }).finally(() => {
+              this.buttonLoading = false;
+            });
+          }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const stockIoIds = row.stockIoId || this.ids;
+      this.$modal.confirm('是否确认删除出入库单主编号为"' + stockIoIds + '"的数据项？').then(() => {
+        this.loading = true;
+        return delStockIo(stockIoIds);
+      }).then(() => {
+        this.loading = false;
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {
+      }).finally(() => {
+        this.loading = false;
+      });
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('wms/stockIo/export', {
+        ...this.queryParams
+      }, `stockIo_${new Date().getTime()}.xlsx`)
+    },
+    showDetail(row) {
+      this.detailStockIo = { ...row };
+      this.detailDialogVisible = true;
+    },
+    onDetailClosed() {
+      this.getList();
+    },
+    onStatusChanged(updatedStockIo) {
+      // 更新主表中的对应记录状态
+      const index = this.stockIoList.findIndex(item => item.stockIoId === updatedStockIo.stockIoId);
+      if (index !== -1) {
+        this.$set(this.stockIoList, index, updatedStockIo);
+      }
+      // 刷新列表
+      this.getList();
+    },
+    getIoTypeTagType(type) {
+      if (type === 'in') return 'success';
+      if (type === 'out') return 'primary';
+      if (type === 'transfer') return 'warning';
+      return '';
+    },
+    getIoTypeLabel(type) {
+      if (type === 'in') return '入库';
+      if (type === 'out') return '出库';
+      if (type === 'transfer') return '移库';
+      return type;
+    },
+    getBizTypeTagType(type) {
+      if (type === 'purchase') return 'success';
+      if (type === 'sales') return 'primary';
+      if (type === 'return') return 'warning';
+      if (type === 'relocation') return 'info';
+      return 'default';
+    },
+    getBizTypeLabel(type) {
+      const map = {
+        purchase: '采购',
+        sales: '销售',
+        return: '退货',
+        relocation: '调拨',
+        other: '其他'
+      };
+      return map[type] || type;
+    },
+    showReturnCreate(row) {
+      this.returnCreateDialogVisible = true;
+      this.form = { ...row };
+    }
+  }
+}
+</script>
diff --git a/gear-ui3/src/views/wms/stockIo/return.vue b/gear-ui3/src/views/wms/stockIo/return.vue
new file mode 100644
index 0000000..b62fe4b
--- /dev/null
+++ b/gear-ui3/src/views/wms/stockIo/return.vue
@@ -0,0 +1,13 @@
+<template>
+  <StockIoPage ioType="withdraw" />
+</template>
+
+<script>
+  import StockIoPage from './panels/stockIoPage.vue';
+
+  export default {
+    components: {
+      StockIoPage
+    }
+  }
+</script>
\ No newline at end of file
diff --git a/gear-ui3/src/views/wms/warehouse/index.vue b/gear-ui3/src/views/wms/warehouse/index.vue
new file mode 100644
index 0000000..89f7f84
--- /dev/null
+++ b/gear-ui3/src/views/wms/warehouse/index.vue
@@ -0,0 +1,375 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="60px">
+      <el-form-item label="仓库编码" prop="warehouseCode">
+        <el-input
+          v-model="queryParams.warehouseCode"
+          placeholder="请输入仓库编码"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="仓库名称" prop="warehouseName">
+        <el-input
+          v-model="queryParams.warehouseName"
+          placeholder="请输入仓库名称"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="仓库类型" prop="warehouseType">
+        <el-select style="width: 100px;" v-model="queryParams.warehouseType" placeholder="请选择仓库类型" clearable>
+          <el-option
+            v-for="dict in warehouse_type"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="启用状态" prop="isEnabled">
+        <el-select style="width: 100px;" v-model="queryParams.isEnabled" placeholder="请选择启用状态" clearable>
+          <el-option label="启用" :value="1" />
+          <el-option label="禁用" :value="0" />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+	    <el-button type="primary" icon="Search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="Refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="Plus"
+          size="mini"
+          @click="handleAdd"
+          
+        >新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="info"
+          plain
+          icon="Sort"
+          size="mini"
+          @click="toggleExpandAll"
+        >展开/折叠</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table
+      v-if="refreshTable"
+      v-loading="loading"
+      :data="warehouseList"
+      row-key="warehouseId"
+      :default-expand-all="isExpandAll"
+      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
+    >
+      <!-- <el-table-column label="上级节点" prop="parentId" /> -->
+      <el-table-column label="仓库编码" align="center" prop="warehouseCode" />
+      <el-table-column label="仓库名称" align="center" prop="warehouseName" />
+      <el-table-column label="仓库类型" align="center" prop="warehouseType">
+        <template #default="scope">
+          <dict-tag :options="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 #default="scope">
+          <span>{{ scope.row.isEnabled == 1 ? '启用' : '禁用' }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="备注" align="center" prop="remark" />
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template #default="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="Edit"
+            @click="handleUpdate(scope.row)"
+          >修改</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="Plus"
+            @click="handleAdd(scope.row)"
+          >新增</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="Delete"
+            @click="handleDelete(scope.row)"
+          >删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 添加或修改仓库/库区/库位自关联对话框 -->
+    <el-dialog :title="title" v-model="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-item label="仓库编码" prop="warehouseCode">
+          <el-input v-model="form.warehouseCode" placeholder="请输入仓库编码" />
+        </el-form-item>
+        <el-form-item label="仓库名称" prop="warehouseName">
+          <el-input v-model="form.warehouseName" placeholder="请输入仓库名称" />
+        </el-form-item>
+        <el-form-item label="仓库类型" prop="warehouseType">
+          <el-select v-model="form.warehouseType" placeholder="请选择仓库类型">
+            <el-option
+              v-for="dict in warehouse_type"
+              :key="dict.value"
+              :label="dict.label"
+              :value="parseInt(dict.value)"
+            ></el-option>
+          </el-select>
+        </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>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listWarehouse, getWarehouse, delWarehouse, addWarehouse, updateWarehouse } from "@/api/wms/warehouse";
+import WarehouseSelect from '@/components/WarehouseSelect';
+
+export default {
+  name: "Warehouse",
+  dicts: ['warehouse_type'],
+  components: {
+    WarehouseSelect
+  },
+  setup() {
+    const { proxy } = getCurrentInstance();
+
+    const { warehouse_type } = proxy.useDict('warehouse_type');
+    return {
+      warehouse_type
+    }
+  },
+  data() {
+    return {
+      // 按钮loading
+      buttonLoading: false,
+      // 遮罩层
+      loading: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 仓库/库区/库位自关联表格数据
+      warehouseList: [],
+      // 仓库/库区/库位自关联树选项
+      warehouseOptions: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 是否展开，默认全部展开
+      isExpandAll: true,
+      // 重新渲染表格状态
+      refreshTable: true,
+      // 查询参数
+      queryParams: {
+        parentId: undefined,
+        warehouseCode: undefined,
+        warehouseName: undefined,
+        warehouseType: undefined,
+        sortNo: undefined,
+        isEnabled: undefined,
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        warehouseCode: [
+          { required: true, message: "仓库/库区编码不能为空", trigger: "blur" }
+        ],
+        warehouseName: [
+          { required: true, message: "仓库/库区名称不能为空", trigger: "blur" }
+        ],
+        warehouseType: [
+          { required: true, message: "类型不能为空", trigger: "change" }
+        ],
+      }
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询仓库/库区/库位自关联列表 */
+    getList() {
+      this.loading = true;
+      listWarehouse(this.queryParams).then(response => {
+        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;
+        this.loading = false;
+      });
+    },
+    /** 转换仓库/库区/库位自关联数据结构 */
+    normalizer(node) {
+      if (node.children && !node.children.length) {
+        delete node.children;
+      }
+      return {
+        id: node.warehouseId,
+        label: node.warehouseName,
+        children: node.children
+      };
+    },
+	/** 查询仓库/库区/库位自关联下拉树结构 */
+    getTreeselect() {
+      listWarehouse().then(response => {
+        this.warehouseOptions = [];
+        const data = { warehouseId: 0, warehouseName: '顶级节点', children: [] };
+        data.children = this.handleTree(response.data, "warehouseId", "parentId");
+        this.warehouseOptions.push(data);
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        warehouseId: null,
+        parentId: null,
+        warehouseCode: null,
+        warehouseName: null,
+        warehouseType: null,
+        sortNo: null,
+        isEnabled: null,
+        delFlag: null,
+        remark: null,
+        createTime: null,
+        createBy: null,
+        updateTime: null,
+        updateBy: null
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    /** 新增按钮操作 */
+    handleAdd(row) {
+      this.reset();
+      this.getTreeselect();
+      if (row != null && row.warehouseId) {
+        this.form.parentId = row.warehouseId;
+      } else {
+        this.form.parentId = 0;
+      }
+      this.open = true;
+      this.title = "添加仓库/库区/库位自关联";
+    },
+    /** 展开/折叠操作 */
+    toggleExpandAll() {
+      this.refreshTable = false;
+      this.isExpandAll = !this.isExpandAll;
+      this.$nextTick(() => {
+        this.refreshTable = true;
+      });
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+	  this.loading = true;
+      this.reset();
+      this.getTreeselect();
+      if (row != null) {
+        this.form.parentId = row.warehouseId;
+      }
+      getWarehouse(row.warehouseId).then(response => {
+	    this.loading = false;
+        this.form = response.data;
+        this.open = true;
+        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;
+          }
+          if (this.form.warehouseId != null) {
+            updateWarehouse(submitData).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            }).finally(() => {
+              this.buttonLoading = false;
+            });
+          } else {
+            addWarehouse(submitData).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            }).finally(() => {
+              this.buttonLoading = false;
+            });
+          }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      this.$modal.confirm('是否确认删除仓库/库区/库位自关联编号为"' + row.warehouseId + '"的数据项？').then(() => {
+        this.loading = true;
+        return delWarehouse(row.warehouseId);
+      }).then(() => {
+        this.loading = false;
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {
+      }).finally(() => {
+        this.loading = false;
+      });
+    }
+  }
+};
+</script>