容器视图修改

src/components/BackButton/index.vue

@@ -0,0 +1,34 @@
+<template>
+  <span
+    class="btn-back"
+    @click="goBackHandler"
+  ><i class="el-icon-arrow-left" />返回上一步</span>
+</template>
+
+<script>
+export default {
+  methods: {
+    goBackHandler() {
+      const pathArray = this.$route.path.split('/')
+      console.log(pathArray)
+      if (pathArray[1] === 'advance') {
+        this.$router.push('/advance')
+      } else if (pathArray.at(-1) === 'flightView') {
+        this.$router.push(`/${pathArray[1]}`)
+      } else if (['baggageView', 'containerView'].includes(pathArray.at(-1))) {
+        this.$router.push(`${pathArray.slice(0, -1).join('/')}/flightView`)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.btn-back {
+  margin-left: 24px;
+  font-size: 16px;
+  font-weight: normal;
+  color: #2d67e3;
+  cursor: pointer;
+}
+</style>

src/router/routes/routes-file-five.js

@@ -5,295 +5,319 @@
  * @LastEditors: your name
  * @Description: 离港路由
  */
-import Layout from "@/layout";
+import Layout from '@/layout'
 
 const departureRoutes = {
-  path: "/departure",
-  name: "departure",
+  path: '/departure',
+  name: 'departure',
   component: Layout,
-  meta: { roles: ["departure_menu"] },
+  meta: { roles: ['departure_menu'] },
   children: [
     {
-      path: "/departure",
-      component: () => import("@/views/baggageManagement"),
+      path: '/departure',
+      component: () => import('@/views/baggageManagement'),
       meta: {
-        title: "离港管理",
-        imgstyle: "ic_list_nav_leave_default.png",
-        imgstyleup: "ic_list_nav_leave_check.png",
+        title: '离港管理',
+        imgstyle: 'ic_list_nav_leave_default.png',
+        imgstyleup: 'ic_list_nav_leave_check.png'
       },
       children: [
         {
-          path: "/departure",
-          name: "DepartureOne",
-          component: () => import("@/views/baggageManagement"),
+          path: '/departure',
+          name: 'DepartureOne',
+          component: () => import('@/views/baggageManagement'),
           meta: {
-            title: "离港视图",
+            title: '离港视图',
             // title: "行李视图",
-            roles: ["departure_page"],
-            keepAlive: true,
+            roles: ['departure_page'],
+            keepAlive: true
           },
           children: [
             {
-              path: "/departure",
-              name: "DepartureTerminalView",
-              component: () => import("@/views/baggageManagement/components/departure"),
-              meta: { keepAlive: true },
+              path: '/departure',
+              name: 'DepartureTerminalView',
+              component: () => import('@/views/baggageManagement/components/departure'),
+              meta: { keepAlive: true }
             },
             {
-              path: "/departure/flightView",
-              name: "DepartureParentSem",
-              component: () => import("@/views/baggageManagement"),
-              meta: { title: "航班视图", keepAlive: true },
+              path: '/departure/flightView',
+              name: 'DepartureParentSem',
+              component: () => import('@/views/baggageManagement'),
+              meta: { title: '航班视图', keepAlive: true },
               children: [
                 {
-                  path: "/departure/flightView",
-                  name: "DepartureFlightView",
-                  component: () => import("@/views/baggageManagement/components/departure/flight"),
-                  meta: { keepAlive: true },
+                  path: '/departure/flightView',
+                  name: 'DepartureFlightView',
+                  component: () => import('@/views/baggageManagement/components/departure/flight'),
+                  meta: { keepAlive: true }
                 },
                 {
-                  path: "/departure/baggageView",
-                  name: "DepartureBaggageView",
-                  component: () => import("@/views/baggageManagement/components/departure/baggage"),
-                  meta: { title: "行李视图", keepAlive: true },
+                  path: '/departure/baggageView',
+                  name: 'DepartureBaggageView',
+                  component: () => import('@/views/baggageManagement/components/departure/baggage'),
+                  meta: { title: '行李视图', keepAlive: true }
                 },
                 {
-                  path: "/departure/newContainerView",
-                  name: "DepartureNewContainerView",
-                  component: () => import("@/views/baggageManagement/components/departure/newContainer"),
-                  meta: { title: "容器视图", keepAlive: true },
+                  path: '/departure/containerView',
+                  name: 'DepartureContainerView',
+                  component: () => import('@/views/baggageManagement/components/departure/container'),
+                  meta: { title: '容器视图', keepAlive: true }
                 },
                 {
-                  path: "/departure/containerView",
-                  name: "DepartureContainerView",
-                  component: () => import("@/views/baggageManagement/components/departure/container"),
-                  meta: { title: "历史记录", keepAlive: true },
-                },
-              ],
-            },
-          ],
-        },
-      ],
-    },
-  ],
-};
+                  path: '/departure/containerHistory',
+                  name: 'DepartureContainerHistory',
+                  component: () => import('@/views/baggageManagement/components/departure/containerHistory'),
+                  meta: { title: '历史记录', keepAlive: true }
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}
 
 const arrivalRoutes = {
-  path: "/arrival",
-  name: "arrival",
+  path: '/arrival',
+  name: 'arrival',
   component: Layout,
-  meta: { roles: ["inbound_management"] },
+  meta: { roles: ['inbound_management'] },
   children: [
     {
-      path: "/arrival",
-      component: () => import("@/views/baggageManagement"),
+      path: '/arrival',
+      component: () => import('@/views/baggageManagement'),
       meta: {
-        title: "进港管理",
-        imgstyle: "ic_list_nav_arrive_default.png",
-        imgstyleup: "ic_list_nav_arrive_check.png",
+        title: '进港管理',
+        imgstyle: 'ic_list_nav_arrive_default.png',
+        imgstyleup: 'ic_list_nav_arrive_check.png'
       },
       children: [
         {
-          path: "/arrival",
-          name: "ArrivalOne",
-          component: () => import("@/views/baggageManagement"),
-          meta: { title: "进港视图", roles: ["inbound_search_page"], keepAlive: true },
+          path: '/arrival',
+          name: 'ArrivalOne',
+          component: () => import('@/views/baggageManagement'),
+          meta: { title: '进港视图', roles: ['inbound_search_page'], keepAlive: true },
           children: [
             {
-              path: "/arrival",
-              name: "ArrivalTerminalView",
-              component: () => import("@/views/baggageManagement/components/arrival"),
-              meta: { keepAlive: true },
+              path: '/arrival',
+              name: 'ArrivalTerminalView',
+              component: () => import('@/views/baggageManagement/components/arrival'),
+              meta: { keepAlive: true }
             },
             {
-              path: "/arrival/flightView",
-              name: "ArrivalFlightTwo",
-              component: () => import("@/views/baggageManagement"),
-              meta: { title: "航班视图", keepAlive: true },
+              path: '/arrival/flightView',
+              name: 'ArrivalFlightTwo',
+              component: () => import('@/views/baggageManagement'),
+              meta: { title: '航班视图', keepAlive: true },
               children: [
                 {
-                  path: "/arrival/flightView",
-                  name: "ArrivalFlightView",
-                  component: () => import("@/views/baggageManagement/components/arrival/flight"),
-                  meta: { keepAlive: true },
+                  path: '/arrival/flightView',
+                  name: 'ArrivalFlightView',
+                  component: () => import('@/views/baggageManagement/components/arrival/flight'),
+                  meta: { keepAlive: true }
                 },
                 {
-                  path: "/arrival/baggageView",
-                  name: "ArrivalBaggageView",
-                  component: () => import("@/views/baggageManagement/components/arrival/baggage"),
-                  meta: { title: "行李视图", keepAlive: true },
+                  path: '/arrival/baggageView',
+                  name: 'ArrivalBaggageView',
+                  component: () => import('@/views/baggageManagement/components/arrival/baggage'),
+                  meta: { title: '行李视图', keepAlive: true }
                 },
                 {
-                  path: "/arrival/containerView",
-                  name: "ArrivalContainerView",
-                  component: () => import("@/views/baggageManagement/components/arrival/container"),
-                  meta: { title: "容器视图", keepAlive: true },
+                  path: '/arrival/containerView',
+                  name: 'ArrivalContainerView',
+                  component: () => import('@/views/baggageManagement/components/arrival/container'),
+                  meta: { title: '容器视图', keepAlive: true }
                 },
-              ],
-            },
-          ],
-        },
-      ],
-    },
-  ],
-};
+                {
+                  path: '/arrival/containerHistory',
+                  name: 'ArrivalContainerHistory',
+                  component: () => import('@/views/baggageManagement/components/arrival/containerHistory'),
+                  meta: { title: '容器历史', keepAlive: true }
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}
 
 const transferRoutes = {
-  path: "/transfer",
+  path: '/transfer',
   component: Layout,
-  meta: { roles: ["ti_showTransit"] },
+  meta: { roles: ['ti_showTransit'] },
   children: [
     {
-      path: "/transfer",
-      component: () => import("@/views/baggageManagement"),
+      path: '/transfer',
+      component: () => import('@/views/baggageManagement'),
       meta: {
-        title: "中转管理",
-        imgstyle: "ic_list_nav_transit_default.png",
-        imgstyleup: "ic_list_nav_transit_check.png",
+        title: '中转管理',
+        imgstyle: 'ic_list_nav_transit_default.png',
+        imgstyleup: 'ic_list_nav_transit_check.png'
       },
-      redirect: "/transfer/arrival",
+      redirect: '/transfer/arrival',
       children: [
         {
-          path: "/transfer/arrival",
-          name: "TransferArrivalOne",
-          component: () => import("@/views/baggageManagement"),
-          meta: { title: "中转进港", roles: ["transit_inbound_page"], keepAlive: true },
+          path: '/transfer/arrival',
+          name: 'TransferArrivalOne',
+          component: () => import('@/views/baggageManagement'),
+          meta: { title: '中转进港', roles: ['transit_inbound_page'], keepAlive: true },
           children: [
             {
-              path: "/transfer/arrival",
-              name: "TransferArrivalTerminalView",
-              component: () => import("@/views/baggageManagement/components/transferArrival"),
-              meta: { keepAlive: true },
+              path: '/transfer/arrival',
+              name: 'TransferArrivalTerminalView',
+              component: () => import('@/views/baggageManagement/components/transferArrival'),
+              meta: { keepAlive: true }
             },
             {
-              path: "/transfer/arrival/flightView",
-              name: "TransferArrivalTwo",
-              component: () => import("@/views/baggageManagement"),
-              meta: { title: "航班视图", keepAlive: true },
+              path: '/transfer/arrival/flightView',
+              name: 'TransferArrivalTwo',
+              component: () => import('@/views/baggageManagement'),
+              meta: { title: '航班视图', keepAlive: true },
               children: [
                 {
-                  path: "/transfer/arrival/flightView",
-                  name: "TransferArrivalFlightView",
-                  component: () => import("@/views/baggageManagement/components/transferArrival/flight"),
-                  meta: { keepAlive: true },
+                  path: '/transfer/arrival/flightView',
+                  name: 'TransferArrivalFlightView',
+                  component: () => import('@/views/baggageManagement/components/transferArrival/flight'),
+                  meta: { keepAlive: true }
                 },
                 {
-                  path: "/transfer/arrival/baggageView",
-                  name: "TransferArrivalBaggageView",
-                  component: () => import("@/views/baggageManagement/components/transferArrival/baggage"),
-                  meta: { title: "行李视图", keepAlive: true },
+                  path: '/transfer/arrival/baggageView',
+                  name: 'TransferArrivalBaggageView',
+                  component: () => import('@/views/baggageManagement/components/transferArrival/baggage'),
+                  meta: { title: '行李视图', keepAlive: true }
                 },
                 {
-                  path: "/transfer/arrival/containerView",
-                  name: "TransferArrivalContainerView",
-                  component: () => import("@/views/baggageManagement/components/transferArrival/container"),
-                  meta: { title: "容器视图", keepAlive: true },
+                  path: '/transfer/arrival/containerView',
+                  name: 'TransferArrivalContainerView',
+                  component: () => import('@/views/baggageManagement/components/arrival/container'),
+                  meta: { title: '容器历史', keepAlive: true }
                 },
-              ],
-            },
-          ],
+                {
+                  path: '/transfer/arrival/containerHistory',
+                  name: 'TransferArrivalContainerHistory',
+                  component: () => import('@/views/baggageManagement/components/transferArrival/containerHistory'),
+                  meta: { title: '容器视图', keepAlive: true }
+                }
+              ]
+            }
+          ]
         },
         {
-          path: "/transfer/departure",
-          name: "TransferDepartureOne",
-          component: () => import("@/views/baggageManagement"),
-          meta: { title: "中转离港", roles: ["transit_departure_page"], keepAlive: true },
+          path: '/transfer/departure',
+          name: 'TransferDepartureOne',
+          component: () => import('@/views/baggageManagement'),
+          meta: { title: '中转离港', roles: ['transit_departure_page'], keepAlive: true },
           children: [
             {
-              path: "/transfer/departure",
-              name: "TransferDepartureTerminalView",
-              component: () => import("@/views/baggageManagement/components/transferDeparture"),
-              meta: { keepAlive: true },
+              path: '/transfer/departure',
+              name: 'TransferDepartureTerminalView',
+              component: () => import('@/views/baggageManagement/components/transferDeparture'),
+              meta: { keepAlive: true }
             },
             {
-              path: "/transfer/departure/flightView",
-              name: "TransferDepartureTwo",
-              component: () => import("@/views/baggageManagement"),
-              meta: { title: "航班视图", keepAlive: true },
+              path: '/transfer/departure/flightView',
+              name: 'TransferDepartureTwo',
+              component: () => import('@/views/baggageManagement'),
+              meta: { title: '航班视图', keepAlive: true },
               children: [
                 {
-                  path: "/transfer/departure/flightView",
-                  name: "TransferDepartureFlightView",
-                  component: () => import("@/views/baggageManagement/components/transferDeparture/flight"),
-                  meta: { keepAlive: true },
+                  path: '/transfer/departure/flightView',
+                  name: 'TransferDepartureFlightView',
+                  component: () => import('@/views/baggageManagement/components/transferDeparture/flight'),
+                  meta: { keepAlive: true }
                 },
                 {
-                  path: "/transfer/departure/baggageView",
-                  name: "TransferDepartureBaggageView",
-                  component: () => import("@/views/baggageManagement/components/transferDeparture/baggage"),
-                  meta: { title: "行李视图", keepAlive: true },
+                  path: '/transfer/departure/baggageView',
+                  name: 'TransferDepartureBaggageView',
+                  component: () => import('@/views/baggageManagement/components/transferDeparture/baggage'),
+                  meta: { title: '行李视图', keepAlive: true }
                 },
                 {
-                  path: "/transfer/departure/containerView",
-                  name: "TransferDepartureContainerView",
-                  component: () => import("@/views/baggageManagement/components/transferDeparture/container"),
-                  meta: { title: "容器视图", keepAlive: true },
+                  path: '/transfer/departure/containerView',
+                  name: 'TransferDepartureContainerView',
+                  component: () => import('@/views/baggageManagement/components/transferDeparture/container'),
+                  meta: { title: '容器视图', keepAlive: true }
                 },
-              ],
-            },
-          ],
-        },
-      ],
-    },
-  ],
-};
+                {
+                  path: '/transfer/departure/containerHistory',
+                  name: 'TransferDepartureContainerHistory',
+                  component: () => import('@/views/baggageManagement/components/transferDeparture/containerHistory'),
+                  meta: { title: '容器历史', keepAlive: true }
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}
 
 // 高级查询
 const advanceRoutes = {
-  path: "/",
-  redirect: "/advance",
+  path: '/',
+  redirect: '/advance',
   component: Layout,
   children: [
     {
-      path: "/advance",
-      component: () => import("@/views/advancedQuery/index.vue"),
+      path: '/advance',
+      component: () => import('@/views/advancedQuery/index.vue'),
       meta: {
-        title: "高级查询",
-        imgstyle: "ic_list_nav_search_default.png",
-        imgstyleup: "ic_list_nav_search_check.png",
+        title: '高级查询',
+        imgstyle: 'ic_list_nav_search_default.png',
+        imgstyleup: 'ic_list_nav_search_check.png'
       },
       children: [
         {
-          path: "/advance",
-          name: "AdvancedQuery",
-          component: () => import("@/views/advancedQuery/index.vue"),
-          meta: { title: "高级查询", isPage: "advance_page", keepAlive: true },
+          path: '/advance',
+          name: 'AdvancedQuery',
+          component: () => import('@/views/advancedQuery/index.vue'),
+          meta: { title: '高级查询', isPage: 'advance_page', keepAlive: true },
           children: [
             {
-              path: "/advance",
-              name: "AdvancedHome",
-              component: () => import("@/views/advancedQuery/views/advancedHome.vue"),
-              meta: { keepAlive: true },
+              path: '/advance',
+              name: 'AdvancedHome',
+              component: () => import('@/views/advancedQuery/views/advancedHome.vue'),
+              meta: { keepAlive: true }
             },
             {
-              path: "advanceNew",
-              name: "AdvancedNew",
-              component: () => import("@/views/advancedQuery/views/advancedNew.vue"),
-              meta: { keepAlive: true },
+              path: 'advanceNew',
+              name: 'AdvancedNew',
+              component: () => import('@/views/advancedQuery/views/advancedNew.vue'),
+              meta: { keepAlive: true }
             },
             {
-              path: "flightView",
-              name: "AdvancedFlight",
-              component: () => import("@/views/advancedQuery/views/advancedFlight.vue"),
-              meta: { title: "航班视图", keepAlive: true },
+              path: 'flightView',
+              name: 'AdvancedFlight',
+              component: () => import('@/views/advancedQuery/views/advancedFlight.vue'),
+              meta: { title: '航班视图', keepAlive: true }
             },
             {
-              path: "baggageView",
-              name: "AdvancedBag",
-              component: () => import("@/views/advancedQuery/views/advancedBag.vue"),
-              meta: { title: "行李视图", keepAlive: true },
+              path: 'baggageView',
+              name: 'AdvancedBag',
+              component: () => import('@/views/advancedQuery/views/advancedBag.vue'),
+              meta: { title: '行李视图', keepAlive: true }
             },
             {
-              path: "containerView",
-              name: "AdvancedContainer",
-              component: () => import("@/views/advancedQuery/views/advancedContainer.vue"),
-              meta: { title: "容器视图", keepAlive: true },
+              path: 'containerView',
+              name: 'AdvancedContainerView',
+              component: () => import('@/views/advancedQuery/views/advancedContainer.vue'),
+              meta: { title: '容器视图', keepAlive: true }
             },
-          ],
-        },
-      ],
-    },
-  ],
-};
+            {
+              path: 'containerHistory',
+              name: 'AdvancedContainerHistory',
+              component: () => import('@/views/advancedQuery/views/advancedContainerHistory.vue'),
+              meta: { title: '容器历史', keepAlive: true }
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}
 
