修改

src/components/tableChild/index.vue

@@ -0,0 +1,309 @@
+<template>
+  <!--表格-->
+  <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>
+          </template>
+        </el-table-column>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+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 TableHeaderCell from "@/components/TableHeaderCell";
+import { setTableFilters } from "@/utils/table";
+
+export default {
+  name: "DepartureTerminalView",
+  components: { TimeZoneSelector, TableHeaderCell },
+  mixins: [terminalMixin, formMixin, tableColsMixin, timeZoneMixin],
+  data () {
+    return {
+      orderNum: ["0", "0", "0", "0", "0", "0"], // 默认总数
+      popoverVisible: false,
+      // 初始表头
+      tableCols: [
+        {
+          prop: "flightInfo",
+          label: "航班信息",
+          width: 185,
+          fixed: "left",
+          children: [
+            {
+              prop: "flightNO",
+              label: "航班号",
+              desc: "指航班编号",
+              width: 80,
+              filterable: true,
+              sortable: true,
+            },
+            {
+              prop: "flightDate",
+              label: "执飞日期",
+              desc: "指航班计划起飞日期（不变的，机票上），不是预计起飞日期（预计起飞时间可能多个），也不是实际起飞日期（实际起飞等于最后预计）",
+              width: 105,
+              filterable: true,
+              sortable: true,
+            },
+            {
+              prop: "arrivalTime",
+              label: "降落时间",
+              desc: "根据优先级别显示时间。优先级别：1.实际降落时间，2.预计降落时间，3.计划降落时间",
+              width: 150,
+              filterable: true,
+              sortable: true,
+            },
+            {
+              prop: "departureAirport",
+              label: "起飞航站",
+              desc: "指航班执飞航段的起飞航站，以航站三字码显示",
+              width: 85,
+              filterable: true,
+              sortable: true,
+            },
+            {
+              prop: "arrivalTerminal",
+              label: "到达航站楼",
+              desc: "指航班执飞航段的目的航站的航站楼代码",
+              width: 100,
+              filterable: true,
+              sortable: true,
+            },
+            {
+              prop: "luggageCarousel",
+              label: "行李转盘",
+              desc: "指航班进港，旅客提取行李转盘的代码",
+              width: 85,
+              filterable: true,
+              sortable: true,
+            },
+            {
+              prop: "parkingSpace",
+              label: "停机位",
+              desc: "指航班的停机位代码，数据是变化的，仅显示最新信息",
+              filterable: true,
+              sortable: true,
+            },
+          ],
+        },
+        {
+          prop: "originAirportBaggageInfo",
+          label: "始飞站行李信息",
+          children: [
+            {
+              prop: "checkIns",
+              label: "值机",
+              desc: "指已办理值机托运的行李数量，含取消托运的行李数量，含未激活",
+            },
+            {
+              prop: "projectedLoad",
+              label: "预计装载",
+              desc: "指已办理值机托运的行李数量，不含取消托运的行李数量，不包含未激活",
+            },
+            {
+              prop: "loadedQuantity",
+              label: "已装载",
+              desc: "指实际装机完成的行李数量，不包含取消托运的行李数量",
+            },
+          ],
+        },
+        {
+          prop: "arrvivalBaggageInfo",
+          label: "到达行李信息",
+          children: [
+            {
+              prop: "numberOfDestinationArrivals",
+              label: "到达",
+              desc: "指行李到达提取转盘的行李数量，数据是变化的，仅显示最新信息",
+            },
+            {
+              prop: "endPointNotReached",
+              label: "未到达",
+              desc: "指行李仍未到达提取转盘的行李数量，数据是变化的，仅显示最新信息",
+            },
+            {
+              prop: "specialQuantity",
+              label: "特殊",
+              desc: "指非正常行李的数量，包括（装笼动物、乘务员行李、易碎行李、VIP 行李等），参考 BSM 报文.E 项",
+              width: 65,
+            },
+            {
+              prop: "numberOfClaims",
+              label: "理赔",
+              desc: "指航班收到旅客申请理赔的行李数量",
+              width: 65,
+            },
+          ],
+        },
+        {
+          prop: "uninstallInfo",
+          label: "卸载状态",
+          children: [
+            {
+              prop: "uninstalled",
+              label: "已卸载",
+              desc: "指卸机的行李数量，数据是变化的，仅显示最新信息",
+            },
+            {
+              prop: "numberToBeUninstalled",
+              label: "待卸载",
+              desc: "指仍未卸机的行李数量，数据是变化的，仅显示最新信息",
+            },
+          ],
+        },
+        {
+          prop: "terminationdBaggageInfo",
+          label: "终止行李",
+          children: [
+            {
+              prop: "terminateArrivalQuantity",
+              label: "到达",
+              desc: "指旅客已到达目的站的行李数量，数据是变化的，仅显示最新信息",
+            },
+            {
+              prop: "terminateUnreachedQuantity",
+              label: "未到达",
+              desc: "指未到达目的站的行李数量，数据是变化的，仅显示最新信息",
+            },
+          ],
+        },
+        {
+          prop: "transferBaggageInfo",
+          label: "转运行李",
+          children: [
+            {
+              prop: "quantityShipped",
+              label: "已转运",
+              desc: "指当前航班中转出的行李已完成转运的行李数量，数据是变化的，仅显示最新信息",
+            },
+            {
+              prop: "undeliveredQuantity",
+              label: "未转运",
+              desc: "指当前航班中转出的行李未完成转运的行李数量，数据是变化的，仅显示最新信息",
+            },
+          ],
+        },
+        {
+          prop: "baggageDistributionInfo",
+          label: "行李分布",
+          children: [
+            {
+              prop: "numberOfContainers",
+              label: "容器",
+              desc: "指当前航班使用容器装载的行李数量，数据是变化的，仅显示最新信息",
+            },
+            {
+              prop: "numberOfBulk",
+              label: "散装",
+              desc: "指当前航班没有使用容器装载的行李数量，数据是变化的，仅显示最新信息",
+              width: 65,
+            },
+          ],
+        },
+      ],
+      tableDataSortRules: {
+        flightCanceled: "ascending",
+      },
+      loading: false,
+      AirportList: [],
+      loopEvent: null,
+      arrivalCount: 0,
+      baggageCount: 0,
+      hasSetTableScroll: false,
+      table: null,
+    };
+  },
+  computed: {
+    singleDay () {
+      return this.startDate === this.endDate;
+    },
+  },
+  methods: {
+    tableRowClassName ({ row, rowIndex }) {
+      const classes = [];
+      if (row.flightStatus === "DLY") {
+        classes.push("bgl-delayed");
+      }
+      if (row.flightStatus === "CAN") {
+        classes.push("bgl-canceled");
+      }
+      if (row.hasArrived) {
+        classes.push("bgl-hui");
+        if (rowIndex === this.arrivalCount - 1) {
+          classes.push("redBorder");
+        }
+      }
+      return classes.join(" ");
+    },
+    headerCellClass ({ row, column }) {
+      const classes = [];
+      const rule = this.tableDataSortRules[column.property];
+      if (rule) {
+        classes.push(rule);
+      }
+      return classes.join(" ");
+    },
+    initTableData (tableData) {
+      this.arrivalCount = 0;
+      this.baggageCount = 0;
+      tableData.forEach((item) => {
+        item["flightCanceled"] = item["flightStatus"] === "CAN" ? 1 : 0;
+        if (this.hasArrived(item)) {
+          this.arrivalCount++;
+        }
+        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();
+      });
+    },
+    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 () {
+      if (!this.singleDay || this.hasSetTableScroll || this.arrivalCount === 0) {
+        return;
+      }
+      const table = this.$refs["table"].$el;
+      const scrollParent = table.querySelector(".el-table__body-wrapper");
+      if (scrollParent.scrollHeight <= scrollParent.offsetHeight) {
+        return;
+      }
+      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;
+        if (scrollMid > 0) {
+          const scrollHeight = Math.min(scrollMid, scrollMax);
+          scrollParent.scrollTo(0, scrollHeight);
+        }
+      }, 0);
+      this.hasSetTableScroll = true;
+    },
+  },
+};
+</script>
+
+<style>
+</style>

