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

<template>
  <div class="station-view">
    <div class="station-header">
      <StationForm
        :international="international"
        @form-data-change="formDataChangeHandler"
      />
      <div class="station-count">
        <CountBox
          :count-number="tableDataCount.waybillCount"
          label="预计装载总运单数"
        />
        <CountBox
          v-show="goodsCountFlag"
          :count-number="tableDataCount.goodsCount"
          label="预计装载总件数"
        />
      </div>
      <div class="station-settings">
        <TableSwitch v-model:flag="goodsCountFlag" label="显示件数" />
        <TableSwitch v-model:flag="UTCFlag" label="开启UTC" />
        <ColumnSet
          :table-columns="tableColumns"
          @checked-submit="columnChecked"
        />
      </div>
    </div>
    <div class="station-table">
      <el-auto-resizer>
        <template #default="{ height, width }">
          <el-table-v2
            :columns="filteredColumns"
            :data="tableData"
            :width="width"
            :height="height"
            :footer-height="60"
            :row-class="rowClass"
            fixed
          >
            <template #cell="slot: CellSlotProps">
              <div :class="cellClass(slot)" @click="cellClickHandler(slot)">
                <span class="cell-text">
                  {{ slot.rowData[slot.column.dataKey] }}
                </span>
                <div class="cell-background" />
              </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 { PropType } from 'vue'
import type { StationFormData, CellSlotProps } from '../../type'
import StationForm from '../../components/StationForm/index.vue'
import ColumnSet from '../../components/ColumnSet/index.vue'
import CountBox from '../../components/CountBox/index.vue'
import TableSwitch from '../../components/TableSwitch/index.vue'
import useTableColumnSet from '../../hooks/useTableColumnSet'
import useTableData from '../../hooks/useTableData'
import useTableStyle from '../../hooks/useTableStyle'
import useTableCellClick from '../../hooks/useTableCellClick'

type StationViewName =
  | 'departure'
  | 'arrival'
  | 'internationalDeparture'
  | 'internationalArrival'

const props = defineProps({
  stationViewName: {
    type: String as PropType<StationViewName>,
    required: true,
  },
})

const international = computed(() =>
  ['internationalDeparture', 'internationalArrival'].includes(
    props.stationViewName
  )
)
const formData: StationFormData = {
  startDate: '',
  endDate: '',
  flightStatus: '',
  flightWarning: '',
  waybillType: '',
}
const formDataChangeHandler = (data: StationFormData) => {
  Object.keys(data).forEach(key => {
    formData[key] = data[key]
  })
}

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

const { tableColumns, tableData } = useTableData(
  props.stationViewName,
  formData
)
const { columnChecked, filteredColumns } = useTableColumnSet(tableColumns)
const { rowClass, cellClass } = useTableStyle()

const tableDataCount = reactive({
  waybillCount: 0,
  goodsCount: 0,
  flightCount: 0,
  freightFlightCount: 0,
  loadCount: 0,
  takeOffCount: 0,
})
watch(tableData, records => {
  tableDataCount.waybillCount = records.length
  tableDataCount.goodsCount = records.length
  tableDataCount.flightCount = records.length
  tableDataCount.freightFlightCount = records.length
  tableDataCount.loadCount = records.length
  tableDataCount.takeOffCount = records.length
})

const { cellClickHandler } = useTableCellClick()
</script>
<style lang="scss" scoped>
@import '../../style/station.scss';
</style>