Browse Source

航站视图表头修改

zhongxiaoyu 2 years ago
parent
commit
ceafa60633

+ 12 - 41
src/components/SimpleTable/index.vue

@@ -22,16 +22,13 @@
     @selection-change="(...args:any[]) => { emit('selectionChange', ...args) }"
     @sort-change="(...args:any[]) => { emit('sortChange', ...args) }"
   >
-    <el-table-column
-      v-for="column in tableColumns"
-      :key="column.columnName"
-      v-bind="computedColumnProps(column)"
-    >
+    <el-table-column v-for="column in tableColumns" :key="column.columnName" v-bind="computedColumnProps(column)">
       <template #header>
         <TableHeaderCell
           v-model:filter-values="filterValueMap[column.columnName]"
           v-model:sort-rule="tableDataSortRuleMap[column.columnName]"
           :label="column.columnLabel"
+          :desc="column.columnDescribe"
           :filter-options="filterOptionMap[column.columnName]"
           :sortable="!!column.needSort"
           filter-style="arrow"
@@ -49,30 +46,15 @@ import { CommonData, CommonTableColumn } from '~/common'
 import { useTableFilterAndSort } from '@/hooks/useTableFilterAndSort'
 import { ElTable } from 'element-plus'
 
-type SummaryMethod<T> = (data: {
-  columns: TableColumnCtx<T>[]
-  data: T[]
-}) => string[]
+type SummaryMethod<T> = (data: { columns: TableColumnCtx<T>[]; data: T[] }) => string[]
 type ColumnCls<T> = string | ((data: { row: T; rowIndex: number }) => string)
-type ColumnStyle<T> =
-  | CSSProperties
-  | ((data: { row: T; rowIndex: number }) => CSSProperties)
+type ColumnStyle<T> = CSSProperties | ((data: { row: T; rowIndex: number }) => CSSProperties)
 type CellCls<T> =
   | string
-  | ((data: {
-      row: T
-      rowIndex: number
-      column: TableColumnCtx<T>
-      columnIndex: number
-    }) => string)
+  | ((data: { row: T; rowIndex: number; column: TableColumnCtx<T>; columnIndex: number }) => string)
 type CellStyle<T> =
   | CSSProperties
