From 056b6aabac13f5cce338ca66b29927643c6ea8af Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A0=82=E7=B3=96?= <qq2178503051@163.com>
Date: Fri, 31 Oct 2025 15:16:24 +0800
Subject: [PATCH] =?UTF-8?q?feat(wms):=20=E6=96=B0=E5=A2=9E=E9=92=BB?=
 =?UTF-8?q?=E5=8F=96=E8=A1=A8=E6=A0=BC=E7=BB=84=E4=BB=B6=E5=B9=B6=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E5=BA=93=E5=AD=98=E6=98=8E=E7=BB=86=E6=9F=A5=E7=9C=8B?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

新增DrillDownTable组件用于展示库存明细数据
重构stock/index.vue和coil/box.vue使用新组件
优化表格行点击事件处理和数据传递逻辑
移除冗余代码并简化钻取参数处理流程
---
 klp-ui/src/views/wms/coil/box.vue             | 257 +++++-------------
 .../views/wms/coil/panels/DrillDownTable.vue  | 202 ++++++++++++++
 klp-ui/src/views/wms/stock/index.vue          | 118 +++++---
 3 files changed, 348 insertions(+), 229 deletions(-)
 create mode 100644 klp-ui/src/views/wms/coil/panels/DrillDownTable.vue

diff --git a/klp-ui/src/views/wms/coil/box.vue b/klp-ui/src/views/wms/coil/box.vue
index d5e0dfa8..c7800dab 100644
--- a/klp-ui/src/views/wms/coil/box.vue
+++ b/klp-ui/src/views/wms/coil/box.vue
@@ -2,13 +2,6 @@
   <div class="statistics-container" v-loading="loading">
     <!-- 统计方式选择 -->
     <el-form inline>
-      <!-- <el-form-item label="统计方式" prop="statType">
-        <el-radio-group v-model="queryParams.statType" @change="getList">
-          <el-radio label="1">物料</el-radio>
-          <el-radio label="2">仓库</el-radio>
-        </el-radio-group>
-      </el-form-item> -->
-
       <MaterialSelect :itemType.sync="queryParams.itemType" :itemId.sync="queryParams.itemId" @change="getList" />
     </el-form>
 
@@ -35,18 +28,41 @@
 
     <!-- 数据表格 -->
     <div class="table-container">
-      <el-table max-height="400" :data="list" border stripe style="width: 100%; margin-top: 20px" @row-click="handleTableRowClick"
-        row-class-name="table-row-hover">
+      <el-table 
+        max-height="400" 
+        :data="list" 
+        border 
+        stripe 
+        style="width: 100%; margin-top: 20px" 
+        @row-click="handleTableRowClick"
+        row-class-name="table-row-hover"
+      >
         <!-- 仓库相关列：仅仓库统计时有效 -->
-        <el-table-column v-if="queryParams.statType === '2'" prop="warehouseName" label="仓库名称" align="center"
-          min-width="150"></el-table-column>
+        <el-table-column 
+          v-if="queryParams.statType === '2'" 
+          prop="warehouseName" 
+          label="仓库名称" 
+          align="center"
+          min-width="150"
+        ></el-table-column>
 
         <!-- 物料类型列：仅物料统计时有效 -->
-        <el-table-column v-if="queryParams.statType === '1'" prop="itemType" label="物料类型" align="center" min-width="120"
-          :formatter="formatItemType"></el-table-column>
+        <el-table-column 
+          v-if="queryParams.statType === '1'" 
+          prop="itemType" 
+          label="物料类型" 
+          align="center" 
+          min-width="120"
+          :formatter="formatItemType"
+        ></el-table-column>
 
         <!-- 物料ID/名称列：仅物料统计时有效 -->
-        <el-table-column v-if="queryParams.statType === '1'" label="物料信息" align="center" min-width="250">
+        <el-table-column 
+          v-if="queryParams.statType === '1'" 
+          label="物料信息" 
+          align="center" 
+          min-width="250"
+        >
           <template slot-scope="scope">
             <ProductInfo v-if="scope.row.itemType === 'product'" :productId="scope.row.itemId">
               <template #default="{ product }">
@@ -67,72 +83,19 @@
         <el-table-column prop="totalNetWeight" label="总净重(kg)" align="center" min-width="120"></el-table-column>
       </el-table>
 
