优化高级查询样式

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

@@ -7,62 +7,31 @@
 -->
 <template>
   <div class="baggage-view">
-    <div
-      ref="basicInfo"
-      class="part1"
-    >
+    <div ref="basicInfo" class="part1">
       <div class="title">
         <span>行李基本信息</span>
-        <el-radio-group
-          v-model="infoBtn"
-          class="radioBtn"
-          size="mini"
-          fill="#FFFFFF"
-          text-color="#28344D"
-        >
-          <el-radio-button
-            v-for="item in infoRadios"
-            :key="item"
-            :label="item"
-          />
+        <el-radio-group v-model="infoBtn" class="radioBtn" size="mini" fill="#FFFFFF" text-color="#28344D">
+          <el-radio-button v-for="item in infoRadios" :key="item" :label="item" />
         </el-radio-group>
       </div>
       <div class="part1_info">
         <el-row :gutter="12">
-          <el-col
-            v-for="(item, index) in baggageBasicInfoCols"
-            :key="index"
-            :xl="[1, 4, 5].includes(index % 7) ? 4 : 3"
-            :sm="6"
-            :xs="6"
-          >
-            <span class="label">{{ item.label }}：</span><span
-              class="content"
-              :title="formattedBaggageInfo(item.prop)"
-            >{{ formattedBaggageInfo(item.prop) }}</span>
+          <el-col v-for="(item, index) in baggageBasicInfoCols" :key="index" :xl="[1, 4, 5].includes(index % 7) ? 4 : 3" :sm="6" :xs="6">
+            <span class="label">{{ item.label }}：</span><span class="content" :title="formattedBaggageInfo(item.prop)">{{ formattedBaggageInfo(item.prop) }}</span>
           </el-col>
         </el-row>
       </div>
     </div>
-    <div
-      v-show="infoBtn === infoRadios[0]"
-      class="part2"
-    >
+    <div v-show="infoBtn === infoRadios[0]" class="part2">
       <div class="part2_info">
-        <div
-          style="width: 120px"
-          class="title"
-        >行李跟踪信息</div>
+        <div style="width: 120px" class="title">行李跟踪信息</div>
         <div class="type normal">
           {{ baggageBasicInfo.BagStatus }}
         </div>
         <div class="step">
           <div class="baggage-track-chart">
             <div class="stepLine">
-              <div
-                :style="{ width: lineWidth }"
-                class="stepLineBlue"
-              />
+              <div :style="{ width: lineWidth }" class="stepLineBlue" />
             </div>
             <!-- <el-popover
               v-for="(item, index) in stepData"
@@ -87,13 +56,7 @@
                 <span>{{ item.DealTime }}</span>
               </div>
             </el-popover> -->
-            <div
-              v-for="(item, index) in stepData"
-              :key="index"
-              :class="{ 'stepItem': true, activeItem: item.DealTime }"
-              @mouseenter="itemMouseEnterHandler(item)"
-              @mouseleave="itemMouseLeaveHandler(item)"
-            >
+            <div v-for="(item, index) in stepData" :key="index" :class="{ 'stepItem': true, activeItem: item.DealTime }" @mouseenter="itemMouseEnterHandler(item)" @mouseleave="itemMouseLeaveHandler(item)">
               <span class="head">
                 <!-- {{ item.airPort }} -->
                 <!-- <span v-if="item.airPort && item.nodeName !== ''">-</span> -->
@@ -106,27 +69,13 @@
         </div>
       </div>
       <div class="btns">
-        <img
-          class="btn-square btn-shadow"
-          src="../../../../assets/baggage/ic_export.png"
-          title="导出"
-          @click="exportHandler('table', '行李节点列表')"
-        >
-        <img
-          class="btn-square btn-shadow"
-          src="../../../../assets/baggage/ic_setting.png"
-          title="列设置"
-          @click="show"
-        >
+        <img class="btn-square btn-shadow" src="../../../../assets/baggage/ic_export.png" title="导出" @click="exportHandler('table', '行李节点列表')">
+        <img class="btn-square btn-shadow" src="../../../../assets/baggage/ic_setting.png" title="列设置" @click="show">
       </div>
     </div>
