赔偿行李弹窗

public/config.js

@@ -78,6 +78,7 @@ window.DATACONTENT_ID = {
   flightInfo: 1142, // 航班-基础信息
   flightContainer: 41, // 航班-容器
   flightBaggage: 1144, // 航班-行李列表
+  abnormalBaggageInfo: 1145,
 
   /***-----行李视图------***/
   baggageBasicInfo: 255, // 行李-基础信息

src/components/AbnormalBaggageDialog/index.vue

@@ -0,0 +1,158 @@
+<template>
+  <Dialog
+    :flag="abnormalBaggageDialogFlag"
+    width="400px"
+  >
+    <div
+      id="dialogAbnormalBaggage"
+      ref="dialog"
+      tabindex="0"
+      v-loading="loading"
+      element-loading-text="拼命加载中"
+      element-loading-spinner="el-icon-loading"
+      element-loading-background="rgba(0, 0, 0, 0.8)"
+      @keyup.self.esc="dialogHide"
+    >
+      <div class="title">
+        <span>不正常行李信息</span>
+        <i
+          class="el-icon-close"
+          @click="dialogHide"
+        />
+      </div>
+      <div class="content">
+        <el-form
+          :model="formData"
+          class="abnormal-form"
+          label-position="right"
+          label-width="80px"
+        >
+          <el-form-item
+            v-for="item in formItems"
+            :key="item.prop"
+            :prop="item.prop"
+            :label="item.label"
+          >
+            <el-input
+              v-model="formData[item.prop]"
+              size="small"
+              placeholder=""
+              disabled
+            />
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+  </Dialog>
+</template>
+
+<script>
+import Dialog from '@/layout/components/Dialog'
+import { mapGetters } from 'vuex'
+import { Query } from '@/api/dataIntegration'
+
+export default {
+  name: 'AbnormalBaggageDialog',
+  components: { Dialog },
+  computed: {
+    ...mapGetters(['abnormalBaggageDialogFlag', 'abnormalBaggageQueryParams']),
+  },
+  data() {
+    return {
+      loading: false,
+      formData: {
+        fileNumber: '',
+        compensationType: '',
+        currencyCode: '',
+        compensationMoney: '',
+        compensationTime: '',
+      },
+      formItems: [
+        {
+          label: '卷宗号',
+          prop: 'fileNumber',
+        },
+        {
+          label: '赔偿类型',
+          prop: 'compensationType',
+        },
+        {
+          label: '货币代码',
+          prop: 'currencyCode',
+        },
+        {
+          label: '赔偿金额',
+          prop: 'compensationMoney',
+        },
+        {
+          label: '赔偿时间',
+          prop: 'compensationTime',
+        },
+      ],
+    }
+  },
+  watch: {
+    abnormalBaggageDialogFlag(val) {
+      if (val) {
+        this.formData.fileNumber = this.abnormalBaggageQueryParams.fileNumber
+        this.getFormData()
+      }
+    },
+  },
+  methods: {
+    dialogHide() {
+      this.$refs['baggageForm']?.resetFields()
+      this.$store.dispatch('app/toggleAbnormalBaggageDialogFlag', false)
+    },
+    async getFormData() {
+      this.loading = true
+      try {
+        const { flightNO, flightDate, bagSN, fileNumber } = this.abnormalBaggageQueryParams
+        const {
+          code,
+          returnData: { listValues },
+        } = await Query({
+          id: DATACONTENT_ID.abnormalBaggageInfo,
+          dataContent: [flightNO, flightDate, bagSN, fileNumber],
+        })
+        if (Number(code) === 0) {
+          if (listValues.length) {
+            const { costType, currencycode, amount, dataEntered } = listValues[0]
+            this.formData.compensationType = costType
+            this.formData.currencyCode = currencycode
+            this.formData.compensationMoney = amount
+            this.formData.compensationTime = dataEntered?.replace('T', ' ')
+          } else {
+            this.$message.info('未查询到对应数据')
+          }
+        } else {
+          this.$message.error('失败')
+        }
+      } catch (error) {
+        this.$message.error(error.message)
+      }
+      this.loading = false
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+#dialogAbnormalBaggage {
+  .title {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 0;
+    .el-icon-close {
+      margin-right: 16px;
+      cursor: pointer;
+    }
+  }
+  .content {
+    margin: 0;
+    .el-form {
+      padding: 20px 24px 6px 20px;
+    }
+  }
+}
+</style>

src/layout/index.vue

@@ -42,6 +42,7 @@
       </div>
     </Dialog>
     <PassengerDialog />
+    <AbnormalBaggageDialog />
   </div>
 </template>
 
@@ -54,6 +55,7 @@ import { removeToken } from "@/utils/auth";
 import Dialog from "@/layout/components/Dialog";
 import MD5 from 'blueimp-md5'
 import PassengerDialog from '@/components/PassengerDialog'
+import AbnormalBaggageDialog from '@/components/AbnormalBaggageDialog'
 export default {
   name: "Layout",
   components: {
@@ -61,7 +63,8 @@ export default {
     Sidebar,
     AppMain,
     Dialog,
-    PassengerDialog
+    PassengerDialog,
+    AbnormalBaggageDialog
   },
   mixins: [ResizeMixin],
   data () {

src/store/getters.js

@@ -35,6 +35,8 @@ const getters = {
   savedPages: state => state.keepAlive.savedPages,
   passengerDialogFlag: state => state.app.passengerDialogFlag,
   passengerQueryParams: state => state.app.passengerQueryParams,
-  userChecked: state => state.user.userChecked
+  userChecked: state => state.user.userChecked,
+  abnormalBaggageDialogFlag: state => state.app.abnormalBaggageDialogFlag,
+  abnormalBaggageQueryParams: state => state.app.abnormalBaggageQueryParams
 }
 export default getters

src/store/modules/app.js

@@ -10,9 +10,11 @@ import Cookies from 'js-cookie'
 
 const state = {
   sidebar: {
-    opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true,
+    opened: Cookies.get('sidebarStatus')
+      ? !!+Cookies.get('sidebarStatus')
+      : true,
     withoutAnimation: false,
-    expand: false
+    expand: false,
   },
   device: 'desktop',
   dialog: Cookies.get('dialogStatus') === 'true',
@@ -25,7 +27,14 @@ const state = {
   passengerQueryParams: {
     flightNO: '',
     flightDate: '',
-    passengerName: ''
+    passengerName: '',
+  },
+  abnormalBaggageDialogFlag: false,
+  abnormalBaggageQueryParams: {
+    flightNO: '',
+    flightDate: '',
+    bagSN: '',
+    fileNumber: ''
   }
 }
 const mutations = {
@@ -75,6 +84,12 @@ const mutations = {
   },
   SET_PASSENGER_QUERY_PARAMS(state, params) {
     state.passengerQueryParams = params
+  },
+  TOGGLE_ABNORMAL_BAGGAGE_DIALOG_FLAG(state, flag) {
+    state.abnormalBaggageDialogFlag = flag
+  },
+  SET_ABNORMAL_BAGGAGE_QUERY_PARAMS(state, params) {
+    state.abnormalBaggageQueryParams = params
   }
 }
 
@@ -114,12 +129,18 @@ const actions = {
   },
   setPassengerQueryParams({ commit }, params) {
     commit('SET_PASSENGER_QUERY_PARAMS', params)
-  }
+  },
+  toggleAbnormalBaggageDialogFlag({ commit }, flag) {
+    commit('TOGGLE_ABNORMAL_BAGGAGE_DIALOG_FLAG', flag)
+  },
+  setAbnormalBaggageQueryParams({ commit }, params) {
+    commit('SET_ABNORMAL_BAGGAGE_QUERY_PARAMS', params)
+  },
 }
 
 export default {
   namespaced: true,
   state,
   mutations,
-  actions
+  actions,
 }

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

@@ -39,7 +39,13 @@
           >
             <span class="label">{{ item.label }}：</span><span
               class="content"
+              :class="{
+                'click':
+                  item.prop === 'compensationSign' &&
+                  baggageBasicInfo[item.prop],
+              }"
               :title="formattedBaggageInfo(item.prop)"
+              @click="baggageBasicInfoClickHandler(item.prop)"
             >{{ formattedBaggageInfo(item.prop) }}</span>
           </el-col>
         </el-row>
@@ -439,7 +445,7 @@ export default {
             case 'expressSign':
             case 'brokenSign':
             case 'complaintSign':
-            case 'compensationSign':
+            // case 'compensationSign':
               return Number(value) === 1 || value === 'Y' ? '是' : '否'
             default:
               return value
@@ -501,6 +507,18 @@ export default {
     this.stopLoopAll()
   },
   methods: {
+    baggageBasicInfoClickHandler(prop) {
+      if (prop !== 'compensationSign') {
+        return
+      }
+      this.$store.dispatch('app/setAbnormalBaggageQueryParams', {
+        flightNO: this.queryData.flightNO,
+        flightDate: this.queryData.flightDate,
+        bagSN: this.queryData.bagSN,
+        fileNumber: this.baggageBasicInfo[prop]
+      })
+      this.$store.dispatch('app/toggleAbnormalBaggageDialogFlag', true)
+    },
     startQueryDetails() {
       this.queryDetails()
       this.queryLoop = setInterval(this.queryDetails.bind(this), LOOP_INTERVAL.baggageDetails)
@@ -934,6 +952,10 @@ export default {
           white-space: nowrap;
           overflow: hidden;
           text-overflow: ellipsis;
+          &.click {
+            text-decoration: underline;
+            cursor: pointer;
+          }
         }
       }
     }

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

@@ -953,7 +953,8 @@ export default {
           // 'transferNumber',
           'PassengerNameUpcase',
           'BagSN',
-          'U_Device_ID'
+          'U_Device_ID',
+          'fileNumber'
         ].includes(column.property) &&
         row[column.property] &&
         row[column.property] !== 'FBULK'
@@ -983,7 +984,8 @@ export default {
           // 'transferNumber',
           'PassengerNameUpcase',
           'BagSN',
-          'U_Device_ID'
+          'U_Device_ID',
+          'fileNumber'
         ].includes(column.property) &&
         row[column.property] &&
         row[column.property] !== 'FBULK'
@@ -1094,6 +1096,15 @@ export default {
             })
             break
           }
+          case 'fileNumber':
+            this.$store.dispatch('app/setAbnormalBaggageQueryParams', {
+              flightNO: this.queryData.flightNO,
+              flightDate: this.queryData.flightDate,
+              bagSN: row.BagSN,
+              fileNumber: row.fileNumber
+            })
+            this.$store.dispatch('app/toggleAbnormalBaggageDialogFlag', true)
+            break
           default:
             break
         }