数据查询

src/components/SimpleTable/index.vue

@@ -4,6 +4,7 @@
     v-bind="tableProps"
     v-el-table-infinite-scroll="scrollOver"
     :data="dealedTableData"
+    :header-cell-style="{ background: '#F9FAFC' }"
     @cell-click="(...args:any[]) => { emit('cellClick', ...args) }"
     @cell-contextmenu="(...args:any[]) => { emit('cellContextmenu', ...args) }"
     @cell-dblclick="(...args:any[]) => { emit('cellDblclick', ...args) }"

src/views/dataQuery/components/DataQueryView/index.vue

@@ -169,27 +169,41 @@
     >
       <SimpleTable
         ref="tableRef"
-        :data="tableData"
+        :data="
+          tableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)
+        "
         :columns="tableColumns"
         :cell-class-name="cellClass"
         :column-props="{ formatter }"
+        height="calc(100vh - 220px)"
         @cell-click="cellClickHandler"
-        @scroll-over="load"
       />
+      <el-pagination
+        background
+        v-if="tableData.length > 0"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        layout="prev, pager, next, jumper"
+        :total="tableData.length"
+        :page-size="pagesize"
+        style="position: absolute; right: 0; bottom: 10px"
+      >
+      </el-pagination>
     </div>
   </div>
 </template>
 
 <script setup lang="tsx">
-import { Search } from '@element-plus/icons-vue'
-import ColumnSet from '@/components/ColumnSet/index.vue'
-import SimpleTable from '@/components/SimpleTable/index.vue'
-import { ElMessage, FormInstance } from 'element-plus'
-import { parseTime } from '@/utils/validate'
-import { useTable } from './useTable'
-import { useTableColumnSet } from '@/hooks/useTableColumnSet'
-import { CommonTableFormatter } from '~/common'
-import { Query } from '@/api/webApi'
+import { Search } from "@element-plus/icons-vue";
+import ColumnSet from "@/components/ColumnSet/index.vue";
+import SimpleTable from "@/components/SimpleTable/index.vue";
+import { ElMessage, FormInstance } from "element-plus";
+import { parseTime } from "@/utils/validate";
+import { useTable } from "./useTable";
+import { useTableColumnSet } from "@/hooks/useTableColumnSet";
+import { CommonTableFormatter } from "~/common";
+import { Query } from "@/api/webApi";
+import { json } from "body-parser";
 
 const props = defineProps({
   name: {
@@ -200,64 +214,65 @@ const props = defineProps({
     type: String,
     required: true,
   },
-})
-
-const today = parseTime(new Date(), '{y}-{m}-{d}') as string
+});
+const currentPage = ref<number>(1);
+const pagesize = ref<number>(11);
+const today = parseTime(new Date(), "{y}-{m}-{d}") as string;
 const formData = reactive({
   flightDate: today,
-  inOrOut: 'out',
-  flightType: '',
-  sAirport: '',
-  eAirport: '',
-  planeType: '',
-  sFlightDate: '',
-  company: '',
+  inOrOut: "out",
+  flightType: "",
+  sAirport: "",
+  eAirport: "",
+  planeType: "",
+  sFlightDate: "",
+  company: "",
   startDate: today,
   endDate: today,
-  keyWords: '',
-})
+  keyWords: "",
+});
 watchEffect(() => {
-  if (formData.inOrOut === 'in') {
-    formData.sAirport = ''
-    formData.eAirport = 'SZX'
+  if (formData.inOrOut === "in") {
+    formData.sAirport = "";
+    formData.eAirport = "SZX";
   } else {
-    formData.sAirport = 'SZX'
-    formData.eAirport = ''
+    formData.sAirport = "SZX";
+    formData.eAirport = "";
   }
   if (!formData.startDate || !formData.endDate) {
-    return
+    return;
   }
-  const start = new Date(formData.startDate).getTime()
-  const end = new Date(formData.endDate).getTime()
+  const start = new Date(formData.startDate).getTime();
+  const end = new Date(formData.endDate).getTime();
   if (start > end) {
-    ElMessage.warning('开始时间不能晚于结束时间')
-    formData.endDate = ''
+    ElMessage.warning("开始时间不能晚于结束时间");
+    formData.endDate = "";
   }
   if (start <= end - 2 * 24 * 60 * 60 * 1000) {
-    ElMessage.warning('间隔不能超过2天')
-    formData.endDate = ''
+    ElMessage.warning("间隔不能超过2天");
+    formData.endDate = "";
   }
-})
+});
 const disabledEndDate = (endDate: Date) => {
-  const start = new Date(formData.startDate + ' 00:00:00').getTime()
-  const end = endDate.getTime()
-  return start > end || start <= end - 2 * 24 * 60 * 60 * 1000
-}
+  const start = new Date(formData.startDate + " 00:00:00").getTime();
+  const end = endDate.getTime();
+  return start > end || start <= end - 2 * 24 * 60 * 60 * 1000;
+};
 const datePreTitle = (title: string) => {
-  return <div class="date-pre-title">{title}：</div>
-}
+  return <div class="date-pre-title">{title}：</div>;
+};
 
 const searchTitleMap = {
-  flight: '航班号',
-  waybill: '运单号',
-  freight: '货物编码',
-}
+  flight: "航班号",
+  waybill: "运单号",
+  freight: "货物编码",
+};
 
 const keyWordsPlaceHolder = computed(
-  () => `请输入${searchTitleMap[props.name] ?? '内容'}进行搜索`
-)
+  () => `请输入${searchTitleMap[props.name] ?? "内容"}进行搜索`
+);
 