-      <!-- 点击图表项或者表格行后弹出弹窗, 数据详情钻取，获取汇总的数据详情，如果当前是物料统计，钻取将itemType和itemId作为条件查询list；
-       如果当前是仓库统计，将仓库id作为筛选条件 -->
-      <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="80%" :close-on-click-modal="false">
-        <div class="drill-down-content">
-          <!-- 钻取条件显示 -->
-          <div class="drill-down-header">
-            <el-tag size="large" v-if="drillDownParams.itemType">
-              {{ drillDownParams.itemType === 'product' ? '成品' : '原材料' }}
-            </el-tag>
-            <el-tag size="large" v-if="drillDownParams.itemName" type="primary">
-              {{ drillDownParams.itemName }}
-            </el-tag>
-            <el-tag size="large" v-if="drillDownParams.warehouseName" type="success">
-              {{ drillDownParams.warehouseName }}
-            </el-tag>
-          </div>
-
-          <!-- 加载状态 -->
-          <el-skeleton :loading="drillDownLoading" animated>
-            <template #template>
-              <div class="demo-skeleton">
-                <el-skeleton-item variant="p" style="width: 80%" />
-                <el-skeleton-item variant="text" style="width: 30%" />
-                <el-skeleton-item variant="text" style="width: 60%" />
-              </div>
-            </template>
-
-            <!-- 钻取表格 -->
-            <el-table max-height="400" v-loading="drillDownLoading" :data="drillDownList" border stripe style="width: 100%"
-              v-if="!drillDownLoading">
-              <el-table-column prop="warehouseName" label="仓库名称" align="center" min-width="150"></el-table-column>
-              <el-table-column prop="currentCoilNo" label="当前卷号" align="center" min-width="120"></el-table-column>
-              <el-table-column prop="enterCoilNo" label="入场卷号" align="center" min-width="180"></el-table-column>
-              <el-table-column label="物料类型" align="center" prop="itemType">
-                <template slot-scope="scope">
-                  {{ scope.row.itemType == 'product' ? '成品' : '原料' }}
-                </template>
-              </el-table-column>
-              <el-table-column label="产品类型" align="center" min-width="250">
-                <template slot-scope="scope">
-                  <ProductInfo v-if="scope.row.itemType === 'product'" :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="更新时间" align="center" prop="updateTime" />
-              <el-table-column prop="grossWeight" label="毛重(kg)" align="center" min-width="100"></el-table-column>
-              <el-table-column prop="netWeight" label="净重(kg)" align="center" min-width="100"></el-table-column>
-            </el-table>
-          </el-skeleton>
-
-          <!-- 分页 -->
-          <div class="pagination-container" v-if="!drillDownLoading && drillDownList.length > 0">
-            <el-pagination background :current-page.sync="drillDownQueryParams.pageNum"
-              :page-size.sync="drillDownQueryParams.pageSize" :page-sizes="[10, 20, 50, 100]"
-              layout="total, sizes, prev, pager, next, jumper" :total="drillDownTotal"
-              @size-change="handleDrillDownSizeChange" @current-change="handleDrillDownCurrentChange"></el-pagination>
-          </div>
-        </div>
+      <!-- 点击图表项或者表格行后弹出弹窗, 数据详情钻取 -->
+      <el-dialog 
+        :title="dialogTitle" 
+        :visible.sync="dialogVisible" 
+        width="80%" 
+        :close-on-click-modal="false"
+      >
+        <!-- 使用封装的钻取表格组件 -->
+        <DrillDownTable 
+          :query-params="drillDownQueryParams" 
+          :item-name="drillDownParams.itemName"
+          :warehouse-name="drillDownParams.warehouseName"
+        />
       </el-dialog>
     </div>
   </div>
@@ -140,18 +103,20 @@
 
 <script>
 import { getMaterialCoilDistributionByType, getMaterialCoilDistributionByWarehouse } from "@/api/wms/coil";
-import { listMaterialCoil } from "@/api/wms/coil";
 import MaterialSelect from "@/components/KLPService/MaterialSelect";
 import * as echarts from 'echarts';
 import RawMaterialInfo from "@/components/KLPService/Renderer/RawMaterialInfo";
 import ProductInfo from "@/components/KLPService/Renderer/ProductInfo";
 import { findItemWithBom } from "@/store/modules/category";
