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

.editorconfig

@@ -5,7 +5,7 @@ root = true
 charset = utf-8
 indent_style = space
 indent_size = 2
-end_of_line = lf
+end_of_line = crlf
 insert_final_newline = true
 trim_trailing_whitespace = true
 

src/router/routes/routes-file-six.ts

@@ -1,4 +1,5 @@
 import Layout from '@/layout'
+import { h, resolveComponent } from 'vue'
 
 const HomeRoutes = {
   path: '/baggageManagement',
@@ -9,10 +10,13 @@ const HomeRoutes = {
   meta: { title: '综合可视化', elSvgIcon: 'Fold' },
   children: [
     {
-      path: '/baggageManagement/departure/station',
+      path: '/baggageManagement/departure',
       name: 'InternalDeparture',
+      redirect: '/baggageManagement/departure/station',
       meta: { title: '国内出港', elSvgIcon: 'Fold', icon: 'table' },
-      component: () => import('@/views/baggageManagement/departure/index.vue'),
+      component: {
+        render: () => h(resolveComponent('router-view')),
+      },
       children: [
         {
           path: '/baggageManagement/departure/station',
@@ -45,30 +49,74 @@ const HomeRoutes = {
       ],
     },
     {
-      path: '/baggageManagement/departure',
-      name: 'DepartureC',
+      path: '/baggageManagement/internationalDeparture',
+      name: 'InternationalDeparture',
+      redirect: '/baggageManagement/internationalDeparture/station',
       meta: { title: '国际出港', elSvgIcon: 'Fold', icon: 'table' },
-      component: () => import('@/views/baggageManagement/departure/index.vue'),
+      component: {
+        render: () => h(resolveComponent('router-view')),
+      },
+      children: [
+        {
+          path: '/baggageManagement/internationalDeparture/station',
+          name: 'InternationalDepartureStation',
+          meta: { title: '国际出港航站视图', elSvgIcon: 'Fold', icon: 'table' },
+          component: () =>
+            import(
+              '@/views/baggageManagement/internationalDeparture/station/index.vue'
+            ),
+        },
+        {
+          path: '/baggageManagement/internationalDeparture/flight',
+          name: 'InternationalDepartureFlight',
+          meta: { title: '国际出港航班视图', elSvgIcon: 'Fold', icon: 'table' },
+          component: () =>
+            import(
+              '@/views/baggageManagement/internationalDeparture/flight/index.vue'
+            ),
+        },
+        {
+          path: '/baggageManagement/internationalDeparture/waybill',
+          name: 'InternationalepartureWaybill',
+          meta: { title: '国际出港运单视图', elSvgIcon: 'Fold', icon: 'table' },
+          component: () =>
+            import(
+              '@/views/baggageManagement/internationalDeparture/waybill/index.vue'
+            ),
+        },
+        {
+          path: '/baggageManagement/internationalDeparture/goods',
+          name: 'InternationalDepartureGoods',
+          meta: { title: '国际出港货物视图', elSvgIcon: 'Fold', icon: 'table' },
+          component: () =>
+            import(
+              '@/views/baggageManagement/internationalDeparture/goods/index.vue'
+            ),
+        },
+      ],
     },
     {
-      path: '/baggageManagement/Arrival/station',
-      name: 'InternalArrival',
+      path: '/baggageManagement/arrival',
+      name: 'Arrival',
+      redirect: '/baggageManagement/arrival/station',
       meta: { title: '国内进港', elSvgIcon: 'Fold', icon: 'table' },
-      component: () => import('@/views/baggageManagement/departure/index.vue'),
+      component: {
+        render: () => h(resolveComponent('router-view')),
+      },
       children: [
         {
           path: '/baggageManagement/arrival/station',
           name: 'ArrivalStation',
           meta: { title: '国内进港航站视图', elSvgIcon: 'Fold', icon: 'table' },
           component: () =>
-            import('@/views/baggageManagement/departure/station/index.vue'),
+            import('@/views/baggageManagement/arrival/station/index.vue'),
         },
         {
           path: '/baggageManagement/arrival/flight',
           name: 'ArrivalFlight',
           meta: { title: '国内进港航班视图', elSvgIcon: 'Fold', icon: 'table' },
           component: () =>
-            import('@/views/baggageManagement/departure/flight/index.vue'),
+            import('@/views/baggageManagement/arrival/flight/index.vue'),
         },
         {
           path: '/baggageManagement/arrival/waybill',
@@ -87,10 +135,51 @@ const HomeRoutes = {
       ],
     },
     {
-      path: '/baggageManagement/arrival',
-      name: 'Arrival',
+      path: '/baggageManagement/internationalArrival',
+      name: 'InternationalArrival',
+      redirect: '/baggageManagement/internationalArrival/station',
       meta: { title: '国际进港', elSvgIcon: 'Fold', icon: 'table' },
-      component: () => import('@/views/baggageManagement/arrival/index.vue'),
+      component: {
+        render: () => h(resolveComponent('router-view')),
+      },
+      children: [
+        {
+          path: '/baggageManagement/internationalArrival/station',
+          name: 'InternationalArrivalStation',
+          meta: { title: '国际进港航站视图', elSvgIcon: 'Fold', icon: 'table' },
+          component: () =>
+            import(
+              '@/views/baggageManagement/internationalArrival/station/index.vue'
+            ),
+        },
+        {
+          path: '/baggageManagement/internationalArrival/flight',
+          name: 'InternationalArrivalFlight',
+          meta: { title: '国际进港航班视图', elSvgIcon: 'Fold', icon: 'table' },
+          component: () =>
+            import(
+              '@/views/baggageManagement/internationalArrival/flight/index.vue'
+            ),
+        },
+        {
+          path: '/baggageManagement/internationalArrival/waybill',
+          name: 'InternationalArrivalWaybill',
+          meta: { title: '国际进港运单视图', elSvgIcon: 'Fold', icon: 'table' },
+          component: () =>
+            import(
+              '@/views/baggageManagement/internationalArrival/waybill/index.vue'
+            ),
+        },
+        {
+          path: '/baggageManagement/internationalArrival/goods',
+          name: 'InternationalArrivalGoods',
+          meta: { title: '国际进港货物视图', elSvgIcon: 'Fold', icon: 'table' },
+          component: () =>
+            import(
+              '@/views/baggageManagement/internationalArrival/goods/index.vue'
+            ),
+        },
+      ],
     },
     {
       path: '/baggageManagement/trackMap',

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

@@ -0,0 +1,7 @@
+<template>
+  <div></div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped lang="scss"></style>

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

@@ -0,0 +1,7 @@
+<template>
+  <div></div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped lang="scss"></style>

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

@@ -21,9 +21,9 @@
         >
           <el-checkbox
             v-for="tableColumn in columnGroup.columns"
-            :key="tableColumn.columnProp"
-            :label="tableColumn.columnProp"
-            >{{ tableColumn.columnName }}</el-checkbox
+            :key="tableColumn.dataKey"
+            :label="tableColumn.dataKey"
+            >{{ tableColumn.title }}</el-checkbox
           >
         </el-checkbox-group>
       </div>
@@ -34,20 +34,22 @@
 <script setup lang="ts">
 import { Tools } from '@element-plus/icons-vue'
 import Dialog from '@/components/dialog/index.vue'
+import type { Column } from 'element-plus'
 
-export interface tableColumn {
-  columnName: string
-  columnProp: string
+export type KeyType = string|number| symbol
+
+export interface tableColumnInGroup<T = any> extends Column<T> {
+  dataKey: KeyType
   groupTitle: string
 }
 export interface tableColumnGroup {
   title: string
-  columns: tableColumn[]
+  columns: tableColumnInGroup[]
 }
 
 const props = defineProps({
   tableColumns: {
-    type: Array<tableColumn>,
+    type: Array<tableColumnInGroup>,
     required: true,
   }
 })
@@ -62,17 +64,6 @@ const dialogHide = () => {
   dialogFlag.value = false
 }
 
-const checkedGroups = computed(() => {
-  const groups = {}
-  props.tableColumns.forEach(({ columnProp, groupTitle }) => {
-    if (groups[groupTitle] && groups[groupTitle] instanceof Array) {
-      groups[groupTitle].push(columnProp)
-    } else {
-      groups[groupTitle] = [columnProp]
-    }
-  })
-  return groups
-})
 const columnGroups = computed(() => props.tableColumns.reduce((pre: tableColumnGroup[], curr) => {
   const theGroup = pre.find(columnGroup => columnGroup.title === curr.groupTitle)
   if (theGroup) {
@@ -85,10 +76,25 @@ const columnGroups = computed(() => props.tableColumns.reduce((pre: tableColumnG
   }
   return pre
 }, []))
-const checkedColumnProps = computed<string[]>(() => Object.getOwnPropertyNames(checkedGroups.value).map(prop => checkedGroups.value[prop]).flat())
+
+const checkedGroups = ref<string[]>([])
+watch(() => props.tableColumns, columns => {
+  checkedGroups.value = []
+  columns.forEach(({ dataKey, groupTitle }) => {
+    if (checkedGroups.value[groupTitle] && checkedGroups.value[groupTitle] instanceof Array) {
+      checkedGroups.value[groupTitle].push(dataKey)
+    } else {
+      checkedGroups.value[groupTitle] = [dataKey]
+    }
+  })
+  emits('checkedSubmit', checkedColumnKeys.value)
+})
+const checkedColumnKeys = computed<string[]>(() =>
+  Object.getOwnPropertyNames(checkedGroups.value).map(prop => checkedGroups.value[prop]).flat()
+)
 
 const submitHandler = () => {
-  emits('checkedSubmit', checkedColumnProps.value)
+  emits('checkedSubmit', checkedColumnKeys.value)
   dialogHide()
 }
 </script>
@@ -106,7 +112,7 @@ const submitHandler = () => {
 
   .group-title {
     font-size: 16px;
-    font-family: Microsoft YaHei;
+    font-family: Helvetica, Microsoft YaHei;
     font-weight: bold;
     color: #303133;
     margin-bottom: 22px;

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

@@ -0,0 +1,115 @@
+<template>
+  <div class="count-box">
+    <span class="label">{{ label }}</span>
+    <li v-for="(_, index) in numberItems" :key="index" class="number-item">
+      <span class="number-box">
+        <i ref="numberBoxes" class="number-list">0123456789</i>
+      </span>
+    </li>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ElMessage } from 'element-plus'
+
+const props = defineProps({
+  countNumber: {
+    type: Number,
+    default: 0,
+  },
+  label: {
+    type: String,
+    default: '总数',
+  },
+})
+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'
+  }
+  numberString = '000000' + numberString
+  return numberString.slice(-6).split('')
+})
+watch(numberItems, items => {
+  for (let index = 0; index < numberBoxes.value.length; index++) {
+    const box = numberBoxes.value[index]
+    if (box) {
+      box.style.transform = `translate(-50%, -${Number(items[index]) * 10}%)`
+    }
+  }
+})
+</script>
+
+<style scoped lang="scss">
+.count-box {
+  position: relative;
+  height: 32px;
+  line-height: 32px;
+  text-align: center;
+  list-style: none;
+  writing-mode: vertical-lr;
+  text-orientation: upright;
+  /*文字禁止编辑*/
+  -moz-user-select: none; /*火狐*/
+  -webkit-user-select: none; /*webkit浏览器*/
+  -ms-user-select: none; /*IE10*/
+  -khtml-user-select: none; /*早期浏览器*/
+  user-select: none;
+  overflow: hidden;
+  .label {
+    padding-right: 8px;
+    line-height: 32px;
+    font-family: Helvetica, Microsoft YaHei;
+    font-weight: bold;
+    color: #101116;
+    writing-mode: horizontal-tb !important;
+    text-orientation: none !important;
+    /*文字禁止编辑*/
+    -moz-user-select: none; /*火狐*/
+    -webkit-user-select: none; /*webkit浏览器*/
+    -ms-user-select: none; /*IE10*/
+    -khtml-user-select: none; /*早期浏览器*/
+    user-select: none;
+  }
+  .number-item {
+    width: 32px;
+    height: 32px;
+    list-style: none;
+    margin-right: 4px;
+    background: #410425;
+    border-radius: 4px;
+    border: 1px solid #d2d6df;
+    font-family: Helvetica, Microsoft YaHei;
+    font-weight: bold;
+    color: #ffffff;
+    & > .number-box {
+      position: relative;
+      display: inline-block;
+      margin-right: 10px;
+      width: 100%;
+      height: 100%;
+      writing-mode: vertical-rl;
+      text-orientation: upright;
+      overflow: hidden;
+      & > .number-list {
+        font-style: normal;
+        position: absolute;
+        top: 8px;
+        left: 50%;
+        transform: translate(-50%, 0%);
+        transition: transform 1s ease-in-out;
+        letter-spacing: 10px;
+      }
+    }
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,109 @@
+<template>
+  <el-form :model="formData" inline class="station-form">
+    <el-form-item :prop="formData.startDate" style="width: 184px">
+      <el-date-picker
+        v-model="formData.startDate"
+        type="datetime"
+        format="YYYY-MM-DD HH:mm:ss"
+        value-format="YYYY-MM-DD hh:mm:ss"
+        size="default"
+        :clearable="false"
+      />
+    </el-form-item>
+    <el-form-item :prop="formData.endDate" style="width: 184px">
+      <el-date-picker
+        v-model="formData.endDate"
+        type="datetime"
+        format="YYYY-MM-DD HH:mm:ss"
+        value-format="YYYY-MM-DD hh:mm:ss"
+        size="default"
+        :clearable="false"
+      />
+    </el-form-item>
+    <el-form-item :prop="formData.flightStatus" style="width: 104px">
+      <el-select
+        v-model="formData.flightStatus"
+        size="default"
+        placeholder="全部航班"
+      >
+        <el-option
+          v-for="option in flightStatusOptions"
+          :key="option.value"
+          :label="option.label"
+          :value="option.value"
+        />
+      </el-select>
+    </el-form-item>
+    <el-form-item :prop="formData.flightWarning" style="width: 104px">
+      <el-select
+        v-model="formData.flightWarning"
+        size="default"
+        placeholder="全部航班"
+      >
+        <el-option
+          v-for="option in flightWarningOptions"
+          :key="option.value"
+          :label="option.label"
+          :value="option.value"
+        />
+      </el-select>
+    </el-form-item>
+    <el-form-item
+      v-if="international"
+      :prop="formData.waybillType"
+      style="width: 104px"
+    >
+      <el-select
+        v-model="formData.waybillType"
+        size="default"
+        placeholder="运单类型"
+      >
+        <el-option
+          v-for="option in waybillTypeOptions"
+          :key="option.value"
+          :label="option.label"
+          :value="option.value"
+        />
+      </el-select>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script setup lang="ts">
+import { parseTime } from '@/utils/validate'
+
+interface selectOptions {
+  label: string
+  value: string | number
+}
+
+const props = defineProps({
+  international: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const formData = reactive({
+  startDate: parseTime(new Date(), '{y}/{m}/{d} {h}:{i}:{s}'),
+  endDate: parseTime(new Date(), '{y}/{m}/{d} {h}:{i}:{s}'),
+  flightStatus: '',
+  flightWarning: '',
+  waybillType: '',
+})
+const flightStatusOptions = ref<selectOptions[]>([])
+const flightWarningOptions = ref<selectOptions[]>([])
+const waybillTypeOptions = ref<selectOptions[]>([])
+</script>
+
+<style scoped lang="scss">
+.station-form :deep {
+  .el-form-item {
+    margin: 0;
+    &:not(:last-of-type) {
+      margin-right: 8px;
+    }
+  }
+}
+</style>
+

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

@@ -0,0 +1,38 @@
+<template>
+  <div class="station-switch">
+    <el-switch
+      v-model="flag"
+      size="default"
+      style="--el-switch-on-color: #ac014d; --el-switch-off-color: #b1b1b1"
+      @change="
+        val => {
+          emit('update:flag', val)
+        }
+      "
+    />
+    <span class="switch-label">{{ label }}</span>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  flag: {
+    type: Boolean,
+    required: true,
+  },
+  label: {
+    type: String,
+  },
+})
+const emit = defineEmits(['update:flag'])
+</script>
+
+<style scoped lang="scss">
+.station-switch {
+  height: 32px;
+  .switch-label {
+    padding-left: 4px;
+    line-height: 32px;
+  }
+}
+</style>

src/views/baggageManagement/departure/index.vue

@@ -1,13 +0,0 @@
-<template>
-  <div class="airport-view">
-    <router-view />
-  </div>
-</template>
-<script lang="ts" setup>
-</script>
-<style lang="scss" scoped>
-.airport-view{
-  width: 100%;
-  height: 100%;
-}
-</style>

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

@@ -1,11 +1,104 @@
 <template>
-  <div></div>
+  <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>
 </template>
-<script lang="ts">
-import { defineComponent } from "vue";
+<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'
 
-export default defineComponent({
-  setup() {},
-});
+const goodsCountFlag = ref(true)
+const UTCFlag = ref(true)
+
+const { tableColumns, tableData } = useTableData()
+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>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+@import '../../style/station.scss';
+</style>

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

@@ -181,18 +181,18 @@ const tableHeader = [
   { label: "货物编码", key: "goodsNo" },
   { label: "拉下", key: "dwon1" },
   { label: "退运", key: "return" },
-  { label: "收货核单", key: "receipt", lableClass: "scoreColumn" },
-  { label: "安检", key: "securityCheck" },
-  { label: "理货", key: "tally" },
-  { label: "拉下", key: "dwon2" },
-  { label: "待运区", key: "waitingArea" },
-  { label: "货站交接", key: "goodSstation1" },
-  { label: "机下交接", key: "offBoard1" },
-  { label: "装机", key: "installEquipment" },
-  { label: "卸机", key: "unloading", lableClass: "scoreColumn" },
-  { label: "机下交接", key: "offBoard2" },
-  { label: "货站交接", key: "goodSstation2" },
-  { label: "提取", key: "extract" },
+  { label: "收货核单", key: "receipt", lableClass: "scoreColumn",columnClassName:"scoreColumn" },
+  { label: "安检", key: "securityCheck" , lableClass: "scoreColumn",columnClassName:"scoreColumn" },
+  { label: "理货", key: "tally" , lableClass: "scoreColumn",columnClassName:"scoreColumn" },
+  { label: "拉下", key: "dwon2" , lableClass: "scoreColumn",columnClassName:"scoreColumn" },
+  { label: "待运区", key: "waitingArea" , lableClass: "scoreColumn",columnClassName:"scoreColumn" },
+  { label: "货站交接", key: "goodSstation1" , lableClass: "scoreColumn",columnClassName:"scoreColumn" },
+  { label: "机下交接", key: "offBoard1" , lableClass: "scoreColumn",columnClassName:"scoreColumn" },
+  { label: "装机", key: "installEquipment" , lableClass: "scoreColumn",columnClassName:"scoreColumn" },
+  { label: "卸机", key: "unloading", lableClass: "scoreColumn2" ,columnClassName:"scoreColumn2"},
+  { label: "机下交接", key: "offBoard2", lableClass: "scoreColumn2" ,columnClassName:"scoreColumn2" },
+  { label: "货站交接", key: "goodSstation2", lableClass: "scoreColumn2" ,columnClassName:"scoreColumn2" },
+  { label: "提取", key: "extract", lableClass: "scoreColumn2" ,columnClassName:"scoreColumn2" },
 ];
 const tableData = [
   {
@@ -317,7 +317,10 @@ const clear = () => {
   }
   :deep &-table {
     .scoreColumn {
-      background: #eef3d6;
+      background: #eef3d6!important;
+    }
+    .scoreColumn2{
+      background: #D6E6F3!important;
     }
   }
 }

src/views/baggageManagement/hooks/useTableColumnSet.ts

@@ -0,0 +1,16 @@
+import { tableColumnInGroup } from '../components/ColumnSet/index.vue'
+import { Ref } from 'vue'
+
+export default function useTableColumnSet(tableColumns: Ref<tableColumnInGroup[]>) {
+  const filterColumnKeys = ref<string[]>([])
+  const filteredColumns = computed(() =>
+    tableColumns.value.filter(({ dataKey }) => filterColumnKeys.value.includes(dataKey))
+  )
+  const columnChecked = (checkedColumnKeys: string[]) => {
+    filterColumnKeys.value = checkedColumnKeys
+  }
+  return {
+    columnChecked,
+    filteredColumns,
+  }
+}

src/views/baggageManagement/hooks/useTableColumns.ts

@@ -1,31 +0,0 @@
-import { tableColumn } from '../components/ColumnSet/index.vue'
-export default function useTableColumns() {
-  const tableColumns = ref<tableColumn[]>([])
-  let filterColumnProps: string[] = []
-  const filteredColumns = computed(() =>
-    tableColumns.value.filter(({ columnProp }) =>
-      filterColumnProps.includes(columnProp)
-    )
-  )
-  const getTableColumns = () => {
-    tableColumns.value = [
-      {
-        columnName: '航班号',
-        columnProp: 'flightNO',
-        groupTitle: '航班相关',
-      },
-    ]
-  }
-  const columnChecked = checkedColumnProps => {
-    filterColumnProps = checkedColumnProps
-  }
-  onMounted(() => {
-    getTableColumns()
-  })
-  
-  return {
-    tableColumns,
-    columnChecked,
-    filteredColumns
-  }
-}

src/views/baggageManagement/hooks/useTableData.ts

@@ -1,12 +1,77 @@
+import type { KeyType } from '../components/ColumnSet/index.vue'
+import { tableColumnInGroup } from '../components/ColumnSet/index.vue'
+
+type tableColumnsGroups = {
+  groupTitle: string
+  children: {
+    key: KeyType
+    title: string
+    width?: number
+    headerClass: string
+  }[]
+}[]
+
+enum Alignment {
+  LEFT = 'left',
+  CENTER = 'center',
+  RIGHT = 'right',
+}
+
+const gourpNumber = 3
+const groupColumnNumber = 6
+const headerClassReflect = ['bg-yellow', 'bg-green', 'bg-cyan']
+
 export default function useTableData() {
-  const tableData = ref<any[]>([])
+  const tableColumns = ref<tableColumnInGroup[]>([])
+  const tableData = ref<{}[]>([])
   const getTableData = () => {
-    tableData.value = []
+    const groups: tableColumnsGroups = Array.from({ length: gourpNumber }).map(
+      (_, groupIndex) => ({
+        groupTitle: `group${groupIndex + 1}`,
+        children: Array.from({ length: groupColumnNumber }).map(
+          (_, columnIndex) => ({
+            key: `group${groupIndex}-column${columnIndex}`,
+            title: `${groupIndex + 1}组-${columnIndex + 1}列`,
+            width: 100,
+            headerClass: headerClassReflect[groupIndex] || '',
+          })
+        ),
+      })
+    )
+    tableColumns.value = groups.reduce(
+      (columns: tableColumnInGroup[], group) => {
+        columns.push(
+          ...group.children.map(({ key, title, width, headerClass }) => ({
+            key,
+            dataKey: key,
+            title,
+            width: width ?? 80,
+            headerClass,
+            align: Alignment.CENTER,
+            groupTitle: group.groupTitle,
+          }))
+        )
+        return columns
+      },
+      []
+    )
+
+    tableData.value = Array.from({ length: 20 }).map((_, rowIndex) =>
+      tableColumns.value.reduce((rowData, column, columnIndex) => {
+        rowData[column.dataKey] = `${rowIndex + 1}行-${
+          Math.floor(columnIndex / groupColumnNumber) + 1
+        }组-${(columnIndex % groupColumnNumber) + 1}列`
+
+        return rowData
+      }, {})
+    )
   }
   onMounted(() => {
     getTableData()
   })
+
   return {
-    tableData
+    tableColumns,
+    tableData,
   }
 }

src/views/baggageManagement/hooks/useTableStyle.ts

@@ -0,0 +1,65 @@
+import type { tableColumnInGroup } from '../components/ColumnSet/index.vue'
+import type { CSSProperties } from 'vue'
+
+type RowClassGetter = (param: {
+  columns: tableColumnInGroup[]
+  rowData: any
+  rowIndex: number
+}) => string
+
+export type CellSlotProps = {
+  column: tableColumnInGroup
+  columns: tableColumnInGroup[]
+  columnIndex: number
+  depth: number
+  style: CSSProperties
+  rowData: any
+  rowIndex: number
+  isScrolling: boolean
+  expandIconProps?:
+    | {
+        rowData: any
+        rowIndex: number
+        onExpand: (expand: boolean) => void
+      }
+    | undefined
+}
+
+type CellClassGetter = (param: CellSlotProps) => string
+
+const defaultCellClass = 'el-table-v2__cell-text'
+
+export default function useTableStyle() {
+  const rowClass: RowClassGetter = ({ columns, rowData, rowIndex }) => {
+    const classes: string[] = []
+    if (rowIndex <= 2) {
+      classes.push('bg-gray')
+    }
+    if (rowIndex === 2) {
+      classes.push('underline-red')
+    }
+    return classes.join(' ')
+  }
+
+  const cellClass: CellClassGetter = ({
+    column,
+    columns,
+    columnIndex,
+    rowData,
+    rowIndex,
+  }) => {
+    const classes: string[] = [defaultCellClass]
+    if (rowData[column.dataKey] === '4行-2组-6列') {
+      classes.push('cell-warning')
+    }
+    if (rowData[column.dataKey] === '5行-3组-3列') {
+      classes.push('cell-error')
+    }
+    return classes.join(' ')
+  }
+
+  return {
+    rowClass,
+    cellClass,
+  }
+}

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

@@ -0,0 +1,7 @@
+<template>
+  <div></div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped lang="scss"></style>

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

@@ -0,0 +1,7 @@
+<template>
+  <div></div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped lang="scss"></style>

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

@@ -0,0 +1,7 @@
+<template>
+  <div></div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped lang="scss"></style>

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

@@ -0,0 +1,7 @@
+<template>
+  <div></div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped lang="scss"></style>

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

@@ -0,0 +1,7 @@
+<template>
+  <div></div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped lang="scss"></style>

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

@@ -0,0 +1,7 @@
+<template>
+  <div></div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped lang="scss"></style>

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

@@ -0,0 +1,7 @@
+<template>
+  <div></div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped lang="scss"></style>

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

@@ -0,0 +1,7 @@
+<template>
+  <div></div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped lang="scss"></style>

src/views/baggageManagement/style/station.scss

@@ -0,0 +1,112 @@
+.station-view {
+  width: 100%;
+  height: 100%;
+  .station-header {
+    display: flex;
+    margin-bottom: 16px;
+    .station-form {
+      margin-right: 43px;
+    }
+    .station-count {
+      margin-right: 24px;
+      flex: 1;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    .station-settings {
+      display: flex;
+      align-items: center;
+      .station-switch {
+        margin-right: 28px;
+        &:nth-child(2) {
+          margin-right: 24px;
+        }
+      }
+    }
+  }
+  .station-table {
+    width: 100%;
+    height: calc(100% - 32px - 16px);
+    :deep .el-table-v2 {
+      .el-table-v2__header-cell,
+      .el-table-v2__row-cell {
+        &:not(:last-child) {
+          border-right: 1px solid #dfe3ea;
+        }
+      }
+      .el-table-v2__header-cell-text,
+      .el-table-v2__cell-text {
+        font-size: 14px;
+        font-family: Helvetica, Microsoft YaHei;
+        font-weight: bold;
+        color: #101116;
+        white-space: pre-line;
+      }
+      .el-table-v2__header {
+        .el-table-v2__header-cell {
+          &.bg-yellow {
+            background-color: #f9f3cb;
+          }
+          &.bg-green {
+            background-color: #ace5d3;
+          }
+          &.bg-cyan {
+            background-color: #b7d5e8;
+          }
+        }
+      }
+      .el-table-v2__body {
+        .el-table-v2__row {
+          &.bg-gray {
+            background-color: #d2d6df;
+          }
+          &.underline-red {
+            border-bottom: 2px solid #e83f82;
+          }
+          .el-table-v2__row-cell {
+            position: relative;
+            .el-table-v2__cell-text {
+              .cell-text {
+                position: relative;
+                z-index: 1;
+              }
+              .cell-background {
+                content: '';
+                width: 100%;
+                height: 100%;
+                position: absolute;
+                top: 0;
+                left: 0;
+                z-index: 0;
+                background-color: transparent;
+              }
+              &.cell-warning .cell-background {
+                background-color: #f6cda5;
+              }
+              &.cell-error .cell-background {
+                background-color: #f38080;
+              }
+            }
+          }
+        }
+      }
+      .table-footer {
+        padding-left: 8px;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        background-color: #dfe3ea;
+        &-count {
+          font-size: 16px;
+          font-family: Helvetica, Microsoft YaHei;
+          font-weight: bold;
+          color: #303133;
+          &:not(:last-of-type) {
+            margin-right: 48px;
+          }
+        }
+      }
+    }
+  }
+}