SZYGM1.0/src/views/realTime/components/AirportView/index.vue

<template>
  <div class="airport-view">
    <div class="airport-header">
      <AirportForm :name="name" @form-data-change="formDataChangeHandler" />
      <div class="airport-count">
        <CountBox
          :count-number="tableDataCount.waybillCount"
          label="预计装载总运单数"
        />
        <CountBox
          v-show="goodsCountFlag"
          :count-number="tableDataCount.goodsCount"
          label="预计装载总件数"
        />
      </div>
      <div class="airport-settings">
        <CommonSwitch v-model:flag="goodsCountFlag" label="显示件数" />
        <CommonSwitch v-model:flag="UTCFlag" label="开启UTC" />
        <ColumnSet
          :table-columns="tableColumns"
          @checked-submit="columnChecked"
        />
      </div>
    </div>
    <div class="airport-table">
      <el-auto-resizer>
        <template #default="{ height, width }">
          <el-table-v2
            :columns="tableColumns"
            :data="dealedTableData"
            :width="width"
            :height="height"
            :fixed="name.includes('Departure')"
            :footer-height="60"
            :row-class="rowClassV2"
            :cell-props="cellPropsGetter"
          >
            <template #header-cell="slot: HeaderCellSlotProps">
              <TableHeaderCell
                v-model:filter-values="filterValueMap[slot.column.columnName]"
                v-model:sort-rule="tableDataSortRuleMap[slot.column.columnName]"
                :label="slot.column.title"
                :filter-options="filterOptionMap[slot.column.columnName]"
                :sortable="slot.column.needSort"
                filter-style="arrow"
              />
            </template>
            <template #cell="slot: CellSlotProps">
              <div
                class="el-table-v2__cell-text"
                @click="cellClickHandlerV2(slot)"
              >
                {{ slot.rowData[slot.column.columnName] }}
              </div>
            </template>
            <template #footer>
              <div class="table-footer">
                <span class="table-footer-count"
                  >航班总数：{{ tableDataCount.flightCount }}</span
                >
                <span class="table-footer-count"
                  >货运航班总数：{{ tableDataCount.freightFlightCount }}</span
                >
                <span class="table-footer-count"
                  >已装机总数：{{ tableDataCount.loadCount }}</span
                >
                <span class="table-footer-count"
                  >已起飞总数：{{ tableDataCount.takeOffCount }}</span
                >
              </div>
            </template>
          </el-table-v2>
        </template>
      </el-auto-resizer>
    </div>
  </div>
</template>
<script lang="ts" setup>
import type { CellSlotProps } from '../../type'
import AirportForm from './AirportForm.vue'
import ColumnSet from '../../components/ColumnSet/index.vue'
import CountBox from '../../components/CountBox/index.vue'
import CommonSwitch from '../../components/CommonSwitch/index.vue'
import TableHeaderCell from '@/components/TableHeaderCell/index.vue'
import useTableColumnSet from '../../hooks/useTableColumnSet'
import useAirportTable from './useAirportTable'
import useTableStyle from '../../hooks/useTableStyle'
import useTableCellClick from '../../hooks/useTableCellClick'
import useTableFilterAndSort from '@/hooks/useTableFilterAndSort'
import { HeaderCellSlotProps } from 'element-plus'
import { CommonData } from '~/common'

const props = defineProps({
  name: {
    type: String,
    required: true,
  },
})

const formData = reactive<CommonData>({})
const formDataChangeHandler = (data: CommonData) => {
  Object.assign(formData, data)
}

const goodsCountFlag = ref(true)
const UTCFlag = ref(true)

const { tableColumns, tableData } = useAirportTable(props.name, formData)
const { columnChecked } = useTableColumnSet(tableColumns)
const { rowClassV2, cellClassV2 } = useTableStyle(props.name)
const cellPropsGetter = params => ({
  class: cellClassV2(params),
})

const tableDataCount = computed(() => ({
  waybillCount: tableData.value.length,
  goodsCount: tableData.value.length,
  flightCount: tableData.value.length,
  freightFlightCount: tableData.value.length,
  loadCount: tableData.value.length,
  takeOffCount: tableData.value.length,
}))

const { cellClickHandlerV2 } = useTableCellClick(props.name)

const {
  filterOptionMap,
  filterValueMap,
  tableDataSortRuleMap,
  dealedTableData,
} = useTableFilterAndSort(tableColumns, tableData)
</script>
<style lang="scss" scoped>
@import './index.scss';
</style>