5.26问题修改

src/components/TableHeaderCell/index.vue

@@ -0,0 +1,154 @@
+<!--
+ * @Author: Badguy
+ * @Date: 2022-05-25 14:09:35
+ * @LastEditTime: 2022-05-30 16:23:25
+ * @LastEditors: your name
+ * @Description: 表头下拉筛选
+ * have a nice day!
+-->
+<template>
+  <div class="table-header-cell">
+    <template v-if="filterable">
+      <el-popover
+        placement="bottom"
+        trigger="click"
+        @show="expand = true"
+        @hide="expand = false"
+      >
+        <!-- <i
+        slot="reference"
+        :class="['filter-arrow', 'el-icon-arrow-down', { 'arrow-active': active, 'arrow-expand': expand }]"
+      /> -->
+        <span
+          slot="reference"
+          :class="['btn-filter', { 'btn-filter-active': active }]"
+        >{{ label }}</span>
+        <el-form>
+          <el-form-item :label="label">
+            <el-select
+              v-model="selections"
+              size="small"
+              placeholder="筛选"
+              multiple
+              filterable
+              default-first-option
+              clearable
+              @change="newVal => { $emit('update:filter-values', newVal) }"
+            >
+              <el-option
+                v-for="(option, optionIndex) in filterOptions"
+                :key="option.value + optionIndex"
+                :value="option.value"
+                :label="option.text"
+              />
+            </el-select>
+          </el-form-item>
+        </el-form>
+      </el-popover>
+    </template>
+    <template v-else>
+      <span>{{ label }}</span>
+    </template>
+    <template v-if="sortable">
+      <span
+        class="caret-wrapper"
+        @click="sortChange"
+      >
+        <i class="sort-caret ascending" />
+        <i class="sort-caret descending" />
+      </span>
+    </template>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TableHeaderCell',
+  props: {
+    label: {
+      type: String,
+      default: ''
+    },
+    filterOptions: {
+      type: Array || undefined,
+      default: undefined
+    },
+    filterValues: {
+      type: Array || undefined,
+      default: undefined
+    },
+    sortable: {
+      type: Boolean,
+      default: false
+    },
+    sortRule: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      selections: [],
+      expand: false
+    }
+  },
+  computed: {
+    active() {
+      return this.filterValues?.length
+    },
+    filterable() {
+      return this.filterOptions?.length
+    }
+  },
+  watch: {
+    filterValues(val) {
+      this.selections = val
+    }
+  },
+  methods: {
+    sortChange() {
+      const sortRule = this.sortRule === '' ? 'ascending' : this.sortRule === 'ascending' ? 'descending' : ''
+      this.$emit('update:sort-rule', sortRule)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+// .filter-arrow {
+//   cursor: pointer;
+//   transition: 0.3s transform;
+//   &.arrow-expand {
+//     transform: rotate(-180deg);
+//   }
+//   &.arrow-active {
+//     color: #2d7cff;
+//     font-weight: bold;
+//   }
+// }
+.btn-filter {
+  cursor: pointer;
+  position: relative;
+  &:hover {
+    color: #2d7cff;
+  }
+  &::after {
+    content: '';
+    display: block;
+    width: calc(100% + 4px);
+    position: absolute;
+    bottom: -4px;
+    left: -2px;
+    border-bottom: 1px solid #101116;
+  }
+  &.btn-filter-active,
+  &:hover {
+    &::after {
+      border-bottom: 2px solid #2d7cff;
+    }
+  }
+}
+.el-select-dropdown__item.hover {
+  background: #d2d6df;
+}
+</style>

src/components/TableHeaderCellWithFilter/index.vue

@@ -1,94 +0,0 @@
-<!--
- * @Author: Badguy
- * @Date: 2022-05-25 14:09:35
- * @LastEditTime: 2022-05-25 14:53:56
- * @LastEditors: your name
- * @Description: 表头下拉筛选
- * have a nice day!
--->
-<template>
-  <el-popover
-    placement="bottom"
-    trigger="click"
-    @show="expand = true"
-    @hide="expand = false"
-  >
-    <i
-      slot="reference"
-      :class="['filter-arrow', 'el-icon-arrow-down', { 'arrow-active': active, 'arrow-expand': expand }]"
-    />
-    <el-form>
-      <el-form-item :label="label">
-        <el-select
-          v-model="selection"
-          size="small"
-          placeholder="筛选"
-          default-first-option
-          filterable
-          clearable
-          @change="newVal => { $emit('update:filter-value', newVal) }"
-        >
-          <el-option
-            v-for="(option, optionIndex) in filterOptions"
-            :key="option.value + optionIndex"
-            :value="option.value"
-            :label="option.text"
-          />
-        </el-select>
-      </el-form-item>
-    </el-form>
-  </el-popover>
-</template>
-
-<script>
-export default {
-  name: 'TableHeaderCellWithFilter',
-  props: {
-    filterOptions: {
-      type: Array,
-      required: true
-    },
-    filterValue: {
-      type: String || Number,
-      required: true
-    },
-    label: {
-      type: String,
-      default: ''
-    }
-  },
-  data() {
-    return {
-      selection: '',
-      expand: false
-    }
-  },
-  computed: {
-    active() {
-      return (this.selection ?? '') !== ''
-    }
-  },
-  watch: {
-    filterValue(val) {
-      this.selection = val
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.filter-arrow {
-  cursor: pointer;
-  transition: 0.3s transform;
-  &.arrow-expand {
-    transform: rotate(-180deg);
-  }
-  &.arrow-active {
-    color: #2d7cff;
-    font-weight: bold;
-  }
-}
-.el-select-dropdown__item.hover {
-  background: #d2d6df;
-}
-</style>

src/views/advancedQuery/views/advancedHome.vue

@@ -79,25 +79,13 @@
           :fixed="col.fixed"
         >
           <template #header>
-            <div class="table-header-cell">
-              <span>{{ col.label }}</span>
-              <template v-if="tableDataFilters[col.prop]">
-                <TableHeaderCellWithFilter
-                  :label="col.label"
-                  :filter-options="tableDataFilters[col.prop]"
-                  :filter-value.sync="filterValues[col.prop]"
-                />
-              </template>
-              <template v-if="col.sortable">
-                <span
-                  class="caret-wrapper"
-                  @click="sortChange(col.prop)"
-                >
-                  <i class="sort-caret ascending" />
-                  <i class="sort-caret descending" />
-                </span>
-              </template>
-            </div>
+            <TableHeaderCell
+              :label="col.label"
+              :filter-options="tableDataFilters[col.prop]"
+              :filter-values.sync="filterValues[col.prop]"
+              :sortable="col.sortable"
+              :sort-rule.sync="tableDataSortRules[col.prop]"
+            />
           </template>
         </el-table-column>
       </el-table>
@@ -345,12 +333,12 @@ import Dialog from '@/layout/components/Dialog'
 import { parseTime } from '@/utils/index'
 import { queryMap, myQuery } from '@/api/dataIntegration'
 import { mapGetters } from 'vuex'
-import TableHeaderCellWithFilter from '@/components/TableHeaderCellWithFilter'
+import TableHeaderCell from '@/components/TableHeaderCell'
 import { setTableFilters } from '@/utils/table'
 
 export default {
   name: 'Advance',
-  components: { Search, Dialog, TableHeaderCellWithFilter },
+  components: { Search, Dialog, TableHeaderCell },
   data() {
     return {
       loading: false,
@@ -379,12 +367,16 @@ export default {
         {
           prop: 'FlightNO',
           label: '航班号',
-          fixed: 'left'
+          fixed: 'left',
+          filterable: true,
+          sortable: true
         },
         {
           prop: 'FlightDate',
           label: '航班日期',
-          fixed: 'left'
+          fixed: 'left',
+          filterable: true,
+          sortable: true
         },
         {
           prop: 'DepartureTime',
@@ -393,16 +385,22 @@ export default {
         },
         {
           prop: 'SourceAirport',
-          label: '起飞站'
+          label: '起飞站',
+          filterable: true,
+          sortable: true
         },
         {
           prop: 'TargetAirport',
-          label: '目的地'
+          label: '目的地',
+          filterable: true,
+          sortable: true
         },
         {
           prop: 'PassengerNameUpcase',
           label: '旅客姓名',
-          width: 150
+          width: 150,
+          filterable: true,
+          sortable: true
         },
         {
           prop: 'BagSN',
@@ -413,15 +411,21 @@ export default {
         {
           prop: 'SpecialType',
           label: '特殊行李类型',
-          width: 115
+          width: 115,
+          filterable: true,
+          sortable: true
         },
         {
           prop: 'deleted',
-          label: '删除'
+          label: '删除',
+          filterable: true,
+          sortable: true
         },
         {
           prop: 'activated',
-          label: '激活'
+          label: '激活',
+          filterable: true,
+          sortable: true
         },
         {
           prop: 'BagWeight',
@@ -429,23 +433,33 @@ export default {
         },
         {
           prop: 'latestStatus',
-          label: '最新状态'
+          label: '最新状态',
+          filterable: true,
+          sortable: true
         },
         {
           prop: 'bagLocation',
-          label: '最新位置'
+          label: '最新位置',
+          filterable: true,
+          sortable: true
         },
         {
           prop: 'U_Device_ID',
-          label: '容器编号'
+          label: '容器编号',
+          filterable: true,
+          sortable: true
         },
         {
           prop: 'PreFlightNONotNull',
-          label: '中转进航班'
+          label: '中转进航班',
+          filterable: true,
+          sortable: true
         },
         {
           prop: 'PreFlightNONull',
-          label: '中转出航班'
+          label: '中转出航班',
+          filterable: true,
+          sortable: true
         }
       ],
       FlightDate: [parseTime(new Date(), '{y}-{m}-{d}'), parseTime(new Date(), '{y}-{m}-{d}')],
@@ -598,39 +612,9 @@ export default {
         //   { required: true, message: "请输入有效航班号", trigger: "blur" },
         // ],
       },
-      tableDataFilters: {
-        FlightNO: [],
-        FlightDate: [],
-        SourceAirport: [],
-        TargetAirport: [],
-        PassengerNameUpcase: [],
-        SpecialType: [],
-        deleted: [],
-        activated: [],
-        latestStatus: [],
-        bagLocation: [],
-        U_Device_ID: [],
-        PreFlightNONotNull: [],
-        PreFlightNONull: []
-      },
-      filterValues: {
-        FlightNO: '',
-        FlightDate: '',
-        SourceAirport: '',
-        TargetAirport: '',
-        PassengerNameUpcase: '',
-        SpecialType: '',
-        deleted: '',
-        activated: '',
-        latestStatus: '',
-        bagLocation: '',
-        U_Device_ID: '',
-        PreFlightNONotNull: '',
-        PreFlightNONull: ''
-      },
-      tableDataSortRules: {
-        BagSN: ''
-      },
+      tableDataFilters: {},
+      filterValues: {},
+      tableDataSortRules: {},
       spanArr: [],
       contactDot: 0
     }
@@ -640,21 +624,24 @@ export default {
     dealedTableData() {
       const filtered = this.tableData.filter(item => {
         let flag = true
-        Object.entries(this.filterValues).forEach(([key, value]) => {
-          if (value !== '' && item[key] !== value) {
+        Object.entries(this.filterValues).forEach(([key, arr]) => {
+          if (arr.length && !arr.includes(item[key])) {
             flag = false
           }
         })
         return flag
       })
-      const sortRules = Object.entries(this.tableDataSortRules).reduce((pre, [key, value]) => {
-        if (value) {
-          pre[0].push(key)
-          value = value === 'ascending' ? 'asc' : 'desc'
-          pre[1].push(value)
-        }
-        return pre
-      }, [[], []])
+      const sortRules = Object.entries(this.tableDataSortRules).reduce(
+        (pre, [key, value]) => {
+          if (value) {
+            pre[0].push(key)
+            value = value === 'ascending' ? 'asc' : 'desc'
+            pre[1].push(value)
+          }
+          return pre
+        },
+        [[], []]
+      )
       return this._.orderBy(filtered, sortRules[0], sortRules[1])
     }
   },
@@ -685,6 +672,15 @@ export default {
     }
   },
   created() {
+    Object.values(this.tableCols).forEach(({ prop, filterable, sortable }) => {
+      if (filterable) {
+        this.$set(this.tableDataFilters, prop, [])
+        this.$set(this.filterValues, prop, [])
+      }
+      if (sortable) {
+        this.$set(this.tableDataSortRules, prop, '')
+      }
+    })
     // console.log(this.$store.state.app.queryForm)
     // 参数顺序   【航班开始日期，航班结束日期，航班号，航班号，行李牌号，行李牌号，起飞站，起飞站，目的站，目的站，特殊行李类型，特殊 行李类型，旅客姓名大写拼音，旅客姓名大写拼音，PNR，PNR,值机号，值机号】
     // const dataContent = [this.time[0], this.time[1]]
@@ -761,6 +757,7 @@ export default {
         }
       }
     },
+    // 给表头单元格加上 ascending 或 descending 使用 element 自带的排序箭头变色
     headerCellClass({ row, column, rowIndex, columnIndex }) {
       const classes = []
       const rule = this.tableDataSortRules[column.property]
@@ -786,10 +783,6 @@ export default {
       }
       return classes.join(' ')
     },
-    sortChange(prop) {
-      this.tableDataSortRules[prop] =
-        this.tableDataSortRules[prop] === '' ? 'ascending' : this.tableDataSortRules[prop] === 'ascending' ? 'descending' : ''
-    },
     cellClickHandler(row, column, cell, event) {
       if (['FlightNO', 'TransferFlightNO', 'BagSN'].includes(column.property)) {
         this.$store.dispatch('keepAlive/addClickedCell', {
@@ -1090,13 +1083,11 @@ export default {
         color: purple;
       }
     }
-    .el-table__header-wrapper {
+    .el-table__header-wrapper,
+    .el-table__fixed-header-wrapper {
       .cell {
         font-weight: bold;
         color: #101116;
-        .table-header-cell {
-          display: inline-block;
-        }
       }
 
       .has-gutter {

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

@@ -1,7 +1,7 @@
 <!--
  * @Author: zk
  * @Date: 2022-01-17 10:39:22
- * @LastEditTime: 2022-05-27 17:02:36
+ * @LastEditTime: 2022-05-30 17:53:15
  * @LastEditors: your name
  * @Description: 进港01
 -->
@@ -158,7 +158,7 @@
         ref="table"
         class="table"
         :height="computedTableHeight"
-        :data="filteredTableData"
+        :data="dealedTableData"
         :header-cell-class-name="headerCellClass"
         :row-class-name="tableRowClassName"
         :cell-class-name="cellClass"
@@ -189,16 +189,13 @@
                 :content="childCol.label"
                 placement="top"
               >
-                <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>
+                <TableHeaderCell
+                  :label="childCol.label"
+                  :filter-options="tableDataFilters[childCol.prop]"
+                  :filter-values.sync="filterValues[childCol.prop]"
+                  :sortable="childCol.sortable"
+                  :sort-rule.sync="tableDataSortRules[childCol.prop]"
+                />
               </el-tooltip>
             </template>
           </el-table-column>
@@ -251,12 +248,12 @@ import terminalMixin from '../../mixins/terminal'
 import formMixin from '../../mixins/form'
 import tableColsMixin from '../../mixins/tableCols'
 import { getQuery } from '@/api/flight'
-import TableHeaderCellWithFilter from '@/components/TableHeaderCellWithFilter'
+import TableHeaderCell from '@/components/TableHeaderCell'
 import { setTableFilters } from '@/utils/table'
 
 export default {
   name: 'DepartureTerminalView',
-  components: { Dialog, TimeZoneSelector, TableHeaderCellWithFilter },
+  components: { Dialog, TimeZoneSelector, TableHeaderCell },
   mixins: [terminalMixin, formMixin, tableColsMixin],
   data() {
     return {
@@ -273,33 +270,50 @@ export default {
             {
               prop: 'FlightNO',
               label: '航班号',
-              width: 80
+              width: 80,
+              filterable: true,
+              sortable: true
             },
             {
               prop: 'FlightDate',
               label: '执飞日期',
-              width: 105
+              width: 105,
+              filterable: true,
+              sortable: true
             },
             {
               prop: 'arrivalTime',
               label: '到港时间',
-              width: 150
+              width: 150,
+              filterable: true,
+              sortable: true
             },
             {
               prop: 'departureTerminal',
-              label: '起飞航站'
+              label: '起飞航站',
+              width: 85,
+              filterable: true,
+              sortable: true
             },
             {
               prop: 'arrivalTerminal',
-              label: '到达航站'
+              label: '到达航站楼',
+              width: 100,
+              filterable: true,
+              sortable: true
             },
             {
               prop: 'luggageCarousel',
-              label: '行李转盘'
+              label: '行李转盘',
+              width: 85,
+              filterable: true,
+              sortable: true
             },
             {
               prop: 'parkingSpace',
-              label: '停机位'
+              label: '停机位',
+              filterable: true,
+              sortable: true
             }
           ]
         },
@@ -335,11 +349,13 @@ export default {
             },
             {
               prop: 'specialQuantity',
-              label: '特殊'
+              label: '特殊',
+              width: 65
             },
             {
               prop: 'numberOfClaims',
-              label: '理赔'
+              label: '理赔',
+              width: 65
             }
           ]
         },
@@ -395,54 +411,20 @@ export default {
             },
             {
               prop: 'numberOfBulk',
-              label: '散装'
+              label: '散装',
+              width: 65
             }
           ]
         }
       ],
       AirportList: [],
-      tableDataFilters: {
-        FlightNO: [],
-        FlightDate: [],
-        asarrivalTime: [],
-        departureTerminal: [],
-        arrivalTerminal: [],
-        luggageCarousel: [],
-        parkingSpace: [],
-        numberOfContainers: []
-      },
-      filterValues: {
-        FlightNO: '',
-        FlightDate: '',
-        asarrivalTime: '',
-        departureTerminal: '',
-        arrivalTerminal: '',
-        luggageCarousel: '',
-        parkingSpace: '',
-        numberOfContainers: ''
-      },
       loopEvent: null,
       leaveCount: 0,
       baggageCount: 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
-      })
-    }
-  },
-  created() {
-    this.getAirPortData()
-  },
   mounted() {
+    this.getAirPortData()
     const that = this
     this.loopEvent = setInterval(function () {
       that.getTableData()
@@ -487,8 +469,9 @@ export default {
       if (['transfer_all', 'departureAnomaly', 'riskWarning'].includes(column.property)) {
         classes.push('bgl-huang')
       }
-      if (column.property === 'flightInfo') {
-        classes.push('fixed-header-cell')
+      const rule = this.tableDataSortRules[column.property]
+      if (rule) {
+        classes.push(rule)
       }
       return classes.join(' ')
     },
@@ -704,7 +687,8 @@ export default {
         color: purple;
       }
     }
-    .el-table__header-wrapper {
+    .el-table__header-wrapper,
+    .el-table__fixed-header-wrapper {
       .cell {
         font-weight: bold;
         color: #101116;
@@ -737,7 +721,7 @@ export default {
         }
       }
     }
-    .el-table__cell.is-hidden.fixed-header-cell > * {
+    .el-table__cell.is-hidden > * {
       visibility: visible;
     }
   }

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

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2022-01-17 10:39:22
- * @LastEditTime: 2022-05-27 19:21:21
+ * @LastEditTime: 2022-05-30 18:12:43
  * @LastEditors: your name
  * @Description: 行李视图
 -->
@@ -188,7 +188,7 @@
               :span="6"
             >
               <div class="card">
-                <div class="message-date">{{ message.date }}</div>
+                <div class="message-date">{{ message.date + ' UTC' }}</div>
                 <div class="message-content">
                   {{ message.dataContent.replaceAll(/[\r\n]{2,}/g, '\n') }}
                   <!-- BSM <br>

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

@@ -1,7 +1,7 @@
 <!--
  * @Author: zk
  * @Date: 2022-01-17 10:39:22
- * @LastEditTime: 2022-05-27 17:02:39
+ * @LastEditTime: 2022-05-30 18:31:10
  * @LastEditors: your name
  * @Description: 离港01
 -->
@@ -160,7 +160,7 @@
         ref="table"
         class="table"
         :height="computedTableHeight"
-        :data="filteredTableData"
+        :data="dealedTableData"
         :header-cell-class-name="headerCellClass"
         :row-class-name="tableRowClassName"
         show-summary
@@ -185,16 +185,13 @@
               :content="col.label"
               placement="top"
             >
-              <div class="table-header-cell">
-                <span>{{ col.label }}</span>
-                <template v-if="tableDataFilters[col.prop]">
-                  <TableHeaderCellWithFilter
-                    :label="col.label"
-                    :filter-options="tableDataFilters[col.prop]"
-                    :filter-value.sync="filterValues[col.prop]"
-                  />
-                </template>
-              </div>
+              <TableHeaderCell
+                :label="col.label"
+                :filter-options="tableDataFilters[col.prop]"
+                :filter-values.sync="filterValues[col.prop]"
+                :sortable="col.sortable"
+                :sort-rule.sync="tableDataSortRules[col.prop]"
+              />
             </el-tooltip>
           </template>
         </el-table-column>
@@ -247,12 +244,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 TableHeaderCell from '@/components/TableHeaderCell'
 import { setTableFilters } from '@/utils/table'
 
 export default {
   name: 'DepartureTerminalView',
-  components: { Dialog, TimeZoneSelector, TableHeaderCellWithFilter },
+  components: { Dialog, TimeZoneSelector, TableHeaderCell },
   mixins: [terminalMixin, formMixin, tableColsMixin, timeZoneMixin],
   data() {
     return {
@@ -264,34 +261,48 @@ export default {
           prop: 'FlightNO',
           label: '航班号',
           width: 80,
-          fixed: 'left'
+          fixed: 'left',
+          filterable: true,
+          sortable: true
         },
         {
           prop: 'FlightDate',
           label: '执飞日期',
           width: 105,
-          fixed: 'left'
+          fixed: 'left',
+          filterable: true,
+          sortable: true
         },
         {
           prop: 'PlanDepartureTime',
           label: '预计起飞时间',
-          width: 150
+          width: 150,
+          filterable: true,
+          sortable: true
         },
         {
           prop: 'TargetAirport',
-          label: '目的站'
+          label: '目的站',
+          filterable: true,
+          sortable: true
         },
         {
           prop: 'DepartureBuild',
-          label: '航站楼'
+          label: '航站楼',
+          filterable: true,
+          sortable: true
         },
         {
           prop: 'BordingGate',
-          label: '登机口'
+          label: '登机口',
+          filterable: true,
+          sortable: true
         },
         {
           prop: 'StandForDepartrue',
-          label: '停机位'
+          label: '停机位',
+          filterable: true,
+          sortable: true
         },
         {
           prop: 'checkInTravellerNumber',
@@ -355,42 +366,11 @@ export default {
         }
       ],
       AirportList: [],
-      tableDataFilters: {
-        FlightNO: [],
-        FlightDate: [],
-        PlanDepartureTime: [],
-        TargetAirport: [],
-        BordingGate: [],
-        StandForDepartrue: [],
-        DepartureBuild: []
-      },
-      filterValues: {
-        FlightNO: '',
-        FlightDate: '',
-        PlanDepartureTime: '',
-        TargetAirport: '',
-        BordingGate: '',
-        StandForDepartrue: '',
-        DepartureBuild: ''
-      },
       loopEvent: null,
       leaveCount: 0,
       baggageCount: 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
-      })
-    }
-  },
   created() {
     this.getAirPortData()
   },
@@ -654,7 +634,8 @@ export default {
         color: purple;
       }
     }
-    .el-table__header-wrapper {
+    .el-table__header-wrapper,
+    .el-table__fixed-header-wrapper {
       .cell {
         font-weight: bold;
         color: #101116;
@@ -667,7 +648,8 @@ export default {
         }
       }
     }
-    .el-table__body-wrapper {
+    .el-table__body-wrapper,
+    .el-table__fixed-body-wrapper {
       tr.bgl-hui {
         td {
           background: #d2d6df;
@@ -688,8 +670,8 @@ export default {
       tr.bgl-huang td {
         background: #fcf0b1;
       }
-      .cell-warning {
-        background: orange;
+      td.cell-warning {
+        background: orange !important;
       }
     }
   }

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

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2022-01-17 10:39:22
- * @LastEditTime: 2022-05-27 19:10:44
+ * @LastEditTime: 2022-05-30 18:26:00
  * @LastEditors: your name
  * @Description: 航班视图
 -->
@@ -16,37 +16,69 @@
         <div class="part1_info">
           <div class="part1_info_box">
             <el-row>
-              <el-col :xs="24" :sm="24" :xl="12">
+              <el-col
+                :xs="24"
+                :sm="24"
+                :xl="12"
+              >
                 <span>起飞机场简称：</span>
               </el-col>
-              <el-col :xs="24" :sm="24" :xl="12">
+              <el-col
+                :xs="24"
+                :sm="24"
+                :xl="12"
+              >
                 <span>{{ flightInfo.departureName }}</span>
               </el-col>
             </el-row>
             <el-row>
-              <el-col :xs="24" :sm="24" :xl="12">
+              <el-col
+                :xs="24"
+                :sm="24"
+                :xl="12"
+              >
                 <span>起飞机场三字码：</span>
               </el-col>
-              <el-col :xs="24" :sm="24" :xl="12">
+              <el-col
+                :xs="24"
+                :sm="24"
+                :xl="12"
+              >
                 <span>{{ flightInfo.PlanDepartureApt }}</span>
               </el-col>
             </el-row>
             <el-row>
-              <el-col :xs="24" :sm="24" :xl="12">
+              <el-col
+                :xs="24"
+                :sm="24"
+                :xl="12"
+              >
                 <span>起飞机场航站楼：</span>
               </el-col>
-              <el-col :xs="24" :sm="24" :xl="12">
+              <el-col
+                :xs="24"
+                :sm="24"
+                :xl="12"
+              >
                 <span>{{ flightInfo.DepartureBuild }}</span>
               </el-col>
             </el-row>
             <el-row>
-              <el-col :xs="24" :sm="24" :xl="12">
+              <el-col
+                :xs="24"
+                :sm="24"
+                :xl="12"
+              >
                 <span>
                   日期：
                   {{ flightInfo.PlanDepartureTime && flightInfo.PlanDepartureTime.split("T")[0] }}
                 </span>
               </el-col>
-              <el-col :xs="24" :sm="24" :xl="12">
+              <el-col
+                :xs="24"
+                :sm="24"
+                :xl="12"
+              >
                 <span>
                   时间：
                   {{ flightInfo.PlanDepartureTime && flightInfo.PlanDepartureTime.split("T")[1] }}
@@ -80,65 +112,121 @@
               </el-col>
             </el-row>
             <el-row>
-              <el-col :xs="24" :sm="24" :xl="12">
+              <el-col
+                :xs="24"
+                :sm="24"
+                :xl="12"
+              >
                 <span>托运旅客数：</span>
                 <span>{{ flightInfo.count1 }}</span>
               </el-col>
-              <el-col :xs="24" :sm="24" :xl="12">
+              <el-col
+                :xs="24"
+                :sm="24"
+                :xl="12"
+              >
                 <span>终点行李数：</span>
                 <span>{{ flightInfo.count2 }}</span>
               </el-col>
             </el-row>
             <el-row>
-              <el-col :xs="18" :sm="18" :xl="12">
+              <el-col
+                :xs="18"
+                :sm="18"
+                :xl="12"
+              >
                 <span>中转进行李数：</span>
               </el-col>
-              <el-col :xs="6" :sm="6" :xl="12">
+              <el-col
+                :xs="6"
+                :sm="6"
+                :xl="12"
+              >
                 <span>{{ flightInfo.count4 }}</span>
               </el-col>
             </el-row>
             <el-row>
-              <el-col :xs="18" :sm="18" :xl="12">
+              <el-col
+                :xs="18"
+                :sm="18"
+                :xl="12"
+              >
                 <span>中转出行李数：</span>
               </el-col>
-              <el-col :xs="6" :sm="6" :xl="12">
+              <el-col
+                :xs="6"
+                :sm="6"
+                :xl="12"
+              >
                 <span>{{ flightInfo.count3 }}</span>
               </el-col>
             </el-row>
           </div>
           <div class="part1_info_box">
             <el-row>
-              <el-col :xs="24" :sm="24" :xl="12">
+              <el-col
+                :xs="24"
+                :sm="24"
+                :xl="12"
+              >
                 <span>降落机场简称：</span>
               </el-col>
-              <el-col :xs="24" :sm="24" :xl="12">
+              <el-col
+                :xs="24"
+                :sm="24"
+                :xl="12"
+              >
                 <span>{{ flightInfo.landingName }}</span>
               </el-col>
             </el-row>
             <el-row>
-              <el-col :xs="24" :sm="24" :xl="12">
+              <el-col
+                :xs="24"
+                :sm="24"
+                :xl="12"
+              >
                 <span>降落机场三字码：</span>
               </el-col>
-              <el-col :xs="24" :sm="24" :xl="12">
+              <el-col
+                :xs="24"
+                :sm="24"
+                :xl="12"
+              >
                 <span>{{ flightInfo.PlanLandingApt }}</span>
               </el-col>
             </el-row>
             <el-row>
-              <el-col :xs="24" :sm="24" :xl="12">
+              <el-col
+                :xs="24"
+                :sm="24"
+                :xl="12"
+              >
                 <span>降落机场航站楼：</span>
               </el-col>
-              <el-col :xs="24" :sm="24" :xl="12">
+              <el-col
+                :xs="24"
+                :sm="24"
+                :xl="12"
+              >
                 <span>{{ flightInfo.LandingBuild }}</span>
               </el-col>
             </el-row>
             <el-row>
-              <el-col :xs="24" :sm="24" :xl="12">
+              <el-col
+                :xs="24"
+                :sm="24"
+                :xl="12"
+              >
                 <span>
                   日期：
                   {{ flightInfo.ExpectLandingTime && flightInfo.ExpectLandingTime.split("T")[0] }}
                 </span>
               </el-col>
-              <el-col :xs="24" :sm="24" :xl="12">
+              <el-col
+                :xs="24"
+                :sm="24"
+                :xl="12"
+              >
                 <span>
                   时间：
                   {{ flightInfo.ExpectLandingTime && flightInfo.ExpectLandingTime.split("T")[1] }}
@@ -146,10 +234,18 @@
               </el-col>
             </el-row>
             <el-row>
-              <el-col :xs="24" :sm="24" :xl="12">
+              <el-col
+                :xs="24"
+                :sm="24"
+                :xl="12"
+              >
                 <span>提取转盘：{{ flightInfo.Carousel }}</span>
               </el-col>
-              <el-col :xs="24" :sm="24" :xl="12">
+              <el-col
+                :xs="24"
+                :sm="24"
+                :xl="12"
+              >
                 <span>停机位：{{ flightInfo.StandForLanding }}</span>
               </el-col>
             </el-row>
@@ -275,7 +371,7 @@
         </div>
         <el-table
           ref="flightBaggageTable"
-          :data="filteredTableData"
+          :data="dealedTableData"
           border
           style="width: 100%"
           height="calc(100vh - 80px - 16px - 16px - 344px - 8px - 204px - 62px)"
@@ -283,6 +379,7 @@
           size="mini"
           show-summary
           :summary-method="summaryRow(flightBaggageTableData.length)"
+          :header-cell-class-name="headerCellClass"
           :header-cell-style="{ color: '#101116' }"
           :row-class-name="rowClass"
           :cell-class-name="cellClass"
@@ -299,16 +396,13 @@
             :formatter="tableFormat"
           >
             <template #header>
-              <div class="table-header-cell">
-                <span>{{ col.label }}</span>
-                <template v-if="flightBaggageTableFilters[col.prop]">
-                  <TableHeaderCellWithFilter
-                    :label="col.label"
-                    :filter-options="flightBaggageTableFilters[col.prop]"
-                    :filter-value.sync="filterValues[col.prop]"
-                  />
-                </template>
-              </div>
+              <TableHeaderCell
+                :label="col.label"
+                :filter-options="flightBaggageTableFilters[col.prop]"
+                :filter-values.sync="filterValues[col.prop]"
+                :sortable="col.sortable"
+                :sort-rule.sync="tableDataSortRules[col.prop]"
+              />
             </template>
           </el-table-column>
         </el-table>
@@ -358,7 +452,7 @@ import TimeZoneSelector from '@/components/TimeZoneSelector'
 import { queryMap, myQuery } from '@/api/dataIntegration'
 import tableColsMixin from '../../mixins/tableCols'
 import timeZoneMixin from '../../mixins/timeZone'
-import TableHeaderCellWithFilter from '@/components/TableHeaderCellWithFilter'
+import TableHeaderCell from '@/components/TableHeaderCell'
 import { setTableFilters } from '@/utils/table'
 import { mapGetters } from 'vuex'
 
@@ -386,13 +480,13 @@ import { mapGetters } from 'vuex'
 // ]
 const departureBaggageTableColumn = [
   // { label: '序号', prop: 'index' },
-  { label: '旅客姓名', prop: 'PassengerNameUpcase', width: 140, fixed: 'left' },
-  { label: '行李牌号', prop: 'BagSN', width: 120, fixed: 'left' },
-  { label: '特殊行李类型', prop: 'SpecialType', width: 120 },
-  { label: '容器编号', prop: 'U_Device_ID', width: 120 },
+  { label: '旅客姓名', prop: 'PassengerNameUpcase', width: 140, fixed: 'left', filterable: true, sortable: true },
+  { label: '行李牌号', prop: 'BagSN', width: 120, fixed: 'left', filterable: true, sortable: true },
+  { label: '特殊行李类型', prop: 'SpecialType', width: 120, filterable: true, sortable: true },
+  { label: '容器编号', prop: 'U_Device_ID', width: 120, filterable: true, sortable: true },
   { label: '装载序号', prop: 'LoadSN' },
   { label: '值机', prop: 'checkIn', width: 140 },
-  { label: '状态', prop: 'latestStatus' },
+  { label: '状态', prop: 'latestStatus', filterable: true, sortable: true },
   { label: '安检', prop: 'DealInfo', width: 140 },
   { label: '分拣', prop: 'sortLocationMark', width: 140 },
   { label: '装车', prop: 'loadLocationMark', width: 140 },
@@ -405,7 +499,7 @@ export default {
   components: {
     Dialog,
     TimeZoneSelector,
-    TableHeaderCellWithFilter
+    TableHeaderCell
   },
   mixins: [tableColsMixin, timeZoneMixin],
   data() {
@@ -448,35 +542,36 @@ export default {
       transferInBaggageTableData: [], // 中转进
       transferOutBaggageTableData: [], // 中转出
       flightBaggageTableData: [], // 行李列表
-      flightBaggageTableFilters: {
-        PassengerNameUpcase: [],
-        BagSN: [],
-        SpecialType: [],
-        U_Device_ID: [],
-        latestStatus: []
-      },
-      filterValues: {
-        PassengerNameUpcase: '',
-        BagSN: '',
-        SpecialType: '',
-        U_Device_ID: '',
-        latestStatus: ''
-      },
+      flightBaggageTableFilters: {},
+      filterValues: {},
+      tableDataSortRules: {},
       warningContainers: []
     }
   },
   computed: {
     ...mapGetters(['clickedCells']),
-    filteredTableData() {
-      return this.flightBaggageTableData.filter(item => {
+    dealedTableData() {
+      const filtered = this.flightBaggageTableData.filter(item => {
         let flag = true
-        Object.entries(this.filterValues).forEach(([key, value]) => {
-          if (value !== '' && item[key] !== value) {
+        Object.entries(this.filterValues).forEach(([key, arr]) => {
+          if (arr.length && !arr.includes(item[key])) {
             flag = false
           }
         })
         return flag
       })
+      const sortRules = Object.entries(this.tableDataSortRules).reduce(
+        (pre, [key, value]) => {
+          if (value) {
+            pre[0].push(key)
+            value = value === 'ascending' ? 'asc' : 'desc'
+            pre[1].push(value)
+          }
+          return pre
+        },
+        [[], []]
+      )
+      return this._.orderBy(filtered, sortRules[0], sortRules[1])
     }
   },
   watch: {
@@ -505,6 +600,17 @@ export default {
       }
     }
   },
+  created() {
+    Object.values(this.tableCols).forEach(({ prop, filterable, sortable }) => {
+      if (filterable) {
+        this.$set(this.flightBaggageTableFilters, prop, [])
+        this.$set(this.filterValues, prop, [])
+      }
+      if (sortable) {
+        this.$set(this.tableDataSortRules, prop, '')
+      }
+    })
+  },
   mounted() {
     this.queryData = this._.cloneDeep(this.$route.query)
     const { FlightNO, FlightDate } = this.queryData
@@ -522,6 +628,9 @@ export default {
       this.$refs['flightBaggageTable'].doLayout()
     })
   },
+  beforeDestroy() {
+    this.fullscreenLoading = false
+  },
   methods: {
     rowClass({ row, rowIndex }) {
       const classes = []
@@ -530,6 +639,15 @@ export default {
       }
       return classes.join(' ')
     },
+    // 给表头单元格加上 ascending 或 descending 使用 element 自带的排序箭头变色
+    headerCellClass({ row, column, rowIndex, columnIndex }) {
+      const classes = []
+      const rule = this.tableDataSortRules[column.property]
+      if (rule) {
+        classes.push(rule)
+      }
+      return classes.join(' ')
+    },
     cellClass({ row, column, rowIndex, columnIndex }) {
       const classes = []
       if (
@@ -780,7 +898,7 @@ export default {
             &:last-child {
               margin: 0;
             }
-            @media only screen and (max-width: 1600px) {
+            @media only screen and (max-width: 1919px) {
               .el-col-sm-24:nth-child(2) {
                 margin-top: 24px;
               }

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

@@ -1,7 +1,7 @@
 <!--
  * @Author: zk
  * @Date: 2022-01-17 10:39:22
- * @LastEditTime: 2022-05-27 17:02:43
+ * @LastEditTime: 2022-05-30 17:56:38
  * @LastEditors: your name
  * @Description: 中转进港
 -->
@@ -194,7 +194,7 @@
       <el-table
         ref="table"
         class="table"
-        :data="filteredTableData"
+        :data="dealedTableData"
         :height="computedTableHeight"
         show-summary
         :summary-method="summaryMethod"
@@ -227,16 +227,13 @@
                 :content="childCol.label"
                 placement="top"
               >
-                <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>
+                <TableHeaderCell
+                  :label="childCol.label"
+                  :filter-options="tableDataFilters[childCol.prop]"
+                  :filter-values.sync="filterValues[childCol.prop]"
+                  :sortable="childCol.sortable"
+                  :sort-rule.sync="tableDataSortRules[childCol.prop]"
+                />
               </el-tooltip>
             </template>
           </el-table-column>
@@ -290,12 +287,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 TableHeaderCell from '@/components/TableHeaderCell'
 import { setTableFilters } from '@/utils/table'
 
 export default {
   name: 'DepartureTerminalView',
-  components: { Dialog, TimeZoneSelector, TableHeaderCellWithFilter },
+  components: { Dialog, TimeZoneSelector, TableHeaderCell },
   mixins: [terminalMixin, formMixin, tableColsMixin, timeZoneMixin],
   data() {
     return {
@@ -320,7 +317,9 @@ export default {
             {
               prop: 'PreFlightNO',
               label: '航班号',
-              width: 80
+              width: 80,
+              filterable: true,
+              sortable: true
             },
             {
               prop: 'PreFlightDate',
@@ -329,7 +328,9 @@ export default {
             },
             {
               prop: 'PreAirport',
-              label: '起飞机场'
+              label: '起飞航站',
+              filterable: true,
+              sortable: true
             },
             {
               prop: 'ActualLandingTime',
@@ -339,16 +340,22 @@ export default {
             {
               prop: 'LandingBuild',
               label: '降落航站楼',
-              width: 98
+              width: 98,
+              filterable: true,
+              sortable: true
             },
             {
               prop: 'Carousel',
-              label: '行李转盘'
+              label: '行李转盘',
+              filterable: true,
+              sortable: true
             },
             {
               prop: 'StandForLanding',
               label: '降落停机位',
-              width: 98
+              width: 98,
+              filterable: true,
+              sortable: true
             },
             {
               prop: 'inTransferBaggageCount',
@@ -368,7 +375,9 @@ export default {
             {
               prop: 'FlightNO',
               label: '航班号',
-              width: 80
+              width: 80,
+              filterable: true,
+              sortable: true
             },
             {
               prop: 'FlightDate',
@@ -382,22 +391,30 @@ export default {
             },
             {
               prop: 'TargetAirport',
-              label: '目的站'
+              label: '目的站',
+              filterable: true,
+              sortable: true
             },
             {
               prop: 'DepartureBuild',
               label: '起飞航站楼',
-              width: 98
+              width: 98,
+              filterable: true,
+              sortable: true
             },
             {
               prop: 'BordingGate',
               label: '起飞登机口',
-              width: 98
+              width: 98,
+              filterable: true,
+              sortable: true
             },
             {
               prop: 'StandForDepartrue',
               label: '起飞停机位',
-              width: 98
+              width: 98,
+              filterable: true,
+              sortable: true
             },
             {
               prop: 'outTransferBaggageCount',
@@ -419,80 +436,15 @@ export default {
       AirportList: [],
       carrierProps: [],
       carrierPropsop: [],
-      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,
       spanArr: [],
       contactDot: 0,
-      flag: 0,
-      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
+      flag: 0
     }
   },
   created() {
-    // this.getAviationData();
-    // this.upAviationData();
     this.getAirPortData()
     Object.entries(this.$route.query).forEach(([key, value]) => {
       if ((value ?? '') !== '' && JSON.stringify(value) !== '[]') {
@@ -503,24 +455,18 @@ export default {
   mounted() {
     const that = this
     this.loopEvent = setInterval(function () {
-      // console.log(this.contactDot)
       that.getTableData()
     }, 3000)
   },
   beforeDestroy() {
     clearInterval(this.loopEvent)
   },
-  // watch: {
-  //   formData() {
-  //     this.getAviationData();
-  //     this.upAviationData();
-  //   },
-  // },
   methods: {
     headerCellClass({ row, column }) {
       const classes = []
-      if (column.property === 'arrivalInfo') {
-        classes.push('fixed-header-cell')
+      const rule = this.tableDataSortRules[column.property]
+      if (rule) {
+        classes.push(rule)
       }
       return classes.join(' ')
     },
@@ -900,7 +846,8 @@ export default {
         color: purple;
       }
     }
-    .el-table__header-wrapper {
+    .el-table__header-wrapper,
+    .el-table__fixed-header-wrapper {
       .cell {
         font-weight: bold;
         color: #101116;
@@ -933,7 +880,7 @@ export default {
         }
       }
     }
-    .el-table__cell.is-hidden.fixed-header-cell > * {
+    .el-table__cell.is-hidden > * {
       visibility: visible;
     }
   }

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

@@ -1,7 +1,7 @@
 <!--
  * @Author: zk
  * @Date: 2022-01-17 10:39:22
- * @LastEditTime: 2022-05-27 17:02:49
+ * @LastEditTime: 2022-05-30 17:55:39
  * @LastEditors: your name
  * @Description: 中转离港
 -->
@@ -155,7 +155,7 @@
           <el-form-item v-is="['ti_showTransit']">
             <el-button
               class="btn-shadow"
-              size="small"
+              size="mini"
               type="primary"
               @click="changeView"
             >切换视角</el-button>
@@ -184,8 +184,8 @@
       <el-table
         ref="table"
         class="table"
+        :data="dealedTableData"
         :height="computedTableHeight"
-        :data="filteredTableData"
         show-summary
         :summary-method="summaryMethod"
         :span-method="arraySpanMethod"
@@ -217,16 +217,13 @@
                 :content="childCol.label"
                 placement="top"
               >
-                <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>
+                <TableHeaderCell
+                  :label="childCol.label"
+                  :filter-options="tableDataFilters[childCol.prop]"
+                  :filter-values.sync="filterValues[childCol.prop]"
+                  :sortable="childCol.sortable"
+                  :sort-rule.sync="tableDataSortRules[childCol.prop]"
+                />
               </el-tooltip>
             </template>
           </el-table-column>
@@ -280,12 +277,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 TableHeaderCell from '@/components/TableHeaderCell'
 import { setTableFilters } from '@/utils/table'
 
 export default {
   name: 'DepartureTerminalView',
-  components: { Dialog, TimeZoneSelector, TableHeaderCellWithFilter },
+  components: { Dialog, TimeZoneSelector, TableHeaderCell },
   mixins: [terminalMixin, formMixin, tableColsMixin, timeZoneMixin],
   data() {
     return {
@@ -310,7 +307,9 @@ export default {
             {
               prop: 'FlightNO',
               label: '航班号',
-              width: 80
+              width: 80,
+              filterable: true,
+              sortable: true
             },
             {
               prop: 'FlightDate',
@@ -324,22 +323,30 @@ export default {
             },
             {
               prop: 'TargetAirport',
-              label: '目的站'
+              label: '目的站',
+              filterable: true,
+              sortable: true
             },
             {
               prop: 'DepartureBuild',
               label: '起飞航站楼',
-              width: 98
+              width: 98,
+              filterable: true,
+              sortable: true
             },
             {
               prop: 'BordingGate',
               label: '起飞登机口',
-              width: 98
+              width: 98,
+              filterable: true,
+              sortable: true
             },
             {
               prop: 'StandForDepartrue',
               label: '起飞停机位',
-              width: 98
+              width: 98,
+              filterable: true,
+              sortable: true
             },
             {
               prop: 'outTransferBaggageCount',
@@ -364,7 +371,9 @@ export default {
             {
               prop: 'PreFlightNO',
               label: '航班号',
-              width: 80
+              width: 80,
+              filterable: true,
+              sortable: true
             },
             {
               prop: 'PreFlightDate',
@@ -373,7 +382,9 @@ export default {
             },
             {
               prop: 'PreAirport',
-              label: '起飞机场'
+              label: '起飞航站',
+              filterable: true,
+              sortable: true
             },
             {
               prop: 'ActualLandingTime',
@@ -383,16 +394,22 @@ export default {
             {
               prop: 'LandingBuild',
               label: '降落航站楼',
-              width: 98
+              width: 98,
+              filterable: true,
+              sortable: true
             },
             {
               prop: 'Carousel',
-              label: '行李转盘'
+              label: '行李转盘',
+              filterable: true,
+              sortable: true
             },
             {
               prop: 'StandForLanding',
               label: '降落停机位',
-              width: 98
+              width: 98,
+              filterable: true,
+              sortable: true
             },
             {
               prop: 'inTransferBaggageCount',
@@ -409,30 +426,6 @@ export default {
       AirportList: [],
       carrierProps: [],
       carrierPropsop: [],
-      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,
@@ -441,44 +434,6 @@ 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]) => {
@@ -499,8 +454,9 @@ export default {
   methods: {
     headerCellClass({ row, column }) {
       const classes = []
-      if (column.property === 'departureInfo') {
-        classes.push('fixed-header-cell')
+      const rule = this.tableDataSortRules[column.property]
+      if (rule) {
+        classes.push(rule)
       }
       return classes.join(' ')
     },
@@ -639,8 +595,8 @@ export default {
       }
     },
     initTableData(tableData) {
-      this.leaveCount = 0
-      this.baggageCount = 0
+      // this.leaveCount = 0
+      // this.baggageCount = 0
       // tableData.forEach(item => {
       //   if (item.hasTakenOff === 0) {
       //     this.leaveCount++
@@ -862,7 +818,8 @@ export default {
         color: purple;
       }
     }
-    .el-table__header-wrapper {
+    .el-table__header-wrapper,
+    .el-table__fixed-header-wrapper {
       .cell {
         font-weight: bold;
         color: #101116;
@@ -897,7 +854,7 @@ export default {
         }
       }
     }
-    .el-table__cell.is-hidden.fixed-header-cell > * {
+    .el-table__cell.is-hidden > * {
       visibility: visible;
     }
   }

src/views/baggageManagement/mixins/terminal.js

@@ -1,7 +1,7 @@
 /*
  * @Author: Badguy
  * @Date: 2022-03-04 11:41:55
- * @LastEditTime: 2022-05-27 15:48:17
+ * @LastEditTime: 2022-05-30 17:25:40
  * @LastEditors: your name
  * @Description: 航站视图通用部分
  * have a nice day!
@@ -15,12 +15,18 @@ export default {
     return {
       // 表格数据
       tableData: [],
+      tableDataFilters: {},
+      filterValues: {},
+      tableDataSortRules: {},
       spanArr: [],
       pos: 0,
       loading: false,
       computedTableHeight: 0
     }
   },
+  created() {
+    this.setFilterAndSort(this.tableCols)
+  },
   updated() {
     const headerHeight = 80
     const bottomBlankHeight = 41
@@ -28,9 +34,74 @@ export default {
     this.computedTableHeight = `calc(100vh - ${headerHeight + bottomBlankHeight + formWrapHeight}px)`
   },
   computed: {
-    ...mapGetters(['clickedCells'])
+    ...mapGetters(['clickedCells']),
+    dealedTableData() {
+      const filtered = this.tableData.filter(item => {
+        let flag = true
+        Object.entries(this.filterValues).forEach(([key, arr]) => {
+          if (arr.length && !arr.includes(item[key])) {
+            flag = false
+          }
+        })
+        return flag
+      })
+      const sortRules = Object.entries(this.tableDataSortRules).reduce(
+        (pre, [key, value]) => {
+          if (value) {
+            pre[0].push(key)
+            value = value === 'ascending' ? 'asc' : 'desc'
+            pre[1].push(value)
+          }
+          return pre
+        },
+        [[], []]
+      )
+      return this._.orderBy(filtered, sortRules[0], sortRules[1])
+    }
+  },
+  watch: {
+    dealedTableData: {
+      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
+    }
   },
   methods: {
+    // 设置筛选和排序
+    setFilterAndSort (tableCols) {
+      const self = this
+      Object.values(tableCols).forEach(({ prop, filterable, sortable, children }) => {
+        if (children) {
+          self.setFilterAndSort(children)
+        } else {
+          if (filterable) {
+            self.$set(self.tableDataFilters, prop, [])
+            self.$set(self.filterValues, prop, [])
+          }
+          if (sortable) {
+            self.$set(self.tableDataSortRules, prop, '')
+          }
+        }
+      })
+    },
     // 合计行
     summaryMethod({ columns, data }) {
       const sums = []
@@ -130,7 +201,8 @@ export default {
           'checkNumber',
           'sortNumber',
           'loadNumber',
-          'landingNumber'
+          'landingNumber',
+          'checkIns'
         ].includes(column.property) &&
         row[column.property]
       ) {
@@ -146,7 +218,7 @@ export default {
           classes.push('cell-clicked')
         }
       }
-      if (column === 'tounLoad' && row[column.property]) {
+      if (column.property === 'tounLoad' && row[column.property]) {
         classes.push('cell-warning')
       }
       return classes.join(' ')
@@ -167,7 +239,8 @@ export default {
           'checkNumber',
           'sortNumber',
           'loadNumber',
-          'landingNumber'
+          'landingNumber',
+          'checkIns'
         ].includes(column.property)
       ) {
         this.$store.dispatch('keepAlive/addClickedCell', {
@@ -304,6 +377,17 @@ export default {
           })
           break
         }
+        case 'checkIns':
+          this.$router.push({
+            path: '/advance',
+            query: {
+              FlightNO: row.FlightNO,
+              startDate: row.FlightDate,
+              endDate: row.FlightDate,
+              checkIn: 1
+            }
+          })
+          break
         default:
           break
       }