-const airportOptions = ref<{ value: string; label: string }[]>([])
+const airportOptions = ref<{ value: string; label: string }[]>([]);
 const getAirports = async () => {
   try {
     const {
@@ -267,31 +282,31 @@ const getAirports = async () => {
     } = await Query<{ [x: string]: string }>({
       id: DATACONTENT_ID.airportCode,
       dataContent: [],
-    })
+    });
     if (Number(code) !== 0) {
-      throw new Error(message || '失败')
+      throw new Error(message || "失败");
     }
     airportOptions.value = listValues.map(({ code3 }) => ({
       value: code3,
       label: code3,
-    }))
+    }));
   } catch (error) {
-    console.error(error)
+    console.error(error);
   }
-}
+};
 onMounted(() => {
-  if (props.name === 'flight') {
-    getAirports()
+  if (props.name === "flight") {
+    getAirports();
   }
-})
+});
 
 const keyWordsValidator = (rule: any, value: any, callback: any) => {
-  const searchTitle = searchTitleMap[props.name] ?? '关键词'
+  const searchTitle = searchTitleMap[props.name] ?? "关键词";
   if (!value) {
-    if (['flight'].includes(props.name)) {
-      return callback()
+    if (["flight"].includes(props.name)) {
+      return callback();
     } else {
-      return callback(new Error(`请输入${searchTitle}`))
+      return callback(new Error(`请输入${searchTitle}`));
     }
   }
   const regsMap: { [x: string]: RegExp[] } = {
@@ -299,181 +314,191 @@ const keyWordsValidator = (rule: any, value: any, callback: any) => {
     flight: [/^[0-9]{1,4}$/],
     waybill: [/^[0-9]{8}$/, /^[0-9]{11}$/, /^[0-9]{3}\-[0-9]{8}$/],
     freight: [/^[0-9]{5}$/, /^[0-9]{3}\-[0-9]{8}\-[0-9]{5}$/],
-  }
-  const regs = regsMap[props.name] ?? []
-  const notMatched = regs.length && regs.every(reg => !reg.test(value))
+  };
+  const regs = regsMap[props.name] ?? [];
+  const notMatched = regs.length && regs.every((reg) => !reg.test(value));
   if (notMatched) {
-    return callback(new Error(`请输入正确的${searchTitle}`))
+    return callback(new Error(`请输入正确的${searchTitle}`));
   }
-  return callback()
-}
+  return callback();
+};
 const rules = {
-  startDate: [{ required: true, message: '请选择开始日期', trigger: 'blur' }],
-  endDate: [{ required: true, message: '请选择结束日期', trigger: 'blur' }],
-  keyWords: [{ validator: keyWordsValidator, trigger: 'blur' }],
-  flightDate: [{ required: true, message: '请选择航班日期', trigger: 'blur' }],
+  startDate: [{ required: true, message: "请选择开始日期", trigger: "blur" }],
+  endDate: [{ required: true, message: "请选择结束日期", trigger: "blur" }],
+  keyWords: [{ validator: keyWordsValidator, trigger: "blur" }],
+  flightDate: [{ required: true, message: "请选择航班日期", trigger: "blur" }],
   company: [
     {
       pattern: /^[A-Za-z0-9][A-Za-z]$/,
-      message: '请输入正确的航司',
-      trigger: 'blur',
+      message: "请输入正确的航司",
+      trigger: "blur",
     },
   ],
-}
-const formRef = ref<FormInstance | null>()
+};
+const formRef = ref<FormInstance | null>();
 const dataQuery = () => {
-  formRef.value?.validate(valid => {
+  formRef.value?.validate((valid) => {
     if (valid) {
-      tableInit()
-      load()
+      tableInit();
+      getTableData();
+      // load();
     }
-  })
-}
+  });
+};
 const resetForm = () => {
-  formRef.value?.resetFields()
-}
+  formRef.value?.resetFields();
+};
 
