From e673dcbaebf15ba8a50c8d5a4331d8b4f4a98ed8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A0=82=E7=B3=96?= <qq2178503051@163.com>
Date: Fri, 3 Apr 2026 11:30:19 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E5=BA=93=E5=AD=98=E7=AE=A1=E7=90=86):=20?=
 =?UTF-8?q?=E9=87=8D=E6=9E=84=E5=BA=93=E5=AD=98=E9=A1=B5=E9=9D=A2=E5=B9=B6?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=88=86=E7=BB=84=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

添加vxe-table依赖支持表格分组和筛选
重构库存页面为左右布局，左侧仓库树右侧分组表格
实现按物料类型、名称、材质等多维度分组功能
添加全表搜索和列筛选功能
移除不再使用的stockIo组件和旧版库存页面
---
 klp-ui/src/main.js                            |   5 +
 .../crm/contract/components/ContractList.vue  |  12 +
 klp-ui/src/views/wms/stock/box.vue            | 167 ----
 klp-ui/src/views/wms/stock/group.vue          | 721 ++++++++++++++++++
 klp-ui/src/views/wms/stock/index.vue          |   7 +-
 klp-ui/src/views/wms/stock/panels/bar.vue     | 214 ------
 .../src/views/wms/stock/panels/reattree.vue   | 269 -------
 klp-ui/src/views/wms/stock/panels/stockIo.vue | 104 ---
 .../src/views/wms/stock/panels/trendChart.vue | 406 ----------
 package-lock.json                             | 313 +++++++-
 package.json                                  |   6 +
 11 files changed, 1058 insertions(+), 1166 deletions(-)
 delete mode 100644 klp-ui/src/views/wms/stock/box.vue
 create mode 100644 klp-ui/src/views/wms/stock/group.vue
 delete mode 100644 klp-ui/src/views/wms/stock/panels/bar.vue
 delete mode 100644 klp-ui/src/views/wms/stock/panels/reattree.vue
 delete mode 100644 klp-ui/src/views/wms/stock/panels/stockIo.vue
 delete mode 100644 klp-ui/src/views/wms/stock/panels/trendChart.vue
 create mode 100644 package.json

diff --git a/klp-ui/src/main.js b/klp-ui/src/main.js
index 645b632c..7cef69ae 100644
--- a/klp-ui/src/main.js
+++ b/klp-ui/src/main.js
@@ -52,6 +52,10 @@ import DictSelect from '@/components/DictSelect'
 // 初始化所有列
 import { initAllColumns } from '@/views/wms/report/js/column.js'
 
+import 'xe-utils'
+import VXETable from 'vxe-table'
+import 'vxe-table/lib/style.css'
+
 
 
 // 全局方法挂载
@@ -87,6 +91,7 @@ Vue.use(plugins)
 Vue.use(VueMeta)
 Vue.use(VueKonva);
 Vue.use(dashboardBigPlugin)
+Vue.use(VXETable)
 DictData.install()
 
 // 初始化所有列
diff --git a/klp-ui/src/views/crm/contract/components/ContractList.vue b/klp-ui/src/views/crm/contract/components/ContractList.vue
index 8dd34476..53e501fa 100644
--- a/klp-ui/src/views/crm/contract/components/ContractList.vue
+++ b/klp-ui/src/views/crm/contract/components/ContractList.vue
@@ -541,7 +541,13 @@ export default {
           // 清理空格和换行
           content = content.trim();
           
+          // 如果不是以大写汉字数字开头，添加一个中文字符的缩进
           if (content) {
+            // 检查是否以大写汉字数字开头（一、二、三、四、五、六、七、八、九、十）
+            const chineseNumberRegex = /^[一二三四五六七八九十]+、/;
+            if (!chineseNumberRegex.test(content)) {
+              content = '　' + content; // 使用全角空格作为中文字符缩进
+            }
             pContents.push(content);
           }
         }
@@ -551,7 +557,13 @@ export default {
           let textContent = htmlContent.replace(/<[^>]*>/g, '');
           textContent = textContent.replace(/&nbsp;/g, ' ').trim();
           
+          // 如果不是以大写汉字数字开头，添加一个中文字符的缩进
           if (textContent) {
+            // 检查是否以大写汉字数字开头（一、二、三、四、五、六、七、八、九、十）
+            const chineseNumberRegex = /^[一二三四五六七八九十]+、/;
+            if (!chineseNumberRegex.test(textContent)) {
+              textContent = '　' + textContent; // 使用全角空格作为中文字符缩进
+            }
             pContents.push(textContent);
           }
         }
