feat(wms): 新增钻取表格组件并优化库存明细查看功能

新增DrillDownTable组件用于展示库存明细数据
重构stock/index.vue和coil/box.vue使用新组件
优化表格行点击事件处理和数据传递逻辑
移除冗余代码并简化钻取参数处理流程

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>