feat(库存台账): 添加列表维度选择功能，支持批次维度和包装维度切换

src/views/warehouseManagement/stockLedger/components/details/InventoryDetails.vue

@@ -1,206 +1,241 @@
 <!-- 入库 -->
 <template>
-    <div class="inWarehouse">
-        <ele-pro-table ref="table1" height="calc(100vh - 300px)" :columns="columns" :datasource="datasource"
-            :pageSize="20" row-key="id" :initLoad="false">
-        </ele-pro-table>
-    </div>
+  <div class="inWarehouse">
+    <ele-pro-table
+      ref="table1"
+      height="calc(100vh - 300px)"
+      :columns="columns"
+      :datasource="datasource"
+      :pageSize="20"
+      row-key="id"
+      :initLoad="false"
+    >
+      <template v-slot:toolbar>
+        <div style="display: flex; align-items: center">
+          列表维度:
+          <el-select
+            clearable
+            v-model="dimension"
+            @change="handleChange"
+            placeholder="请选择"
+            style="margin-left: 10px"
+          >
+            <el-option label="批次维度" :value="2"> </el-option>
+            <el-option label="包装维度" :value="3"> </el-option>
+          </el-select>
+        </div>
+      </template>
+    </ele-pro-table>
+  </div>
 </template>
 <script>