-    <div
-      v-show="infoBtn == infoRadios[0]"
-      class="part3"
-      :style="{
+    <div v-show="infoBtn == infoRadios[0]" class="part3" :style="{
         'height': `calc(100vh - 80px - ${basicInfoHeight}px - 128px - 3 * 8px - 44px)`
-      }"
-    >
+      }">
       <!-- <el-popover
         trigger="hover"
         placement="top-start"
@@ -135,30 +84,8 @@
         :disabled="!messageTooltipVisible"
       >
         <div class="pre-line">{{ messageTooltip }}</div> -->
-      <el-table
-        ref="table"
-        :data="baggageTableData"
-        height="100%"
-        size="mini"
-        border
-        fit
-        :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"
-          :key="item.index"
-          :prop="item.prop"
-          :label="item.name"
-          :align="item.align || 'center'"
-          :width="item.width"
-          show-overflow-tooltip
-        >
+      <el-table ref="table" :data="baggageTableData" height="100%" size="mini" border fit :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" :key="item.index" :prop="item.prop" :label="item.name" :align="item.align || 'center'" :width="item.width" show-overflow-tooltip>
           <template slot="header">
             <div class="cell-content">{{ item.name }}</div>
           </template>
@@ -170,13 +97,9 @@
       <!-- </el-popover> -->
     </div>
 
-    <div
-      v-show="infoBtn === infoRadios[1]"
-      class="part4"
-      :style="{
+    <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>
         <div class="btns">
@@ -193,15 +116,8 @@
       </header>
       <main class="main">
         <template v-if="messageList.length">
-          <el-row
-            :gutter="24"
-            type="flex"
-          >
-            <el-col
-              v-for="(message, index) in messageList"
-              :key="index"
-              :span="6"
-            >
+          <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.date + ' UTC' }}</div>
                 <div class="message-content">
@@ -221,46 +137,23 @@
           </el-row>
         </template>
         <template v-else>
-          <el-empty
-            :image-size="1"
-            description="暂无数据"
-          />
+          <el-empty :image-size="1" description="暂无数据" />
         </template>
       </main>
     </div>
     <!--列设置-->
-    <Dialog
-      :flag="dialogFlag"
-      class="dialog-check-group"
-    >
+    <Dialog :flag="dialogFlag" class="dialog-check-group">
       <div class="dialog-wrapper">
         <div class="title">列设置</div>
         <div class="content">
-          <el-tree
-            :data="tableCols"
-            :class="colsCheckClass"
-            show-checkbox
-            node-key="index"
-            :default-expand-all="true"
-            :props="{
+          <el-tree :data="tableCols" :class="colsCheckClass" show-checkbox node-key="index" :default-expand-all="true" :props="{
               label: 'name',
               children: 'children',
-            }"
-            :default-checked-keys="checkedKeysTemp"
-            @check="handleCheck"
-          />
+            }" :default-checked-keys="checkedKeysTemp" @check="handleCheck" />
         </div>
         <div class="foot right t30">
-          <el-button
-            size="medium"
-            class="r24"
-            type="primary"
-            @click="onCheck('baggageTableData')"
-          >确定</el-button>
-          <el-button
-            size="medium"
-            @click="hide"
-          >取消</el-button>
+          <el-button size="medium" class="r24" type="primary" @click="onCheck('baggageTableData')">确定</el-button>
+          <el-button size="medium" @click="hide">取消</el-button>
         </div>
       </div>
     </Dialog>
@@ -279,7 +172,7 @@ export default {
     Dialog
   },
   mixins: [tableColsMixin],