-  | ((data: {
-      row: T
-      rowIndex: number
-      column: TableColumnCtx<T>
-      columnIndex: number
-    }) => CSSProperties)
+  | ((data: { row: T; rowIndex: number; column: TableColumnCtx<T>; columnIndex: number }) => CSSProperties)
 type Sort = {
   prop: string
   order: 'ascending' | 'descending'
@@ -97,12 +79,7 @@ type TableColumnProps<T> = {
   fixed?: boolean | string
   renderHeader?: (data: { column: TableColumnCtx<T>; $index: number }) => VNode
   resizable?: boolean
-  formatter?: (
-    row: T,
-    column: TableColumnCtx<T>,
-    cellValue: any,
-    index: number
-  ) => VNode | string
+  formatter?: (row: T, column: TableColumnCtx<T>, cellValue: any, index: number) => VNode | string
   showOverflowTooltip?: boolean
   align?: string
   headerAlign?: string
@@ -161,11 +138,7 @@ const props = withDefaults(
       children?: string
     }
     lazy?: boolean
-    load?: (
-      row: CommonData,
-      treeNode: TreeNode,
-      resolve: (data: CommonData[]) => void
-    ) => void
+    load?: (row: CommonData, treeNode: TreeNode, resolve: (data: CommonData[]) => void) => void
     className?: string
     style?: CSSProperties
     tableLayout?: Layout
@@ -249,12 +222,10 @@ watchEffect(() => {
   tableData.value = props.data
 })
 
-const {
-  filterOptionMap,
-  filterValueMap,
-  tableDataSortRuleMap,
-  dealedTableData,
-} = useTableFilterAndSort(tableColumns, tableData)
+const { filterOptionMap, filterValueMap, tableDataSortRuleMap, dealedTableData } = useTableFilterAndSort(
+  tableColumns,
+  tableData
+)
 
 const emit = defineEmits([
   'select',

+ 79 - 80
src/components/TableHeaderCell/index.vue

@@ -1,89 +1,84 @@
 <template>
-  <div
-    :class="[
-      'table-header-cell',
-      'el-table-v2__header-cell-text',
-      'el-table__header-cell-text',
-      {
-        'table-header-cell-space-between':
-          (filterable && filterStyle === 'arrow') || sortable,
-      },
-    ]"
-  >
-    <template v-if="filterable && filterStyle === 'underline'">
-      <span :class="['filter-button-wrapper']">
-        <span
-          :class="['filter-button', { 'filter-button-active': active }]"
+  <el-tooltip :disabled="!desc" :content="desc">
+    <div
+      :class="[
+        'table-header-cell',
+        'el-table-v2__header-cell-text',
+        'el-table__header-cell-text',
+        {
+          'table-header-cell-space-between': (filterable && filterStyle === 'arrow') || sortable,
+        },
+      ]"
+    >
+      <template v-if="filterable && filterStyle === 'underline'">
+        <span :class="['filter-button-wrapper']">
+          <span
+            :class="['filter-button', { 'filter-button-active': active }]"
+            ref="buttonRef"
+            v-click-outside="clickOutsideHandler"
+            >{{ `${desc ? '*' : ''}${label}` }}</span
+          >
+        </span>
+      </template>
+      <template v-else>
+        <span style="flex: 1">{{ `${desc ? '*' : ''}${label}` }}</span>
+      </template>
+      <div v-if="(filterable && filterStyle === 'arrow') || sortable" class="button-wrapper">
+        <div
+          v-if="filterable && filterStyle === 'arrow'"
           ref="buttonRef"
           v-click-outside="clickOutsideHandler"
-          >{{ label }}</span
+          :class="['filter-arrow', { 'arrow-active': active, 'arrow-expand': expand }]"
         >
-      </span>
-    </template>
-    <template v-else>
-      <span style="flex: 1">{{ label }}</span>
-    </template>
-    <div
-      v-if="(filterable && filterStyle === 'arrow') || sortable"
-      class="button-wrapper"
-    >
-      <div
-        v-if="filterable && filterStyle === 'arrow'"
-        ref="buttonRef"
-        v-click-outside="clickOutsideHandler"
-        :class="[
-          'filter-arrow',
-          { 'arrow-active': active, 'arrow-expand': expand },
-        ]"
-      >
-        <el-icon>
-          <CaretBottom />
-        </el-icon>
-      </div>
-      <div v-if="sortable" class="sort-button" @click="sortChange">
-        <el-icon>
-          <SortUp v-show="sortRule === 'ascending'" />
-          <SortDown v-show="sortRule === 'descending'" />
-          <Sort v-show="!sortRule" />
-        </el-icon>
+          <el-icon>
+            <CaretBottom />
+          </el-icon>
+        </div>
+        <div v-if="sortable" class="sort-button" @click="sortChange">
+          <el-icon>
+            <SortUp v-show="sortRule === 'ascending'" />
+            <SortDown v-show="sortRule === 'descending'" />
+            <Sort v-show="!sortRule" />
+          </el-icon>
+        </div>
       </div>
+      <el-popover
+        ref="popoverRef"
+        :virtual-ref="buttonRef"
+        virtual-triggering
+        trigger="click"
+        :width="224"
+        class="table-header-cell-popover"
+        placement="bottom"
+        @show="expand = true"
+        @hide="expand = false"
+      >
+        <el-select
+          v-model="selections"
+          size="default"
+          placeholder="筛选"
+          multiple
+          filterable
+          default-first-option
+          collapse-tags
+          clearable
+          :teleported="false"
+          @change="
+            newVal => {
+              emit('update:filterValues', newVal)
+            }
+          "
+        >
+          <el-option
+            v-for="(option, index) in filterOptions"
+            :key="option.value + index"
+            :value="option.value"
+            :label="option.label"
+          />
+        </el-select>
+      </el-popover>
     </div>
-  </div>
-  <el-popover
-    ref="popoverRef"
-    :virtual-ref="buttonRef"
-    virtual-triggering
-    trigger="click"
-    :width="224"
-    class="table-header-cell-popover"
-    placement="bottom"
-    @show="expand = true"
-    @hide="expand = false"
-  >
-    <el-select
-      v-model="selections"
-      size="default"
-      placeholder="筛选"
-      multiple
-      filterable
-      default-first-option
-      collapse-tags
-      clearable
-      :teleported="false"
-      @change="
-        newVal => {
-          emit('update:filterValues', newVal)
-        }
-      "
-    >
-      <el-option
-        v-for="(option, index) in filterOptions"
-        :key="option.value + index"
-        :value="option.value"
-        :label="option.label"
-      />
-    </el-select>
-  </el-popover>
+  </el-tooltip>
 </template>
 
 <script setup lang="ts">
@@ -96,6 +91,10 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  desc: {
+    type: String,
+    default: ''
+  },
   filterStyle: {
     type: String as PropType<'arrow' | 'underline'>,
     default: 'arrow',

+ 12 - 34
src/views/realTime/components/AirportView/index.vue

@@ -21,10 +21,7 @@
           <CommonSwitch v-model:flag="UTCFlag" label="开启UTC" />
         </div>
         <div v-permission="getPermission('columnSet')">
-          <ColumnSet
-            :table-columns="tableColumns"
-            @checked-submit="columnChecked"
-          />
+          <ColumnSet :table-columns="tableColumns" @checked-submit="columnChecked" />
         </div>
       </div>
     </div>
@@ -46,16 +43,14 @@
                 v-model:filter-values="filterValueMap[column.columnName]"
                 v-model:sort-rule="tableDataSortRuleMap[column.columnName]"
                 :label="tableColumnFormatter(column.columnLabel)"
+                :desc="column.columnDescribe"
                 :filter-options="filterOptionMap[column.columnName]"
                 :sortable="column.needSort"
                 filter-style="arrow"
               />
             </template>
             <template #cell="slot: CellSlotProps">
-              <div
-                class="el-table-v2__cell-text"
-                @click="cellClickHandlerV2(slot)"
-              >
+              <div class="el-table-v2__cell-text" @click="cellClickHandlerV2(slot)">
                 <!-- <el-tooltip
                   v-if="slot.column.columnName.includes('Time')"
                   :content="tableDataFormatter(slot)"
@@ -68,18 +63,10 @@
             </template>
             <template #footer>
               <div class="table-footer">
-                <span class="table-footer-count"
-                  >航班总数:{{ tableDataCount.flightCount }}</span
-                >
-                <span class="table-footer-count"
-                  >货运航班总数:{{ tableDataCount.freightFlightCount }}</span
-                >
-                <span class="table-footer-count"
-                  >已装机总数:{{ tableDataCount.loadCount }}</span
-                >
-                <span class="table-footer-count"
-                  >已起飞总数:{{ tableDataCount.takeOffCount }}</span
-                >
+                <span class="table-footer-count">航班总数:{{ tableDataCount.flightCount }}</span>
+                <span class="table-footer-count">货运航班总数:{{ tableDataCount.freightFlightCount }}</span>
+                <span class="table-footer-count">已装机总数:{{ tableDataCount.loadCount }}</span>
+                <span class="table-footer-count">已起飞总数:{{ tableDataCount.takeOffCount }}</span>
               </div>
             </template>
           </el-table-v2>
@@ -155,12 +142,7 @@ const tableDataCount = computed(() => ({
 
 const { cellClickHandlerV2 } = useTableCellClick(props.name)
 
-const {
-  filterOptionMap,
-  filterValueMap,
-  tableDataSortRuleMap,
-  dealedTableData,
-} = useTableFilterAndSort(
+const { filterOptionMap, filterValueMap, tableDataSortRuleMap, dealedTableData } = useTableFilterAndSort(
   tableColumns,
   tableData,
   {},
@@ -169,26 +151,22 @@ const {
 
 const permissionMap = {
   DepartureAirport: {
-    count:
-      'number_of_pieces_displayed_in_domestic_departure_terminal_view_button',
+    count: 'number_of_pieces_displayed_in_domestic_departure_terminal_view_button',
     UTC: 'turn_on_utc_in_view_of_domestic_departure_terminal_button',
     columnSet: 'domestic_departure_terminal_view_column_setting_button',
   },
   InternationalDepartureAirport: {
-    count:
-      'number_of_pieces_displayed_in_international_departure_terminal_view_button',
+    count: 'number_of_pieces_displayed_in_international_departure_terminal_view_button',
     UTC: 'international_departure_terminal_view_opens_utc_button',
     columnSet: 'international_departure_terminal_view_column_setting_button',
   },
   ArrivalAirport: {
-    count:
-      'number_of_pieces_displayed_in_domestic_inbound_terminal_view_button',
+    count: 'number_of_pieces_displayed_in_domestic_inbound_terminal_view_button',
     UTC: 'turn_on_utc_in_view_of_domestic_inbound_terminal_button',
     columnSet: 'domestic_inbound_terminal_view_column_setting_button',
   },
   InternationalArrivalAirport: {
-    count:
-      'number_of_display_pieces_of_international_inbound_terminal_view_button',
+    count: 'number_of_display_pieces_of_international_inbound_terminal_view_button',
     UTC: 'the_view_of_international_inbound_terminal_opens_utc_button',
     columnSet: 'view_column_setting_of_international_inbound_terminal_button',
   },

+ 15 - 13
src/views/realTime/components/AirportView/useAirportTable.ts

@@ -64,10 +64,6 @@ const columnGroupsMap: {
           columnName: 'speCargoInfo',
           columnLabel: '特货信息',
         },
-        {
-          columnName: 'preLoad',
-          columnLabel: '预计装载数\n(运单/件)',
-        },
         {
           columnName: 'transIn',
           columnLabel: '中转进\n(运单/件)',
@@ -81,6 +77,10 @@ const columnGroupsMap: {
     {
       groupName: '地服相关',
       children: [
+        {
+          columnName: 'preLoad',
+          columnLabel: '运单申报\n(运单/件)',
+        },
         {
           columnName: 'receiveSure',
           columnLabel: '收运核单\n(运单/件/重量)',
@@ -168,23 +168,24 @@ const columnGroupsMap: {
         {
           columnName: 'planeDown',
           columnLabel: '机下交接\n(板卡/件)',
-        },
+          columnDescribe: '根据运输前复核计算所得',
+    },
         {
           columnName: 'planeDownTime',
           columnLabel: '机下交接\n时间',
         },
-        {
-          columnName: 'loadPlaneSure',
-          columnLabel: '装机\n(板卡/件)',
-        },
+        // {
+        //   columnName: 'loadPlaneSure',
+        //   columnLabel: '装机\n(板卡/件)',
+        // },
         {
           columnName: 'loadPlaneSureTime',
           columnLabel: '装机时间',
         },
-        {
-          columnName: 'loadPlane',
-          columnLabel: '关闭舱门\n(板卡/件)',
-        },
+        // {
+        //   columnName: 'loadPlane',
+        //   columnLabel: '关闭舱门\n(板卡/件)',
+        // },
         {
           columnName: 'loadPlaneTime',
           columnLabel: '关闭舱门\n时间',
@@ -511,6 +512,7 @@ const columnGroupsMap: {
         {
           columnName: 'planeDown',
           columnLabel: '机下交接\n(板/箱/卡)',
+          columnDescribe: '根据运输前复核计算所得',
         },
         {
           columnName: 'planeDownTime_IN',

+ 7 - 7
src/views/realTime/hooks/useTable.ts

@@ -20,7 +20,7 @@ const tableColumnsMap: {
     { columnLabel: '运单数', columnName: 'list', width: 60, needCount: 1 },
     { columnLabel: '件数', columnName: 'number', width: 60, needCount: 1 },
     {
-      columnLabel: '货',
+      columnLabel: '货',
       columnName: 'tally',
       className: 'cell-filter cell-filter-yellow',
     },
@@ -29,11 +29,11 @@ const tableColumnsMap: {
       columnName: 'pull',
       className: 'cell-filter cell-filter-yellow',
     },
-    {
-      columnLabel: '待运区',
-      columnName: 'wait',
-      className: 'cell-filter cell-filter-yellow',
-    },
+    // {
+    //   columnLabel: '待运区',
+    //   columnName: 'wait',
+    //   className: 'cell-filter cell-filter-yellow',
+    // },
     {
       columnLabel: '预配载',
       columnName: 'stowage',
@@ -60,7 +60,7 @@ const tableColumnsMap: {
       className: 'cell-filter cell-filter-yellow',
     },
     {
-      columnLabel: '拉确认',
+      columnLabel: '拉确认',
       columnName: 'pullSure',
       className: 'cell-filter cell-filter-yellow',
     },