-const loading = ref(false)
-const page = ref(1)
-const noMore = ref(false)
+const loading = ref(false);
+const page = ref(1);
+const noMore = ref(false);
 const { tableColumns, tableData, getTableData } = useTable(
   props.name,
   formData,
   page,
   noMore,
   loading
-)
-const load = () => {
-  if (loading.value || noMore.value) {
-    return
-  }
-  page.value++
-  getTableData()
-}
+);
+// const load = () => {
+//   if (loading.value || noMore.value) {
+//     return
+//   }
+//   page.value++
+//   getTableData()
+// }
+const handleSizeChange = (val) => {
+  pagesize.value = val;
+};
+const handleCurrentChange = (val) => {
+  currentPage.value = val;
+};
 const tableInit = () => {
-  page.value = 0
-  noMore.value = false
-  tableData.value = []
-}
+  page.value = 0;
+  noMore.value = false;
+  tableData.value = [];
+};
 
-const { columnChecked } = useTableColumnSet(tableColumns)
+const { columnChecked } = useTableColumnSet(tableColumns);
 
 const flightStateMap = {
-  CAN: '取消',
-  DLY: '延误',
-}
-const flightTypeMap = ['货机', '客机', '其他']
+  CAN: "取消",
+  DLY: "延误",
+};
+const flightTypeMap = ["货机", "客机", "其他"];
 const formatter: CommonTableFormatter = (row, column, cellValue, index) => {
-  const value = String(cellValue ?? '').trim()
-  if (column.property.includes('Time')) {
-    return value.replace(/[T|\s]+/, '\n')
+  const value = String(cellValue ?? "").trim();
+  if (column.property.includes("Time")) {
+    return value.replace(/[T|\s]+/, "\n");
   }
-  if (column.property === 'DIType' && value) {
-    return value === 'DOM' ? '国内' : '国际'
+  if (column.property === "DIType" && value) {
+    return value === "DOM" ? "国内" : "国际";
   }
-  if (column.property === 'flightState') {
-    return value ? flightStateMap[value] ?? '正常' : '正常'
+  if (column.property === "flightState") {
+    return value ? flightStateMap[value] ?? "正常" : "正常";
   }
-  if (column.property === 'flightType') {
-    return typeof cellValue === 'number'
-      ? flightTypeMap[cellValue] ?? '其他'
-      : '其他'
+  if (column.property === "flightType") {
+    return typeof cellValue === "number"
+      ? flightTypeMap[cellValue] ?? "其他"
+      : "其他";
   }
-  return value
-}
+  return value;
+};
 
 const cellClass = ({ row, column, rowIndex, columnIndex }) => {
-  const classes: string[] = []
+  const classes: string[] = [];
   switch (props.name) {
-    case 'flight':
-      if (['flightNO'].includes(column.property) && row[column.property]) {
-        classes.push('cell-click')
+    case "flight":
+      if (["flightNO"].includes(column.property) && row[column.property]) {
+        classes.push("cell-click");
       }
-      break
-    case 'waybill':
-      if (['stockCode'].includes(column.property) && row[column.property]) {
-        classes.push('cell-click')
+      break;
+    case "waybill":
+      if (["stockCode"].includes(column.property) && row[column.property]) {
+        classes.push("cell-click");
       }
-      break
-    case 'freight':
-      break
+      break;
+    case "freight":
+      break;
     default:
-      break
+      break;
   }
-  return classes.join(' ')
-}
+  return classes.join(" ");
+};
 
-const router = useRouter()
+const router = useRouter();
 
 const cellClickHandler = (row, column, cell, event) => {
   switch (props.name) {
-    case 'flight': {
+    case "flight": {
       switch (column.property) {
-        case 'flightNO': {
+        case "flightNO": {
           if (
             !row.flightAllNO ||
             !row.flightDate ||
-            !['INT', 'DOM'].includes(row.DIType) ||
-            typeof row.FFID !== 'string' ||
-            !['A', 'D'].includes(row.FFID.at(-1))
+            !["INT", "DOM"].includes(row.DIType) ||
+            typeof row.FFID !== "string" ||
+            !["A", "D"].includes(row.FFID.at(-1))
           ) {
-            ElMessage.error('航班信息缺失!')
-            return
+            ElMessage.error("航班信息缺失!");
+            return;
           }
-          const viewName = `${row.DIType === 'DOM' ? '' : 'International'}${
-            row.FFID.at(-1) === 'D' ? 'Departure' : 'Arrival'
-          }Flight`
+          const viewName = `${row.DIType === "DOM" ? "" : "International"}${
+            row.FFID.at(-1) === "D" ? "Departure" : "Arrival"
+          }Flight`;
           router.push({
             path: `/dataQuery/flightQuery/${viewName}`,
             query: {
               flightNO: row.flightAllNO,
               flightDate: row.flightDate,
             },
-          })
-          break
+          });
+          break;
         }
         default:
-          break
+          break;
       }
-      break
+      break;
     }
-    case 'waybill': {
+    case "waybill": {
       switch (column.property) {
-        case 'stockCode': {
+        case "stockCode": {
           if (
             !row.stockCode ||
             !row.flightDate ||
-            !['INT', 'DOM'].includes(row.DIType) ||
-            typeof row.FFID !== 'string' ||
-            !['A', 'D'].includes(row.FFID.at(-1))
+            !["INT", "DOM"].includes(row.DIType) ||
+            typeof row.FFID !== "string" ||
+            !["A", "D"].includes(row.FFID.at(-1))
           ) {
-            ElMessage.error('运单信息缺失!')
-            return
+            ElMessage.error("运单信息缺失!");
+            return;
           }
-          const viewName = `${row.DIType === 'DOM' ? '' : 'International'}${
-            row.FFID.at(-1) === 'D' ? 'Departure' : 'Arrival'
-          }Waybill`
+          const viewName = `${row.DIType === "DOM" ? "" : "International"}${
+            row.FFID.at(-1) === "D" ? "Departure" : "Arrival"
+          }Waybill`;
           router.push({
             path: `/dataQuery/waybillQuery/${viewName}`,
             query: {
               waybillNO: row.stockCode,
               flightDate: row.flightDate,
             },
-          })
-          break
+          });
+          break;
         }
       }
-      break
+      break;
     }
-    case 'freight':
-      break
+    case "freight":
+      break;
     default:
-      break
+      break;
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>
+:deep(.el-pagination.is-background .el-pager li:not(.is-disabled).is-active) {
+  background-color: #ac014d !important; //修改默认的背景色
+}
 .data-query {
   width: 100%;
   height: 100%;

src/views/dataQuery/components/DataQueryView/useTable.ts

@@ -1,8 +1,8 @@
-import { Query } from '@/api/webApi'
-import { Ref } from 'vue'
-import { CommonData, CommonTableColumn, CommonValue } from '~/common'
+import { Query } from "@/api/webApi";
+import { Ref } from "vue";
+import { CommonData, CommonTableColumn, CommonValue } from "~/common";
 
-const idGetter = (name: string) => DATACONTENT_ID[name + 'DataQuery']
+const idGetter = (name: string) => DATACONTENT_ID[name + "DataQuery"];
 
 export function useTable(
   tableName: string,
@@ -11,15 +11,15 @@ export function useTable(
   noMore: Ref<boolean>,
   loading?: Ref<boolean>
 ) {
-  const tableColumns = ref<CommonTableColumn[]>([])
-  const tableData = ref<CommonData[]>([])
+  const tableColumns = ref<CommonTableColumn[]>([]);
+  const tableData = ref<CommonData[]>([]);
 
   const getTableData = async (defaultDataContent?: CommonValue[]) => {
     if (!idGetter(tableName)) {
-      return
+      return;
     }
     if (loading) {
-      loading.value = true
+      loading.value = true;
     }
     try {
       let {
@@ -34,16 +34,16 @@ export function useTable(
         startDate,
         endDate,
         keyWords,
-      } = formData
+      } = formData;
       if (
-        tableName === 'waybill' &&
-        typeof keyWords === 'string' &&
+        tableName === "waybill" &&
+        typeof keyWords === "string" &&
         keyWords.length === 11
       ) {
-        keyWords = `${keyWords.slice(0, 3)}-${keyWords.slice(3)}`
+        keyWords = `${keyWords.slice(0, 3)}-${keyWords.slice(3)}`;
       }
       let dataContent =
-        tableName === 'flight'
+        tableName === "flight"
           ? [
               keyWords,
               company,
@@ -54,8 +54,8 @@ export function useTable(
               flightType,
               sFlightDate,
             ]
-          : [startDate, endDate, keyWords]
-      dataContent = dataContent.map(v => (v === '' ? null : v))
+          : [startDate, endDate, keyWords];
+      dataContent = dataContent.map((v) => (v === "" ? null : v));
       const {
         code,
         returnData: { columnSet, listValues },
@@ -63,55 +63,55 @@ export function useTable(
       } = await Query<CommonData>({
         id: idGetter(tableName),
         dataContent: defaultDataContent ?? dataContent,
-        needPage: page.value,
-      })
+        // needPage: page.value,
+      });
       if (Number(code) !== 0) {
-        throw new Error(message || '失败')
+        throw new Error(message || "失败");
       }
-      tableColumns.value = columnSet.map(column => ({
+      tableColumns.value = columnSet.map((column) => ({
         ...column,
         width:
-          (tableName === 'flight' &&
-            ['IATACode', 'flightNO'].includes(column.columnName) &&
+          (tableName === "flight" &&
+            ["IATACode", "flightNO"].includes(column.columnName) &&
             80) ||
           undefined,
-      }))
+      }));
       if (listValues.length) {
         tableData.value.push(
           ...listValues.filter(
-            row =>
+            (row) =>
               !Object.values(row).some(
-                cellValue =>
-                  typeof cellValue === 'string' &&
-                  cellValue.includes('undefined')
+                (cellValue) =>
+                  typeof cellValue === "string" &&
+                  cellValue.includes("undefined")
               )
           )
-        )
+        );
       } else {
-        page.value--
-        noMore.value = true
+        page.value--;
+        noMore.value = true;
       }
     } catch (error) {
-      console.error(error)
-      page.value--
-      noMore.value = true
+      console.error(error);
+      page.value--;
+      noMore.value = true;
     }
     if (loading) {
-      loading.value = false
+      loading.value = false;
     }
-  }
+  };
 
   onMounted(() => {
     const defaultDataContent =
-      tableName === 'flight'
-        ? [null, null, '2000-01-01', null, null, null, null, null]
-        : [null, null, null]
-    getTableData(defaultDataContent)
-  })
+      tableName === "flight"
+        ? [null, null, "2000-01-01", null, null, null, null, null]
+        : [null, null, null];
+    getTableData(defaultDataContent);
+  });
 
   return {
     tableColumns,
     tableData,
     getTableData,
-  }
+  };
 }

src/views/dataQuery/message/index.vue

@@ -83,122 +83,141 @@
     >
       <SimpleTable
         ref="tableRef"
-        :data="tableData"
+        :data="
+          tableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)
+        "
         :columns="tableColumns"
+        height="calc(100vh - 220px)"
         :column-props="{ formatter }"
         sequence
-        @scroll-over="load"
       />
+      <el-pagination
+        background
+        v-if="tableData.length > 0"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        layout="prev, pager, next, jumper"
+        :total="tableData.length"
+        :page-size="pagesize"
+        style="position: absolute; right: 0; bottom: 10px"
+      >
+      </el-pagination>
     </div>
   </div>
 </template>
 
 <script lang="tsx">
 export default {
-  name: 'MessageQuery',
-}
+  name: "MessageQuery",
+};
 </script>
 
 <script setup lang="tsx">
-import { Search } from '@element-plus/icons-vue'
-import ColumnSet from '@/components/ColumnSet/index.vue'
-import SimpleTable from '@/components/SimpleTable/index.vue'
-import { ElMessage, FormInstance } from 'element-plus'
-import { parseTime } from '@/utils/validate'
-import { useTableColumnSet } from '@/hooks/useTableColumnSet'
+import { Search } from "@element-plus/icons-vue";
+import ColumnSet from "@/components/ColumnSet/index.vue";
+import SimpleTable from "@/components/SimpleTable/index.vue";
+import { ElMessage, FormInstance } from "element-plus";
+import { parseTime } from "@/utils/validate";
+import { useTableColumnSet } from "@/hooks/useTableColumnSet";
 import {
   CommonData,
   CommonTableColumn,
   CommonTableFormatter,
   CommonValue,
-} from '~/common'
-import { Query } from '@/api/webApi'
-
-const today = parseTime(new Date(), '{y}-{m}-{d}') as string
+} from "~/common";
+import { Query } from "@/api/webApi";
+const currentPage = ref<number>(1);
+const pagesize = ref<number>(11);
+const today = parseTime(new Date(), "{y}-{m}-{d}") as string;
 const formData = reactive({
   startDate: today,
   endDate: today,
-  messageType: '',
-  waybillNO: '',
-})
+  messageType: "",
+  waybillNO: "",
+});
 
 watchEffect(() => {
   if (!formData.startDate || !formData.endDate) {
-    return
+    return;
   }
-  const start = new Date(formData.startDate).getTime()
-  const end = new Date(formData.endDate).getTime()
+  const start = new Date(formData.startDate).getTime();
+  const end = new Date(formData.endDate).getTime();
   if (start > end) {
-    ElMessage.warning('开始时间不能晚于结束时间')
-    formData.endDate = ''
+    ElMessage.warning("开始时间不能晚于结束时间");
+    formData.endDate = "";
   }
   if (start <= end - 2 * 24 * 60 * 60 * 1000) {
-    ElMessage.warning('间隔不能超过2天')
-    formData.endDate = ''
+    ElMessage.warning("间隔不能超过2天");
+    formData.endDate = "";
   }
-})
-
+});
+const handleSizeChange = (val) => {
+  pagesize.value = val;
+};
+const handleCurrentChange = (val) => {
+  currentPage.value = val;
+};
 const disabledEndDate = (endDate: Date) => {
-  const start = new Date(formData.startDate + ' 00:00:00').getTime()
-  const end = endDate.getTime()
-  return start > end || start <= end - 2 * 24 * 60 * 60 * 1000
-}
+  const start = new Date(formData.startDate + " 00:00:00").getTime();
+  const end = endDate.getTime();
+  return start > end || start <= end - 2 * 24 * 60 * 60 * 1000;
+};
 const datePreTitle = (title: string) => {
-  return <div class="date-pre-title">{title}：</div>
-}
+  return <div class="date-pre-title">{title}：</div>;
+};
 
 const messageTypeOptions = ref(
   Object.entries(MESSAGE_TYPE).map(([value, label]) => ({
     label,
     value,
   }))
-)
+);
 
 const waybillValidator = (rule: any, value: any, callback: any) => {
   if (!value) {
-    return callback()
+    return callback();
   }
   const notMatched = [
     /^[0-9]{8}$/,
     /^[0-9]{11}$/,
     /^[0-9]{3}\-[0-9]{8}$/,
-  ].every(reg => !reg.test(value))
+  ].every((reg) => !reg.test(value));
   if (notMatched) {
-    return callback(new Error('请输入正确的运单号'))
+    return callback(new Error("请输入正确的运单号"));
   }
