本地缓存表格设置、行李视图部分折叠

src/components/TableHeaderCell/index.vue

@@ -23,7 +23,8 @@
           v-if="filterStyle === 'underline'"
           slot="reference"
           :class="['btn-filter', { 'btn-filter-active': active }]"
-        >{{ label }}</span>
+          >{{ label }}</span
+        >
         <i
           v-if="filterStyle === 'arrow'"
           slot="reference"
@@ -40,7 +41,7 @@
               default-first-option
               collapse-tags
               clearable
-              @change="newVal => { $emit('update:filter-values', newVal) }"
+              @change="selectionChange"
             >
               <el-option
                 v-for="(option, optionIndex) in filterOptions"
@@ -116,6 +117,9 @@ export default {
     }
   },
   methods: {
+    selectionChange(val) {
+      this.$emit('update:filter-values', val)
+    },
     sortChange() {
       const sortRule = this.sortRule === '' ? 'ascending' : this.sortRule === 'ascending' ? 'descending' : ''
       this.$emit('update:sort-rule', sortRule)
@@ -124,7 +128,10 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
+<style
+  lang="scss"
+  scoped
+>
 .filter-arrow {
   cursor: pointer;
   transition: 0.3s transform;

src/store/getters.js

@@ -37,6 +37,9 @@ const getters = {
   passengerQueryParams: state => state.app.passengerQueryParams,
   userChecked: state => state.user.userChecked,
   abnormalBaggageDialogFlag: state => state.app.abnormalBaggageDialogFlag,
-  abnormalBaggageQueryParams: state => state.app.abnormalBaggageQueryParams
+  abnormalBaggageQueryParams: state => state.app.abnormalBaggageQueryParams,
+  savedHiddenColumnKeysMap: state => state.savedSettings.savedHiddenColumnKeysMap,
+  savedTableFilterValuesMap: state => state.savedSettings.savedTableFilterValuesMap,
+  savedFormDataMap: state => state.savedSettings.savedFormDataMap
 }
 export default getters

src/store/index.js

@@ -9,6 +9,8 @@ import tagsView from './modules/tagsView'
 import permission from './permission'
 import keepAlive from './modules/keepAlive'
 import timeZone from './modules/timeZone'
+import savedSettings from './modules/savedSettings'
+
 Vue.use(Vuex)
 
 const store = new Vuex.Store({
@@ -20,7 +22,8 @@ const store = new Vuex.Store({
     auth,
     permission,
     keepAlive,
-    timeZone
+    timeZone,
+    savedSettings
   },
   getters
 })

src/store/modules/savedSettings.js

@@ -0,0 +1,57 @@
+import router from '@/router'
+
+const savedHiddenColumnKeysMap = JSON.parse(localStorage.getItem('savedHiddenColumnKeysMap') ?? '{}')
+const savedTableFilterValuesMap = JSON.parse(localStorage.getItem('savedTableFilterValuesMap') ?? '{}')
+const savedFormDataMap = JSON.parse(localStorage.getItem('savedFormDataMap') ?? '{}')
+
+const state = {
+  savedHiddenColumnKeysMap,
+  savedTableFilterValuesMap,
+  savedFormDataMap
+}
+
+const mutations = {
+  SAVE_HIDDEN_COLUMN_KEYS(state, { keys, tableName }) {
+    const fullTableName = router.currentRoute.name + (tableName ? `/${tableName}` : '')
+    state.savedHiddenColumnKeysMap = {
+      ...state.savedHiddenColumnKeysMap,
+      [fullTableName]: keys
+    }
+    localStorage.setItem('savedHiddenColumnKeysMap', JSON.stringify(state.savedHiddenColumnKeysMap))
+  },
+  SAVE_TABLE_FILTER_VALUES(state, { filterValues, tableName }) {
+    const fullTableName = router.currentRoute.name + (tableName ? `/${tableName}` : '')
+    state.savedTableFilterValuesMap = {
+      ...state.savedTableFilterValuesMap,
+      [fullTableName]: filterValues
+    }
+    localStorage.setItem('savedTableFilterValuesMap', JSON.stringify(state.savedTableFilterValuesMap))
+  },
+  SAVE_FORM_DATA(state, { formData, formName }) {
+    const fullFormName = router.currentRoute.name + (formName ? `/${formName}` : '')
+    state.savedFormDataMap = {
+      ...state.savedFormDataMap,
+      [fullFormName]: formData
+    }
+    localStorage.setItem('savedFormDataMap', JSON.stringify(state.savedFormDataMap))
+  }
+}
+
+const actions = {
+  saveHiddenColumnKeys({ commit }, payload) {
+    commit('SAVE_HIDDEN_COLUMN_KEYS', payload)
+  },
+  saveTableFilterValues({ commit }, payload) {
+    commit('SAVE_TABLE_FILTER_VALUES', payload)
+  },
+  saveFormData({ commit }, payload) {
+    commit('SAVE_FORM_DATA', payload)
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}

src/views/advancedQuery/mixins/tableCols.js

@@ -1,89 +0,0 @@
-/*
- * @Author: Badguy
- * @Date: 2022-03-04 11:50:22
- * @LastEditTime: 2022-05-18 19:54:21
- * @LastEditors: your name
- * @Description: 航站视图表格通用部分
- * have a nice day!
- */
-
-export default {
-  data() {
-    return {
-      // 筛选后表头
-      tableColsCopy: [],
-      // 列设置弹框选中
-      checkedKeys: [],
-      checkedKeysTemp: [],
-      halfCheckedKeys: [],
-      // 列设置弹框开关
-      dialogFlag: false
-    }
-  },
-  created() {
-    this.initTableCols()
-  },
-  computed: {
-    colsCheckClass() {
-      return this.tableCols.some(col => col.children?.length) ? 'has-children' : 'no-children'
-    }
-  },
-  methods: {
-    // 列设置-初始化
-    initTableCols() {
-      function setTableCols(cols) {
-        for (const col of cols) {
-          col.index = this.checkedKeys.length
-          this.checkedKeys.push(this.checkedKeys.length)
-          if (col.children?.length) {
-            setTableCols(col.children)
-          }
-        }
-      }
-      setTableCols(this.tableCols)
-      this.tableColsCopy = this._.cloneDeep(this.tableCols)
-      this.checkedKeysTemp = [...this.checkedKeys]
-    },
-    // 列设置-确定
-    handleCheck(data, checked) {
-      this.checkedKeysTemp = [...checked.checkedKeys]
-      this.halfCheckedKeys = [...checked.halfCheckedKeys]
-    },
-    onCheck() {
-      if (this.dialogFlag === false) {
-        return
-      }
-      this.loading = true
-      const tableDataTemp = this._.cloneDeep(this.tableData)
-      this.tableData = []
-      this.dialogFlag = false
-      this.checkedKeys = [...this.checkedKeysTemp]
-      this.tableColsCopy = this.colsFilter(this._.cloneDeep(this.tableCols))
-      setTimeout(() => {
-        this.tableData = tableDataTemp
-        this.loading = false
-      }, 0)
-    },
-    colsFilter(cols) {
-      const temp = cols.filter(col => {
-        if (this.halfCheckedKeys.includes(col.index)) {
-          col.children = this.colsFilter(col.children)
-          return true
-        } else if (this.checkedKeys.includes(col.index)) {
-          return true
-        }
-        return false
-      })
-      return temp
-    },
-    // 弹框展开
-    show() {
-      this.dialogFlag = true
-    },
-    // 弹框关闭
-    hide() {
-      this.dialogFlag = false
-      this.checkedKeysTemp = [...this.checkedKeys]
-    }
-  }
-}

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

@@ -8,8 +8,17 @@
 <template>
   <div class="arrival-one">
     <!--功能区-表单-->
-    <div ref="formWrap" class="terminal-form-wrap">
-      <el-form ref="form" :inline="true" :model="formData" :rules="rules" class="form">
+    <div
+      ref="formWrap"
+      class="terminal-form-wrap"
+    >
+      <el-form
+        ref="form"
+        :inline="true"
+        :model="formData"
+        :rules="rules"
+        class="form"
+      >
         <div class="form-left">
           <el-form-item prop="currentAirport">
             <!-- <el-cascader
@@ -24,8 +33,22 @@
             filterable
             @change="setCurrentAirport"
           /> -->
-            <el-select v-model="formData.currentAirport" class="input-shadow" size="small" style="width: 150px" filterable default-first-option placeholder="请选择机场" @change="airPortChange">
-              <el-option v-for="(item, index) in AirportList" :key="index" :label="item.planLandingApt" :value="item.planLandingApt" />
+            <el-select
+              v-model="formData.currentAirport"
+              class="input-shadow"
+              size="small"
+              style="width: 150px"
+              filterable
+              default-first-option
+              placeholder="请选择机场"
+              @change="airPortChange"
+            >
+              <el-option
+                v-for="(item, index) in AirportList"
+                :key="index"
+                :label="item.planLandingApt"
+                :value="item.planLandingApt"
+              />
             </el-select>
           </el-form-item>
           <!-- <el-form-item prop="startDate">
@@ -52,30 +75,76 @@
               @change="endDateChangeHandler"
             />
           </el-form-item> -->
-          <el-form-item prop="flightDate" label="航班日期">
-            <el-date-picker v-model="formData.flightDate" :clearable="false" size="small" style="width: 300px" type="daterange" value-format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="dateRangePickerOptions" @change="dateChangeHandler" />
+          <el-form-item
+            prop="flightDate"
+            label="航班日期"
+          >
+            <el-date-picker
+              v-model="formData.flightDate"
+              :clearable="false"
+              size="small"
+              style="width: 300px"
+              type="daterange"
+              value-format="yyyy-MM-dd"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              :picker-options="dateRangePickerOptions"
+              @change="dateChangeHandler"
+            />
           </el-form-item>
           <el-form-item>
             <div class="box-item">
               <p>预计装载总数：</p>
-              <li v-for="(item, index) in orderNum" :key="index" :class="{ 'number-item': !isNaN(item), 'mark-item': isNaN(item) }">
+              <li
+                v-for="(item, index) in orderNum"
+                :key="index"
+                :class="{ 'number-item': !isNaN(item), 'mark-item': isNaN(item) }"
+              >
                 <span v-if="!isNaN(item)">
                   <i ref="numberItem">0123456789</i>
                 </span>
-                <span v-else class="comma">{{ item }}</span>
+                <span
+                  v-else
+                  class="comma"
+                  >{{ item }}</span
+                >
               </li>
             </div>
           </el-form-item>
         </div>
-        <div class="form-right" @keyup.enter="onSubmit(1)">
+        <div
+          class="form-right"
+          @keyup.enter="onSubmit(1)"
+        >
           <el-form-item prop="search">
-            <el-popover :value="popoverVisible" placement="bottom" trigger="manual">
+            <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 @focus="popoverVisible = true" @blur="popoverVisible = false" />
+              <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
+                @focus="popoverVisible = true"
+                @blur="popoverVisible = false"
+              />
             </el-popover>
           </el-form-item>
           <el-form-item>
-            <el-button class="btn-shadow" size="mini" type="primary" @click="onSubmit(1)">搜索</el-button>
+            <el-button
+              class="btn-shadow"
+              size="mini"
+              type="primary"
+              @click="onSubmit(1)"
+              >搜索</el-button
+            >
           </el-form-item>
           <!-- <el-form-item v-is="['is_timeIcon']">
             <TimeZoneSelector />
@@ -87,22 +156,75 @@
             <img class="btn-img btn-shadow" src="@/assets/baggage/ic_setting.png" title="列设置" @click="show" />
           </el-form-item> -->
           <el-form-item>
-            <img class="btn-img btn-shadow" src="@/assets/baggage/ic_setting.png" title="列设置" @click="show" />
+            <img
+              class="btn-img btn-shadow"
+              src="@/assets/baggage/ic_setting.png"
+              title="列设置"
+              @click="show"
+            />
           </el-form-item>
           <el-form-item v-is="['dm_dt_columnSettings']">
-            <img class="btn-img btn-shadow" src="@/assets/baggage/ic_export.png" title="导出" @click="exportHandler('table', '航站进港列表')" />
+            <img
+              class="btn-img btn-shadow"
+              src="@/assets/baggage/ic_export.png"
+              title="导出"
+              @click="exportHandler('table', '航站进港列表')"
+            />
           </el-form-item>
         </div>
       </el-form>
     </div>
     <!--表格-->
-    <div v-loading="loading" class="terminal-table" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
-      <el-table ref="table" class="table" :height="computedTableHeight" :data="dealedTableData" :header-cell-class-name="headerCellClass" :row-class-name="tableRowClassName" :cell-class-name="cellClass" show-summary :summary-method="summaryMethod" border stripe fit @cell-click="cellClickHandler">
-        <el-table-column v-for="col in tableColsCopy" :key="col.prop" :prop="col.prop" :label="col.label" :width="col.width" :fixed="col.fixed">
-          <el-table-column v-for="childCol in col.children" :key="childCol.prop" :prop="childCol.prop" :label="childCol.label" :width="childCol.width" :formatter="tableFormat">
+    <div
+      v-loading="loading"
+      class="terminal-table"
+      element-loading-text="拼命加载中"
+      element-loading-spinner="el-icon-loading"
+      element-loading-background="rgba(0, 0, 0, 0.8)"
+    >
+      <el-table
+        ref="table"
+        class="table"
+        :height="computedTableHeight"
+        :data="dealedTableData"
+        :header-cell-class-name="headerCellClass"
+        :row-class-name="tableRowClassName"
+        :cell-class-name="cellClass"
+        show-summary
+        :summary-method="summaryMethod"
+        border
+        stripe
+        fit
+        @cell-click="cellClickHandler"
+      >
+        <el-table-column
+          v-for="col in tableColsCopy"
+          :key="col.prop"
+          :prop="col.prop"
+          :label="col.label"
+          :width="col.width"
+          :fixed="col.fixed"
+        >
+          <el-table-column
+            v-for="childCol in col.children"
+            :key="childCol.prop"
+            :prop="childCol.prop"
+            :label="childCol.label"
+            :width="childCol.width"
+            :formatter="tableFormat"
+          >
             <template #header>
-              <el-tooltip :content="childCol.desc || childCol.label" placement="top">
-                <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
+                :content="childCol.desc || childCol.label"
+                placement="top"
+              >
+                <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>
@@ -110,18 +232,41 @@
       </el-table>
     </div>
     <!--列设置-->
-    <Dialog :flag="dialogFlag" class="dialog-check-group">
+    <Dialog
+      :flag="dialogFlag"
+      class="dialog-check-group"
+    >
       <div class="dialog-wrapper">
         <div class="title">列设置</div>
         <div class="content">
-          <el-tree ref="columnSetTree" :data="tableCols" :class="colsCheckClass" show-checkbox node-key="index" :default-expand-all="true" :props="{
+          <el-tree
+            ref="columnSetTree"
+            :data="tableCols"
+            :class="colsCheckClass"
+            show-checkbox
+            node-key="index"
+            :default-expand-all="true"
+            :props="{
               label: 'label',
-              children: 'children',
-            }" :default-checked-keys="checkedKeysTemp" @check="handleCheck" />
+              children: 'children'
+            }"
+            :default-checked-keys="checkedKeysTemp"
+            @check="handleCheck"
+          />
         </div>
         <div class="foot right t30">
-          <el-button size="medium" class="r24" type="primary" @click="onCheck">确定</el-button>
-          <el-button size="medium" @click="hide">取消</el-button>
+          <el-button
+            size="medium"
+            class="r24"
+            type="primary"
+            @click="onCheck"
+            >确定</el-button
+          >
+          <el-button
+            size="medium"
+            @click="hide"
+            >取消</el-button
+          >
         </div>
       </div>
     </Dialog>
@@ -129,206 +274,206 @@
 </template>
 
 <script>
-import Dialog from "@/layout/components/Dialog";
-import TimeZoneSelector from "@/components/TimeZoneSelector";
-import terminalMixin from "../../mixins/terminal";
-import formMixin from "../../mixins/form";
-import tableColsMixin from "../../mixins/tableCols";
-import timeZoneMixin from "../../mixins/timeZone";
-import { getQuery } from "@/api/flight";
-import TableHeaderCell from "@/components/TableHeaderCell";
-import { setTableFilters, throttledExportToExcel } from "@/utils/table";
+import Dialog from '@/layout/components/Dialog'
+import TimeZoneSelector from '@/components/TimeZoneSelector'
+import terminalMixin from '../../mixins/terminal'
+import formMixin from '../../mixins/form'
+import tableColsMixin from '../../mixins/tableCols'
+import timeZoneMixin from '../../mixins/timeZone'
+import { getQuery } from '@/api/flight'
+import TableHeaderCell from '@/components/TableHeaderCell'
+import { setTableFilters, throttledExportToExcel } from '@/utils/table'
 
 export default {
-  name: "DepartureTerminalView",
+  name: 'DepartureTerminalView',
   components: { Dialog, TimeZoneSelector, TableHeaderCell },
   mixins: [terminalMixin, formMixin, tableColsMixin, timeZoneMixin],
-  data () {
+  data() {
     return {
-      orderNum: ["0", "0", "0", "0", "0", "0"], // 默认总数
+      orderNum: ['0', '0', '0', '0', '0', '0'], // 默认总数
       popoverVisible: false,
       // 初始表头
       tableCols: [
         {
-          prop: "flightInfo",
-          label: "航班信息",
+          prop: 'flightInfo',
+          label: '航班信息',
           width: 185,
-          fixed: "left",
+          fixed: 'left',
           children: [
             {
-              prop: "flightNO",
-              label: "航班号",
-              desc: "指航班编号",
+              prop: 'flightNO',
+              label: '航班号',
+              desc: '指航班编号',
               width: 80,
               filterable: true,
-              sortable: true,
+              sortable: true
             },
             {
-              prop: "flightDate",
-              label: "执飞日期",
-              desc: "指航班计划起飞日期（不变的，机票上），不是预计起飞日期（预计起飞时间可能多个），也不是实际起飞日期（实际起飞等于最后预计）",
+              prop: 'flightDate',
+              label: '执飞日期',
+              desc: '指航班计划起飞日期（不变的，机票上），不是预计起飞日期（预计起飞时间可能多个），也不是实际起飞日期（实际起飞等于最后预计）',
               width: 105,
               filterable: true,
-              sortable: true,
+              sortable: true
             },
             {
-              prop: "arrivalTime",
-              label: "降落时间",
-              desc: "根据优先级别显示时间。优先级别：1.实际降落时间，2.预计降落时间，3.计划降落时间",
+              prop: 'arrivalTime',
+              label: '降落时间',
+              desc: '根据优先级别显示时间。优先级别：1.实际降落时间，2.预计降落时间，3.计划降落时间',
               width: 150,
               filterable: true,
-              sortable: true,
+              sortable: true
             },
             {
-              prop: "departureAirport",
-              label: "起飞航站",
-              desc: "指航班执飞航段的起飞航站，以航站三字码显示",
+              prop: 'departureAirport',
+              label: '起飞航站',
+              desc: '指航班执飞航段的起飞航站，以航站三字码显示',
               width: 85,
               filterable: true,
-              sortable: true,
+              sortable: true
             },
             {
-              prop: "arrivalTerminal",
-              label: "到达航站楼",
-              desc: "指航班执飞航段的目的航站的航站楼代码",
+              prop: 'arrivalTerminal',
+              label: '到达航站楼',
+              desc: '指航班执飞航段的目的航站的航站楼代码',
               width: 100,
               filterable: true,
-              sortable: true,
+              sortable: true
             },
             {
-              prop: "luggageCarousel",
-              label: "行李转盘",
-              desc: "指航班进港，旅客提取行李转盘的代码",
+              prop: 'luggageCarousel',
+              label: '行李转盘',
+              desc: '指航班进港，旅客提取行李转盘的代码',
               width: 85,
               filterable: true,
-              sortable: true,
+              sortable: true
             },
             {
-              prop: "parkingSpace",
-              label: "停机位",
-              desc: "指航班的停机位代码，数据是变化的，仅显示最新信息",
+              prop: 'parkingSpace',
+              label: '停机位',
+              desc: '指航班的停机位代码，数据是变化的，仅显示最新信息',
               filterable: true,
-              sortable: true,
-            },
-          ],
+              sortable: true
+            }
+          ]
         },
         {
-          prop: "originAirportBaggageInfo",
-          label: "始飞站行李信息",
+          prop: 'originAirportBaggageInfo',
+          label: '始飞站行李信息',
           children: [
             {
-              prop: "checkIns",
-              label: "值机",
-              desc: "指已办理值机托运的行李数量，含取消托运的行李数量，含未激活",
+              prop: 'checkIns',
+              label: '值机',
+              desc: '指已办理值机托运的行李数量，含取消托运的行李数量，含未激活'
             },
             {
-              prop: "projectedLoad",
-              label: "预计装载",
-              desc: "指已办理值机托运的行李数量，不含取消托运的行李数量，不包含未激活",
+              prop: 'projectedLoad',
+              label: '预计装载',
+              desc: '指已办理值机托运的行李数量，不含取消托运的行李数量，不包含未激活'
             },
             {
-              prop: "loadedQuantity",
-              label: "已装载",
-              desc: "指实际装机完成的行李数量，不包含取消托运的行李数量",
-            },
-          ],
+              prop: 'loadedQuantity',
+              label: '已装载',
+              desc: '指实际装机完成的行李数量，不包含取消托运的行李数量'
+            }
+          ]
         },
         {
-          prop: "arrvivalBaggageInfo",
-          label: "到达行李信息",
+          prop: 'arrvivalBaggageInfo',
+          label: '到达行李信息',
           children: [
             {
-              prop: "numberOfDestinationArrivals",
-              label: "到达",
-              desc: "指行李到达提取转盘的行李数量，数据是变化的，仅显示最新信息",
+              prop: 'numberOfDestinationArrivals',
+              label: '到达',
+              desc: '指行李到达提取转盘的行李数量，数据是变化的，仅显示最新信息'
             },
             {
-              prop: "endPointNotReached",
-              label: "未到达",
-              desc: "指行李仍未到达提取转盘的行李数量，数据是变化的，仅显示最新信息",
+              prop: 'endPointNotReached',
+              label: '未到达',
+              desc: '指行李仍未到达提取转盘的行李数量，数据是变化的，仅显示最新信息'
             },
             {
-              prop: "specialQuantity",
-              label: "特殊",
-              desc: "指非正常行李的数量，包括（装笼动物、乘务员行李、易碎行李、VIP 行李等），参考 BSM 报文.E 项",
-              width: 65,
+              prop: 'specialQuantity',
+              label: '特殊',
+              desc: '指非正常行李的数量，包括（装笼动物、乘务员行李、易碎行李、VIP 行李等），参考 BSM 报文.E 项',
+              width: 65
             },
             {
-              prop: "numberOfClaims",
-              label: "理赔",
-              desc: "指航班收到旅客申请理赔的行李数量",
-              width: 65,
-            },
-          ],
+              prop: 'numberOfClaims',
+              label: '理赔',
+              desc: '指航班收到旅客申请理赔的行李数量',
+              width: 65
+            }
+          ]
         },
         {
-          prop: "uninstallInfo",
-          label: "卸载状态",
+          prop: 'uninstallInfo',
+          label: '卸载状态',
           children: [
             {
-              prop: "uninstalled",
-              label: "已卸载",
-              desc: "指卸机的行李数量，数据是变化的，仅显示最新信息",
+              prop: 'uninstalled',
+              label: '已卸载',
+              desc: '指卸机的行李数量，数据是变化的，仅显示最新信息'
             },
             {
-              prop: "numberToBeUninstalled",
-              label: "待卸载",
-              desc: "指仍未卸机的行李数量，数据是变化的，仅显示最新信息",
-            },
-          ],
+              prop: 'numberToBeUninstalled',
+              label: '待卸载',
+              desc: '指仍未卸机的行李数量，数据是变化的，仅显示最新信息'
+            }
+          ]
         },
         {
-          prop: "terminationdBaggageInfo",
-          label: "终止行李",
+          prop: 'terminationdBaggageInfo',
+          label: '终止行李',
           children: [
             {
-              prop: "terminateArrivalQuantity",
-              label: "到达",
-              desc: "指旅客已到达目的站的行李数量，数据是变化的，仅显示最新信息",
+              prop: 'terminateArrivalQuantity',
+              label: '到达',
+              desc: '指旅客已到达目的站的行李数量，数据是变化的，仅显示最新信息'
             },
             {
-              prop: "terminateUnreachedQuantity",
-              label: "未到达",
-              desc: "指未到达目的站的行李数量，数据是变化的，仅显示最新信息",
-            },
-          ],
+              prop: 'terminateUnreachedQuantity',
+              label: '未到达',
+              desc: '指未到达目的站的行李数量，数据是变化的，仅显示最新信息'
+            }
+          ]
         },
         {
-          prop: "transferBaggageInfo",
-          label: "转运行李",
+          prop: 'transferBaggageInfo',
+          label: '转运行李',
           children: [
             {
-              prop: "quantityShipped",
-              label: "已转运",
-              desc: "指当前航班中转出的行李已完成转运的行李数量，数据是变化的，仅显示最新信息",
+              prop: 'quantityShipped',
+              label: '已转运',
+              desc: '指当前航班中转出的行李已完成转运的行李数量，数据是变化的，仅显示最新信息'
             },
             {
-              prop: "undeliveredQuantity",
-              label: "未转运",
-              desc: "指当前航班中转出的行李未完成转运的行李数量，数据是变化的，仅显示最新信息",
-            },
-          ],
+              prop: 'undeliveredQuantity',
+              label: '未转运',
+              desc: '指当前航班中转出的行李未完成转运的行李数量，数据是变化的，仅显示最新信息'
+            }
+          ]
         },
         {
-          prop: "baggageDistributionInfo",
-          label: "行李分布",
+          prop: 'baggageDistributionInfo',
+          label: '行李分布',
           children: [
             {
-              prop: "numberOfContainers",
-              label: "容器",
-              desc: "指当前航班使用容器装载的行李数量，数据是变化的，仅显示最新信息",
+              prop: 'numberOfContainers',
+              label: '容器',
+              desc: '指当前航班使用容器装载的行李数量，数据是变化的，仅显示最新信息'
             },
             {
-              prop: "numberOfBulk",
-              label: "散装",
-              desc: "指当前航班没有使用容器装载的行李数量，数据是变化的，仅显示最新信息",
-              width: 65,
-            },
-          ],
-        },
+              prop: 'numberOfBulk',
+              label: '散装',
+              desc: '指当前航班没有使用容器装载的行李数量，数据是变化的，仅显示最新信息',
+              width: 65
+            }
+          ]
+        }
       ],
       tableDataSortRules: {
-        flightCanceled: "ascending",
+        flightCanceled: 'ascending'
       },
       loading: false,
       AirportList: [],
