修改

src/views/newBagDetails/components/baggageMessage.vue

@@ -1,20 +1,22 @@
 <template>
   <div v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" class="baggageMessage">
-    <template v-if="messageList.length">
-      <el-row :gutter="24" type="flex">
-        <el-col v-for="(message, index) in messageList" :key="index" :span="6">
-          <div class="card">
-            <div class="message-date">{{ message.flightDate }}</div>
-            <div class="message-content">
-              {{ message.sourceData.replaceAll(/[\r\n]{2,}/g, '\n').replaceAll('\\', '') }}
+    <el-scrollbar style="height: 100%">
+      <template v-if="messageList.length">
+        <el-row :gutter="24">
+          <el-col v-for="(message, index) in messageList" :key="index" :span="6">
+            <div class="card">
+              <div class="message-date">{{ message.flightDate }}</div>
+              <div class="message-content">
+                {{ message.sourceData.replaceAll(/[\r\n]{2,}/g, '\n').replaceAll('\\', '') }}
+              </div>
             </div>
-          </div>
-        </el-col>
-      </el-row>
-    </template>
-    <template v-else>
-      <el-empty :image-size="1" description="暂无数据" />
-    </template>
+          </el-col>
+        </el-row>
+      </template>
+      <template v-else>
+        <el-empty :image-size="1" description="暂无数据" />
+      </template>
+    </el-scrollbar>
     <div class="btns">
       <img class="btn-square btn-shadow" src="@/assets/baggage/ic_export.png" title="导出" @click="exportMessageToExcel">
     </div>

src/views/newBagDetails/components/baggageView.vue

@@ -15,14 +15,14 @@
                 <div class="step-line">
                   <div v-for="(line, index) in 6" :key="index" :class="['step-line-segment', { 'step-line-active': activeStepLine(index) }]" />
                 </div>
-                <div v-for="(item, index) in stepNodes" :key="index" :class="{ 'step-item': true, 'active-item': item.currentResult }">
+                <div v-for="(p, index) in item.bagStatus" :key="index" :class="{ 'step-item': true, 'active-item': item.currentResult }">
                   <div class="step-circle">
-                    <span class="step-name">{{ item.nodeName }}</span>
+                    <span class="step-name">{{ p.nodeName }}</span>
                   </div>
                   <div v-if="item.currentResult" class="step-info">
-                    <div :class="statusClasses(item.currentResult)">{{ item.currentResult }}</div>
-                    <span class="step-time">{{ item.processingTime }}</span>
-                    <div class="step-location">{{ item.locationId }}</div>
+                    <!-- <div :class="statusClasses(item.currentResult)">{{ item.currentResult }}</div> -->
+                    <span class="step-time">{{ p.timeValue }}</span>
+                    <!-- <div class="step-location">{{ item.locationId }}</div> -->
                   </div>
                   <div v-else class="step-info">无</div>
                 </div>
@@ -52,7 +52,50 @@ export default {
   },
   data () {
     return {
-      stepNodes: [],
+      stepNodes: [
+        {
+          nodeCode: 'CHECKIN',
+          nodeName: '值机',
+          timeProp: 'checkInDate',
+          timeValue: ''
+        },
+        {
+          nodeCode: 'SECURITY',
+          nodeName: '安检',
+          timeProp: 'security_check_time',
+          timeValue: ''
+        },
+        {
+          nodeCode: 'SORT',
+          nodeName: '分拣',
+          timeProp: 'sorting_time',
+          timeValue: ''
+        },
+        {
+          nodeCode: 'LOAD',
+          nodeName: '装车',
+          timeProp: 'loading_time',
+          timeValue: ''
+        },
+        {
+          nodeCode: 'INFL',
+          nodeName: '装机',
+          timeProp: 'installation_time',
+          timeValue: ''
+        },
+        {
+          nodeCode: 'UNLOAD',
+          nodeName: '卸机',
+          timeProp: 'sorting_time',
+          timeValue: ''
+        },
+        {
+          nodeCode: 'ARRIVED',
+          nodeName: '到达',
+          timeProp: 'sorting_time',
+          timeValue: ''
+        }
+      ],
       tableData: [],
       page: 0,
       pageSize: 20,
@@ -94,9 +137,6 @@ export default {
   created () {
     this.dataContent = this.query
   },
-  mounted () {
-    this.resetStepNodes()
-  },
   methods: {
     //获取行李信息
     async getLuggageList (id, dataContent = this.dataContent, page, pageSize) {
@@ -106,7 +146,6 @@ export default {
       }
       try {
         this.loading = true
-        this.resetStepNodes()
         const { code, returnData } = await this.getQueryList(id, dataContent, page, pageSize)
         if (code == 0) {
           if (returnData.length === 0) {
@@ -114,21 +153,18 @@ export default {
             this.noMore = true;
             this.loading = false;
           }
-          returnData.forEach(({ nodeCode, nodeName, processingTime, locationId, currentResult }) => {
-            const replaceIndex = this.stepNodes.findIndex(
-              stepNode => stepNode.nodeCode === nodeCode || isSameStep(stepNode.nodeCode, nodeCode)
-            )
-            if (replaceIndex > -1) {
-              this.stepNodes.splice(replaceIndex, 1, {
-                nodeCode,
-                nodeName,
-                processingTime: processingTime?.replace('T', '\n'),
-                locationId,
-                currentResult
-              })
-            }
+          returnData.forEach(item => {
+            item.bagStatus = this.stepNodes
           })
           this.tableData.push(...returnData);
+          this.tableData.forEach(item => {
+            item.bagStatus.map(p => {
+              const { timeProp } = p
+              if (item.hasOwnProperty(timeProp)) {
+                p.timeValue = item[timeProp]
+              }
+            })
+          })
           this.loading = false;
         } else {
           this.page--;
@@ -150,39 +186,6 @@ export default {
         return;
       }
       this.getLuggageList(SERVICE_ID.bagDetailId, this.dataContent, ++this.page, this.pageSize);
-      console.log(this.stepNodes)
-    },
-    resetStepNodes () {
-      this.stepNodes = [
-        {
-          nodeCode: 'CHECKIN',
-          nodeName: '值机'
-        },
-        {
-          nodeCode: 'SECURITY',
-          nodeName: '安检'
-        },
-        {
-          nodeCode: 'SORT',
-          nodeName: '分拣'
-        },
-        {
-          nodeCode: 'LOAD',
-          nodeName: '装车'
-        },
-        {
-          nodeCode: 'INFL',
-          nodeName: '装机'
-        },
-        {
-          nodeCode: 'UNLOAD',
-          nodeName: '卸机'
-        },
-        {
-          nodeCode: 'ARRIVED',
-          nodeName: '到达'
-        }
-      ]
     },
   }
 }

src/views/newBagDetails/index.vue

@@ -5,7 +5,9 @@
         <el-row :gutter="20">
           <el-col :span="4">
             <div class="flex-wrap">
-              <span class="newBagDetails-info-look-name">{{ passengerName }}</span>
+              <el-tooltip class="item" effect="dark" :content="passengerName" placement="top">
+                <span class="newBagDetails-info-look-name">{{ passengerName }}</span>
+              </el-tooltip>
               <el-button type="text">查看</el-button>
             </div>
           </el-col>
@@ -56,10 +58,10 @@ export default {
     return {
       infoArrs: [
         {
-          prop: '',
+          prop: 'luggageCount',
           label: '总件数',
           rows: 3,
-          value: '3'
+          value: ''
         },
         {
           prop: 'luggageWeight',