-  return callback()
-}
+  return callback();
+};
 const rules = {
-  waybillNO: [{ validator: waybillValidator, trigger: 'blur' }],
-}
+  waybillNO: [{ validator: waybillValidator, trigger: "blur" }],
+};
 
-const formRef = ref<FormInstance | null>()
+const formRef = ref<FormInstance | null>();
 const dataQuery = () => {
-  formRef.value?.validate(valid => {
+  formRef.value?.validate((valid) => {
     if (valid) {
-      tableInit()
-      load()
+      tableInit();
+      getTableData();
     }
-  })
-}
+  });
+};
 const resetForm = () => {
-  formRef.value?.resetFields()
-}
+  formRef.value?.resetFields();
+};
 
-const loading = ref(false)
-const page = ref(1)
-const noMore = ref(true)
-const tableColumns = ref<CommonTableColumn[]>([])
-const tableData = ref<CommonData[]>([])
+const loading = ref(false);
+const page = ref(1);
+const noMore = ref(true);
+const tableColumns = ref<CommonTableColumn[]>([]);
+const tableData = ref<CommonData[]>([]);
 const getTableData = async (defaultDataContent?: CommonValue[]) => {
   if (loading) {
-    loading.value = true
+    loading.value = true;
   }
   try {
-    let { startDate, endDate, messageType, waybillNO } = formData
+    let { startDate, endDate, messageType, waybillNO } = formData;
     const dataContent = [startDate, endDate, messageType, waybillNO].map(
-      v => v || null
-    )
+      (v) => v || null
+    );
     const {
       code,
       returnData: { listValues },
@@ -207,84 +226,84 @@ const getTableData = async (defaultDataContent?: CommonValue[]) => {
       id: DATACONTENT_ID.messageDataQuery,
       dataContent: defaultDataContent ?? dataContent,
       needPage: page.value,
-    })
+    });
     if (Number(code) !== 0) {
-      throw new Error(message || '失败')
+      throw new Error(message || "失败");
     }
     if (listValues.length) {
       tableData.value.push(
         ...listValues.filter(
-          row =>
+          (row) =>
             !Object.values(row).some(
-              cellValue =>
-                typeof cellValue === 'string' && cellValue.includes('undefined')
+              (cellValue) =>
+                typeof cellValue === "string" && cellValue.includes("undefined")
             )
         )
-      )
+      );
     } else {
-      page.value--
-      noMore.value = true
+      page.value--;
+      noMore.value = true;
     }
   } catch (error) {
-    console.error(error)
-    page.value--
-    noMore.value = true
+    console.error(error);
+    page.value--;
+    noMore.value = true;
   }
   if (loading) {
-    loading.value = false
+    loading.value = false;
   }