@@ -336,94 +481,94 @@ export default {
       arrivalCount: 0,
       baggageCount: 0,
       hasSetTableScroll: false,
-      table: null,
-    };
+      table: null
+    }
   },
   computed: {
-    singleDay () {
-      return this.startDate === this.endDate;
-    },
+    singleDay() {
+      return this.startDate === this.endDate
+    }
   },
-  mounted () {
-    this.getAirPortData();
-    this.table = this.$refs.table.bodyWrapper;
-    const that = this;
-    this.table.addEventListener("scroll", () => {
-      that.scrollTop = this.table.scrollTop;
-    });
+  mounted() {
+    this.getAirPortData()
+    this.table = this.$refs.table.bodyWrapper
+    const that = this
+    this.table.addEventListener('scroll', () => {
+      that.scrollTop = this.table.scrollTop
+    })
   },
-  activated () {
-    this.table.scrollTop = this.scrollTop;
-    this.getTableData();
-    this.loopEvent = setInterval(this.getTableData, LOOP_INTERVAL.arrivalTable);
+  activated() {
+    this.table.scrollTop = this.scrollTop
+    this.getTableData()
+    this.loopEvent = setInterval(this.getTableData, LOOP_INTERVAL.arrivalTable)
   },
-  deactivated () {
+  deactivated() {
     if (this.loopEvent) {
-      clearInterval(this.loopEvent);
-      this.loopEvent = null;
+      clearInterval(this.loopEvent)
+      this.loopEvent = null
     }
   },
-  beforeDestroy () {
+  beforeDestroy() {
     if (this.loopEvent) {
-      clearInterval(this.loopEvent);
-      this.loopEvent = null;
+      clearInterval(this.loopEvent)
+      this.loopEvent = null
     }
   },
   methods: {
-    resetLoopEvent () {
-      this.loading = true;
-      this.hasSetTableScroll = false;
-      this.loopEvent && clearInterval(this.loopEvent);
-      this.getTableData();
-      this.loopEvent = setInterval(this.getTableData, LOOP_INTERVAL.arrivalTable);
+    resetLoopEvent() {
+      this.loading = true
+      this.hasSetTableScroll = false
+      this.loopEvent && clearInterval(this.loopEvent)
+      this.getTableData()
+      this.loopEvent = setInterval(this.getTableData, LOOP_INTERVAL.arrivalTable)
     },
-    airPortChange () {
-      this.resetLoopEvent();
+    airPortChange() {
+      this.resetLoopEvent()
     },
-    dateChangeHandler () {
-      this.resetLoopEvent();
+    dateChangeHandler() {
+      this.resetLoopEvent()
     },
     // 选择机场
-    async getAirPortData () {
+    async getAirPortData() {
       try {
         const res = await getQuery({
           id: DATACONTENT_ID.arrivalAirId,
-          dataContent: [],
-        });
+          dataContent: []
+        })
         if (Number(res.code) === 0) {
-          this.AirportList = this._.orderBy(res.returnData.listValues, (o) => o.planLandingApt);
-          this.formData.currentAirport = "PEK";
-          this.resetLoopEvent();
+          this.AirportList = this._.orderBy(res.returnData.listValues, o => o.planLandingApt)
+          this.formData.currentAirport = 'PEK'
+          this.resetLoopEvent()
         } else {
-          this.$message.error(res.message);
+          this.$message.error(res.message)
         }
       } catch (error) {
-        this.$message.error("失败");
+        this.$message.error('失败')
       }
     },
-    tableRowClassName ({ row, rowIndex }) {
-      const classes = [];
-      if (row.flightStatus === "DLY") {
-        classes.push("bgl-delayed");
+    tableRowClassName({ row, rowIndex }) {
+      const classes = []
+      if (row.flightStatus === 'DLY') {
+        classes.push('bgl-delayed')
       }
-      if (row.flightStatus === "CAN") {
-        classes.push("bgl-canceled");
+      if (row.flightStatus === 'CAN') {
+        classes.push('bgl-canceled')
       }
       if (row.hasArrived) {
-        classes.push("bgl-hui");
+        classes.push('bgl-hui')
         if (rowIndex === this.arrivalCount - 1) {
-          classes.push("redBorder");
+          classes.push('redBorder')
         }
       }
-      return classes.join(" ");
+      return classes.join(' ')
     },
-    headerCellClass ({ row, column }) {
-      const classes = [];
-      const rule = this.tableDataSortRules[column.property];
+    headerCellClass({ row, column }) {
+      const classes = []
+      const rule = this.tableDataSortRules[column.property]
       if (rule) {
-        classes.push(rule);
+        classes.push(rule)
       }
-      return classes.join(" ");
+      return classes.join(' ')
     },
     // 获取表单下拉框数据
     // getFormData(params) {
@@ -436,114 +581,118 @@ export default {
     //   this.flightAttrQuery(params)
     // },
     // 获取表格数据
-    async getTableData () {
+    async getTableData() {
       if (!this.formData.currentAirport || !this.startDate || !this.endDate) {
-        return;
+        return
       }
-      const arr = [this.formData.currentAirport, this.startDate, this.endDate];
+      const arr = [this.formData.currentAirport, this.startDate, this.endDate]
       try {
         const res = await getQuery({
           id: DATACONTENT_ID.arrivalTableId,
-          dataContent: [...arr, ...arr, ...arr],
-        });
+          dataContent: [...arr, ...arr, ...arr]
+        })
         if (Number(res.code) === 0) {
-          this.initTableData(res.returnData.listValues);
+          this.initTableData(res.returnData.listValues)
         } else {
-
         }
-        this.loading = false;
+        this.loading = false
       } catch (error) {
         if (this.loopEvent) {
-          clearInterval(this.loopEvent);
-          this.loopEvent = null;
+          clearInterval(this.loopEvent)
+          this.loopEvent = null
         }
-        this.loading = false;
-
+        this.loading = false
       }
     },
-    initTableData (tableData) {
-      this.arrivalCount = 0;
-      this.baggageCount = 0;
-      tableData.forEach((item) => {
-        item["flightCanceled"] = item["flightStatus"] === "CAN" ? 1 : 0;
-        if (this.hasArrived(item)) {
-          this.arrivalCount++;
+    initTableData(tableData) {
+      this.baggageCount = 0
+      tableData.forEach(item => {
+        item['flightCanceled'] = item['flightStatus'] === 'CAN' ? 1 : 0
+        if (item['arrivalTime'] && !item['flightCanceled']) {
+          const now = new Date()
+          const arrivalTime = new Date(item['arrivalTime'])
+          if (now > arrivalTime) {
+            item['hasArrived'] = true
+          } else {
+            item['hasArrived'] = false
+          }
+        } else {
+          item['hasArrived'] = false
         }
-        this.baggageCount = this.baggageCount + item.projectedLoad;
-      });
-      this.tableData = this._.orderBy(tableData, ["hasArrived", "arrivalTime"], ["desc", "asc"]);
-      setTableFilters(this.tableData, this.tableDataFilters);
-      this.toOrderNum(this.baggageCount);
+        this.baggageCount = this.baggageCount + item.projectedLoad
+      })
+      this.tableData = this._.orderBy(tableData, ['hasArrived', 'arrivalTime'], ['desc', 'asc'])
+      setTableFilters(this.tableData, this.tableDataFilters)
+      this.toOrderNum(this.baggageCount)
       this.$nextTick(() => {
-        this.setTableScroll();
-      });
+        this.setTableScroll()
+      })
     },
-    hasArrived (flight) {
-      if (flight.arrivalTime) {
-        const now = new Date();
-        const arrivalTime = new Date(flight.arrivalTime);
-        flight["hasArrived"] = now > arrivalTime && !flight["flightCanceled"];
-      } else {
-        flight["hasArrived"] = false;
-      }
-      return flight["hasArrived"];
-    },
-    setTableScroll () {
+    setTableScroll() {
+      this.arrivalCount = 0
+      this.dealedTableData.forEach(row => {
+        if (row['hasArrived']) {
+          this.arrivalCount++
+        }
+      })
       if (!this.singleDay || this.hasSetTableScroll || this.arrivalCount === 0) {
-        return;
+        return
       }
-      const table = this.$refs["table"].$el;
-      const scrollParent = table.querySelector(".el-table__body-wrapper");
+      const table = this.$refs['table'].$el
+      const scrollParent = table.querySelector('.el-table__body-wrapper')
       if (scrollParent.scrollHeight <= scrollParent.offsetHeight) {
-        return;
+        return
       }
-      const lastRow = table.querySelectorAll(".el-table__body tr")[this.arrivalCount - 1];
+      const lastRow = table.querySelectorAll('.el-table__body tr')[this.arrivalCount - 1]
       setTimeout(() => {
-        const scrollMid = lastRow.offsetTop + lastRow.offsetHeight - scrollParent.offsetHeight / 2;
-        const scrollMax = scrollParent.scrollHeight - scrollParent.offsetHeight;
+        const scrollMid = lastRow.offsetTop + lastRow.offsetHeight - scrollParent.offsetHeight / 2
+        const scrollMax = scrollParent.scrollHeight - scrollParent.offsetHeight
         if (scrollMid > 0) {
-          const scrollHeight = Math.min(scrollMid, scrollMax);
-          scrollParent.scrollTo(0, scrollHeight);
+          const scrollHeight = Math.min(scrollMid, scrollMax)
+          scrollParent.scrollTo(0, scrollHeight)
         }
-      }, 0);
-      this.hasSetTableScroll = true;
+      }, 0)
+      this.hasSetTableScroll = true
     },
-    setNumberTransform () {
-      const numberItems = this.$refs.numberItem; // 拿到数字的ref，计算元素数量
-      const numberArr = this.orderNum.filter((item) => !isNaN(item));
+    setNumberTransform() {
+      const numberItems = this.$refs.numberItem // 拿到数字的ref，计算元素数量
+      const numberArr = this.orderNum.filter(item => !isNaN(item))
       // 结合CSS 对数字字符进行滚动,显示订单数量
       for (let index = 0; index < numberItems.length; index++) {
-        const elem = numberItems[index];
-        elem.style.transform = `translate(-50%, -${numberArr[index] * 10}%)`;
+        const elem = numberItems[index]
+        elem.style.transform = `translate(-50%, -${numberArr[index] * 10}%)`
       }
     },
 
-    toOrderNum (num) {
-      num = num.toString();
+    toOrderNum(num) {
+      num = num.toString()
       if (num.length < 6) {
-        num = "0" + num; // 如未满八位数，添加"0"补位
-        this.toOrderNum(num); // 递归添加"0"补位
+        num = '0' + num // 如未满八位数，添加"0"补位
+        this.toOrderNum(num) // 递归添加"0"补位
       } else if (num.length >= 6) {
-        this.orderNum = num.split(""); // 将其便变成数据，渲染至滚动数组
+        this.orderNum = num.split('') // 将其便变成数据，渲染至滚动数组
       } else {
         // 订单总量数字超过八位显示异常
-        this.$message.warning("总量数字过大");
+        this.$message.warning('总量数字过大')
       }
-      this.setNumberTransform();
+      this.setNumberTransform()
     },
-    exportHandler (refName, tableName) {
+    exportHandler(refName, tableName) {
       if (this.loading) {
-        return;
+        return
       }
-      const table = this.$refs[refName].$el.cloneNode(true);
-      const fileName = `${tableName}-${this.currentAirport}-${this.startDate}-${this.endDate}.xlsx`;
-      throttledExportToExcel(table, tableName, fileName, 2);
-    },
-  },
-};
+      const table = this.$refs[refName].$el.cloneNode(true)
+      const fileName = `${tableName}-${this.currentAirport}-${this.startDate}-${this.endDate}.xlsx`
+      throttledExportToExcel(table, tableName, fileName, 2)
+    }
+  }
+}
 </script>
 
-<style lang="scss" scoped>
+<style
+  lang="scss"
+  scoped
+>
 .terminal-form-wrap {
   padding-top: 11px;
   padding-left: 5px;
@@ -564,7 +713,7 @@ export default {
       optgroup,
       select,
       textarea {
-        font-family: Helvetica, "Microsoft YaHei";
+        font-family: Helvetica, 'Microsoft YaHei';
         font-size: 14px;
       }
       .el-switch__label {
@@ -670,7 +819,7 @@ export default {
       padding: 0;
       text-align: center;
       font-size: 14px;
-      font-family: Helvetica, "Microsoft YaHei";
+      font-family: Helvetica, 'Microsoft YaHei';
       letter-spacing: 0;
     }
     .cell-click {
@@ -704,7 +853,7 @@ export default {
         &.redBorder {
           position: relative;
           &::after {
-            content: "";
+            content: '';
             position: absolute;
             left: 0;
             bottom: 0;

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

@@ -8,8 +8,8 @@
 <template>
   <div class="baggage-view">
     <div
-      ref="basicInfo"
       class="part1"
+      :style="{ height: basicInfoHeight }"
     >
       <div class="title">
         <span>行李基本信息</span>
@@ -28,7 +28,10 @@
         </el-radio-group>
         <!-- <BackButton /> -->
       </div>
-      <div class="part1_info">
+      <div
+        v-show="basicInfoOpen"
+        class="part1_info"
+      >
         <el-row :gutter="12">
           <el-col
             v-for="(item, index) in baggageBasicInfoCols"
@@ -37,23 +40,30 @@
             :sm="6"
             :xs="6"
           >
-            <span class="label">{{ item.label }}：</span><span
+            <span class="label">{{ item.label }}：</span>
+            <span
               class="content"
               :class="{
-                'click':
-                  item.prop === 'compensationSign' &&
-                  baggageBasicInfo[item.prop],
+                click: item.prop === 'compensationSign' && baggageBasicInfo[item.prop]
               }"
               :title="formattedBaggageInfo(item.prop)"
               @click="baggageBasicInfoClickHandler(item.prop)"
-            >{{ formattedBaggageInfo(item.prop) }}</span>
+              >{{ formattedBaggageInfo(item.prop) }}</span
+            >
           </el-col>
         </el-row>
       </div>
+      <div
+        class="button-toggle"
+        @click="basicInfoToggle"
+      >
+        <i :class="basicInfoOpen ? 'el-icon-caret-top' : 'el-icon-caret-bottom'" />
+      </div>
     </div>
     <div
       v-show="infoBtn === infoRadios[0]"
       class="part2"
+      :style="{ height: trackListHeight }"
     >
       <div class="part2_info">
         <div class="title">行李跟踪信息</div>
@@ -104,20 +114,26 @@
           src="@/assets/baggage/ic_export.png"
           title="导出"
           @click="exportHandler('table', '行李节点列表')"
-        >
+        />
         <img
           class="btn-square btn-shadow"
           src="@/assets/baggage/ic_setting.png"
           title="列设置"
           @click="show"
-        >
+        />
+      </div>
+      <div
+        class="button-toggle"
+        @click="trackListToggle"
+      >
+        <i :class="trackListOpen ? 'el-icon-caret-top' : 'el-icon-caret-bottom'" />
       </div>
     </div>
     <div
       v-show="infoBtn == infoRadios[0]"
       class="part3"
       :style="{
-        'height': `calc(100vh - 80px - ${basicInfoHeight}px - 176px - 3 * 8px - 20px)`
+        height: `calc(100vh - 80px - ${basicInfoHeight} - ${trackListHeight} - 3 * 8px - 20px)`
       }"
     >
       <el-table
@@ -152,12 +168,11 @@
         </el-table-column>
       </el-table>
     </div>
-
     <div
       v-show="infoBtn === infoRadios[1]"
       class="part4"
       :style="{
-        'height': `calc(100vh - 80px - ${basicInfoHeight}px - 2 * 8px - 20px)`
+        height: `calc(100vh - 80px - ${basicInfoHeight} - 2 * 8px - 20px)`
       }"
     >
       <header class="head">
@@ -168,7 +183,7 @@
             src="@/assets/baggage/ic_export.png"
             title="导出"
             @click="exportMessageToExcel"
-          >
+          />
         </div>
       </header>
       <main class="main">
@@ -216,7 +231,7 @@
             :default-expand-all="true"
             :props="{
               label: 'name',
-              children: 'children',
+              children: 'children'
             }"
             :default-checked-keys="checkedKeysTemp"
             @check="handleCheck"
@@ -228,11 +243,13 @@
             class="r24"
             type="primary"
             @click="onCheck('baggageTableData')"
-          >确定</el-button>
+            >确定</el-button
+          >
           <el-button
             size="medium"
             @click="hide"
-          >取消</el-button>
+            >取消</el-button
+          >
         </div>
       </div>
     </Dialog>
@@ -262,7 +279,6 @@ export default {
       queryData: {},
       airlineList: [],
       selectedAirline: '',
-      basicInfoHeight: 0,
       debounceTime: 300,
       baggageBasicInfoCols: [
         {
@@ -395,7 +411,9 @@ export default {
       spanArr: [],
       pos: 0,
       queryLoop: null,
-      queryTrackLoop: null
+      queryTrackLoop: null,
+      basicInfoOpen: true,
+      trackListOpen: false
     }
   },
   computed: {
@@ -437,13 +455,19 @@ export default {
             case 'expressSign':
             case 'brokenSign':
             case 'complaintSign':
-            // case 'compensationSign':
+              // case 'compensationSign':
               return Number(value) === 1 || value === 'Y' ? '是' : '否'
             default:
               return value
           }
         }
       }
+    },
+    basicInfoHeight() {
+      return this.basicInfoOpen ? '220px' : '68px'
+    },
+    trackListHeight() {
+      return this.trackListOpen ? '176px' : '81px'
     }
   },
   watch: {
@@ -491,8 +515,13 @@ export default {
     window.removeEventListener('resize', this.debouncedResizeHandler)
   },
   methods: {
+    basicInfoToggle() {
+      this.basicInfoOpen = !this.basicInfoOpen
+    },
+    trackListToggle() {
+      this.trackListOpen = !this.trackListOpen
+    },
     resizeHandler() {
-      this.basicInfoHeight = this.$refs['basicInfo'].offsetHeight
       this.$refs['table']?.doLayout()
     },
     baggageBasicInfoClickHandler(prop) {
@@ -847,9 +876,7 @@ export default {
         }))
         if (this.airlineList.length) {
           let currentIndex = this.airlineList.findIndex(
-            ({ flightNO, flightDate }) =>
-              flightNO === queryData.flightNO &&
-              flightDate === queryData.flightDate
+            ({ flightNO, flightDate }) => flightNO === queryData.flightNO && flightDate === queryData.flightDate
           )
           currentIndex = currentIndex > -1 ? currentIndex : 0
           this.selectedAirline = this.airlineList[currentIndex].value
@@ -917,7 +944,10 @@ export default {
   }
 }
 </script>
-<style lang="scss" scoped>
+<style
+  lang="scss"
+  scoped
+>
 .baggage-view {
   width: 100%;
   height: calc(100vh - 80px);
@@ -929,6 +959,8 @@ export default {
     // height: 232px;
     background: #041741;
     padding: 16px 30px;
+    overflow: hidden;
+    position: relative;
     ::v-deep .title {
       font-size: 18px;
       font-weight: bold;
@@ -986,11 +1018,13 @@ export default {
     margin: 8px 0;
     width: 100%;
     padding: 24px 30px 28px;
+    overflow: hidden;
     background: #ffffff;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: flex-start;
+    position: relative;
     .part2_info {
       flex: 1;
       display: flex;
@@ -1199,10 +1233,26 @@ export default {
       width: 30px;
     }
   }
+  .button-toggle {
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 20px;
+    height: 15px;
+    border-radius: 4px;
+    background-color: #2d67e3;
+    color: #ffffff;
+    cursor: pointer;
+    text-align: center;
+  }
 }
 </style>
 
-<style scoped lang="scss">
+<style
+  scoped
+  lang="scss"
+>
 ::v-deep .baggage-view {
   .el-popover {
     &.popover-dark {

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

@@ -726,7 +726,7 @@ export default {
     }
   },
   computed: {
-    ...mapGetters(['clickedCells']),
+    ...mapGetters(['clickedCells', 'savedTableFilterValuesMap']),
     fasterFilteredTableData() {
       const [key, value] = this.selectedFilter
       if (!key) {
@@ -872,6 +872,15 @@ export default {
         path,
         query: newQuery
       })
+    },
+    filterValues: {
+      handler(val) {
+        this.$store.dispatch('savedSettings/saveTableFilterValues', {
+          filterValues: val,
+          tableName: 'flightBaggage'
+        })
+      },
+      deep: true
     }
   },
   created() {
@@ -887,10 +896,11 @@ export default {
     } else {
       this.$router.push('/')
     }
+    const filterValues = this.savedTableFilterValuesMap[this.$route.name + '/flightBaggage']
     Object.values(this.tableCols).forEach(({ prop, filterable, sortable }) => {
       if (filterable) {
         this.$set(this.flightBaggageTableFilters, prop, [])
-        this.$set(this.filterValues, prop, [])
+        this.$set(this.filterValues, prop, filterValues?.[prop] ?? [])
       }
       if (sortable) {
         this.$set(this.tableDataSortRules, prop, '')

src/views/baggageManagement/mixins/tableCols.js

@@ -7,11 +7,14 @@
  * have a nice day!
  */
 
+import { mapGetters } from 'vuex'
+
 export default {
   data() {
     return {
       // 筛选后表头
       tableColsCopy: [],
+      tableColumnKeys: [],
       // 列设置弹框选中
       checkedKeys: [],
       checkedKeysTemp: [],
@@ -30,6 +33,7 @@ export default {
     })
   },
   computed: {
+    ...mapGetters(['savedHiddenColumnKeysMap']),
     colsCheckClass() {
       return this.tableCols.some(col => col.children?.length) ? 'has-children' : 'no-children'
     }
@@ -37,18 +41,30 @@ export default {
   methods: {
     // 列设置-初始化
     initTableCols() {
+      const hiddenColumnKeys = this.savedHiddenColumnKeysMap[this.$route.name]
       const that = this
+      let i = 0
       function setTableCols(cols) {
+        let anyChecked = false
         for (const col of cols) {
-          col.index = that.checkedKeys.length
-          that.checkedKeys.push(that.checkedKeys.length)
+          let childrenChecked = false
+          col.index = i++
+          that.tableColumnKeys.push(col.index)
           if (col.children?.length) {
-            setTableCols(col.children)
+            childrenChecked = setTableCols(col.children)
+          }
+          if (childrenChecked) {
+            that.halfCheckedKeys.push(col.index)
+            anyChecked = true
+          } else if (!hiddenColumnKeys || !hiddenColumnKeys.includes(col.index)) {
+            that.checkedKeys.push(col.index)
+            anyChecked = true
           }
         }
+        return anyChecked
       }
       setTableCols(this.tableCols)
-      this.tableColsCopy = this._.cloneDeep(this.tableCols)
+      this.tableColsCopy = this.colsFilter(this._.cloneDeep(this.tableCols))
       this.checkedKeysTemp = [...this.checkedKeys]
     },
     // 列设置-确定
@@ -66,6 +82,12 @@ export default {
       this.dialogFlag = false
       this.checkedKeys = [...this.checkedKeysTemp]
       this.tableColsCopy = this.colsFilter(this._.cloneDeep(this.tableCols))
+      const hiddenColumnKeys = this.tableColumnKeys.filter(
+        key => !this.checkedKeys.includes(key) && !this.halfCheckedKeys.includes(key)
+      )
+      this.$store.dispatch('savedSettings/saveHiddenColumnKeys', {
+        keys: hiddenColumnKeys
+      })
       setTimeout(() => {
         if (!this[tableDataName].length) {
           this[tableDataName] = tableDataTemp

src/views/baggageManagement/mixins/terminal.js

@@ -40,7 +40,7 @@ export default {
     window.removeEventListener('resize', this.debouncedResizeHandler)
   },
   computed: {
-    ...mapGetters(['clickedCells']),
+    ...mapGetters(['clickedCells', 'savedTableFilterValuesMap']),
     dealedTableData() {
       const filtered = this.tableData.filter(item => {
         let flag = true
@@ -88,6 +88,14 @@ export default {
         })
       },
       deep: true
+    },
+    filterValues: {
+      handler(val) {
+        this.$store.dispatch('savedSettings/saveTableFilterValues', {
+          filterValues: val
+        })
+      },
+      deep: true
     }
   },
   methods: {
@@ -101,6 +109,7 @@ export default {
     },
     // 设置筛选和排序
     setFilterAndSort(tableCols) {
+      const filterValues = this.savedTableFilterValuesMap[this.$route.name]
       const self = this
       Object.values(tableCols).forEach(({ prop, filterable, sortable, children }) => {
         if (children) {
@@ -108,7 +117,7 @@ export default {
         } else {
           if (filterable) {
             self.$set(self.tableDataFilters, prop, [])
-            self.$set(self.filterValues, prop, [])
+            self.$set(self.filterValues, prop, filterValues?.[prop] ?? [])
           }
           if (sortable) {
             self.$set(self.tableDataSortRules, prop, '')