5.23问题修改

src/components/Search/index.vue

@@ -1,111 +0,0 @@
-<!--
- * @Author: your name
- * @Date: 2021-10-18 17:44:42
- * @LastEditTime: 2021-10-19 11:18:27
- * @LastEditors: Please set LastEditors
- * @Description: In User Settings Edit
- * @FilePath: \Foshan4A\src\views\account\components\search.vue
--->
-<template>
-  <div class="pub-search">
-    <div class="search">
-      <el-input :placeholder="placeholder" clearable v-model="input">
-        <el-button slot="prepend" icon="el-icon-search"></el-button>
-      </el-input>
-    </div>
-    <div class="btn">
-      <button @click="checkSearch" class="btnAn">搜索</button>
-    </div>
-    <div class="add">
-      <slot></slot>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "PubSearch",
-  props: {
-    placeholder: {
-      type: String,
-      default: "请输入内容",
-    },
-    Turnoff: {
-      type: String,
-    },
-  },
-  data() {
-    return {
-      input: "",
-    };
-  },
-  methods: {
-    checkSearch() {
-      this.$emit("getSearchData", this.input);
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.pub-search {
-  display: flex;
-  > div {
-    margin-right: 24px;
-    &:last-child {
-      margin-right: 0;
-    }
-  }
-  ::v-deep .search {
-    width: 320px;
-    height: 48px;
-    line-height: 48px;
-    padding: 0 24px;
-    background: #ffffff;
-    box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
-    border-radius: 6px;
-    .el-input-group__prepend {
-      background-color: #fff;
-      border: none;
-      padding-left: 0;
-      padding-right: 15px;
-      .el-icon-search {
-        font-size: 16px;
-        font-weight: bold;
-      }
-    }
-    .el-input__inner {
-      border: none;
-      padding: 0;
-      font-size: 16px;
-    }
-  }
-  .btnAn {
-    width: 96px;
-    height: 48px;
-    background: linear-gradient(0deg, #777dba, #6983be);
-    box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.18);
-    border-radius: 6px;
-    outline: none;
-    border: none;
-    cursor: pointer;
-    color: #fff;
-    font-size: 16px;
-    font-family: Microsoft YaHei;
-    font-weight: bold;
-  }
-  .btnAdd {
-    width: 120px;
-    height: 48px;
-    background: #f5f7fa;
-    border: 1px solid #b4b7cb;
-    box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
-    border-radius: 6px;
-    font-size: 16px;
-    font-family: Microsoft YaHei;
-    font-weight: bold;
-    color: #6f81bc;
-    cursor: pointer;
-  }
-}
-</style>

src/components/SearchWithTooltip/index.vue

@@ -0,0 +1,174 @@
+<template>
+  <div class="pub-search">
+    <div class="flex">
+      <div
+        v-if="title"
+        class="title"
+      >
+        {{ title }}
+      </div>
+      <div class="content flex-wrap">
+        <div
+          class="search"
+          @keyup.enter="checkSearch"
+        >
+          <el-popover
+            :value="popoverVisible"
+            placement="bottom"
+            trigger="manual"
+          >
+            <span>{{ searchTooltip }}</span>
+            <el-input
+              slot="reference"
+              v-model="input"
+              :placeholder="placeholder"
+              prefix-icon="el-icon-search"
+              clearable
+              @focus="inputFocusOn = true"
+              @blur="inputFocusOn = false"
+            />
+          </el-popover>
+        </div>
+        <div class="btn">
+          <button
+            class="btnAn"
+            @click="checkSearch"
+          >
+            搜索
+          </button>
+        </div>
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchWithTooltip',
+  props: {
+    // title
+    title: {
+      type: String,
+      default: ''
+    },
+    // placeholder
+    placeholder: {
+      type: String,
+      default: '请输入您要搜索的内容'
+    },
+    searchTooltip: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      input: '',
+      inputFocusOn: false
+    }
+  },
+  computed: {
+    popoverVisible() {
+      return this.searchTooltip && this.inputFocusOn
+    }
+  },
+  watch: {
+    input(val) {
+      if (val === '') {
+        this.$emit('clearSearchData', val)
+      }
+    }
+  },
+  methods: {
+    checkSearch() {
+      this.$emit('getSearchData', this.input)
+    },
+    setSearch(val) {
+      this.input = val
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.pub-search {
+  .content {
+    display: flex;
+    align-items: center;
+  }
+  .content > div {
+    margin-right: 12px;
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+  ::v-deep .el-select {
+    width: 136px;
+    .el-input__suffix {
+      right: 5px;
+      top: 2px;
+    }
+    .el-input__inner {
+      font-size: 14px;
+      font-family: Microsoft YaHei;
+      font-weight: 400;
+      color: #101116;
+    }
+    // .el-icon-arrow-up:before {
+    //   content: "\f057";
+    // }
+  }
+  .title {
+    line-height: 36px;
+    font-size: 20px;
+    font-family: Microsoft YaHei;
+    font-weight: bold;
+    color: #303133;
+    position: relative;
+    padding-left: 16px;
+    &::after {
+      position: absolute;
+      content: '';
+      width: 4px;
+      height: 20px;
+      top: 50%;
+      margin-top: -9px;
+      left: 0;
+      background: #2d67e3;
+    }
+  }
+  ::v-deep .el-input__icon {
+    line-height: 36px;
+  }
+  ::v-deep .search {
+    height: 32px;
+    box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
+    border-radius: 4px;
+    .el-input {
+      width: 320px;
+      height: 32px;
+      line-height: 32px;
+      > .el-input__inner {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+  .btnAn {
+    padding: 0 18px;
+    height: 32px;
+    line-height: 32px;
+    background: #2d67e3;
+    box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.18);
+    border-radius: 4px;
+    outline: none;
+    border: none;
+    cursor: pointer;
+    color: #fff;
+    font-size: 14px;
+    font-family: Microsoft YaHei;
+    font-weight: bold;
+  }
+}
+</style>

src/components/TimeZoneSelector/index.vue

@@ -1,69 +1,77 @@
 <!--
  * @Author: Badguy
  * @Date: 2022-05-17 15:56:46
- * @LastEditTime: 2022-05-17 18:53:52
+ * @LastEditTime: 2022-05-26 17:52:37
  * @LastEditors: your name
  * @Description: 时区下拉选择菜单
  * have a nice day!
 -->
 <template>
-  <el-dropdown :hide-on-click="false" @command="commandHandler">
-    <img class="btn-img" src="../../assets/baggage/ic_time.png" />
+  <el-dropdown
+    :hide-on-click="false"
+    @command="commandHandler"
+  >
+    <img
+      class="btn-img btn-shadow"
+      src="../../assets/baggage/ic_time.png"
+    >
     <!-- <span class="time-zone-text">{{ currentDropdownItem.text }}</span> -->
-    <el-dropdown-menu slot="dropdown" class="time-zone">
+    <el-dropdown-menu
+      slot="dropdown"
+      class="time-zone"
+    >
       <el-dropdown-item
         v-for="(item, index) in DropdownItems"
         :key="index"
         :class="{ 'time-zone-selected': timeZone === item.command }"
         :command="item.command"
         :disabled="item.disabled"
-        >{{ item.text }}</el-dropdown-item
-      >
+      >{{ item.text }}</el-dropdown-item>
     </el-dropdown-menu>
   </el-dropdown>
 </template>
 
 <script>
-import { mapGetters } from "vuex";
+import { mapGetters } from 'vuex'
 export default {
-  name: "TimeZoneSelector",
+  name: 'TimeZoneSelector',
   data() {
     return {
       DropdownItems: [
         {
-          text: "国内Local/国际UTC",
-          disabled: true,
+          text: '国内Local/国际UTC',
+          disabled: true
         },
         {
-          text: "Local",
-          command: 8,
+          text: 'Local',
+          command: 8
         },
         {
-          text: "UTC",
-          command: 0,
-        },
-      ],
-    };
+          text: 'UTC',
+          command: 0
+        }
+      ]
+    }
   },
   computed: {
-    ...mapGetters(["timeZone"]),
+    ...mapGetters(['timeZone']),
     currentDropdownItem() {
-      return this.DropdownItems.find((item) => item.command === this.timeZone);
-    },
+      return this.DropdownItems.find(item => item.command === this.timeZone)
+    }
   },
   methods: {
     commandHandler(command) {
-      this.$store.dispatch("timeZone/setTimeZone", command);
-    },
-  },
-};
+      this.$store.dispatch('timeZone/setTimeZone', command)
+    }
+  }
+}
 </script>
 
 <style lang="scss" scoped>
 .time-zone {
   .el-dropdown-menu__item {
     padding-left: 30px;
-    font-family: Helvetica, "Microsoft YaHei";
+    font-family: Helvetica, 'Microsoft YaHei';
     font-size: 12px;
     color: #101116;
     position: relative;
@@ -71,7 +79,7 @@ export default {
       color: #909399;
     }
     &.time-zone-selected::before {
-      content: "√";
+      content: '√';
       position: absolute;
       left: 10px;
     }

src/router/index.js

@@ -1,24 +1,24 @@
 /*
  * @Author: your name
  * @Date: 2021-10-14 17:17:53
- * @LastEditTime: 2022-05-03 16:59:33
+ * @LastEditTime: 2022-05-26 15:17:49
  * @LastEditors: your name
  * @Description: In User Settings Edit
  * @FilePath: \Foshan4A\src\router\index.js
  */
-import Vue from "vue";
-import Router from "vue-router";
-import store from "@/store";
+import Vue from 'vue'
+import Router from 'vue-router'
+import store from '@/store'
 
-Vue.use(Router);
+Vue.use(Router)
 
 /* Layout */
 // import Layout from '@/layout'
-import routesOne from "./routes/routes-file-one";
-import routesTwo from "./routes/routes-file-two";
-import routesThree from "./routes/routes-file-three";
-import routesFileFour from "./routes/routes-file-four";
-import routesFive from "./routes/routes-file-five";
+import routesOne from './routes/routes-file-one'
+import routesTwo from './routes/routes-file-two'
+import routesThree from './routes/routes-file-three'
+import routesFileFour from './routes/routes-file-four'
+import routesFive from './routes/routes-file-five'
 /**
  * Note: sub-menu only appear when route children.length >= 1
  * Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
@@ -39,11 +39,11 @@ import routesFive from "./routes/routes-file-five";
  */
 
 const routesPush = (arr, routes) => {
-  if (!Array.isArray(arr)) return "请传入数组格式路由表";
+  if (!Array.isArray(arr)) return '请传入数组格式路由表'
   for (let i = 0; i < arr.length; i++) {
-    routes.unshift(arr[i]);
+    routes.unshift(arr[i])
   }
-};
+}
 
 /**
  * constantRoutes
@@ -52,78 +52,67 @@ const routesPush = (arr, routes) => {
  */
 export const constantRoutes = [
   {
-    path: "/login",
-    component: () => import("@/views/login/index"),
-    hidden: true,
+    path: '/login',
+    component: () => import('@/views/login/index'),
+    hidden: true
   },
   {
-    path: "/404",
-    component: () => import("@/views/404"),
-    hidden: true,
-  },
+    path: '/404',
+    component: () => import('@/views/404'),
+    hidden: true
+  }
   // { path: '/', redirect: '/nopower', component: () => import('@/views/noPower'), hidden: true }
   // 404 page must be placed at the end !!!
-];
+]
 
 // 动态路由