-export default [departureRoutes, arrivalRoutes, transferRoutes, advanceRoutes];
+export default [departureRoutes, arrivalRoutes, transferRoutes, advanceRoutes]

src/router/routes/routes-file-four.js

@@ -133,7 +133,6 @@ const accountRoutes = {
   children: [
     {
       path: "/account",
-      name: "accountManagement",
       component: () => import("@/views/accountManagement"),
       meta: {
         title: "账号管理",
@@ -145,13 +144,11 @@ const accountRoutes = {
       children: [
         {
           path: "/",
-          name: "accountHome",
           component: {
             render (c) {
               return c("router-view");
             },
           },
-          redirect: "/",
           meta: {
             keepAlive: false,
             roles: ["account_page"],
@@ -159,6 +156,7 @@ const accountRoutes = {
           children: [
             {
               path: "/",
+              name: "accountHome",
               component: () => import("@/views/accountManagement/components/accountHome"),
               meta: {
                 title: "账号管理",

src/styles/index.scss

@@ -354,13 +354,6 @@ li {
     margin: auto;
     background: #2d67e3;
   }
-  .btn-back {
-    margin-left: 24px;
-    font-size: 16px;
-    font-weight: normal;
-    color: #2d67e3;
-    cursor: pointer;
-  }
 }
 
 /*鼠标样式-手*/

src/views/advancedQuery/views/advancedContainerHistory.vue

@@ -0,0 +1,14 @@
+<template>
+  <ContainerHistory />
+</template>
+
+<script>
+import ContainerHistory from '@/views/baggageManagement/components/containerHistory'
+
+export default {
+  name: 'AdvancedContainerHistory',
+  components: {
+    ContainerHistory
+  }
+}
+</script>

src/views/baggageManagement/components/arrival/containerHistory.vue

@@ -0,0 +1,14 @@
+<template>
+  <ContainerHistory />
+</template>
+
+<script>
+import ContainerHistory from '../containerHistory'
+
+export default {
+  name: 'ArrivalContainerHistory',
+  components: {
+    ContainerHistory
+  }
+}
+</script>

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

@@ -26,6 +26,7 @@
             :label="item"
           />
         </el-radio-group>
+        <BackButton />
       </div>
       <div class="part1_info">
         <el-row :gutter="12">
@@ -230,6 +231,7 @@
   </div>
 </template>
 <script>
+import BackButton from '@/components/BackButton'
 import Dialog from '@/layout/components/Dialog/index.vue'
 import { myQuery } from '@/api/dataIntegration'
 import { BaggageMessageQuery } from '@/api/flight'
@@ -242,6 +244,7 @@ import FileSaver from 'file-saver'
 export default {
   name: 'BaggageView',
   components: {
+    BackButton,
     Dialog
   },
   mixins: [tableColsMixin],
@@ -870,21 +873,6 @@ export default {
   }
 }
 </script>
-<style lang="scss">
-.radioBtn {
-  padding: 5px;
-  background: #000d2a;
-  .el-radio-button__inner {
-    background: #000d2a;
-    color: #fff;
-    border: none;
-    font-weight: bold;
-  }
-  .el-radio-button:first-child .el-radio-button__inner {
-    border: none;
-  }
-}
-</style>
 <style lang="scss" scoped>
 .baggage-view {
   width: 100%;
@@ -897,15 +885,30 @@ export default {
     // height: 232px;
     background: #041741;
     padding: 16px 30px;
-    .title {
+    ::v-deep .title {
       font-size: 18px;
       font-weight: bold;
       color: #ffffff;
-      width: 320px;
       display: flex;
       flex-direction: row;
-      justify-content: space-between;
       align-items: center;
+      .radioBtn {
+        margin-left: 32px;
+        padding: 5px;
+        background: #000d2a;
+        .el-radio-button__inner {
+          background: #000d2a;
+          color: #fff;
+          border: none;
+          font-weight: bold;
+        }
+        .el-radio-button:first-child .el-radio-button__inner {
+          border: none;
+        }
+      }
+      .btn-back {
+        color: #ffffff;
+      }
     }
     .part1_info {
       width: 100%;

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

@@ -1,71 +1,115 @@
 <template>
   <div class="container-view">
-    <div
-      v-loading="treeLoading"
-      element-loading-text="拼命加载中"
-      element-loading-spinner="el-icon-loading"
-      element-loading-background="rgba(0, 0, 0, 0.8)"
-      class="container-left"
-    >
-      <el-tree
-        :data="containerHistoryTree"
-        :props="defaultTreeProps"
-        node-key="index"
-        default-expand-all
-        :expand-on-click-node="false"
-        @current-change="currentChangeHandler"
+    <div class="container-basic">
+      <div class="title">
+        <div class="manageTitle">容器基本信息</div>
+        <el-button
+          type="primary"
+          size="small"
+          @click="toContainerHistory"
+        >历史记录</el-button>
+      </div>
+      <div
+        ref="basicBox"
+        class="basic-info-box"
       >
-        <span
-          slot-scope="{ node, data }"
-          class="el-tree-node__label"
-        >
-          <el-tooltip
-            v-if="data.index === -1"
-            class="item"
-            effect="dark"
-            :content="msg"
-            placement="top"
+        <el-row :gutter="10">
+          <el-col
+            :xs="6"
+            :sm="6"
+            :xl="4"
+          >
+            <div class="grid-content">容器编号：{{ $route.query.containerID }}</div>
+          </el-col>
+          <el-col
+            :xs="6"
+            :sm="6"
+            :xl="3"
+          >
+            <div class="grid-content">容器类型：{{ $route.query.containerType }}</div>
+          </el-col>
+          <el-col
+            :xs="6"
+            :sm="6"
+            :xl="3"
+          >
+            <div class="grid-content">舱位：{{ $route.query.containerSpace }}</div>
+          </el-col>
+          <el-col
+            :xs="6"
+            :sm="6"
+            :xl="3"
           >
-            <span>{{ node.label }}</span>
-          </el-tooltip>
-          <span v-else>{{ node.label }}</span>
-        </span>
-      </el-tree>
+            <div class="grid-content">航班号：{{ $route.query.flightNO }}</div>
+          </el-col>
+          <el-col
+            :xs="12"
+            :sm="12"
+            :xl="5"
+          >
+            <div class="grid-content">航班日期：{{ $route.query.flightDate }}</div>
+          </el-col>
+          <el-col
+            :xs="6"
+            :sm="6"
+            :xl="3"
+          >
+            <div class="grid-content">起飞站：{{ $route.query.departureAirport }}</div>
+          </el-col>
+          <el-col
+            :xs="6"
+            :sm="6"
+            :xl="3"
+          >
+            <div class="grid-content">目的站：{{ $route.query.landingAirport }}</div>
+          </el-col>
+        </el-row>
+      </div>
     </div>
-    <div
-      v-loading="tableLoading"
-      element-loading-text="拼命加载中"
-      element-loading-spinner="el-icon-loading"
-      element-loading-background="rgba(0, 0, 0, 0.8)"
-      class="container-right"
-    >
-
-      <el-table
-        ref="table"
-        :data="dealedTableData"
-        border
-        stripe
-        fit
-        height="calc(100vh - 80px - 17px - 20px)"
-        :header-cell-class-name="headerCellClass"
-        :row-class-name="tableRowClassName"
-        :cell-class-name="cellClass"
-        @cell-click="cellClickHandler"
-      >
-        <el-table-column
-          v-for="col in tableCols"
-          :key="col.prop"
-          :prop="col.prop"
-          :label="col.label"
-          :width="col.width"
-          :fixed="col.fixed"
-          :formatter="tableFormat"
+    <div class="container-table">
+      <div class="title">
+        <div class="manageTitle">容器行李列表</div>
+        <TimeZoneSelector />
+        <img
+          class="btn-square btn-shadow"
+          src="@/assets/baggage/ic_export.png"
+          title="导出"
+          @click="exportHandler('table', '容器行李列表')"
+        >
+        <img
+          class="btn-square btn-shadow"
+          src="@/assets/baggage/ic_setting.png"
+          title="列设置"
+          @click="show"
         >
-          <template #header>
-            <el-tooltip
-              :content="col.desc || col.label"
-              placement="top"
-            >
+      </div>
+      <div class="table-wrapper">
+        <el-table
+          ref="table"
+          :data="dealedTableData"
+          :height="computedTableHeight"
+          border
+          stripe
+          size="mini"
+          show-summary
+          :summary-method="summaryRow(dealedTableData.length)"
+          :header-cell-class-name="headerCellClass"
+          :header-cell-style="{ color: '#101116' }"
+          :row-class-name="rowClass"
+          :cell-class-name="cellClass"
+          @cell-click="cellClickHandler"
+        >
+          <el-table-column
+            v-for="col in tableColsCopy"
+            :key="col.index"
+            :prop="col.prop"
+            :label="col.label"
+            :align="col.align || 'center'"
+            :width="col.width"
+            :fixed="col.fixed"
+            :formatter="tableFormat"
+          >
+            <template #header>
               <TableHeaderCell
                 :label="col.label"
                 :filter-options="tableDataFilters[col.prop]"
@@ -73,36 +117,73 @@
                 :sortable="col.sortable"
                 :sort-rule.sync="tableDataSortRules[col.prop]"
               />
-            </el-tooltip>
-          </template>
-        </el-table-column>
-      </el-table>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
     </div>
+    <!--列设置-->
+    <Dialog
+      :flag="dialogFlag"
+      class="dialog-check-group"
+    >
+      <div class="dialog-wrapper">
+        <div class="title">列设置</div>
+        <div class="content">
+          <el-tree
+            :data="tableCols"
+            :class="colsCheckClass"
+            show-checkbox
+            node-key="index"
+            :default-expand-all="true"
+            :props="{
+              label: 'label',
+              children: 'children',
+            }"
+            :default-checked-keys="checkedKeysTemp"
+            @check="handleCheck"
+          />
+        </div>
+        <div class="foot right t30">
+          <el-button
+            size="medium"
+            class="r24"
+            type="primary"
+            @click="onCheck('tableData')"
+          >确定</el-button>
+          <el-button
+            size="medium"
+            @click="hide"
+          >取消</el-button>
+        </div>
+      </div>
+    </Dialog>
   </div>
 </template>
 
 <script>
-import TableHeaderCell from '@/components/TableHeaderCell'
-import { mapGetters } from 'vuex'
+import Dialog from '@/layout/components/Dialog/index.vue'
+import TimeZoneSelector from '@/components/TimeZoneSelector'
 import { myQuery } from '@/api/dataIntegration'
+import tableColsMixin from '../../mixins/tableCols'
+import timeZoneMixin from '../../mixins/timeZone'
+import TableHeaderCell from '@/components/TableHeaderCell'
 import { setTableFilters } from '@/utils/table'
-
+import { mapGetters } from 'vuex'
+import { throttledExportToExcel } from '@/utils/table'
 export default {
   name: 'ContainerView',
   components: {
+    TimeZoneSelector,
+    Dialog,
     TableHeaderCell
   },
+  mixins: [tableColsMixin, timeZoneMixin],
   data() {
     return {
+      fullscreenLoading: false,
       queryData: {},
-      containerHistory: [],
-      selectedHistoryData: {},
-      defaultTreeProps: {
-        children: 'children',
-        label: 'label'
-      },
-      treeLoading: false,
-      tableLoading: false,
+      computedTableHeight: undefined,
       tableCols: [
         {
           prop: 'passengerName',
@@ -122,7 +203,7 @@ export default {
           prop: 'specialType',
           label: '特殊行李类型',
           desc: '指有别于普通托运行李的特殊行李分类，包括（装笼动物、机组行李、易碎行李、VIP行李等），参考BSM报文.E项说明',
-          width: 115,
+          width: 120,
           filterable: true,
           sortable: true
         },
@@ -179,24 +260,11 @@ export default {
       tableData: [],
       tableDataFilters: {},
       filterValues: {},
-      tableDataSortRules: {},
-      msg: '容器历史默认显示最近10条历史，如果需要可联系管理员进行配置'
+      tableDataSortRules: {}
     }
   },
   computed: {
     ...mapGetters(['clickedCells']),
-    containerHistoryTree() {
-      return [
-        {
-          index: -1,
-          label: `容器历史-${this.queryData.containerID}`,
-          children: this.containerHistory.map(({ flightNO, flightDate, departureAirport, arriveAirport }, index) => ({
-            index,
-            label: [flightNO, flightDate.replaceAll('-', '/'), departureAirport, arriveAirport].join('-')
-          }))
-        }
-      ]
-    },
     dealedTableData() {
       const filtered = this.tableData.filter(item => {
         let flag = true
@@ -225,12 +293,24 @@ export default {
     $route: {
       handler({ path, query }) {
         if (path.includes('containerView')) {
-          const { containerID } = query
-          if (containerID) {
-            const { containerID: oldContainerID } = this.queryData
-            if (containerID !== oldContainerID) {
-              this.queryData = { containerID }
-              this.queryContainerHistory([containerID])
+          const { flightNO, flightDate, departureAirport, landingAirport, containerID } = query
+          if (flightNO && flightDate && departureAirport && landingAirport && containerID) {
+            const {
+              flightNO: oldFlightNO,
+              flightDate: oldFlightDate,
+              departureAirport: oldDepartureAirport,
+              landingAirport: oldLandingAirport,
+              containerID: oldContainerID
+            } = this.queryData
+            if (
+              flightNO !== oldFlightNO ||
+              flightDate !== oldFlightDate ||
+              departureAirport !== oldDepartureAirport ||
+              landingAirport !== oldLandingAirport ||
+              containerID !== oldContainerID
+            ) {
+              this.queryData = { flightNO, flightDate, departureAirport, landingAirport, containerID }
+              this.queryContainerBaggage([flightNO, flightDate, departureAirport, landingAirport, containerID])
             }
           } else {
             this.$router.push('/')
@@ -239,6 +319,18 @@ export default {
       },
       deep: true,
       immediate: true
+    },
+    fullscreenLoading(val) {
+      if (val) {
+        this.loading = this.$loading({
+          lock: true,
+          text: '加载中',
+          spinner: 'el-icon-loading',
+          background: 'rgba(0, 0, 0, 0.7)'
+        })
+      } else {
+        this.loading?.close()
+      }
     }
   },
   created() {
@@ -252,28 +344,37 @@ export default {
       }
     })
   },
+  activated() {
+    this.setTableHeight()
+  },
   updated() {
-    // table数据更新
-    this.$nextTick(() => {
-      this.$refs.table.doLayout()
-    })
+    this.setTableHeight()
   },
   deactivated() {
-    this.treeLoading = false
-    this.tableLoading = false
+    this.loading?.close()
   },
   beforeDestroy() {
-    this.treeLoading = false
-    this.tableLoading = false
+    this.loading?.close()
   },
   methods: {
-    currentChangeHandler({ index }) {
-      if (index > -1) {
-        this.selectedHistoryData = this.containerHistory[index]
-        const { flightNO, flightDate, departureAirport, arriveAirport, containerID } = this.selectedHistoryData
-        const dataContent = [flightNO, flightDate, departureAirport, arriveAirport, containerID]
-        this.queryBaggageList(dataContent)
+    setTableHeight() {
+      const headerHeight = 80
+      const bottomBlankHeight = 16
+      const titleHeight = 64
+      const basicBoxHeight = this.$refs['basicBox'].offsetHeight
+      this.computedTableHeight = `calc(100vh - ${
+        headerHeight + bottomBlankHeight + titleHeight * 2 + basicBoxHeight
+      }px)`
+      this.$nextTick(() => {
+        this.$refs['table']?.doLayout()
+      })
+    },
+    rowClass({ row, rowIndex }) {
+      const classes = []
+      if (row['Status'] === 'DEL') {
+        classes.push('bgl-deleted')
       }
+      return classes.join(' ')
     },
     // 给表头单元格加上 ascending 或 descending 使用 element 自带的排序箭头变色
     headerCellClass({ row, column, rowIndex, columnIndex }) {
@@ -284,29 +385,34 @@ export default {
       }
       return classes.join(' ')
     },
-    tableRowClassName({ row, rowIndex }) {
-      const classes = []
-      if (row.isDEL === 'DEL') {
-        classes.push('bgl-deleted')
-      }
-      return classes.join(' ')
-    },
     cellClass({ row, column, rowIndex, columnIndex }) {
       const classes = []
+      if (
+        ['checkInTime', 'DealInfo', 'sortLocationMark', 'loadLocationMark', 'inflLocationMark'].includes(
+          column.property
+        )
+      ) {
+        classes.push('pre-line')
+      }
       if (
         [
-          'flightNO',
-          'luggageSN'
-          // 'inFlightNO',
-          // 'transferFlightNO'
+          'preFlightNO',
+          'totalNumber',
+          'inFlightNO',
+          'transferFlightNO',
+          'transferNumber',
+          'passengerName',
+          'luggageSN',
+          'U_Device_ID'
         ].includes(column.property) &&
-        row[column.property]
+        row[column.property] &&
+        row[column.property] !== 'FBULK'
       ) {
         classes.push('cell-click')
         if (
           this.clickedCells.some(
             cell =>
-              cell.pageName === 'advance' &&
+              cell.pageName === this.$route.name &&
               Object.entries(cell.row).every(([key, value]) => row[key] === value) &&
               cell.columnProp === column.property
           )
@@ -316,93 +422,37 @@ export default {
       }
       return classes.join(' ')
     },
-    cellClickHandler(row, column, cell, event) {
-      if (
-        [
-          // 'flightNO',
-          'luggageSN'
-          // 'inFlightNO',
-          // 'transferFlightNO'
-        ].includes(column.property) &&
-        row[column.property]
-      ) {
-        this.$store.dispatch('keepAlive/addClickedCell', {
-          row,
-          columnProp: column.property,
-          pageName: this.$route.name
-        })
-        switch (column.property) {
-          // case 'flightNO':
-          //   this.$router.push({
-          //     path: '/advance/flightView',
-          //     query: {
-          //       flightNO: this.selectedHistoryData.flightNO,
-          //       flightDate: this.selectedHistoryData.flightDate
-          //     }
-          //   })
-          //   break
-          case 'luggageSN':
-            this.$router.push({
-              path: `/${this.$route.path.split('/').slice(1, -1).join('/')}/baggageView`,
-              query: {
-                flightNO: this.selectedHistoryData.flightNO,
-                flightDate: this.selectedHistoryData.flightDate,
-                bagSN: row.luggageSN
-              }
-            })
-            break
-          // case 'inFlightNO':
-          //   this.$router.push({
-          //     path: '/advance/flightView',
-          //     query: {
-          //       flightNO: row.inFlightNO,
-          //       flightDate: row.preFlightDate
-          //     }
-          //   })
-          //   break
-          // case 'transferFlightNO':
-          //   this.$router.push({
-          //     path: '/advance/flightView',
-          //     query: {
-          //       flightNO: row.transferFlightNO,
-          //       flightDate: row.transferFlightDate
-          //     }
-          //   })
-          //   break
-          default:
-            break
+    cellClickHandler(row, column, cell, event) {},
+    toContainerHistory() {
+      this.$router.push({
+        path: `/${this.$route.path.split('/').slice(1, -1).join('/')}/containerHistory`,
+        query: {
+          containerID: this.queryData.containerID
         }
-      }
+      })
     },
-    tableFormat(row, column, cellValue) {
-      switch (column.property) {
-        case 'isDEL':
-          return cellValue === 'DEL' ? cellValue : ''
-        case 'activeState':
-          return cellValue === 1 ? '激活' : '未激活'
-        default:
-          return cellValue ?? ''
+    // 统计行数
+    summaryRow(num) {
+      return function () {
+        return ['合计', `共${num}件`]
       }
     },
-    async queryContainerHistory(dataContent) {
-      this.treeLoading = true
-      this.tableData = []
-      try {
-        const result = await myQuery(DATACONTENT_ID.containerHistory, ...dataContent)
-        this.containerHistory = result
-        this.msg = '容器历史默认显示最近' + this.containerHistory[0].k + '条历史，如果需要可联系管理员进行配置'
-      } catch (error) {this.$message.error("失败");}
-      this.treeLoading = false
+    exportHandler(refName, tableName) {
+      const table = this.$refs[refName].$el.cloneNode(true)
+      const fileName = `${tableName}-${Object.keys(this.queryData).join('-')}.xlsx`
+      throttledExportToExcel(table, tableName, fileName)
     },
-    async queryBaggageList(dataContent) {
-      this.tableLoading = true
+    async queryContainerBaggage(dataContent) {
+      this.fullscreenLoading = true
       this.tableData = []
       try {
-        const result = await myQuery(DATACONTENT_ID.containerBaggage, ...dataContent)
-        this.tableData = result
+        const tableData = await myQuery(DATACONTENT_ID.containerBaggage, ...dataContent)
+        this.tableData = tableData
         setTableFilters(this.tableData, this.tableDataFilters)
-      } catch (error) {this.$message.error("失败");}
-      this.tableLoading = false
+      } catch {
+        this.$message.error('失败')
+      }
+      this.fullscreenLoading = false
     }
   }
 }
@@ -410,77 +460,68 @@ export default {
 
 <style lang="scss" scoped>
 .container-view {
-  padding: 17px 24px 20px;
-  display: flex;
-  .container-left {
-    flex: 0 1 352px;
-    margin-right: 16px;
-    background-color: #ffffff;
-    ::v-deep .el-tree {
-      height: calc(100vh - 80px - 17px - 20px);
-      overflow-x: hidden;
-      overflow-y: auto;
-      > .el-tree-node {
-        > .el-tree-node__children {
-          display: block;
-        }
-        .el-tree-node__content {
-          height: 38px;
-          .el-tree-node__label {
-            margin-left: 0;
-            letter-spacing: 1px;
-            line-height: 38px;
-            font-size: 14px;
-            font-family: Helvetica, 'Microsoft YaHei';
-            font-weight: bold;
-            color: #101116;
-          }
-        }
-        > .el-tree-node__content {
-          > .el-tree-node__expand-icon.el-icon-caret-right:not(.is-leaf):before {
-            font-size: 16px;
-            color: #101116;
-          }
-          > .el-tree-node__label {
-            font-size: 16px;
-          }
-        }
-      }
-    }
+  width: 100%;
+  height: calc(100vh - 80px - 16px);
+  overflow: hidden;
+  background: #dfe3ea;
+  padding: 0px 8px;
+  .title {
+    display: flex;
+    justify-content: space-between;
+    padding: 16px 0;
+    margin-right: 0;
   }
-
-  .container-right {
-    flex: 1;
-    ::v-deep .el-table {
+  .container-basic {
+    .basic-info-box {
       width: 100%;
-      .cell {
-        padding: 0;
-        text-align: center;
-        font-size: 14px;
-        font-family: Helvetica, 'Microsoft YaHei';
-        letter-spacing: 0;
+      background: #041741;
+      padding: 16px 30px;
+      color: #fff;
+    }
+  }
+  .container-table {
+    .title {
+      height: 64px;
+      .manageTitle {
+        flex: 1;
       }
-      .cell-click {
-        cursor: pointer;
-        color: #2d7cff;
-        &.cell-clicked {
-          color: purple;
+      .el-dropdown {
+        height: 30px;
+      }
+      .btn-square {
+        height: 30px;
+        margin-left: 20px;
+        &:last-child {
+          margin-right: 30px;
         }
       }
-      .el-table__header-wrapper,
-      .el-table__fixed-header-wrapper {
+    }
+    .table-wrapper {
+      background-color: #fff;
+      ::v-deep .el-table {
+        width: 100%;
         .cell {
-          font-weight: bold;
-          color: #101116;
+          padding: 0;
+          text-align: center;
+          font-size: 14px;
+          font-family: Helvetica, 'Microsoft YaHei';
+          letter-spacing: 0;
         }
-      }
-      .el-table__body-wrapper,
-      .el-table__fixed-body-wrapper {
-        tr.bgl-deleted {
-          background: #d2d6df;
-          td {
+        .cell-click {
+          cursor: pointer;
+          color: #2d7cff;
+          &.cell-clicked {
+            color: purple;
+          }
+        }
+        .el-table__body-wrapper,
+        .el-table__fixed-body-wrapper {
+          tr.bgl-deleted {
             background: #d2d6df;
-            font-style: italic;
+            td {
+              background: #d2d6df;
+              font-style: italic;
+            }
           }
         }
       }

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

@@ -0,0 +1,507 @@
+<template>
+  <div class="container-history">
+    <div class="container-left">
+      <div class="title">
+        <span class="manageTitle">容器历史</span>
+        <BackButton />
+      </div>
+      <div
+        v-loading="treeLoading"
+        element-loading-text="拼命加载中"
+        element-loading-spinner="el-icon-loading"
+        element-loading-background="rgba(0, 0, 0, 0.8)"
+        class="container-tree"
+      >
+        <el-tree
+          :data="containerHistoryTree"
+          :props="defaultTreeProps"
+          node-key="index"
+          default-expand-all
+          :expand-on-click-node="false"
+          @current-change="currentChangeHandler"
+        >
+          <span
+            slot-scope="{ node, data }"
+            class="el-tree-node__label"
+          >
+            <el-tooltip
+              v-if="data.index === -1"
+              class="item"
+              effect="dark"
+              :content="msg"
+              placement="top"
+            >
+              <span>{{ node.label }}</span>
+            </el-tooltip>
+            <span v-else>{{ node.label }}</span>
+          </span>
+        </el-tree>
+      </div>
+    </div>
+    <div
+      v-loading="tableLoading"
+      element-loading-text="拼命加载中"
+      element-loading-spinner="el-icon-loading"
+      element-loading-background="rgba(0, 0, 0, 0.8)"
+      class="container-right"
+    >
+      <el-table
+        ref="table"
+        :data="dealedTableData"
+        border
+        stripe
+        fit
+        height="calc(100vh - 80px - 17px - 20px)"
+        :header-cell-class-name="headerCellClass"
+        :row-class-name="tableRowClassName"
+        :cell-class-name="cellClass"
+        @cell-click="cellClickHandler"
+      >
+        <el-table-column
+          v-for="col in tableCols"
+          :key="col.prop"
+          :prop="col.prop"
+          :label="col.label"
+          :width="col.width"
+          :fixed="col.fixed"
+          :formatter="tableFormat"
+        >
+          <template #header>
+            <el-tooltip
+              :content="col.desc || col.label"
+              placement="top"
+            >
+              <TableHeaderCell
+                :label="col.label"
+                :filter-options="tableDataFilters[col.prop]"
+                :filter-values.sync="filterValues[col.prop]"
+                :sortable="col.sortable"
+                :sort-rule.sync="tableDataSortRules[col.prop]"
+              />
+            </el-tooltip>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+
+<script>
+import BackButton from '@/components/BackButton'
+import TableHeaderCell from '@/components/TableHeaderCell'
+import { mapGetters } from 'vuex'
+import { myQuery } from '@/api/dataIntegration'
+import { setTableFilters } from '@/utils/table'
+
+export default {
+  name: 'ContainerHistory',
+  components: {
+    BackButton,
+    TableHeaderCell
+  },
+  data() {
+    return {
+      queryData: {},
+      containerHistory: [],
+      selectedHistoryData: {},
+      defaultTreeProps: {
+        children: 'children',
+        label: 'label'
+      },
+      treeLoading: false,
+      tableLoading: false,
+      tableCols: [
+        {
+          prop: 'passengerName',
+          label: '旅客姓名',
+          desc: '指旅客姓名的拼音大写',
+          filterable: true,
+          sortable: true
+        },
+        {
+          prop: 'luggageSN',
+          label: '行李牌号',
+          desc: '指行李的10位数字行李牌号码',
+          filterable: true,
+          sortable: true
+        },
+        {
+          prop: 'specialType',
+          label: '特殊行李类型',
+          desc: '指有别于普通托运行李的特殊行李分类，包括（装笼动物、机组行李、易碎行李、VIP行李等），参考BSM报文.E项说明',
+          width: 115,
+          filterable: true,
+          sortable: true
+        },
+        {
+          prop: 'isDEL',
+          label: '删除',
+          desc: '指旅客是否取消值机托运，根据BSM报文状态是否有DEL判断，已删除的行李记录为斜体灰色字体',
+          filterable: true,
+          sortable: true
+        },
+        {
+          prop: 'activeState',
+          label: '激活',
+          desc: '指托运行李是否被激活，参照BSM报文.S项说明',
+          filterable: true,
+          sortable: true
+        },
+        {
+          prop: 'luggageWeight',
+          label: '重量',
+          desc: '指托运行李的重量，参照BSM报文.W项说明'
+        },
+        {
+          prop: 'lastStatus',
+          label: '最新状态',
+          desc: '指托运行李的当前查询时间所在的节点状态',
+          filterable: true,
+          sortable: true
+        },
+        {
+          prop: 'lastLocation',
+          label: '最新位置',
+          desc: '指托运行李的当前查询时间所在的节点状态的识读位置代号',
+          filterable: true,
+          sortable: true
+        },
+        {
+          prop: 'inFlightNO',
+          label: '中转进航班',
+          desc: '指有中转行李转出的进港航班号',
+          width: 110,
+          filterable: true,
+          sortable: true
+        },
+        {
+          prop: 'transferFlightNO',
+          label: '中转出航班',
+          desc: '指有中转行李转入的离港航班号',
+          width: 110,
+          filterable: true,
+          sortable: true
+        }
+      ],
+      tableData: [],
+      tableDataFilters: {},
+      filterValues: {},
+      tableDataSortRules: {},
+      msg: '容器历史默认显示最近10条历史，如果需要可联系管理员进行配置'
+    }
+  },
+  computed: {
+    ...mapGetters(['clickedCells']),
+    containerHistoryTree() {
+      return [
+        {
+          index: -1,
+          label: `容器历史-${this.queryData.containerID}`,
+          children: this.containerHistory.map(({ flightNO, flightDate, departureAirport, arriveAirport }, index) => ({
+            index,
+            label: [flightNO, flightDate.replaceAll('-', '/'), departureAirport, arriveAirport].join('-')
+          }))
+        }
+      ]
+    },
+    dealedTableData() {
+      const filtered = this.tableData.filter(item => {
+        let flag = true
+        Object.entries(this.filterValues).forEach(([key, arr]) => {
+          if (arr.length && !arr.includes(item[key])) {
+            flag = false
+          }
+        })
+        return flag
+      })
+      const sortRules = Object.entries(this.tableDataSortRules).reduce(
+        (pre, [key, value]) => {
+          if (value) {
+            pre[0].push(key)
+            value = value === 'ascending' ? 'asc' : 'desc'
+            pre[1].push(value)
+          }
+          return pre
+        },
+        [[], []]
+      )
+      return this._.orderBy(filtered, sortRules[0], sortRules[1])
+    }
+  },
+  watch: {
+    $route: {
+      handler({ path, query }) {
+        if (path.includes('containerHistory')) {
+          const { containerID } = query
+          if (containerID) {
+            const { containerID: oldContainerID } = this.queryData
+            if (containerID !== oldContainerID) {
+              this.queryData = { containerID }
+              this.queryContainerHistory([containerID])
+            }
+          } else {
+            this.$router.push('/')
+          }
+        }
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  created() {
+    Object.values(this.tableCols).forEach(({ prop, filterable, sortable }) => {
+      if (filterable) {
+        this.$set(this.tableDataFilters, prop, [])
+        this.$set(this.filterValues, prop, [])
+      }
+      if (sortable) {
+        this.$set(this.tableDataSortRules, prop, '')
+      }
+    })
+  },
+  updated() {
+    // table数据更新
+    this.$nextTick(() => {
+      this.$refs.table.doLayout()
+    })
+  },
+  deactivated() {
+    this.treeLoading = false
+    this.tableLoading = false
+  },
+  beforeDestroy() {
+    this.treeLoading = false
+    this.tableLoading = false
+  },
+  methods: {
+    currentChangeHandler({ index }) {
+      if (index > -1) {
+        this.selectedHistoryData = this.containerHistory[index]
+        const { flightNO, flightDate, departureAirport, arriveAirport, containerID } = this.selectedHistoryData
+        const dataContent = [flightNO, flightDate, departureAirport, arriveAirport, containerID]
+        this.queryBaggageList(dataContent)
+      }
+    },
+    // 给表头单元格加上 ascending 或 descending 使用 element 自带的排序箭头变色
+    headerCellClass({ row, column, rowIndex, columnIndex }) {
+      const classes = []
+      const rule = this.tableDataSortRules[column.property]
+      if (rule) {
+        classes.push(rule)
+      }
+      return classes.join(' ')
+    },
+    tableRowClassName({ row, rowIndex }) {
+      const classes = []
+      if (row.isDEL === 'DEL') {
+        classes.push('bgl-deleted')
+      }
+      return classes.join(' ')
+    },
+    cellClass({ row, column, rowIndex, columnIndex }) {
+      const classes = []
+      if (
+        [
+          'flightNO',
+          'luggageSN'
+          // 'inFlightNO',
+          // 'transferFlightNO'
+        ].includes(column.property) &&
+        row[column.property]
+      ) {
+        classes.push('cell-click')
+        if (
+          this.clickedCells.some(
+            cell =>
+              cell.pageName === 'advance' &&
+              Object.entries(cell.row).every(([key, value]) => row[key] === value) &&
+              cell.columnProp === column.property
+          )
+        ) {
+          classes.push('cell-clicked')
+        }
+      }
+      return classes.join(' ')
+    },
+    cellClickHandler(row, column, cell, event) {
+      if (
+        [
+          // 'flightNO',
+          'luggageSN'
+          // 'inFlightNO',
+          // 'transferFlightNO'
+        ].includes(column.property) &&
+        row[column.property]
+      ) {
+        this.$store.dispatch('keepAlive/addClickedCell', {
+          row,
+          columnProp: column.property,
+          pageName: this.$route.name
+        })
+        switch (column.property) {
+          // case 'flightNO':
+          //   this.$router.push({
+          //     path: '/advance/flightView',
+          //     query: {
+          //       flightNO: this.selectedHistoryData.flightNO,
+          //       flightDate: this.selectedHistoryData.flightDate
+          //     }
+          //   })
+          //   break
+          case 'luggageSN':
+            this.$router.push({
+              path: `/${this.$route.path.split('/').slice(1, -1).join('/')}/baggageView`,
+              query: {
+                flightNO: this.selectedHistoryData.flightNO,
+                flightDate: this.selectedHistoryData.flightDate,
+                bagSN: row.luggageSN
+              }
+            })
+            break
+          // case 'inFlightNO':
+          //   this.$router.push({
+          //     path: '/advance/flightView',
+          //     query: {
+          //       flightNO: row.inFlightNO,
+          //       flightDate: row.preFlightDate
+          //     }
+          //   })
+          //   break
+          // case 'transferFlightNO':
+          //   this.$router.push({
+          //     path: '/advance/flightView',
+          //     query: {
+          //       flightNO: row.transferFlightNO,
+          //       flightDate: row.transferFlightDate
+          //     }
+          //   })
+          //   break
+          default:
+            break
+        }
+      }
+    },
+    tableFormat(row, column, cellValue) {
+      switch (column.property) {
+        case 'isDEL':
+          return cellValue === 'DEL' ? cellValue : ''
+        case 'activeState':
+          return cellValue === 1 ? '激活' : '未激活'
+        default:
+          return cellValue ?? ''
+      }
+    },
+    async queryContainerHistory(dataContent) {
+      this.treeLoading = true
+      this.tableData = []
+      try {
+        const result = await myQuery(DATACONTENT_ID.containerHistory, ...dataContent)
+        this.containerHistory = result
+        this.msg = '容器历史默认显示最近' + this.containerHistory[0].k + '条历史，如果需要可联系管理员进行配置'
+      } catch (error) {
+        this.$message.error('失败')
+      }
+      this.treeLoading = false
+    },
+    async queryBaggageList(dataContent) {
+      this.tableLoading = true
+      this.tableData = []
+      try {
+        const result = await myQuery(DATACONTENT_ID.containerBaggage, ...dataContent)
+        this.tableData = result
+        setTableFilters(this.tableData, this.tableDataFilters)
+      } catch (error) {
+        this.$message.error('失败')
+      }
+      this.tableLoading = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.container-history {
+  padding: 17px 24px 20px;
+  display: flex;
+  .container-left {
+    flex: 0 1 352px;
+    margin-right: 16px;
+    background-color: #ffffff;
+    .title {
+      height: 32px;
+      .manageTitle {
+        margin-right: 0;
+      }
+    }
+    ::v-deep .el-tree {
+      height: calc(100vh - 80px - 32px - 17px - 20px);
+      overflow-x: hidden;
+      overflow-y: auto;
+      > .el-tree-node {
+        > .el-tree-node__children {
+          display: block;
+        }
+        .el-tree-node__content {
+          height: 38px;
+          .el-tree-node__label {
+            margin-left: 0;
+            letter-spacing: 1px;
+            line-height: 38px;
+            font-size: 14px;
+            font-family: Helvetica, 'Microsoft YaHei';
+            font-weight: bold;
+            color: #101116;
+          }
+        }
+        > .el-tree-node__content {
+          > .el-tree-node__expand-icon.el-icon-caret-right:not(.is-leaf):before {
+            font-size: 16px;
+            color: #101116;
+          }
+          > .el-tree-node__label {
+            font-size: 16px;
+          }
+        }
+      }
+    }
+  }
+
+  .container-right {
+    flex: 1;
+    ::v-deep .el-table {
+      width: 100%;
+      .cell {
+        padding: 0;
+        text-align: center;
+        font-size: 14px;
+        font-family: Helvetica, 'Microsoft YaHei';
+        letter-spacing: 0;
+      }
+      .cell-click {
+        cursor: pointer;
+        color: #2d7cff;
+        &.cell-clicked {
+          color: purple;
+        }
+      }
+      .el-table__header-wrapper,
+      .el-table__fixed-header-wrapper {
+        .cell {
+          font-weight: bold;
+          color: #101116;
+        }
+      }
+      .el-table__body-wrapper,
+      .el-table__fixed-body-wrapper {
+        tr.bgl-deleted {
+          background: #d2d6df;
+          td {
+            background: #d2d6df;
+            font-style: italic;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/baggageManagement/components/departure/containerHistory.vue

@@ -0,0 +1,14 @@
+<template>
+  <ContainerHistory />
+</template>
+
+<script>
+import ContainerHistory from '../containerHistory'
+
+export default {
+  name: 'DepartureContainerHistory',
+  components: {
+    ContainerHistory
+  }
+}
+</script>

src/views/baggageManagement/components/departureC/containerHistory.vue

@@ -0,0 +1,14 @@
+<template>
+  <ContainerHistory />
+</template>
+
+<script>
+import ContainerHistory from '../containerHistory'
+
+export default {
+  name: 'DepartureContainerHistory',
+  components: {
+    ContainerHistory
+  }
+}
+</script>

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

@@ -10,10 +10,8 @@
     <div class="flight-wrapper">
       <div class="part1">
         <div class="title">
-          <span class="manageTitle">
-            <span>航班基本信息</span>
-            <!-- <span class="btn-back"><i class="el-icon-arrow-left" />返回上一步</span> -->
-          </span>
+          <span class="manageTitle">航班基本信息</span>
+          <BackButton />
         </div>
         <div class="part1-wrapper">
           <div class="airline">{{ queryData.flightNO }}
@@ -489,6 +487,7 @@
   </div>
 </template>
 <script>
+import BackButton from '@/components/BackButton'
 import Dialog from '@/layout/components/Dialog/index.vue'
 import TimeZoneSelector from '@/components/TimeZoneSelector'
 import { myQuery } from '@/api/dataIntegration'
@@ -537,6 +536,7 @@ export default {
     }
   },
   components: {
+    BackButton,
     Dialog,
     TimeZoneSelector,
     TableHeaderCell
@@ -1068,6 +1068,12 @@ export default {
     }
     .part1 {
       width: 71.15%;
+      .title {
+        justify-content: flex-start;
+        .manageTitle {
+          flex: 0 1 auto;
+        }
+      }
       .part1-wrapper {
         height: 290px;
         background: #041741;

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

@@ -1,615 +0,0 @@
-<template>
-  <div class="new-container-view">
-    <div class="list">
-      <div class="title flex">
-        <div class="manageTitle">航班基本信息</div>
-        <el-button @click="toContainer" type="primary" size="small">历史记录</el-button>
-      </div>
-      <div class="part1">
-        <el-row :gutter="10">
-          <el-col :span="4">
-            <div class="grid-content bg-purple">容器编号:111</div>
-          </el-col>
-          <el-col :span="4">
-            <div class="grid-content bg-purple">容器类型:2222</div>
-          </el-col>
-          <el-col :span="4">
-            <div class="grid-content bg-purple">航班号:CA1111</div>
-          </el-col>
-          <el-col :span="5">
-            <div class="grid-content bg-purple">航班日期:2022-9-30 10:55:26</div>
-          </el-col>
-          <el-col :span="4">
-            <div class="grid-content bg-purple">舱位:11</div>
-          </el-col>
-        </el-row>
-      </div>
-    </div>
-    <div class="list">
-      <div class="title">
-        <div class="manageTitle">航班行李列表</div>
-      </div>
-      <div class="part2">
-        <el-table ref="flightBaggageTable" :data="dealedTableData" border style="width: 100%" height="calc(77vh - 64px)" stripe size="mini" show-summary :summary-method="summaryRow(dealedTableData.length)" :header-cell-class-name="headerCellClass" :header-cell-style="{ color: '#101116' }" :row-class-name="rowClass" :cell-class-name="cellClass" @cell-click="cellClickHandler">
-          <el-table-column v-for="col in tableColsCopy" :key="col.index" :prop="col.prop" :label="col.label" :align="col.align || 'center'" :width="col.width" :fixed="col.fixed" :formatter="tableFormat">
-            <template #header>
-              <TableHeaderCell :label="col.label" :filter-options="flightBaggageTableFilters[col.prop]" :filter-values.sync="filterValues[col.prop]" :sortable="col.sortable" :sort-rule.sync="tableDataSortRules[col.prop]" />
-            </template>
-          </el-table-column>
-        </el-table>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import TimeZoneSelector from '@/components/TimeZoneSelector'
-import { myQuery } from '@/api/dataIntegration'
-import tableColsMixin from '../../mixins/tableCols'
-import timeZoneMixin from '../../mixins/timeZone'
-import TableHeaderCell from '@/components/TableHeaderCell'
-import { setTableFilters } from '@/utils/table'
-import { mapGetters } from 'vuex'
-import { throttledExportToExcel } from '@/utils/table'
-export default {
-  name: 'NewContainerView',
-  directives: {
-    dragHeight: {
-      inserted (el, binding, vnode) {
-        const that = vnode.context
-        let mousedownY
-        let dragY
-        let dragHeight
-        const offsetTop = el.offsetParent.offsetTop
-        function mousemoveHandler (e) {
-          e.stopPropagation()
-          e.preventDefault()
-          dragY = dragHeight + mousedownY - e.screenY
-          dragY = dragY < 0 ? 0 : dragY > offsetTop ? offsetTop : dragY
-          that.dragY = dragY
-        }
-        function mouseupHandler (e) {
-          e.stopPropagation()
-          e.preventDefault()
-          that.dragHeight = that.dragY
-          that.dragY = 0
-          that.dragActive = false
-          document.removeEventListener('mousemove', mousemoveHandler)
-          document.removeEventListener('mouseup', mouseupHandler)
-        }
-        el.addEventListener('mousedown', e => {
-          that.dragActive = true
-          mousedownY = e.screenY
-          dragHeight = that.dragHeight
-          that.dragY = dragHeight
-          document.addEventListener('mousemove', mousemoveHandler)
-          document.addEventListener('mouseup', mouseupHandler)
-        })
-      }
-    }
-  },
-  components: {
-    TimeZoneSelector,
-    TableHeaderCell
-  },
-  mixins: [tableColsMixin, timeZoneMixin],
-  data () {
-    return {
-      fullscreenLoading: false,
-      airlineList: [],
-      selectedAirline: '',
-      queryData: {},
-      flightInfo: {},
-      keyWords: '',
-      containerTableColumn: [
-        { label: '容器编号', prop: 'containerNumber', width: 100 },
-        { label: '类型', prop: 'style' },
-        { label: '行李数', prop: 'numberOfBags' },
-        { label: '舱位', prop: 'containerSpace' }
-      ],
-      // transferInTableColumn: [
-      //   { label: '航班号', prop: 'preFlightNO' },
-      //   { label: '日期', prop: 'preFlightDate' },
-      //   { label: '时间', prop: 'flightTime' },
-      //   { label: '始发站', prop: 'planDepartureApt' },
-      //   { label: '航班状态', prop: 'flightStatus' },
-      //   { label: '中转数', prop: 'totalNumber' }
-      // ],
-      // transferOutTableColumn: [
-      //   { label: '航班号', prop: 'transferFlightNO' },
-      //   { label: '日期', prop: 'transferFlightDate' },
-      //   { label: '时间', prop: 'flightTime' },
-      //   { label: '始发站', prop: 'planDepartureApt' },
-      //   { label: '目的站', prop: 'planLandingApt' },
-      //   { label: '中转数', prop: 'transferNumber' }
-      // ],
-      tableCols: [
-        // { label: '序号', prop: 'index' },
-        {
-          label: '旅客姓名',
-          prop: 'PassengerNameUpcase',
-          width: 140,
-          fixed: 'left',
-          filterable: true,
-          sortable: true
-        },
-        {
-          label: '行李牌号',
-          prop: 'BagSN',
-          width: 120,
-          fixed: 'left',
-          filterable: true,
-          sortable: true
-        },
-        {
-          label: '特殊行李类型',
-          prop: 'SpecialType',
-          width: 120,
-          filterable: true,
-          sortable: true
-        },
-        { label: '装载序号', prop: 'LoadSN' },
-        { label: '值机', prop: 'checkInTime', width: 140 },
-        { label: '状态', prop: 'latestStatus', filterable: true, sortable: true },
-        { label: '安检', prop: 'securityTime', width: 140 },
-        { label: '分拣', prop: 'sortTime', width: 140 },
-        { label: '装车', prop: 'loadTime', width: 140 },
-        { label: '装机', prop: 'inflTime', width: 140 },
-        { label: '中转进航班', prop: 'inFlightNO', filterable: true, sortable: true, width: 105 },
-        { label: '中转出航班', prop: 'transferFlightNO', filterable: true, sortable: true, width: 105 },
-      ],
-      containerTableData: [], // 容器统计
-      transferInBaggageTableData: [], // 中转进
-      transferOutBaggageTableData: [], // 中转出
-      flightBaggageTableData: [], // 行李列表
-      flightBaggageTableFilters: {},
-      filterValues: {},
-      tableDataSortRules: {},
-      warningContainers: [],
-      dragHeight: 0,
-      dragY: 0,
-      dragActive: false,
-      containerID: null
-    }
-  },
-  computed: {
-    ...mapGetters(['clickedCells']),
-    dealedTableData () {
-      const filtered = this.flightBaggageTableData.filter(item => {
-        let flag = true
-        Object.entries(this.filterValues).forEach(([key, arr]) => {
-          if (arr.length && !arr.includes(item[key])) {
-            flag = false
-          }
-        })
-        return flag
-      })
-      const sortRules = Object.entries(this.tableDataSortRules).reduce(
-        (pre, [key, value]) => {
-          if (value) {
-            pre[0].push(key)
-            value = value === 'ascending' ? 'asc' : 'desc'
-            pre[1].push(value)
-          }
-          return pre
-        },
-        [[], []]
-      )
-      return this._.orderBy(filtered, sortRules[0], sortRules[1])
-    },
-    draggableStyle () {
-      return {
-        height: `calc(100vh - 80px - 64px - 16px - 344px + ${this.dragHeight}px)`
-      }
-    },
-    dragLineStyle () {
-      return {
-        transform: `translateY(${this.dragHeight - this.dragY}px)`
-      }
-    }
-  },
-  watch: {
-    $route: {
-      handler ({ path, query }) {
-        if (path.includes('newContainerView')) {
-          const { flightNO, flightDate, containerID } = query
-          this.containerID = containerID
-          if (flightNO && flightDate) {
-            const { flightNO: oldFlightNO, flightDate: oldFlightDate } = this.queryData
-            if (flightNO !== oldFlightNO || flightDate !== oldFlightDate) {
-              this.queryData = { flightNO, flightDate }
-              this.queryAirline([flightNO, flightDate])
-            }
-          }
-        }
-      },
-      deep: true,
-      immediate: true
-    },
-    fullscreenLoading (val) {
-      if (val) {
-        this.loading = this.$loading({
-          lock: true,
-          text: '加载中',
-          spinner: 'el-icon-loading',
-          background: 'rgba(0, 0, 0, 0.7)'
-        })
-      } else {
-        this.loading?.close()
-      }
-    },
-    selectedAirline (val) {
-      const { flightNO, flightDate } = this.queryData
-      const [departureAirport, landingAirport] = val.split('-')
-      this.queryAll([flightNO, flightDate, departureAirport, landingAirport])
-    }
-  },
-  created () {
-    Object.values(this.tableCols).forEach(({ prop, filterable, sortable }) => {
-      if (filterable) {
-        this.$set(this.flightBaggageTableFilters, prop, [])
-        this.$set(this.filterValues, prop, [])
-      }
-      if (sortable) {
-        this.$set(this.tableDataSortRules, prop, '')
-      }
-    })
-  },
-  activated () {
-    this.$nextTick(() => {
-      this.$refs['containerTable']?.doLayout()
-      // this.$refs['transferInBaggageTable']?.doLayout()
-      // this.$refs['transferOutBaggageTable']?.doLayout()
-      this.$refs['flightBaggageTable']?.doLayout()
-    })
-  },
-  updated () {
-    this.$nextTick(() => {
-      this.$refs['containerTable']?.doLayout()
-      // this.$refs['transferInBaggageTable']?.doLayout()
-      // this.$refs['transferOutBaggageTable']?.doLayout()
-      this.$refs['flightBaggageTable']?.doLayout()
-    })
-  },
-  deactivated () {
-    this.loading?.close()
-  },
-  beforeDestroy () {
-    this.loading?.close()
-  },
-  methods: {
-    rowClass ({ row, rowIndex }) {
-      const classes = []
-      if (this.warningContainers.includes(row['containerNumber']) || row['latestStatus'] === '待翻减') {
-        classes.push('row-warning')
-      }
-      if (row['Status'] === 'DEL') {
-        classes.push('bgl-deleted')
-      }
-      return classes.join(' ')
-    },
-    // 给表头单元格加上 ascending 或 descending 使用 element 自带的排序箭头变色
-    headerCellClass ({ row, column, rowIndex, columnIndex }) {
-      const classes = []
-      const rule = this.tableDataSortRules[column.property]
-      if (rule) {
-        classes.push(rule)
-      }
-      return classes.join(' ')
-    },
-    cellClass ({ row, column, rowIndex, columnIndex }) {
-      const classes = []
-      if (
-        ['checkInTime', 'DealInfo', 'sortLocationMark', 'loadLocationMark', 'inflLocationMark'].includes(
-          column.property
-        )
-      ) {
-        classes.push('pre-line')
-      }
-      if (
-        [
-          'preFlightNO',
-          'totalNumber',
-          'inFlightNO',
-          'transferFlightNO',
-          'transferNumber',
-          'PassengerNameUpcase',
-          'BagSN',
-          'U_Device_ID'
-        ].includes(column.property) &&
-        row[column.property] &&
-        row[column.property] !== 'FBULK'
-      ) {
-        classes.push('cell-click')
-        if (
-          this.clickedCells.some(
-            cell =>
-              cell.pageName === this.$route.name &&
-              Object.entries(cell.row).every(([key, value]) => row[key] === value) &&
-              cell.columnProp === column.property
-          )
-        ) {
-          classes.push('cell-clicked')
-        }
-      }
-      return classes.join(' ')
-    },
-    cellClickHandler (row, column, cell, event) {
-      if (
-        [
-          'preFlightNO',
-          'totalNumber',
-          'transferFlightNO',
-          'transferNumber',
-          'PassengerNameUpcase',
-          'BagSN',
-          'U_Device_ID'
-        ].includes(column.property) &&
-        row[column.property] &&
-        row[column.property] !== 'FBULK'
-      ) {
-        this.$store.dispatch('keepAlive/addClickedCell', {
-          row,
-          columnProp: column.property,
-          pageName: this.$route.name
-        })
-        switch (column.property) {
-          case 'preFlightNO':
-            this.$router.push({
-              path: '/advance/flightView',
-              query: {
-                flightNO: row.preFlightNO,
-                flightDate: row.preFlightDate
-              }
-            })
-            break
-          case 'totalNumber':
-            this.$router.push({
-              path: '/advance',
-              query: {
-                flightNO: this.queryData.flightNO,
-                startDate: this.queryData.flightDate,
-                endDate: this.queryData.flightDate,
-                transferArrival: row.preFlightNO
-              }
-            })
-            break
-          case 'inFlightNO':
-            this.$router.push({
-              path: '/advance/flightView',
-              query: {
-                flightNO: row.inFlightNO,
-                flightDate: row.inFlightDate
-              }
-            })
-            break
-          case 'transferFlightNO':
-            this.$router.push({
-              path: '/advance/flightView',
-              query: {
-                flightNO: row.transferFlightNO,
-                flightDate: row.transferFlightDate
-              }
-            })
-            break
-          case 'transferNumber':
-            this.$router.push({
-              path: '/advance',
-              query: {
-                flightNO: this.queryData.flightNO,
-                startDate: this.queryData.flightDate,
-                endDate: this.queryData.flightDate,
-                transferDeparture: row.transferFlightNO
-              }
-            })
-            break
-          case 'PassengerNameUpcase':
-            this.$message.info('开发中')
-            break
-          case 'BagSN':
-            this.$router.push({
-              path: `/${this.$route.path.split('/').slice(1, -1).join('/')}/baggageView`,
-              query: {
-                bagSN: row.BagSN,
-                flightNO: this.queryData.flightNO,
-                flightDate: this.queryData.flightDate
-              }
-            })
-            break
-          case 'U_Device_ID':
-            this.$router.push('/departure/newContainerView')
-            // this.$router.push({
-            //   path: `/${this.$route.path.split('/').slice(1, -1).join('/')}/containerView`,
-            //   query: {
-            //     containerID: row.U_Device_ID
-            //   }
-            // })
-            break
-          default:
-            break
-        }
-      }
-    },
-    toContainer () {
-      this.$router.push({
-        path: `/${this.$route.path.split('/').slice(1, -1).join('/')}/containerView`,
-        query: {
-          containerID: this.containerID
-        }
-      })
-    },
-    // 合计行
-    summaryMethod ({ columns, data }) {
-      const sums = []
-      if (columns.length > 0) {
-        columns.forEach((column, index) => {
-          if (index === 0) {
-            sums[index] = '合计'
-          } else if (
-            // 需要计算的列
-            ['numberOfBags', 'totalNumber', 'transferNumber'].includes(column.property)
-          ) {
-            const values = data.map(item => Number(item[column.property]))
-            if (values.some(value => !isNaN(value))) {
-              sums[index] = values.reduce((prev, curr) => {
-                const value = Number(curr)
-                if (!isNaN(value)) {
-                  return Number(prev) + Number(curr)
-                } else {
-                  return Number(prev)
-                }
-              }, 0)
-            } else {
-              sums[index] = 0
-            }
-          } else {
-            // 过滤某些字段不参与计算
-            sums[index] = '-'
-          }
-        })
-      }
-      return sums
-    },
-    // 统计行数
-    summaryRow (num) {
-      return function () {
-        return ['合计', `共${num}件`]
-      }
-    },
-    containerClick (row) {
-      if (row.containerNumber === 'FBULK') {
-        this.$router.push({
-          path: '/advance',
-          query: {
-            flightNO: this.queryData.flightNO,
-            startDate: this.queryData.flightDate,
-            endDate: this.queryData.flightDate,
-            loadType: 1
-          }
-        })
-      } else {
-        this.$router.push({
-          path: '/advance',
-          query: {
-            flightNO: this.queryData.flightNO,
-            startDate: this.queryData.flightDate,
-            endDate: this.queryData.flightDate,
-            U_Device_ID: row.containerNumber
-          }
-        })
-      }
-    },
-    exportHandler (refName, tableName) {
-      const table = this.$refs[refName].$el.cloneNode(true)
-      const fileName = `${tableName}-${this.queryData.flightNO}-${this.queryData.flightDate}.xlsx`
-      throttledExportToExcel(table, tableName, fileName)
-    },
-    queryflightInfo (dataContent) {
-      return myQuery(DATACONTENT_ID.flightInfo, ...dataContent)
-    },
-    queryContainer (dataContent) {
-      return myQuery(DATACONTENT_ID.flightContainer, ...dataContent)
-    },
-    queryBaggageByFlightNO (dataContent) {
-      return myQuery(DATACONTENT_ID.flightBaggage, ...dataContent)
-    },
-    async queryAirline (dataContent) {
-      try {
-        const listValues = await myQuery(DATACONTENT_ID.flightAirline, ...dataContent)
-        this.airlineList = listValues.map(({ departureAirport, landingAirport, departureBuild, landingBuild }) => ({
-          label: `${departureAirport}${departureBuild ? `(${departureBuild})` : ''}-${landingAirport}${landingBuild ? `(${landingBuild})` : ''}`,
-          value: `${departureAirport}-${landingAirport}`
-        }))
-        if (this.airlineList.length) {
-          this.selectedAirline = this.airlineList[0].value
-        }
-      } catch (error) {
-        this.$message.error('失败')
-      }
-    },
-    async queryAll (dataContent) {
-      this.fullscreenLoading = true
-      this.flightInfo = {}
-      try {
-        const [flightInfo, containerTableDataData, flightBaggageTableData] = await Promise.all([
-          this.queryflightInfo(dataContent),
-          this.queryContainer(dataContent),
-          this.queryBaggageByFlightNO(dataContent)
-        ])
-        if (flightInfo.length) {
-          this.flightInfo = flightInfo[0]
-        } else {
-          this.$message.info('未查询到航班基础数据')
-        }
-        this.containerTableData = containerTableDataData
-        // this.transferOutBaggageTableData = transferOutBaggageTableData.map(item => {
-        //   item['flightTime'] = item['flightDate'] ? item['flightDate'].split('T')[1] : ''
-        //   return item
-        // })
-        // this.transferInBaggageTableData = transferInBaggageTableData.map(item => {
-        //   item['flightTime'] = item['flightDate'] ? item['flightDate'].split('T')[1] : ''
-        //   return item
-        // })
-
-        this.warningContainers = []
-        this.flightBaggageTableData = flightBaggageTableData.map((item, index) => {
-          item['latestStatus'] === '待翻减' && this.warningContainers.push(item['U_Device_ID'])
-          // item['transitFlag'] = item['preFlightNO'] || item['inFlightNO'] ? '是' : '否'
-          return item
-        })
-        setTableFilters(this.flightBaggageTableData, this.flightBaggageTableFilters)
-      } catch (error) {
-        this.$message.error('失败')
-      }
-      this.fullscreenLoading = false
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.new-container-view {
-  width: 100%;
-  height: calc(100vh - 81px);
-  overflow: hidden;
-  background: #dfe3ea;
-  padding: 0px 8px 16px 8px;
-  .list {
-    .title {
-      padding: 16px 0;
-    }
-    .part1 {
-      width: 100%;
-      background: #041741;
-      padding: 16px 30px;
-      color: #fff;
-    }
-    .part2 {
-      background-color: #fff;
-      ::v-deep .el-table {
-        .cell-click {
-          cursor: pointer;
-          color: #2d7cff;
-          &.cell-clicked {
-            color: purple;
-          }
-        }
-        .el-table__body-wrapper,
-        .el-table__fixed-body-wrapper {
-          tr.bgl-deleted {
-            background: #d2d6df;
-            td {
-              background: #d2d6df;
-              font-style: italic;
-            }
-          }
-          .row-warning .el-table__cell {
-            background: red;
-          }
-        }
-      }
-    }
-  }
-}
-</style>
-

src/views/baggageManagement/components/transferArrival/containerHistory.vue

@@ -0,0 +1,14 @@
+<template>
+  <ContainerHistory />
+</template>
+
+<script>
+import ContainerHistory from '../containerHistory'
+
+export default {
+  name: 'TransferArrivalContainerHistory',
+  components: {
+    ContainerHistory
+  }
+}
+</script>

src/views/baggageManagement/components/transferDeparture/containerHistory.vue

@@ -0,0 +1,14 @@
+<template>
+  <ContainerHistory />
+</template>
+
+<script>
+import ContainerHistory from '../containerHistory'
+
+export default {
+  name: 'TransferDepartureContainerHistory',
+  components: {
+    ContainerHistory
+  }
+}
+</script>