refactor(warehouseManagement): 重构调拨明细页面的表格组件，使用ele-pro-table替代原生el-table，同时通过混入复用表格列配置逻辑，优化代码结构并保留原有功能与展示效果

src/views/warehouseManagement/inventoryAllocation/details.vue

@@ -64,157 +64,15 @@
       <div class="content-detail mt20">
         <HeaderTitle title="调拨明细" size="16px"></HeaderTitle>
         <div class="mt20">
-          <!-- <AssetsCell
-            v-for="(item, index) in detailList"
-            :key="index"
-            :item="item"
-            type="detail"
-          /> -->
-          <el-table
+          <ele-pro-table
             ref="table"
-            :data="detailList"
-            tooltip-effect="dark"
-            :max-height="500"
-            border
-          >
-            <el-table-column label="序号" type="index" width="50">
-            </el-table-column>
-            <el-table-column
-              label="物品编码"
-              prop="categoryCode"
-              :show-overflow-tooltip="true"
-            ></el-table-column>
-            <el-table-column
-              label="物品名称"
-              prop="categoryName"
-              :show-overflow-tooltip="true"
-            ></el-table-column>
-            <el-table-column
-              v-if="infoData.inventoryDimension != 1"
-              label="批次号"
-              prop="batchNo"
-              :show-overflow-tooltip="true"
-            >
-            </el-table-column>
-            <el-table-column
-              label="调出仓库"
-              prop="warehouseName"
-              :show-overflow-tooltip="true"
-            >
-            </el-table-column>
-            <el-table-column
-              label="调出库区"
-              prop="areaName"
-              :show-overflow-tooltip="true"
-            >
-            </el-table-column>
-            <el-table-column
-              label="调出货架"
-              prop="goodsShelfName"
-              :show-overflow-tooltip="true"
-            >
-            </el-table-column>
-            <el-table-column
-              label="调出货位"
-              prop="goodsAllocationName"
-              :show-overflow-tooltip="true"
-            >
-            </el-table-column>
-            <el-table-column
-              label="调入仓库"
-              prop="targetWarehouseName"
-              :show-overflow-tooltip="true"
-            >
-            </el-table-column>
-            <el-table-column
-              label="调入库区"
-              prop="targetAreaName"
-              :show-overflow-tooltip="true"
-            >
-            </el-table-column>
-            <el-table-column
-              label="调入货架"
-              prop="targetGoodsShelfName"
-              :show-overflow-tooltip="true"
-            >
-            </el-table-column>
-            <el-table-column
-              label="调入货位"
-              prop="targetGoodsAllocationName"
-              :show-overflow-tooltip="true"
-            >
-            </el-table-column>
-            <el-table-column
-              label="牌号"
-              prop="brandNum"
-              :show-overflow-tooltip="true"
-            ></el-table-column>
-            <el-table-column
-              label="型号"
-              prop="categoryModel"
-              :show-overflow-tooltip="true"
-            ></el-table-column>
-            <el-table-column
-              label="规格"
-              prop="specification"
-              :show-overflow-tooltip="true"
-            ></el-table-column>
-            <el-table-column
-              label="颜色"
-              prop="colorKey"
-              :show-overflow-tooltip="true"
-            ></el-table-column>
-            <el-table-column
-              label="机型"
-              prop="modeKey"
-              :show-overflow-tooltip="true"
-            ></el-table-column>
-            <el-table-column
-              v-if="infoData.inventoryDimension == 3"
-              label="包装编码"
-              prop="packageNo"
-              :show-overflow-tooltip="true"
-            ></el-table-column>
-            <el-table-column
-              v-if="infoData.inventoryDimension == 3"
-              label="包装数量"
-              prop="packingQuantity"
-              :show-overflow-tooltip="true"
-            ></el-table-column>
-            <el-table-column
-              v-if="infoData.inventoryDimension == 3"
-              label="包装单位"
-              prop="packingUnit"
-              :show-overflow-tooltip="true"
-            ></el-table-column>
-            <el-table-column
-              label="计量数量"
-              prop="measureQuantity"
-              :show-overflow-tooltip="true"
-            ></el-table-column>
-            <el-table-column
-              label="调拨数量"
-              prop="quantity"
-              :show-overflow-tooltip="true"
-            ></el-table-column>
-            <el-table-column
-              label="计量单位"
-              prop="measureUnit"
-              :show-overflow-tooltip="true"
-            ></el-table-column>
-            <el-table-column
-              label="重量"
-              prop="weight"
-              :show-overflow-tooltip="true"
-            >
-            </el-table-column>
-            <el-table-column
-              label="重量单位"
-              prop="weightUnit"
-              :show-overflow-tooltip="true"
-            >
-            </el-table-column>
-          </el-table>
+            :columns="columns"
+            :datasource="detailList"
+            :height="300"
+            :needPage="false"
+            :cache-key="cacheKeyUrl"
+            @columns-change="handleColumnChange"
+          />
         </div>
       </div>
       <div