+// 导入封装的钻取表格组件
+import DrillDownTable from './panels/DrillDownTable.vue';
 
 export default {
   components: {
     MaterialSelect,
     RawMaterialInfo,
     ProductInfo,
+    DrillDownTable // 注册组件
   },
   data() {
     return {
@@ -180,20 +145,18 @@ export default {
       // 钻取相关数据
       dialogVisible: false,
       dialogTitle: '',
-      drillDownLoading: false,
-      drillDownList: [],
-      drillDownTotal: 0,
       drillDownParams: {
         itemType: null,
         itemId: null,
         itemName: '',
         warehouseId: null,
         warehouseName: '',
-        dataType: 1
       },
+      // 传给钻取表格组件的查询参数
       drillDownQueryParams: {
-        pageNum: 1,
-        pageSize: 20
+        warehouseId: null,
+        itemType: null,
+        itemId: null
       }
     }
   },
@@ -265,12 +228,7 @@ export default {
             value: item.coilCount,
             itemType: item.itemType,
             itemId: item.itemId,
-            itemStyle: { color: this.getTechColor(index) },
-            // children: [{
-            //   name: `卷数: ${item.coilCount}`,
-            //   value: item.coilCount,
-            //   itemStyle: { color: this.getTechColor(index + 1).replace('rgb', 'rgba').replace(')', ', 0.7)') }
-            // }]
+            itemStyle: { color: this.getTechColor(index) }
           }))
         };
       } else {
@@ -282,12 +240,7 @@ export default {
             value: item.coilCount,
             warehouseId: item.warehouseId,
             warehouseName: item.warehouseName,
-            itemStyle: { color: this.getTechColor(index) },
-            // children: [{
-            //   name: `卷数: ${item.coilCount}`,
-            //   value: item.coilCount,
-            //   itemStyle: { color: this.getTechColor(index + 1).replace('rgb', 'rgba').replace(')', ', 0.7)') }
-            // }]
+            itemStyle: { color: this.getTechColor(index) }
           }))
         };
       }
@@ -497,7 +450,7 @@ export default {
       });
     },
 
-    // 生成物料名称（简化版，实际可根据组件返回值优化）
+    // 生成物料名称
     getMaterialName(item) {
       if (item.itemType === 'product') {
         return `成品(${item.itemId.slice(-6)})`; // 取ID后6位简化显示
@@ -525,7 +478,13 @@ export default {
         itemName: '',
         warehouseId: null,
         warehouseName: '',
-        dataType: 1
+      };
+
+      // 重置传给子组件的查询参数
+      this.drillDownQueryParams = {
+        warehouseId: null,
+        itemType: null,
+        itemId: null
       };
 
       // 根据数据类型设置钻取参数
@@ -533,23 +492,24 @@ export default {
         // 物料统计钻取
         this.drillDownParams.itemType = data.itemType;
         this.drillDownParams.itemId = data.itemId;
+        this.drillDownQueryParams.itemType = data.itemType;
+        this.drillDownQueryParams.itemId = data.itemId;
+        
         // 从store中获取物料名称
         const item = findItemWithBom(data.itemType, data.itemId);
-        console.log('item', item, data);
         this.drillDownParams.itemName = item ? item.itemName : data.name;
         this.dialogTitle = `${data.itemType === 'product' ? '成品' : '原材料'}库存明细 - ${this.drillDownParams.itemName}`;
       } else if (data.warehouseId && data.warehouseName) {
         // 仓库统计钻取
         this.drillDownParams.warehouseId = data.warehouseId;
         this.drillDownParams.warehouseName = data.warehouseName;
+        this.drillDownQueryParams.warehouseId = data.warehouseId;
+        
         this.dialogTitle = `仓库库存明细 - ${data.warehouseName}`;
       }
 
-      // 重置分页并打开弹窗
-      this.drillDownQueryParams.pageNum = 1;
+      // 打开弹窗
       this.dialogVisible = true;
-      // 获取钻取数据
-      this.getDrillDownList();
     },
 
     // 处理表格行点击
@@ -570,64 +530,6 @@ export default {
 
       // 调用图表点击处理函数
       this.handleChartItemClick(clickData);
-    },
-
-    // 获取钻取数据列表
-    getDrillDownList() {
-      this.drillDownLoading = true;
-
-      // 构建查询参数
-      const params = {
-        ...this.drillDownQueryParams,
-        itemType: this.drillDownParams.itemType,
-        itemId: this.drillDownParams.itemId,
-        warehouseId: this.drillDownParams.warehouseId
-      };
-
-      // 调用API获取数据
-      listMaterialCoil(params).then(res => {
-        this.drillDownList = res.rows || [];
-        this.drillDownTotal = res.total || 0;
-        this.drillDownLoading = false;
-      }).catch(error => {
-        console.error('获取钻取数据失败:', error);
-        this.drillDownLoading = false;
-        this.$message.error('获取明细数据失败');
-      });
-    },
-
-    // 处理钻取分页大小变化
-    handleDrillDownSizeChange(val) {
-      this.drillDownQueryParams.pageSize = val;
-      this.getDrillDownList();
-    },
-
-    // 处理钻取当前页变化
-    handleDrillDownCurrentChange(val) {
-      this.drillDownQueryParams.pageNum = val;
-      this.getDrillDownList();
-    },
-
-    // 格式化卷材状态
-    formatCoilStatus(status) {
-      const statusMap = {
-        'IN_STOCK': '在库',
-        'OUT_STOCK': '出库',
-        'TRANSFERING': '转移中',
-        'MAINTAINING': '维护中'
-      };
-      return statusMap[status] || '未知';
-    },
-
-    // 获取卷材状态标签类型
-    getCoilStatusTagType(status) {
-      const typeMap = {
-        'IN_STOCK': 'success',
-        'OUT_STOCK': 'info',
-        'TRANSFERING': 'warning',
-        'MAINTAINING': 'danger'
-      };
-      return typeMap[status] || 'default';
     }
   }
 }