-export const asyncRoutes = [];
+export const asyncRoutes = []
 // 插入路由
-routesPush(
-  [
-    ...routesOne,
-    ...routesTwo,
-    ...routesThree,
-    ...routesFileFour,
-    ...routesFive
-  ],
-  asyncRoutes
-);
+routesPush([...routesOne, ...routesTwo, ...routesThree, ...routesFileFour, ...routesFive], asyncRoutes)
 // asyncRoutes.push({ path: '/', component: () => import('@/views/noPower'), hidden: true })
 asyncRoutes.push({
-  path: "*",
-  component: () => import("@/views/404"),
-  hidden: true,
-});
+  path: '*',
+  component: () => import('@/views/404'),
+  hidden: true
+})
 
 const createRouter = () =>
   new Router({
     // mode: 'history', // require service support
     scrollBehavior: () => ({ y: 0 }),
-    routes: constantRoutes,
-  });
+    routes: constantRoutes
+  })
 
-const router = createRouter();
+const router = createRouter()
 
 router.beforeEach((to, from, next) => {
   // 如果 要 from(离开) 的页面是 keepAlive缓存的，
   // 再根据 deepth 来判断是前进还是后退
-  if (from.meta.keepAlive) {
-    if (to.meta.deepth && to.meta.deepth > from.meta.deepth) {
-      store.dispatch("keepAlive/editPage", from);
-    } else {
-      store.dispatch("keepAlive/deletePage", to);
+  if (from.meta.keepAlive && to.meta.deepth) {
+    if (to.meta.deepth > from.meta.deepth) {
+      store.dispatch('keepAlive/editPage', from)
+    } else if (to.meta.deepth < from.meta.deepth) {
+      store.dispatch('keepAlive/deletePage', to)
     }
   }
   // 如果要to(进入)的页面是需要keepAlive缓存的，把name push进keepAlive数组中
   if (to.meta.keepAlive) {
-    const currentPage = store.state.keepAlive.keepAlivePages.find(
-      (page) => page.name === to.name
-    );
+    const currentPage = store.state.keepAlive.keepAlivePages.find(page => page.name === to.name)
     if (currentPage) {
       if (currentPage.fullPath !== to.fullPath) {
-        next(currentPage.fullPath);
+        next(currentPage.fullPath)
       }
     } else {
-      store.dispatch("keepAlive/addPage", to);
+      store.dispatch('keepAlive/addPage', to)
     }
   }
-  next();
-});
+  next()
+})
 
 // Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