src/components/tableChild/mixins/form.js

@@ -0,0 +1,272 @@
+/*
+ * @Author: Badguy
+ * @Date: 2022-03-04 14:45:03
+ * @LastEditTime: 2022-06-16 10:51:52
+ * @LastEditors: your name
+ * @Description: 航站视图通用表单部分
+ * have a nice day!
+ */
+
+import { parseTime } from '@/utils'
+// const defaultStartTime = new Date(new Date(new Date().toLocaleDateString()).getTime())
+// const defaultEndTime = new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1)
+const defaultDate = parseTime(new Date(), '{y}-{m}-{d}')
+const dateValidator = (rule, value, callback) => {
+  if (value && value[0] && value[1]) {
+    callback()
+  } else {
+    callback(new Error('请选择航班日期'))
+  }
+}
+
+export default {
+  data () {
+    return {
+      formData: {
+        // 搜索表单数据
+        currentAirport: [],
+        relatedAirport: [],
+        inboundCarrier: [],
+        outgoingAirline: [],
+        craftType: [],
+        flightAttr: [],
+        flightDate: [defaultDate, defaultDate],
+        // startDate: defaultDate,
+        // endDate: defaultDate,
+        search: ''
+      },
+      dateRangePickerOptions: {
+        onPick: this.dateRangePickHandler,
+        disabledDate: this.dateRangeDisabled
+      },
+      currentAirportList: [],
+      relatedAirportList: [],
+      carrierList: [],
+      craftTypeList: [],
+      flightAttrList: [],
+      currentAirportProps: {
+        // multiple: true,
+        checkStrictly: true,
+        expandTrigger: 'hover',
+        value: 'code3',
+        label: 'name',
+        children: 'builds'
+      },
+      relatedAirportProps: {
+        multiple: true,
+        value: 'code3',
+        label: 'name'
+      },
+      carrierProps: {
+        multiple: true,
+        value: 'code2',
+        label: 'name'
+      },
+      craftTypeProps: {
+        multiple: true,
+        value: 'code3',
+        label: 'name'
+      },
+      flightAttrProps: {
+        multiple: true,
+        value: 'code',
+        label: 'name'
+      },
+      // 表单规则
+      rules: {
+        currentAirport: [{ required: true, message: '请选择当前机场', trigger: ['change', 'blur'] }],
+        // startDate: [{ required: true, message: '请选择开始时间', trigger: 'change' }],
+        // endDate: [{ required: true, message: '请选择结束时间', trigger: 'change' }]
+        flightDate: [{ validator: dateValidator, trigger: ['change', 'blur'] }]
+      }
+    }
+  },
+  computed: {
+    currentAirport () {
+      return this.getSingleData(this.formData.currentAirport)
+    },
+    relatedAirport () {
+      return this.formData.relatedAirport.map(item => item[0])
+    },
+    inboundCarrier () {
+      return this.formData.inboundCarrier.map(item => item[0])
+    },
+    outgoingAirline () {
+      return this.formData.outgoingAirline.map(item => item[0])
+    },
+    craftType () {
+      return this.formData.craftType.map(item => item[0])
+    },
+    flightAttr () {
+      return this.formData.flightAttr.map(item => item[0])
+    },
+    startDate () {
+      // return parseTime(this.formData.startDate).split(' ')[0]
+      // return this.formData.startDate
+      return this.formData.flightDate[0]
+    },
+    endDate () {
+      // return parseTime(this.formData.endDate).split(' ')[0]
+      // return this.formData.endDate
+      return this.formData.flightDate[1]
+    }
+  },
+  watch: {
+    'formData.flightDate': {
+      handler (val) {
+
+        if (val === null) {
+          this.formData.flightDate = ['', '']
+        }
+      },
+      deep: true
+    }
+  },
+  methods: {
+    dateRangePickHandler ({ maxDate, minDate }) {
+      if (!maxDate) {
+        this.pickedDate = minDate
+      } else {
+        this.pickedDate = null
+      }
+    },
+    dateRangeDisabled (date) {
+      return this.pickedDate ? Math.abs(date - this.pickedDate) > 2 * 24 * 60 * 60 * 1000 : false
+    },
+    // 机场数据处理（多选）
+    getMultipleData (arr) {
+      const newArr = []
+      arr.length &&
+        arr.forEach(airport => {
+          const temp = this._.cloneDeep(this.currentAirportList.find(airport1 => airport1.code3 === airport[0]))
+          if (temp) {
+            temp.builds = airport[1] ? [{ name: airport[1] }] : []
+            const item = newArr.find(item => item.code3 === temp.code3)
+            if (item) {
+              item.builds.push(...temp.builds)
+            } else {
+              newArr.push(temp)
+            }
+          }
+        })
+      return newArr
+    },
+    // 机场数据处理（单选）
+    getSingleData (arr) {
+      const newArr = []
+      if (arr.length > 0) {
+        const temp = this._.cloneDeep(this.currentAirportList.find(airport1 => airport1.code3 === arr[0]))
+        if (temp) {
+          temp.builds = arr[1] ? [{ name: arr[1] }] : []
+          newArr.push(temp)
+        }
+      }
+      return newArr
+    },
+    // 清除表单数据
+    formClear (range) {
+      if (range === 'all') {
+        this.formData.currentAirport = []
+        this.currentAirportList = []
+      }
+      this.formData.relatedAirport = []
+      this.relatedAirportList = []
+      this.formData.inboundCarrier = []
+      this.formData.outgoingAirline = []
+      this.carrierList = []
+      this.formData.craftType = []
+      this.craftTypeList = []
+      this.formData.flightAttr = []
+      this.flightAttrList = []
+    },
+    // 当前机场变更
+    setCurrentAirport (data) {
+      this.formClear()
+      if (data.length === 0) {
+        return
+      }
+      const params = {
+        currentAirport: this.currentAirport,
+        startDate: this.startDate,
+        endDate: this.endDate
+      }
+      this.getFormData(params)
+    },
+    // 日期限制
+    // startDateChangeHandler(val) {
+    //   if (!val || !this.endDate) {
+    //     return
+    //   }
+    //   const startDate = new Date(val)
+    //   const endDate = new Date(this.endDate)
+    //   if (startDate > endDate) {
+    //     this.formData.endDate = ''
+    //     this.$message.info('结束时间不能早于开始时间，请重新选择')
+    //   } else if (endDate - startDate > 2 * 24 * 60 * 60 * 1000) {
+    //     this.formData.endDate = ''
+    //     this.$message.info('时间跨度不能超过三天，请重新选择')
+    //   } else {
+    //     this.getTableData()
+    //   }
+    // },
+    // endDateChangeHandler(val) {
+    //   if (!val || !this.startDate) {
+    //     return
+    //   }
+    //   const startDate = new Date(this.startDate)
+    //   const endDate = new Date(val)
+    //   if (startDate > endDate) {
+    //     this.formData.startDate = ''
+    //     this.$message.info('开始时间不能晚于结束时间，请重新选择')
+    //   } else if (endDate - startDate > 2 * 24 * 60 * 60 * 1000) {
+    //     this.formData.startDate = ''
+    //     this.$message.info('时间跨度不能超过三天，请重新选择')
+    //   } else {
+    //     this.getTableData()
+    //   }
+    // },
+    // 搜索
+    onSubmit (data) {
+      this.$refs['form'].validate(valid => {
+        if (valid) {
+          const az = /^[a-zA-Z]+$/
+          const azNum = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]*$/
+          // const top2 = /^[a-zA-Z]{2}\w*$/
+          const top2 = /^([a-zA-Z][0-9])|([0-9][a-zA-Z])|([a-zA-Z]{2})/
+          const num = /^[0-9]+$/
+          const bagNo = /^[a-zA-Z]{2}[0-9]{6}$/
+          const queryData = {
+            startDate: this.startDate,
+            endDate: this.endDate
+          }
+          if (Number(data) === 1) {
+            queryData['destination'] = this.formData.currentAirport
+          } else {
+            queryData['departureStation'] = this.formData.currentAirport
+          }
+          if (az.test(this.formData.search)) {
+            // 纯字母则为旅客姓名
+            queryData['passengerName'] = this.formData.search
+          } else if (azNum.test(this.formData.search) && top2.test(this.formData.search)&&this.formData.search.length <8) {
+            // 字母加数字且前两位为字母则为航班号
+            queryData['flightNO'] = this.formData.search
+          } else if ((num.test(this.formData.search) && this.formData.search.length === 10)||((bagNo.test(this.formData.search)&&this.formData.search.length >7))) {
+            // 纯数字且位数等于10则为行李牌号
+            queryData['baggageNO'] = this.formData.search
+          } else {
+            // this.$message.error('请输入有效查询信息如航班号、旅客姓名首字母、行李牌号')
+          }
+          this.$router.push({
+            path: '/advance',
+            query: {
+              ...queryData,
+              singleJump: true
+            }
+          })
+        } else {
+          return false
+        }
+      })
+    }
+  }
+}

