新建realTime/type.d.ts

.eslintrc-auto-import.json

@@ -66,4 +66,4 @@
     "watch": true,
     "watchEffect": true
   }
-}
+}

src/views/realTime/components/ColumnSet/index.vue

@@ -45,22 +45,9 @@
 </template>
 
 <script setup lang="ts">
+import type { KeyType, TableColumn, TableColumnInGroup, tableColumnGroup } from '../../type'
 import { Tools } from '@element-plus/icons-vue'
 import Dialog from '@/components/dialog/index.vue'
-import type { Column } from 'element-plus'
-
-export type KeyType = string | number | symbol
-export interface TableColumn <T = any> extends Column<T> {
-  dataKey: KeyType
-  title: string
-}
-export interface TableColumnInGroup<T = any> extends TableColumn<T> {
-  groupTitle: string
-}
-export interface tableColumnGroup {
-  title: string
-  columns: TableColumnInGroup[]
-}
 
 const props = defineProps({
   tableColumns: {

src/views/realTime/components/StationForm/index.vue

@@ -1,26 +1,26 @@
 <template>
   <el-form :model="formData" inline class="station-form">
-    <el-form-item :prop="formData.startDate" style="width: 176px">
+    <el-form-item :prop="formData.startDate" style="width: 160px">
       <el-date-picker
         v-model="formData.startDate"
         type="datetime"
-        format="YYYY-MM-DD HH:mm:ss"
-        value-format="YYYY-MM-DD hh:mm:ss"
+        format="YYYY-MM-DD HH:mm"
+        value-format="YYYY-MM-DD hh:mm"
         size="default"
         :clearable="false"
       />
     </el-form-item>
-    <el-form-item :prop="formData.endDate" style="width: 176px">
+    <el-form-item :prop="formData.endDate" style="width: 160px">
       <el-date-picker
         v-model="formData.endDate"
         type="datetime"
-        format="YYYY-MM-DD HH:mm:ss"
-        value-format="YYYY-MM-DD hh:mm:ss"
+        format="YYYY-MM-DD HH:mm"
+        value-format="YYYY-MM-DD hh:mm"
         size="default"
         :clearable="false"
       />
     </el-form-item>
-    <el-form-item :prop="formData.flightStatus" style="width: 96px">
+    <el-form-item :prop="formData.flightStatus" style="width: 104px">
       <el-select
         v-model="formData.flightStatus"
         size="default"
@@ -34,7 +34,7 @@
         />
       </el-select>
     </el-form-item>
-    <el-form-item :prop="formData.flightWarning" style="width: 96px">
+    <el-form-item :prop="formData.flightWarning" style="width: 104px">
       <el-select
         v-model="formData.flightWarning"
         size="default"
@@ -51,7 +51,7 @@
     <el-form-item
       v-if="international"
       :prop="formData.waybillType"
-      style="width: 96px"
+      style="width: 104px"
     >
       <el-select
         v-model="formData.waybillType"
@@ -71,11 +71,7 @@
 
 <script setup lang="ts">
 import { parseTime } from '@/utils/validate'
-
-interface selectOptions {
-  label: string
-  value: string | number
-}
+import type { selectOptions } from '../../type'
 
 const props = defineProps({
   international: {
@@ -84,16 +80,33 @@ const props = defineProps({
   },
 })
 
+const emit = defineEmits(['formDataChange'])
+
 const formData = reactive({
-  startDate: parseTime(new Date(), '{y}/{m}/{d} {h}:{i}:{s}'),
-  endDate: parseTime(new Date(), '{y}/{m}/{d} {h}:{i}:{s}'),
+  startDate: parseTime(new Date(), '{y}-{m}-{d} {h}:{i}'),
+  endDate: parseTime(new Date(), '{y}-{m}-{d} {h}:{i}'),
   flightStatus: '',
   flightWarning: '',
   waybillType: '',
 })
-const flightStatusOptions = ref<selectOptions[]>([])
-const flightWarningOptions = ref<selectOptions[]>([])
-const waybillTypeOptions = ref<selectOptions[]>([])
+watchEffect(() => {
+  emit('formDataChange', formData)
+})
+
+const flightStatusOptions = ref<selectOptions>([])
+const flightWarningOptions = ref<selectOptions>([])
+const waybillTypeOptions = ref<selectOptions>([])
+const getFlightStatusOptions = async () => {}
+const getFlightWarningOptions = async () => {}
+const getWaybillTypeOptions = async () => {}
+const getSelectOptions = () => {
+  getFlightStatusOptions()
+  getFlightWarningOptions()
+  getWaybillTypeOptions()
+}
+onMounted(() => {
+  getSelectOptions()
+})
 </script>
 
 <style scoped lang="scss">
@@ -103,17 +116,15 @@ const waybillTypeOptions = ref<selectOptions[]>([])
     &:not(:last-of-type) {
       margin-right: 8px;
     }
-    .el-input__wrapper {
-      padding: 1px 8px;
-      .el-input__inner {
+
+    .el-input__inner {
+      font-size: 14px;
+      font-family: Helvetica, Microsoft YaHei;
+      color: #303133;
+      &::-webkit-input-placeholder {
         font-size: 14px;
         font-family: Helvetica, Microsoft YaHei;
         color: #303133;
-        &::-webkit-input-placeholder {
-          font-size: 14px;
-          font-family: Helvetica, Microsoft YaHei;
-          color: #303133;
-        }
       }
     }
   }

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

@@ -1,7 +1,10 @@
 <template>
   <div class="station-view">
     <div class="station-header">
-      <StationForm :international="international" />
+      <StationForm
+        :international="international"
+        @form-data-change="formDataChangeHandler"
+      />
       <div class="station-count">
         <CountBox
           :count-number="tableDataCount.waybillCount"
@@ -66,7 +69,7 @@
 </template>
 <script lang="ts" setup>
 import { PropType } from 'vue'
-import type { CellSlotProps } from '../../hooks/useTableStyle'
+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'
@@ -94,11 +97,26 @@ const international = computed(() =>
     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)
+const { tableColumns, tableData } = useTableData(
+  props.stationViewName,
+  formData
+)
 const { columnChecked, filteredColumns } = useTableColumnSet(tableColumns)
 const { rowClass, cellClass } = useTableStyle()
 

src/views/realTime/departure/flight/index.vue

@@ -68,7 +68,7 @@ import tableColumnSet from "@/components/tableColumnSet/index.vue";
 import {CaretRight} from "@element-plus/icons-vue"
 import { Ref, ref } from 'vue';
 import useTableExport from "../../hooks/useTableExport";
-import { ElTable } from "element-plus";
+import { TableInstance } from "element-plus";
 
 const state = reactive({
   tableHeader: [
@@ -214,7 +214,7 @@ const { exportToExcel } = useTableExport()
 const downLoad=(data) =>{
   const table = ref((domeTable.value as InstanceType<typeof tableTemp>).table)
   exportToExcel({
-    table: table as Ref<InstanceType<typeof ElTable>>
+    table: table as Ref<TableInstance>
   })
 }
 

src/views/realTime/hooks/useTableCellClick.ts

@@ -1,26 +1,4 @@
-import type {
-  TableColumn,
-  TableColumnInGroup,
-} from '../components/ColumnSet/index.vue'
-import type { CSSProperties } from 'vue'
-
-type CellSlotProps = {
-  column: TableColumn | TableColumnInGroup
-  columns: TableColumn[] | TableColumnInGroup[]
-  columnIndex: number
-  depth: number
-  style: CSSProperties
-  rowData: any
-  rowIndex: number
-  isScrolling: boolean
-  expandIconProps?:
-    | {
-        rowData: any
-        rowIndex: number
-        onExpand: (expand: boolean) => void
-      }
-    | undefined
-}
+import type { CellSlotProps } from '../type'
 
 export default function useTableCellClick() {
   const router = useRouter()

src/views/realTime/hooks/useTableColumnSet.ts

@@ -2,7 +2,7 @@ import type {
   KeyType,
   TableColumn,
   TableColumnInGroup,
-} from '../components/ColumnSet/index.vue'
+} from '../type'
 import { Ref } from 'vue'
 
 export default function useTableColumnSet(

src/views/realTime/hooks/useTableData.ts

@@ -2,7 +2,8 @@ import type {
   KeyType,
   TableColumn,
   TableColumnInGroup,
-} from '../components/ColumnSet/index.vue'
+  StationFormData,
+} from '../type'
 
 type TableColumnsGroup = {
   groupTitle: string
@@ -509,7 +510,10 @@ const tableDatas = {
   ],
 }
 
-export default function useTableData(tableDataSource: TableDataSource) {
+export default function useTableData(
+  tableDataSource: TableDataSource,
+  formData: StationFormData
+) {
   const tableColumns = ref<TableColumnInGroup[] | TableColumn[]>([])
   const tableData = ref<{}[]>([])
   const getTableData = () => {

src/views/realTime/hooks/useTableExport.ts

@@ -1,17 +1,8 @@
-import { Ref } from 'vue'
-import { ElMessage, ElTable } from 'element-plus'
+import type { ExportHandler } from '../type'
+import { ElMessage } from 'element-plus'
 import * as XLSX from 'xlsx'
 import FileSaver from 'file-saver'
 
-type ElTableType = InstanceType<typeof ElTable>
-interface ExportOptions {
-  table: ElTableType | Ref<ElTableType>
-  sheetName?: string
-  fileName?: string
-  headerRowNumber?: number
-}
-type ExportHandler = (option: ExportOptions) => void
-
 export default function useTableExport() {
   const exportToExcel: ExportHandler = ({
     table,

src/views/realTime/hooks/useTableStyle.ts

@@ -1,8 +1,8 @@
 import type {
   TableColumn,
   TableColumnInGroup,
-} from '../components/ColumnSet/index.vue'
-import type { CSSProperties } from 'vue'
+  CellSlotProps
+} from '../type'
 
 type RowClassGetter = (param: {
   columns: TableColumn[] | TableColumnInGroup[]
@@ -10,24 +10,6 @@ type RowClassGetter = (param: {
   rowIndex: number
 }) => string
 
-export type CellSlotProps = {
-  column: TableColumn | TableColumnInGroup
-  columns: TableColumn[] | TableColumnInGroup[]
-  columnIndex: number
-  depth: number
-  style: CSSProperties
-  rowData: any
-  rowIndex: number
-  isScrolling: boolean
-  expandIconProps?:
-    | {
-        rowData: any
-        rowIndex: number
-        onExpand: (expand: boolean) => void
-      }
-    | undefined
-}
-
 type CellClassGetter = (param: CellSlotProps) => string
 
 const defaultCellClass = 'el-table-v2__cell-text'

src/views/realTime/type.d.ts

@@ -0,0 +1,51 @@
+import { Ref } from 'vue'
+import type { TableInstance, Column } from 'element-plus'
+import type { CSSProperties } from 'vue'
+
+export type StationFormData = {
+  startDate: string
+  endDate: string
+  flightStatus: string
+  flightWarning: string
+  waybillType: string
+}
+export type selectOptions = {
+  label: string | number
+  value: string | number | boolean | object
+}[]
+export type KeyType = string | number | symbol
+export interface TableColumn<T = any> extends Column<T> {
+  dataKey: KeyType
+  title: string
+}
+export interface TableColumnInGroup<T = any> extends TableColumn<T> {
+  groupTitle: string
+}
+export interface tableColumnGroup {
+  title: string
+  columns: TableColumnInGroup[]
+}
+export type CellSlotProps = {
+  column: TableColumn | TableColumnInGroup
+  columns: TableColumn[] | TableColumnInGroup[]
+  columnIndex: number
+  depth: number
+  style: CSSProperties
+  rowData: any
+  rowIndex: number
+  isScrolling: boolean
+  expandIconProps?:
+    | {
+        rowData: any
+        rowIndex: number
+        onExpand: (expand: boolean) => void
+      }
+    | undefined
+}
+interface ExportOptions {
+  table: TableInstance | Ref<TableInstance>
+  sheetName?: string
+  fileName?: string
+  headerRowNumber?: number
+}
+export type ExportHandler = (option: ExportOptions) => void

typings/global.d.ts

@@ -7,6 +7,9 @@ declare global {
   declare let GLOBAL_VAR: any
   declare let defineOptions: any
   declare let $ref: any
+  declare const PLATFROM_CONFIG: any
+  declare const LOOP_INTERVAL: any
+  declare const DATACONTENT_ID: any
 }
 
 export {}