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="isDeparture ? '预计装载总运单数' : '预计卸载总运单数'"
        />
        <CountBox
          v-show="countFlag"
          :count-number="tableDataCount.goodsCount"
          :label="isDeparture ? '预计装载总件数' : '预计卸载总件数'"
        />
      </div>
      <div class="airport-settings">
        <div v-permission="getPermission('count')">
          <CommonSwitch v-model:flag="countFlag" label="显示件数" />
        </div>
        <div v-permission="getPermission('UTC')">
          <CommonSwitch v-model:flag="UTCFlag" label="开启UTC" />
        </div>
        <div v-permission="getPermission('columnSet')">
          <ColumnSet
            :table-columns="tableColumns"
            @checked-submit="columnChecked"
          />
        </div>
      </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="isDeparture"
            :footer-height="60"
            :row-class="rowClassV2"
            :cell-props="cellPropsGetter"
          >
            <template #header-cell="{ column }: HeaderCellSlotProps">
              <TableHeaderCell
                v-model:filter-values="filterValueMap[column.columnName]"
                v-model:sort-rule="tableDataSortRuleMap[column.columnName]"
                :label="tableColumnFormatter(column.columnLabel)"
                :desc="column.columnDescribe"
                :filter-options="filterOptionMap[column.columnName]"
                :sortable="column.needSort"
                filter-style="arrow"
              />
            </template>
            <template #cell="slot: CellSlotProps">
              <div
                class="el-table-v2__cell-text"
                @click="cellClickHandlerV2(slot)"
              >
                <!-- <el-tooltip
                  v-if="slot.column.columnName.includes('Time')"
                  :content="tableDataFormatter(slot)"
                >
                  {{ tableDataFormatter(slot) }}
                </el-tooltip>
                <span v-else>{{ tableDataFormatter(slot) }}</span> -->
                {{ tableDataFormatter(slot) }}
              </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 v-if="isDeparture" class="table-footer-count"
                  >已装机总数：{{ tableDataCount.loadCount }}</span
                >
                <span v-else class="table-footer-count"
                  >已卸机总数：{{ tableDataCount.unloadCount }}</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 { useCount } from './useCount'
import { HeaderCellSlotProps } from 'element-plus'
import { CommonData } from '~/common'
import { useLoop } from '@/hooks/useLoop'

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

// onMounted(() => {
//   console.log('mounted', 'airport')
// })
// onActivated(() => {
//   console.log('activated', 'airport')
// })
// onDeactivated(() => {
//   console.log('deactivated', 'airport')
// })

const isDeparture = props.name.includes('Departure')

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

const countFlag = ref(true)
const { tableColumnFormatter, tableDataFormatter } = useCount(countFlag)

const UTCFlag = ref(true)

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

const tableDataCount = computed(() =>
  tableData.value.reduce(
    (counts: { [x: string]: number }, current) => {
      const preCount = current[isDeparture ? 'preLoad' : 'preUnload']
      if (preCount) {
        counts.waybillCount += Number(String(preCount).split('/')[0])
        counts.goodsCount += Number(String(preCount).split('/')[1])
      }
      counts.flightCount++
      const isFreight = tableColumns.value.some(
        column => column.groupName === '地服相关' && current[column.columnName]
      )
      if (isFreight) {
        counts.freightFlightCount++
      }
      if (current.loadPlaneSure) {
        counts.loadCount++
      }
      if (current.unLoad) {
        counts.unloadCount++
      }
      return counts
    },
    {
      waybillCount: 0,
      goodsCount: 0,
      flightCount: 0,
      freightFlightCount: 0,
      loadCount: 0,
      unloadCount: 0,
      takeOffCount: 0,
    }
  )
)

const { cellClickHandlerV2 } = useTableCellClick(props.name)

const {
  filterOptionMap,
  filterValueMap,
  tableDataSortRuleMap,
  dealedTableData,
} = useTableFilterAndSort(
  tableColumns,
  tableData,
  {},
  { planDepartureTime: 'ascending' }
)

const permissionMap = {
  DepartureAirport: {
    count:
      'number_of_pieces_displayed_in_domestic_departure_terminal_view_button',
    UTC: 'turn_on_utc_in_view_of_domestic_departure_terminal_button',
    columnSet: 'domestic_departure_terminal_view_column_setting_button',
  },
  InternationalDepartureAirport: {
    count:
      'number_of_pieces_displayed_in_international_departure_terminal_view_button',
    UTC: 'international_departure_terminal_view_opens_utc_button',
    columnSet: 'international_departure_terminal_view_column_setting_button',
  },
  ArrivalAirport: {
    count:
      'number_of_pieces_displayed_in_domestic_inbound_terminal_view_button',
    UTC: 'turn_on_utc_in_view_of_domestic_inbound_terminal_button',
    columnSet: 'domestic_inbound_terminal_view_column_setting_button',
  },
  InternationalArrivalAirport: {
    count:
      'number_of_display_pieces_of_international_inbound_terminal_view_button',
    UTC: 'the_view_of_international_inbound_terminal_opens_utc_button',
    columnSet: 'view_column_setting_of_international_inbound_terminal_button',
  },
}
const getPermission = (type?: string) => {
  return [permissionMap[props.name][type]]
}
</script>
<style lang="scss" scoped>
@import './index.scss';
</style>