refactor(出库管理): 重构出库物品清单表格为ele-pro-table组件

src/views/bpm/outgoingManagement/details.vue

@@ -103,189 +103,33 @@
         </div>
         <div class="content-detail mt20">
           <header-title title="出库物品清单" size="16px"></header-title>
-          <el-table
-            ref="productListTable"
-            :data="productList"
-            tooltip-effect="dark"
-            :max-height="300"
-            :header-cell-style="rowClass"
-            border
+          <ele-pro-table
+            ref="table"
+            :columns="columns"
+            :datasource="productList"
+            height="200"
+            full-height="calc(100vh - 116px)"
+            tool-class="ele-toolbar-form"
+            @columns-change="handleColumnChange"
+            :cache-key="cacheKeyUrl"
           >
-            <el-table-column label="序号" type="index" width="50">
-            </el-table-column>
-            <el-table-column
-              minWidth="150"
-              label="出库单号"
-              prop="bizNo"
-              v-if="isIds"
-              align="center"
-              :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="categoryCode"
-              align="center"
-              :show-overflow-tooltip="true"
-            ></el-table-column>
-            <el-table-column
-              label="名称"
-              align="center"
-              prop="categoryName"
-              :show-overflow-tooltip="true"
-            ></el-table-column>
-            <el-table-column
-              v-if="clientEnvironmentId == 4"
-              label="级别"
-              prop="level"
-              align="center"
-            >
-            </el-table-column>
-            <el-table-column
-              label="型号"
-              align="center"
-              prop="categoryModel"
-              :show-overflow-tooltip="true"
-            ></el-table-column>
-            <el-table-column
-              label="规格"
-              align="center"
-              prop="specification"
-              :show-overflow-tooltip="true"
-            ></el-table-column>
-            <el-table-column
-              label="牌号"
-              align="center"
-              prop="brandNum"
-              :show-overflow-tooltip="true"
-            ></el-table-column>
-            <el-table-column
-              v-for="(item, index) in newColumns"
-              :label="item.label"
-              :align="item.align"
-              :prop="item.prop"
-              :show-overflow-tooltip="item.showOverflowTooltip"
-            ></el-table-column>
-            <el-table-column
-              label="批次号"
-              prop="batchNo"
-              align="center"
-              :show-overflow-tooltip="true"
-            >
-            </el-table-column>
-
-            <el-table-column
-              label="包装数量"
-              v-if="clientEnvironmentId == 3"
-              prop="packingQuantity"
-              align="center"
-            >
-              <template slot-scope="{ row, $index }">
-                {{ row.packingQuantity }} {{ row.packingUnit }}
-              </template>
-            </el-table-column>
-            <el-table-column
-              v-else
-              label="包装数量"
-              prop="packingQuantity"
-              width="80"
-            ></el-table-column>
-            <el-table-column
-              v-if="clientEnvironmentId == 3"
-              label="最小包装单元"
-              align="center"
-              width="120"
-              prop="minPackingQuantity"
-            >
-              <template slot-scope="{ row, $index }">
-                {{ row.minPackingQuantity }} {{ row.measureUnit }} /{{
-                  row.packingUnit
-                }}
-              </template>
-            </el-table-column>
-            <el-table-column
-              v-else
-              label="单位"
-              prop="packingUnit"
-            ></el-table-column>
-            <el-table-column
-              label="计量数量"
-              prop="measureQuantity"
-              :show-overflow-tooltip="true"
-            ></el-table-column>
-            <el-table-column
-              label="计量单位"
-              prop="measureUnit"
-            ></el-table-column>
-            <el-table-column
-              label="重量"
-              prop="weight"
-              align="center"
-              :show-overflow-tooltip="true"
-            >
-            </el-table-column>
-            <el-table-column
-              label="重量单位"
-              prop="weightUnit"
-              align="center"
-              :show-overflow-tooltip="true"
-            >
-            </el-table-column>
-            <el-table-column label="机型" prop="modelKey" width="200">
-            </el-table-column>
-            <el-table-column label="颜色" prop="colorKey" width="200">
-            </el-table-column>
-            <el-table-column
-              label="单价"
-              prop="price"
-              align="center"
-              v-if="isPrice == 1"
-            >
-              <template slot-scope="{ row }">
-                <template>
-                  {{ row.price ? row.price : ' ' + '元' }}/{{ row.measureUnit }}
-                </template>
-              </template>
-            </el-table-column>
-            <el-table-column label="锁定数量" prop="lockQuantity" width="100">
-            </el-table-column>
-            <el-table-column
-              label="库存"
-              prop="stockNum"
-              align="center"
-              :show-overflow-tooltip="true"
-            >
-            </el-table-column>
-            <el-table-column
-              v-if="isPrice == 1"
-              label="金额"
-              align="center"
-              prop="contentImage"
-              :show-overflow-tooltip="true"
-            >
-              <template slot-scope="{ row, $index }">
-                {{ row.totalMoney ? row.totalMoney : 0 }}
-              </template>
-            </el-table-column>
-            <el-table-column
-              v-if="clientEnvironmentId == 4"
-              label="采购原因"
-              align="center"
-              prop="purpose"
-              :show-overflow-tooltip="true"
-            ></el-table-column>
-            <!-- <el-table-column
-              label="仓库"
-              prop="warehouseName"
-              :show-overflow-tooltip="true"
-            >
-            </el-table-column> -->
-          </el-table>
+            <!-- 包装数量列 -->
+            <template v-if="clientEnvironmentId == 3" v-slot:packingQuantity="{ row }">
+              {{ row.packingQuantity }} {{ row.packingUnit }}
+            </template>
+            <!-- 最小包装单元列 -->
+            <template v-if="clientEnvironmentId == 3" v-slot:minPackingQuantity="{ row }">
+              {{ row.minPackingQuantity }} {{ row.measureUnit }} /{{ row.packingUnit }}
+            </template>
+            <!-- 单价列 -->
+            <template v-if="isPrice == 1" v-slot:price="{ row }">
+              {{ row.price ? row.price : ' ' + '元' }}/{{ row.measureUnit }}
+            </template>
+            <!-- 金额列 -->
+            <template v-if="isPrice == 1" v-slot:totalMoney="{ row }">
+              {{ row.totalMoney ? row.totalMoney : 0 }}
+            </template>
+          </ele-pro-table>
         </div>
         <div class="mt20">
           <header-title :title="`包装明细`" size="16px"></header-title>
