新增查看详情虚拟列表以及拆分显示

package.json

@@ -30,6 +30,7 @@
     "dayjs": "^1.11.8",
     "echarts": "^5.3.3",
     "echarts-wordcloud": "^2.0.0",
+    "el-table-infinite-scroll": "^2.0.2",
     "ele-admin": "^1.11.2",
     "element-china-category-data": "^1.0.4",
     "element-ui": "2.15.7",

src/main.js

@@ -12,6 +12,8 @@ import i18n from './i18n';
 import './styles/index.scss';
 import '@/components/FormGenerator/styles/index.scss';
 import DictSelection from '@/components/Dict/DictSelection';
+import elTableInfiniteScroll from 'el-table-infinite-scroll';
+Vue.use(elTableInfiniteScroll);
 // import tinymce from '@/components/FormGenerator/components/tinymce/index.js';
 // import TinymceEditor from '@/components/TinymceEditor/index.vue';
 // import SvgIcon from '@/components/FormGenerator/components/SvgIcon'; // svg component

src/views/bpm/handleTask/components/inoutBound/common.js

@@ -1,25 +1,34 @@
 export const tableHeader = (selectEquiType) => {
   switch (+selectEquiType) {
     case 3:
-      return [{ label: '牌号', prop: 'brandNum' }];
+      return [
+        { label: '型号', prop: 'modelType', width: '150' },
+        { label: '规格', prop: 'specification', width: '150' },
+        { label: '牌号', prop: 'brandNum', width: '50' }
+      ];
     case 8:
       return [
-        { label: '型号', prop: 'modelType' },
-        { label: '规格', prop: 'specification' }
+        { label: '型号', prop: 'modelType', width: '150' },
+        { label: '规格', prop: 'specification', width: '150' },
+        { label: '牌号', prop: 'brandNum', width: '50' }
       ];
     case 4:
       return [
-        { label: '牌号', prop: 'brandNum' },
-        { label: '型号', prop: 'modelType' }
+        { label: '型号', prop: 'modelType', width: '150' },
+        { label: '规格', prop: 'specification', width: '150' },
+        { label: '牌号', prop: 'brandNum', width: '50' }
       ];
     case 9:
       return [
-        { label: '牌号', prop: 'brandNum' },
-        { label: '型号', prop: 'modelType' }
+        { label: '型号', prop: 'modelType', width: '150' },
+        { label: '规格', prop: 'specification', width: '150' },
+        { label: '牌号', prop: 'brandNum', width: '50' }
       ];
     case 5: //'周转车'
       return [
-        { label: '规格', prop: 'specification' },
+        { label: '型号', prop: 'modelType', width: '150' },
+        { label: '规格', prop: 'specification', width: '150' },
+        { label: '牌号', prop: 'brandNum', width: '50' },
         {
           label: '材质',
           prop: 'texture',
@@ -43,8 +52,9 @@ export const tableHeader = (selectEquiType) => {
       ];
     case 2: //'舟皿'
       return [
-        { label: '规格', prop: 'specification' },
-        { label: '型号', prop: 'modelType' },
+        { label: '型号', prop: 'modelType', width: '150' },
+        { label: '规格', prop: 'specification', width: '150' },
+        { label: '牌号', prop: 'brandNum', width: '50' },
         {
           label: '长宽高',
           prop: '',
@@ -59,13 +69,15 @@ export const tableHeader = (selectEquiType) => {
       ];
     case 1: //'设备'
       return [
-        { label: '型号', prop: 'modelType' },
-        { label: '规格', prop: 'specification' }
+        { label: '型号', prop: 'modelType', width: '150' },
+        { label: '规格', prop: 'specification', width: '150' },
+        { label: '牌号', prop: 'brandNum', width: '50' }
       ];
     case 6: //'模具'
       return [
-        { label: '牌号', prop: 'brandNum' },
-        { label: '型号', prop: 'modelType' },
+        { label: '型号', prop: 'modelType', width: '150' },
+        { label: '规格', prop: 'specification', width: '150' },
+        { label: '牌号', prop: 'brandNum', width: '50' },
         {
           label: '收缩系数',
           prop: '',
@@ -78,14 +90,15 @@ export const tableHeader = (selectEquiType) => {
       ];
     case 7: //'备品备件'
       return [
-        { label: '规格', prop: 'specification' },
-        { label: '型号', prop: 'modelType' }
+        { label: '型号', prop: 'modelType', width: '150' },
+        { label: '规格', prop: 'specification', width: '150' },
+        { label: '牌号', prop: 'brandNum', width: '50' }
       ];
     default:
       return [
-        { label: '牌号', prop: 'brandNum' },
-        { label: '规格', prop: 'specification' },
-        { label: '型号', prop: 'modelType' }
+        { label: '型号', prop: 'modelType', width: '150' },
+        { label: '规格', prop: 'specification', width: '150' },
+        { label: '牌号', prop: 'brandNum', width: '50' }
       ];
   }
 

src/views/bpm/handleTask/components/inoutBound/detailDialog.vue

@@ -407,23 +407,36 @@
 
           <el-table
             ref="detailListTable"
-            :data="detailList"
+            :data="showMaterialCodeReqList"
             tooltip-effect="dark"
             :header-cell-style="rowClass"
             style="width: 100%"
             height="300px"
             stripe
+            v-el-table-infinite-scroll="wrapHandleScroll"
           >
             <el-table-column label="序号" type="index" width="50">
             </el-table-column>
-            <el-table-column label="编码" prop="categoryCode"></el-table-column>
-            <el-table-column label="名称" prop="name"></el-table-column>
+            <el-table-column
+              label="编码"
+              prop="categoryCode"
+              width="150"
+            ></el-table-column>
+            <el-table-column
+              label="名称"
+              prop="name"
+              width="170"
+            ></el-table-column>
             <el-table-column
               label="批号"
               prop="manualBatchNo"
             ></el-table-column>
             <el-table-column label="批次号" prop="batchNo"></el-table-column>
-            <el-table-column label="包装编码" prop="code"></el-table-column>
+            <el-table-column
+              label="包装编码"
+              prop="code"
+              width="200"
+            ></el-table-column>
             <el-table-column
               label="包装数量"
               prop="packingCount"
@@ -540,20 +553,25 @@
           <header-title :title="`物料明细`" size="16px"> </header-title>
           <el-table
             ref="metailListTable"
-            :data="metailList"
+            :data="showResultArray"
             tooltip-effect="dark"
             :header-cell-style="rowClass"
             style="width: 100%"
             height="300px"
             stripe
+            v-el-table-infinite-scroll="materielHandleScroll"
           >
             <el-table-column label="序号" type="index" width="50">
             </el-table-column>
-            <el-table-column label="编码" prop="assetCode"></el-table-column>
+            <el-table-column
+              label="编码"
+              prop="assetCode"
+              width="150"
+            ></el-table-column>
             <el-table-column
               label="名称"
               prop="assetName"
-              width="200"
+              width="170"
             ></el-table-column>
             <el-table-column
               label="批号"
@@ -663,6 +681,7 @@
 
 <script>
   // import { getInfo } from '@/api/stockManagement';
+  import elTableInfiniteScroll from 'el-table-infinite-scroll';
   import StatusStep from '@/components/StatusStep/common.vue';
   // import { fileSystemDownload } from '@/utils';
   import outin from '@/api/warehouseManagement/outin';
@@ -692,6 +711,9 @@
   import { mapGetters, mapActions } from 'vuex';
   export default {
     components: { StatusStep, fileUpload },
+    directives: {
+      'el-table-infinite-scroll': elTableInfiniteScroll
+    },
     props: {
       businessId: {
         default: ''
@@ -726,6 +748,13 @@
         metailList: [],
         dateTypes: 1,
         detailList: [],
+        pageSize: 20,
+        wrapPageNum: 1,
+        materielPageNum: 1,
+        showMaterialCodeReqList: [],
+        materialCodeReqList: [],
+        showResultArray: [],
+        resultArray: [],
         extInfo: {},
         codeList: [],
         auditStatus,
@@ -793,7 +822,7 @@
         deep: true
       },
       // 解决右侧悬浮操作栏不对称问题
-      detailList: {
+      showMaterialCodeReqList: {
         handler() {
           this.$nextTick(() => {
             this.$refs.detailListTable.doLayout();
@@ -802,7 +831,7 @@
         deep: true
       },
       // 解决右侧悬浮操作栏不对称问题
-      metailList: {
+      showResultArray: {
         handler() {
           this.$nextTick(() => {
             this.$refs.metailListTable.doLayout();
@@ -837,6 +866,40 @@
       this._getInfo();
     },
     methods: {
+      wrapHandleScroll() {
+        console.log('---------wrapHandleScroll------------');
+        if (
+          this.showMaterialCodeReqList.length < this.materialCodeReqList.length
+        ) {
+          if (this.materialCodeReqList.length > this.pageSize) {
+            this.wrapPageNum += 1;
+          }
+          this.wrapFetchData();
+        }
+      },
+      wrapFetchData() {
+        const start = (this.wrapPageNum - 1) * this.pageSize;
+        const end = start + this.pageSize;
+        this.showMaterialCodeReqList = this.showMaterialCodeReqList.concat(
+          this.materialCodeReqList.slice(start, end)
+        );
+      },
+      materielHandleScroll() {
+        console.log('---------materielHandleScroll------------');
+        if (this.showResultArray.length < this.resultArray.length) {
+          if (this.resultArray.length > this.pageSize) {
+            this.materielPageNum += 1;
+          }
+          this.materielFetchData();
+        }
+      },
+      materielFetchData() {
+        const start = (this.materielPageNum - 1) * this.pageSize;
+        const end = start + this.pageSize;
+        this.showResultArray = this.showResultArray.concat(
+          this.resultArray.slice(start, end)
+        );
+      },
       // 入库类型和单据映射表
       async getInboundTypeMapping() {
         let obj = {};
@@ -1649,10 +1712,10 @@
             }
           }
           this.exitList = arr;
-          localStorage.setItem('exitList', JSON.stringify(arr));
+          // localStorage.setItem('exitList', JSON.stringify(arr));
           this.dateTypes = arr[0].dateType;
           // 获取包装维度列表
-          this.detailList = arr.map((item) => {
+          this.materialCodeReqList = arr.map((item) => {
             return { ...item, isPack: true };
           });
           let iArr = [];
@@ -1661,7 +1724,7 @@
               iArr.push({ ...ele });
             });
           });
-          this.metailList = iArr.map((item) => {
+          this.resultArray = iArr.map((item) => {
             return {
               ...item,
               isPack: true,
@@ -1673,6 +1736,8 @@
                   : ''
             };
           });
+          this.wrapFetchData();
+          this.materielFetchData();
         }
         // const { data } = await getTreeByPid(0);
         const { data } = await allCategoryLevel();

src/views/bpm/handleTask/components/outsourcedWarehousingNoProcurement/procurementStorage.vue

@@ -1,4 +1,4 @@
-<!-- 采购入库(生产非生产性) 默认代入产品 -->
+<!-- 采购入库(生产非生产性) 默认代入产品 入库标识-->
 <template>
   <div class="procurementStorage">
     <el-card shadow="never">

src/views/bpm/handleTask/components/purchaseOrder/invoice/procurementStorage.vue

@@ -1,4 +1,4 @@
-<!-- 采购入库(生产非生产性) 默认代入产品 -->
+<!-- 采购入库(生产非生产性) 默认代入产品 入库标识-->
 <template>
   <div class="procurementStorage">
     <el-card shadow="never">
@@ -468,7 +468,7 @@
         <div class="mt20">
           <header-title :title="`包装明细`">
             <div class="switch_right">
-              <span v-if="materialCodeReqList.length != 0">
+              <span v-if="materialCodeReqList.length != 0 && !isDisableSplit">
                 分拆<el-switch
                   v-model="isSplit"
                   active-color="#13ce66"
@@ -999,6 +999,12 @@
     },
     props: ['inboundType'],
     computed: {
+      // 是否允许分拆
+      isDisableSplit() {
+        return this.warehousingMaterialList.some(
+          (item) => item.weightUnit == item.measuringUnit
+        );
+      },
       // 条码信息
       materialCodeReqList() {
         return this.warehousingMaterialList

src/views/bpm/handleTask/components/saleOrder/customerReturnGoods/inboundDetails.vue

@@ -1,4 +1,4 @@
-<!-- 客户退货产品处理审批(仓管入库)-->
+<!-- 客户退货产品处理审批(仓管入库) 入库标识-->
 <template>
   <div class="inboundDetails">
     <el-card shadow="never">

src/views/bpm/handleTask/components/saleOrder/customerReturnGoods/interiorProductionStorage.vue

@@ -1,4 +1,4 @@
-<!-- 客户退货产品处理审批(内部生产物品入库) -->
+<!-- 客户退货产品处理审批(内部生产物品入库) 入库标识-->
 <template>
   <div class="interiorProductionStorage">
     <el-card shadow="never">

src/views/bpm/handleTask/components/saleOrder/customerReturnGoods/interiorStorageToOutsourcing.vue

@@ -1,4 +1,4 @@
-<!-- 客户退货产品处理审批(外协入库) -->
+<!-- 客户退货产品处理审批(外协入库) 入库标识-->
 <template>
   <div class="ele-body">
     <el-card shadow="never">

src/views/bpm/outgoingManagement/components/AssetsDialog.vue

@@ -120,6 +120,15 @@
             ></el-input>
           </el-form-item>
         </el-col>
+        <el-col :span="6">
+          <el-form-item label="牌号">
+            <el-input
+              type="text"
+              placeholder="搜索牌号"
+              v-model="searchForm.brandNum"
+            ></el-input>
+          </el-form-item>
+        </el-col>
         <el-col v-if="dimension != 2" :span="6">
           <el-form-item label="质检结果">
             <el-select
@@ -407,6 +416,7 @@
           code: '',
           assetName: '',
           batchNo: '',
+          brandNum: '',
           engrave: '',
           barcodes: '',
           qualityResult: '',
@@ -642,6 +652,7 @@
         this.searchForm.barcodes = '';
         this.searchForm.qualityResult = '';
         this.searchForm.manualBatchNo = '';
+        this.searchForm.brandNum = '';
         this.doSearch();
       },
       doSearch() {

src/views/bpm/tickets/components/RepairDetailsDialog.vue

@@ -126,7 +126,7 @@
           </el-col>
           <el-col :span="12" class="repair_column">
             <span>报修人：</span>
-            <span>{{ infoData ? infoData.repairUserName : '' }}</span>
+            <span>{{ infoData ? infoData.requestUserName : '' }}</span>
           </el-col>
         </el-row>
         <el-row class="repair_row">