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

src/components/tableTemp/index.vue

@@ -35,7 +35,7 @@
       props.tableProperty.showSummary
         ? props.tableProperty.showSummary
         : tablePropertyDefault.showSummary
-    " :row-class-name="tableRowClassName" :cell-class-name="cellClassName">
+    " :row-class-name="tableRowClassName" :cell-class-name="cellClassName" @cell-click="cellClickHandler">
     <el-table-column v-if="isStatus" width="55">
       <template #default="scope">
         <div class="tableStatus">
@@ -84,6 +84,7 @@
 
 <script setup lang="ts">
 import { computed,watchEffect } from "vue";
+import { ElTable } from "element-plus";
 //表格参数
 const tablePropertyDefault = {
   height: "100%",
@@ -187,7 +188,7 @@ const childDatas = computed(() => (item: any) => {
 });
 
 //向父组件传参 btnClick：点击按钮后    load  触发下拉加载   cellClass 修改某一行class的触发条件
-const emit = defineEmits(["btnClick", "load", "cellClass"]);
+const emit = defineEmits(["btnClick", "load", "cellClass", "cellClick"]);
 
 //按钮点击index为当前行序号 row 为当前行 param按钮类型判断参数由父组件传过来
 const handleClick = (index: number, row: Object, param: number) => {
@@ -223,7 +224,11 @@ const load = () => {
   emit("load", true);
 };
 
-const table = ref(null)
+const cellClickHandler = (row, column, cell, event) => {
+  emit('cellClick', row, column, cell, event)
+}
+
+const table = ref<InstanceType<typeof ElTable> | null>(null)
 
 defineExpose({
   cellClass,

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

@@ -1,193 +1,375 @@
 import Layout from '@/layout'
 import { h, resolveComponent } from 'vue'
 
-const HomeRoutes = {
-  path: '/baggageManagement',
+const ActualTimeRoutes = {
+  path: '/realTime',
   component: Layout,
-  name: 'baggageManagement',
-  redirect: '/baggageManagement/departure',
+  name: 'realTime',
+  redirect: '/realTime/departure',
   //using el svg icon, the elSvgIcon first when at the same time using elSvgIcon and icon
-  meta: { title: '综合可视化', elSvgIcon: 'Fold' },
+  meta: { title: '综合可视化', elSvgIcon: 'Fold', breadcrumb: false },
   children: [
     {
-      path: '/baggageManagement/departure',
-      name: 'InternalDeparture',
-      redirect: '/baggageManagement/departure/station',
-      meta: { title: '国内出港', elSvgIcon: 'Fold', icon: 'table' },
+      path: '/realTime/departure',
+      name: 'Departure',
+      redirect: '/realTime/departure/station',
+      meta: {
+        title: '国内出港',
+        elSvgIcon: 'Fold',
+        icon: 'table',
+      },
       component: {
         render: () => h(resolveComponent('router-view')),
       },
       children: [
         {
-          path: '/baggageManagement/departure/station',
+          path: '/realTime/departure/station',
           name: 'DepartureStation',
-          meta: { title: '国内出港航站视图', elSvgIcon: 'Fold', icon: 'table' },
-          component: () =>
-            import('@/views/baggageManagement/departure/station/index.vue'),
-        },
-        {
-          path: '/baggageManagement/departure/flight',
-          name: 'DepartureFlight',
-          meta: { title: '国内出港航班视图', elSvgIcon: 'Fold', icon: 'table' },
-          component: () =>
-            import('@/views/baggageManagement/departure/flight/index.vue'),
-        },
-        {
-          path: '/baggageManagement/departure/waybill',
-          name: 'DepartureWaybill',
-          meta: { title: '国内出港运单视图', elSvgIcon: 'Fold', icon: 'table' },
-          component: () =>
-            import('@/views/baggageManagement/departure/waybill/index.vue'),
-        },
-        {
-          path: '/baggageManagement/departure/goods',
-          name: 'DepartureGoods',
-          meta: { title: '国内出港货物视图', elSvgIcon: 'Fold', icon: 'table' },
-          component: () =>
-            import('@/views/baggageManagement/departure/goods/index.vue'),
+          meta: {
+            title: '国内出港航站视图',
+            elSvgIcon: 'Fold',
+            icon: 'table',
+            breadcrumb: false,
+          },
+          component: {
+            render: () => h(resolveComponent('router-view')),
+          },
+          children: [
+            {
+              path: '/realTime/departure/station',
+              name: 'DepartureStationView',
+              component: () =>
+                import('@/views/realTime/departure/station/index.vue'),
+            },
+            {
+              path: '/realTime/departure/flight',
+              name: 'DepartureFlight',
+              meta: {
+                title: '国内出港航班视图',
+                elSvgIcon: 'Fold',
+                icon: 'table',
+              },
+              component: {
+                render: () => h(resolveComponent('router-view')),
+              },
+              children: [
+                {
+                  path: '/realTime/departure/flight',
+                  name: 'DepartureFlightView',
+                  component: () =>
+                    import('@/views/realTime/departure/flight/index.vue'),
+                },
+                {
+                  path: '/realTime/departure/waybill',
+                  name: 'DepartureWaybill',
+                  meta: {
+                    title: '国内出港运单视图',
+                    elSvgIcon: 'Fold',
+                    icon: 'table',
+                  },
+                  component: {
+                    render: () => h(resolveComponent('router-view')),
+                  },
+                  children: [
+                    {
+                      path: '/realTime/departure/waybill',
+                      name: 'DepartureWaybillView',
+                      component: () =>
+                        import(
+                          '@/views/realTime/departure/waybill/index.vue'
+                        ),
+                    },
+                    {
+                      path: '/realTime/departure/goods',
+                      name: 'DepartureGoods',
+                      meta: {
+                        title: '国内出港货物视图',
+                        elSvgIcon: 'Fold',
+                        icon: 'table',
+                      },
+                      component: () =>
+                        import('@/views/realTime/departure/goods/index.vue'),
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
         },
       ],
     },
     {
-      path: '/baggageManagement/internationalDeparture',
+      path: '/realTime/internationalDeparture',
       name: 'InternationalDeparture',
-      redirect: '/baggageManagement/internationalDeparture/station',
-      meta: { title: '国际出港', elSvgIcon: 'Fold', icon: 'table' },
+      redirect: '/realTime/internationalDeparture/station',
+      meta: {
+        title: '国际出港',
+        elSvgIcon: 'Fold',
+        icon: 'table',
+        breadcrumb: false,
+      },
       component: {
         render: () => h(resolveComponent('router-view')),
       },
       children: [
         {
-          path: '/baggageManagement/internationalDeparture/station',
+          path: '/realTime/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'
-            ),
+          component: {
+            render: () => h(resolveComponent('router-view')),
+          },
+          children: [
+            {
+              path: '/realTime/internationalDeparture/station',
+              name: 'InternationalDepartureStationView',
+              component: () =>
+                import(
+                  '@/views/realTime/internationalDeparture/station/index.vue'
+                ),
+            },
+            {
+              path: '/realTime/internationalDeparture/flight',
+              name: 'InternationalDepartureFlight',
+              meta: {
+                title: '国际出港航班视图',
+                elSvgIcon: 'Fold',
+                icon: 'table',
+              },
+              component: {
+                render: () => h(resolveComponent('router-view')),
+              },
+              children: [
+                {
+                  path: '/realTime/internationalDeparture/flight',
+                  name: 'InternationalDepartureFlightView',
+                  component: () =>
+                    import(
+                      '@/views/realTime/internationalDeparture/flight/index.vue'
+                    ),
+                },
+                {
+                  path: '/realTime/internationalDeparture/waybill',
+                  name: 'InternationalDepartureWaybill',
+                  meta: {
+                    title: '国际出港运单视图',
+                    elSvgIcon: 'Fold',
+                    icon: 'table',
+                  },
+                  component: {
+                    render: () => h(resolveComponent('router-view')),
+                  },
+                  children: [
+                    {
+                      path: '/realTime/internationalDeparture/waybill',
+                      name: 'InternationalDepartureWaybillView',
+                      component: () =>
+                        import(
+                          '@/views/realTime/internationalDeparture/waybill/index.vue'
+                        ),
+                    },
+                    {
+                      path: '/realTime/internationalDeparture/goods',
+                      name: 'InternationalDepartureGoods',
+                      meta: {
+                        title: '国际出港货物视图',
+                        elSvgIcon: 'Fold',
+                        icon: 'table',
+                      },
+                      component: () =>
+                        import(
+                          '@/views/realTime/internationalDeparture/goods/index.vue'
+                        ),
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
         },
       ],
     },
     {
-      path: '/baggageManagement/arrival',
+      path: '/realTime/arrival',
       name: 'Arrival',
-      redirect: '/baggageManagement/arrival/station',
-      meta: { title: '国内进港', elSvgIcon: 'Fold', icon: 'table' },
+      redirect: '/realTime/arrival/station',
+      meta: {
+        title: '国内进港',
+        elSvgIcon: 'Fold',
+        icon: 'table',
+        breadcrumb: false,
+      },
       component: {
         render: () => h(resolveComponent('router-view')),
       },
       children: [
         {
-          path: '/baggageManagement/arrival/station',
+          path: '/realTime/arrival/station',
           name: 'ArrivalStation',
           meta: { title: '国内进港航站视图', elSvgIcon: 'Fold', icon: 'table' },
-          component: () =>
-            import('@/views/baggageManagement/arrival/station/index.vue'),
-        },
-        {
-          path: '/baggageManagement/arrival/flight',
-          name: 'ArrivalFlight',
-          meta: { title: '国内进港航班视图', elSvgIcon: 'Fold', icon: 'table' },
-          component: () =>
-            import('@/views/baggageManagement/arrival/flight/index.vue'),
-        },
-        {
-          path: '/baggageManagement/arrival/waybill',
-          name: 'ArrivalWaybill',
-          meta: { title: '国内进港运单视图', elSvgIcon: 'Fold', icon: 'table' },
-          component: () =>
-            import('@/views/baggageManagement/arrival/waybill/index.vue'),
-        },
-        {
-          path: '/baggageManagement/arrival/goods',
-          name: 'ArrivalGoods',
-          meta: { title: '国内进港货物视图', elSvgIcon: 'Fold', icon: 'table' },
-          component: () =>
-            import('@/views/baggageManagement/arrival/goods/index.vue'),
+          component: {
+            render: () => h(resolveComponent('router-view')),
+          },
+          children: [
+            {
+              path: '/realTime/arrival/station',
+              name: 'ArrivalStationView',
+              component: () =>
+                import('@/views/realTime/arrival/station/index.vue'),
+            },
+            {
+              path: '/realTime/arrival/flight',
+              name: 'ArrivalFlight',
+              meta: {
+                title: '国内进港航班视图',
+                elSvgIcon: 'Fold',
+                icon: 'table',
+              },
+              component: {
+                render: () => h(resolveComponent('router-view')),
+              },
+              children: [
+                {
+                  path: '/realTime/arrival/flight',
+                  name: 'ArrivalFlightView',
+                  component: () =>
+                    import('@/views/realTime/arrival/flight/index.vue'),
+                },
+                {
+                  path: '/realTime/arrival/waybill',
+                  name: 'ArrivalWaybill',
+                  meta: {
+                    title: '国内进港运单视图',
+                    elSvgIcon: 'Fold',
+                    icon: 'table',
+                  },
+                  component: {
+                    render: () => h(resolveComponent('router-view')),
+                  },
+                  children: [
+                    {
+                      path: '/realTime/arrival/waybill',
+                      name: 'ArrivalWaybillView',
+                      component: () =>
+                        import('@/views/realTime/arrival/waybill/index.vue'),
+                    },
+                    {
+                      path: '/realTime/arrival/goods',
+                      name: 'ArrivalGoods',
+                      meta: {
+                        title: '国内进港货物视图',
+                        elSvgIcon: 'Fold',
+                        icon: 'table',
+                      },
+                      component: () =>
+                        import('@/views/realTime/arrival/goods/index.vue'),
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
         },
       ],
     },
     {
-      path: '/baggageManagement/internationalArrival',
+      path: '/realTime/internationalArrival',
       name: 'InternationalArrival',
-      redirect: '/baggageManagement/internationalArrival/station',
-      meta: { title: '国际进港', elSvgIcon: 'Fold', icon: 'table' },
+      redirect: '/realTime/internationalArrival/station',
+      meta: {
+        title: '国内进港',
+        elSvgIcon: 'Fold',
+        icon: 'table',
+        breadcrumb: false,
+      },
       component: {
         render: () => h(resolveComponent('router-view')),
       },
       children: [
         {
-          path: '/baggageManagement/internationalArrival/station',
+          path: '/realTime/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'
-            ),
+          meta: { title: '国内进港航站视图', elSvgIcon: 'Fold', icon: 'table' },
+          component: {
+            render: () => h(resolveComponent('router-view')),
+          },
+          children: [
+            {
+              path: '/realTime/internationalArrival/station',
+              name: 'InternationalArrivalStationView',
+              component: () =>
+                import(
+                  '@/views/realTime/internationalArrival/station/index.vue'
+                ),
+            },
+            {
+              path: '/realTime/internationalArrival/flight',
+              name: 'InternationalArrivalFlight',
+              meta: {
+                title: '国内进港航班视图',
+                elSvgIcon: 'Fold',
+                icon: 'table',
+              },
+              component: {
+                render: () => h(resolveComponent('router-view')),
+              },
+              children: [
+                {
+                  path: '/realTime/internationalArrival/flight',
+                  name: 'InternationalArrivalFlightView',
+                  component: () =>
+                    import(
+                      '@/views/realTime/internationalArrival/flight/index.vue'
+                    ),
+                },
+                {
+                  path: '/realTime/internationalArrival/waybill',
+                  name: 'InternationalArrivalWaybill',
+                  meta: {
+                    title: '国内进港运单视图',
+                    elSvgIcon: 'Fold',
+                    icon: 'table',
+                  },
+                  component: {
+                    render: () => h(resolveComponent('router-view')),
+                  },
+                  children: [
+                    {
+                      path: '/realTime/internationalArrival/waybill',
+                      name: 'InternationalArrivalWaybillView',
+                      component: () =>
+                        import(
+                          '@/views/realTime/internationalArrival/waybill/index.vue'
+                        ),
+                    },
+                    {
+                      path: '/realTime/internationalArrival/goods',
+                      name: 'InternationalArrivalGoods',
+                      meta: {
+                        title: '国内进港货物视图',
+                        elSvgIcon: 'Fold',
+                        icon: 'table',
+                      },
+                      component: () =>
+                        import(
+                          '@/views/realTime/internationalArrival/goods/index.vue'
+                        ),
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
         },
       ],
     },
     {
-      path: '/baggageManagement/trackMap',
+      path: '/realTime/trackMap',
       name: 'TrackMap',
       meta: { title: '轨迹地图', elSvgIcon: 'Fold', icon: 'table' },
-      component: () => import('@/views/baggageManagement/trackMap/index.vue'),
+      component: () => import('@/views/realTime/trackMap/index.vue'),
     },
   ],
 }
 
-export default [HomeRoutes]
+export default [ActualTimeRoutes]

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

@@ -35,7 +35,7 @@
             fixed
           >
             <template #cell="slot: CellSlotProps">
-              <div :class="cellClass(slot)">
+              <div :class="cellClass(slot)" @click="cellClickHandler(slot)">
                 <span class="cell-text">
                   {{ slot.rowData[slot.column.dataKey] }}
                 </span>
@@ -74,6 +74,7 @@ import TableSwitch from '../../components/TableSwitch/index.vue'
 import useTableColumnSet from '../../hooks/useTableColumnSet'
 import useTableData from '../../hooks/useTableData'
 import useTableStyle from '../../hooks/useTableStyle'
+import useTableCellClick from '../../hooks/useTableCellClick'
 
 type StationViewName =
   | 'departure'
@@ -117,6 +118,8 @@ watch(tableData, records => {
   tableDataCount.loadCount = records.length
   tableDataCount.takeOffCount = records.length
 })
+
+const { cellClickHandler } = useTableCellClick()
 </script>
 <style lang="scss" scoped>
 @import '../../style/station.scss';

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

@@ -54,6 +54,7 @@
           :tableProperty="{ showSummary:true }"
           :tableData="waybilltableData"
           @load="loadMore"
+          @cell-click="cellClickHandler"
         ></tableTemp>
     </div>
     <tableColumnSet :dialogVisible="state.dialogVisible" :columnList="state.waybillTableHeader" @setColumn="setColumn" @closeDialog="closeDialog"></tableColumnSet>
@@ -65,8 +66,9 @@ import TBtnGroup from "@/components/TBtnGroup/index.vue";
 import Search from "@/components/search/index.vue";
 import tableColumnSet from "@/components/tableColumnSet/index.vue";
 import {CaretRight} from "@element-plus/icons-vue"
-import { ref } from 'vue';
+import { Ref, ref } from 'vue';
 import useTableExport from "../../hooks/useTableExport";
+import { ElTable } from "element-plus";
 
 const state = reactive({
   tableHeader: [
@@ -206,13 +208,13 @@ const refresh=(data) =>{
   console.log(data)
 }
 
-const domeTable = ref(null)
+const domeTable = ref<InstanceType<typeof tableTemp> | null>(null)
 const { exportToExcel } = useTableExport()
 //点击下载按钮
 const downLoad=(data) =>{
-  const table = ref(domeTable.value.table)
+  const table = ref((domeTable.value as InstanceType<typeof tableTemp>).table)
   exportToExcel({
-    table
+    table: table as Ref<InstanceType<typeof ElTable>>
   })
 }
 
@@ -230,6 +232,22 @@ const closeDialog = (data) => {
   state.dialogVisible = false;
 }
 
+const router = useRouter()
+const route = useRoute()
+const cellClickHandler = (row, column, cell, event) => {
+  switch(column.property) {
+    case 'waybillNo':
+      router.push({
+        path: `${route.path.split('/').slice(0, -1).join('/')}/waybill`,
+        query: {
+          waybillNo: row.waybillNo
+        },
+      })
+      break
+    default:
+      break
+  }
+}
 </script>
 <style lang="scss" scoped>
 .pageBody{

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

@@ -51,7 +51,7 @@
       </div>
     </div>
     <div class="station-table">
-      <Table height="calc(100vh - 700px)" :tableHeader="state.waybillTableHeader" :tableData="tableData" />
+      <Table height="calc(100vh - 700px)" :tableHeader="state.waybillTableHeader" :tableData="tableData" @cell-click="cellClickHandler" />
     </div>
     <tableColumnSet :dialogVisible="state.dialogVisible" :columnList="state.waybillTableHeader" @setColumn="setColumn" @closeDialog="closeDialog"></tableColumnSet>
   </div>
@@ -460,6 +460,23 @@ const closeDialog = (data) => {
 const columnSet = (data) => {
   state.dialogVisible = true;
 };
+
+const router = useRouter()
+const route = useRoute()
+const cellClickHandler = (row, column, cell, event) => {
+  switch(column.property) {
+    case 'goodsNo':
+      router.push({
+        path: `${route.path.split('/').slice(0, -1).join('/')}/goods`,
+        query: {
+          goodsNo: row.goodsNo
+        },
+      })
+      break
+    default:
+      break
+  }
+}
 </script>
 
 <style lang="scss" scoped>

src/views/realTime/hooks/useTableCellClick.ts

@@ -0,0 +1,47 @@
+import type {
+  TableColumn,
+  TableColumnInGroup,
+} from '../components/ColumnSet/index.vue'
+import type { CSSProperties } from 'vue'
+
+type CellSlotProps = {
+  column: TableColumn | TableColumnInGroup
+  columns: TableColumn[] | TableColumnInGroup[]
+  columnIndex: number
+  depth: number
+  style: CSSProperties
+  rowData: any
+  rowIndex: number
+  isScrolling: boolean
+  expandIconProps?:
+    | {
+        rowData: any
+        rowIndex: number
+        onExpand: (expand: boolean) => void
+      }
+    | undefined
+}
+
+export default function useTableCellClick() {
+  const router = useRouter()
+  const route = useRoute()
+  const cellClickHandler = ({ column, rowData }: CellSlotProps) => {
+    switch (column.dataKey) {
+      case 'flightNO':
+        router.push({
+          path: `${route.path.split('/').slice(0, -1).join('/')}/flight`,
+          query: {
+            flightNO: rowData.flightNO,
+            flightDate: rowData.flightDate,
+          },
+        })
+        break
+      default:
+        break
+    }
+  }
+
+  return {
+    cellClickHandler,
+  }
+}