行李视图样式修改

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

@@ -1,13 +1,16 @@
 <!--
  * @Author: your name
  * @Date: 2022-01-17 10:39:22
- * @LastEditTime: 2022-05-30 18:12:43
+ * @LastEditTime: 2022-06-30 09:46:18
  * @LastEditors: your name
  * @Description: 行李视图
 -->
 <template>
   <div class="baggage-view">
-    <div class="part1">
+    <div
+      ref="basicInfo"
+      class="part1"
+    >
       <div class="title">
         <span>行李基本信息</span>
         <el-radio-group
@@ -29,7 +32,9 @@
           <el-col
             v-for="(item, index) in baggageBasicInfoCols"
             :key="index"
-            :span="[1, 4, 5].includes(index % 7) ? 4 : 3"
+            :xl="[1, 4, 5].includes(index % 7) ? 4 : 3"
+            :sm="6"
+            :xs="6"
           >
             <span class="label">{{ item.label }}：</span><span
               class="content"
@@ -115,6 +120,9 @@
     <div
       v-show="infoBtn == infoRadios[0]"
       class="part3"
+      :style="{
+        'height': `calc(100vh - 80px - ${basicInfoHeight}px - 128px - 3 * 8px - 44px)`
+      }"
     >
       <!-- <el-popover
         trigger="hover"
@@ -127,16 +135,17 @@
       <el-table
         ref="table"
         :data="baggageTableData"
-        height="calc(100vh - 80px - 232px - 128px - 3 * 8px - 44px)"
+        :height="`calc(100vh - 80px - ${basicInfoHeight}px - 128px - 3 * 8px - 44px)`"
         size="mini"
         border
         fit
-        :header-cell-class-name="cellClass"
+        :header-cell-class-name="headerCellClass"
         :header-cell-style="{ color: '#101116' }"
         :cell-class-name="cellClass"
         :span-method="tableSpanMethod"
         @cell-mouse-enter="cellMouseEnterHandler"
         @cell-mouse-leave="cellMouseLeaveHandler"
+        @cell-click="cellClickHandler"
       >
         <el-table-column
           v-for="item in tableColsCopy"
@@ -161,6 +170,9 @@
     <div
       v-show="infoBtn === infoRadios[1]"
       class="part4"
+      :style="{
+        'height': `calc(100vh - 80px - ${basicInfoHeight}px - 2 * 8px - 44px)`
+      }"
     >
       <header class="head">
         <div class="title">行李跟踪信息</div>
@@ -267,6 +279,7 @@ export default {
       departureAirport: '',
       landingAirport: '',
       queryData: {},
+      basicInfoHeight: 0,
       baggageBasicInfoCols: [
         {
           label: '行李牌号',
@@ -523,6 +536,7 @@ export default {
     }, 3000)
   },
   updated() {
+    this.basicInfoHeight = this.$refs['basicInfo'].offsetHeight
     this.$refs['table']?.doLayout()
   },
   beforeDestroy() {
@@ -566,11 +580,36 @@ export default {
       this.spanArr = spanArr
       this.pos = pos
     },
-    cellClass({ row, column, rowIndex, columnIndex }) {
+    headerCellClass({ row, column, rowIndex, columnIndex }) {
       if (['departureAirport', 'landingAirport'].includes(column.property)) {
         return 'pre-line'
       }
     },
+    cellClass({ row, column, rowIndex, columnIndex }) {
+      const classes = []
+      if (column.property === 'flightNo') {
+        classes.push('cell-click')
+      }
+      if (['departureAirport', 'landingAirport'].includes(column.property)) {
+        classes.push('pre-line')
+      }
+      return classes.join(' ')
+    },
+    cellClickHandler(row, column, cell, event) {
+      switch (column.property) {
+        case 'flightNo':
+          this.$router.push({
+            path: `/${this.$route.path.split('/').slice(1, -1).join('/')}/flightView`,
+            query: {
+              FlightNO: row.flightNo,
+              FlightDate: row.flightDate
+            }
+          })
+          break
+        default:
+          break
+      }
+    },
     tableSpanMethod({ row, column, rowIndex, columnIndex }) {
       if (['flightNo', 'flightDate', 'departureAirport', 'landingAirport'].includes(column['property'])) {
         const _row = this.spanArr[rowIndex]
@@ -591,9 +630,9 @@ export default {
       item.hover = false
     },
     cellMouseEnterHandler(row, column, cell, event) {
-      if (row?.resourceFile) {
-        // this.checkBaggageMessage(row.resourceFile)
-      }
+      // if (row?.resourceFile) {
+      //   this.checkBaggageMessage(row.resourceFile)
+      // }
       this.hoveredRow = row
     },
     cellMouseLeaveHandler() {
@@ -700,7 +739,7 @@ export default {
   padding: 8px 8px 0;
   .part1 {
     width: 100%;
-    height: 232px;
+    // height: 232px;
     background: #041741;
     padding: 16px 30px;
     .title {
@@ -827,7 +866,7 @@ export default {
   .part3 {
     width: 100%;
     // header-80px、part1-232px、part2-128px、间隙3*8px、底部44px
-    height: calc(100vh - 80px - 232px - 128px - 3 * 8px - 44px);
+    // height: calc(100vh - 80px - 232px - 128px - 3 * 8px - 44px);
     background: #ffffff;
     ::v-deep .el-table {
       width: 100%;
@@ -840,6 +879,12 @@ export default {
       .el-table__cell {
         // background: #f0f3f7;
         padding: 0;
+        &.cell-click {
+          cursor: pointer;
+          .cell {
+            color: #2d7cff;
+          }
+        }
         .cell {
           padding: 0;
           word-spacing: 0;
@@ -863,7 +908,7 @@ export default {
   }
   .part4 {
     width: 100%;
-    height: calc(100vh - 80px - 232px - 2 * 8px - 44px);
+    // height: calc(100vh - 80px - 232px - 2 * 8px - 44px);
     .head {
       padding: 16px 24px 11px 30px;
       background: transparent;