@@ -250,11 +108,14 @@
   import { allocationType, dimensionType } from '@/utils/dict/warehouse';
   import { useDictLabelFilter } from '@/utils/dict';
   import StatusStep from '@/components/StatusStep/index.vue';
+  import tabMixins from '@/mixins/tableColumnsMixin';
 
   export default {
     components: { AssetsCell, StatusStep, PageHeader },
+    mixins: [tabMixins],
     data() {
       return {
+        cacheKeyUrl: '202605131648-wms-inventoryAllocationDetails',
         allocationType,
         dimensionType,
         auditStatus: [
@@ -305,6 +166,191 @@
         }
         console.log(base, 'base');
         return base;
+      },
+      columns() {
+        const baseColumns = [
+          {
+            columnKey: 'index',
+            label: '序号',
+            type: 'index',
+            width: 55,
+            align: 'center',
+            showOverflowTooltip: true
+          },
+          {
+            prop: 'categoryCode',
+            label: '物品编码',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+          {
+            prop: 'categoryName',
+            label: '物品名称',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 120
+          },
+          {
+            prop: 'batchNo',
+            label: '批次号',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 110,
+            hide: this.infoData.inventoryDimension == 1
+          },
+          {
+            prop: 'warehouseName',
+            label: '调出仓库',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 120
+          },
+          {
+            prop: 'areaName',
+            label: '调出库区',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+          {
+            prop: 'goodsShelfName',
+            label: '调出货架',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+          {
+            prop: 'goodsAllocationName',
+            label: '调出货位',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+          {
+            prop: 'targetWarehouseName',
+            label: '调入仓库',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 120
+          },
+          {
+            prop: 'targetAreaName',
+            label: '调入库区',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+          {
+            prop: 'targetGoodsShelfName',
+            label: '调入货架',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+          {
+            prop: 'targetGoodsAllocationName',
+            label: '调入货位',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+          {
+            prop: 'brandNum',
+            label: '牌号',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 100
+          },
+          {
+            prop: 'categoryModel',
+            label: '型号',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+          {
+            prop: 'specification',
+            label: '规格',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+          {
+            prop: 'colorKey',
+            label: '颜色',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 100
+          },
+          {
+            prop: 'modeKey',
+            label: '机型',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 100
+          },
+          {
+            prop: 'packageNo',
+            label: '包装编码',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 120,
+            hide: this.infoData.inventoryDimension != 3
+          },
+          {
+            prop: 'packingQuantity',
+            label: '包装数量',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 100,
+            hide: this.infoData.inventoryDimension != 3
+          },
+          {
+            prop: 'packingUnit',
+            label: '包装单位',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 100,
+            hide: this.infoData.inventoryDimension != 3
+          },
+          {
+            prop: 'measureQuantity',
+            label: '计量数量',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 100
+          },
+          {
+            prop: 'quantity',
+            label: '调拨数量',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 100
+          },
+          {
+            prop: 'measureUnit',
+            label: '计量单位',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 100
+          },
+          {
+            prop: 'weight',
+            label: '重量',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 100
+          },
+          {
+            prop: 'weightUnit',
+            label: '重量单位',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 100
+          }
+        ];
+        return baseColumns.filter((item) => !item.hide);
       }
     },
     methods: {