行李视图-表格合并

src/views/baggageManagement/components/baggage/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2022-01-17 10:39:22
- * @LastEditTime: 2022-05-06 15:11:47
+ * @LastEditTime: 2022-05-07 14:23:56
  * @LastEditors: your name
  * @Description: 行李视图
 -->
@@ -26,7 +26,6 @@
       </div>
       <div class="part1_info">
         <el-row :gutter="12">
-          <!-- 第一行 -->
           <el-col
             v-for="(item, index) in baggageBasicInfoCols"
             :key="index"
@@ -109,6 +108,7 @@
         border
         stripe
         fit
+        :span-method="tableSpanMethod"
         :header-cell-style="{ color: '#101116' }"
       >
         <el-table-column
@@ -422,13 +422,44 @@ export default {
     //   if (columnIndex < 4) {
     //     const _row = this.spanArr[rowIndex]
     //     const _col = _row > 0 ? 1 : 0
-    //     // console.log(`rowspan:${_row} colspan:${_col}`)
     //     return {
     //       rowspan: _row,
     //       colspan: _col
     //     }
     //   }
     // },
+    initTableData(tableData) {
+      const spanArr = []
+      let pos = 0
+      for (let i = 0; i < tableData.length; i++) {
+        if (i === 0) {
+          spanArr.push(1)
+        } else {
+          if (
+            tableData[i]['flightNo'] === tableData[i - 1]['flightNo'] &&
+            tableData[i]['flightDate'] === tableData[i - 1]['flightDate']
+          ) {
+            spanArr[pos] += 1
+            spanArr.push(0)
+          } else {
+            spanArr.push(1)
+            pos = i
+          }
+        }
+      }
+      this.spanArr = spanArr
+      this.pos = pos
+    },
+    tableSpanMethod({ row, column, rowIndex, columnIndex }) {
+      if (['flightNo', 'flightDate'].includes(column['property'])) {
+        const _row = this.spanArr[rowIndex]
+        const _col = _row > 0 ? 1 : 0
+        return {
+          rowspan: _row,
+          colspan: _col
+        }
+      }
+    },
     // 行李详情基础信息
     queryBaggageBasicInfo(dataContent) {
       return myQuery(queryMap.baggageBasicInfoByID, ...dataContent)
@@ -459,19 +490,18 @@ export default {
         //   item['DealTime'] = item['DealTime'].replace('T', '\n')
         //   item.NodeNameEN && this.stepData.splice(index, 1, item)
         // })
-        this.baggageTableData = this._.orderBy(baggageDetails, item => new Date(item.dealTime.replace('T', ' ')).getTime()).map(
-          (item, index) => {
-            this.stepData.splice(index, 1, {
-              NodeNameEN: item.nodeCode,
-              DealTime: item.dealTime.replace('T', '\n')
-            })
+        this.baggageTableData = baggageDetails.map((item, index) => {
+          this.stepData.splice(index, 1, {
+            NodeNameEN: item.nodeCode,
+            DealTime: item.dealTime.replace('T', '\n')
+          })
 
-            item['dealTime'] = item['dealTime'].split('T')[1]
-            item['departureAirport'] = `${item['departureAirport']}\n${item['departureTime'].split('T')[1]}`
-            item['landingAirport'] = `${item['landingAirport']}\n${item['landingTime'].split('T')[1]}`
-            return item
-          }
-        )
+          item['dealTime'] = item['dealTime'].split('T')[1]
+          item['departureAirport'] = `${item['departureAirport']}\n${item['departureTime'].split('T')[1]}`
+          item['landingAirport'] = `${item['landingAirport']}\n${item['landingTime'].split('T')[1]}`
+          return item
+        })
+        this.initTableData(this.baggageTableData)
       } catch (error) {
         console.log('错误', error)
       }