213

src/views/warehouseManagement/outgoingManagement/add.vue

@@ -837,9 +837,13 @@
         let obj = res.find(
           (item) => item.id === info.deptIds[info.deptIds.length - 1]
         );
-        if (!obj) return;
+        // if (!obj) return;
+        if(obj){
         this.formData.extInfo.deptCode = obj.id;
         this.formData.extInfo.deptName = obj.name;
+        }else{
+          this.formData.extInfo.deptName = info.deptName ? info.deptName : info.groupName ? info.groupName : '';
+        }
         this.formData.extInfo.createUserName = info.name;
         this.formData.createUserId = info.userId;
       },

src/views/warehouseManagement/outgoingManagement/details.vue

@@ -15,19 +15,19 @@
         <div class="content-detail">
           <header-title title="基本信息" size="16px"></header-title>
           <div class="mt20">
-            <el-form label-width="110px">
+            <el-form label-width="120px">
               <el-col :span="8">
-                <el-form-item label="出库单号">
+                <el-form-item label="出库单号:">
                   <span>{{ infoData.bizNo }}</span>
                 </el-form-item>
               </el-col>
               <el-col :span="8">
-                <el-form-item label="出库物品类型">
+                <el-form-item label="出库物品类型:">
                   <span>{{ handleAssetType(infoData.extInfo.assetType) }}</span>
                 </el-form-item>
               </el-col>
               <el-col :span="8">
-                <el-form-item label="出库场景">
+                <el-form-item label="出库场景:">
                   <span>{{ getSceneState(infoData.bizType) }}</span>
                 </el-form-item>
               </el-col>
@@ -37,37 +37,33 @@
                 </el-form-item>
               </el-col>
               <el-col :span="8" v-if="infoData.bizType == 3">
-                <el-form-item label="客户名称">
+                <el-form-item label="客户名称:">
                   <span>{{ infoData.clientName }}</span>
-                </el-form-item> </el-col
-              ><el-col :span="8" v-if="infoData.bizType == 3">
-                <el-form-item label="客户联系人">
+                </el-form-item> </el-col><el-col :span="8" v-if="infoData.bizType == 3">
+                <el-form-item label="客户联系人:">
                   <span>{{ infoData.clientUser }}</span>
-                </el-form-item> </el-col
-              ><el-col :span="8" v-if="infoData.bizType == 3">
-                <el-form-item label="客户电话">
+                </el-form-item> </el-col><el-col :span="8" v-if="infoData.bizType == 3">
+                <el-form-item label="客户电话:">
                   <span>{{ infoData.clientPhone }}</span>
                 </el-form-item>
               </el-col>
               <el-col :span="8">
-                <el-form-item
-                  :label="infoData.bizType == 4 ? '领料单' : '来源单据'"
-                >
-                  <span>{{ infoData.bizNo }}</span>
+                <el-form-item :label="infoData.bizType == 4 ? '领料单:' : '来源单据:'">
+                  <span>{{ infoData.sourceBizNo }}</span>
                 </el-form-item>
               </el-col>
               <el-col :span="8">
-                <el-form-item label="领料人联系方式">
+                <el-form-item label="领料人联系方式:">
                   <span>{{ infoData.fromUserPhone }}</span>
                 </el-form-item>
               </el-col>
               <el-col :span="8">
-                <el-form-item label="出库登记人">
+                <el-form-item label="出库登记人:">
                   <span>{{ infoData.extInfo?.createUserName }}</span>
                 </el-form-item>
               </el-col>
               <el-col :span="8">
-                <el-form-item label="权属部门">
+                <el-form-item label="权属部门:">
                   <span>{{ infoData.extInfo?.deptName }}</span>
                 </el-form-item>
               </el-col>
@@ -87,17 +83,17 @@
                 </el-form-item>
               </el-col>
               <el-col :span="8">
-                <el-form-item label="领料人部门">
+                <el-form-item label="领料人部门:">
                   <span>{{ infoData.extInfo.verifyDeptName }}</span>
                 </el-form-item>
               </el-col>
               <el-col :span="8">
-                <el-form-item label="领料人">
+                <el-form-item label="领料人:">
                   <span>{{ infoData.fromUser }}</span>
                 </el-form-item>
               </el-col>
               <el-col :span="16">
-                <el-form-item label="备注">
+                <el-form-item label="备注:">
                   <span>{{ infoData.remark }}</span>
                 </el-form-item>
               </el-col>
@@ -106,102 +102,37 @@
         </div>
         <div class="content-detail mt20">
           <header-title title="产品信息" size="16px"></header-title>
