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="goodsCountFlag"
          :count-number="tableDataCount.goodsCount"
          :label="isDeparture ? '预计装载总件数' : '预计卸载总件数'"
        />
      </div>
      <div class="airport-settings">
        <div v-permission="getPermission('count')">
          <CommonSwitch v-model:flag="goodsCountFlag" 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="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)"
              >
                <el-tooltip v-if="slot.column.columnName.includes('Time')" :content="slot.rowData[slot.column.columnName]">
                  {{ slot.rowData[slot.column.columnName] }}
                </el-tooltip>
                <span v-else>{{ slot.rowData[slot.column.columnName] }}</span>
              </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 isDeparture = props.name.includes('Departure')

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.reduce((count, current) => {
    const countValue = current[isDeparture ? 'preLoad' : 'preUnload']
    if (countValue) {
      count += Number(String(countValue).split('/')[0])
    }
    return count
  }, 0),
  goodsCount: tableData.value.reduce((count, current) => {
    const countValue = current[isDeparture ? 'preLoad' : 'preUnload']
    if (countValue) {
      count += Number(String(countValue).split('/')[1])
    }
    return count
  }, 0),
  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)

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>