Merge branch 'master' of http://120.26.64.82:3000/BFFE/SZYGM1.0

src/components/tableColumnSet/index.vue

@@ -1,7 +1,7 @@
 <template>
-  <Dialog :flag="dialogVisible" msgTitle="列设置" width="1080px" @submitForm="submitForm">
+  <Dialog :flag="dialogVisible" msgTitle="列设置" width="1080px" @submitForm="submitForm" @resetForm="resetForm">
     <div class="columnSet">
-        <el-checkbox v-for="(item,index) in columnList" :key="index" :label="item.key" v-model="item.isShow" :checked="item.isShow">
+        <el-checkbox v-for="(item,index) in tableHeaderList" :key="index" :label="item.key" v-model="item.isShow" :checked="item.isShow">
           {{item.label}}
         </el-checkbox>
     </div>
@@ -23,13 +23,22 @@ const props = defineProps({
   },
 });
 
-const checkList=ref([])
+const tableHeaderList = ref([])
+
+watchEffect(() => {
+  tableHeaderList.value= JSON.parse(JSON.stringify(props.columnList))
+})
 
 const submitForm=()=>{
-  emit('setColumn',props.columnList)
+  emit('setColumn',tableHeaderList.value)
+}
+
+const resetForm=()=>{
+  emit('closeDialog',false)
 }
 
-const emit = defineEmits(['setColumn'])
+
+const emit = defineEmits(['setColumn','closeDialog'])
 
 </script>
 

src/components/tableTemp/index.vue

@@ -50,7 +50,7 @@
       </template>
     </el-table-column>
     <!-- label-class-name  可通过 tableHeader中传入class来修改某一个或某一类表头的样式-->
-    <el-table-column class="infinite-list-item" v-for="(items, index) in props.tableHeader" :key="index" :label="items.label" :prop="items.key" :width="items.width?items.width:props.tableColumnProperty.width" :sortable="
+    <el-table-column class="infinite-list-item" v-for="(items, index) in tableHeaderList" :key="index" :label="items.label" :prop="items.key" :width="items.width?items.width:props.tableColumnProperty.width" :sortable="
         items.sortable ? items.sortable : props.tableColumnProperty.sortable
       " :show-overflow-tooltip="props.tableColumnProperty.showOverflowTooltip" :align="items.align ? items.align : props.tableColumnProperty.align" :header-align="
         items.headerAlign
@@ -83,7 +83,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed,watchEffect } from "vue";
 //表格参数
 const tablePropertyDefault = {
   height: "100%",
@@ -163,6 +163,19 @@ const props = defineProps({
   },
 });
 