-  data() {
+  data () {
     return {
       departureAirport: '',
       landingAirport: '',
@@ -458,7 +351,7 @@ export default {
     }
   },
   computed: {
-    lineWidth() {
+    lineWidth () {
       for (let i = this.stepData.length - 1; i > -1; i--) {
         if (this.stepData[i].DealTime) {
           return (i * 100) / (this.stepData.length - 1) + '%'
@@ -480,7 +373,7 @@ export default {
     //     )
     //   }
     // },
-    formattedBaggageInfo() {
+    formattedBaggageInfo () {
       return function (prop) {
         const value = this.baggageBasicInfo[prop]
         if ((value ?? '') === '') {
@@ -510,7 +403,7 @@ export default {
   },
   watch: {
     $route: {
-      handler({ path, query }) {
+      handler ({ path, query }) {
         this.infoBtn = ''
         if (path.includes('baggageView')) {
           const { flightNO, flightDate, bagSN } = query
@@ -526,7 +419,7 @@ export default {
       immediate: true
     },
     infoBtn: {
-      handler(val) {
+      handler (val) {
         this.clearIntervalAll()
         const that = this
         if (val === this.infoRadios[0]) {
@@ -544,7 +437,7 @@ export default {
       immediate: true
     },
     hoveredRow: {
-      handler(row) {
+      handler (row) {
         this.stepData.forEach(item => {
           item.tableHover = row && item.resourceFile === row.resourceFile
         })
@@ -552,22 +445,22 @@ export default {
       deep: true
     }
   },
-  activated() {
+  activated () {
     this.basicInfoHeight = this.$refs['basicInfo'].offsetHeight
     this.$refs['table']?.doLayout()
   },
-  updated() {
+  updated () {
     this.basicInfoHeight = this.$refs['basicInfo'].offsetHeight
     this.$refs['table']?.doLayout()
   },
-  deactivated() {
+  deactivated () {
     this.clearIntervalAll()
   },
-  beforeDestroy() {
+  beforeDestroy () {
     this.clearIntervalAll()
   },
   methods: {
-    clearIntervalAll() {
+    clearIntervalAll () {
       this.loopEvent && clearInterval(this.loopEvent)
       this.loopEvent = null
       this.queryMessageLoop && clearInterval(this.queryMessageLoop)
@@ -583,7 +476,7 @@ export default {
     //     }
     //   }
     // },
-    initTableData(tableData) {
+    initTableData (tableData) {
       const spanArr = []
       let pos = 0
       for (let i = 0; i < tableData.length; i++) {
@@ -607,12 +500,12 @@ export default {
       this.spanArr = spanArr
       this.pos = pos
     },
-    headerCellClass({ row, column, rowIndex, columnIndex }) {
+    headerCellClass ({ row, column, rowIndex, columnIndex }) {
       if (['departureAirport', 'landingAirport'].includes(column.property)) {
         return 'pre-line'
       }
     },
-    cellClass({ row, column, rowIndex, columnIndex }) {
+    cellClass ({ row, column, rowIndex, columnIndex }) {
       const classes = []
       if (column.property === 'flightNO') {
         classes.push('cell-click')
@@ -622,7 +515,7 @@ export default {
       }
       return classes.join(' ')
     },
-    cellClickHandler(row, column, cell, event) {
+    cellClickHandler (row, column, cell, event) {
       switch (column.property) {
         case 'flightNO':
           this.$router.push({
@@ -637,7 +530,7 @@ export default {
           break
       }
     },
-    tableSpanMethod({ row, column, rowIndex, columnIndex }) {
+    tableSpanMethod ({ row, column, rowIndex, columnIndex }) {
       if (['flightNO', 'flightDate', 'departureAirport', 'landingAirport'].includes(column['property'])) {
         const _row = this.spanArr[rowIndex]
         const _col = _row > 0 ? 1 : 0
@@ -647,30 +540,30 @@ export default {
         }
       }
     },
-    itemMouseEnterHandler(item) {
+    itemMouseEnterHandler (item) {
       if (item.resourceFile) {
         // this.checkBaggageMessage(item.resourceFile)
         item.hover = true
       }
     },
-    itemMouseLeaveHandler(item) {
+    itemMouseLeaveHandler (item) {
       item.hover = false
     },
-    cellMouseEnterHandler(row, column, cell, event) {
+    cellMouseEnterHandler (row, column, cell, event) {
       // if (row?.resourceFile) {
       //   this.checkBaggageMessage(row.resourceFile)
       // }
       this.hoveredRow = row
     },
-    cellMouseLeaveHandler() {
+    cellMouseLeaveHandler () {
       this.hoveredRow = null
     },
-    exportHandler(refName, tableName) {
+    exportHandler (refName, tableName) {
       const table = this.$refs[refName].$el.cloneNode(true)
       const fileName = `${tableName}-${this.queryData.bagSN}-${this.queryData.flightNO}-${this.queryData.flightDate}.xlsx`
       throttledExportToExcel(table, tableName, fileName)
     },
-    async checkBaggageMessage(resourceFile) {
+    async checkBaggageMessage (resourceFile) {
       if (!this.messageTooltipList.some(message => message.resourceFile === resourceFile)) {
         const result = await this.queryMessage([resourceFile])
         this.messageTooltipList.push({
@@ -680,19 +573,19 @@ export default {
       }
     },
     // 行李详情基础信息
-    queryBaggageBasicInfo(dataContent) {
+    queryBaggageBasicInfo (dataContent) {
       return myQuery(DATACONTENT_ID.baggageBasicInfo, ...dataContent)
     },
     // 行李详情追踪链
-    queryBaggageTrack(dataContent) {
+    queryBaggageTrack (dataContent) {
       return myQuery(DATACONTENT_ID.baggageTrack, ...dataContent)
     },
     // 行李详情表格
-    queryBaggageDetails(dataContent) {
+    queryBaggageDetails (dataContent) {
       return myQuery(DATACONTENT_ID.baggageDetails, ...dataContent)
     },
     // 原始报文
-    async queryMessage(dataContent) {
+    async queryMessage (dataContent) {
       try {
         const { code, returnData, message } = await BaggageMessageQuery({
           id: DATACONTENT_ID.baggageMessage,
@@ -710,7 +603,7 @@ export default {
     // async queryMessage(dataContent) {
     //   return myQuery(DATACONTENT_ID.baggageMessage, ...dataContent)
     // },
-    async queryBaggageAll(queryData = this.queryData) {
+    async queryBaggageAll (queryData = this.queryData) {
       const { flightNO, flightDate, bagSN } = queryData
       const dataContent = [flightNO, flightDate, bagSN]
       try {
@@ -741,12 +634,10 @@ export default {
           if (item['dealTime']) {
             item['dealTime'] = item['dealTime'].replace('T', ' ')
           }
-          item['departureAirport'] = `${item['departureAirport']}\n${
-            item['departureTime'] ? item['departureTime'].replace('T', '\n') : ''
-          }`
-          item['landingAirport'] = `${item['landingAirport']}\n${
-            item['landingTime'] ? item['landingTime'].replace('T', '\n') : ''
-          }`
+          item['departureAirport'] = `${item['departureAirport']}\n${item['departureTime'] ? item['departureTime'].replace('T', '\n') : ''
+            }`
+          item['landingAirport'] = `${item['landingAirport']}\n${item['landingTime'] ? item['landingTime'].replace('T', '\n') : ''
+            }`
           if (item['DeviceCode'] === 'STARHUB') {
             item['dataSource'] = 'Manual Load'
           } else if (item['toLocation']?.length === 2) {
@@ -762,7 +653,7 @@ export default {
         console.log('出错了', error.message || error)
       }
     },
-    async baggageMessageQuery() {
+    async baggageMessageQuery () {
       const { flightNO, flightDate, bagSN } = this.queryData
       const dataContent = [flightNO, flightDate, bagSN]
       try {
@@ -949,9 +840,10 @@ export default {
           padding: 0;
           word-spacing: 0;
           font-size: 14px;
-          font-family: Helvetica, 'Microsoft YaHei';
+          font-family: Helvetica, "Microsoft YaHei";
           font-weight: 400;
           color: #303133;
+          width: 100% !important;
           .cell-content {
             padding: 6px 0;
           }
@@ -1037,16 +929,16 @@ export default {
     white-space: pre-line;
   }
 }
-.el-popper[x-placement^='top'].popover-dark .popper__arrow::after {
+.el-popper[x-placement^="top"].popover-dark .popper__arrow::after {
   border-top-color: #303133;
 }
-.el-popper[x-placement^='right'].popover-dark .popper__arrow::after {
+.el-popper[x-placement^="right"].popover-dark .popper__arrow::after {
   border-right-color: #303133;
 }
-.el-popper[x-placement^='bottom'].popover-dark .popper__arrow::after {
+.el-popper[x-placement^="bottom"].popover-dark .popper__arrow::after {
   border-bottom-color: #303133;
 }
-.el-popper[x-placement^='left'].popover-dark .popper__arrow::after {
+.el-popper[x-placement^="left"].popover-dark .popper__arrow::after {
   border-left-color: #303133;
 }
 </style>