表格筛选修改

public/demo.js

@@ -10,13 +10,10 @@ const PLATFROM_CONFIG = {
 
 /* 轮询间隔 */
 const LOOP_INTERVAL = {
-  arrivalTable: 5 * 1000, // 进港视图表格
-  departureTable: 5 * 1000, // 离港视图表格
-  transferArrivalTable: 5 * 1000, // 中转进港表格
-  transferDepartureTable: 5 * 1000, // 中转离港表格
-  baggageTrack: 5 * 1000, // 行李跟踪节点信息
-  baggageDetails: 5 * 1000, // 行李详情表格
-  baggageMessage: 15 * 1000, // 行李原始报文
+  departureAirport: 30 * 1000,
+  internationalDepartureAirport: 30 * 1000,
+  arrivalAirport: 30 * 1000,
+  internationalArrivalAirport: 30 * 1000,
 }
 
 const DATACONTENT_ID = {

src/components/TableHeaderCell/index.vue

@@ -5,53 +5,51 @@
     </template>
     <template v-if="filterable">
       <el-popover
+        :visible="visible"
         class="table-header-cell-popover"
         placement="bottom"
-        trigger="click"
         @show="expand = true"
         @hide="expand = false"
       >
-        <span
-          v-if="filterStyle === 'underline'"
-          slot="reference"
-          :class="['btn-filter', { 'btn-filter-active': active }]"
-          >{{ label }}</span
+        <template v-if="filterStyle === 'underline'" #reference>
+          <span
+            :class="['btn-filter', { 'btn-filter-active': active }]"
+            @click="visible = !visible"
+            >{{ label }}</span
+          >
+        </template>
+        <template v-if="filterStyle === 'arrow'" #reference>
+          <i
+            :class="[
+              'filter-arrow',
+              'el-icon-arrow-down',
+              { 'arrow-active': active, 'arrow-expand': expand },
+            ]"
+            @click="visible = !visible"
+          />
+        </template>
+        <el-select
+          v-model="selections"
+          size="small"
+          placeholder="筛选"
+          multiple
+          filterable
+          default-first-option
+          collapse-tags
+          clearable
+          @change="
+            newVal => {
+              $emit('update:filter-values', newVal)
+            }
+          "
         >
-        <i
-          v-if="filterStyle === 'arrow'"
-          slot="reference"
-          :class="[
-            'filter-arrow',
-            'el-icon-arrow-down',
-            { 'arrow-active': active, 'arrow-expand': expand },
-          ]"
-        />
-        <el-form>
-          <el-form-item :label="label">
-            <el-select
-              v-model="selections"
-              size="small"
-              placeholder="筛选"
-              multiple
-              filterable
-              default-first-option
-              collapse-tags
-              clearable
-              @change="
-                newVal => {
-                  $emit('update:filter-values', newVal)
-                }
-              "
-            >
-              <el-option
-                v-for="(option, index) in filterOptions"
-                :key="option.value + index"
-                :value="option.value"
-                :label="option.label"
-              />
-            </el-select>
-          </el-form-item>
-        </el-form>
+          <el-option
+            v-for="(option, index) in filterOptions"
+            :key="option.value + index"
+            :value="option.value"
+            :label="option.label"
+          />
+        </el-select>
       </el-popover>
     </template>
     <template v-if="sortable">