-          <el-table
-            ref="productListTable"
-            :data="productList"
-            border
-            tooltip-effect="dark"
-            :max-height="300"
-            :header-cell-style="rowClass"
-          >
+          <el-table ref="productListTable" :data="productList" border tooltip-effect="dark" :max-height="300"
+            :header-cell-style="rowClass">
             <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 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 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="包装数量"
-              prop="packingQuantity"
-              align="center"
-            >
+            <el-table-column label="包装数量" prop="packingQuantity" align="center">
             </el-table-column>
-            <el-table-column
-              label="包装单位"
-              align="center"
-              width="120"
-              prop="packingUnit"
-            >
+            <el-table-column label="包装单位" align="center" width="120" prop="packingUnit">
             </el-table-column>
-            <el-table-column
-              label="计量数量"
-              prop="measureQuantity"
-              width="100"
-              align="center"
-            >
+            <el-table-column label="计量数量" prop="measureQuantity" width="100" align="center">
             </el-table-column>
             <el-table-column label="计量单位" prop="measureUnit" align="center">
             </el-table-column>
-            <el-table-column
-              label="重量"
-              prop="weight"
-              align="center"
-              :show-overflow-tooltip="true"
-            >
+            <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 label="重量单位" prop="weightUnit" align="center" :show-overflow-tooltip="true">
             </el-table-column>
             <el-table-column label="单价" prop="price" align="center">
               <template slot-scope="{ row }">
@@ -211,198 +142,73 @@
               </template>
             </el-table-column>
 
-            <el-table-column
-              label="金额"
-              align="center"
-              prop="contentImage"
-              :show-overflow-tooltip="true"
-            >
+            <el-table-column 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 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>
         </div>
         <div class="mt20">
           <header-title :title="`包装明细`" size="16px"></header-title>
-          <el-table
-            ref="showPackingListTable"
-            :data="showPackingList"
-            tooltip-effect="dark"
-            :max-height="300"
-            border
-            :row-class-name="tableRowClassName"
-            :header-cell-style="rowClass"
-            v-el-table-infinite-scroll="pickingHandleScroll"
-          >
+          <el-table ref="showPackingListTable" :data="showPackingList" tooltip-effect="dark" :max-height="300" border
+            :row-class-name="tableRowClassName" :header-cell-style="rowClass"
+            v-el-table-infinite-scroll="pickingHandleScroll">
             <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
-              label="批次号"
-              prop="batchNo"
-              :show-overflow-tooltip="true"
-            ></el-table-column>
-            <el-table-column
-              label="发货条码"
-              prop="barcodes"
-              :show-overflow-tooltip="true"
-            ></el-table-column>
-            <el-table-column
-              label="包装编码"
-              prop="packageNo"
-              :show-overflow-tooltip="true"
-            ></el-table-column>
-            <el-table-column
-              label="包装数量"
-              prop="packingQuantity"
-              :show-overflow-tooltip="true"
-            ></el-table-column>
-            <el-table-column
-              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="measureUnit"
-              :show-overflow-tooltip="true"
-            ></el-table-column>
-            <el-table-column
-              label="物料代号"
-              prop="materielDesignation"
-              :show-overflow-tooltip="true"
-            >
+            <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 label="批次号" prop="batchNo" :show-overflow-tooltip="true"></el-table-column>
+            <el-table-column label="发货条码" prop="barcodes" :show-overflow-tooltip="true"></el-table-column>
+            <el-table-column label="包装编码" prop="packageNo" :show-overflow-tooltip="true"></el-table-column>
+            <el-table-column label="包装数量" prop="packingQuantity" :show-overflow-tooltip="true"></el-table-column>
+            <el-table-column 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="measureUnit" :show-overflow-tooltip="true"></el-table-column>
+            <el-table-column label="物料代号" prop="materielDesignation" :show-overflow-tooltip="true">
             </el-table-column>
-            <el-table-column
-              label="客户代号"
-              prop="clientCode"
-              :show-overflow-tooltip="true"
-            >
+            <el-table-column label="客户代号" prop="clientCode" :show-overflow-tooltip="true">
             </el-table-column>
-            <el-table-column
-              label="刻码"
-              prop="engrave"
-              :show-overflow-tooltip="true"
-            >
+            <el-table-column label="刻码" prop="engrave" :show-overflow-tooltip="true">
             </el-table-column>
-            <el-table-column
-              label="重量"
-              prop="weight"
-              :show-overflow-tooltip="true"
-            >
+            <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 label="重量单位" prop="weightUnit" :show-overflow-tooltip="true">
             </el-table-column>