diff --git a/klp-ui/src/views/wms/stock/box.vue b/klp-ui/src/views/wms/stock/box.vue
deleted file mode 100644
index f410c058..00000000
--- a/klp-ui/src/views/wms/stock/box.vue
+++ /dev/null
@@ -1,167 +0,0 @@
-<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/klp-ui/src/views/wms/stock/group.vue b/klp-ui/src/views/wms/stock/group.vue
new file mode 100644
index 00000000..76da2059
--- /dev/null
+++ b/klp-ui/src/views/wms/stock/group.vue
@@ -0,0 +1,721 @@
+<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 style="display: flex; align-items: center; justify-content: space-between;">
+            <span>
+              仓库结构
+            </span>
+
+            <el-select v-model="warehouseType" placeholder="请选择仓库类别" style="width: 50%;">
+              <el-option label="真实库区" value="real" />
+              <el-option label="逻辑库位" value="virtual" />
+            </el-select>
+          </div>
+        </div>
+        <WarehouseTree @node-click="handleTreeSelect" :warehouseType="warehouseType" :showEmpty="true" />
+      </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>
+          <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+          <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
+        </el-form-item>
+      </el-form> -->
+      <!-- 上方增加分组信息会影响下面的表格显示, 可以添加多级分组，例如按照itemType，按照itemName, 按照材质material, 按照规格specification, 按照厂家manufacturer -->
+      <div class="group-controls">
+        <el-form :model="groupForm" size="small" :inline="true">
+          <el-form-item label="分组维度">
+            <el-select v-model="groupForm.groupingCriteria" multiple placeholder="请选择分组维度" style="width: 300px;">
+              <el-option label="物料类型" value="itemType" />
+              <el-option label="物料名称" value="itemName" />
+              <el-option label="材质" value="material" />
+              <el-option label="规格" value="specification" />
+              <el-option label="厂家" value="manufacturer" />
+              <el-option label="镀层质量" value="zincLayer" />
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="getList">应用分组</el-button>
+            <el-button @click="resetGroup">重置分组</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+
+      <vxe-toolbar :refresh="{query: reload}" export custom>
+        <template v-slot:buttons>
+          <!-- 统计数据；共{{ total }}卷 -->
+          <span style="margin-left: 10px; font-weight: bold;">统计数据：共{{ totalQuantity }}卷</span>
+          
+          <!-- <vxe-input v-model.lazy="filterName" type="search" placeholder="全表搜索" style="width: 200px; margin-left: 10px;"></vxe-input> -->
+          <!-- <vxe-button @click="$refs.xTree.setAllTreeExpand(true)">展开所有</vxe-button>
+          <vxe-button @click="$refs.xTree.clearTreeExpand()">关闭所有</vxe-button> -->
+          <vxe-button @click="clearFilterEvent">清除所有筛选</vxe-button>
+        </template>
+      </vxe-toolbar>
+
+      <div style="height: calc(100vh - 260px);">
+        <vxe-table ref="xTree" :loading="loading" :data="list" size="mini" :tree-config="tableTreeConfig"
+          max-height="100%" @row-click="handleTableRowClick" :export-config="{}">
+          <vxe-table-column field="itemType" title="物料类型" align="center" :formatter="formatterItemType" tree-node sortable :filters="[{label: '产品', value: 'product'}, {label: '原料', value: 'raw_material'}]" :filter-method="filterItemTypeMethod">
+            <template v-slot="{ row }">
+              <span v-if="row.itemType">{{ formatterItemType(row.itemType) }}</span>
+              <span v-else>{{ row.itemType || row.itemName || row.material || row.specification || row.manufacturer || row.zincLayer
+                }}</span>
+            </template>
+          </vxe-table-column>
+          <vxe-table-column sortable field="itemName" title="物料名称" align="center" :filters="itemNameOptions" :filter-method="filterItemNameMethod">
+          </vxe-table-column>
+          <vxe-table-column sortable field="material" title="材质" align="center" :filters="materialOptions" :filter-method="filterMaterialMethod">
+          </vxe-table-column>
+          <vxe-table-column sortable field="specification" title="规格" align="center" :filters="specificationOptions" :filter-method="filterSpecificationMethod">  
+          </vxe-table-column>
+          <vxe-table-column sortable field="manufacturer" title="厂家" align="center" :filters="manufacturerOptions" :filter-method="filterManufacturerMethod">
+          </vxe-table-column>
+          <vxe-table-column sortable field="zincLayer" title="镀层质量" align="center" :filters="zincLayerOptions" :filter-method="filterZincLayerMethod">  
+          </vxe-table-column>
+          <vxe-table-column sortable field="totalQuantity" title="库存数量" align="center">
+          </vxe-table-column>
+          <vxe-table-column field="remark" title="备注" align="center" />
+          <vxe-table-column title="操作" align="center" width="100">
+            <template v-slot="{ row }">
+              <el-button v-if="row.itemId" type="text" size="small" @click="handleDrillDown(row)">查看明细</el-button>
+            </template>
+          </vxe-table-column>
+        </vxe-table>
+      </div>
+
+
+      <!-- <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
+        @pagination="getList" /> -->
+
+      <!-- 钻取明细对话框 -->
+      <el-dialog :title="dialogTitle" :visible.sync="drillDownVisible" width="80%" :close-on-click-modal="false">
+        <DrillDownTable :query-params="drillDownQueryParams" :item-name="drillDownParams.itemName"
+          :warehouse-name="drillDownParams.warehouseName" />
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import { listStock, getStockByActual } from "@/api/wms/stock";
+import RawMaterialSelect from "@/components/KLPService/RawMaterialSelect";
+import ProductSelect from "@/components/KLPService/ProductSelect";
+import WarehouseSelect from "@/components/WarehouseSelect";
+import RawMaterialInfo from "@/components/KLPService/Renderer/RawMaterialInfo";
+import ProductInfo from "@/components/KLPService/Renderer/ProductInfo";
+import WarehouseTree from "@/components/KLPService/WarehouseTree/index.vue";
+import MaterialSelect from "@/components/KLPService/MaterialSelect";
+// 导入钻取表格组件
+import DrillDownTable from '../coil/panels/DrillDownTable.vue';
+import { findItemWithBom } from "@/store/modules/category";
+
+export default {
+  name: "Stock",
+  dicts: ['stock_item_type'],
+  components: {
+    WarehouseSelect,
+    RawMaterialSelect,
+    ProductSelect,
+    RawMaterialInfo,
+    ProductInfo,
+    WarehouseTree,
+    MaterialSelect,
+    DrillDownTable // 注册钻取组件
+  },
+  data() {
+    return {
+      // 库存分析对话框显示状态
+      stockBoxVisible: false,
+      // 按钮loading
+      buttonLoading: false,
+      // 遮罩层
+      loading: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      totalQuantity: 0,
+      // 库存：原材料/产品与库区/库位的存放关系表格数据
+      stockList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 9999,
+        warehouseId: undefined,
+        itemType: undefined,
+        itemId: undefined,
+        quantity: undefined,
+        unit: undefined,
+        batchNo: undefined,
+        mergeBatch: false,
+      },
+      warehouseType: 'real',
+      // 表单参数
+      form: {},
+      // 钻取相关数据
+      drillDownVisible: false,
+      dialogTitle: '',
+      drillDownParams: {
+        itemType: null,
+        itemId: null,
+        itemName: '',
+        warehouseId: null,
+        warehouseName: '',
+      },
+      // 传给钻取表格组件的查询参数
+      drillDownQueryParams: {
+        warehouseId: null,
+        itemType: null,
+        itemId: null,
+        actualWarehouseId: null,
+      },
+      // 分组相关数据
+      groupForm: {
+        groupingCriteria: []
+      },
+      // vxe-table树配置
+      tableTreeConfig: {
+        children: 'children',
+        accordion: true,
+        expandAll: false,
+        line: true,
+      },
+      // 搜索关键字
+      filterName: '',
+      // 筛选选项数组
+      itemNameOptions: [],
+      materialOptions: [],
+      specificationOptions: [],
+      manufacturerOptions: [],
+      zincLayerOptions: []
+    };
+  },
+  computed: {
+    list() {
+      const filterName = this.filterName.trim().toLowerCase();
+      if (!filterName) {
+        return this.stockList;
+      }
+      
+      const searchProps = ['itemType', 'itemName', 'material', 'specification', 'manufacturer', 'totalQuantity', 'remark'];
+      
+      const filterData = (data) => {
+        return data.filter(item => {
+          if (item.children) {
+            item.children = filterData(item.children);
+            return item.children.length > 0 || searchProps.some(key => {
+              return String(item[key] || '').toLowerCase().includes(filterName);
+            });
+          }
+          return searchProps.some(key => {
+            return String(item[key] || '').toLowerCase().includes(filterName);
+          });
+        });
+      };
+      
+      return filterData([...this.stockList]);
+    }
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询库存列表 */
+    getList() {
+      this.loading = true;
+      if (this.warehouseType === 'real') {
+        getStockByActual(this.queryParams).then(response => {
+          let q = 0
+          const processedData = response.rows.map(item => {
+            q += parseInt(item.totalQuantity);
+            const itemType = item.itemType
+            if (itemType === 'raw_material') {
+              item.rawMaterial = {
+                rawMaterialId: item.itemId,
+                rawMaterialName: item.itemName,
+                itemId: item.itemId,
+                itemName: item.itemName,
+                rawMaterialCode: item.itemCode,
+                specification: item.specification,
+                material: item.material,
+                surfaceTreatment: item.surfaceTreatment,
+                zincLayer: item.zincLayer,
+                manufacturer: item.manufacturer,
+              }
+            } else if (itemType === 'product') {
+              item.product = {
+                productId: item.itemId,
+                productName: item.itemName,
+                productCode: item.itemCode,
+                itemId: item.itemId,
+                itemName: item.itemName,
+                specification: item.specification,
+                material: item.material,
+                surfaceTreatment: item.surfaceTreatment,
+                zincLayer: item.zincLayer,
+                manufacturer: item.manufacturer,
+              }
+            }
+            return item
+          });
+          this.stockList = this.groupData(processedData, this.groupForm.groupingCriteria);
+          this.total = response.total;
+          this.totalQuantity = q;
+          // 提取选项值
+          this.extractOptions(processedData);
+          this.loading = false;
+        });
+      } else {
+        listStock(this.queryParams).then(response => {
+          const processedData = response.rows.map(item => {
+            const itemType = item.itemType
+            if (itemType === 'raw_material') {
+              item.rawMaterial = {
+                rawMaterialId: item.itemId,
+                rawMaterialName: item.itemName,
+                rawMaterialCode: item.itemCode,
+                specification: item.specification,
+                material: item.material,
+                surfaceTreatment: item.surfaceTreatment,
+                zincLayer: item.zincLayer,
+                manufacturer: item.manufacturer,
+              }
+            } else if (itemType === 'product') {
+              item.product = {
+                productId: item.itemId,
+                productName: item.itemName,
+                productCode: item.itemCode,
+                specification: item.specification,
+                material: item.material,
+                surfaceTreatment: item.surfaceTreatment,
+                zincLayer: item.zincLayer,
+                manufacturer: item.manufacturer,
+              }
+            }
+            return item
+          });
+          this.stockList = this.groupData(processedData, this.groupForm.groupingCriteria);
+          this.total = response.total;
+          // 提取选项值
+          this.extractOptions(processedData);
+          this.loading = false;
+        });
+      }
+    },
+    /** 提取筛选选项值 */
+    extractOptions(data) {
+      // 提取唯一值
+      const itemNames = new Set();
+      const materials = new Set();
+      const specifications = new Set();
+      const manufacturers = new Set();
+      const zincLayers = new Set();
+      
+      data.forEach(item => {
+        if (item.itemName) itemNames.add(item.itemName);
+        if (item.material) materials.add(item.material);
+        if (item.specification) specifications.add(item.specification);
+        if (item.manufacturer) manufacturers.add(item.manufacturer);
+        if (item.zincLayer) zincLayers.add(item.zincLayer);
+      });
+      
+      // 转换为数组并排序
+      this.itemNameOptions = Array.from(itemNames).sort();
+      this.materialOptions = Array.from(materials).sort();
+      this.specificationOptions = Array.from(specifications).sort();
+      this.manufacturerOptions = Array.from(manufacturers).sort();
+      this.zincLayerOptions = Array.from(zincLayers).sort();
+
+      this.updateManufacturerFilterEvent();
+      this.updateZincLayerFilterEvent();
+      this.updateSpecificationFilterEvent();
+      this.updateMaterialFilterEvent();
+      this.updateNameFilterEvent();
+
+      console.log(this.itemNameOptions, itemNames, data);
+    },
+    formatterItemType(itemType) {
+      return itemType === 'raw_material' ? '原材料' : '产品';
+    },
+    // 树节点点击
+    handleTreeSelect(node) {
+      this.queryParams.warehouseId = node.warehouseId;
+      this.queryParams.actualWarehouseId = node.actualWarehouseId;
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    // 表单重置
+    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();
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('wms/stock/export', {
+        ...this.queryParams
+      }, `stock_${new Date().getTime()}.xlsx`)
+    },
+    /** 处理表格行点击 */
+    handleTableRowClick(row) {
+      this.handleDrillDown(row);
+    },
+    /** 处理钻取操作 */
+    handleDrillDown(row) {
+      // 重置钻取参数
+      this.drillDownParams = {
+        itemType: null,
+        itemId: null,
+        itemName: '',
+        warehouseId: null,
+        warehouseName: '',
+      };
+
+      // 重置传给子组件的查询参数
+      this.drillDownQueryParams = {
+        warehouseId: this.queryParams.warehouseId || row.warehouseId,
+        itemType: row.itemType,
+        itemId: row.itemId,
+        actualWarehouseId: row.actualWarehouseId
+      };
+
+      // 设置钻取参数
+      this.drillDownParams.itemType = row.itemType;
+      this.drillDownParams.itemId = row.itemId;
+      this.drillDownParams.warehouseId = this.queryParams.warehouseId || row.warehouseId;
+
+      // 获取物料名称
+      const item = findItemWithBom(row.itemType, row.itemId);
+      this.drillDownParams.itemName = item ?
+        (row.itemType === 'product' ? item.productName : item.rawMaterialName) :
+        '未知物料';
+
+      // 设置对话框标题
+      this.dialogTitle = `${row.itemType === 'product' ? '成品' : '原材料'}库存明细`;
+
+      // 打开弹窗
+      this.drillDownVisible = true;
+    },
+    /** 重置分组 */
+    resetGroup() {
+      this.groupForm.groupingCriteria = [];
+      this.getList();
+    },
+    /** 分组数据处理 */
+    groupData(data, criteria) {
+      if (!criteria || criteria.length === 0) {
+        return data;
+      }
+      
+      const groupBy = (arr, key) => {
+        return arr.reduce((groups, item) => {
+          const value = item[key] || '未知';
+          if (!groups[value]) {
+            groups[value] = [];
+          }
+          groups[value].push(item);
+          return groups;
+        }, {});
+      };
+      
+      const buildTree = (items, level) => {
+        if (level >= criteria.length) {
+          return items;
+        }
+        
+        const currentCriteria = criteria[level];
+        const grouped = groupBy(items, currentCriteria);
+        
+        return Object.keys(grouped).map(key => {
+          const children = buildTree(grouped[key], level + 1);
+          const totalQuantity = children.reduce((sum, child) => {
+            return sum + (parseInt(child.totalQuantity) || 0);
+          }, 0);
+          
+          return {
+            [currentCriteria]: key,
+            totalQuantity,
+            children,
+            hasChildren: children.length > 0
+          };
+        });
+      };
+      
+      return buildTree(data, 0);
+    },
+    /** 物料类型筛选 */
+    filterItemTypeMethod({ cellValue, option }) {
+      return cellValue === option.value;
+    },
+    /** 物料名称筛选 */
+    filterItemNameMethod({ cellValue, option }) {
+      return option.value ? cellValue === option.value : true;
+    },
+    /** 材质筛选 */
+    filterMaterialMethod({ cellValue, option }) {
+      return option.value ? cellValue === option.value : true;
+    },
+    /** 规格筛选 */
+    filterSpecificationMethod({ cellValue, option }) {
+      return option.value ? cellValue === option.value : true;
+    },
+    /** 厂家筛选 */
+    filterManufacturerMethod({ cellValue, option }) {
+      return option.value ? cellValue === option.value : true;
+    },
+    /** 镀层质量筛选 */
+    filterZincLayerMethod({ cellValue, option }) {
+      return option.value ? cellValue === option.value : true;
+    },
+    /** 库存数量筛选 */
+    filterTotalQuantityMethod({ cellValue, option }) {
+      const value = Number(cellValue || 0);
+      const filterValue = Number(option.value || 0);
+      
+      switch (option.operator || option.value) {
+        case 'gt':
+          return value > filterValue;
+        case 'gte':
+          return value >= filterValue;
+        case 'lt':
+          return value < filterValue;
+        case 'lte':
+          return value <= filterValue;
+        case 'eq':
+          return value === filterValue;
+        default:
+          return true;
+      }
+    },
+    /** 更改物料名称筛选条件 */
+    updateNameFilterEvent() {
+      const xTable = this.$refs.xTree;
+      const column = xTable.getColumnByField('itemName');
+      // 使用从数据中汇总的实际选项
+      const options = this.itemNameOptions.map(item => ({
+        label: item,
+        value: item
+      }));
+      // 修改筛选列表
+      xTable.setFilter(column, options);
+      // 修改条件之后，需要手动调用 updateData 处理表格数据
+      xTable.updateData();
+    },
+    /** 更改材质筛选条件 */
+    updateMaterialFilterEvent() {
+      const xTable = this.$refs.xTree;
+      const column = xTable.getColumnByField('material');
+      // 使用从数据中汇总的实际选项
+      const options = this.materialOptions.map(item => ({
+        label: item,
+        value: item
+      }));
+      // 修改筛选列表
+      xTable.setFilter(column, options);
+      // 修改条件之后，需要手动调用 updateData 处理表格数据
+      xTable.updateData();
+    },
+    /** 更改规格筛选条件 */
+    updateSpecificationFilterEvent() {
+      const xTable = this.$refs.xTree;
+      const column = xTable.getColumnByField('specification');
+      // 使用从数据中汇总的实际选项
+      const options = this.specificationOptions.map(item => ({
+        label: item,
+        value: item
+      }));
+      // 修改筛选列表
+      xTable.setFilter(column, options);
+      // 修改条件之后，需要手动调用 updateData 处理表格数据
+      xTable.updateData();
+    },
+    /** 更改厂家筛选条件 */
+    updateManufacturerFilterEvent() {
+      const xTable = this.$refs.xTree;
+      const column = xTable.getColumnByField('manufacturer');
+      // 使用从数据中汇总的实际选项
+      const options = this.manufacturerOptions.map(item => ({
+        label: item,
+        value: item
+      }));
+      // 修改筛选列表
+      xTable.setFilter(column, options);
+      // 修改条件之后，需要手动调用 updateData 处理表格数据
+      xTable.updateData();
+    },
+    /** 更改镀层质量筛选条件 */
+    updateZincLayerFilterEvent() {
+      const xTable = this.$refs.xTree;
+      const column = xTable.getColumnByField('zincLayer');
+      // 使用从数据中汇总的实际选项
+      const options = this.zincLayerOptions.map(item => ({
+        label: item,
+        value: item
+      }));
+      // 修改筛选列表
+      xTable.setFilter(column, options);
+      // 修改条件之后，需要手动调用 updateData 处理表格数据
+      xTable.updateData();
+    },
+    /** 清除筛选条件 */
+    clearFilterEvent() {
+      const xTable = this.$refs.xTree;
+      xTable.clearFilter();
+      xTable.updateData();
+    },
+    /** 刷新数据 */
+    reload() {
+      this.getList();
+    }
+  }
+};
+</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;
+}
+
+.group-controls {
+  margin-bottom: 16px;
+  padding: 12px;
+  background-color: #f9f9f9;
+  border-radius: 4px;
+  border: 1px solid #eaeaea;
+}
+
+.group-controls .el-form {
+  margin-bottom: 0;
+}
+
+/* 分组行样式 */
+.el-table__row.group-row {
+  background-color: #f5f7fa;
+}
+
+/* 叶子节点样式 */
+.el-table__row.leaf-row {
+  background-color: #ffffff;
+}
+
+/* 筛选输入框样式 */
+.my-input {
+  width: 100%;
+  padding: 4px 8px;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  font-size: 12px;
+  outline: none;
+  transition: border-color 0.3s;
+}
+
+.my-input:focus {
+  border-color: #409eff;
+}
+
+/* 筛选下拉选择框样式 */
+.my-select {
+  width: 100%;
+  padding: 4px 8px;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  font-size: 12px;
+  outline: none;
+  transition: border-color 0.3s;
+  background-color: #fff;
+}
+
+.my-select:focus {
+  border-color: #409eff;
+}
+
+/* 库存数量筛选样式 */
+.quantity-filter {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.quantity-filter .my-select {
+  width: 100%;
+}
+
+.quantity-filter .my-input {
+  width: 100%;
+}
+</style>
\ No newline at end of file
diff --git a/klp-ui/src/views/wms/stock/index.vue b/klp-ui/src/views/wms/stock/index.vue
index d1809286..1aefd40f 100644
--- a/klp-ui/src/views/wms/stock/index.vue
+++ b/klp-ui/src/views/wms/stock/index.vue
@@ -72,14 +72,12 @@
 </template>
 
 <script>
-import { listStock, delStock, addStock, updateStock, getStockByActual } from "@/api/wms/stock";
-import { addStockIoWithDetail } from "@/api/wms/stockIo";
+import { listStock, getStockByActual } from "@/api/wms/stock";
 import RawMaterialSelect from "@/components/KLPService/RawMaterialSelect";
 import ProductSelect from "@/components/KLPService/ProductSelect";
 import WarehouseSelect from "@/components/WarehouseSelect";
 import RawMaterialInfo from "@/components/KLPService/Renderer/RawMaterialInfo";
 import ProductInfo from "@/components/KLPService/Renderer/ProductInfo";
-import StockIo from './panels/stockIo.vue';
 import WarehouseTree from "@/components/KLPService/WarehouseTree/index.vue";
 import MaterialSelect from "@/components/KLPService/MaterialSelect";
 // 导入钻取表格组件
@@ -88,14 +86,13 @@ import { findItemWithBom } from "@/store/modules/category";
 
 export default {
   name: "Stock",
-  dicts: ['stock_item_type', 'stock_io_type'],
+  dicts: ['stock_item_type'],
   components: {
     WarehouseSelect,
     RawMaterialSelect,
     ProductSelect,
     RawMaterialInfo,
     ProductInfo,
-    StockIo,
     WarehouseTree,
     MaterialSelect,
     DrillDownTable // 注册钻取组件
diff --git a/klp-ui/src/views/wms/stock/panels/bar.vue b/klp-ui/src/views/wms/stock/panels/bar.vue
deleted file mode 100644
index 255454cd..00000000
--- a/klp-ui/src/views/wms/stock/panels/bar.vue
+++ /dev/null
@@ -1,214 +0,0 @@
-<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/klp-ui/src/views/wms/stock/panels/reattree.vue b/klp-ui/src/views/wms/stock/panels/reattree.vue
deleted file mode 100644
index 517d54ee..00000000
--- a/klp-ui/src/views/wms/stock/panels/reattree.vue
+++ /dev/null
@@ -1,269 +0,0 @@
-<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/klp-ui/src/views/wms/stock/panels/stockIo.vue b/klp-ui/src/views/wms/stock/panels/stockIo.vue
deleted file mode 100644
index fa7758e1..00000000
--- a/klp-ui/src/views/wms/stock/panels/stockIo.vue
+++ /dev/null
@@ -1,104 +0,0 @@
-<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>
-    <KLPTable :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 slot-scope="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 slot-scope="scope">
-          <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
-        </template>
-      </el-table-column>
-    </KLPTable>
-    <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/klp-ui/src/views/wms/stock/panels/trendChart.vue b/klp-ui/src/views/wms/stock/panels/trendChart.vue
deleted file mode 100644
index bf0a223c..00000000
--- a/klp-ui/src/views/wms/stock/panels/trendChart.vue
+++ /dev/null
@@ -1,406 +0,0 @@
-<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: 100%;"></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/package-lock.json b/package-lock.json
index 5301f2e4..86b64e4f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2,5 +2,316 @@
   "name": "klp-oa",
   "lockfileVersion": 2,
   "requires": true,
-  "packages": {}
+  "packages": {
+    "": {
+      "dependencies": {
+        "vxe-table": "^2.11.0",
+        "xe-utils": "^3.5.31"
+      }
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
+      "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz",
+      "integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.29.2",
+      "resolved": "https://registry.npmmirror.com/@babel/parser/-/parser-7.29.2.tgz",
+      "integrity": "sha512-4GgRzy/+fsBa72/RZVJmGKPmZu9Byn8o4MoLpmNe1m8ZfYnz5emHLQz3U4gLud6Zwl0RZIcgiLD7Uq7ySFuDLA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/types": "^7.29.0"
+      },
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/types": {
+      "version": "7.29.0",
+      "resolved": "https://registry.npmmirror.com/@babel/types/-/types-7.29.0.tgz",
+      "integrity": "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.27.1",
+        "@babel/helper-validator-identifier": "^7.28.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@vue/compiler-sfc": {
+      "version": "2.7.16",
+      "resolved": "https://registry.npmmirror.com/@vue/compiler-sfc/-/compiler-sfc-2.7.16.tgz",
+      "integrity": "sha512-KWhJ9k5nXuNtygPU7+t1rX6baZeqOYLEforUPjgNDBnLicfHCoi48H87Q8XyLZOrNNsmhuwKqtpDQWjEFe6Ekg==",
+      "peer": true,
+      "dependencies": {
+        "@babel/parser": "^7.23.5",
+        "postcss": "^8.4.14",
+        "source-map": "^0.6.1"
+      },
+      "optionalDependencies": {
+        "prettier": "^1.18.2 || ^2.0.0"
+      }
+    },
+    "node_modules/csstype": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.2.3.tgz",
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.11",
+      "resolved": "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.11.tgz",
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "peer": true,
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmmirror.com/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "license": "ISC",
+      "peer": true
+    },
+    "node_modules/postcss": {
+      "version": "8.5.8",
+      "resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.5.8.tgz",
+      "integrity": "sha512-OW/rX8O/jXnm82Ey1k44pObPtdblfiuWnrd8X7GJ7emImCOstunGbXUpp7HdBrFQX6rJzn3sPT397Wp5aCwCHg==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "nanoid": "^3.3.11",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/prettier": {
+      "version": "2.8.8",
+      "resolved": "https://registry.npmmirror.com/prettier/-/prettier-2.8.8.tgz",
+      "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "bin": {
+        "prettier": "bin-prettier.js"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
+    "node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmmirror.com/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "license": "BSD-3-Clause",
+      "peer": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "license": "BSD-3-Clause",
+      "peer": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/vue": {
+      "version": "2.7.16",
+      "resolved": "https://registry.npmmirror.com/vue/-/vue-2.7.16.tgz",
+      "integrity": "sha512-4gCtFXaAA3zYZdTp5s4Hl2sozuySsgz4jy1EnpBHNfpMa9dK1ZCG7viqBPCwXtmgc8nHqUsAu3G4gtmXkkY3Sw==",
+      "deprecated": "Vue 2 has reached EOL and is no longer actively maintained. See https://v2.vuejs.org/eol/ for more details.",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@vue/compiler-sfc": "2.7.16",
+        "csstype": "^3.1.0"
+      }
+    },
+    "node_modules/vxe-table": {
+      "version": "2.11.0",
+      "resolved": "https://registry.npmmirror.com/vxe-table/-/vxe-table-2.11.0.tgz",
+      "integrity": "sha512-dDLV2Iiy/8Yiy14MX91TQb2HsW9K5ZYS3+xIjBmKc5JFMEHeuB8SxaFShSXhVk9GNTd+/u0GqvQhDoQ1WXAwnw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "vue": "^2.6.0"
+      }
+    },
+    "node_modules/xe-utils": {
+      "version": "3.5.31",
+      "resolved": "https://registry.npmmirror.com/xe-utils/-/xe-utils-3.5.31.tgz",
+      "integrity": "sha512-oS4yv8qktvlE0wc9yYkitDidEmThc5qN0UTRvKCvrWnejxbTyIxbwfrdZmPKdKGZtB+/U8cEAMFywLJjHtD11A==",
+      "license": "MIT"
+    }
+  },
+  "dependencies": {
+    "@babel/helper-string-parser": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
+      "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
+      "peer": true
+    },
+    "@babel/helper-validator-identifier": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz",
+      "integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==",
+      "peer": true
+    },
+    "@babel/parser": {
+      "version": "7.29.2",
+      "resolved": "https://registry.npmmirror.com/@babel/parser/-/parser-7.29.2.tgz",
+      "integrity": "sha512-4GgRzy/+fsBa72/RZVJmGKPmZu9Byn8o4MoLpmNe1m8ZfYnz5emHLQz3U4gLud6Zwl0RZIcgiLD7Uq7ySFuDLA==",
+      "peer": true,
+      "requires": {
+        "@babel/types": "^7.29.0"
+      }
+    },
+    "@babel/types": {
+      "version": "7.29.0",
+      "resolved": "https://registry.npmmirror.com/@babel/types/-/types-7.29.0.tgz",
+      "integrity": "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==",
+      "peer": true,
+      "requires": {
+        "@babel/helper-string-parser": "^7.27.1",
+        "@babel/helper-validator-identifier": "^7.28.5"
+      }
+    },
+    "@vue/compiler-sfc": {
+      "version": "2.7.16",
+      "resolved": "https://registry.npmmirror.com/@vue/compiler-sfc/-/compiler-sfc-2.7.16.tgz",
+      "integrity": "sha512-KWhJ9k5nXuNtygPU7+t1rX6baZeqOYLEforUPjgNDBnLicfHCoi48H87Q8XyLZOrNNsmhuwKqtpDQWjEFe6Ekg==",
+      "peer": true,
+      "requires": {
+        "@babel/parser": "^7.23.5",
+        "postcss": "^8.4.14",
+        "prettier": "^1.18.2 || ^2.0.0",
+        "source-map": "^0.6.1"
+      }
+    },
+    "csstype": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.2.3.tgz",
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+      "peer": true
+    },
+    "nanoid": {
+      "version": "3.3.11",
+      "resolved": "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.11.tgz",
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+      "peer": true
+    },
+    "picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmmirror.com/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "peer": true
+    },
+    "postcss": {
+      "version": "8.5.8",
+      "resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.5.8.tgz",
+      "integrity": "sha512-OW/rX8O/jXnm82Ey1k44pObPtdblfiuWnrd8X7GJ7emImCOstunGbXUpp7HdBrFQX6rJzn3sPT397Wp5aCwCHg==",
+      "peer": true,
+      "requires": {
+        "nanoid": "^3.3.11",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      }
+    },
+    "prettier": {
+      "version": "2.8.8",
+      "resolved": "https://registry.npmmirror.com/prettier/-/prettier-2.8.8.tgz",
+      "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
+      "optional": true,
+      "peer": true
+    },
+    "source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmmirror.com/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "peer": true
+    },
+    "source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "peer": true
+    },
+    "vue": {
+      "version": "2.7.16",
+      "resolved": "https://registry.npmmirror.com/vue/-/vue-2.7.16.tgz",
+      "integrity": "sha512-4gCtFXaAA3zYZdTp5s4Hl2sozuySsgz4jy1EnpBHNfpMa9dK1ZCG7viqBPCwXtmgc8nHqUsAu3G4gtmXkkY3Sw==",
+      "peer": true,
+      "requires": {
+        "@vue/compiler-sfc": "2.7.16",
+        "csstype": "^3.1.0"
+      }
+    },
+    "vxe-table": {
+      "version": "2.11.0",
+      "resolved": "https://registry.npmmirror.com/vxe-table/-/vxe-table-2.11.0.tgz",
+      "integrity": "sha512-dDLV2Iiy/8Yiy14MX91TQb2HsW9K5ZYS3+xIjBmKc5JFMEHeuB8SxaFShSXhVk9GNTd+/u0GqvQhDoQ1WXAwnw==",
+      "requires": {}
+    },
+    "xe-utils": {
+      "version": "3.5.31",
+      "resolved": "https://registry.npmmirror.com/xe-utils/-/xe-utils-3.5.31.tgz",
+      "integrity": "sha512-oS4yv8qktvlE0wc9yYkitDidEmThc5qN0UTRvKCvrWnejxbTyIxbwfrdZmPKdKGZtB+/U8cEAMFywLJjHtD11A=="
+    }
+  }
 }
diff --git a/package.json b/package.json
new file mode 100644
index 00000000..450dc480
--- /dev/null
+++ b/package.json
@@ -0,0 +1,6 @@
+{
+  "dependencies": {
+    "vxe-table": "^2.11.0",
+    "xe-utils": "^3.5.31"
+  }
+}