@@ -683,33 +585,6 @@ h3 {
   cursor: pointer;
 }
 
-/* 钻取弹窗样式 */
-.drill-down-content {
-  padding: 10px 0;
-}
-
-.drill-down-header {
-  margin-bottom: 20px;
-  padding-bottom: 10px;
-  border-bottom: 1px solid #f0f0f0;
-}
-
-.drill-down-header .el-tag {
-  margin-right: 10px;
-  margin-bottom: 10px;
-}
-
-.pagination-container {
-  margin-top: 20px;
-  display: flex;
-  justify-content: flex-end;
-}
-
-/* 骨架屏样式 */
-.demo-skeleton {
-  padding: 20px 0;
-}
-
 /* 图表项悬停效果增强 */
 :deep(.echarts-tooltip) {
   border-radius: 6px !important;
diff --git a/klp-ui/src/views/wms/coil/panels/DrillDownTable.vue b/klp-ui/src/views/wms/coil/panels/DrillDownTable.vue
new file mode 100644
index 00000000..501e2da5
--- /dev/null
+++ b/klp-ui/src/views/wms/coil/panels/DrillDownTable.vue
@@ -0,0 +1,202 @@
+<template>
+  <div class="drill-down-content">
+    <!-- 钻取条件显示 -->
+    <div class="drill-down-header">
+      <el-tag size="large" v-if="queryParams.itemType">
+        {{ queryParams.itemType === 'product' ? '成品' : '原材料' }}
+      </el-tag>
+      <el-tag size="large" v-if="itemName" type="primary">
+        {{ itemName }}
+      </el-tag>
+      <el-tag size="large" v-if="warehouseName" type="success">
+        {{ warehouseName }}
+      </el-tag>
+    </div>
+
+    <!-- 加载状态 -->
+    <el-skeleton :loading="loading" animated>
+      <template #template>
+        <div class="demo-skeleton">
+          <el-skeleton-item variant="p" style="width: 80%" />
+          <el-skeleton-item variant="text" style="width: 30%" />
+          <el-skeleton-item variant="text" style="width: 60%" />
+        </div>
+      </template>
+
+      <!-- 钻取表格 -->
+      <el-table 
+        max-height="400" 
+        v-loading="loading" 
+        :data="list" 
+        border 
+        stripe 
+        style="width: 100%"
+        v-if="!loading"
+      >
+        <el-table-column prop="warehouseName" label="仓库名称" align="center" min-width="150"></el-table-column>
+        <el-table-column prop="currentCoilNo" label="当前卷号" align="center" min-width="120"></el-table-column>
+        <el-table-column prop="enterCoilNo" label="入场卷号" align="center" min-width="180"></el-table-column>
+        <el-table-column label="物料类型" align="center" prop="itemType">
+          <template slot-scope="scope">
+            {{ scope.row.itemType == 'product' ? '成品' : '原料' }}
+          </template>
+        </el-table-column>
+        <el-table-column label="产品类型" align="center" min-width="250">
+          <template slot-scope="scope">
+            <ProductInfo v-if="scope.row.itemType === 'product'" :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="更新时间" align="center" prop="updateTime" />
+        <el-table-column prop="grossWeight" label="毛重(kg)" align="center" min-width="100"></el-table-column>
+        <el-table-column prop="netWeight" label="净重(kg)" align="center" min-width="100"></el-table-column>
+      </el-table>
+    </el-skeleton>
+
+    <!-- 分页 -->
+    <div class="pagination-container" v-if="!loading && list.length > 0">
+      <el-pagination 
+        background 
+        :current-page.sync="pageNum"
+        :page-size.sync="pageSize" 
+        :page-sizes="[10, 20, 50, 100]"
+        layout="total, sizes, prev, pager, next, jumper" 
+        :total="total"
+        @size-change="handleSizeChange" 
+        @current-change="handleCurrentChange"
+      ></el-pagination>
+    </div>
+  </div>
+</template>
+
+<script>
+import { listMaterialCoil } from "@/api/wms/coil";
+import RawMaterialInfo from "@/components/KLPService/Renderer/RawMaterialInfo";
+import ProductInfo from "@/components/KLPService/Renderer/ProductInfo";
+
+export default {
+  components: {
+    RawMaterialInfo,
+    ProductInfo
+  },
+  props: {
+    // 查询参数：包含warehouseId, itemType, itemId
+    queryParams: {
+      type: Object,
+      default: () => ({
+        warehouseId: null,
+        itemType: null,
+        itemId: null
+      })
+    },
+    // 物料名称（用于显示标签）
+    itemName: {
+      type: String,
+      default: ''
+    },
+    // 仓库名称（用于显示标签）
+    warehouseName: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      list: [],
+      total: 0,
+      pageNum: 1,
+      pageSize: 20
+    };
+  },
+  watch: {
+    // 监听查询参数变化，重新加载数据
+    queryParams: {
+      deep: true,
+      handler() {
+        // 重置页码
+        this.pageNum = 1;
+        // 重新加载数据
+        this.getList();
+      }
+    }
+  },
+  mounted() {
+    // 初始加载数据
+    this.getList();
+  },
+  methods: {
+    getList() {
+      this.loading = true;
+      
+      // 构建查询参数
+      const params = {
+        pageNum: this.pageNum,
+        pageSize: this.pageSize,
+        itemType: this.queryParams.itemType,
+        itemId: this.queryParams.itemId,
+        warehouseId: this.queryParams.warehouseId
+      };
+
+      // 调用API获取数据
+      listMaterialCoil(params).then(res => {
+        this.list = res.rows || [];
+        this.total = res.total || 0;
+        this.loading = false;
+      }).catch(error => {
+        console.error('获取钻取数据失败:', error);
+        this.loading = false;
+        this.$message.error('获取明细数据失败');
+      });
+    },
+
+    // 处理分页大小变化
+    handleSizeChange(val) {
+      this.pageSize = val;
+      this.getList();
+    },
+
+    // 处理当前页变化
+    handleCurrentChange(val) {
+      this.pageNum = val;
+      this.getList();
+    }
+  }
+};
+</script>
+
+<style scoped>
+.drill-down-content {
+  padding: 10px 0;
+}
+
+.drill-down-header {
+  margin-bottom: 20px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.drill-down-header .el-tag {
+  margin-right: 10px;
+  margin-bottom: 10px;
+}
+
+.pagination-container {
+  margin-top: 20px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+/* 骨架屏样式 */
+.demo-skeleton {
+  padding: 20px 0;
+}
+</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 ff733b45..6b48ab89 100644
--- a/klp-ui/src/views/wms/stock/index.vue
+++ b/klp-ui/src/views/wms/stock/index.vue
@@ -12,18 +12,14 @@
       <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="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-switch v-model="queryParams.mergeBatch" :active-value="1" :inactive-value="0" @change="handleQuery" /> -->
         </el-form-item>
       </el-form>
 
-      <KLPTable v-loading="loading" :data="stockList">
+      <KLPTable v-loading="loading" :data="stockList" @row-click="handleTableRowClick">
         <el-table-column label="物料类型" align="center" prop="itemType">
           <template slot-scope="scope">
             <dict-tag :options="dict.type.stock_item_type" :value="scope.row.itemType" />
@@ -50,17 +46,17 @@
         </el-table-column>
         <el-table-column label="库存数量" align="center" prop="totalQuantity" />
         <el-table-column label="备注" align="center" prop="remark" />
-        <!-- <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
           <template slot-scope="scope">
-            <el-button type="text" size="small" @click="handleTrace(scope.row)">物料追溯</el-button>
+            <el-button type="text" size="small" @click="handleDrillDown(scope.row)">查看明细</el-button>
           </template>
-        </el-table-column> -->
+        </el-table-column>
       </KLPTable>
 
       <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
         @pagination="getList" />
 
-      <!-- 添加或修改库存对话框（保持不变） -->
+      <!-- 添加或修改库存对话框 -->
       <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
         <el-form ref="form" :model="form" :rules="rules" label-width="80px">
           <el-form-item label="仓库/库区/库位ID" prop="warehouseId">
@@ -102,26 +98,25 @@
         <stock-io :data="stockBoxData" @generateBill="handleGenerateBill" />
       </el-dialog>
 
-      <el-dialog :visible.sync="stockTraceVisible" title="物料追溯" width="800px" append-to-body>
-        <el-table :data="stockTraceList" style="width: 100%">
-          <el-table-column label="单据类型" align="center" prop="ioType">
-            <template slot-scope="scope">
-              <dict-tag :options="dict.type.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 
+        :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, delStock, addStock, updateStock, getStockTrace } from "@/api/wms/stock";
+import { listStock, delStock, addStock, updateStock } from "@/api/wms/stock";
 import { addStockIoWithDetail } from "@/api/wms/stockIo";
 import RawMaterialSelect from "@/components/KLPService/RawMaterialSelect";
 import ProductSelect from "@/components/KLPService/ProductSelect";
@@ -131,7 +126,10 @@ import ProductInfo from "@/components/KLPService/Renderer/ProductInfo";
 import BomInfoMini from "@/components/KLPService/Renderer/BomInfoMini";
 import StockIo from './panels/stockIo.vue';
 import WarehouseTree from "@/components/KLPService/WarehouseTree/index.vue";
-import MaterialSelect from "@/components/KLPService/MaterialSelect";  
+import MaterialSelect from "@/components/KLPService/MaterialSelect";
+// 导入钻取表格组件
+import DrillDownTable from '../coil/panels/DrillDownTable.vue';
+import { findItemWithBom } from "@/store/modules/category";
 
 export default {
   name: "Stock",
@@ -145,7 +143,8 @@ export default {
     BomInfoMini,
     StockIo,
     WarehouseTree,
-    MaterialSelect
+    MaterialSelect,
+    DrillDownTable // 注册钻取组件
   },
   data() {
     return {
@@ -208,18 +207,31 @@ export default {
       },
       // 暂存用于创建出库单或移库单的数据
       stockBoxData: [],
-      stockBoxVisible: false,
       // 选中的数据
       selectedRows: [],
-      stockTraceList: [],
-      stockTraceVisible: false,
+      // 钻取相关数据
+      drillDownVisible: false,
+      dialogTitle: '',
+      drillDownParams: {
+        itemType: null,
+        itemId: null,
+        itemName: '',
+        warehouseId: null,
+        warehouseName: '',
+      },
+      // 传给钻取表格组件的查询参数
+      drillDownQueryParams: {
+        warehouseId: null,
+        itemType: null,
+        itemId: null
+      }
     };
   },
   created() {
     this.getList();
   },
   methods: {
-    /** 查询库存：原材料/产品与库区/库位的存放关系列表 */
+    /** 查询库存列表 */
     getList() {
       this.loading = true;
       listStock(this.queryParams).then(response => {
@@ -324,7 +336,6 @@ export default {
     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)
       );
@@ -339,15 +350,46 @@ export default {
     },
     handleViewStockBox() {
       // 查看暂存单据
-      console.log(this.stockBoxData);
       this.stockBoxVisible = true;
     },
-    handleTrace(row) {
-      // 查询对应批次号的的出库和入库单据明细并展示
-      getStockTrace(row.batchNo).then(response => {
-        this.stockTraceList = response.data;
-        this.stockTraceVisible = true;
-      });
+    /** 处理表格行点击 */
+    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
+      };
+
+      // 设置钻取参数
+      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.drillDownParams.itemName}`;
+
+      // 打开弹窗
+      this.drillDownVisible = true;
     }
   }
 };
@@ -397,4 +439,4 @@ export default {
   display: flex;
   flex-direction: column;
 }
-</style>
+</style>
\ No newline at end of file