-            <el-table-column
-              label="质检结果"
-              prop="result"
-              :show-overflow-tooltip="true"
-            >
+            <el-table-column label="质检结果" prop="result" :show-overflow-tooltip="true">
               <template slot-scope="{ row }">
                 <span>{{ qualityResults[row.result] }}</span>
               </template>
             </el-table-column>
-            <el-table-column
-              label="质检状态"
-              prop="status"
-              :show-overflow-tooltip="true"
-            >
+            <el-table-column label="质检状态" prop="status" :show-overflow-tooltip="true">
               <template slot-scope="{ row }">
                 <span>{{ qualityStatus[row.status] }}</span>
               </template>
             </el-table-column>
-            <el-table-column
-              label="生产日期"
-              prop="productionDate"
-              :show-overflow-tooltip="true"
-            >
+            <el-table-column label="生产日期" prop="productionDate" :show-overflow-tooltip="true">
             </el-table-column>
-            <el-table-column
-              label="采购日期"
-              prop="purchaseDate"
-              :show-overflow-tooltip="true"
-            >
+            <el-table-column label="采购日期" prop="purchaseDate" :show-overflow-tooltip="true">
             </el-table-column>
           </el-table>
         </div>
         <div class="mt20">
           <header-title :title="`物料明细`" size="16px"> </header-title>
-          <el-table
-            ref="multipleTable"
-            :data="showMaterialList"
-            tooltip-effect="dark"
-            :max-height="300"
-            :row-class-name="tableRowClassName"
-            :header-cell-style="rowClass"
-            border
-            style="width: 100%"
-            stripe
-            height="300px"
-            v-el-table-infinite-scroll="materielHandleScroll"
-          >
+          <el-table ref="multipleTable" :data="showMaterialList" tooltip-effect="dark" :max-height="300"
+            :row-class-name="tableRowClassName" :header-cell-style="rowClass" border style="width: 100%" stripe
+            height="300px" v-el-table-infinite-scroll="materielHandleScroll">
             <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 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 label="批次号" prop="batchNo"></el-table-column>
-            <el-table-column
-              label="物料编码"
-              prop="materialCode"
-              :show-overflow-tooltip="true"
-            ></el-table-column>
-            <el-table-column
-              label="发货条码"
-              prop="barcodes"
-              :show-overflow-tooltip="true"
-            ></el-table-column>
-            <el-table-column
-              label="计量数量"
-              prop="measureQuantity"
-            ></el-table-column>
-            <el-table-column
-              label="计量单位"
-              prop="measureUnit"
-            ></el-table-column>
+            <el-table-column label="物料编码" prop="materialCode" :show-overflow-tooltip="true"></el-table-column>
+            <el-table-column label="发货条码" prop="barcodes" :show-overflow-tooltip="true"></el-table-column>
+            <el-table-column label="计量数量" prop="measureQuantity"></el-table-column>
+            <el-table-column label="计量单位" prop="measureUnit"></el-table-column>
             <el-table-column label="物料代号" prop="materielDesignation">
             </el-table-column>
             <el-table-column label="客户代号" prop="clientCode">
@@ -430,430 +236,469 @@
 </template>
 
 <script>