-}
+};
 const load = () => {
   if (loading.value || noMore.value) {
-    return
+    return;
   }
-  page.value++
-  getTableData()
-}
+  page.value++;
+  getTableData();
+};
 const tableInit = () => {
-  page.value = 0
-  noMore.value = false
-  tableData.value = []
-}
+  page.value = 0;
+  noMore.value = false;
+  tableData.value = [];
+};
 
-const { columnChecked } = useTableColumnSet(tableColumns)
+const { columnChecked } = useTableColumnSet(tableColumns);
 
 const columns = [
   {
-    columnName: 'waybillNO',
-    columnLabel: '运单号',
+    columnName: "waybillNO",
+    columnLabel: "运单号",
   },
   {
-    columnName: 'fileName',
-    columnLabel: '文件名称',
+    columnName: "fileName",
+    columnLabel: "文件名称",
   },
   {
-    columnName: 'messageName',
-    columnLabel: '报文名称',
+    columnName: "messageName",
+    columnLabel: "报文名称",
   },
   {
-    columnName: 'messageState',
-    columnLabel: '收发状态',
+    columnName: "messageState",
+    columnLabel: "收发状态",
   },
   {
-    columnName: 'execTime',
-    columnLabel: '执行时间',
+    columnName: "execTime",
+    columnLabel: "执行时间",
   },
   {
-    columnName: 'airportState',
-    columnLabel: '报文收发方',
+    columnName: "airportState",
+    columnLabel: "报文收发方",
   },
   {
-    columnName: 'messageDetails',
-    columnLabel: '报文明细',
+    columnName: "messageDetails",
+    columnLabel: "报文明细",
     showOverflowTooltip: true,
     width: 300,
   },
-]
+];
 onMounted(() => {
-  tableColumns.value = columns.map(column => ({
-    columnDescribe: '',
-    dataType: '',
+  tableColumns.value = columns.map((column) => ({
+    columnDescribe: "",
+    dataType: "",
     needCount: null,
     needFilters: null,
     needGroup: null,
@@ -296,26 +315,26 @@ onMounted(() => {
     queryTemplateID: null,
     orderNumber: null,
     ...column,
-  }))
-})
+  }));
+});
 
 const messageStateMap = {
-  in: '收',
-  out: '发',
-}
+  in: "收",
+  out: "发",
+};
 const formatter: CommonTableFormatter = (row, column, cellValue, index) => {
-  const value = String(cellValue ?? '').trim()
-  if (column.property === 'fileName') {
-    return MESSAGE_TYPE[value] ?? value
+  const value = String(cellValue ?? "").trim();
+  if (column.property === "fileName") {
+    return MESSAGE_TYPE[value] ?? value;
   }
-  if (column.property === 'execTime') {
-    return value.replace('T', ' ')
+  if (column.property === "execTime") {
+    return value.replace("T", " ");
   }
-  if (column.property === 'messageState') {
-    return messageStateMap[value] ?? ''
+  if (column.property === "messageState") {
+    return messageStateMap[value] ?? "";
   }
-  return value
-}
+  return value;
+};
 </script>
 
 <style lang="scss" scoped>