-export function resetRouter () {
-  const newRouter = createRouter();
-  router.matcher = newRouter.matcher; // reset router
+export function resetRouter() {
+  const newRouter = createRouter()
+  router.matcher = newRouter.matcher // reset router
 }
 
-export default router;
+export default router

src/styles/index.scss

@@ -564,3 +564,15 @@ li {
 .el-table .el-table__cell.pre-line .cell {
   white-space: pre-line;
 }
+
+.input-shadow .el-input__inner {
+  box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
+}
+
+.btn-shadow {
+  box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.18);
+  &.btn-img,
+  &.btn-square {
+    border-radius: 8px;
+  }
+}

src/views/advancedQuery/views/advancedHome.vue

@@ -27,6 +27,7 @@
         class="advanced-search"
         :is-title="false"
         :is-slot="true"
+        :search-tooltip="'请输入航班号（示例：CA1234）或行李牌号（示例：1234567890）'"
         @getSearchData="getSearchData"
         @clearSearchData="clearSearchData"
       >
@@ -134,7 +135,7 @@
         ref="dialog"
         class="rowDialog"
         :tabindex="0"
-        @keyup.enter="onCheckGj(1)"
+        @keyup.enter="onCheckGj(true)"
         @keyup.self.esc="gjFlag=false"
       >
         <div class="title">高级查询</div>
@@ -314,7 +315,7 @@
             size="medium"
             class="r24"
             type="primary"
-            @click="onCheckGj(1)"
+            @click="onCheckGj(true)"
           >确定</el-button>
           <el-button
             size="medium"
@@ -327,7 +328,7 @@
 </template>
 
 <script>
-import Search from '@/layout/components/Search'
+import Search from '@/components/SearchWithTooltip'
 import Dialog from '@/layout/components/Dialog'
 import { parseTime } from '@/utils/index'
 import { queryMap, myQuery } from '@/api/dataIntegration'
@@ -676,21 +677,17 @@ export default {
 
     let flag = false
     const query = this.$route.query
-    if (query) {
-      const { startDate, endDate } = query
-      Object.entries(query).forEach(([key, value]) => {
-        if (!['startDate', 'endDate'].includes(key) && (value ?? '') !== '') {
-          flag = true
-          this.form[key] = ['unLoad', 'checkIn', 'active', 'transferIn', 'canceled'].includes(key)
-            ? Number(value)
-            : value
-        }
-      })
-      startDate && (this.FlightDate[0] = startDate)
-      endDate && (this.FlightDate[1] = endDate)
-    }
+    const { startDate, endDate, singleJump } = query
+    Object.entries(query).forEach(([key, value]) => {
+      if (!['startDate', 'endDate', 'singleJump'].includes(key) && (value ?? '') !== '') {
+        flag = true
+        this.form[key] = ['unLoad', 'checkIn', 'active', 'transferIn', 'canceled'].includes(key) ? Number(value) : value
+      }
+    })
+    startDate && (this.FlightDate[0] = startDate)
+    endDate && (this.FlightDate[1] = endDate)
     if (flag) {
-      this.onCheckGj()
+      this.onCheckGj(singleJump)
     } else if (this.queryForm) {
       Object.keys(this.form).forEach(key => {
         this.form[key] = this.queryForm[key]
@@ -737,9 +734,9 @@ export default {
       }
     },
     cellClass({ row, column, rowIndex, columnIndex }) {
-      let classString = ''
+      const classes = []
       if (['FlightNO', 'TransferFlightNO', 'BagSN'].includes(column.property)) {
-        classString += 'cell-click'
+        classes.push('cell-click')
         if (
           this.clickedCells.some(
             cell =>
@@ -748,13 +745,10 @@ export default {
               cell.columnProp === column.property
           )
         ) {
-          classString += ' cell-clicked'
+          classes.push('cell-clicked')
         }
       }
-      return classString
-    },
-    sortChangeHandler({ column, prop, order }) {
-      console.log(column, prop, order)
+      return classes.join(' ')
     },
     cellClickHandler(row, column, cell, event) {
       if (['FlightNO', 'TransferFlightNO', 'BagSN'].includes(column.property)) {
@@ -799,11 +793,7 @@ export default {
     },
     // 查询
     getSearchData(val) {
-      // 清除表单
-      Object.keys(this.form).forEach(key => {
-        this.form[key] = ''
-      })
-
+      this.clearForm()
       if (this.FlightDate[0] === '' || this.FlightDate[1] === '' || val === '') {
         this.$message.error('请先输入完整查询信息')
       } else {
@@ -820,15 +810,15 @@ export default {
         // 纯字母则为旅客姓名
         if (az.test(val)) {
           this.form['passengerName'] = val
-          this.onCheckGj(1)
+          this.onCheckGj(true)
         } else if (azNum.test(val) && top2.test(val)) {
           // 字母加数字且前两位为字母则为航班号
           this.form['FlightNO'] = val
-          this.onCheckGj(1)
+          this.onCheckGj(true)
         } else if ((num.test(val) && val.length === 10) || bagNo.test(val)) {
           // 纯数字且位数等于10则为行李牌号
           this.form['baggageNO'] = val
-          this.onCheckGj(1)
+          this.onCheckGj(true)
         } else {
           this.$message.error('请先输入有效查询信息如航班号、旅客姓名首字母、行李牌号')
         }
@@ -837,10 +827,17 @@ export default {
     },
     // 清除查询
     clearSearchData() {
+      this.clearForm()
       this.tableData = []
     },
+    // 清除表单
+    clearForm() {
+      Object.keys(this.form).forEach(key => {
+        this.form[key] = ''
+      })
+    },
     // 高级查询-确定
-    onCheckGj(flag) {
+    onCheckGj(singleJump) {
       /* 参数顺序
       【航班开始日期，航班结束日期，航班号，航班号，行李牌号，行李牌号，起飞站，起飞站，目的站，目的站，特殊行李类型，特殊行李类型，旅客姓名大写拼音，旅客姓名大写拼音，
       PNR，PNR，值机号，值机号，中转进航班，中转进航班，中转出航班，中转出航班，容器编号，容器编号，
@@ -892,7 +889,7 @@ export default {
             canceled,
             status
           )
-          this.statItemsQueryByStatMain(this.dataContent, flag)
+          this.statItemsQueryByStatMain(this.dataContent, singleJump)
           this.gjFlag = false
         }
       } else {
@@ -900,7 +897,6 @@ export default {
       }
     },
     closeCheckGj() {
-      this.$refs['form'].resetFields()
       this.gjFlag = false
     },
     setDataContent(...dataContent) {
@@ -914,13 +910,13 @@ export default {
       })
     },
     // 数据查询
-    async statItemsQueryByStatMain(dataContent, flag) {
+    async statItemsQueryByStatMain(dataContent, singleJump) {
       this.loading = true
       this.tableData = []
       try {
         const result = await myQuery(queryMap.advacedQuery, ...dataContent)
         if (result.length) {
-          if (flag) {
+          if (singleJump) {
             if (result.length === 1) {
               this.$router.push({
                 path: '/advance/baggageView',
@@ -1036,9 +1032,6 @@ export default {
     }
   }
 }
-::v-deep .advanced-search .el-input .el-input__suffix {
-  top: -30%;
-}
 .advance__table {
   width: 100%;
   ::v-deep .table {

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

@@ -1,7 +1,7 @@
 <!--
  * @Author: zk
  * @Date: 2022-01-17 10:39:22
- * @LastEditTime: 2022-05-25 15:03:47
+ * @LastEditTime: 2022-05-26 17:56:26
  * @LastEditors: your name
  * @Description: 进港01
 -->
@@ -31,6 +31,7 @@
           /> -->
           <el-select
             v-model="formData.currentAirport"
+            class="input-shadow"
             size="small"
             filterable
             placeholder="请选择机场"
@@ -47,6 +48,7 @@
         <el-form-item prop="startDate">
           <el-date-picker
             v-model="formData.startDate"
+            class="input-shadow"
             style="width: 216px"
             size="small"
             type="date"
@@ -58,6 +60,7 @@
         <el-form-item prop="endDate">
           <el-date-picker
             v-model="formData.endDate"
+            class="input-shadow"
             style="width: 216px"
             size="small"
             type="date"
@@ -89,19 +92,31 @@
           @keyup.enter="onSubmit(1)"
         >
           <el-form-item prop="search">
-            <el-input
-              v-model="formData.search"
-              style="width: 240px; margin-left: 105px"
-              size="small"
-              placeholder="请输入内容"
-              prefix-icon="el-icon-search"
-              clearable
-              @clear="inputClear"
-            />
+            <el-popover
+              :value="popoverVisible"
+              placement="bottom"
+              trigger="manual"
+            >
+              <span>请输入航班号（示例：CA1234）或行李牌号（示例：1234567890）</span>
+              <el-input
+                slot="reference"
+                v-model="formData.search"
+                class="input-shadow"
+                style="width: 240px; margin-left: 105px"
+                size="small"
+                placeholder="请输入内容"
+                prefix-icon="el-icon-search"
+                clearable
+                @clear="inputClear"
+                @focus="popoverVisible = true"
+                @blur="popoverVisible = false"
+              />
+            </el-popover>
           </el-form-item>
           <el-form-item>
             <el-button
-              size="small"
+              class="btn-shadow"
+              size="mini"
               type="primary"
               @click="onSubmit(1)"
             >搜索</el-button>
@@ -118,20 +133,11 @@
           </el-form-item>
           <el-form-item>
             <img
-              class="btn-img"
+              class="btn-img btn-shadow"
               src="../../../../assets/baggage/ic_setting.png"
               @click="show"
             >
           </el-form-item>
-          <!-- <el-form-item>
-            <el-button
-              class="btn-square setBtn"
-              type="primary"
-              icon="el-icon-s-tools"
-              size="mini"
-              @click="show"
-            />
-          </el-form-item> -->
         </div>
       </el-form>
     </div>
@@ -248,6 +254,7 @@ export default {
   data() {
     return {
       orderNum: ['0', '0', '0', '0', '0', '0'], // 默认总数
+      popoverVisible: false,
       // 初始表头
       tableCols: [
         {
@@ -513,10 +520,9 @@ export default {
         if (item.hasTakenOff === 0) {
           this.leaveCount++
         }
-        // item["waitfanj"] = item["noCheckInNumber"] - item["unLoad"];
         this.baggageCount = this.baggageCount + item.projectedLoad
       })
-      this.tableData = this._.sortBy(tableData, ['FlightDate', 'PlanDepartureTime'])
+      this.tableData = this._.sortBy(tableData, ['FlightDate', 'arrivalTime'])
       setTableFilters(this.tableData, this.tableDataFilters)
       this.toOrderNum(this.baggageCount)
       // setInterval(() => {
@@ -524,10 +530,6 @@ export default {
       //    // 这里输入数字即可调用
       // }, 2000);
     },
-    filterHandler(value, row, column) {
-      const property = column['property']
-      return row[property] === value
-    },
     setNumberTransform() {
       const numberItems = this.$refs.numberItem // 拿到数字的ref，计算元素数量
       const numberArr = this.orderNum.filter(item => !isNaN(item))
@@ -577,16 +579,6 @@ export default {
       .el-form-item__error {
         z-index: 10;
       }
-      .el-button {
-        &.btn-square {
-          width: 30px;
-          height: 30px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          margin-top: 5px;
-        }
-      }
     }
     .btn-img {
       cursor: pointer;

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

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2022-01-17 10:39:22
- * @LastEditTime: 2022-05-25 18:10:04
+ * @LastEditTime: 2022-05-26 18:09:44
  * @LastEditors: your name
  * @Description: 行李视图
 -->
@@ -102,11 +102,11 @@
       </div>
       <div class="btns">
         <img
-          class="btn-square"
+          class="btn-square btn-shadow"
           src="../../../../assets/baggage/ic_export.png"
         >
         <img
-          class="btn-square"
+          class="btn-square btn-shadow"
           src="../../../../assets/baggage/ic_setting.png"
           @click="show"
         >

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

@@ -1,7 +1,7 @@
 <!--
  * @Author: zk
  * @Date: 2022-01-17 10:39:22
- * @LastEditTime: 2022-05-26 09:24:39
+ * @LastEditTime: 2022-05-26 17:56:31
  * @LastEditors: your name
  * @Description: 离港01
 -->
@@ -31,6 +31,7 @@
           /> -->
           <el-select
             v-model="formData.currentAirport"
+            class="input-shadow"
             size="small"
             filterable
             placeholder="请选择机场"
@@ -47,6 +48,7 @@
         <el-form-item prop="startDate">
           <el-date-picker
             v-model="formData.startDate"
+            class="input-shadow"
             style="width:216px;"
             size="small"
             type="date"
@@ -58,6 +60,7 @@
         <el-form-item prop="endDate">
           <el-date-picker
             v-model="formData.endDate"
+            class="input-shadow"
             style="width:216px;"
             size="small"
             type="date"
@@ -89,7 +92,27 @@
           @keyup.enter="onSubmit(0)"
         >
           <el-form-item prop="search">
-            <el-input
+            <el-popover
+              :value="popoverVisible"
+              placement="bottom"
+              trigger="manual"
+            >
+              <span>请输入航班号（示例：CA1234）或行李牌号（示例：1234567890）</span>
+              <el-input
+                slot="reference"
+                v-model="formData.search"
+                class="input-shadow"
+                style="width: 240px; margin-left: 105px"
+                size="small"
+                placeholder="请输入内容"
+                prefix-icon="el-icon-search"
+                clearable
+                @clear="inputClear"
+                @focus="popoverVisible = true"
+                @blur="popoverVisible = false"
+              />
+            </el-popover>
+            <!-- <el-input
               v-model="formData.search"
               style="width:240px;margin-left:105px;"
               size="small"
@@ -97,43 +120,27 @@
               prefix-icon="el-icon-search"
               clearable
               @clear="inputClear"
-            />
+            /> -->
           </el-form-item>
           <el-form-item>
             <el-button
-              size="small"
+              class="btn-shadow"
+              size="mini"
               type="primary"
               @click="onSubmit(0)"
             >搜索</el-button>
           </el-form-item>
-          <!-- <el-form-item>
-            <el-switch
-              v-model="formData.switch"
-              style="margin-left:40px;"
-              active-text="显示中转"
-            />
-          </el-form-item> -->
           <el-form-item v-is="['i_timeIcon']">
             <TimeZoneSelector />
           </el-form-item>
           <el-form-item>
             <img
-              class="btn-img"
+              class="btn-img btn-shadow"
               src="../../../../assets/baggage/ic_setting.png"
               @click="show"
             >
           </el-form-item>
-          <!-- <el-form-item>
-            <el-button
-              class="btn-square setBtn"
-              type="primary"
-              icon="el-icon-s-tools"
-              size="mini"
-              @click="show"
-            />
-          </el-form-item> -->
         </div>
-
       </el-form>
     </div>
     <!--表格-->
@@ -244,6 +251,7 @@ export default {
   data() {
     return {
       orderNum: ['0', '0', '0', '0', '0', '0'], // 默认总数
+      popoverVisible: false,
       // 初始表头
       tableCols: [
         {
@@ -523,16 +531,6 @@ export default {
       .el-form-item__error {
         z-index: 10;
       }
-      .el-button {
-        &.btn-square {
-          width: 30px;
-          height: 30px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          margin-top: 5px;
-        }
-      }
     }
     .btn-img {
       cursor: pointer;

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

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2022-01-17 10:39:22
- * @LastEditTime: 2022-05-26 09:56:00
+ * @LastEditTime: 2022-05-26 18:09:10
  * @LastEditors: your name
  * @Description: 航班视图
 -->
@@ -273,11 +273,11 @@
           </div> -->
           <TimeZoneSelector />
           <img
-            class="btn-square"
+            class="btn-square btn-shadow"
             src="../../../../assets/baggage/ic_export.png"
           >
           <img
-            class="btn-square"
+            class="btn-square btn-shadow"
             src="../../../../assets/baggage/ic_setting.png"
             @click="show"
           >
@@ -367,6 +367,7 @@ import tableColsMixin from '../../mixins/tableCols'
 import timeZoneMixin from '../../mixins/timeZone'
 import TableHeaderCellWithFilter from '@/components/TableHeaderCellWithFilter'
 import { setTableFilters } from '@/utils/table'
+import { mapGetters } from 'vuex'
 
 // const arrivalBaggageTableColumn = [
 //   { name: '序号', prop: 'index' },
@@ -407,10 +408,10 @@ const departureBaggageTableColumn = [
   { name: '装载序号', prop: 'LoadSN' },
   { name: '值机', prop: 'checkIn', width: 140 },
   { name: '状态', prop: 'latestStatus' },
-  { name: '安检', prop: 'security', width: 140 },
-  { name: '分拣', prop: 'sorting', width: 140 },
-  { name: '装车', prop: 'loading', width: 140 },
-  { name: '装机', prop: 'installed', width: 140 },
+  { name: '安检', prop: 'DealInfo', width: 140 },
+  { name: '分拣', prop: 'sortLocationMark', width: 140 },
+  { name: '装车', prop: 'loadLocationMark', width: 140 },
+  { name: '装机', prop: 'inflLocationMark', width: 140 },
   { name: '中转标志', prop: 'transitFlag' },
   { name: '卷宗号', prop: 'fileNumber' }
 ]
@@ -424,11 +425,10 @@ export default {
   mixins: [tableColsMixin, timeZoneMixin],
   data() {
     return {
+      fullscreenLoading: false,
       queryData: {},
       flightInfo: {},
       keyWords: '',
-      openUTC: true,
-      props: { multiple: true },
       // options: [
       //   { value: 0, label: 'VIP行李' },
       //   { value: 0, label: 'VIP行李' }
@@ -481,6 +481,7 @@ export default {
     }
   },
   computed: {
+    ...mapGetters(['clickedCells']),
     filteredTableData() {
       return this.flightBaggageTableData.filter(item => {
         let flag = true
@@ -493,11 +494,40 @@ export default {
       })
     }
   },
-  created() {
+  watch: {
+    '$route.query': {
+      handler(val) {
+        this.queryData = this._.cloneDeep(val)
+        const { FlightNO, FlightDate } = this.queryData
+        if (FlightNO && FlightDate) {
+          this.queryAll([FlightNO, FlightDate])
+        } else {
+          this.$router.push('/advance')
+        }
+      },
+      deep: true
+    },
+    fullscreenLoading(val) {
+      if (val) {
+        this.loading = this.$loading({
+          lock: true,
+          text: '加载中',
+          spinner: 'el-icon-loading',
+          background: 'rgba(0, 0, 0, 0.7)'
+        })
+      } else {
+        this.loading.close()
+      }
+    }
+  },
+  mounted() {
     this.queryData = this._.cloneDeep(this.$route.query)
-    // console.log(this.queryData)
-    const queryData = [this.queryData.FlightNO, this.queryData.FlightDate]
-    this.queryAll(queryData)
+    const { FlightNO, FlightDate } = this.queryData
+    if (FlightNO && FlightDate) {
+      this.queryAll([FlightNO, FlightDate])
+    } else {
+      this.$router.push('/advance')
+    }
   },
   updated() {
     this.$nextTick(() => {
@@ -510,7 +540,9 @@ export default {
   methods: {
     cellClass({ row, column, rowIndex, columnIndex }) {
       const classes = []
-      if (['checkIn', 'security', 'sorting', 'loading', 'installed'].includes(column.property)) {
+      if (
+        ['checkIn', 'DealInfo', 'sortLocationMark', 'loadLocationMark', 'inflLocationMark'].includes(column.property)
+      ) {
         classes.push('pre-line')
       }
       if (
@@ -519,6 +551,16 @@ export default {
         )
       ) {
         classes.push('cell-click')
+        if (
+          this.clickedCells.some(
+            cell =>
+              cell.pageName === this.$route.name &&
+              Object.entries(cell.row).every(([key, value]) => row[key] === value) &&
+              cell.columnProp === column.property
+          )
+        ) {
+          classes.push('cell-clicked')
+        }
       }
       if (
         (column.property === 'latestStatus' && row[column.property] === '待翻减') ||
@@ -529,6 +571,17 @@ export default {
       return classes.join(' ')
     },
     cellClickHandler(row, column, cell, event) {
+      if (
+        ['PreFlightNO', 'totalNumber', 'TransferFlightNO', 'transferNumber', 'PassengerNameUpcase', 'BagSN'].includes(
+          column.property
+        )
+      ) {
+        this.$store.dispatch('keepAlive/addClickedCell', {
+          row,
+          columnProp: column.property,
+          pageName: this.$route.name
+        })
+      }
       switch (column.property) {
         case 'PreFlightNO':
           this.$router.push({
@@ -625,10 +678,6 @@ export default {
         return ['合计', `共${num}件`]
       }
     },
-    filterHandler(value, row, column) {
-      const property = column['property']
-      return row[property] === value
-    },
     containeClick(row) {
       this.$router.push({
         path: '/advance',
@@ -656,6 +705,7 @@ export default {
       return myQuery(queryMap.baggageByFlightNO, ...dataContent)
     },
     async queryAll(dataContent) {
+      this.fullscreenLoading = true
       try {
         const [
           flightInfo,
@@ -684,21 +734,14 @@ export default {
         this.warningContainers = []
         this.flightBaggageTableData = flightBaggageTableData.map((item, index) => {
           item['latestStatus'] === '待翻减' && this.warningContainers.push(item['U_Device_ID'])
-
-          item['checkIn'] = `${item['checkIn'] ?? ''}\n${item['checkInTime'] ?? ''}`
-          // item['latestStatus'] = item['Status'] === 'DEL' ? '删除' : item['latestStatus']
-          item['security'] = `${item['DealInfo'] ?? ''}\n${item['DealTime'] ?? ''}`
-          item['sorting'] = `${item['sortLocationMark'] ?? ''}\n${item['sortDealTime'] ?? ''}`
-          item['loading'] = `${item['loadLocationMark'] ?? ''}\n${item['loadDealTime'] ?? ''}`
-          item['installed'] = `${item['inflLocationMark'] ?? ''}\n${item['inflLoadDealTime'] ?? ''}`
           item['transitFlag'] = item['PreFlightNO'] ? '是' : '否'
           return item
         })
-
         setTableFilters(this.flightBaggageTableData, this.flightBaggageTableFilters)
       } catch (error) {
         console.log('错误', error)
       }
+      this.fullscreenLoading = false
     }
   }
 }

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

@@ -1,9 +1,9 @@
 <!--
  * @Author: zk
  * @Date: 2022-01-17 10:39:22
- * @LastEditTime: 2022-05-25 16:28:12
+ * @LastEditTime: 2022-05-26 18:06:21
  * @LastEditors: your name
- * @Description: 离港01
+ * @Description: 中转进港
 -->
 <template>
   <div class="departure-one">
@@ -31,6 +31,7 @@
           /> -->
           <el-select
             v-model="formData.currentAirport"
+            class="input-shadow"
             size="small"
             filterable
             placeholder="请选择机场"
@@ -47,6 +48,7 @@
         <el-form-item prop="inboundCarrier">
           <el-cascader
             v-model="formData.inboundCarrier"
+            class="input-shadow"
             style="width: 164px"
             size="small"
             :options="carrierProps"
@@ -61,6 +63,7 @@
         <el-form-item prop="outgoingAirline">
           <el-cascader
             v-model="formData.outgoingAirline"
+            class="input-shadow"
             style="width: 164px"
             size="small"
             :options="carrierPropsop"
@@ -75,6 +78,7 @@
         <el-form-item prop="startDate">
           <el-date-picker
             v-model="formData.startDate"
+            class="input-shadow"
             style="width: 216px"
             size="small"
             type="date"
@@ -86,6 +90,7 @@
         <el-form-item prop="endDate">
           <el-date-picker
             v-model="formData.endDate"
+            class="input-shadow"
             style="width: 216px"
             size="small"
             type="date"
@@ -114,7 +119,27 @@
           @keyup.enter="onSubmit(1)"
         >
           <el-form-item prop="search">
-            <el-input
+            <el-popover
+              :value="popoverVisible"
+              placement="bottom"
+              trigger="manual"
+            >
+              <span>请输入航班号（示例：CA1234）或行李牌号（示例：1234567890）</span>
+              <el-input
+                slot="reference"
+                v-model="formData.search"
+                class="input-shadow"
+                style="width: 240px; margin-left: 105px"
+                size="small"
+                placeholder="请输入内容"
+                prefix-icon="el-icon-search"
+                clearable
+                @clear="inputClear"
+                @focus="popoverVisible = true"
+                @blur="popoverVisible = false"
+              />
+            </el-popover>
+            <!-- <el-input
               v-model="formData.search"
               style="width: 240px; margin-left: 105px"
               size="small"
@@ -122,48 +147,34 @@
               prefix-icon="el-icon-search"
               clearable
               @clear="inputClear"
-            />
+            /> -->
           </el-form-item>
           <el-form-item>
             <el-button
-              size="small"
+              class="btn-shadow"
+              size="mini"
               type="primary"
               @click="onSubmit(1)"
             >搜索</el-button>
           </el-form-item>
           <el-form-item v-is="['ti_showTransit']">
             <el-button
-              size="small"
+              class="btn-shadow"
+              size="mini"
               type="primary"
               @click="changeView"
             >切换视角</el-button>
           </el-form-item>
-          <!-- <el-form-item>
-            <el-switch
-              v-model="formData.switch"
-              style="margin-left: 40px"
-              active-text="显示中转"
-            />
-          </el-form-item> -->
           <el-form-item v-is="['i_timeIcon']">
             <TimeZoneSelector />
           </el-form-item>
           <el-form-item>
             <img
-              class="btn-img"
+              class="btn-img btn-shadow"
               src="../../../../assets/baggage/ic_setting.png"
               @click="show"
             >
           </el-form-item>
-          <!-- <el-form-item>
-            <el-button
-              class="btn-square setBtn"
-              type="primary"
-              icon="el-icon-s-tools"
-              size="mini"
-              @click="show"
-            />
-          </el-form-item> -->
         </div>
       </el-form>
     </div>
@@ -178,7 +189,7 @@
       <el-table
         ref="table"
         class="table"
-        :data="tableData"
+        :data="filteredTableData"
         height="calc(100vh - 177px)"
         show-summary
         :summary-method="summaryMethod"
@@ -190,24 +201,35 @@
         @cell-click="cellClickHandler"
       >
         <el-table-column
-          v-for="(item, index) in tableColsCopy"
-          :key="index"
-          :prop="item.prop"
-          :label="item.label"
+          v-for="col in tableColsCopy"
+          :key="col.prop"
+          :prop="col.prop"
+          :label="col.label"
         >
           <el-table-column
-            v-for="(p, i) in item.children"
-            :key="i"
-            :prop="p.prop"
-            :label="p.label"
-            :width="p.width"
+            v-for="childCol in col.children"
+            :key="childCol.prop"
+            :prop="childCol.prop"
+            :label="childCol.label"
+            :width="childCol.width"
             :formatter="tableFormat"
           >
-            <template slot="header">
+            <template #header>
               <el-tooltip
-                :content="p.label"
+                :content="childCol.label"
                 placement="top"
-              ><span>{{ p.label }}</span></el-tooltip>
+              >
+                <div class="table-header-cell">
+                  <span>{{ childCol.label }}</span>
+                  <template v-if="tableDataFilters[childCol.prop]">
+                    <TableHeaderCellWithFilter
+                      :label="childCol.label"
+                      :filter-options="tableDataFilters[childCol.prop]"
+                      :filter-value.sync="filterValues[childCol.prop]"
+                    />
+                  </template>
+                </div>
+              </el-tooltip>
             </template>
           </el-table-column>
         </el-table-column>
@@ -260,10 +282,12 @@ import formMixin from '../../mixins/form'
 import tableColsMixin from '../../mixins/tableCols'
 import timeZoneMixin from '../../mixins/timeZone'
 import { getQuery } from '@/api/flight'
+import TableHeaderCellWithFilter from '@/components/TableHeaderCellWithFilter'
+import { setTableFilters } from '@/utils/table'
 
 export default {
   name: 'DepartureTerminalView',
-  components: { Dialog, TimeZoneSelector },
+  components: { Dialog, TimeZoneSelector, TableHeaderCellWithFilter },
   mixins: [terminalMixin, formMixin, tableColsMixin, timeZoneMixin],
   data() {
     return {
@@ -275,7 +299,7 @@ export default {
         value: 'outAicompanyCode2',
         label: 'outAicompanyCode2'
       },
-
+      popoverVisible: false,
       orderNum: ['0', '0', '0', '0', '0', '0'], // 默认总数
       // 初始表头
       tableCols: [
@@ -380,15 +404,30 @@ export default {
       AirportList: [],
       carrierProps: [],
       carrierPropsop: [],
-      // tableDataFilters: {
-      //   FlightNO: [],
-      //   FlightDate: [],
-      //   PlanDepartureTime: [],
-      //   TargetAirport: [],
-      //   BordingGate: [],
-      //   StandForDepartrue: [],
-      //   DepartureBuild: []
-      // },
+      tableDataFilters: {
+        PreFlightNO: [],
+        PreAirport: [],
+        LandingBuild: [],
+        Carousel: [],
+        StandForLanding: [],
+        FlightNO: [],
+        TargetAirport: [],
+        DepartureBuild: [],
+        BordingGate: [],
+        StandForDepartrue: []
+      },
+      filterValues: {
+        PreFlightNO: '',
+        PreAirport: '',
+        LandingBuild: '',
+        Carousel: '',
+        StandForLanding: '',
+        FlightNO: '',
+        TargetAirport: '',
+        DepartureBuild: '',
+        BordingGate: '',
+        StandForDepartrue: ''
+      },
       loopEvent: null,
       leaveCount: 0,
       baggageCount: 0,
@@ -398,18 +437,55 @@ export default {
       position: 0
     }
   },
+  computed: {
+    filteredTableData() {
+      return this.tableData.filter(item => {
+        let flag = true
+        Object.entries(this.filterValues).forEach(([key, value]) => {
+          if (value !== '' && item[key] !== value) {
+            flag = false
+          }
+        })
+        return flag
+      })
+    }
+  },
+  watch: {
+    filteredTableData: {
+      handler(val) {
+        this.spanArr = []
+        let contactDot = this.contactDot
+        val.forEach((item, index, arr) => {
+          if (index === 0) {
+            this.spanArr.push(1)
+          } else {
+            if (
+              item['PreFlightNO'] === arr[index - 1]['PreFlightNO'] &&
+              item['PreFlightDate'] === arr[index - 1]['PreFlightDate']
+            ) {
+              this.spanArr[contactDot] += 1
+              this.spanArr.push(0)
+            } else {
+              this.spanArr.push(1)
+              contactDot = index
+            }
+          }
+        })
+      },
+      deep: true
+    }
+  },
   created() {
     // this.getAviationData();
     // this.upAviationData();
     this.getAirPortData()
     Object.entries(this.$route.query).forEach(([key, value]) => {
-      if (JSON.stringify(value) !== '[]') {
+      if ((value ?? '') !== '' && JSON.stringify(value) !== '[]') {
         this.formData[key] = value
       }
     })
   },
   mounted() {
-    // this.arraySpanMethod();
     const that = this
     this.loopEvent = setInterval(function () {
       // console.log(this.contactDot)
@@ -521,9 +597,6 @@ export default {
     // },
     // 获取表格数据
     async getTableData() {
-      if (!this.currentAirport) {
-        return
-      }
       const arrs1 = [this.formData.inboundCarrier.length === 0 ? '' : this.formData.inboundCarrier[0]]
       const arrs2 = [this.formData.outgoingAirline.length === 0 ? '' : this.formData.outgoingAirline[0]]
       const arr = [
@@ -551,24 +624,7 @@ export default {
           //   "FlightDate",
           //   "PlanDepartureTime",
           // ]);
-          this.tableData = res.returnData
-          let contactDot = this.contactDot
-          this.spanArr = []
-          this.tableData.forEach((item, index) => {
-            item.index = index
-            if (index === 0) {
-              this.spanArr.push(1)
-            } else {
-              if (item.PreFlightNO === this.tableData[index - 1].PreFlightNO) {
-                this.spanArr[contactDot] += 1
-                this.spanArr.push(0)
-              } else {
-                this.spanArr.push(1)
-                contactDot = index
-              }
-            }
-          })
-          // this.initTableData(res.returnData);
+          this.initTableData(res.returnData)
         } else {
           console.log(res.message)
         }
@@ -578,16 +634,21 @@ export default {
       }
     },
     initTableData(tableData) {
-      this.leaveCount = 0
-      this.baggageCount = 0
-      tableData.forEach(item => {
-        if (item.hasTakenOff === 0) {
-          this.leaveCount++
-        }
-        // item["waitfanj"] = item["noCheckInNumber"] - item["unLoad"];
-        this.baggageCount = this.baggageCount + item.preLoad
-      })
-      this.tableData = this._.sortBy(tableData, ['PreFlightDate', 'ActualLandingTime', 'FlightDate', 'ActualDepartureTime'])
+      // this.leaveCount = 0
+      // this.baggageCount = 0
+      // tableData.forEach(item => {
+      //   if (item.hasTakenOff === 0) {
+      //     this.leaveCount++
+      //   }
+      //   this.baggageCount = this.baggageCount + item.preLoad
+      // })
+      this.tableData = this._.sortBy(tableData, [
+        'PreFlightDate',
+        'ActualLandingTime',
+        'FlightDate',
+        'ActualDepartureTime'
+      ])
+      setTableFilters(this.tableData, this.tableDataFilters)
       // this.toOrderNum(this.baggageCount);
       // setInterval(() => {
       //   this.baggageCount = this.baggageCount+1;
@@ -702,16 +763,6 @@ export default {
       .el-form-item__error {
         z-index: 10;
       }
-      .el-button {
-        &.btn-square {
-          width: 30px;
-          height: 30px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          margin-top: 5px;
-        }
-      }
     }
     .btn-img {
       cursor: pointer;

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

@@ -1,9 +1,9 @@
 <!--
  * @Author: zk
  * @Date: 2022-01-17 10:39:22
- * @LastEditTime: 2022-05-25 16:30:40
+ * @LastEditTime: 2022-05-26 18:06:20
  * @LastEditors: your name
- * @Description: 离港01
+ * @Description: 中转离港
 -->
 <template>
   <div class="departure-one">
@@ -31,6 +31,7 @@
           /> -->
           <el-select
             v-model="formData.currentAirport"
+            class="input-shadow"
             size="small"
             filterable
             placeholder="请选择机场"
@@ -47,6 +48,7 @@
         <el-form-item prop="inboundCarrier">
           <el-cascader
             v-model="formData.inboundCarrier"
+            class="input-shadow"
             style="width: 164px"
             size="small"
             :options="carrierProps"
@@ -61,6 +63,7 @@
         <el-form-item prop="outgoingAirline">
           <el-cascader
             v-model="formData.outgoingAirline"
+            class="input-shadow"
             style="width: 164px"
             size="small"
             :options="carrierPropsop"
@@ -75,6 +78,7 @@
         <el-form-item prop="startDate">
           <el-date-picker
             v-model="formData.startDate"
+            class="input-shadow"
             style="width: 216px"
             size="small"
             type="date"
@@ -86,6 +90,7 @@
         <el-form-item prop="endDate">
           <el-date-picker
             v-model="formData.endDate"
+            class="input-shadow"
             style="width: 216px"
             size="small"
             type="date"
@@ -114,15 +119,26 @@
             prop="search"
             @keyup.enter="onSubmit(0)"
           >
-            <el-input
-              v-model="formData.search"
-              style="width: 240px; margin-left: 105px"
-              size="small"
-              placeholder="请输入内容"
-              prefix-icon="el-icon-search"
-              clearable
-              @clear="inputClear"
-            />
+            <el-popover
+              :value="popoverVisible"
+              placement="bottom"
+              trigger="manual"
+            >
+              <span>请输入航班号（示例：CA1234）或行李牌号（示例：1234567890）</span>
+              <el-input
+                slot="reference"
+                v-model="formData.search"
+                class="input-shadow"
+                style="width: 240px; margin-left: 105px"
+                size="small"
+                placeholder="请输入内容"
+                prefix-icon="el-icon-search"
+                clearable
+                @clear="inputClear"
+                @focus="popoverVisible = true"
+                @blur="popoverVisible = false"
+              />
+            </el-popover>
           </el-form-item>
           <el-form-item>
             <el-button
@@ -131,15 +147,9 @@
               @click="onSubmit(0)"
             >搜索</el-button>
           </el-form-item>
-          <!-- <el-form-item>
-            <el-switch
-              v-model="formData.switch"
-              style="margin-left: 40px"
-              active-text="显示中转"
-            />
-          </el-form-item> -->
           <el-form-item v-is="['ti_showTransit']">
             <el-button
+              class="btn-shadow"
               size="small"
               type="primary"
               @click="changeView"
@@ -150,20 +160,11 @@
           </el-form-item>
           <el-form-item>
             <img
-              class="btn-img"
+              class="btn-img btn-shadow"
               src="../../../../assets/baggage/ic_setting.png"
               @click="show"
             >
           </el-form-item>
-          <!-- <el-form-item>
-            <el-button
-              class="btn-square setBtn"
-              type="primary"
-              icon="el-icon-s-tools"
-              size="mini"
-              @click="show"
-            />
-          </el-form-item> -->
         </div>
       </el-form>
     </div>
@@ -179,7 +180,7 @@
         ref="table"
         class="table"
         height="calc(100vh - 177px)"
-        :data="tableData"
+        :data="filteredTableData"
         show-summary
         :summary-method="summaryMethod"
         :span-method="arraySpanMethod"
@@ -190,24 +191,35 @@
         @cell-click="cellClickHandler"
       >
         <el-table-column
-          v-for="(item, index) in tableColsCopy"
-          :key="index"
-          :prop="item.prop"
-          :label="item.label"
+          v-for="col in tableColsCopy"
+          :key="col.prop"
+          :prop="col.prop"
+          :label="col.label"
         >
           <el-table-column
-            v-for="(p, i) in item.children"
-            :key="i"
-            :prop="p.prop"
-            :label="p.label"
-            :width="p.width"
+            v-for="childCol in col.children"
+            :key="childCol.prop"
+            :prop="childCol.prop"
+            :label="childCol.label"
+            :width="childCol.width"
             :formatter="tableFormat"
           >
-            <template slot="header">
+            <template #header>
               <el-tooltip
-                :content="p.label"
+                :content="childCol.label"
                 placement="top"
-              ><span>{{ p.label }}</span></el-tooltip>
+              >
+                <div class="table-header-cell">
+                  <span>{{ childCol.label }}</span>
+                  <template v-if="tableDataFilters[childCol.prop]">
+                    <TableHeaderCellWithFilter
+                      :label="childCol.label"
+                      :filter-options="tableDataFilters[childCol.prop]"
+                      :filter-value.sync="filterValues[childCol.prop]"
+                    />
+                  </template>
+                </div>
+              </el-tooltip>
             </template>
           </el-table-column>
         </el-table-column>
@@ -260,10 +272,12 @@ import formMixin from '../../mixins/form'
 import tableColsMixin from '../../mixins/tableCols'
 import timeZoneMixin from '../../mixins/timeZone'
 import { getQuery } from '@/api/flight'
+import TableHeaderCellWithFilter from '@/components/TableHeaderCellWithFilter'
+import { setTableFilters } from '@/utils/table'
 
 export default {
   name: 'DepartureTerminalView',
-  components: { Dialog, TimeZoneSelector },
+  components: { Dialog, TimeZoneSelector, TableHeaderCellWithFilter },
   mixins: [terminalMixin, formMixin, tableColsMixin, timeZoneMixin],
   data() {
     return {
@@ -275,6 +289,7 @@ export default {
         value: 'outAicompanyCode2',
         label: 'outAicompanyCode2'
       },
+      popoverVisible: false,
       orderNum: ['0', '0', '0', '0', '0', '0'], // 默认总数
       // 初始表头
       tableCols: [
@@ -379,15 +394,30 @@ export default {
       AirportList: [],
       carrierProps: [],
       carrierPropsop: [],
-      // tableDataFilters: {
-      //   FlightNO: [],
-      //   FlightDate: [],
-      //   PlanDepartureTime: [],
-      //   TargetAirport: [],
-      //   BordingGate: [],
-      //   StandForDepartrue: [],
-      //   DepartureBuild: []
-      // },
+      tableDataFilters: {
+        PreFlightNO: [],
+        PreAirport: [],
+        LandingBuild: [],
+        Carousel: [],
+        StandForLanding: [],
+        FlightNO: [],
+        TargetAirport: [],
+        DepartureBuild: [],
+        BordingGate: [],
+        StandForDepartrue: []
+      },
+      filterValues: {
+        PreFlightNO: '',
+        PreAirport: '',
+        LandingBuild: '',
+        Carousel: '',
+        StandForLanding: '',
+        FlightNO: '',
+        TargetAirport: '',
+        DepartureBuild: '',
+        BordingGate: '',
+        StandForDepartrue: ''
+      },
       loopEvent: null,
       leaveCount: 0,
       baggageCount: 0,
@@ -396,10 +426,48 @@ export default {
       flag: 0
     }
   },
+  computed: {
+    filteredTableData() {
+      return this.tableData.filter(item => {
+        let flag = true
+        Object.entries(this.filterValues).forEach(([key, value]) => {
+          if (value !== '' && item[key] !== value) {
+            flag = false
+          }
+        })
+        return flag
+      })
+    }
+  },
+  watch: {
+    filteredTableData: {
+      handler(val) {
+        this.spanArr = []
+        let contactDot = this.contactDot
+        val.forEach((item, index, arr) => {
+          if (index === 0) {
+            this.spanArr.push(1)
+          } else {
+            if (
+              item['FlightNO'] === arr[index - 1]['FlightNO'] &&
+              item['FlightDate'] === arr[index - 1]['FlightDate']
+            ) {
+              this.spanArr[contactDot] += 1
+              this.spanArr.push(0)
+            } else {
+              this.spanArr.push(1)
+              contactDot = index
+            }
+          }
+        })
+      },
+      deep: true
+    }
+  },
   created() {
     this.getAirPortData()
     Object.entries(this.$route.query).forEach(([key, value]) => {
-      if (JSON.stringify(value) !== '[]') {
+      if ((value ?? '') !== '' && JSON.stringify(value) !== '[]') {
         this.formData[key] = value
       }
     })
@@ -539,24 +607,7 @@ export default {
           dataContent: [...arr]
         })
         if (Number(res.code) === 0) {
-          this.tableData = res.returnData
-          let contactDot = this.contactDot
-          this.spanArr = []
-          this.tableData.forEach((item, index) => {
-            item.index = index
-            if (index === 0) {
-              this.spanArr.push(1)
-            } else {
-              if (item.FlightNO === this.tableData[index - 1].FlightNO) {
-                this.spanArr[contactDot] += 1
-                this.spanArr.push(0)
-              } else {
-                this.spanArr.push(1)
-                contactDot = index
-              }
-            }
-          })
-          // this.initTableData(res.returnData);
+          this.initTableData(res.returnData)
         } else {
           console.log(res.message)
         }
@@ -568,24 +619,26 @@ export default {
     initTableData(tableData) {
       this.leaveCount = 0
       this.baggageCount = 0
-      tableData.forEach(item => {
-        if (item.hasTakenOff === 0) {
-          this.leaveCount++
-        }
-        // item["waitfanj"] = item["noCheckInNumber"] - item["unLoad"];
-        this.baggageCount = this.baggageCount + item.preLoad
-      })
-      this.tableData = this._.sortBy(tableData, ['FlightDate', 'ActualDepartureTime', 'PreFlightDate', 'ActualLandingTime'])
+      // tableData.forEach(item => {
+      //   if (item.hasTakenOff === 0) {
+      //     this.leaveCount++
+      //   }
+      //   // item["waitfanj"] = item["noCheckInNumber"] - item["unLoad"];
+      //   this.baggageCount = this.baggageCount + item.preLoad
+      // })
+      this.tableData = this._.sortBy(tableData, [
+        'FlightDate',
+        'ActualDepartureTime',
+        'PreFlightDate',
+        'ActualLandingTime'
+      ])
+      setTableFilters(this.tableData, this.tableDataFilters)
       // this.toOrderNum(this.baggageCount);
       // setInterval(() => {
       //   this.baggageCount = this.baggageCount+1;
       //    // 这里输入数字即可调用
       // }, 2000);
     },
-    filterHandler(value, row, column) {
-      const property = column['property']
-      return row[property] === value
-    },
     setNumberTransform() {
       const numberItems = this.$refs.numberItem // 拿到数字的ref，计算元素数量
       const numberArr = this.orderNum.filter(item => !isNaN(item))
@@ -672,16 +725,6 @@ export default {
       .el-form-item__error {
         z-index: 10;
       }
-      .el-button {
-        &.btn-square {
-          width: 30px;
-          height: 30px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          margin-top: 5px;
-        }
-      }
     }
     .btn-img {
       cursor: pointer;

src/views/baggageManagement/mixins/form.js

@@ -1,7 +1,7 @@
 /*
  * @Author: Badguy
  * @Date: 2022-03-04 14:45:03
- * @LastEditTime: 2022-05-25 15:36:56
+ * @LastEditTime: 2022-05-26 18:01:48
  * @LastEditors: your name
  * @Description: 航站视图通用表单部分
  * have a nice day!
@@ -61,7 +61,7 @@ export default {
       },
       // 表单规则
       rules: {
-        currentAirport: [{ required: true, message: '请选择当前机场', trigger: 'change' }],
+        currentAirport: [{ required: true, message: '请选择当前机场', trigger: ['change', 'blur'] }],
         startDate: [{ required: true, message: '请选择开始时间', trigger: 'change' }],
         endDate: [{ required: true, message: '请选择结束时间', trigger: 'change' }]
       }
@@ -232,7 +232,10 @@ export default {
           }
           this.$router.push({
             path: '/advance',
-            query: queryData
+            query: {
+              ...queryData,
+              singleJump: true
+            }
           })
         } else {
           return false

src/views/baggageManagement/mixins/terminal.js

@@ -1,7 +1,7 @@
 /*
  * @Author: Badguy
  * @Date: 2022-03-04 11:41:55
- * @LastEditTime: 2022-05-26 10:25:59
+ * @LastEditTime: 2022-05-26 11:15:23
  * @LastEditors: your name
  * @Description: 航站视图通用部分
  * have a nice day!
@@ -78,6 +78,8 @@ export default {
       if (columns.length > 0) {
         columns.forEach((column, index) => {
           if (index === 0) {
+            sums[index] = '合计'
+          } else if (index === 1) {
             sums[index] = '航班数：' + this.tableData.length
           } else if (
             // 需要计算的列

src/views/baggageManagement/mixins/timeZone.js

@@ -1,7 +1,7 @@
 /*
  * @Author: Badguy
  * @Date: 2022-05-17 17:04:32
- * @LastEditTime: 2022-05-17 18:38:03
+ * @LastEditTime: 2022-05-26 14:54:12
  * @LastEditors: your name
  * @Description: 时区相关
  * have a nice day!
@@ -9,6 +9,10 @@
 import { timeInZone } from '@/utils/table'
 import { mapGetters } from 'vuex'
 
+function getTimeInZone(time, timeZone) {
+  return timeInZone((time ?? '').replace('T', ' '), timeZone)
+}
+
 export default {
   computed: {
     ...mapGetters(['timeZone'])
@@ -16,29 +20,29 @@ export default {
   methods: {
     // 表格数据格式化
     tableFormat(row, column, cellValue) {
-      if (cellValue || cellValue === 0) {
-        switch (column.property) {
-          // case 'FlightDate':
-          //   return cellValue.split('-').slice(1).join('-')
-          case 'PlanLandingTime':
-          case 'PlanDepartureTime':
-            return timeInZone(cellValue, this.timeZone)
-          case 'ActualDepartureTime':
-          case 'ActualLandingTime':
-            return timeInZone(cellValue.replace('T', ' '), this.timeZone).replace(' ', '\n')
-          case 'checkIn':
-          case 'security':
-          case 'sorting':
-          case 'loading':
-          case 'installed':
-            return cellValue.split('\n')[0] + '\n' + timeInZone(cellValue.split('\n')[1].replace('T', ' '), this.timeZone)
-          case 'timeDifference':
-            return cellValue <= -120 ? '-2h+' : cellValue >= 120 ? '2h+' : cellValue
-          default:
-            return cellValue
-        }
-      } else {
-        return ''
+      switch (column.property) {
+        // case 'FlightDate':
+        //   return cellValue.split('-').slice(1).join('-')
+        case 'PlanLandingTime':
+        case 'PlanDepartureTime':
+          return timeInZone(cellValue, this.timeZone)
+        case 'ActualDepartureTime':
+        case 'ActualLandingTime':
+          return timeInZone(cellValue.replace('T', ' '), this.timeZone).replace(' ', '\n')
+        case 'checkIn':
+          return `${cellValue ?? ''}\n${getTimeInZone(row['checkInTime'], this.timeZone)}`
+        case 'DealInfo':
+          return `${cellValue ?? ''}\n${getTimeInZone(row['DealTime'], this.timeZone)}`
+        case 'sortLocationMark':
+          return `${cellValue ?? ''}\n${getTimeInZone(row['sortDealTime'], this.timeZone)}`
+        case 'loadLocationMark':
+          return `${cellValue ?? ''}\n${getTimeInZone(row['loadDealTime'], this.timeZone)}`
+        case 'inflLocationMark':
+          return `${cellValue ?? ''}\n${getTimeInZone(row['inflLoadDealTime'], this.timeZone)}`
+        case 'timeDifference':
+          return cellValue <= -120 ? '-2h+' : cellValue >= 120 ? '2h+' : cellValue
+        default:
+          return cellValue ?? ''
       }
     }
   }