表格序号问题

src/components/SimpleTable/index.vue

@@ -24,8 +24,9 @@
     @sort-change="(...args:any[]) => { emit('sortChange', ...args) }"
   >
     <el-table-column
-      v-if="sequence"
-      prop="index"
+      v-if="sequence || customSequence"
+      :prop="customSequence ? 'index' : undefined"
+      :type="customSequence ? undefined : 'index'"
       :fixed="hasFixedColumn"
       :width="50"
       align="center"
@@ -197,6 +198,7 @@ const props = withDefaults(
     columnProps?: TableColumnProps<CommonData>
     columns: (CommonTableColumn & TableColumnProps<CommonData>)[]
     sequence?: boolean
+    customSequence?: boolean
     filterSortOptions?: Options
     cacheKeys?: string[]
     labelFormatter?: (label: string) => string
@@ -250,6 +252,7 @@ const tableProps = computed(() => {
         'columnProps',
         'columns',
         'sequence',
+        'customSequence',
         'filterSortOptions',
         'cacheKeys',
         'labelFormatter',
@@ -295,12 +298,7 @@ watchEffect(() => {
     },
     []
   )
-  tableData.value = props.data.map((row, rowIndex) => {
-    if (props.sequence && (row.index ?? '') === '') {
-      row.index = rowIndex + 1
-    }
-    return row
-  })
+  tableData.value = props.data
 })
 
 const hasFixedColumn = computed(() =>

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

@@ -168,27 +168,27 @@
       class="data-query-table"
     >
       <SimpleTable
-        :header-cell-style="{ background: '#F9FAFC' }"
+        :header-cell-style="() => ({ background: '#F9FAFC' })"
         ref="tableRef"
         :data="
-          tableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)
+          tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
         "
         :columns="tableColumns"
-        sequence
         :cell-class-name="cellClass"
         :column-props="{ formatter }"
         height="calc(100vh - 220px)"
+        custom-sequence
         @cell-click="cellClickHandler"
       />
       <el-pagination
-        background
         v-if="tableData.length > 0"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
+        background
         layout="total, prev, pager, next, jumper"
         :total="tableData.length"
-        :page-size="pagesize"
+        :page-size="pageSize"
         style="position: absolute; right: 19px; bottom: 10px"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
       >
       </el-pagination>
     </div>
@@ -196,15 +196,15 @@
 </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'
 
 const props = defineProps({
   name: {
@@ -215,65 +215,65 @@ const props = defineProps({
     type: String,
     required: true,
   },
-});
-const currentPage = ref(1);
-const pagesize = ref(11);
-const today = parseTime(new Date(), "{y}-{m}-{d}") as string;
+})
+const currentPage = ref(1)
+const pageSize = ref(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 {
@@ -283,31 +283,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[] } = {
@@ -315,58 +315,58 @@ 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 route = useRoute();
-const formRef = ref<FormInstance | null>();
-const { flightDate, stockCode } = route.query;
+}
+const route = useRoute()
+const formRef = ref<FormInstance | null>()
+const { flightDate, stockCode } = route.query
 const dataQuery = () => {
-  formRef.value?.validate((valid) => {
+  formRef.value?.validate(valid => {
     if (valid) {
       if (stockCode) {
-        formData.keyWords = stockCode as string;
-        formData.startDate = flightDate as string;
-        formData.endDate = flightDate as string;
+        formData.keyWords = stockCode as string
+        formData.startDate = flightDate as string
+        formData.endDate = flightDate as string
       }
-      tableInit();
-      getTableData();
+      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
@@ -374,133 +374,131 @@ const { tableColumns, tableData, getTableData } = useTable(
 //   page.value++
 //   getTableData()
 // }
-const handleSizeChange = (val) => {
-  pagesize.value = val;
-};
-const handleCurrentChange = (val) => {
-  currentPage.value = val;
-};
+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 cellValue
-      ? flightTypeMap[cellValue] ?? "其他"
-      : "其他";
+  if (column.property === 'flightType') {
+    return cellValue ? 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>

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

@@ -97,8 +97,8 @@ const tableColumnsMap: {
       columnName: 'weight',
     },
     {
-      columnLabel: 'luggageCount',
-      columnName: '总件数',
+      columnLabel: '总件数',
+      columnName: 'luggageCount',
     },
     {
       columnLabel: '计费重量',
@@ -201,7 +201,10 @@ export function useTable(
       loading.value = false
     }
   }
+
   const route = useRoute()
+  const { flightDate, stockCode } = route.query
+
   onMounted(() => {
     if (tableColumnsMap[tableName]) {
       tableColumns.value = tableColumnsMap[tableName].map(column => ({
@@ -221,14 +224,19 @@ export function useTable(
       }))
     }
 
-    const { flightDate, stockCode } = route.query
-    const defaultDataContent =
-      tableName === 'flight'
-        ? [null, null, '2000-01-01', null, null, null, null, null]
-        : stockCode
-        ? [flightDate, flightDate, stockCode]
-        : [null, null, null]
-    getTableData(defaultDataContent as CommonValue[])
+    // const defaultDataContent =
+    //   tableName === 'flight'
+    //     ? [null, null, '2000-01-01', null, null, null, null, null]
+    //     : stockCode
+    //     ? [flightDate, flightDate, stockCode]
+    //     : [null, null, null]
+    // getTableData(defaultDataContent as CommonValue[])
+    if (tableName === 'waybill' && flightDate && stockCode) {
+      const queryDataContent = [flightDate, flightDate, stockCode] as string[]
+      getTableData(queryDataContent as CommonValue[])
+    } else if (tableName === 'freight') {
+      getTableData([null, null, null])
+    }
   })
 
   return {

src/views/dataQuery/message/index.vue

@@ -83,24 +83,24 @@
     >
       <SimpleTable
         ref="tableRef"
-        :header-cell-style="{ background: '#F9FAFC' }"
+        :header-cell-style="() => ({ background: '#F9FAFC' })"
         :data="
-          tableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)
+          tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
         "
         :columns="tableColumns"
         height="calc(100vh - 220px)"
         :column-props="{ formatter }"
-        sequence
+        custom-sequence
       />
       <el-pagination
-        background
         v-if="tableData.length > 0"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
+        background
         layout="prev, pager, next, jumper"
         :total="tableData.length"
-        :page-size="pagesize"
+        :page-size="pageSize"
         style="position: absolute; right: 19px; bottom: 10px"
+        @current-change="handleCurrentChange"
+        @size-change="handleSizeChange"
       >
       </el-pagination>
     </div>
@@ -128,7 +128,7 @@ import {
 } from '~/common'
 import { Query } from '@/api/webApi'
 const currentPage = ref<number>(1)
-const pagesize = ref<number>(11)
+const pageSize = ref<number>(11)
 const today = parseTime(new Date(), '{y}-{m}-{d}') as string
 const formData = reactive({
   startDate: today,
@@ -153,7 +153,7 @@ watchEffect(() => {
   }
 })
 const handleSizeChange = val => {
-  pagesize.value = val
+  pageSize.value = val
 }
 const handleCurrentChange = val => {
   currentPage.value = val