Bläddra i källkod

refactor(views): 重构 stockManagement/details.vue 中的产品信息表格,使用 ele-pro-table 组件替代原有的 el-table 实现,添加表格列缓存功能,提升用户体验

liujt 1 månad sedan
förälder
incheckning
9c1d9d00da
2 ändrade filer med 434 tillägg och 236 borttagningar
  1. 432 234
      src/views/bpm/stockManagement/details.vue
  2. 2 2
      vue.config.js

+ 432 - 234
src/views/bpm/stockManagement/details.vue

@@ -113,239 +113,35 @@
         </div>
         <div class="content-detail mt20">
           <header-title title="产品信息" size="16px"></header-title>
-          <el-table
+          <ele-pro-table
             ref="productListTable"
-            :data="productList"
-            tooltip-effect="dark"
-            :max-height="300"
-            :header-cell-style="rowClass"
-            border
+            :datasource="productList"
+            :columns="columns"
+            :needPage="false"
+            max-height="300px"
+            row-key="id"
+            :cache-key="cacheKeyUrl"
+            @columns-change="handleColumnChange"
           >
-            <el-table-column label="序号" type="index" width="50">
-            </el-table-column>
-            <el-table-column
-              v-if="isIds"
-              minWidth="150"
-              label="入库单号"
-              prop="bizNo"
-              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="isUnpack"
-              width="100"
-              align="center"
-            >
-              <template slot-scope="{ row }">
-                {{ row.isUnpack == 1 ? '是' : '否' }}
-              </template>
-            </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="生产要求"
-                align="center"
-                width="200"
-                prop="productionRequirements"
-                :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="unitPrice"
-              align="center"
-              v-if="isPrice == 1"
-            >
-              <template slot-scope="{ row }">
-                <template>
-                  {{ row.unitPrice ? row.unitPrice + '/元' : '' }}
-                </template>
-              </template>
-            </el-table-column>
-
-            <el-table-column
-              label="金额"
-              align="center"
-              prop="totalMoney"
-              v-if="isPrice == 1"
-              :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="supplierName"
-              :show-overflow-tooltip="true"
-            >
-            </el-table-column>
-            <el-table-column
-              label="供应商代号"
-              prop="supplierCode"
-              width="120"
-              :show-overflow-tooltip="true"
-            >
-            </el-table-column>
-            <el-table-column
-              label="产地"
-              align="center"
-              prop="provenance"
-              v-if="bizType == 2"
-              :show-overflow-tooltip="true"
-              width="120"
-            >
-              <template slot-scope="{ row, $index }">
-                {{
-                  row.provenance &&
-                  row.provenance
-                    .map((item) => getDictValue('产地', item))
-                    .join(',')
-                }}
-              </template>
-            </el-table-column>
-            <el-table-column
-              label="生产日期"
-              prop="detailProductionDate"
-              :show-overflow-tooltip="true"
-            >
-            </el-table-column>
-            <el-table-column
-              label="采购日期"
-              prop="detailPurchaseDate"
-              :show-overflow-tooltip="true"
-            >
-            </el-table-column>
-            <el-table-column
-              label="失效日期"
-              prop="detailExpireDate"
-              :show-overflow-tooltip="true"
-            >
-            </el-table-column>
-          </el-table>
+            <template v-slot:packingQuantity="{ row }">
+              {{ row.packingQuantity }} {{ row.packingUnit }}
+            </template>
+            <template v-slot:minPackingQuantity="{ row }">
+              {{ row.minPackingQuantity }} {{ row.measureUnit }} /{{ row.packingUnit }}
+            </template>
+            <template v-slot:isUnpack="{ row }">
+              {{ row.isUnpack == 1 ? '是' : '否' }}
+            </template>
+            <template v-slot:unitPrice="{ row }">
+              {{ row.unitPrice ? row.unitPrice + '/元' : '' }}
+            </template>
+            <template v-slot:totalMoney="{ row }">
+              {{ row.totalMoney ? row.totalMoney : 0 }}
+            </template>
+            <template v-slot:provenance="{ row }">
+              {{ row.provenance && row.provenance.map((item) => getDictValue('产地', item)).join(',') }}
+            </template>
+          </ele-pro-table>
         </div>
         <div class="mt20">
           <header-title :title="`包装明细`" size="16px"></header-title>