+const tableHeaderList = ref([])
+
+watchEffect(() => {
+  let newArray = []
+  console.log(props.tableHeader)
+  props.tableHeader.map(item => {
+      if(item.isShow != false){
+        newArray.push(item)
+      }
+  })
+  tableHeaderList.value = newArray;
+})
+
 const isChild = computed(() => (item: any) => {
   const msg = typeof item === "string" ? item : `${item}`;
   return msg.includes("-");

src/views/baggageManagement/arrival/flight/index.vue

@@ -43,7 +43,8 @@
       </div> -->
     </div>
     <div class="tableTopBtn">
-        <Search @clear="clear" @search="search" />
+      <TBtnGroup v-model:flag="state.UTCFlag" @columnSet="columnSet" @downLoad="downLoad" @refresh="refresh"></TBtnGroup>
+      <Search @clear="clear" @search="search" />
     </div>
     <div class="waybillList">
       <tableTemp
@@ -55,10 +56,13 @@
           @cellClass="test"
         ></tableTemp>
     </div>
+    <tableColumnSet :dialogVisible="state.dialogVisible" :columnList="state.waybillTableHeader" @setColumn="setColumn" @closeDialog="closeDialog"></tableColumnSet>
   </div>
 </template>
 <script setup lang="ts">
 import tableTemp from "@/components/tableTemp/index.vue";
+import TBtnGroup from "@/components/TBtnGroup/index.vue";
+import tableColumnSet from "@/components/tableColumnSet/index.vue";
 import Search from "@/components/search/index.vue";
 import {CaretRight} from "@element-plus/icons-vue"
 import { ref, onMounted } from 'vue';
@@ -90,6 +94,8 @@ const state = reactive({
     { label: "装载序号", key: "zzxh",isShow:true}
   ],
   listLoading: true,
+  UTCFlag:true,
+  dialogVisible:false
 });
 
 const waybilltableData = ref([
@@ -186,6 +192,42 @@ const loadMore=(data)=>{
 
 }
 
+
+//清空搜索
+const clear=(data) =>{
+  console.log(data)
+}
+
+//点击搜索按钮
+const search=(data) =>{
+  console.log(data)
+}
+
+//点击刷新按钮
+const refresh=(data) =>{
+  console.log(data)
+}
+
+//点击下载按钮
+const downLoad=(data) =>{
+  console.log(data)
+}
+
+//点击列设置按钮
+const columnSet=(data) =>{
+  state.dialogVisible = true;
+}
+
+const setColumn = (data) => {
+  state.waybillTableHeader = data;
+  state.dialogVisible = false;
+}
+
+const closeDialog = (data) => {
+  state.dialogVisible = false;
+}
+
+
 </script>
 <style lang="scss" scoped>
 .pageBody{

src/views/baggageManagement/arrival/station/index.vue

@@ -1,104 +1,7 @@
 <template>
-  <div class="station-view">
-    <div class="station-header">
-      <StationForm />
-      <div class="station-count">
-        <CountBox
-          :count-number="tableDataCount.waybillCount"
-          label="预计装载总运单数"
-        />
-        <CountBox
-          v-if="goodsCountFlag"
-          :count-number="tableDataCount.goodsCount"
-          label="预计装载总件数"
-        />
-      </div>
-      <div class="station-settings">
-        <TableSwitch v-model:flag="goodsCountFlag" label="显示件数" />
-        <TableSwitch v-model:flag="UTCFlag" label="开启UTC" />
-        <ColumnSet
-          :table-columns="tableColumns"
-          @checked-submit="columnChecked"
-        />
-      </div>
-    </div>
-    <div class="station-table">
-      <el-auto-resizer>
-        <template #default="{ height, width }">
-          <el-table-v2
-            :columns="filteredColumns"
-            :data="tableData"
-            :width="width"
-            :height="height"
-            :footer-height="60"
-            :row-class="rowClass"
-            fixed
-          >
-            <template #cell="slot: CellSlotProps">
-              <div :class="cellClass(slot)">
-                <span class="cell-text">{{
-                  slot.rowData[slot.column.dataKey]
-                }}</span>
-                <div class="cell-background" />
-              </div>
-            </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
-                >
-              </div>
-            </template>
-          </el-table-v2>
-        </template>
-      </el-auto-resizer>
-    </div>
-  </div>
+  <StationView station-view-name="arrival" />
 </template>
-<script lang="ts" setup>
-import type { CellSlotProps } from '../../hooks/useTableStyle'
-import StationForm from '../../components/StationForm/index.vue'
-import ColumnSet from '../../components/ColumnSet/index.vue'
-import CountBox from '../../components/CountBox/index.vue'
-import TableSwitch from '../../components/TableSwitch/index.vue'
-import useTableColumnSet from '../../hooks/useTableColumnSet'
-import useTableData from '../../hooks/useTableData'
-import useTableStyle from '../../hooks/useTableStyle'
 
-const goodsCountFlag = ref(true)
-const UTCFlag = ref(true)
-
-const { tableColumns, tableData } = useTableData('arrival')
-const { columnChecked, filteredColumns } = useTableColumnSet(tableColumns)
-
-const tableDataCount = reactive({
-  waybillCount: 0,
-  goodsCount: 0,
-  flightCount: 0,
-  freightFlightCount: 0,
-  loadCount: 0,
-  takeOffCount: 0,
-})
-watch(tableData, records => {
-  tableDataCount.waybillCount = records.length
-  tableDataCount.goodsCount = records.length
-  tableDataCount.flightCount = records.length
-  tableDataCount.freightFlightCount = records.length
-  tableDataCount.loadCount = records.length
-  tableDataCount.takeOffCount = records.length
-})
-
-const { rowClass, cellClass } = useTableStyle()
+<script setup lang="ts">
+import StationView from '../../components/StationView/index.vue'
 </script>
-<style lang="scss" scoped>
-@import '../../style/station.scss';
-</style>

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

@@ -50,20 +50,21 @@ import Dialog from '@/components/dialog/index.vue'
 import type { Column } from 'element-plus'
 
 export type KeyType = string | number | symbol
-
-export interface tableColumnInGroup<T = any> extends Column<T> {
+export interface TableColumn <T = any> extends Column<T> {
   dataKey: KeyType
   title: string
+}
+export interface TableColumnInGroup<T = any> extends TableColumn<T> {
   groupTitle: string
 }
 export interface tableColumnGroup {
   title: string
-  columns: tableColumnInGroup[]
+  columns: TableColumnInGroup[]
 }
 
 const props = defineProps({
   tableColumns: {
-    type: Array<tableColumnInGroup | Column>,
+    type: Array<TableColumnInGroup | TableColumn>,
     required: true,
   }
 })
@@ -74,7 +75,6 @@ const inGroup = computed(() => {
   return 'groupTitle' in props.tableColumns[0]
 })
 
-
 const simpleClone = (obj: any) => JSON.parse(JSON.stringify(obj))
 
 const dialogFlag = ref(false)
@@ -95,7 +95,7 @@ const submitHandler = () => {
 
 const columnGroups = computed(() => {
   if (inGroup.value) {
-    return (props.tableColumns as tableColumnInGroup[]).reduce((pre: tableColumnGroup[], curr) => {
+    return (props.tableColumns as TableColumnInGroup[]).reduce((pre: tableColumnGroup[], curr) => {
       const theGroup = pre.find(columnGroup => columnGroup.title === curr.groupTitle)
       if (theGroup) {
         theGroup.columns.push(curr)
@@ -137,7 +137,7 @@ watch(() => props.tableColumns, columns => {
       }
     })
   } else {
-    checkedKeys.value = columns.map(({ dataKey }) => dataKey as KeyType)
+    checkedKeys.value = columns.map(({ dataKey }) => dataKey)
   }
   emits('checkedSubmit', checkedColumnKeys.value)
 })

src/views/baggageManagement/components/CountBox/index.vue

@@ -17,6 +17,13 @@ const props = defineProps({
     type: Number,
     default: 0,
   },
+  length: {
+    type: Number,
+    default: 6,
+    validator(value: number) {
+      return value > 0
+    },
+  },
   label: {
     type: String,
     default: '总数',
@@ -25,16 +32,12 @@ const props = defineProps({
 const numberBoxes = ref<HTMLInputElement[] | undefined[]>([])
 const numberItems = computed(() => {
   let numberString = props.countNumber.toString()
-  if (numberString.length > 6) {
-    ElMessage({
-      message: `${props.label}过大`,
-      type: 'error',
-      duration: 2 * 1000,
-    })
-    numberString = '999999'
+  if (numberString.length > props.length) {
+    ElMessage.error(`${props.label}过大`)
+    numberString = '9'.repeat(props.length)
   }
-  numberString = '000000' + numberString
-  return numberString.slice(-6).split('')
+  numberString = '0'.repeat(props.length) + numberString
+  return numberString.slice(-props.length).split('')
 })
 watch(numberItems, items => {
   for (let index = 0; index < numberBoxes.value.length; index++) {

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

@@ -0,0 +1,123 @@
+<template>
+  <div class="station-view">
+    <div class="station-header">
+      <StationForm :international="international" />
+      <div class="station-count">
+        <CountBox
+          :count-number="tableDataCount.waybillCount"
+          label="预计装载总运单数"
+        />
+        <CountBox
+          v-show="goodsCountFlag"
+          :count-number="tableDataCount.goodsCount"
+          label="预计装载总件数"
+        />
+      </div>
+      <div class="station-settings">
+        <TableSwitch v-model:flag="goodsCountFlag" label="显示件数" />
+        <TableSwitch v-model:flag="UTCFlag" label="开启UTC" />
+        <ColumnSet
+          :table-columns="tableColumns"
+          @checked-submit="columnChecked"
+        />
+      </div>
+    </div>
+    <div class="station-table">
+      <el-auto-resizer>
+        <template #default="{ height, width }">
+          <el-table-v2
+            :columns="filteredColumns"
+            :data="tableData"
+            :width="width"
+            :height="height"
+            :footer-height="60"
+            :row-class="rowClass"
+            fixed
+          >
+            <template #cell="slot: CellSlotProps">
+              <div :class="cellClass(slot)">
+                <span class="cell-text">
+                  {{ slot.rowData[slot.column.dataKey] }}
+                </span>
+                <div class="cell-background" />
+              </div>
+            </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
+                >
+              </div>
+            </template>
+          </el-table-v2>
+        </template>
+      </el-auto-resizer>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { PropType } from 'vue'
+import type { CellSlotProps } from '../../hooks/useTableStyle'
+import StationForm from '../../components/StationForm/index.vue'
+import ColumnSet from '../../components/ColumnSet/index.vue'
+import CountBox from '../../components/CountBox/index.vue'
+import TableSwitch from '../../components/TableSwitch/index.vue'
+import useTableColumnSet from '../../hooks/useTableColumnSet'
+import useTableData from '../../hooks/useTableData'
+import useTableStyle from '../../hooks/useTableStyle'
+
+type StationViewName =
+  | 'departure'
+  | 'arrival'
+  | 'internationalDeparture'
+  | 'internationalArrival'
+
+const props = defineProps({
+  stationViewName: {
+    type: String as PropType<StationViewName>,
+    required: true,
+  },
+})
+
+const international = computed(() =>
+  ['internationalDeparture', 'internationalArrival'].includes(
+    props.stationViewName
+  )
+)
+
+const goodsCountFlag = ref(true)
+const UTCFlag = ref(true)
+
+const { tableColumns, tableData } = useTableData(props.stationViewName)
+const { columnChecked, filteredColumns } = useTableColumnSet(tableColumns)
+const { rowClass, cellClass } = useTableStyle()
+
+const tableDataCount = reactive({
+  waybillCount: 0,
+  goodsCount: 0,
+  flightCount: 0,
+  freightFlightCount: 0,
+  loadCount: 0,
+  takeOffCount: 0,
+})
+watch(tableData, records => {
+  tableDataCount.waybillCount = records.length
+  tableDataCount.goodsCount = records.length
+  tableDataCount.flightCount = records.length
+  tableDataCount.freightFlightCount = records.length
+  tableDataCount.loadCount = records.length
+  tableDataCount.takeOffCount = records.length
+})
+</script>
+<style lang="scss" scoped>
+@import '../../style/station.scss';
+</style>

src/views/baggageManagement/components/TableSwitch/index.vue

@@ -4,11 +4,7 @@
       v-model="flag"
       size="default"
       style="--el-switch-on-color: #ac014d; --el-switch-off-color: #b1b1b1"
-      @change="
-        (val: number) => {
-          emit('update:flag', val)
-        }
-      "
+      @change="updateFlag"
     />
     <span class="switch-label">{{ label }}</span>
   </div>
@@ -24,7 +20,12 @@ const props = defineProps({
     type: String,
   },
 })
+
 const emit = defineEmits(['update:flag'])
+
+const updateFlag = (val: boolean) => {
+  emit('update:flag', val)
+}
 </script>
 
 <style scoped lang="scss">

src/views/baggageManagement/departure/flight/index.vue

@@ -56,7 +56,7 @@
           @load="loadMore"
         ></tableTemp>
     </div>
-    <tableColumnSet :dialogVisible="state.dialogVisible" :columnList="state.waybillTableHeader"></tableColumnSet>
+    <tableColumnSet :dialogVisible="state.dialogVisible" :columnList="state.waybillTableHeader" @setColumn="setColumn" @closeDialog="closeDialog"></tableColumnSet>
   </div>
 </template>
 <script setup lang="ts">
@@ -97,7 +97,7 @@ const state = reactive({
   ],
   listLoading: true,
   UTCFlag:true,
-  dialogVisible:true
+  dialogVisible:false
 });
 
 const waybilltableData = ref([
@@ -210,11 +210,19 @@ const downLoad=(data) =>{
   console.log(data)
 }
 
-//点击刷新按钮
+//点击列设置按钮
 const columnSet=(data) =>{
-  console.log(data)
+  state.dialogVisible = true;
 }
 
+const setColumn = (data) => {
+  state.waybillTableHeader = data;
+  state.dialogVisible = false;
+}
+
+const closeDialog = (data) => {
+  state.dialogVisible = false;
+}
 
 </script>
 <style lang="scss" scoped>

src/views/baggageManagement/departure/station/index.vue

@@ -1,104 +1,7 @@
 <template>
-  <div class="station-view">
-    <div class="station-header">
-      <StationForm />
-      <div class="station-count">
-        <CountBox
-          :count-number="tableDataCount.waybillCount"
-          label="预计装载总运单数"
-        />
-        <CountBox
-          v-if="goodsCountFlag"
-          :count-number="tableDataCount.goodsCount"
-          label="预计装载总件数"
-        />
-      </div>
-      <div class="station-settings">
-        <TableSwitch v-model:flag="goodsCountFlag" label="显示件数" />
-        <TableSwitch v-model:flag="UTCFlag" label="开启UTC" />
-        <ColumnSet
-          :table-columns="tableColumns"
-          @checked-submit="columnChecked"
-        />
-      </div>
-    </div>
-    <div class="station-table">
-      <el-auto-resizer>
-        <template #default="{ height, width }">
-          <el-table-v2
-            :columns="filteredColumns"
-            :data="tableData"
-            :width="width"
-            :height="height"
-            :footer-height="60"
-            :row-class="rowClass"
-            fixed
-          >
-            <template #cell="slot: CellSlotProps">
-              <div :class="cellClass(slot)">
-                <span class="cell-text">
-                  {{ slot.rowData[slot.column.dataKey] }}
-                </span>
-                <div class="cell-background" />
-              </div>
-            </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
-                >
-              </div>
-            </template>
-          </el-table-v2>
-        </template>
-      </el-auto-resizer>
-    </div>
-  </div>
+  <StationView station-view-name="departure" />
 </template>
-<script lang="ts" setup>
-import type { CellSlotProps } from '../../hooks/useTableStyle'
-import StationForm from '../../components/StationForm/index.vue'
-import ColumnSet from '../../components/ColumnSet/index.vue'
-import CountBox from '../../components/CountBox/index.vue'
-import TableSwitch from '../../components/TableSwitch/index.vue'
-import useTableColumnSet from '../../hooks/useTableColumnSet'
-import useTableData from '../../hooks/useTableData'
-import useTableStyle from '../../hooks/useTableStyle'
 
-const goodsCountFlag = ref(true)
-const UTCFlag = ref(true)
-
-const { tableColumns, tableData } = useTableData('departure')
-const { columnChecked, filteredColumns } = useTableColumnSet(tableColumns)
-
-const tableDataCount = reactive({
-  waybillCount: 0,
-  goodsCount: 0,
-  flightCount: 0,
-  freightFlightCount: 0,
-  loadCount: 0,
-  takeOffCount: 0,
-})
-watch(tableData, records => {
-  tableDataCount.waybillCount = records.length
-  tableDataCount.goodsCount = records.length
-  tableDataCount.flightCount = records.length
-  tableDataCount.freightFlightCount = records.length
-  tableDataCount.loadCount = records.length
-  tableDataCount.takeOffCount = records.length
-})
-
-const { rowClass, cellClass } = useTableStyle()
+<script setup lang="ts">
+import StationView from '../../components/StationView/index.vue'
 </script>
-<style lang="scss" scoped>
-@import '../../style/station.scss';
-</style>

src/views/baggageManagement/hooks/useTableColumnSet.ts

@@ -1,15 +1,17 @@
-import { tableColumnInGroup } from '../components/ColumnSet/index.vue'
-import type { KeyType } from '../components/ColumnSet/index.vue'
+import type {
+  KeyType,
+  TableColumn,
+  TableColumnInGroup,
+} from '../components/ColumnSet/index.vue'
 import { Ref } from 'vue'
-import { Column } from 'element-plus'
 
 export default function useTableColumnSet(
-  tableColumns: Ref<tableColumnInGroup[] | Column[]>
+  tableColumns: Ref<TableColumnInGroup[] | TableColumn[]>
 ) {
   const filterColumnKeys = ref<KeyType[]>([])
   const filteredColumns = computed(() =>
     tableColumns.value.filter(({ dataKey }) =>
-      filterColumnKeys.value.includes(dataKey as KeyType)
+      filterColumnKeys.value.includes(dataKey)
     )
   )
   const columnChecked = (checkedColumnKeys: string[]) => {

src/views/baggageManagement/hooks/useTableData.ts

@@ -1,8 +1,10 @@
-import { Column } from 'element-plus'
-import type { KeyType } from '../components/ColumnSet/index.vue'
-import { tableColumnInGroup } from '../components/ColumnSet/index.vue'
+import type {
+  KeyType,
+  TableColumn,
+  TableColumnInGroup,
+} from '../components/ColumnSet/index.vue'
 
-type tableColumnsGroup = {
+type TableColumnsGroup = {
   groupTitle: string
   children: {
     key: KeyType
@@ -11,233 +13,371 @@ type tableColumnsGroup = {
     headerClass?: string
   }[]
 }
-
 enum Alignment {
   LEFT = 'left',
   CENTER = 'center',
   RIGHT = 'right',
 }
+type TableDataSource =
+  | 'departure'
+  | 'arrival'
+  | 'internationalDeparture'
+  | 'internationalArrival'
+  | 'test'
 
 const headerClassReflect = ['bg-yellow', 'bg-green', 'bg-cyan']
 
+const departureColumnGroups = [
+  {
+    groupTitle: '航班相关',
+    children: [
+      {
+        key: 'flightNO',
+        title: '航班号',
+      },
+      {
+        key: 'flightDate',
+        title: '执飞日期',
+      },
+      {
+        key: 'takeOffTime',
+        title: '起飞时间',
+      },
+      {
+        key: 'desitination',
+        title: '目的站',
+      },
+      {
+        key: 'gate',
+        title: '停机位',
+      },
+      {
+        key: 'preFlightNO',
+        title: '前序航班',
+      },
+      {
+        key: 'landingTime',
+        title: '实际降落\n时间',
+      },
+    ],
+  },
+  {
+    groupTitle: '货站相关',
+    children: [
+      {
+        key: 'special',
+        title: '特货信息',
+      },
+      {
+        key: 'projectLoad',
+        title: '预计装载数\n(运单/件)',
+        width: 100,
+      },
+      {
+        key: 'transferIn',
+        title: '中转进\n(运单/件)',
+        width: 100,
+      },
+      {
+        key: 'cancel',
+        title: '退运\n(板卡/件)',
+        width: 100,
+      },
+    ],
+  },
+  {
+    groupTitle: '地服相关',
+    children: [
+      {
+        key: 'receive',
+        title: '收运核单\n(运单/件/重量)',
+        width: 140,
+      },
+      {
+        key: 'check',
+        title: '查验\n(拒运/查验)',
+        width: 120,
+      },
+      {
+        key: 'security',
+        title: '安检\n(运单/件)',
+        width: 100,
+      },
+      {
+        key: 'add',
+        title: '加货\n(运单/板卡/件/重量)',
+        width: 160,
+      },
+      {
+        key: 'wait',
+        title: '待运区\n(板卡/件)',
+        width: 100,
+      },
+      {
+        key: 'stowage',
+        title: '配载\n(板卡/件)',
+        width: 100,
+      },
+      {
+        key: 'handOverTime',
+        title: '计划交接\n时间',
+      },
+      {
+        key: 'stationHandOver',
+        title: '货站交接\n(板卡/件)',
+        width: 100,
+      },
+      {
+        key: 'recheck',
+        title: '运输前复核\n(板卡/件)',
+        width: 100,
+      },
+      {
+        key: 'flightHandOver',
+        title: '机下交接\n(板卡/件)',
+        width: 100,
+      },
+      {
+        key: 'load',
+        title: '装机\n(板卡/件)',
+        width: 100,
+      },
+      {
+        key: 'goodsRegister',
+        title: '拉货登记\n(板卡/件)',
+        width: 100,
+      },
+      {
+        key: 'pullBack',
+        title: '拉回确认\n(板卡/件)',
+        width: 100,
+      },
+    ],
+  },
+]
+const arrivalColumnGroups = [
+  {
+    groupTitle: '航班相关',
+    children: [
+      {
+        key: 'flightNO',
+        title: '航班号',
+      },
+      {
+        key: 'flightDate',
+        title: '执飞日期',
+        width: 100,
+      },
+      {
+        key: 'landingTime',
+        title: '降落时间',
+        width: 100,
+      },
+      {
+        key: 'desitination',
+        title: '目的站',
+        width: 100,
+      },
+      {
+        key: 'gate',
+        title: '停机位',
+      },
+    ],
+  },
+  {
+    groupTitle: '货站相关',
+    children: [
+      {
+        key: 'special',
+        title: '特货信息',
+        width: 100,
+      },
+      {
+        key: 'projectUnload',
+        title: '预计卸载数\n(运单/件)',
+        width: 100,
+      },
+      {
+        key: 'transferOut',
+        title: '中转出\n(运单/件)',
+        width: 100,
+      },
+      {
+        key: 'difference',
+        title: '收货差异\n(板卡/件)',
+        width: 100,
+      },
+    ],
+  },
+  {
+    groupTitle: '地服相关',
+    children: [
+      {
+        key: 'unload',
+        title: '卸机\n(板/箱/卡)',
+        width: 160,
+      },
+      {
+        key: 'flightHandOver',
+        title: '机下交接\n(板/箱/卡)',
+        width: 160,
+      },
+      {
+        key: 'stationHandOver',
+        title: '货站交接\n(板/箱/卡)',
+        width: 160,
+      },
+      {
+        key: 'settle',
+        title: '理货\n(板卡/运单/件/重量)',
+        width: 160,
+      },
+      {
+        key: 'outCargo',
+        title: '出库\n(批/运单/件)',
+        width: 160,
+      },
+    ],
+  },
+]
 const groupsObj = {
+  departure: departureColumnGroups,
+  arrival: arrivalColumnGroups,
+  internationalDeparture: departureColumnGroups,
+  internationalArrival: arrivalColumnGroups,
+}
+const tableDatas = {
   departure: [
     {
-      groupTitle: '航班相关',
-      children: [
-        {
-          key: 'flightNO',
-          title: '航班号',
-        },
-        {
-          key: 'flightDate',
-          title: '执飞日期',
-        },
-        {
-          key: 'takeOffTime',
-          title: '起飞时间',
-        },
-        {
-          key: 'desitination',
-          title: '目的站',
-        },
-        {
-          key: 'gate',
-          title: '停机位',
-        },
-        {
-          key: 'preFlightNO',
-          title: '前序航班',
-        },
-        {
-          key: 'landingTime',
-          title: '实际降落\n时间',
-        },
-      ],
+      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',
     },
     {
-      groupTitle: '货站相关',
-      children: [
-        {
-          key: 'special',
-          title: '特货信息',
-        },
-        {
-          key: 'projectLoad',
-          title: '预计装载数\n(运单/件)',
-          width: 100,
-        },
-        {
-          key: 'transferIn',
-          title: '中转进\n(运单/件)',
-          width: 100,
-        },
-        {
-          key: 'cancel',
-          title: '退运\n(板卡/件)',
-          width: 100,
-        },
-      ],
+      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',
     },
     {
-      groupTitle: '地服相关',
-      children: [
-        {
-          key: 'receive',
-          title: '收运核单\n(运单/件/重量)',
-          width: 140,
-        },
-        {
-          key: 'check',
-          title: '查验\n(拒运/查验)',
-          width: 120,
-        },
-        {
-          key: 'security',
-          title: '安检\n(运单/件)',
-          width: 100,
-        },
-        {
-          key: 'add',
-          title: '加货\n(运单/板卡/件/重量)',
-          width: 160,
-        },
-        {
-          key: 'wait',
-          title: '待运区\n(板卡/件)',
-          width: 100,
-        },
-        {
-          key: 'stowage',
-          title: '配载\n(板卡/件)',
-          width: 100,
-        },
-        {
-          key: 'handOverTime',
-          title: '计划交接\n时间',
-        },
-        {
-          key: 'stationHandOver',
-          title: '货站交接\n(板卡/件)',
-          width: 100,
-        },
-        {
-          key: 'recheck',
-          title: '运输前复核\n(板卡/件)',
-          width: 100,
-        },
-        {
-          key: 'flightHandOver',
-          title: '机下交接\n(板卡/件)',
-          width: 100,
-        },
-        {
-          key: 'load',
-          title: '装机\n(板卡/件)',
-          width: 100,
-        },
-        {
-          key: 'goodsRegister',
-          title: '拉货登记\n(板卡/件)',
-          width: 100,
-        },
-        {
-          key: 'pullBack',
-          title: '拉回确认\n(板卡/件)',
-          width: 100,
-        },
-      ],
+      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: [
     {
-      groupTitle: '航班相关',
-      children: [
-        {
-          key: 'flightNO',
-          title: '航班号',
-        },
-        {
-          key: 'flightDate',
-          title: '执飞日期',
-          width: 100,
-        },
-        {
-          key: 'landingTime',
-          title: '降落时间',
-          width: 100,
-        },
-        {
-          key: 'desitination',
-          title: '目的站',
-          width: 100,
-        },
-        {
-          key: 'gate',
-          title: '停机位',
-        },
-      ],
+      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',
     },
     {
-      groupTitle: '货站相关',
-      children: [
-        {
-          key: 'special',
-          title: '特货信息',
-          width: 100,
-        },
-        {
-          key: 'projectUnload',
-          title: '预计卸载数\n(运单/件)',
-          width: 100,
-        },
-        {
-          key: 'transferOut',
-          title: '中转出\n(运单/件)',
-          width: 100,
-        },
-        {
-          key: 'difference',
-          title: '收货差异\n(板卡/件)',
-          width: 100,
-        },
-      ],
+      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',
     },
     {
-      groupTitle: '地服相关',
-      children: [
-        {
-          key: 'unload',
-          title: '卸机\n(板/箱/卡)',
-          width: 160,
-        },
-        {
-          key: 'flightHandOver',
-          title: '机下交接\n(板/箱/卡)',
-          width: 160,
-        },
-        {
-          key: 'stationHandOver',
-          title: '货站交接\n(板/箱/卡)',
-          width: 160,
-        },
-        {
-          key: 'settle',
-          title: '理货\n(板卡/运单/件/重量)',
-          width: 160,
-        },
-        {
-          key: 'outCargo',
-          title: '出库\n(批/运单/件)',
-          width: 160,
-        },
-      ],
+      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 tableDatas = {
-  departure: [
+  internationalDeparture: [
     {
       flightNO: 'ZH3423',
       flightDate: '2022/09/10',
@@ -317,7 +457,7 @@ const tableDatas = {
       pullBack: '0/5',
     },
   ],
-  arrival: [
+  internationalArrival: [
     {
       flightNO: 'ZH3423',
       flightDate: '2022/09/10',
@@ -369,11 +509,11 @@ const tableDatas = {
   ],
 }
 
-export default function useTableData(stationType: string = 'dearture') {
-  const tableColumns = ref<tableColumnInGroup[] | Column[]>([])
+export default function useTableData(tableDataSource: TableDataSource) {
+  const tableColumns = ref<TableColumnInGroup[] | TableColumn[]>([])
   const tableData = ref<{}[]>([])
   const getTableData = () => {
-    if (stationType === 'test') {
+    if (tableDataSource === 'test') {
       tableColumns.value = [
         {
           key: 'flightNO',
@@ -413,8 +553,9 @@ export default function useTableData(stationType: string = 'dearture') {
       tableData.value = tableDatas.arrival
       return
     }
-    const groups: tableColumnsGroup[] = groupsObj[stationType].map(
-      (group: tableColumnsGroup, groupIndex: number) => {
+
+    const groups: TableColumnsGroup[] = groupsObj[tableDataSource].map(
+      (group: TableColumnsGroup, groupIndex: number) => {
         group.children.forEach(column => {
           column.headerClass = headerClassReflect[groupIndex]
         })
@@ -422,7 +563,7 @@ export default function useTableData(stationType: string = 'dearture') {
       }
     )
     tableColumns.value = groups.reduce(
-      (columns: tableColumnInGroup[], group) => {
+      (columns: TableColumnInGroup[], group) => {
         columns.push(
           ...group.children.map(({ key, title, width, headerClass }) => ({
             key,
@@ -438,8 +579,7 @@ export default function useTableData(stationType: string = 'dearture') {
       },
       []
     )
-
-    tableData.value = tableDatas[stationType]
+    tableData.value = tableDatas[tableDataSource]
   }
   onMounted(() => {
     getTableData()

src/views/baggageManagement/hooks/useTableStyle.ts

@@ -1,15 +1,18 @@
-import type { tableColumnInGroup } from '../components/ColumnSet/index.vue'
+import type {
+  TableColumn,
+  TableColumnInGroup,
+} from '../components/ColumnSet/index.vue'
 import type { CSSProperties } from 'vue'
 
 type RowClassGetter = (param: {
-  columns: tableColumnInGroup[]
+  columns: TableColumn[] | TableColumnInGroup[]
   rowData: any
   rowIndex: number
 }) => string
 
 export type CellSlotProps = {
-  column: tableColumnInGroup
-  columns: tableColumnInGroup[]
+  column: TableColumn | TableColumnInGroup
+  columns: TableColumn[] | TableColumnInGroup[]
   columnIndex: number
   depth: number
   style: CSSProperties

src/views/baggageManagement/internationalArrival/station/index.vue

@@ -1,7 +1,7 @@
 <template>
-  <div></div>
+  <StationView station-view-name="internationalArrival" />
 </template>
 
-<script setup lang="ts"></script>
-
-<style scoped lang="scss"></style>
+<script setup lang="ts">
+import StationView from '../../components/StationView/index.vue'
+</script>

src/views/baggageManagement/internationalDeparture/station/index.vue

@@ -1,7 +1,7 @@
 <template>
-  <div></div>
+  <StationView station-view-name="internationalDeparture" />
 </template>
 
-<script setup lang="ts"></script>
-
-<style scoped lang="scss"></style>
+<script setup lang="ts">
+import StationView from '../../components/StationView/index.vue'
+</script>

src/views/baggageManagement/style/station.scss

@@ -29,6 +29,7 @@
     :deep .el-table-v2 {
       .el-table-v2__header-cell,
       .el-table-v2__row-cell {
+        padding: 0;
         &:not(:last-child) {
           border-right: 1px solid #dfe3ea;
         }
@@ -77,12 +78,14 @@
                 top: 0;
                 left: 0;
                 z-index: 0;
-                background-color: transparent;
+                display: none;
               }
               &.cell-warning .cell-background {
+                display: block;
                 background-color: #f6cda5;
               }
               &.cell-error .cell-background {
+                display: block;
                 background-color: #f38080;
               }
             }