修改

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

@@ -7,96 +7,44 @@
 -->
 <template>
   <div class="baggage-view">
-    <div
-      class="part1"
-      :style="{ height: basicInfoHeight }"
-    >
+    <div class="part1" :style="{ height: basicInfoHeight }">
       <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>
         <!-- <BackButton /> -->
       </div>
-      <div
-        v-show="basicInfoOpen"
-        class="part1_info"
-      >
+      <div v-show="basicInfoOpen" class="part1_info">
         <el-row :gutter="12">
-          <el-col
-            v-for="(item, index) in baggageBasicInfoCols"
-            :key="index"
-            :xl="[0, 2, 4].includes(index % 7) ? 4 : 3"
-            :sm="6"
-            :xs="6"
-          >
+          <el-col v-for="(item, index) in baggageBasicInfoCols" :key="index" :xl="[0, 2, 4].includes(index % 7) ? 4 : 3" :sm="6" :xs="6">
             <span class="label">{{ item.label }}：</span>
-            <span
-              class="content"
-              :class="{
+            <span class="content" :class="{
                 click: item.prop === 'compensationSign' && baggageBasicInfo[item.prop]
-              }"
-              :title="formattedBaggageInfo(item.prop)"
-              @click="baggageBasicInfoClickHandler(item.prop)"
-              >{{ formattedBaggageInfo(item.prop) }}</span
-            >
+              }" :title="formattedBaggageInfo(item.prop)" @click="baggageBasicInfoClickHandler(item.prop)">{{ formattedBaggageInfo(item.prop) }}</span>
           </el-col>
         </el-row>
       </div>
-      <div
-        class="button-toggle"
-        @click="basicInfoToggle"
-      >
+      <div class="button-toggle" @click="basicInfoToggle">
         <i :class="basicInfoOpen ? 'el-icon-caret-top' : 'el-icon-caret-bottom'" />
       </div>
     </div>
-    <div
-      v-show="infoBtn === infoRadios[0]"
-      class="part2"
-      :style="{ height: trackListHeight }"
-    >
+    <div v-show="infoBtn === infoRadios[0]" class="part2" :style="{ height: trackListHeight }">
       <div class="part2_info">
         <div class="title">行李跟踪信息</div>
         <div class="type normal">
           {{ baggageBasicInfo.BagStatus }}
         </div>
         <div class="airline">
-          <el-select
-            v-model="selectedAirline"
-            size="mini"
-            class="airline-select"
-          >
-            <el-option
-              v-for="airline in airlineList"
-              :key="airline.value"
-              :value="airline.value"
-              :label="airline.label"
-            />
+          <el-select v-model="selectedAirline" size="mini" class="airline-select">
+            <el-option v-for="airline in airlineList" :key="airline.value" :value="airline.value" :label="airline.label" />
           </el-select>
         </div>
         <div class="baggage-track-chart">
           <div class="step-line">
-            <div
-              v-for="(line, index) in 6"
-              :key="index"
-              :class="['step-line-segment', { 'step-line-active': activeStepLine(index) }]"
-            />
+            <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.status }"
-          >
+          <div v-for="(item, index) in stepNodes" :key="index" :class="{ 'step-item': true, 'active-item': item.status }">
             <div class="step-circle">
               <span class="step-name">{{ item.nodeName }}</span>
             </div>
@@ -109,56 +57,18 @@
         </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