@@ -644,11 +440,13 @@
   } from '@/utils/dict/index';
   import { mapGetters, mapActions } from 'vuex';
   import { parameterGetByCode } from '@/api/main/index.js';
+  import tableColumnsMixin from '@/mixins/tableColumnsMixin.js';
 
   export default {
     directives: {
       'el-table-infinite-scroll': elTableInfiniteScroll
     },
+    mixins: [tableColumnsMixin],
     // components: { fileUpload },
     props: {
       bizType: {
@@ -675,7 +473,8 @@
     },
     data() {
       return {
-        newColumns: [], // 动态表头
+        cacheKeyUrl: 'stockManagement-productList-20260508',
+        dinamicoColumns: [], // 动态表头
         qualityFile: [], // 回执附件
         qualityStatus, // 质检状态 0未检 1已检
         qualityResults, // 质检结果 0无 1合格 2不合格
@@ -693,7 +492,9 @@
         stepsTitle: '已完成',
         stepsStatus: 'success',
         active: 0,
-        isPrice: 1
+        isPrice: 1,
+        columnsVersion: 1,
+        tabMixinsInit: true,
       };
     },
     watch: {
@@ -729,6 +530,403 @@
       ...mapGetters(['getDictValue']),
       clientEnvironmentId() {
         return this.$store.state.user.info.clientEnvironmentId;
+      },
+      columns() {
+        let columnsVersion = this.columnsVersion;
+        const columns = [
+          {
+            columnKey: 'index',
+            label: '序号',
+            type: 'index',
+            width: 50,
+            align: 'center'
+          }
+        ];
+        if (this.isIds) {
+          columns.push({
+            minWidth: 150,
+            label: '入库单号',
+            prop: 'bizNo',
+            align: 'center',
+            showOverflowTooltip: true
+          });
+        }
+        columns.push(
+          {
+            label: '仓库',
+            prop: 'warehouseName',
+            showOverflowTooltip: true
+          },
+          {
+            label: '编码',
+            prop: 'categoryCode',
+            align: 'center',
+            showOverflowTooltip: true
+          },
+          {
+            label: '名称',
+            align: 'center',
+            prop: 'categoryName',
+            showOverflowTooltip: true
+          }
+        );
+        if (this.clientEnvironmentId == 4) {
+          columns.push({
+            label: '级别',
+            prop: 'level',
+            align: 'center'
+          });
+        }
+        columns.push(
+          {
+            label: '型号',
+            align: 'center',
+            prop: 'categoryModel',
+            showOverflowTooltip: true
+          },
+          {
+            label: '规格',
+            align: 'center',
+            prop: 'specification',
+            showOverflowTooltip: true
+          },
+          {
+            label: '牌号',
+            align: 'center',
+            prop: 'brandNum',
+            showOverflowTooltip: true
+          }
+        );
+        // 动态表头
+        if (this.dinamicoColumns && this.dinamicoColumns.length) {
+          this.dinamicoColumns.forEach((item) => {
+            columns.push({
+              label: item.label,
+              align: item.align,
+              prop: item.prop,
+              showOverflowTooltip: item.showOverflowTooltip
+            });
+          });
+        }
+        columns.push({
+          label: '批次号',
+          prop: 'batchNo',
+          align: 'center',
+          showOverflowTooltip: true
+        });
+        if (this.clientEnvironmentId == 3) {
+          columns.push({
+            label: '数量',
+            prop: 'packingQuantity',
+            align: 'center',
+            slot: 'packingQuantity'
+          },
+          {
+            label: '最小包装单元',
+            align: 'center',
+            width: 120,
+            prop: 'minPackingQuantity',
+            slot: 'minPackingQuantity'
+          });
+        } else {
+          columns.push(
+            {
+              label: '数量',
+              prop: 'packingQuantity',
+              width: 80
+            },
+            {
+              label: '单位',
+              prop: 'packingUnit'
+            }
+          );
+        }
+        columns.push(
+          {
+            label: '允许拆包',
+            prop: 'isUnpack',
+            width: 100,
+            align: 'center',
+            slot: 'isUnpack'
+          },
+          {
+            label: '计量数量',
+            prop: 'measureQuantity',
+            showOverflowTooltip: true
+          },
+          {
+            label: '计量单位',
+            prop: 'measureUnit'
+          },
+          {
+            label: '重量',
+            prop: 'weight',
+            align: 'center',
+            showOverflowTooltip: true
+          },
+          {
+            label: '重量单位',
+            prop: 'weightUnit',
+            align: 'center',
+            showOverflowTooltip: true
+          },
+          {
+            label: '生产要求',
+            align: 'center',
+            width: 200,
+            prop: 'productionRequirements',
+            showOverflowTooltip: true
+          },
+          {
+            label: '机型',
+            prop: 'modelKey',
+            width: 200
+          },
+          {
+            label: '颜色',
+            prop: 'colorKey',
+            width: 200
+          }
+        );
+        if (this.isPrice == 1) {
+          columns.push(
+            {
+              label: '单价',
+              prop: 'unitPrice',
+              align: 'center',
+              slot: 'unitPrice'
+            },
+            {
+              label: '金额',
+              align: 'center',
+              prop: 'totalMoney',
+              showOverflowTooltip: true,
+              slot: 'totalMoney'
+            }
+          );
+        }
+        if (this.clientEnvironmentId == 4) {
+          columns.push({
+            label: '采购原因',
+            align: 'center',
+            prop: 'purpose',
+            showOverflowTooltip: true
+          });
+        }
+        columns.push(
+          {
+            label: '供应商',
+            prop: 'supplierName',
+            showOverflowTooltip: true
+          },
+          {
+            label: '供应商代号',
+            prop: 'supplierCode',
+            width: 120,
+            showOverflowTooltip: true
+          }
+        );
+        if (this.bizType == 2) {
+          columns.push({
+            label: '产地',
+            align: 'center',
+            prop: 'provenance',
+            showOverflowTooltip: true,
+            width: 120,
+            slot: 'provenance'
+          });
+        }
+        columns.push(
+          {
+            label: '生产日期',
+            prop: 'detailProductionDate',
+            showOverflowTooltip: true
+          },
+          {
+            label: '采购日期',
+            prop: 'detailPurchaseDate',
+            showOverflowTooltip: true
+          },
+          {
+            label: '失效日期',
+            prop: 'detailExpireDate',
+            showOverflowTooltip: true
+          }
+        );
+        return columns;
+      },
+
+      packingColumns() {
+        return [
+          {
+            columnKey: 'index',
+            label: '序号',
+            type: 'index',
+            width: 50,
+            align: 'center'
+          },
+          {
+            label: '批次号',
+            prop: 'batchNo',
+            width: 80,
+            showOverflowTooltip: true
+          },
+          {
+            label: '包装编码',
+            prop: 'packageNo',
+            width: 130,
+            showOverflowTooltip: true
+          },
+          {
+            label: '名称',
+            prop: 'categoryName',
+            width: 120,
+            showOverflowTooltip: true
+          },
+          {
+            label: '编码',
+            prop: 'categoryCode',
+            width: 120,
+            showOverflowTooltip: true
+          },
+          {
+            label: '型号',
+            prop: 'categoryModel',
+            width: 80,
+            showOverflowTooltip: true
+          },
+          {
+            label: '规格',
+            prop: 'specification',
+            width: 80,
+            showOverflowTooltip: true
+          },
+          {
+            label: '牌号',
+            prop: 'brandNum',
+            width: 80,
+            showOverflowTooltip: true
+          },
+          {
+            label: '发货条码',
+            prop: 'barcodes',
+            showOverflowTooltip: true
+          },
+          {
+            label: '包装数量',
+            prop: 'packingQuantity',
+            showOverflowTooltip: true
+          },
+          {
+            label: '包装单位',
+            prop: 'packingUnit',
+            showOverflowTooltip: true
+          },
+          {
+            label: '计量数量',
+            prop: 'measureQuantity',
+            showOverflowTooltip: true
+          },
+          {
+            label: '计量单位',
+            prop: 'measureUnit',
+            showOverflowTooltip: true
+          },
+          {
+            label: '物料代号',
+            prop: 'materielDesignation',
+            showOverflowTooltip: true
+          },
+          {
+            label: '客户代号',
+            prop: 'clientCode',
+            showOverflowTooltip: true,
+            slot: 'clientCode'
+          },
+          {
+            label: '刻码',
+            prop: 'engrave',
+            showOverflowTooltip: true
+          },
+          {
+            label: '重量',
+            prop: 'weight',
+            showOverflowTooltip: true
+          },
+          {
+            label: '重量单位',
+            prop: 'weightUnit',
+            showOverflowTooltip: true
+          },
+          {
+            label: '机型',
+            prop: 'modelKey',
+            width: 200
+          },
+          {
+            label: '颜色',
+            prop: 'colorKey',
+            width: 200
+          },
+          {
+            label: '供应商',
+            prop: 'supplierName',
+            showOverflowTooltip: true
+          },
+          {
+            label: '供应商代号',
+            prop: 'supplierCode',
+            width: 120,
+            showOverflowTooltip: true
+          },
+          {
+            label: '质检结果',
+            prop: 'result',
+            showOverflowTooltip: true,
+            slot: 'result'
+          },
+          {
+            label: '质检状态',
+            prop: 'status',
+            showOverflowTooltip: true,
+            slot: 'status'
+          },
+          {
+            label: '仓库',
+            prop: 'warehouseName',
+            showOverflowTooltip: true
+          },
+          {
+            label: '货区',
+            prop: 'areaName',
+            showOverflowTooltip: true
+          },
+          {
+            label: '货架',
+            prop: 'goodsShelfName',
+            showOverflowTooltip: true
+          },
+          {
+            label: '货位',
+            prop: 'goodsAllocationName',
+            showOverflowTooltip: true
+          },
+          {
+            label: '生产日期',
+            prop: 'productionDate',
+            showOverflowTooltip: true
+          },
+          {
+            label: '采购日期',
+            prop: 'purchaseDate',
+            showOverflowTooltip: true
+          },
+          {
+            label: '失效日期',
+            prop: 'expireDate',
+            showOverflowTooltip: true
+          }
+        ];
       }
     },
     mounted() {
@@ -759,7 +957,7 @@
               showOverflowTooltip: true
             };
           });
-          this.newColumns = [...newRes];
+          this.dinamicoColumns = [...newRes];
         });
       },
       //获取回执附件

+ 2 - 2
vue.config.js

@@ -38,11 +38,11 @@ module.exports = {
         // target: 'http://124.71.68.31:50001', // 测试环境
         // target: 'http://124.71.68.31:50001',
         // target: 'http://192.168.1.105:18086',
-        target: 'http://192.168.1.3:18086',
+        // target: 'http://192.168.1.3:18086',
         // target: 'http://192.168.1.116:18086',
         // target: 'http://192.168.1.3:18086',
         // target: 'http://192.168.1.251:18186',
-        // target: 'http://192.168.1.251:18086',
+        target: 'http://192.168.1.251:18086',
         // target: 'http://192.168.1.3:18086',
         // target: 'http://aiot.zoomwin.com.cn:51001/api',
         // target: 'http://192.168.1.3:18086',