-import storageApi from '@/api/warehouseManagement/index.js';
-export default {
+  import storageApi from '@/api/warehouseManagement/index.js';
+  export default {
     props: {
-        categoryCode: {
-            type: String,
-            default: ''
-        }
+      categoryCode: {
+        type: String,
+        default: ''
+      }
     },
     data() {
-        return {
-            columns: [
-                {
-                    columnKey: 'index',
-                    type: 'index',
-                    width: 50,
-                    align: 'center',
-                    label: '序号',
-                    showOverflowTooltip: true,
-                    fixed: 'left'
-                },
-                {
-                    prop: 'batchNo',
-                    label: '批次号',
-                    align: 'center'
-                },
-                {
-                    prop: 'categoryCode',
-                    label: '物品编码',
-                    align: 'center',
-                    showOverflowTooltip: true
-                },
-                {
-                    slot: 'categoryName',
-                    prop: 'categoryName',
-                    label: '物品名称',
-                    align: 'center',
-                    showOverflowTooltip: true,
-                    minWidth: 200
-                },
-                {
-                    prop: 'inventoryCycle',
-                    label: '存货周期(天)',
-                    align: 'center',
-                    width: 120,
-                    showOverflowTooltip: true
-                },
-                {
-                    prop: 'brandNum',
-                    label: '牌号',
-                    align: 'center',
-                    showOverflowTooltip: true
-                },
-                {
-                    prop: 'categoryModel',
-                    label: '型号',
-                    align: 'center',
-                    showOverflowTooltip: true
-                },
-                {
-                    prop: 'specification',
-                    label: '规格',
-                    align: 'center',
-                    showOverflowTooltip: true
-                },
-                {
-                    prop: 'level',
-                    label: '级别',
-                    showOverflowTooltip: true
-                },
-                {
-                    prop: 'measureQuantity',
-                    label: '计量数量',
-                    sortable: 'custom',
-                    showOverflowTooltip: true,
-                    width: 130,
-                    align: 'center'
-                },
-                {
-                    prop: 'measureUnit',
-                    label: '计量单位',
-                    align: 'center'
-                },
-                {
-                    prop: 'weight',
-                    label: '重量',
-                    showOverflowTooltip: true
-                },
-                {
-                    prop: 'weightUnit',
-                    label: '重量单位',
-                    showOverflowTooltip: true
-                },
-                {
-                    prop: 'packageNo',
-                    label: '包装编码',
-                    showOverflowTooltip: true
-                },
-                {
-                    prop: 'packingQuantity',
-                    label: '包装数量	',
-                    showOverflowTooltip: true
-                },
-                {
-                    prop: 'packingUnit',
-                    label: '包装单位	',
-                    showOverflowTooltip: true
-                },
-                {
-                    prop: 'warehouseName',
-                    label: '仓库	',
-                    showOverflowTooltip: true
-                },
-                {
-                    prop: 'areaName',
-                    label: '货区	',
-                    showOverflowTooltip: true
-                },
-                {
-                    prop: 'goodsAllocationName',
-                    label: '货架',
-                    showOverflowTooltip: true
-                },
-                {
-                    prop: 'goodsShelfName',
-                    label: '货位',
-                    showOverflowTooltip: true
-                },
-                {
-                    prop: 'productionDate',
-                    label: '生产日期',
-                    showOverflowTooltip: true
-                },
-                {
-                    prop: 'purchaseDate',
-                    label: '采购日期',
-                    showOverflowTooltip: true
-                },
-                {
-                    prop: 'barcodes',
-                    label: '发货条码	',
-                    showOverflowTooltip: true
-                },
-                {
-                    prop: 'clientCode',
-                    label: '客户代号',
-                    showOverflowTooltip: true
-                },
-                {
-                    prop: 'engrave',
-                    label: '刻码	',
-                    showOverflowTooltip: true
-                },
-                {
-                    prop: 'materielDesignation',
-                    label: '物料代号',
-                    width: 120,
-                    showOverflowTooltip: true
-                },
-                {
-                    prop: 'supplierCode',
-                    label: '供应商代号',
-                    width: 120,
-                    showOverflowTooltip: true
-                },
-                {
-                    prop: 'provenance',
-                    label: '产地',
-                    showOverflowTooltip: true
-                },
-            ]
-        }
+      return {
+        dimension: 3,
+        columns: [
+          {
+            columnKey: 'index',
+            type: 'index',
+            width: 50,
+            align: 'center',
+            label: '序号',
+            showOverflowTooltip: true,
+            fixed: 'left'
+          },
+          {
+            prop: 'batchNo',
+            label: '批次号',
+            align: 'center'
+          },
+          {
+            prop: 'categoryCode',
+            label: '物品编码',
+            align: 'center',
+            showOverflowTooltip: true
+          },
+          {
+            slot: 'categoryName',
+            prop: 'categoryName',
+            label: '物品名称',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 200
+          },
+          {
+            prop: 'inventoryCycle',
+            label: '存货周期(天)',
+            align: 'center',
+            width: 120,
+            showOverflowTooltip: true
+          },
+          {
+            prop: 'brandNum',
+            label: '牌号',
+            align: 'center',
+            showOverflowTooltip: true
+          },
+          {
+            prop: 'categoryModel',
+            label: '型号',
+            align: 'center',
+            showOverflowTooltip: true
+          },
+          {
+            prop: 'specification',
+            label: '规格',
+            align: 'center',
+            showOverflowTooltip: true
+          },
+          {
+            prop: 'level',
+            label: '级别',
+            showOverflowTooltip: true
+          },
+          {
+            prop: 'measureQuantity',
+            label: '计量数量',
+            sortable: 'custom',
+            showOverflowTooltip: true,
+            width: 130,
+            align: 'center'
+          },
+          {
+            prop: 'measureUnit',
+            label: '计量单位',
+            align: 'center'
+          },
+          {
+            prop: 'weight',
+            label: '重量',
+            showOverflowTooltip: true
+          },
+          {
+            prop: 'weightUnit',
+            label: '重量单位',
+            showOverflowTooltip: true
+          },
+          {
+            prop: 'packageNo',
+            label: '包装编码',
+            showOverflowTooltip: true
+          },
+          {
+            prop: 'packingQuantity',
+            label: '包装数量	',
+            showOverflowTooltip: true
+          },
+          {
+            prop: 'packingUnit',
+            label: '包装单位	',
+            showOverflowTooltip: true
+          },
+          {
+            prop: 'warehouseName',
+            label: '仓库	',
+            showOverflowTooltip: true
+          },
+          {
+            prop: 'areaName',
+            label: '货区	',
+            showOverflowTooltip: true
+          },
+          {
+            prop: 'goodsAllocationName',
+            label: '货架',
+            showOverflowTooltip: true
+          },
+          {
+            prop: 'goodsShelfName',
+            label: '货位',
+            showOverflowTooltip: true
+          },
+          {
+            prop: 'productionDate',
+            label: '生产日期',
+            showOverflowTooltip: true
+          },
+          {
+            prop: 'purchaseDate',
+            label: '采购日期',
+            showOverflowTooltip: true
+          },
+          {
+            prop: 'barcodes',
+            label: '发货条码	',
+            showOverflowTooltip: true
+          },
+          {
+            prop: 'clientCode',
+            label: '客户代号',
+            showOverflowTooltip: true
+          },
+          {
+            prop: 'engrave',
+            label: '刻码	',
+            showOverflowTooltip: true
+          },
+          {
+            prop: 'materielDesignation',
+            label: '物料代号',
+            width: 120,
+            showOverflowTooltip: true
+          },
+          {
+            prop: 'supplierCode',
+            label: '供应商代号',
+            width: 120,
+            showOverflowTooltip: true
+          },
+          {
+            prop: 'provenance',
+            label: '产地',
+            showOverflowTooltip: true
+          }
+        ]
+      };
     },
     created() {
-        this.reload({ keyWord: this.categoryCode });
+      this.reload({ keyWord: this.categoryCode });
     },
     methods: {
-        datasource({ page, limit, where }) {
-            const data = storageApi.getPackingList({ ...where, pageNum:page, size:limit });
-            return data;
-        },
-        reload(where) {
-            this.$nextTick(() => {
-                if (this.$refs.table1 && this.$refs.table1.reload)
-                    this.$refs.table1.reload({ pageNum: 1, where: where });
-            })
-        },
-
-
+      datasource({ page, limit, where }) {
+        let api =
+          this.dimension == '3'
+            ? storageApi.getPackingList
+            : storageApi.getBatchList;
+        const data = api({
+          ...where,
+          pageNum: page,
+          size: limit
+        });
+        return data;
+      },
+      handleChange() {
+        this.$refs.table1.reload({
+          pageNum: 1,
+          where: { keyWord: this.categoryCode }
+        });
+      },
+      reload(where) {
+        this.$nextTick(() => {
+          if (this.$refs.table1 && this.$refs.table1.reload)
+            this.$refs.table1.reload({ pageNum: 1, where: where });
+        });
+      }
     }
-}
+  };
 </script>
 
 <style lang="scss" scoped>
-.inWarehouse {
+  .inWarehouse {
     height: 100%;
     width: 100%;
     padding-top: 20px;
@@ -209,19 +244,19 @@ export default {
     flex-direction: column;
 
     :deep(.table) {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
+      flex: 1;
+      display: flex;
+      flex-direction: column;
 
-        .el-table__body-wrapper {
-            flex: 1;
-        }
+      .el-table__body-wrapper {
+        flex: 1;
+      }
     }
 
     .pagination {
-        flex: 0 0 50px;
-        display: flex;
-        align-items: center;
+      flex: 0 0 50px;
+      display: flex;
+      align-items: center;
     }
-}
-</style>
+  }
+</style>