@@ -509,8 +353,10 @@
   } from '@/utils/dict/index';
   import { mapGetters, mapActions } from 'vuex';
   import { parameterGetByCode } from '@/api/main/index.js';
+  import tableColumnsMixin from '@/mixins/tableColumnsMixin';
 
   export default {
+    mixins: [tableColumnsMixin],
     directives: {
       'el-table-infinite-scroll': elTableInfiniteScroll
     },
@@ -536,6 +382,7 @@
     },
     data() {
       return {
+        cacheKeyUrl: 'wt-outgoing-details',
         newColumns: [], // 动态表头
         qualityStatus, // 质检状态 0未检 1已检
         qualityResults, // 质检结果 0无 1合格 2不合格
@@ -607,6 +454,227 @@
       ...mapGetters(['getDictValue']),
       clientEnvironmentId() {
         return this.$store.state.user.info.clientEnvironmentId;
+      },
+      // 出库物品清单表格列配置
+      columns() {
+        const columns = [
+          {
+            label: '序号',
+            type: 'index',
+            width: 50,
+            align: 'center'
+          }
+        ];
+        
+        // 出库单号 - 条件显示
+        if (this.isIds) {
+          columns.push({
+            label: '出库单号',
+            prop: 'bizNo',
+            minWidth: 150,
+            align: 'center',
+            showOverflowTooltip: true
+          });
+        }
+        
+        // 基础列
+        columns.push(
+          {
+            label: '仓库',
+            prop: 'warehouseName',
+            width: 150,
+            showOverflowTooltip: true
+          },
+          {
+            label: '编码',
+            prop: 'categoryCode',
+            align: 'center',
+            width: 160,
+            showOverflowTooltip: true
+          },
+          {
+            label: '名称',
+            width: 160,
+            prop: 'categoryName',
+            align: 'center',
+            showOverflowTooltip: true
+          }
+        );
+        
+        // 级别 - 仅 clientEnvironmentId == 4 时显示
+        if (this.clientEnvironmentId == 4) {
+          columns.push({
+            label: '级别',
+            prop: 'level',
+            align: 'center'
+          });
+        }
+        
+        // 型号、规格、牌号
+        columns.push(
+          {
+            label: '型号',
+            prop: 'categoryModel',
+            align: 'center',
+            width: 150,
+            showOverflowTooltip: true
+          },
+          {
+            label: '规格',
+            prop: 'specification',
+            align: 'center',
+            showOverflowTooltip: true
+          },
+          {
+            label: '牌号',
+            prop: 'brandNum',
+            align: 'center',
+            showOverflowTooltip: true
+          }
+        );
+        
+        // 动态列
+        this.newColumns.forEach(item => {
+          columns.push({
+            label: item.label,
+            prop: item.prop,
+            align: item.align,
+            width: 120,
+            showOverflowTooltip: item.showOverflowTooltip
+          });
+        });
+        
+        // 批次号
+        columns.push({
+          label: '批次号',
+          prop: 'batchNo',
+          width: 120,
+          align: 'center',
+          showOverflowTooltip: true
+        });
+        
+        // 包装数量 - 根据 clientEnvironmentId 显示不同内容
+        if (this.clientEnvironmentId == 3) {
+          columns.push({
+            label: '包装数量',
+            prop: 'packingQuantity',
+            align: 'center',
+            slot: 'packingQuantity'
+          });
+        } else {
+          columns.push({
+            label: '包装数量',
+            prop: 'packingQuantity',
+            width: 80
+          });
+        }
+        
+        // 最小包装单元/单位 - 根据 clientEnvironmentId 显示
+        if (this.clientEnvironmentId == 3) {
+          columns.push({
+            label: '最小包装单元',
+            prop: 'minPackingQuantity',
+            align: 'center',
+            width: 120,
+            slot: 'minPackingQuantity'
+          });
+        } else {
+          columns.push({
+            label: '单位',
+            prop: 'packingUnit'
+          });
+        }
+        
+        // 计量数量、计量单位
+        columns.push(
+          {
+            label: '计量数量',
+            prop: 'measureQuantity',
+            showOverflowTooltip: true
+          },
+          {
+            label: '计量单位',
+            prop: 'measureUnit'
+          }
+        );
+        
+        // 重量、重量单位
+        columns.push(
+          {
+            label: '重量',
+            prop: 'weight',
+            align: 'center',
+            showOverflowTooltip: true
+          },
+          {
+            label: '重量单位',
+            prop: 'weightUnit',
+            align: 'center',
+            showOverflowTooltip: true
+          }
+        );
+        
+        // 机型、颜色
+        columns.push(
+          {
+            label: '机型',
+            prop: 'modelKey',
+            width: 150
+          },
+          {
+            label: '颜色',
+            prop: 'colorKey',
+            width: 150
+          }
+        );
+        
+        // 单价 - 条件显示
+        if (this.isPrice == 1) {
+          columns.push({
+            label: '单价',
+            prop: 'price',
+            align: 'center',
+            slot: 'price'
+          });
+        }
+        
+        // 锁定数量、库存
+        columns.push(
+          {
+            label: '锁定数量',
+            prop: 'lockQuantity',
+            width: 100
+          },
+          {
+            label: '库存',
+            prop: 'stockNum',
+            align: 'center',
+            showOverflowTooltip: true
+          }
+        );
+        
+        // 金额 - 条件显示
+        if (this.isPrice == 1) {
+          columns.push({
+            label: '金额',
+            prop: 'totalMoney',
+            align: 'center',
+            showOverflowTooltip: true,
+            slot: 'totalMoney'
+          });
+        }
+        
+        // 采购原因 - 仅 clientEnvironmentId == 4 时显示
+        if (this.clientEnvironmentId == 4) {
+          columns.push({
+            label: '采购原因',
+            prop: 'purpose',
+            align: 'center',
+            showOverflowTooltip: true
+          });
+        }
+        
+        return columns;
       }
     },
     created() {

src/views/bpm/outgoingManagement/outbound.vue

@@ -175,176 +175,29 @@
         <div>
           <header-title title="出库物品清单"></header-title>
           <div class="mt10 form-table">
-            <el-table
-              ref="productListTable"
-              :data="productList"
-              tooltip-effect="dark"
-              :max-height="300"
-              :header-cell-style="rowClass"
-              border
-            >
-              <el-table-column label="序号" type="index" width="50">
-              </el-table-column>
-              <el-table-column
-                label="编码"
-                prop="categoryCode"
-                align="center"
-                :show-overflow-tooltip="true"
-              ></el-table-column>
-              <el-table-column
-                label="名称"
-                align="center"
-                prop="categoryName"
-                :show-overflow-tooltip="true"
-              ></el-table-column>
-              <el-table-column
-                v-if="clientEnvironmentId == 4"
-                label="级别"
-                prop="level"
-                align="center"
-              >
-              </el-table-column>
-              <el-table-column
-                label="型号"
-                align="center"
-                prop="categoryModel"
-                :show-overflow-tooltip="true"
-              ></el-table-column>
-              <el-table-column
-                label="规格"
-                align="center"
-                prop="specification"
-                :show-overflow-tooltip="true"
-              ></el-table-column>
-              <el-table-column
-                label="牌号"
-                align="center"
-                prop="brandNum"
-                :show-overflow-tooltip="true"
-              ></el-table-column>
-              <el-table-column
-                v-for="(item, index) in newColumns"
-                :label="item.label"
-                :align="item.align"
-                :key="item.prop"
-                :prop="item.prop"
-                :show-overflow-tooltip="item.showOverflowTooltip"
-              ></el-table-column>
-              <el-table-column
-                label="批次号"
-                prop="batchNo"
-                align="center"
-                :show-overflow-tooltip="true"
-              >
-              </el-table-column>
-              <el-table-column
-                label="包装数量"
-                prop="packingQuantity"
-                width="80"
-              ></el-table-column>
-              <el-table-column
-                label="单位"
-                prop="packingUnit"
-              ></el-table-column>
-              <el-table-column
-                label="计量数量"
-                prop="measureQuantity"
-                :show-overflow-tooltip="true"
-              ></el-table-column>
-              <el-table-column
-                label="计量单位"
-                prop="measureUnit"
-              ></el-table-column>
-              <el-table-column
-                label="重量"
-                prop="weight"
-                align="center"
-                :show-overflow-tooltip="true"
-              >
-              </el-table-column>
-              <el-table-column
-                label="重量单位"
-                prop="weightUnit"
-                align="center"
-                :show-overflow-tooltip="true"
-              >
-              </el-table-column>
-              <el-table-column label="机型" prop="modelKey" width="200">
-              </el-table-column>
-              <el-table-column label="颜色" prop="colorKey" width="200">
-              </el-table-column>
-              <el-table-column label="锁定数量" prop="lockQuantity" width="100">
-              </el-table-column>
-              <el-table-column
-                label="库存"
-                prop="stockNum"
-                align="center"
-                :show-overflow-tooltip="true"
-              >
-              </el-table-column>
-              <el-table-column
-                label="单价"
-                prop="price"
-                align="center"
-                v-if="isPrice == 1"
-              >
-                <template slot-scope="{ row }">
-                  <template>
-                    {{ row.price ? row.price : ' ' + '元' }}/{{
-                      row.measureUnit
-                    }}
-                  </template>
-                </template>
-              </el-table-column>
-
-              <el-table-column
-                label="金额"
-                align="center"
-                prop="totalMoney"
-                :show-overflow-tooltip="true"
-                v-if="isPrice == 1"
-              >
-                <template slot-scope="{ row, $index }">
-                  {{ row.totalMoney ? row.totalMoney : 0 }}
-                </template>
-              </el-table-column>
-              <el-table-column
-                v-if="clientEnvironmentId == 4"
-                label="采购原因"
-                align="center"
-                prop="purpose"
-                :show-overflow-tooltip="true"
-              ></el-table-column>
-              <el-table-column
-                label="仓库"
-                prop="warehouseName"
-                :show-overflow-tooltip="true"
-              >
-              </el-table-column>
-              <el-table-column
-                prop="supplierName"
-                label="供应商"
-                min-width="200"
-                :show-overflow-tooltip="true"
-              ></el-table-column>
-              <el-table-column
-                prop="supplierCode"
-                label="供应商代号"
-                min-width="200"
-                :show-overflow-tooltip="true"
-              ></el-table-column>
-              <el-table-column label="操作" width="120" align="center">
-                <template slot="header" slot-scope="scope"> 操作 </template>
-                <template slot-scope="{ row, $index }">
-                  <el-link
-                    type="danger"
-                    @click="deleteProductList(row, $index)"
-                    v-if="isEdit"
-                    >删除</el-link
-                  >
-                </template>
-              </el-table-column>
-            </el-table>
+            <ele-pro-table
+            ref="table"
+            :columns="columns"
+            :datasource="productList"
+            height="200"
+            full-height="calc(100vh - 116px)"
+            tool-class="ele-toolbar-form"
+            @columns-change="handleColumnChange"
+            :cache-key="cacheKeyUrl"
+          >
+              <!-- 单价列 -->
+              <template v-if="isPrice == 1" v-slot:price="{ row }">
+                {{ row.price ? row.price : ' ' + '元' }}/{{ row.measureUnit }}
+              </template>
+              <!-- 金额列 -->
+              <template v-if="isPrice == 1" v-slot:totalMoney="{ row }">
+                {{ row.totalMoney ? row.totalMoney : 0 }}
+              </template>
+              <!-- 操作列 -->
+              <template v-if="isEdit" v-slot:action="{ row, $index }">
+                <el-link type="danger" @click="deleteProductList(row, $index)">删除</el-link>
+              </template>
+            </ele-pro-table>
           </div>
           <header-title class="mt20" title="包装清单"></header-title>
           <div class="mt10 form-table">
@@ -546,8 +399,10 @@
   import { deepClone } from '@/components/FormGenerator/utils/index';
   import { mapGetters } from 'vuex';
   import { parameterGetByCode } from '@/api/main/index.js';
+  import tableColumnsMixin from '@/mixins/tableColumnsMixin';
 
   export default {
+    mixins: [tableColumnsMixin],
     components: {
       selectTree,
       AssetsDialog
@@ -568,6 +423,7 @@
     },
     data() {
       return {
+        cacheKeyUrl: 'wt-outbound-table',
         newColumns: [], // 动态表头
         goodsLists: [], // 商品列表
         productList: [], // 产品列表
@@ -635,6 +491,213 @@
       ...mapGetters(['user']),
       clientEnvironmentId() {
         return this.$store.state.user.info.clientEnvironmentId;
+      },
+      // 出库物品清单表格列配置
+      columns() {
+        const columns = [
+          {
+            label: '序号',
+            type: 'index',
+            width: 50,
+            align: 'center'
+          },
+          {
+            label: '编码',
+            prop: 'categoryCode',
+            align: 'center',
+            width: 150,
+            showOverflowTooltip: true
+          },
+          {
+            label: '名称',
+            prop: 'categoryName',
+            align: 'center',
+            width: 150,
+            showOverflowTooltip: true
+          }
+        ];
+        
+        // 级别 - 仅 clientEnvironmentId == 4 时显示
+        if (this.clientEnvironmentId == 4) {
+          columns.push({
+            label: '级别',
+            prop: 'level',
+            align: 'center'
+          });
+        }
+        
+        // 型号、规格、牌号
+        columns.push(
+          {
+            label: '型号',
+            prop: 'categoryModel',
+            align: 'center',
+            showOverflowTooltip: true
+          },
+          {
+            label: '规格',
+            prop: 'specification',
+            align: 'center',
+            showOverflowTooltip: true
+          },
+          {
+            label: '牌号',
+            prop: 'brandNum',
+            align: 'center',
+            showOverflowTooltip: true
+          }
+        );
+        
+        // 动态列
+        this.newColumns.forEach(item => {
+          columns.push({
+            label: item.label,
+            prop: item.prop,
+            width: 120,
+            align: item.align,
+            showOverflowTooltip: item.showOverflowTooltip
+          });
+        });
+        
+        // 批次号
+        columns.push({
+          label: '批次号',
+          prop: 'batchNo',
+          align: 'center',
+          showOverflowTooltip: true
+        });
+        
+        // 包装数量、单位
+        columns.push(
+          {
+            label: '包装数量',
+            prop: 'packingQuantity',
+            width: 80
+          },
+          {
+            label: '单位',
+            prop: 'packingUnit'
+          }
+        );
+        
+        // 计量数量、计量单位
+        columns.push(
+          {
+            label: '计量数量',
+            prop: 'measureQuantity',
+            showOverflowTooltip: true
+          },
+          {
+            label: '计量单位',
+            prop: 'measureUnit'
+          }
+        );
+        
+        // 重量、重量单位
+        columns.push(
+          {
+            label: '重量',
+            prop: 'weight',
+            align: 'center',
+            showOverflowTooltip: true
+          },
+          {
+            label: '重量单位',
+            prop: 'weightUnit',
+            align: 'center',
+            showOverflowTooltip: true
+          }
+        );
+        
+        // 机型、颜色、锁定数量、库存
+        columns.push(
+          {
+            label: '机型',
+            prop: 'modelKey',
+            width: 150
+          },
+          {
+            label: '颜色',
+            prop: 'colorKey',
+            width: 150
+          },
+          {
+            label: '锁定数量',
+            prop: 'lockQuantity',
+            width: 100
+          },
+          {
+            label: '库存',
+            prop: 'stockNum',
+            align: 'center',
+            showOverflowTooltip: true
+          }
+        );
+        
+        // 单价 - 条件显示
+        if (this.isPrice == 1) {
+          columns.push({
+            label: '单价',
+            prop: 'price',
+            align: 'center',
+            slot: 'price'
+          });
+        }
+        
+        // 金额 - 条件显示
+        if (this.isPrice == 1) {
+          columns.push({
+            label: '金额',
+            prop: 'totalMoney',
+            align: 'center',
+            showOverflowTooltip: true,
+            slot: 'totalMoney'
+          });
+        }
+        
+        // 采购原因 - 仅 clientEnvironmentId == 4 时显示
+        if (this.clientEnvironmentId == 4) {
+          columns.push({
+            label: '采购原因',
+            prop: 'purpose',
+            align: 'center',
+            showOverflowTooltip: true
+          });
+        }
+        
+        // 仓库、供应商、供应商代号
+        columns.push(
+          {
+            label: '仓库',
+            prop: 'warehouseName',
+            width: 150,
+            showOverflowTooltip: true
+          },
+          {
+            label: '供应商',
+            prop: 'supplierName',
+            minWidth: 150,
+            showOverflowTooltip: true
+          },
+          {
+            label: '供应商代号',
+            prop: 'supplierCode',
+            minWidth: 150,
+            showOverflowTooltip: true
+          }
+        );
+        
+        // 操作列 - 仅在可编辑时显示
+        if (this.isEdit) {
+          columns.push({
+            label: '操作',
+            width: 120,
+            align: 'center',
+            slot: 'action'
+          });
+        }
+        
+        return columns;
       }
     },
     async created() {