@@ -93,6 +91,8 @@ const props = defineProps({
 
 const emit = defineEmits(['update:sortRule'])
 
+const visible = ref(false)
+
 const selections = ref<string[]>([])
 const expand = ref(false)
 const active = computed(() => !!props.filterValues?.length)
@@ -111,6 +111,12 @@ const sortChange = () => {
         : ''
   emit('update:sortRule', sortRule)
 }
+
+onUpdated(() => {
+  if (props.label === '航班号') {
+    console.log(filterable.value)
+  }
+})
 </script>
 
 <style lang="scss" scoped>

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

@@ -65,7 +65,10 @@ const needShowColumns = computed(() =>
 const emits = defineEmits(['checkedSubmit'])
 
 const inGroup = computed(() => {
-  return 'groupName' in needShowColumns.value[0]
+  return (
+    'groupName' in
+    (needShowColumns.value.length ? needShowColumns.value[0] : {})
+  )
 })
 
 const simpleClone = (obj: any) => JSON.parse(JSON.stringify(obj))

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

@@ -5,7 +5,7 @@
         v-model="formData.startDate"
         type="datetime"
         format="YYYY-MM-DD HH:mm"
-        value-format="YYYY-MM-DD hh:mm"
+        value-format="YYYY-MM-DD HH:mm"
         size="default"
         :clearable="false"
       />
@@ -15,7 +15,7 @@
         v-model="formData.endDate"
         type="datetime"
         format="YYYY-MM-DD HH:mm"
-        value-format="YYYY-MM-DD hh:mm"
+        value-format="YYYY-MM-DD HH:mm"
         size="default"
         :clearable="false"
       />
@@ -70,8 +70,9 @@
 </template>
 
 <script setup lang="ts">
-import { SelectOption } from '~/common'
+import { SelectOption, SelectOptionQueryResult } from '~/common'
 import { parseTime } from '@/utils/validate'
+import { Query } from '@/api/webApi'
 
 const props = defineProps({
   international: {
@@ -83,8 +84,8 @@ const props = defineProps({
 const emit = defineEmits(['formDataChange'])
 
 const formData = reactive({
-  startDate: parseTime(new Date(), '{y}-{m}-{d} {h}:{i}'),
-  endDate: parseTime(new Date(), '{y}-{m}-{d} {h}:{i}'),
+  startDate: `${parseTime(new Date(), '{y}-{m}-{d}')} 00:00`,
+  endDate: `${parseTime(new Date(), '{y}-{m}-{d}')} 23:59`,
   flightStatus: null,
   flightWarning: null,
   waybillType: null,
@@ -101,17 +102,33 @@ watchEffect(() => {
 const flightStatusOptions = ref<SelectOption[]>([])
 const flightWarningOptions = ref<SelectOption[]>([])
 const waybillTypeOptions = ref<SelectOption[]>([])
-const getFlightStatusOptions = async () => {}
-const getFlightWarningOptions = async () => {}
-const getWaybillTypeOptions = async () => {}
-const getSelectOptions = () => {
-  getFlightStatusOptions()
-  getFlightWarningOptions()
-  getWaybillTypeOptions()
+const getSelectOptions = async (id: number) => {
+  try {
+    const {
+      code,
+      returnData: { listValues },
+      message,
+    }: SelectOptionQueryResult = await Query({
+      id,
+      dataContent: [],
+    })
+    if (Number(code) !== 0) {
+      throw new Error(message ?? '失败')
+    }
+    const options = listValues.map(({ k, v, setlabel, setvalue }) => ({
+      k,
+      v,
+      setlabel,
+      setvalue,
+      [setlabel]: k,
+      [setvalue]: v,
+    }))
+    return options
+  } catch (error) {
+    console.error(error)
+    return []
+  }
 }
-onMounted(() => {
-  getSelectOptions()
-})
 </script>
 
 <style scoped lang="scss">

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

@@ -29,8 +29,8 @@
       <el-auto-resizer>
         <template #default="{ height, width }">
           <el-table-v2
-            :columns="filteredColumns"
-            :data="tableData"
+            :columns="tableColumns"
+            :data="dealedTableData"
             :width="width"
             :height="height"
             :footer-height="60"
@@ -38,11 +38,12 @@
           >
             <template #header-cell="slot: HeaderCellSlotProps">
               <TableHeaderCell
+                v-model:filter-values="filterValueMap[slot.column.columnName]"
+                v-model:sort-rule="tableDataSortRuleMap[slot.column.columnName]"
                 :label="slot.column.title"
                 :filter-options="filterOptionMap[slot.column.columnName]"
-                :filter-values="filterValueMap[slot.column.columnName]"
                 :sortable="slot.column.needSort"
-                :sort-rule.sync="tableDataSortRuleMap[slot.column.columnName]"
+                filter-style="underline"
               />
             </template>
             <template #cell="slot: CellSlotProps">
@@ -122,7 +123,7 @@ const { tableColumns, tableData } = useTableData(
   formData,
   international
 )
-const { columnChecked, filteredColumns } = useTableColumnSet(tableColumns)
+const { columnChecked } = useTableColumnSet(tableColumns)
 const { rowClass, cellClass } = useTableStyle()
 
 const tableDataCount = computed(() => ({
@@ -140,6 +141,7 @@ const {
   filterOptionMap,
   filterValueMap,
   tableDataSortRuleMap,
+  dealedTableData,
 } = useTableFilter(tableColumns, tableData)
 </script>
 <style lang="scss" scoped>

src/views/realTime/hooks/useTableColumnSet.ts

@@ -5,16 +5,16 @@ export default function useTableColumnSet(
   tableColumns: Ref<CommonTableColumn[]>
 ) {
   const filterColumnKeys = ref<string[]>([])
-  const filteredColumns = computed(() =>
-    tableColumns.value.filter(({ columnName }) =>
-      filterColumnKeys.value.includes(columnName)
-    )
-  )
+  watchEffect(() => {
+    tableColumns.value.forEach(column => {
+      column.hidden =
+        !column.needShow || !filterColumnKeys.value.includes(column.columnName)
+    })
+  })
   const columnChecked = (checkedColumnKeys: string[]) => {
     filterColumnKeys.value = checkedColumnKeys
   }
   return {
     columnChecked,
-    filteredColumns,
   }
 }

src/views/realTime/hooks/useTableData.ts

@@ -2,15 +2,463 @@ import { Ref } from 'vue'
 import { Query } from '@/api/webApi'
 import { CommonData, CommonTableColumn } from '~/common'
 
-type TableDataSource =
-  | 'departure'
-  | 'arrival'
-  | 'internationalDeparture'
-  | 'internationalArrival'
+const departureColumnGroups = [
+  {
+    groupName: '航班相关',
+    children: [
+      {
+        columnName: 'flightNO',
+        columnLabel: '航班号',
+      },
+      {
+        columnName: 'flightDate',
+        columnLabel: '执飞日期',
+      },
+      {
+        columnName: 'takeOffTime',
+        columnLabel: '起飞时间',
+      },
+      {
+        columnName: 'desitination',
+        columnLabel: '目的站',
+      },
+      {
+        columnName: 'gate',
+        columnLabel: '停机位',
+      },
+      {
+        columnName: 'preFlightNO',
+        columnLabel: '前序航班',
+      },
+      {
+        columnName: 'landingTime',
+        columnLabel: '实际降落\n时间',
+      },
+    ],
+  },
+  {
+    groupName: '货站相关',
+    children: [
+      {
+        columnName: 'special',
+        columnLabel: '特货信息',
+      },
+      {
+        columnName: 'projectLoad',
+        columnLabel: '预计装载数\n(运单/件)',
+      },
+      {
+        columnName: 'transferIn',
+        columnLabel: '中转进\n(运单/件)',
+      },
+      {
+        columnName: 'cancel',
+        columnLabel: '退运\n(板卡/件)',
+      },
+    ],
+  },
+  {
+    groupName: '地服相关',
+    children: [
+      {
+        columnName: 'receive',
+        columnLabel: '收运核单\n(运单/件/重量)',
+      },
+      {
+        columnName: 'check',
+        columnLabel: '查验\n(拒运/查验)',
+      },
+      {
+        columnName: 'security',
+        columnLabel: '安检\n(运单/件)',
+      },
+      {
+        columnName: 'add',
+        columnLabel: '加货\n(运单/板卡/件/重量)',
+      },
+      {
+        columnName: 'wait',
+        columnLabel: '待运区\n(板卡/件)',
+      },
+      {
+        columnName: 'stowage',
+        columnLabel: '配载\n(板卡/件)',
+      },
+      {
+        columnName: 'handOverTime',
+        columnLabel: '计划交接\n时间',
+      },
+      {
+        columnName: 'stationHandOver',
+        columnLabel: '货站交接\n(板卡/件)',
+      },
+      {
+        columnName: 'recheck',
+        columnLabel: '运输前复核\n(板卡/件)',
+      },
+      {
+        columnName: 'flightHandOver',
+        columnLabel: '机下交接\n(板卡/件)',
+      },
+      {
+        columnName: 'load',
+        columnLabel: '装机\n(板卡/件)',
+      },
+      {
+        columnName: 'goodsRegister',
+        columnLabel: '拉货登记\n(板卡/件)',
+      },
+      {
+        columnName: 'pullBack',
+        columnLabel: '拉回确认\n(板卡/件)',
+      },
+    ],
+  },
+]
 
-const headerClassReflect = ['bg-yellow', 'bg-green', 'bg-cyan']
+const arrivalColumnGroups = [
+  {
+    groupName: '航班相关',
+    children: [
+      {
+        columnName: 'flightNO',
+        columnLabel: '航班号',
+      },
+      {
+        columnName: 'flightDate',
+        columnLabel: '执飞日期',
+      },
+      {
+        columnName: 'landingTime',
+        columnLabel: '降落时间',
+      },
+      {
+        columnName: 'desitination',
+        columnLabel: '目的站',
+      },
+      {
+        columnName: 'gate',
+        columnLabel: '停机位',
+      },
+    ],
+  },
+  {
+    groupName: '货站相关',
+    children: [
+      {
+        columnName: 'special',
+        columnLabel: '特货信息',
+      },
+      {
+        columnName: 'projectUnload',
+        columnLabel: '预计卸载数\n(运单/件)',
+      },
+      {
+        columnName: 'transferOut',
+        columnLabel: '中转出\n(运单/件)',
+      },
+      {
+        columnName: 'difference',
+        columnLabel: '收货差异\n(板卡/件)',
+      },
+    ],
+  },
+  {
+    groupName: '地服相关',
+    children: [
+      {
+        columnName: 'unload',
+        columnLabel: '卸机\n(板/箱/卡)',
+      },
+      {
+        columnName: 'flightHandOver',
+        columnLabel: '机下交接\n(板/箱/卡)',
+      },
+      {
+        columnName: 'stationHandOver',
+        columnLabel: '货站交接\n(板/箱/卡)',
+      },
+      {
+        columnName: 'settle',
+        columnLabel: '理货\n(板卡/运单/件/重量)',
+      },
+      {
+        columnName: 'outCargo',
+        columnLabel: '出库\n(批/运单/件)',
+      },
+    ],
+  },
+]
+
+const testTableDatas = {
+  departure: [
+    {
+      flightNO: 'ZH3423',
+      flightDate: '2022/09/10',
+      takeOffTime: '22/09/10 12:01',
+      desitination: '-NGK-PEK',
+      gate: '84',
+      preFlightNO: 'HU2451',
+      landingTime: '2022/09/10 11:01',
+      special: '锂2/冷1',
+      projectLoad: '365/536',
+      transferIn: '1/2',
+      cancel: '',
+      receive: '364/534/1254KG',
+      check: '0/7',
+      security: '364/534',
+      add: '8/365/536/1254KG',
+      wait: '8/536',
+      stowage: '8/536',
+      handOverTime: '11:45',
+      stationHandOver: '8/536',
+      recheck: '8/536',
+      flightHandOver: '8/536',
+      load: '8/536',
+      goodsRegister: '0/358/5',
+      pullBack: '0/5',
+    },
+    {
+      flightNO: 'CA1512',
+      flightDate: '2022/09/10',
+      takeOffTime: '22/09/10 12:01',
+      desitination: '-NGK-PEK',
+      gate: '84',
+      preFlightNO: 'HU2451',
+      landingTime: '2022/09/10 11:01',
+      special: '锂2/冷1',
+      projectLoad: '365/536',
+      transferIn: '1/2',
+      cancel: '',
+      receive: '364/534/1254KG',
+      check: '0/7',
+      security: '364/534',
+      add: '8/365/536/1254KG',
+      wait: '4/243',
+      stowage: '8/536',
+      handOverTime: '11:45',
+      stationHandOver: '8/536',
+      recheck: '8/536',
+      flightHandOver: '8/536',
+      load: '8/536',
+      goodsRegister: '0/358/5',
+      pullBack: '0/5',
+    },
+    {
+      flightNO: 'ZH3456',
+      flightDate: '2022/09/10',
+      takeOffTime: '22/09/10 12:01',
+      desitination: '-NGK-PEK',
+      gate: '84',
+      preFlightNO: 'HU2451',
+      landingTime: '2022/09/10 11:01',
+      special: '锂2/冷1',
+      projectLoad: '365/536',
+      transferIn: '1/2',
+      cancel: '',
+      receive: '364/534/1254KG',
+      check: '0/7',
+      security: '364/534',
+      add: '8/365/536/1254KG',
+      wait: '8/536',
+      stowage: '5/357',
+      handOverTime: '11:45',
+      stationHandOver: '8/536',
+      recheck: '8/536',
+      flightHandOver: '8/536',
+      load: '8/536',
+      goodsRegister: '0/358/5',
+      pullBack: '0/5',
+    },
+  ],
+  arrival: [
+    {
+      flightNO: 'ZH3423',
+      flightDate: '2022/09/10',
+      landingTime: '22/09/10 12:01',
+      desitination: 'NKG-PEK-',
+      gate: '84',
+      special: '锂2/冷1',
+      projectUnload: '363/543',
+      transferOut: '',
+      difference: '0/6',
+      unload: '8/8/8',
+      flightHandOver: '8/8/8',
+      stationHandOver: '8/8/8',
+      settle: '8/363/537/1254KG',
+      outCargo: '3/363/537',
+    },
+    {
+      flightNO: 'CA1512',
+      flightDate: '2022/09/10',
+      landingTime: '22/09/10 12:01',
+      desitination: 'NKG-PEK-',
+      gate: '84',
+      special: '锂2/冷1',
+      projectUnload: '363/543',
+      transferOut: '',
+      difference: '',
+      unload: '8/8/8',
+      flightHandOver: '8/8/8',
+      stationHandOver: '8/8/8',
+      settle: '8/363/537/1254KG',
+      outCargo: '3/363/537',
+    },
+    {
+      flightNO: 'ZH3456',
+      flightDate: '2022/09/10',
+      landingTime: '22/09/10 12:01',
+      desitination: 'NKG-PEK-',
+      gate: '84',
+      special: '锂2/冷1',
+      projectUnload: '363/543',
+      transferOut: '',
+      difference: '',
+      unload: '8/8/8',
+      flightHandOver: '8/8/8',
+      stationHandOver: '8/8/8',
+      settle: '8/363/537/1254KG',
+      outCargo: '3/363/537',
+    },
+  ],
+  internationalDeparture: [
+    {
+      flightNO: 'ZH3423',
+      flightDate: '2022/09/10',
+      takeOffTime: '22/09/10 12:01',
+      desitination: '-NGK-PEK',
+      gate: '84',
+      preFlightNO: 'HU2451',
+      landingTime: '2022/09/10 11:01',
+      special: '锂2/冷1',
+      projectLoad: '365/536',
+      transferIn: '1/2',
+      cancel: '',
+      receive: '364/534/1254KG',
+      check: '0/7',
+      security: '364/534',
+      add: '8/365/536/1254KG',
+      wait: '8/536',
+      stowage: '8/536',
+      handOverTime: '11:45',
+      stationHandOver: '8/536',
+      recheck: '8/536',
+      flightHandOver: '8/536',
+      load: '8/536',
+      goodsRegister: '0/358/5',
+      pullBack: '0/5',
+    },
+    {
+      flightNO: 'CA1512',
+      flightDate: '2022/09/10',
+      takeOffTime: '22/09/10 12:01',
+      desitination: '-NGK-PEK',
+      gate: '84',
+      preFlightNO: 'HU2451',
+      landingTime: '2022/09/10 11:01',
+      special: '锂2/冷1',
+      projectLoad: '365/536',
+      transferIn: '1/2',
+      cancel: '',
+      receive: '364/534/1254KG',
+      check: '0/7',
+      security: '364/534',
+      add: '8/365/536/1254KG',
+      wait: '4/243',
+      stowage: '8/536',
+      handOverTime: '11:45',
+      stationHandOver: '8/536',
+      recheck: '8/536',
+      flightHandOver: '8/536',
+      load: '8/536',
+      goodsRegister: '0/358/5',
+      pullBack: '0/5',
+    },
+    {
+      flightNO: 'ZH3456',
+      flightDate: '2022/09/10',
+      takeOffTime: '22/09/10 12:01',
+      desitination: '-NGK-PEK',
+      gate: '84',
+      preFlightNO: 'HU2451',
+      landingTime: '2022/09/10 11:01',
+      special: '锂2/冷1',
+      projectLoad: '365/536',
+      transferIn: '1/2',
+      cancel: '',
+      receive: '364/534/1254KG',
+      check: '0/7',
+      security: '364/534',
+      add: '8/365/536/1254KG',
+      wait: '8/536',
+      stowage: '5/357',
+      handOverTime: '11:45',
+      stationHandOver: '8/536',
+      recheck: '8/536',
+      flightHandOver: '8/536',
+      load: '8/536',
+      goodsRegister: '0/358/5',
+      pullBack: '0/5',
+    },
+  ],
+  internationalArrival: [
+    {
+      flightNO: 'ZH3423',
+      flightDate: '2022/09/10',
+      landingTime: '22/09/10 12:01',
+      desitination: 'NKG-PEK-',
+      gate: '84',
+      special: '锂2/冷1',
+      projectUnload: '363/543',
+      transferOut: '',
+      difference: '0/6',
+      unload: '8/8/8',
+      flightHandOver: '8/8/8',
+      stationHandOver: '8/8/8',
+      settle: '8/363/537/1254KG',
+      outCargo: '3/363/537',
+    },
+    {
+      flightNO: 'CA1512',
+      flightDate: '2022/09/10',
+      landingTime: '22/09/10 12:01',
+      desitination: 'NKG-PEK-',
+      gate: '84',
+      special: '锂2/冷1',
+      projectUnload: '363/543',
+      transferOut: '',
+      difference: '',
+      unload: '8/8/8',
+      flightHandOver: '8/8/8',
+      stationHandOver: '8/8/8',
+      settle: '8/363/537/1254KG',
+      outCargo: '3/363/537',
+    },
+    {
+      flightNO: 'ZH3456',
+      flightDate: '2022/09/10',
+      landingTime: '22/09/10 12:01',
+      desitination: 'NKG-PEK-',
+      gate: '84',
+      special: '锂2/冷1',
+      projectUnload: '363/543',
+      transferOut: '',
+      difference: '',
+      unload: '8/8/8',
+      flightHandOver: '8/8/8',
+      stationHandOver: '8/8/8',
+      settle: '8/363/537/1254KG',
+      outCargo: '3/363/537',
+    },
+  ],
+}
+const headerClassMap = ['bg-yellow', 'bg-green', 'bg-cyan']
 export default function useTableData(
-  tableDataSource: TableDataSource,
+  tableType:
+    | 'departure'
+    | 'arrival'
+    | 'internationalDeparture'
+    | 'internationalArrival',
   formData: CommonData,
   international: Ref<boolean>
 ) {
@@ -34,7 +482,7 @@ export default function useTableData(
         returnData: { columnSet, listValues },
         message,
       } = await Query({
-        id: DATACONTENT_ID[`${tableDataSource}Airport`],
+        id: DATACONTENT_ID[`${tableType}Airport`],
         dataContent,
       })
       if (Number(code) !== 0) {
@@ -44,7 +492,8 @@ export default function useTableData(
         key: column.columnName,
         dataKey: column.columnName,
         title: column.columnLabel,
-        width: 200,
+        width: column.columnLabel.length * 50,
+        flexGrow: 1,
         align: 'center',
         ...column,
       }))
@@ -53,8 +502,75 @@ export default function useTableData(
       console.error(error)
     }
   }
+  let queryLoop: number | null = null
+  const startQuery = async () => {
+    await getTableData()
+    queryLoop = window.setTimeout(
+      startQuery,
+      LOOP_INTERVAL[`${tableType}Airport`]
+    )
+  }
+  const stopQuery = () => {
+    if (queryLoop) {
+      clearTimeout(queryLoop)
+      queryLoop = null
+    }
+  }
+  // watch(formData, data => {
+  //   stopQuery()
+  //   if (data.startDate && data.endDate) {
+  //     startQuery()
+  //   }
+  // })
+  // onUnmounted(stopQuery)
+
+  const computedWidth = (text: string) => {
+    let width: number = 0
+    text.split('\n').forEach(line => {
+      if (width < (line.length + 2) * 50) {
+        width = (line.length + 2) * 50
+      }
+    })
+    return width
+  }
+
   onMounted(() => {
-    getTableData()
+    const groups = ['departure', 'internationalDeparture'].includes(tableType)
+      ? departureColumnGroups
+      : arrivalColumnGroups
+    tableColumns.value = groups.reduce(
+      (columns: CommonTableColumn[], group, groupIndex) => {
+        group.children.forEach(({ columnName, columnLabel }) => {
+          columns.push({
+            key: columnName,
+            dataKey: columnName,
+            title: columnLabel,
+            columnName,
+            columnLabel,
+            columnDescribe: '',
+            dataType: '',
+            listqueryTemplateID: null,
+            needCount: null,
+            needFilters: ['航班号', '目的站'].includes(columnLabel) ? 1 : 0,
+            needGroup: null,
+            needSearch: null,
+            needShow: 1,
+            needSort: null,
+            orderNumber: null,
+            queryTemplateColumnSetID: null,
+            queryTemplateID: null,
+            width: computedWidth(columnLabel),
+            flexGrow: 1,
+            align: 'center',
+            headerClass: headerClassMap[groupIndex],
+            groupName: group.groupName,
+          })
+        })
+        return columns
+      },
+      []
+    )
+    tableData.value = testTableDatas[tableType]
   })
 
   return {

src/views/realTime/hooks/useTableFilter.ts

@@ -7,7 +7,6 @@ export default function useTableFilter(
   tableData: Ref<CommonData[]>
 ) {
   watch([tableColumns, tableData], ([columns, records]) => {
-    console.log(columns, records)
     const tempSets = {}
     columns.forEach(column => {
       if (column.needFilters) {
@@ -28,16 +27,39 @@ export default function useTableFilter(
         o => o.value
       )
     })
-    console.log(filterOptionMap)
   })
 
-  const filterOptionMap = {}
-  const filterValueMap = {}
-  const tableDataSortRuleMap = {}
+  const filterOptionMap = reactive({})
+  const filterValueMap = reactive({})
+  const tableDataSortRuleMap = reactive({})
+  const dealedTableData = computed(() => {
+    const filtered = tableData.value.filter(item => {
+      let flag = true
+      Object.entries(filterValueMap).forEach(([key, arr]) => {
+        if (arr.length && !arr.includes(String(item[key]))) {
+          flag = false
+        }
+      })
+      return flag
+    })
+    const sortRules = Object.entries(tableDataSortRuleMap).reduce(
+      (pre, [key, value]) => {
+        if (value) {
+          pre[0].push(key)
+          value = value === 'ascending' ? 'asc' : 'desc'
+          pre[1].push(value)
+        }
+        return pre
+      },
+      [[], []]
+    )
+    return _.orderBy(filtered, sortRules[0], sortRules[1])
+  })
 
   return {
     filterOptionMap,
     filterValueMap,
     tableDataSortRuleMap,
+    dealedTableData,
   }
 }

src/views/systemSettings/serviceManagement/serviceEdit.vue

@@ -41,7 +41,12 @@
                 <el-option :value="4" label="业务后端" />
               </el-select>
             </el-form-item>
-            <el-form-item class="isAsynchronous" prop="isAsynchronous" size="default" label-width="0">
+            <el-form-item
+              class="isAsynchronous"
+              prop="isAsynchronous"
+              size="default"
+              label-width="0"
+            >
               <el-select
                 v-model="serviceForm.isAsynchronous"
                 style="width: 80px"
@@ -513,9 +518,13 @@
     </Dialog>
     <Dialog
       :flag="editSlotDialogVisible"
-      msg-title="新增插槽"
+      :type="editSlotDialogType"
+      :msg-title="editSlotDialogTitle"
+      :del-name="deployNodeName"
       @submit-form="editSlotSubmitHandler"
       @reset-form="editSlotDialogHide"
+      @del-remove="editSlotSubmitHandler"
+      @del-rest="editSlotDialogHide"
     >
       <div class="form-wrapper">
         <AutoForm
@@ -704,7 +713,7 @@ const serviceSubmitHandler = async () => {
 
 // 输出-表格
 const outputTableColumns = ref<CommonTableColumn[]>([])
-const outputTableData = ref<any[]>([])
+const outputTableData = ref<CommonData[]>([])
 const getOutputTable = async () => {
   try {
     const {
@@ -742,7 +751,7 @@ const outputTableButtonGroup = [
 ]
 const outputTableButtonClickHandler = (
   rowIndex: number,
-  row: any,
+  row: CommonData,
   param: number
 ) => {
   switch (param) {
@@ -752,6 +761,8 @@ const outputTableButtonClickHandler = (
     case 2:
       outputDialogShow(3, row)
       break
+    default:
+      break
   }
 }
 
@@ -760,10 +771,7 @@ const outputDialogVisible = ref(false)
 const outputDialogType = ref('')
 const outputDialogTitle = ref('')
 const serviceOutputID = ref<string | number>()
-const outputDialogShow = (
-  operate: number = 1,
-  row: { [x: string]: string | number | null }
-) => {
+const outputDialogShow = (operate: number = 1, row: CommonData) => {
   switch (operate) {
     case 1:
       outputDialogType.value = 'add'
@@ -773,10 +781,10 @@ const outputDialogShow = (
       outputDialogType.value = 'edit'
       outputDialogTitle.value = '编辑输出'
       Object.entries(row).forEach(([key, value]) => {
+        outputForm[key] = value
         const column = outputTableColumns.value.find(
           column => column.columnName === key
         )
-        outputForm[key] = value
         if (typeof column?.listqueryTemplateID === 'number') {
           const selectOptions = selectOptionMap[column.listqueryTemplateID]
           const option = selectOptions.find(option => option.k === value)
@@ -829,8 +837,6 @@ const outputSubmitHandler = async () => {
       default:
         break
     }
-    console.log(dataContent)
-    return
     const { code, message } = await GeneralDataReception({
       serviceID: DATACONTENT_ID.sysServiceOutTable,
       dataContent: JSON.stringify(dataContent),
@@ -898,7 +904,7 @@ const logSearchClearHandler = () => {
   getLogTableData()
 }
 
-const logTableData = ref<any[]>([])
+const logTableData = ref<CommonData[]>([])
 const logTableLoading = ref(false)
 const resetLogTable = () => {
   logTableData.value = []
@@ -934,7 +940,7 @@ const slotDialogHide = () => {
   slotDialogVisible.value = false
 }
 const slotTableColumns = ref<CommonTableColumn[]>([])
-const slotTableData = ref<any[]>([])
+const slotTableData = ref<CommonData[]>([])
 const getSlotTable = async () => {
   try {
     const {
@@ -969,9 +975,20 @@ const slotTableButtonGroups = [
 ]
 const slotTableButtonClickHandler = (
   rowIndex: number,
-  row: any,
+  row: CommonData,
   param: number
-) => {}
+) => {
+  switch (param) {
+    case 1:
+      editSlotDialogShow(2, row)
+      break
+    case 2:
+      editSlotDialogShow(3, row)
+      break
+    default:
+      break
+  }
+}
 const slotSelectHandler = (selection, row) => {
   console.log(selection, row)
 }
@@ -980,12 +997,48 @@ const slotSubmitHandler = () => {
 }
 
 // 插槽-新增/编辑
+const editSlotDialogType = ref('')
+const editSlotDialogTitle = ref('')
+const deployNodeName = ref('')
 const editSlotDialogVisible = ref(false)
-const editSlotDialogShow = () => {
+const editSlotDialogShow = (operate: number = 1, row: CommonData) => {
+  switch (operate) {
+    case 1:
+      editSlotDialogType.value = 'add'
+      editSlotDialogTitle.value = '新增插槽'
+      break
+    case 2:
+      editSlotDialogType.value = 'edit'
+      editSlotDialogTitle.value = '编辑插槽'
+      Object.entries(row).forEach(([key, value]) => {
+        slotForm[key] = value
+        const column = slotTableColumns.value.find(
+          column => column.columnName === key
+        )
+        if (typeof column?.listqueryTemplateID === 'number') {
+          const selectOptions = selectOptionMap[column.listqueryTemplateID]
+          const option = selectOptions.find(option => option.k === value)
+          if (option) {
+            slotForm[option.setvalue] = option.v
+          }
+        }
+      })
+      break
+    case 3:
+      editSlotDialogType.value = 'del'
+      editSlotDialogTitle.value = '删除插槽'
+      break
+    default:
+      break
+  }
+  deployNodeName.value = (row && (row['deployNodeName'] as string)) ?? ''
   editSlotDialogVisible.value = true
 }
 const editSlotDialogHide = () => {
   editSlotDialogVisible.value = false
+  Object.keys(slotForm).forEach(key => {
+    slotForm[key] = null
+  })
 }
 const slotForm = reactive<CommonData>({})
 const editSlotSubmitHandler = () => {

typings/common.d.ts

@@ -61,15 +61,15 @@ interface CommonTableColumn {
   columnName: string
   dataType: string
   listqueryTemplateID: number | null
-  needCount: number
-  needFilters: number
-  needGroup: number
+  needCount: number | null
+  needFilters: number | null
+  needGroup: number | null
   needSearch: number | null
-  needShow: number
-  needSort: number
+  needShow: number | null
+  needSort: number | null
   orderNumber: number | null
-  queryTemplateColumnSetID: number
-  queryTemplateID: number
+  queryTemplateColumnSetID: number | null
+  queryTemplateID: number | null
   [propName: string]: any
 }