表格筛选问题修改、交接复核颜色提示

src/components/SimpleTable/index.vue

@@ -26,7 +26,7 @@
       <template #header>
         <TableHeaderCell
           v-model:filter-values="filterValueMap[column.columnName]"
-          v-model:sort-rule="tableDataSortRuleMap[column.columnName]"
+          v-model:sort-rule="sortRuleMap[column.columnName]"
           :label="column.columnLabel"
           :desc="column.columnDescribe"
           :filter-options="filterOptionMap[column.columnName]"
@@ -222,7 +222,7 @@ watchEffect(() => {
   tableData.value = props.data
 })
 
-const { filterOptionMap, filterValueMap, tableDataSortRuleMap, dealedTableData } = useTableFilterAndSort(
+const { filterOptionMap, filterValueMap, sortRuleMap, dealedTableData } = useTableFilterAndSort(
   tableColumns,
   tableData
 )

src/hooks/useTableFilterAndSort.ts

@@ -32,19 +32,27 @@ export function useTableFilterAndSort(
   })
 
   const filterOptionMap = reactive({})
-  const filterValueMap = reactive(defaultFilterValueMap)
-  const tableDataSortRuleMap = reactive(defaultSortRuleMap)
+  const filterValueMap = reactive({})
+  const mergedFilterValueMap = computed<{ [x: string]: string[] }>(() => ({
+    ...unref(defaultFilterValueMap),
+    ...filterValueMap,
+  }))
+  const sortRuleMap = reactive({})
+  const mergedSortRuleMap = computed<{ [x: string]: string }>(() => ({
+    ...unref(defaultSortRuleMap),
+    ...sortRuleMap,
+  }))
   const dealedTableData = computed(() => {
     const filtered = tableData.value.filter(item => {
       let flag = true
-      Object.entries(unref(filterValueMap)).forEach(([key, arr]) => {
+      Object.entries(unref(mergedFilterValueMap)).forEach(([key, arr]) => {
         if (arr.length && !arr.includes(String(item[key]))) {
           flag = false
         }
       })
       return flag
     })
-    const sortRules = Object.entries(unref(tableDataSortRuleMap)).reduce(
+    const sortRules = Object.entries(unref(mergedSortRuleMap)).reduce(
       (pre: [string[], ('asc' | 'desc')[]], [key, value]) => {
         if (value) {
           pre[0].push(key)
@@ -60,7 +68,7 @@ export function useTableFilterAndSort(
   return {
     filterOptionMap,
     filterValueMap,
-    tableDataSortRuleMap,
+    sortRuleMap,
     dealedTableData,
   }
 }

src/views/realTime/components/AirportView/index.scss

@@ -80,6 +80,9 @@
             &.cell-alarm {
               background-color: #f38080;
             }
+            &.cell-success {
+              background-color: #46af43;
+            }
             &.cell-click .el-table-v2__cell-text {
               color: #2d67e3;
               cursor: pointer;

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

@@ -114,7 +114,7 @@ const customRendererColumns = computed(() =>
     headerCellRenderer: ({column}: HeaderRenderProps) => (
       <TableHeaderCell
         v-model:filterValues={filterValueMap[column.columnName]}
-        v-model:sortRule={tableDataSortRuleMap[column.columnName]}
+        v-model:sortRule={sortRuleMap[column.columnName]}
         label={tableColumnFormatter(column.columnLabel)}
         desc={column.columnDescribe}
         filterOptions={filterOptionMap[column.columnName]}
@@ -157,7 +157,7 @@ const dealedCount = ref(0)
 const rowClass: RowClassGetter = (params) => {
   const { rowData, rowIndex } = params
   const classes: string[] = []
-  if (rowData.hasTakenOff || rowData.hasLanded) {
+  if (rowData.hasTakenOff === 'Y' || rowData.hasLanded === 'Y') {
     classes.push('bg-gray')
     if (dealedCount.value < tableData.value.length && rowIndex === dealedCount.value - 1) {
       classes.push('underline-red')
@@ -235,7 +235,7 @@ const flightStateFilter = computed<{} | { [x: string]: string[] }>(() => {
 const {
   filterOptionMap,
   filterValueMap,
-  tableDataSortRuleMap,
+  sortRuleMap,
   dealedTableData,
 } = useTableFilterAndSort(
   tableColumns,

src/views/realTime/hooks/useTableStyle.ts

@@ -74,12 +74,6 @@ export function useTableStyle(tableName?: string) {
     rowIndex,
   }) => {
     const classes: string[] = []
-    // if ((['4/243', '0/6'] as any[]).includes(cellData)) {
-    //   classes.push('cell-warning')
-    // }
-    // if ((['5/357'] as any).includes(cellData)) {
-    //   classes.push('cell-alarm')
-    // }
     if ((['flightNO'] as any[]).includes(column.dataKey)) {
       classes.push('cell-click')
     }
@@ -87,11 +81,23 @@ export function useTableStyle(tableName?: string) {
       (column.dataKey === 'register' &&
         typeof cellData === 'string' &&
         cellData.split('/').some(char => Number(char) > 0)) ||
-      (['pullregisterTime', 'pullRegisterTime'].includes(column.dataKey) &&
+      ((['pullregisterTime', 'pullRegisterTime'] as any[]).includes(
+        column.dataKey
+      ) &&
         typeof cellData === 'string')
     ) {
       classes.push('cell-warning')
     }
+    if (
+      (['depotJoin', 'resure'] as any[]).includes(column.dataKey) &&
+      (cellData ?? '') !== ''
+    ) {
+      if (cellData === rowData['stowage']) {
+        classes.push('cell-success')
+      } else if ((rowData['planeDownTime'] ?? '') !== '') {
+        classes.push('cell-alarm')
+      }
+    }
     return classes.join(' ')
   }