src/components/tableChild/mixins/tableCols.js

@@ -0,0 +1,98 @@
+/*
+ * @Author: Badguy
+ * @Date: 2022-03-04 11:50:22
+ * @LastEditTime: 2022-03-15 17:56:34
+ * @LastEditors: your name
+ * @Description: 航站视图表格通用部分
+ * have a nice day!
+ */
+
+export default {
+  data() {
+    return {
+      // 筛选后表头
+      tableColsCopy: [],
+      // 列设置弹框选中
+      checkedKeys: [],
+      checkedKeysTemp: [],
+      halfCheckedKeys: [],
+      // 列设置弹框开关
+      dialogFlag: false
+    }
+  },
+  created() {
+    this.initTableCols()
+  },
+  updated() {
+    // table数据更新
+    this.$nextTick(() => {
+      this.$refs.table?.doLayout()
+    })
+  },
+  computed: {
+    colsCheckClass() {
+      return this.tableCols.some(col => col.children?.length) ? 'has-children' : 'no-children'
+    }
+  },
+  methods: {
+    // 列设置-初始化
+    initTableCols() {
+      const that = this
+      function setTableCols(cols) {
+        for (const col of cols) {
+          col.index = that.checkedKeys.length
+          that.checkedKeys.push(that.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(tableDataName = 'tableData') {
+      if (this.dialogFlag === false) {
+        return
+      }
+      this.loading = true
+      const tableDataTemp = this._.cloneDeep(this[tableDataName])
+      this[tableDataName] = []
+      this.dialogFlag = false
+      this.checkedKeys = [...this.checkedKeysTemp]
+      this.tableColsCopy = this.colsFilter(this._.cloneDeep(this.tableCols))
+      setTimeout(() => {
+        if (!this[tableDataName].length) {
+          this[tableDataName] = tableDataTemp
+        }
+        this.loading = false
+      }, 500)
+    },
+    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/components/tableChild/mixins/terminal.js

@@ -0,0 +1,420 @@
+/*
+ * @Author: Badguy
+ * @Date: 2022-03-04 11:41:55
+ * @LastEditTime: 2022-08-26 15:32:54
+ * @LastEditors: your name
+ * @Description: 航站视图通用部分
+ * have a nice day!
+ */
+
+import { mapGetters } from 'vuex'
+import { commonTableCellClass } from '@/utils/table'
+
+export default {
+  data() {
+    return {
+      // 表格数据
+      tableData: [],
+      tableDataFilters: {},
+      filterValues: {},
+      tableDataSortRules: {},
+      spanArr: [],
+      pos: 0,
+      loading: false,
+      computedTableHeight: undefined,
+      debounceTime: 300
+    }
+  },
+  created() {
+    this.setFilterAndSort(this.tableCols)
+  },
+  updated() {
+    this.resizeHandler()
+  },
+  activated() {
+    this.resizeHandler()
+    this.debouncedResizeHandler = this._.debounce(this.resizeHandler, this.debounceTime)
+    window.addEventListener('resize', this.debouncedResizeHandler)
+  },
+  deactivated() {
+    window.removeEventListener('resize', this.debouncedResizeHandler)
+  },
+  computed: {
+    ...mapGetters(['clickedCells']),
+    dealedTableData() {
+      const filtered = this.tableData.filter(item => {
+        let flag = true
+        Object.entries(this.filterValues).forEach(([key, arr]) => {
+          if (arr.length && !arr.includes(String(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: {
+    // 设置表格高度
+    resizeHandler() {
+      const headerHeight = 80
+      const bottomBlankHeight = 41
+      const formWrapHeight = this.$refs['formWrap'].offsetHeight
+      this.computedTableHeight = `calc(100vh - ${headerHeight + bottomBlankHeight + formWrapHeight}px)`
+      this.$refs.table?.doLayout()
+    },
+    // 设置筛选和排序
+    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 = []
+      if (columns.length > 0) {
+        columns.forEach((column, index) => {
+          if (index === 0) {
+            sums[index] = '合计'
+          } else if (index === 1) {
+            sums[index] = '航班数：' + this.tableData.length
+          } else if (
+            // 需要计算的列
+            [
+              'passagernum',
+              'checkNumber',
+              'not_actived',
+              'expect_load',
+              'security_all',
+              'sortNumber',
+              'loadNumber',
+              'boardID',
+              'toUnload',
+              'OFFCount',
+              'delbag',
+              'noBSM',
+              'reach',
+              'did_not_arrive',
+              'special',
+              'claim',
+              'uninstalled',
+              'terminateArrive',
+              'terminatedNotArrived',
+              'delivered',
+              'not_shipped',
+              'container',
+              'bulk',
+              'checkInTravellerNumber',
+              'checkInNumber',
+              'unActive',
+              'preLoad',
+              'noCheckInNumber',
+              'midIn',
+              'checkIns',
+              'projectedLoad',
+              'loadedQuantity',
+              'numberOfDestinationArrivals',
+              'endPointNotReached',
+              'specialQuantity',
+              'numberOfClaims',
+              'numberToBeUninstalled',
+              'terminateArrivalQuantity',
+              'terminateUnreachedQuantity',
+              'quantityShipped',
+              'undeliveredQuantity',
+              'numberOfContainers',
+              'numberOfBulk',
+              'inTransferBaggageCount',
+              'inTransferredBaggageCount',
+              'outTransferBaggageCount',
+              'outTransferredBaggageCount',
+              'exceptions',
+              'warning'
+            ].includes(column.property)
+          ) {
+            const values = data.map(item => Number(item[column.property]))
+            if (values.some(value => !isNaN(value))) {
+              sums[index] = values.reduce((prev, curr) => {
+                const value = Number(curr)
+                if (!isNaN(value)) {
+                  return Number(prev) + Number(curr)
+                } else {
+                  return Number(prev)
+                }
+              }, 0)
+            } else {
+              sums[index] = 0
+            }
+          } else {
+            // 过滤某些字段不参与计算
+            sums[index] = '-'
+          }
+        })
+      }
+      return sums
+    },
+    cellClass({ row, column, rowIndex, columnIndex }) {
+      const classes = commonTableCellClass({
+        row,
+        column,
+        rowIndex,
+        columnIndex
+      })
+      if (
+        [
+          'flightNO',
+          'preFlightNO',
+          'inTransferBaggageCount',
+          'inTransferredBaggageCount',
+          'outTransferBaggageCount',
+          'outTransferredBaggageCount',
+          'toUnload',
+          'OFFCount',
+          'checkInNumber',
+          'unActive',
+          'preLoad',
+          'warning',
+          'midIn',
+          'noCheckInNumber',
+          'checkNumber',
+          'sortNumber',
+          'loadNumber',
+          'boardID',
+          'checkIns',
+          'terminateArrivalQuantity',
+          'projectedLoad',
+          'loadedQuantity',
+          'numberOfDestinationArrivals',
+          'uninstalled',
+          'numberOfContainers',
+          'numberOfBulk',
+          'noBSM'
+        ].includes(column.property) &&
+        row[column.property]
+      ) {
+        classes.push('cell-click')
+        if (
+          this.clickedCells.some(
+            cell =>
+              cell.pageName === this.$route.name &&
+              Object.entries(cell.row).every(([key, value]) => row[key] === value) &&
+              cell.columnProp === column.property
+          )
+        ) {
+          classes.push('cell-clicked')
+        }
+      }
+      if (column.property === 'toUnload' && row[column.property]) {
+        classes.push('cell-toUnload')
+      }
+      if (column.property === 'warning' && row['warningState'] && row['warningState'] == 2) {
+        classes.push('cell-toUnload')
+      }
+      if (column.property === 'warning' && row['warningState'] && row['warningState'] == 1) {
+        classes.push('cell-toUnloadNew')
+      }
+      if (column.property === 'outTransferredBaggageCount' && row['warningState'] && row['warningState'] == 2) {
+        classes.push('cell-toUnload')
+      }
+      if (column.property === 'outTransferredBaggageCount' && row['warningState'] && row['warningState'] == 1) {
+        classes.push('cell-toUnloadNew')
+      }
+      if (column.property === 'outTransferBaggageCount' && row['sharpSign']) {
+        classes.push('cell-toUnloadNew')
+      }
+      if (column.property === 'inTransferredBaggageCount' && row['warningState'] && row['warningState'] == 2) {
+        classes.push('cell-toUnload')
+      }
+      if (column.property === 'inTransferredBaggageCount' && row['warningState'] && row['warningState'] == 1) {
+        classes.push('cell-toUnloadNew')
+      }
+      if (column.property === 'inTransferBaggageCount' && row['sharpSign']) {
+        classes.push('cell-toUnloadNew')
+      }
+      return classes.join(' ')
+    },
+    cellClickHandler(row, column, cell, event) {
+      if (
+        [
+          'flightNO',
+          'preFlightNO',
+          'inTransferBaggageCount',
+          'inTransferredBaggageCount',
+          'outTransferBaggageCount',
+          'outTransferredBaggageCount',
+          'toUnload',
+          'OFFCount',
+          'checkInNumber',
+          'unActive',
+          'preLoad',
+          'warning',
+          'midIn',
+          'noCheckInNumber',
+          'checkNumber',
+          'sortNumber',
+          'loadNumber',
+          'boardID',
+          'checkIns',
+          'terminateArrivalQuantity',
+          'projectedLoad',
+          'loadedQuantity',
+          'numberOfDestinationArrivals',
+          'uninstalled',
+          'numberOfContainers',
+          'numberOfBulk',
+          'noBSM'
+        ].includes(column.property) &&
+        row[column.property]
+      ) {
+        this.$store.dispatch('keepAlive/addClickedCell', {
+          row,
+          columnProp: column.property,
+          pageName: this.$route.name
+        })
+        const path = `${this.$route.path}/flightView`
+        const query = {}
+        switch (column.property) {
+          case 'flightNO':
+            Object.assign(query, {
+              flightNO: row.flightNO,
+              flightDate: row.flightDate
+            })
+            break
+          case 'preFlightNO':
+            Object.assign(query, {
+              flightNO: row.preFlightNO,
+              flightDate: row.preFlightDate
+            })
+            break
+          case 'inTransferBaggageCount':
+          case 'outTransferBaggageCount':
+            Object.assign(query, {
+              flightNO: row.preFlightNO,
+              flightDate: row.preFlightDate,
+              fastFilter: `transferFlightNO,${row.flightNO}`
+            })
+            break
+          case 'inTransferredBaggageCount':
+          case 'outTransferredBaggageCount':
+            Object.assign(query, {
+              flightNO: row.flightNO,
+              flightDate: row.flightDate,
+              fastFilter: `inFlightNO,${row.preFlightNO}`
+            })
+            break
+          case 'warning':
+            Object.assign(query, {
+              flightNO: row.flightNO,
+              flightDate: row.flightDate,
+              fastFilter: row['warningState'] === 1 ? 'warning' : 'alarm'
+            })
+            break
+          default: {
+            const reflect = {
+              toUnload: 'toUnload', // 装车或装机后，isDEL为'DEL'，waitOFF为1
+              OFFCount: 'unloaded', // 装车或装机后，isDEL为'DEL'，waitOFF为0
+              unActive: 'unActive', // STATUS为'I'
+              preLoad: 'preLoad', // STATUS不为'I'，isDEL不为'del'
+              projectedLoad: 'preLoad',
+              midIn: 'inFlightNO',
+              noCheckInNumber: 'canceled', // isDEL为'DEL'
+              noBSM: 'NOBSM', // 1/0
+              checkInNumber: 'checkInTime',
+              checkNumber: 'securityTime',
+              sortNumber: 'sortTime',
+              loadNumber: 'loadTime',
+              boardID: 'inflTime',
+              checkIns: 'checkInTime',
+              numberOfDestinationArrivals: 'arrivedID', // 1/0
+              uninstalled: 'unloadID', // 1/0
+              loadedQuantity: 'loaded', // 'loadTime'不为空，isDEL不为'DEL'
+              terminateArrivalQuantity: 'destination', // 'arrivedID'为1，transferFlightNO为null
+              numberOfContainers: 'inContainer', // 有容器ID
+              numberOfBulk: 'FBULK' // 容器ID为'FBULK'
+            }
+            Object.assign(query, {
+              flightNO: row.flightNO,
+              flightDate: row.flightDate,
+              fastFilter: reflect[column.property]
+            })
+            break
+          }
+        }
+        switch (this.$route.path.split('/').at(-1)) {
+          case 'departure':
+            Object.assign(query, {
+              departureAirport: this.formData.currentAirport ?? '',
+              landingAirport: row.targetAirport ?? ''
+            })
+            break
+          case 'arrival':
+            Object.assign(query, {
+              departureAirport: row.departureAirport ?? '',
+              landingAirport: this.formData.currentAirport ?? ''
+            })
+            break
+          case 'transferDeparture':
+          case 'transferArrival':
+            Object.assign(query, {
+              departureAirport: row.preAirport ?? '',
+              landingAirport: row.targetAirport ?? ''
+            })
+            break
+          default:
+            break
+        }
+        this.$router.push({
+          path,
+          query
+        })
+      }
+    }
+  }
+}

src/components/tableChild/mixins/timeZone.js

@@ -0,0 +1,48 @@
+/*
+ * @Author: Badguy
+ * @Date: 2022-05-17 17:04:32
+ * @LastEditTime: 2022-05-27 15:04:44
+ * @LastEditors: your name
+ * @Description: 时区相关
+ * have a nice day!
+ */
+import { timeInZone } from '@/utils/table'
+import { mapGetters } from 'vuex'
+
+export default {
+  computed: {
+    ...mapGetters(['timeZone'])
+  },
+  methods: {
+    // 表格数据格式化
+    tableFormat(row, column, cellValue) {
+      switch (column.property) {
+        case 'arrivalTime':
+        case 'planDepartureTime':
+          return timeInZone((cellValue ?? '').replace('T', ' '), this.timeZone)
+        case 'actualDepartureTime':
+        case 'actualLandingTime':
+          return timeInZone((cellValue ?? '').replace('T', ' '), this.timeZone).replace(' ', '\n')
+        case 'checkInTime':
+        case 'securityTime':
+        case 'sortTime':
+        case 'loadTime':
+        case 'inflTime':
+          return cellValue ? `${timeInZone(cellValue.split(',')[0], this.timeZone)}\n${cellValue.split(',')[1]}` : ''
+        // return `${cellValue ?? ''}\n${getTimeInZone(row['checkInTime'], this.timeZone)}`
+        // case 'DealInfo':
+        //   return `${cellValue ?? ''}\n${getTimeInZone(row['DealTime'], this.timeZone)}`
+        // case 'sortLocationMark':
+        //   return `${cellValue ?? ''}\n${getTimeInZone(row['sortDealTime'], this.timeZone)}`
+        // case 'loadLocationMark':
+        //   return `${cellValue ?? ''}\n${getTimeInZone(row['loadDealTime'], this.timeZone)}`
+        // case 'inflLocationMark':
+        //   return `${cellValue ?? ''}\n${getTimeInZone(row['inflLoadDealTime'], this.timeZone)}`
+        case 'timeDifference':
+          return cellValue <= -120 ? '-2h+' : cellValue >= 120 ? '2h+' : cellValue
+        default:
+          return cellValue ?? ''
+      }
+    }
+  }
+}

src/components/tableText/index.vue

@@ -1,128 +0,0 @@
-<template>
-  <div class="tableText newBagDetails">
-    <div class="newBagDetails-info">
-      <div class="newBagDetails-info-look">
-        <el-row :gutter="20">
-          <el-col :span="4">
-            <div class="flex-wrap">
-              <el-tooltip class="item" effect="dark" :content="passengerName" placement="top">
-                <span class="newBagDetails-info-look-name">{{ passengerName }}</span>
-              </el-tooltip>
-              <el-button type="text">查看</el-button>
-            </div>
-          </el-col>
-          <el-col :span="item.rows" v-for="(item,index) in infoArrs" :key="index">{{ item.label }}：{{ item.value }}</el-col>
-        </el-row>
-      </div>
-      <div class="newBagDetails-info-details">
-        <div class="newBagDetails-info-details-tags">
-          <scroll-pane ref="scrollPane" class="tags-view-wrapper">
-            <div v-for="(item,index) in detailsArr" class="tags-view-item" @click="tagClick(item,index)" :class="activeIndex == index ? 'active' : ''" :key="index">{{ item.luggageNum }}</div>
-          </scroll-pane>
-        </div>
-        <div class="newBagDetails-info-details-msgs">
-          <el-row class="newBagDetails-info-details-msgs-l1" :gutter="20">
-            <el-col :span="item.rows" v-for="(item,index) in msgs1" :key="index">{{ item.label }}：{{ item.value }}</el-col>
-          </el-row>
-          <el-row class="newBagDetails-info-details-msgs-l2" :gutter="20">
-            <el-col :span="item.rows" v-for="(item,index) in msgs2" :key="index">{{ item.label }}：{{ item.value }}</el-col>
-          </el-row>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'TableText',
-  data () {
-    return {
-
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.newBagDetails {
-  height: calc(100vh - 80px);
-  padding: 12px;
-  &-info {
-    height: 200px;
-    background: #051436;
-    color: #fff;
-    font-size: 14px;
-    &-look {
-      padding: 0 32px;
-      height: 64px;
-      line-height: 64px;
-      background: #041741;
-      &-name {
-        font-size: 18px;
-        font-family: Microsoft YaHei;
-        font-weight: bold;
-        color: #ffffff;
-        margin-right: 7px;
-        max-width: 101px;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        display: inline-block;
-      }
-    }
-    &-details {
-      position: relative;
-      padding: 0 32px;
-      height: 136px;
-      &-tags {
-        height: 32px;
-        line-height: 32px;
-        .tags-view-wrapper {
-          width: calc(100%);
-          ::v-deep .el-scrollbar__wrap {
-            // margin-top: 8.5px;
-          }
-          .tags-view-item {
-            display: inline-block;
-            position: relative;
-            cursor: pointer;
-            height: 32px;
-            line-height: 32px;
-            // border: 1px solid #767eba;
-            // border-radius: 4px;
-            font-size: 14px;
-            font-family: Microsoft YaHei;
-            font-weight: 400;
-            color: #aaacb2;
-            margin-right: 100px;
-            &:last-child {
-              margin-right: 0;
-            }
-            &.active {
-              color: #fff;
-              position: relative;
-              &::after {
-                position: absolute;
-                content: "";
-                width: 100%;
-                left: 0;
-                bottom: 0;
-                height: 3px;
-                background: #2d67e3;
-              }
-            }
-          }
-        }
-      }
-      &-msgs {
-        padding: 25px 0;
-        height: 104px;
-        &-l1 {
-          margin-bottom: 22px;
-        }
-      }
-    }
-  }
-}
-</style>

src/utils/validate.js

@@ -309,4 +309,23 @@ export function getAuthData (key) {
       datas
     }
   }
+}
+
+export function formatOrder (arr, key = 'orderNumber') {
+  const newDatas = _.cloneDeep(arr)
+  const [n1, n2] = [[], []]
+  const msgDatas = []
+  newDatas.map((item, index) => {
+    item.index = index
+    msgDatas.push(item)
+  })
+  for (const p of msgDatas) {
+    if (p[key] || p[key] == 0) {
+      n1.push(p)
+    } else {
+      n2.push(p)
+    }
+  }
+  const newN2 = n2.sort((a, b) => a.index - b.index)
+  return [...n1, ...newN2]
 }

src/views/flightViewManagement/mixins/tableCols.js

@@ -66,7 +66,8 @@ export default {
       this.dialogFlag = false
       this.checkedKeys = [...this.checkedKeysTemp]
       const datas = this.colsFilter(this._.cloneDeep(this.tableCols))
-      this.tableColsCopy = datas.filter((item) => item.needShow)
+      const newTableColsCopy = datas.filter((item) => item.needShow)
+      this.tableColsCopy = _.cloneDeep(newTableColsCopy)
       setTimeout(() => {
         if (!this[tableDataName].length) {
           this[tableDataName] = tableDataTemp

src/views/newArrival/index.vue

@@ -52,7 +52,7 @@
     </div>
     <!--表格-->
     <div class="terminal-table">
-      <Table style="height:100%" :btnStyle="{ 'top':'-43px','right':'8px' }" :istableCol="true" :tableTag="tableTag" ref="table" />
+      <Table :istableChild="true" style="height:100%" :btnStyle="{ 'top':'-43px','right':'8px' }" :istableCol="true" :tableTag="tableTag" ref="table" />
     </div>
   </div>
 </template>

src/views/newBagDetails/index.vue

@@ -11,15 +11,14 @@
               <el-button type="text">查看</el-button>
             </div>
           </el-col>
-          <el-col :span="3" v-for="(item,index) in infoArrs" :key="index">{{ item.columnLabel }}：{{ item.value }}</el-col>
+          <el-col :span="20">
+            <scroll-pane ref="scrollPane" class="tags-view-wrapper">
+              <div v-for="(item,index) in detailsArr" class="tags-view-item" @click="tagClick(item,index)" :class="activeIndex == index ? 'active' : ''" :key="index">{{ item.luggageNum }}</div>
+            </scroll-pane>
+          </el-col>
         </el-row>
       </div>
       <div class="newBagDetails-info-details">
-        <div class="newBagDetails-info-details-tags">
-          <scroll-pane ref="scrollPane" class="tags-view-wrapper">
-            <div v-for="(item,index) in detailsArr" class="tags-view-item" @click="tagClick(item,index)" :class="activeIndex == index ? 'active' : ''" :key="index">{{ item.luggageNum }}</div>
-          </scroll-pane>
-        </div>
         <div class="newBagDetails-info-details-msgs">
           <el-scrollbar style="height: 100%;">
             <el-row class="newBagDetails-info-details-msgs-l1" :gutter="20">
@@ -49,7 +48,7 @@ import baggageView from './components/baggageView.vue'
 import baggageList from './components/baggageList.vue'
 import baggageMessage from './components/baggageMessage.vue'
 import pf from '@/layout/mixin/publicFunc'
-import { getAuthData } from '@/utils/validate'
+import { getAuthData, formatOrder } from '@/utils/validate'
 import { getToken } from '@/utils/auth'
 export default {
   name: 'NewBagDetails',
@@ -115,9 +114,7 @@ export default {
         if (code == 0) {
           if (returnData && returnData.length) {
             const nodeDatas = returnData.filter(item => item.needShow)
-            const newNodeDatas = nodeDatas.sort((a, b) => b.orderNumber - a.orderNumber)
-            this.infoArrs = newNodeDatas.slice(0, 6).sort((a, b) => a.orderNumber - b.orderNumber)
-            this.msgs1 = newNodeDatas.slice(6)
+            this.msgs1 = formatOrder(nodeDatas)
             this.getLuggageInfo(auth_id)
           }
         } else {
@@ -269,7 +266,7 @@ export default {
       }
       &-msgs {
         padding: 25px 0;
-        height: 104px;
+        height: 135px;
         ::v-deep .el-scrollbar__wrap {
           overflow-x: hidden;
         }

src/views/newQuery/components/search.vue

@@ -70,6 +70,7 @@ import { parseTime } from '@/utils/index'
 import { Query } from '@/api/dataIntegration'
 import { throttledExportToExcel } from '@/utils/table'
 import { mapGetters } from 'vuex'
+import { formatOrder } from '@/utils/validate'
 const comparisonOperatorOptions = [
   {
     label: '小于等于',
@@ -269,12 +270,10 @@ export default {
   },
   methods: {
     queryHandler () {
-      console.log('ddd')
       const colDatas = this.authMsg
-      console.log(colDatas)
       if (colDatas && colDatas.length) {
         const columns = colDatas.filter(item => item.is_search == 1)
-        const datas = columns.sort((a, b) => b.orderNumber - a.orderNumber)
+        const datas = formatOrder(columns)
         this.getColumnSet(datas)
       }
     },

src/views/newQuery/components/table.vue

@@ -1,9 +1,52 @@
 <template>
   <div v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" class="newQueryTable">
-    <el-table v-el-table-infinite-scroll="load" :data="filteredTableData" :summary-method="getSummaries" :span-method="tableSpanMethod" stripe :show-summary="showSummary" border @cell-click="cellClick" :cell-class-name="cellClass" ref="table" height="100%" class="table infinite-list">
-      <el-table-column v-for="(item, index) in tableColsCopy" :sortable="item.needSort ? true : false" :key="index" :prop="item.columnName" :label="item.columnLabel" :show-overflow-tooltip="showOverflowTooltip">
-      </el-table-column>
-    </el-table>
+    <template v-if="istableChild">
+      <el-table v-el-table-infinite-scroll="load" :data="filteredTableData" :summary-method="getSummaries" :span-method="tableSpanMethod" stripe :show-summary="showSummary" border @cell-click="cellClick" :cell-class-name="cellClass" ref="table" height="100%" class="table infinite-list">
+        <el-table-column v-for="col in tableColsCopy" :key="col.columnName" :prop="col.columnName" :label="col.groupName">
+          <el-table-column v-for="childCol in col.children" :key="childCol.columnName" :prop="childCol.columnName" :label="childCol.columnLabel">
+            <template #header>
+              <el-tooltip :content="childCol.columnDescribe || childCol.columnLabel" placement="top">
+                <TableHeaderCell :label="childCol.columnLabel" :filter-options="tableDataFilters[childCol.columnName]" :filter-values.sync="filterValues[childCol.columnName]" :sortable="childCol.needSort" />
+              </el-tooltip>
+            </template>
+          </el-table-column>
+        </el-table-column>
+      </el-table>
+    </template>
+    <template v-else>
+      <el-table v-el-table-infinite-scroll="load" :data="filteredTableData" :summary-method="getSummaries" :span-method="tableSpanMethod" stripe :show-summary="showSummary" border @cell-click="cellClick" :cell-class-name="cellClass" ref="table" height="100%" class="table infinite-list">
+        <el-table-column v-for="(item, index) in tableColsCopy" :sortable="item.needSort ? true : false" :key="index" :prop="item.columnName" :label="item.columnLabel" :show-overflow-tooltip="showOverflowTooltip">
+          <!-- <template #header>
+          <span v-if="item.columnDescribe" class="colTips">
+            <el-tooltip :content="item.columnDescribe" placement="top">
+              <span>{{ item.columnLabel }}</span>
+            </el-tooltip>
+          </span>
+          <span v-else class="colTips">
+            <span>{{ item.columnLabel }}</span>
+          </span>
+          <span v-if="item.needFilters">
+            <el-popover placement="bottom" trigger="click" @show="popoverShowHandler(item.columnName)" @hide="popoverHideHandler">
+              <i slot="reference" :class="[
+                        'filter-arrow',
+                        'el-icon-arrow-down',
+                        arrowClass(item.columnName),
+                      ]" />
+              <el-form>
+                <el-form-item :label="item.columnLabel">
+                  <el-select v-model="filterValues[item.columnName]" size="small" placeholder="筛选" default-first-option filterable clearable>
+                    <el-option v-for="(option, optionIndex) in tableDataFilters[
+                              item.columnName
+                            ]" :key="option.value + optionIndex" :value="option.value" :label="option.text" />
+                  </el-select>
+                </el-form-item>
+              </el-form>
+            </el-popover>
+          </span>
+        </template> -->
+        </el-table-column>
+      </el-table>
+    </template>
     <template v-if="istableCol">
       <div :style="btnStyle" class="btns">
         <img class="btn-square btn-shadow" src="@/assets/baggage/ic_setting.png" title="列设置" @click="show">
@@ -33,14 +76,15 @@
 import pf from '@/layout/mixin/publicFunc';
 import { setTableFilters } from "@/utils/table";
 import { getToken } from '@/utils/auth';
-import { getAuthData } from "@/utils/validate";
+import { getAuthData, formatOrder } from "@/utils/validate";
 import { throttledExportToExcel } from '@/utils/table';
-import tableColsMixin from '@/views/flightViewManagement/mixins/tableCols';
-import Dialog from '@/layout/components/Dialog/index.vue'
+import tableColsMixin from '../mix/tableCols';
+import Dialog from '@/layout/components/Dialog/index.vue';
+import TableHeaderCell from "@/components/TableHeaderCell";
 export default {
   name: 'NewQueryTable',
   mixins: [pf, tableColsMixin],
-  components: { Dialog },
+  components: { Dialog, TableHeaderCell },
   props: {
     // 是否显示合计行
     showSummary: {
@@ -64,6 +108,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    istableChild: {
+      type: Boolean,
+      default: false,
+    },
     btnStyle: {
       type: Object,
       default: () => { }
@@ -90,6 +138,8 @@ export default {
       authBtns: [],
       authBtnCol: [],
       authBtnColName: [],
+      tableArrs: [], //重组table-表头下拉
+      tableOptions: {}, //弹框-下来数据缓存
     }
   },
   computed: {
@@ -140,10 +190,40 @@ export default {
               sessionStorage.setItem('tableColumns', JSON.stringify(returnData))
               this.$store.dispatch('auth/changeAuthMsg', returnData)
             }
-            const msgDatas = returnData.sort((a, b) => b.orderNumber - a.orderNumber);
-            const msgDatasShows = msgDatas.filter((item) => item.needShow);
-            this.tableCols = _.cloneDeep(msgDatasShows);
-            this.tableColsCopy = this.tableCols.filter((item) => item.needShow);
+            const msgDatas = returnData.filter((item) => item.needShow);
+            const msgDatasShows = formatOrder(msgDatas);
+            if (this.istableChild) {
+              const datas = _.cloneDeep(msgDatasShows)
+              const cache = {};
+              const indices = [];
+              const others = []
+              datas.forEach((item) => {
+                if (!cache[item.groupName] && item.groupName) {
+                  cache[item.groupName] = item.groupName
+                  indices.push(item)
+                } else {
+                  const newItem = _.cloneDeep(item)
+                  others.push(newItem)
+                }
+              })
+              indices.map((item, index) => {
+                item.tabIndex = index
+              })
+              others.forEach(item => {
+                indices.forEach(p => {
+                  if (item.groupName == p.groupName && item.groupName) {
+                    item.tabIndex = p.tabIndex
+                  }
+                })
+              })
+              indices.forEach((item) => {
+                item.children = [_.cloneDeep(item), ...this.formatCaps(item.tabIndex, others)]
+              })
+              this.tableCols = _.cloneDeep(indices);
+            } else {
+              this.tableCols = _.cloneDeep(msgDatasShows);
+            }
+            this.tableColsCopy = _.cloneDeep(this.tableCols);
             this.initTableCols();
           }
         } else {
@@ -153,6 +233,16 @@ export default {
         console.log(error)
       }
     },
+    formatCaps (order, arr) {
+      const datas = []
+      for (let i = 0; i < arr.length; i++) {
+        const element = arr[i];
+        if (element['tabIndex'] == order) {
+          datas.push(element)
+        }
+      }
+      return datas
+    },
     //获取表格数据
     async getQuery (id, dataContent = this.dataContent, page, pageSize) {
       try {
@@ -218,6 +308,12 @@ export default {
         if (item.needGroup) {
           this.tableGroups.push(item.columnName);
         }
+        // if (item.listqueryTemplateID || item.listqueryTemplateID == 0) {
+        //   this.tableArrs.push(item.columnName);
+        //   if (!this.tableOptions[item.columnName]) {
+        //     this.tableOptions[item.columnName] = await this.getSelectData(item.listqueryTemplateID);
+        //   }
+        // }
       });
       setTableFilters(this.tableData, this.tableDataFilters);
       this.tableGroup(this.tableData);
@@ -249,6 +345,17 @@ export default {
     popoverHideHandler () {
       this.colShowFilter = "";
     },
+    //获取弹框-下拉数据
+    async getSelectData (id) {
+      // name ? [name] : name === null ? [null]: [],
+      const { code, returnData } = await this.getQueryList(id, {});
+      console.log(returnData)
+      if (code == 0) {
+        return returnData;
+      } else {
+        return [];
+      }
+    },
     //设置表头-下拉-箭头样式
     arrowClass () {
       return function (prop) {
@@ -355,6 +462,7 @@ export default {
     }
     .cell {
       color: #000;
+      text-align: center;
     }
   }
   .btns {

src/views/newQuery/mix/tableCols.js

@@ -0,0 +1,101 @@
+/*
+ * @Author: Badguy
+ * @Date: 2022-03-04 11:50:22
+ * @LastEditTime: 2022-03-15 17:56:34
+ * @LastEditors: your name
+ * @Description: 航站视图表格通用部分
+ * have a nice day!
+ */
+
+export default {
+  data () {
+    return {
+      // 筛选后表头
+      tableColsCopy: [],
+      // 列设置弹框选中
+      checkedKeys: [],
+      checkedKeysTemp: [],
+      halfCheckedKeys: [],
+      // 列设置弹框开关
+      dialogFlag: false
+    }
+  },
+  // created () {
+  //   this.initTableCols()
+  // },
+  updated () {
+    // table数据更新
+    this.$nextTick(() => {
+      this.$refs.table?.doLayout()
+    })
+  },
+  computed: {
+    colsCheckClass () {
+      return this.tableCols.some(col => col.children?.length) ? 'has-children' : 'no-children'
+    }
+  },
+  methods: {
+    // 列设置-初始化
+    initTableCols () {
+      const that = this
+      function setTableCols (cols) {
+        console.log(cols)
+        for (const col of cols) {
+          col.index = that.checkedKeys.length
+          that.checkedKeys.push(that.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 (tableDataName = 'tableData') {
+      if (this.dialogFlag === false) {
+        return
+      }
+      this.loading = true
+      const tableDataTemp = this._.cloneDeep(this[tableDataName])
+      this[tableDataName] = []
+      this.dialogFlag = false
+      this.checkedKeys = [...this.checkedKeysTemp]
+      const datas = this.colsFilter(this._.cloneDeep(this.tableCols))
+      const newTableColsCopy = datas.filter((item) => item.needShow)
+      this.tableColsCopy = _.cloneDeep(newTableColsCopy)
+      setTimeout(() => {
+        if (!this[tableDataName].length) {
+          this[tableDataName] = tableDataTemp
+        }
+        this.loading = false
+      }, 50)
+    },
+    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/systemSettings/views/newAuth/components/table.vue

@@ -139,6 +139,11 @@
                 <el-input size="small" clearable placeholder="请输入默认参数" v-model="tableForm.default_query_parameters"></el-input>
               </el-form-item>
             </el-col>
+            <el-col :span="6">
+              <el-form-item label-width="70px" class="flex1" label="分组名称">
+                <el-input size="small" clearable placeholder="请输入分组名称" v-model="tableForm.groupName"></el-input>
+              </el-form-item>
+            </el-col>
           </el-row>
         </el-form>
       </div>
@@ -271,7 +276,8 @@ export default {
         orderNumber: "",
         needSearch: "",
         is_search: '',
-        default_query_parameters: ''
+        default_query_parameters: '',
+        groupName: ''
       },
       tableData: [],
       tableDataCopys: [],