-        class="button-toggle"
-        @click="trackListToggle"
-      >
+      <div class="button-toggle" @click="trackListToggle">
         <i :class="trackListOpen ? 'el-icon-caret-top' : 'el-icon-caret-bottom'" />
       </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} - ${trackListHeight} - 3 * 8px - 20px)`
-      }"
-    >
-      <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-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
-          :fixed="item.fixed"
-        >
+      }">
+      <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-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 :fixed="item.fixed">
           <template slot="header">
             <div class="cell-content">{{ item.name }}</div>
           </template>
@@ -168,88 +78,47 @@
         </el-table-column>
       </el-table>
     </div>
-    <div
-      v-show="infoBtn === infoRadios[1]"
-      class="part4"
-      :style="{
+    <div v-show="infoBtn === infoRadios[1]" class="part4" :style="{
         height: `calc(100vh - 80px - ${basicInfoHeight} - 2 * 8px - 20px)`
-      }"
-    >
+      }">
       <header class="head">
         <div class="title">行李跟踪信息</div>
         <div class="btns">
-          <img
-            class="btn-square btn-shadow"
-            src="@/assets/baggage/ic_export.png"
-            title="导出"
-            @click="exportMessageToExcel"
-          />
+          <img class="btn-square btn-shadow" src="@/assets/baggage/ic_export.png" title="导出" @click="exportMessageToExcel" />
         </div>
       </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 }}</div>
                 <div class="message-content">
-                  {{ message.dataContent.replaceAll(/[\r\n]{2,}/g, '\n').replaceAll('\\', '') }}
+                  <!-- {{ message.dataContent.replaceAll(/[\r\n]{2,}/g, '\n').replaceAll('\\', '') }} -->
+                  {{ message.dataContent.replaceAll(/[\\r\\n]{2,}/g, '\n').replaceAll('\\', '') }}
                 </div>
               </div>
             </el-col>
           </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
-            ref="columnSetTree"
-            :data="tableCols"
-            :class="colsCheckClass"
-            show-checkbox
-            node-key="index"
-            :default-expand-all="true"
-            :props="{
+          <el-tree ref="columnSetTree" :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>
@@ -274,7 +143,7 @@ export default {
     Dialog
   },
   mixins: [tableColsMixin],
-  data() {
+  data () {
     return {
       queryData: {},
       airlineList: [],
@@ -418,12 +287,12 @@ export default {
   },
   computed: {
     ...mapGetters(['sidebar']),
-    activeStepLine() {
+    activeStepLine () {
       return function (index) {
         return this.stepNodes[index].status && this.stepNodes[index + 1].status
       }
     },
-    statusClasses() {
+    statusClasses () {
       return function (status) {
         const classes = ['step-status']
         if (typeof status === 'string') {
@@ -436,7 +305,7 @@ export default {
         return classes
       }
     },
-    formattedBaggageInfo() {
+    formattedBaggageInfo () {
       return function (prop) {
         const value = this.baggageBasicInfo[prop]
         if ((value ?? '') === '') {
@@ -463,16 +332,16 @@ export default {
         }
       }
     },
-    basicInfoHeight() {
+    basicInfoHeight () {
       return this.basicInfoOpen ? '220px' : '68px'
     },
-    trackListHeight() {
+    trackListHeight () {
       return this.trackListOpen ? '176px' : '81px'
     }
   },
   watch: {
     infoBtn: {
-      handler(val) {
+      handler (val) {
         this.stopLoopAll()
         if (val === this.infoRadios[0]) {
           if (this.selectedAirline) {
@@ -485,12 +354,12 @@ export default {
       },
       immediate: true
     },
-    selectedAirline() {
+    selectedAirline () {
       this.stopQueryTrack()
       this.startQueryTrack()
     }
   },
-  created() {
+  created () {
     this.resetStepNodes()
     const { flightNO, flightDate, bagSN } = this.$route.query
     if (flightNO && flightDate && bagSN) {
@@ -502,29 +371,29 @@ export default {
       this.$router.push('/')
     }
   },
-  activated() {
+  activated () {
     this.resizeHandler()
     this.debouncedResizeHandler = this._.debounce(this.resizeHandler, this.debounceTime)
     window.addEventListener('resize', this.debouncedResizeHandler)
   },
-  updated() {
+  updated () {
     this.resizeHandler()
   },
-  deactivated() {
+  deactivated () {
     this.stopLoopAll()
     window.removeEventListener('resize', this.debouncedResizeHandler)
   },
   methods: {
-    basicInfoToggle() {
+    basicInfoToggle () {
       this.basicInfoOpen = !this.basicInfoOpen
     },
-    trackListToggle() {
+    trackListToggle () {
       this.trackListOpen = !this.trackListOpen
     },
-    resizeHandler() {
+    resizeHandler () {
       this.$refs['table']?.doLayout()
     },
-    baggageBasicInfoClickHandler(prop) {
+    baggageBasicInfoClickHandler (prop) {
       if (prop !== 'compensationSign' || !this.baggageBasicInfo[prop]) {
         return
       }
@@ -536,28 +405,28 @@ export default {
       })
       this.$store.dispatch('app/toggleAbnormalBaggageDialogFlag', true)
     },
-    startQueryDetails() {
+    startQueryDetails () {
       this.queryDetails()
       this.queryLoop = setInterval(this.queryDetails.bind(this), LOOP_INTERVAL.baggageDetails)
     },
-    startQueryTrack() {
+    startQueryTrack () {
       this.queryTrack()
       this.queryTrackLoop = setInterval(this.queryTrack.bind(this), LOOP_INTERVAL.baggageTrack)
     },
-    startQueryMessage() {
+    startQueryMessage () {
       this.queryMessage()
       this.queryLoop = setInterval(this.queryMessage.bind(this), LOOP_INTERVAL.baggageMessage)
     },
-    stopQueryTrack() {
+    stopQueryTrack () {
       this.queryTrackLoop && clearInterval(this.queryTrackLoop)
       this.queryTrackLoop = null
     },
-    stopLoopAll() {
+    stopLoopAll () {
       this.queryLoop && clearInterval(this.queryLoop)
       this.queryLoop = null
       this.stopQueryTrack()
     },
-    resetStepNodes() {
+    resetStepNodes () {
       this.stepNodes = [
         {
           nodeCode: 'CHECKIN',
@@ -589,7 +458,7 @@ export default {
         }
       ]
     },
-    initTableData(tableData) {
+    initTableData (tableData) {
       const spanArr = []
       let pos = 0
       for (let i = 0; i < tableData.length; i++) {
@@ -613,12 +482,12 @@ export default {
       this.spanArr = spanArr
       this.pos = pos
     },
-    headerCellClass({ row, column, rowIndex, columnIndex }) {
+    headerCellClass ({ row, column, rowIndex, columnIndex }) {
       if (['departureInfo', 'landingInfo'].includes(column.property)) {
         return 'pre-line'
       }
     },
-    cellClass({ row, column, rowIndex, columnIndex }) {
+    cellClass ({ row, column, rowIndex, columnIndex }) {
       const classes = []
       if (
         ['flightNO', 'U_Device_ID'].includes(column.property) &&
@@ -632,7 +501,7 @@ export default {
       }
       return classes.join(' ')
     },
-    cellClickHandler(row, column, cell, event) {
+    cellClickHandler (row, column, cell, event) {
       if (row[column.property] && row[column.property] !== 'FBULK') {
         switch (column.property) {
           case 'flightNO':
@@ -661,7 +530,7 @@ export default {
         }
       }
     },
-    tableSpanMethod({ row, column, rowIndex, columnIndex }) {
+    tableSpanMethod ({ row, column, rowIndex, columnIndex }) {
       if (['flightNO', 'flightDate', 'departureInfo', 'landingInfo'].includes(column['property'])) {
         const _row = this.spanArr[rowIndex]
         const _col = _row > 0 ? 1 : 0
@@ -671,18 +540,18 @@ export default {
         }
       }
     },
-    exportHandler(refName, tableName) {
+    exportHandler (refName, tableName) {
       const table = this.$refs[refName].$el.cloneNode(true)
       const { bagSN, flightNO, flightDate } = this.queryData
       const fileName = `${tableName}-${bagSN}-${flightNO}-${flightDate}.xlsx`
       throttledExportToExcel(table, tableName, fileName)
     },
-    exportMessageToExcel() {
+    exportMessageToExcel () {
       const xlsxDatas = [['Date & Time', 'Message']]
       xlsxDatas.push(
         ...this.messageList.map(message => [
           message.date,
-          message.dataContent.replaceAll(/[\r\n]{2,}/g, '\n').replaceAll('\\', '')
+          message.dataContent.replaceAll(/[\\r\\n]{2,}/g, '\n').replaceAll('\\', '')
         ])
       )
       const columnWidths = []
@@ -771,23 +640,23 @@ export default {
       FileSaver.saveAs(new Blob([tableWrite], { type: 'application/octet-stream' }), fileName)
     },
     // 行李详情基础信息
-    queryBaggageBasicInfo(dataContent) {
+    queryBaggageBasicInfo (dataContent) {
       return myQuery(SERVICE_ID.baggageBasicInfo, ...dataContent)
     },
     // 行李航段
-    queryBaggageAirline(dataContent) {
+    queryBaggageAirline (dataContent) {
       return myQuery(SERVICE_ID.baggageAirline, ...dataContent)
     },
     // 行李详情追踪链
-    queryBaggageTrack(dataContent) {
+    queryBaggageTrack (dataContent) {
       return myQuery(SERVICE_ID.baggageTrack, ...dataContent)
     },
     // 行李详情表格
-    queryBaggageDetails(dataContent) {
+    queryBaggageDetails (dataContent) {
       return myQuery(SERVICE_ID.baggageDetails, ...dataContent)
     },
     // 原始报文
-    async queryBaggageMessage(dataContent) {
+    async queryBaggageMessage (dataContent) {
       try {
         const { code, returnData, message } = await BaggageMessageQuery({
           id: SERVICE_ID.baggageMessage,
@@ -802,7 +671,7 @@ export default {
         this.$message.error('失败')
       }
     },
-    async queryBasicInfo(queryData = this.queryData) {
+    async queryBasicInfo (queryData = this.queryData) {
       const { flightNO, flightDate, bagSN } = queryData
       const dataContent = [flightNO, flightDate, bagSN]
       try {
@@ -815,8 +684,8 @@ export default {
         this.$message.error('失败')
       }
     },
-    async queryDetails(queryData = this.queryData) {
-      function setDataSource(item) {
+    async queryDetails (queryData = this.queryData) {
+      function setDataSource (item) {
         if (item['b_type'] !== 'BSM') {
           const resourceCode = item['resourceFile']?.slice(-4)
           switch (resourceCode) {
@@ -849,12 +718,10 @@ export default {
           if (item['dealTime']) {
             item['dealTime'] = item['dealTime'].replace('T', ' ')
           }
-          item['departureInfo'] = `${item['departureAirport']}\n${
-            item['departureTime'] ? item['departureTime'].replace('T', '\n') : ''
-          }`
-          item['landingInfo'] = `${item['landingAirport']}\n${
-            item['landingTime'] ? item['landingTime'].replace('T', '\n') : ''
-          }`
+          item['departureInfo'] = `${item['departureAirport']}\n${item['departureTime'] ? item['departureTime'].replace('T', '\n') : ''
+            }`
+          item['landingInfo'] = `${item['landingAirport']}\n${item['landingTime'] ? item['landingTime'].replace('T', '\n') : ''
+            }`
           setDataSource(item)
           return item
         })
@@ -863,7 +730,7 @@ export default {
         this.$message.error('失败')
       }
     },
-    async queryAirline(queryData = this.queryData) {
+    async queryAirline (queryData = this.queryData) {
       const { flightNO, flightDate, bagSN } = queryData
       const dataContent = [flightNO, flightDate, bagSN]
       try {
@@ -887,8 +754,8 @@ export default {
         this.$message.error('失败')
       }
     },
-    async queryTrack() {
-      function isSameStep(code1, code2) {
+    async queryTrack () {
+      function isSameStep (code1, code2) {
         const sameStepCodes = ['ARRIVED', 'TRANSFER']
         return sameStepCodes.includes(code1) && sameStepCodes.includes(code2)
       }
@@ -913,7 +780,7 @@ export default {
         this.$message.error('失败')
       }
     },
-    async queryMessage(queryData = this.queryData) {
+    async queryMessage (queryData = this.queryData) {
       const { flightNO, flightDate, bagSN } = queryData
       const dataContent = [flightNO, flightDate, bagSN]
       try {
@@ -1096,7 +963,7 @@ export default {
         align-items: center;
         justify-content: flex-start;
         z-index: 1;
-        font-family: Helvetica, 'Microsoft Yahei';
+        font-family: Helvetica, "Microsoft Yahei";
         .step-circle {
           width: 42px;
           height: 42px;
@@ -1161,7 +1028,7 @@ 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;
@@ -1268,16 +1135,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;
   }
 }

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

@@ -90,7 +90,8 @@
               <div class="card">
                 <div class="message-date">{{ message.date }}</div>
                 <div class="message-content">
-                  {{ message.dataContent.replaceAll(/[\r\n]{2,}/g, '\n').replaceAll('\\', '') }}
+                  <!-- {{ message.dataContent.replaceAll(/[\r\n]{2,}/g, '\n').replaceAll('\\', '') }} -->
+                  {{ message.dataContent.replaceAll(/[\\r\\n]{2,}/g, '\n').replaceAll('\\', '') }}
                 </div>
               </div>
             </el-col>
@@ -533,7 +534,7 @@ export default {
       xlsxDatas.push(
         ...this.messageList.map(message => [
           message.date,
-          message.dataContent.replaceAll(/[\r\n]{2,}/g, '\n').replaceAll('\\', '')
+          message.dataContent.replaceAll(/[\\r\\n]{2,}/g, '\n').replaceAll('\\', '')
         ])
       )
       const columnWidths = []