-  import elTableInfiniteScroll from 'el-table-infinite-scroll';
-  import { getFile } from '@/api/system/file/index.js';
-  import PageHeader from '@/components/PageHeader';
-  import storageApi from '@/api/warehouseManagement';
-  import { allCategoryLevel } from '@/api/classifyManage';
-  import { useDictLabel, outputSceneState } from '@/utils/dict/index';
-  import { mapGetters, mapActions } from 'vuex';
-  export default {
-    components: { PageHeader },
-    directives: {
-      'el-table-infinite-scroll': elTableInfiniteScroll
-    },
-    data() {
-      return {
-        newColumns: [], // 动态表头
-        qualityStatus: {
-          0: '未质检',
-          1: '已质检'
-        }, // 质检状态 0未检 1已检
-        qualityResults: {
-          1: '合格',
-          2: '不合格'
-        }, // 质检结果 1合格 2不合格
-        productList: [], // 产品列表
-        showPackingList: [], // 展示的包装列表
-        packingList: [], // 包装列表
-        showMaterialList: [], // 展示物料列表
-        materialList: [], // 物料列表
-        extInfo: {}, // 扩展信息
-        pageSize: 20,
-        pickingPageNum: 1,
-        materielPageNum: 1,
-        codeList: [],
-        infoData: {},
-        stepsTitle: '已完成',
-        stepsStatus: 'success',
-        active: 0
-      };
-    },
-    watch: {
-      'infoData.verifyStatus': {
-        immediate: true,
-        handler(val) {
-          if (val == 0) {
-            this.active = 1;
-            this.stepsTitle = '未审核';
-            this.stepsStatus = 'wait';
-          } else if (val == 1) {
-            this.active = 2;
-            this.stepsTitle = '审核中';
-            this.stepsStatus = 'process';
-          } else if (val == 2) {
-            this.active = 2;
-            this.stepsTitle = '审核通过';
-            this.stepsStatus = 'success';
-          } else if (val == 3) {
-            this.active = 2;
-            this.stepsTitle = '驳回';
-            this.stepsStatus = 'error';
-          }
+import elTableInfiniteScroll from 'el-table-infinite-scroll';
+import { getFile } from '@/api/system/file/index.js';
+import PageHeader from '@/components/PageHeader';
+import storageApi from '@/api/warehouseManagement';
+import { allCategoryLevel } from '@/api/classifyManage';
+import { useDictLabel, outputSceneState, qualityStatus, qualityResults } from '@/utils/dict/index';
+import { mapGetters, mapActions } from 'vuex';
+
+
+export default {
+  components: { PageHeader },
+  directives: {
+    'el-table-infinite-scroll': elTableInfiniteScroll
+  },
+  data() {
+    return {
+      newColumns: [], // 动态表头
+      // qualityStatus: {
+      //   0: '未质检',
+      //   1: '已质检'
+      // }, // 质检状态 0未检 1已检
+      // qualityResults: {
+      //   1: '合格',
+      //   2: '不合格'
+      // }, // 质检结果 1合格 2不合格
+      qualityStatus,
+      qualityResults,
+      productList: [], // 产品列表
+      showPackingList: [], // 展示的包装列表
+      packingList: [], // 包装列表
+      showMaterialList: [], // 展示物料列表
+      materialList: [], // 物料列表
+      extInfo: {}, // 扩展信息
+      pageSize: 20,
+      pickingPageNum: 1,
+      materielPageNum: 1,
+      codeList: [],
+      infoData: {},
+      stepsTitle: '已完成',
+      stepsStatus: 'success',
+      active: 0
+    };
+  },
+  watch: {
+    'infoData.verifyStatus': {
+      immediate: true,
+      handler(val) {
+        if (val == 0) {
+          this.active = 1;
+          this.stepsTitle = '未审核';
+          this.stepsStatus = 'wait';
+        } else if (val == 1) {
+          this.active = 2;
+          this.stepsTitle = '审核中';
+          this.stepsStatus = 'process';
+        } else if (val == 2) {
+          this.active = 2;
+          this.stepsTitle = '审核通过';
+          this.stepsStatus = 'success';
+        } else if (val == 3) {
+          this.active = 2;
+          this.stepsTitle = '驳回';
+          this.stepsStatus = 'error';
         }
-      },
-      packingList: {
-        handler(newVal) {
-          console.log('包装列表', newVal);
-          console.log('当前包装列表加载页数', this.pickingPageNum);
-          this.showPackingList = newVal.slice(
-            0,
-            this.pageSize * (this.pickingPageNum > 0 ? this.pickingPageNum : 1)
-          );
-        },
-        deep: true
-      },
-      materialList: {
-        handler(newVal) {
-          console.log('物料列表', newVal);
-          console.log('当前物料列表加载页数', this.materielPageNum);
-          this.showMaterialList = newVal.slice(
-            0,
-            this.pageSize *
-              (this.materielPageNum > 0 ? this.materielPageNum : 1)
-          );
-        },
-        deep: true
       }
     },
-    computed: {
-      ...mapGetters(['getDictValue']),
-      clientEnvironmentId() {
-        return this.$store.state.user.info.clientEnvironmentId;
-      }
-    },
-    created() {
-      this.getFieldModel();
-      this.requestDict('类型用途');
-      this.getAllCategoryType();
-      this._getInfo();
-    },
-    methods: {
-      // 获取动态表头
-      getFieldModel() {
-        storageApi.fieldModel({ fieldModel: 't_main_category' }).then((res) => {
-          let newRes = res.map((m) => {
-            return {
-              prop: 'extField.' + m.prop,
-              label: m.label,
-              align: 'center',
-              showOverflowTooltip: true
-            };
-          });
-          this.newColumns = [...newRes];
-        });
-      },
-      pickingHandleScroll() {
-        console.log('---------pickingHandleScroll------------');
-        if (this.showPackingList.length < this.packingList.length) {
-          if (this.packingList.length > this.pageSize) {
-            this.pickingPageNum += 1;
-          }
-          this.pickingFetchData();
-        }
-      },
-      pickingFetchData() {
-        const start = (this.pickingPageNum - 1) * this.pageSize;
-        const end = start + this.pageSize;
-        this.showPackingList = this.showPackingList.concat(
-          this.packingList.slice(start, end)
+    packingList: {
+      handler(newVal) {
+        console.log('包装列表', newVal);
+        console.log('当前包装列表加载页数', this.pickingPageNum);
+        this.showPackingList = newVal.slice(
+          0,
+          this.pageSize * (this.pickingPageNum > 0 ? this.pickingPageNum : 1)
         );
       },
-      materielHandleScroll() {
-        console.log('---------materielHandleScroll------------');
-        if (this.showMaterialList.length < this.materialList.length) {
-          if (this.materialList.length > this.pageSize) {
-            this.materielPageNum += 1;
-          }
-          this.materielFetchData();
-        }
-      },
-      materielFetchData() {
-        const start = (this.materielPageNum - 1) * this.pageSize;
-        const end = start + this.pageSize;
-        this.showMaterialList = this.showMaterialList.concat(
-          this.materialList.slice(start, end)
+      deep: true
+    },
+    materialList: {
+      handler(newVal) {
+        console.log('物料列表', newVal);
+        console.log('当前物料列表加载页数', this.materielPageNum);
+        this.showMaterialList = newVal.slice(
+          0,
+          this.pageSize *
+          (this.materielPageNum > 0 ? this.materielPageNum : 1)
         );
-        console.log(this.showMaterialList);
-      },
-      ...mapActions('dict', ['requestDict']),
-      getSceneState: useDictLabel(outputSceneState),
-      handleAssetType(r) {
-        const code = this.codeList.find((item) => item.dictCode == r);
-        return code?.dictValue;
-      },
-      tableRowClassName({ row, rowIndex }) {
-        console.log(row);
-        if (row.result == 2) {
-          return 'warning-row';
-        } else {
-          return '';
-        }
       },
-      rowClass({ row, column, rowIndex, columnIndex }) {
-        if (rowIndex === 1) {
+      deep: true
+    }
+  },
+  computed: {
+    ...mapGetters(['getDictValue']),
+    clientEnvironmentId() {
+      return this.$store.state.user.info.clientEnvironmentId;
+    }
+  },
+  created() {
+    this.getFieldModel();
+    this.requestDict('类型用途');
+    this.getAllCategoryType();
+    this._getInfo();
+  },
+  methods: {
+    // 获取动态表头
+    getFieldModel() {
+      storageApi.fieldModel({ fieldModel: 't_main_category' }).then((res) => {
+        let newRes = res.map((m) => {
           return {
-            display: 'none',
-            background: '#EEEEEE'
+            prop: 'extField.' + m.prop,
+            label: m.label,
+            align: 'center',
+            showOverflowTooltip: true
           };
-        }
-        return { background: '#0000' };
-      },
-      async getAllCategoryType() {
-        const { data } = await allCategoryLevel();
-        this.codeList = data.map((item) => {
-          return { dictCode: item.id, dictValue: item.name };
         });
-      },
-      async _getInfo() {
-        let res = null;
-        if (this.$route.query.id) {
-          res = await storageApi.getInboundDetailsById(this.$route.query.id);
-        } else {
-          res = await storageApi.getInboundDetailsByBizNo(
-            this.$route.query.bizNo
-          );
+        this.newColumns = [...newRes];
+      });
+    },
+    pickingHandleScroll() {
+      console.log('---------pickingHandleScroll------------');
+      if (this.showPackingList.length < this.packingList.length) {
+        if (this.packingList.length > this.pageSize) {
+          this.pickingPageNum += 1;
+        }
+        this.pickingFetchData();
+      }
+    },
+    pickingFetchData() {
+      const start = (this.pickingPageNum - 1) * this.pageSize;
+      const end = start + this.pageSize;
+      this.showPackingList = this.showPackingList.concat(
+        this.packingList.slice(start, end)
+      );
+    },
+    materielHandleScroll() {
+      console.log('---------materielHandleScroll------------');
+      if (this.showMaterialList.length < this.materialList.length) {
+        if (this.materialList.length > this.pageSize) {
+          this.materielPageNum += 1;
         }
-        this.infoData = res;
-        this.extInfo = res.extInfo;
-        this.productList = res.outInDetailList.map(
-          (productItem, productIndex) => {
-            return {
-              ...productItem,
-              outInDetailRecordRequestList:
-                productItem.outInDetailRecordRequestList.map((packingItem) => {
-                  return {
-                    ...packingItem,
-                    categoryName: productItem.categoryName,
-                    categoryCode: productItem.categoryCode,
-                    materialDetailList: packingItem.materialDetailList.map(
-                      (materialItem) => {
-                        return {
-                          ...materialItem,
-                          categoryName: productItem.categoryName,
-                          categoryCode: productItem.categoryCode
-                        };
-                      }
-                    )
-                  };
-                })
-            };
-          }
+        this.materielFetchData();
+      }
+    },
+    materielFetchData() {
+      const start = (this.materielPageNum - 1) * this.pageSize;
+      const end = start + this.pageSize;
+      this.showMaterialList = this.showMaterialList.concat(
+        this.materialList.slice(start, end)
+      );
+      console.log(this.showMaterialList);
+    },
+    ...mapActions('dict', ['requestDict']),
+    getSceneState: useDictLabel(outputSceneState),
+    handleAssetType(r) {
+      const code = this.codeList.find((item) => item.dictCode == r);
+      return code?.dictValue;
+    },
+    tableRowClassName({ row, rowIndex }) {
+      console.log(row);
+      if (row.result == 2) {
+        return 'warning-row';
+      } else {
+        return '';
+      }
+    },
+    rowClass({ row, column, rowIndex, columnIndex }) {
+      if (rowIndex === 1) {
+        return {
+          display: 'none',
+          background: '#EEEEEE'
+        };
+      }
+      return { background: '#0000' };
+    },
+    async getAllCategoryType() {
+      const { data } = await allCategoryLevel();
+      this.codeList = data.map((item) => {
+        return { dictCode: item.id, dictValue: item.name };
+      });
+    },
+    async _getInfo() {
+      let res = null;
+      if (this.$route.query.id) {
+        res = await storageApi.getInboundDetailsById(this.$route.query.id);
+      } else {
+        res = await storageApi.getInboundDetailsByBizNo(
+          this.$route.query.bizNo
         );
-        // 获取包装维度数据
-        const arr = [];
-        for (const key in this.productList) {
-          for (const k in this.productList[key].outInDetailRecordRequestList) {
-            arr.push({
-              ...this.productList[key].outInDetailRecordRequestList[k]
-            });
-          }
+      }
+      this.infoData = res;
+      this.extInfo = res.extInfo;
+      this.productList = res.outInDetailList.map(
+        (productItem, productIndex) => {
+          return {
+            ...productItem,
+            outInDetailRecordRequestList:
+              productItem.outInDetailRecordRequestList.map((packingItem) => {
+                return {
+                  ...packingItem,
+                  categoryName: productItem.categoryName,
+                  categoryCode: productItem.categoryCode,
+                  materialDetailList: packingItem.materialDetailList.map(
+                    (materialItem) => {
+                      return {
+                        ...materialItem,
+                        categoryName: productItem.categoryName,
+                        categoryCode: productItem.categoryCode
+                      };
+                    }
+                  )
+                };
+              })
+          };
         }
-        this.packingList = arr;
-        // 获取物料维度数据
-        let iArr = [];
-        arr.forEach((item) => {
-          item.materialDetailList.forEach((ele) => {
-            iArr.push({ ...ele });
+      );
+      // 获取包装维度数据
+      const arr = [];
+      for (const key in this.productList) {
+        for (const k in this.productList[key].outInDetailRecordRequestList) {
+          arr.push({
+            ...this.productList[key].outInDetailRecordRequestList[k]
           });
-        });
-        this.materialList = iArr;
-        console.log(this.packingList);
-        console.log(this.materialList);
-        this.pickingFetchData();
-        this.materielFetchData();
-      },
-      download(row) {
-        if (row.storePath) {
-          getFile({ objectName: row.storePath }, row.name);
         }
       }
+      this.packingList = arr;
+      // 获取物料维度数据
+      let iArr = [];
+      arr.forEach((item) => {
+        item.materialDetailList.forEach((ele) => {
+          iArr.push({ ...ele });
+        });
+      });
+      this.materialList = iArr;
+      console.log(this.packingList);
+      console.log(this.materialList);
+      this.pickingFetchData();
+      this.materielFetchData();
+    },
+    download(row) {
+      if (row.storePath) {
+        getFile({ objectName: row.storePath }, row.name);
+      }
     }
-  };
+  }
+};
 </script>
 
 <style lang="scss" scoped>
-  .stepsStatus {
-    width: 40%;
-    margin: 0 auto;
+.stepsStatus {
+  width: 40%;
+  margin: 0 auto;
+}
+
+.p20 {
+  padding: 20px;
+}
+
+.flex {
+  display: flex;
+}
+
+.title {
+  justify-content: space-between;
+  border-bottom: 1px solid #ccc;
+  padding-bottom: 5px;
+
+  span {
+    font-size: 16px;
   }
-  .p20 {
-    padding: 20px;
+
+  .col {
+    padding-left: 40px;
+    font-size: 14px;
+    color: #aaaaaa;
   }
-  .flex {
-    display: flex;
+}
+
+.degree {
+  margin-right: 10px;
+  padding: 0px 15px;
+  color: #fff;
+  font-size: 13px;
+  line-height: 23px;
+  border-radius: 23px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  span {
+    width: 5px;
+    height: 5px;
+    border-radius: 100%;
+    margin-right: 6px;
+    background-color: #fff;
   }
-  .title {
-    justify-content: space-between;
-    border-bottom: 1px solid #ccc;
-    padding-bottom: 5px;
-    span {
-      font-size: 16px;
+}
+
+.red {
+  background-color: rgb(163, 0, 20);
+}
+
+.blue {
+  background-color: #1989fa;
+}
+
+.createdInfo {
+  justify-content: space-around;
+  margin-top: 10px;
+  font-size: 14px;
+
+  .col {
+    color: #6e6e6e;
+    padding-right: 10px;
+  }
+}
+
+.mt40 {
+  margin-top: 40px;
+}
+
+.custSteps {
+  margin-top: 20px;
+  margin-left: 70px;
+
+  .box {
+    width: 158px;
+    border: 1px solid #ccc;
+    padding: 10px;
+    flex-direction: row;
+    flex-wrap: wrap;
+    // justify-content: space-between;
+    font-size: 12px;
+    color: #9e9e9e;
+
+    .x {
+      width: 20px;
+      height: 15px;
+      margin-right: 5px;
     }
-    .col {
-      padding-left: 40px;
-      font-size: 14px;
-      color: #aaaaaa;
+
+    .q {
+      background-color: #d0e4d5;
     }
-  }
-  .degree {
-    margin-right: 10px;
-    padding: 0px 15px;
-    color: #fff;
-    font-size: 13px;
-    line-height: 23px;
-    border-radius: 23px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    span {
-      width: 5px;
-      height: 5px;
-      border-radius: 100%;
-      margin-right: 6px;
-      background-color: #fff;
+
+    .b {
+      background-color: #1989fa;
     }
-  }
-  .red {
-    background-color: rgb(163, 0, 20);
-  }
-  .blue {
-    background-color: #1989fa;
-  }
-  .createdInfo {
-    justify-content: space-around;
-    margin-top: 10px;
-    font-size: 14px;
-    .col {
-      color: #6e6e6e;
-      padding-right: 10px;
+
+    .g {
+      background-color: #157a2c;
     }
-  }
-  .mt40 {
-    margin-top: 40px;
-  }
 
-  .custSteps {
-    margin-top: 20px;
-    margin-left: 70px;
-    .box {
-      width: 158px;
-      border: 1px solid #ccc;
-      padding: 10px;
-      flex-direction: row;
-      flex-wrap: wrap;
-      // justify-content: space-between;
-      font-size: 12px;
-      color: #9e9e9e;
-      .x {
-        width: 20px;
-        height: 15px;
-        margin-right: 5px;
-      }
-      .q {
-        background-color: #d0e4d5;
-      }
-      .b {
-        background-color: #1989fa;
-      }
-      .g {
-        background-color: #157a2c;
-      }
-      .r {
-        background-color: #a30014;
-      }
-      .a {
-        align-items: center;
-        margin-bottom: 10px;
-      }
-      .mr10 {
-        margin-right: 10px;
-      }
-      .mb0 {
-        margin-bottom: 0;
-      }
+    .r {
+      background-color: #a30014;
     }
-    .stepsInfo {
-      // flex: 1;
-      width: 483px;
+
+    .a {
+      align-items: center;
+      margin-bottom: 10px;
     }
-  }
-  .mt20 {
-    margin-top: 20px;
-  }
-  .content-detail {
-    overflow: hidden;
-  }
-  .executor {
-    font-size: 14px;
-    .col {
-      color: #6e6e6e;
-      padding-right: 10px;
+
+    .mr10 {
+      margin-right: 10px;
+    }
+
+    .mb0 {
+      margin-bottom: 0;
     }
   }
-  .result {
-    justify-content: space-around;
+
+  .stepsInfo {
+    // flex: 1;
+    width: 483px;
   }
-  .mr20 {
-    margin-right: 20px;
+}
+
+.mt20 {
+  margin-top: 20px;
+}
+
+.content-detail {
+  overflow: hidden;
+}
+
+.executor {
+  font-size: 14px;
+
+  .col {
+    color: #6e6e6e;
+    padding-right: 10px;
   }
-  .details {
-    font-size: 14px;
-    margin-bottom: 10px;
+}
+
+.result {
+  justify-content: space-around;
+}
+
+.mr20 {
+  margin-right: 20px;
+}
+
+.details {
+  font-size: 14px;
+  margin-bottom: 10px;
+}
+
+.customSteps {
+  margin-top: 40px;
+  font-size: 14px;
+  margin-left: 80px;
+
+  .time {
+    font-size: 12px;
+    color: #6e6e6e;
+    margin-right: 20px;
+    position: relative;
+
+    &::after {
+      content: '';
+      width: 1px;
+      height: 100%;
+      background-color: #157a2c;
+      position: absolute;
+      right: -26px;
+    }
   }
 
-  .customSteps {
-    margin-top: 40px;
-    font-size: 14px;
-    margin-left: 80px;
+  .flex:last-child {
     .time {
-      font-size: 12px;
-      color: #6e6e6e;
-      margin-right: 20px;
-      position: relative;
       &::after {
-        content: '';
-        width: 1px;
-        height: 100%;
-        background-color: #157a2c;
-        position: absolute;
-        right: -26px;
-      }
-    }
-    .flex:last-child {
-      .time {
-        &::after {
-          display: none;
-        }
+        display: none;
       }
     }
-    .round {
-      margin-right: 20px;
-      width: 10px;
-      height: 10px;
+  }
+
+  .round {
+    margin-right: 20px;
+    width: 10px;
+    height: 10px;
+    border-radius: 100%;
+    background-color: #157a2c;
+    position: relative;
+
+    span {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 4px;
+      height: 4px;
+      background-color: #fff;
       border-radius: 100%;
-      background-color: #157a2c;
-      position: relative;
-      span {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        width: 4px;
-        height: 4px;
-        background-color: #fff;
-        border-radius: 100%;
-        transform: translate(-2px, -2px);
-      }
+      transform: translate(-2px, -2px);
     }
-    .text {
-      .info {
-        margin-top: 10px;
-        width: 955px;
-        background-color: #f0f3f3;
-        overflow: hidden;
-        padding: 10px;
-        margin-bottom: 10px;
-      }
+  }
+
+  .text {
+    .info {
+      margin-top: 10px;
+      width: 955px;
+      background-color: #f0f3f3;
+      overflow: hidden;
+      padding: 10px;
+      margin-bottom: 10px;
     }
   }
+}
 </style>

src/views/warehouseManagement/stockManagement/details.vue

@@ -259,11 +259,11 @@ import PageHeader from '@/components/PageHeader';
 import storageApi from '@/api/warehouseManagement';
 import { getCode } from '@/api/codeManagement/index.js';
 import { allCategoryLevel } from '@/api/classifyManage';
-import { useDictLabel, sceneState } from '@/utils/dict/index';
-import { mapGetters, mapActions } from 'vuex';
 import {
-  qualityStatus,
+  useDictLabel, sceneState, qualityStatus, qualityResults
 } from '@/utils/dict/index';
+import { mapGetters, mapActions } from 'vuex';
+
 export default {
   components: { PageHeader, WareHouseDailog, mergeDetails, splitDetails },
   directives: {
@@ -280,14 +280,15 @@ export default {
       currentId: '',
       newColumns: [], // 动态表头
       qualityStatus,
+      qualityResults,
       // qualityStatus: {
       //   0: '未质检',
       //   1: '已质检'
       // }, // 质检状态 0未检 1已检
-      qualityResults: {
-        1: '合格',
-        2: '不合格'
-      }, // 质检结果 1合格 2不合格
+      // qualityResults: {
+      //   1: '合格',
+      //   2: '不合格'
+      // }, // 质检结果 1合格 2不合格
       productList: [], // 产品列表
       showPackingList: [], // 展示的包装列表
       packingList: [], // 包装列表