feat: 修改顶部用户栏，跳转详情页改为动态值

src/api/module/booking.ts

@@ -41,7 +41,6 @@ export const getBookingDetail = (params: any, config: any) => {
     {
       action: 'ocean_booking',
       operate: 'detail',
-      _schemas: 'public',
       ...params
     },
     config

src/router/index.ts

@@ -6,7 +6,7 @@ const router = createRouter({
     {
       path: '/',
       name: 'Home',
-      redirect: '/booking',
+      redirect: '/dashboard',
       component: () => import('../views/Layout'),
       children: [
         {
@@ -82,7 +82,7 @@ router.beforeEach(async (to, from, next) => {
   // 未登录白名单
   const whiteList = ['/login', '/public-tracking', '/public-tracking/detail']
   // 判断是否登录
-  if (!whiteList.includes(to.path) && !localStorage.getItem('token')) {
+  if (!whiteList.includes(to.path) && !localStorage.getItem('username')) {
     if (whiteList.includes(from.path)) {
       ElMessage.warning('Please log in to use this feature.')
       next(false)

src/stores/modules/user.ts

@@ -0,0 +1,21 @@
+import { defineStore } from 'pinia'
+
+interface UserState {
+  username: string
+}
+export const useUserStore = defineStore('user', {
+  state: (): UserState => ({
+    username: localStorage.getItem('username') || ''
+  }),
+  getters: {},
+  actions: {
+    setUsername(username: any) {
+      localStorage.setItem('username', username)
+      this.username = username
+    },
+    logout() {
+      localStorage.removeItem('username')
+      this.username = ''
+    }
+  }
+})

src/views/Booking/src/components/BookingDetail/src/BookingDetail.vue

@@ -6,6 +6,9 @@ import ContainersView from './components/ContainersView.vue'
 import EmailView from './components/EmailView.vue'
 import { cloneDeep } from 'lodash'
 import { transportationMode } from '@/components/TransportationMode'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
 
 // 可拖拽模块的列表
 const boxList = ref([
@@ -60,7 +63,6 @@ const handleDraggable = (type: string, id: number) => {
       break
   }
 }
-
 const allData = ref()
 const loading = ref(false)
 const getData = () => {
@@ -68,8 +70,8 @@ const getData = () => {
   $api
     .getBookingDetail({
       status: 'Confirmed',
-      // a: 'UjwCcE8rEPXDQ6jYG3xp9V208RYJ6UrRpAH%2FRna8t%2BqjYnUcZnqOnvrE4Gg',
-      a: 'AjxXeBouEvrDQ6jYG3xp9V208RYJ6UrRpAH%2FRna8t%2BqjYnUcZnqOnvrE4Gg5'
+      a: route.query.a,
+      _schemas: route.query._schemas
     })
     .then((res: any) => {
       if (res.code === 200) {
@@ -315,6 +317,7 @@ const formatTime = (time: string) => {
   justify-content: flex-start;
   align-items: flex-start;
   gap: 8px;
+  min-height: 38px;
   .title {
     font-size: 12px;
     color: var(--color-neutral-2);

src/views/Booking/src/components/BookingDetail/src/components/BasicInformation.vue

@@ -263,7 +263,7 @@ watch(
 // 跳转到shipment页面
 const handLink = (id: string) => {
   router.push({
-    path: '/tracking',
+    path: '/tracking/detail',
     query: { a: props?.data?.__serial_no, _schemas: props?.data?._schemas }
   })
 }

src/views/Booking/src/components/BookingTable/src/BookingTable.vue

@@ -72,6 +72,7 @@ const getTableColumns = async (isInit: boolean) => {
     if (res.code === 200) {
       bookingTable.value.columns = [
         { type: 'checkbox', width: 50, fixed: 'left' },
+        { field: '__serial_no', title: 'serial_no', width: 300, fixed: 'left' },
         ...handleColumns(res.data.BookingTableColumns)
       ]
       tableOriginColumnsField.value = res.data.BookingTableColumns
@@ -300,7 +301,7 @@ const customizeColumns = async () => {
 const handleCellDblclick = ({ row }: any) => {
   router.push({
     path: '/booking/detail',
-    query: { a: row.__serial_no, _schemas: row.__schemas }
+    query: { a: row.__serial_no, _schemas: row._schemas }
   })
 }
 // 点击link字段是时
@@ -308,12 +309,12 @@ const handleLinkClick = (row: any, column: any) => {
   if (column.field === 'booking_no') {
     router.push({
       path: '/booking/detail',
-      query: { a: row.__serial_no, _schemas: row.__schemas }
+      query: { a: row.__serial_no, _schemas: row._schemas }
     })
   } else if (column.field === 'h_bol') {
     router.push({
       path: '/tracking/detail',
-      query: { a: row.__serial_no, _schemas: row.__schemas }
+      query: { a: row.__serial_no, _schemas: row._schemas }
     })
   }
 }

src/views/Layout/src/components/Header/HeaderView.vue

@@ -4,7 +4,9 @@ import DownloadKLNPortal from './components/DownloadKLNPortal.vue'
 import ChangePasswordDialog from './components/ChangePasswordDialog.vue'
 import LogoutDialog from './components/LogoutDialog.vue'
 import { useRouter } from 'vue-router'
+import { useUserStore } from '@/stores/modules/user'
 
+const userStore = useUserStore()
 const router = useRouter()
 const input1 = ref('')
 
@@ -27,14 +29,6 @@ const handleLogout = () => {
 const handleLogin = () => {
   router.push('/login')
 }
-
-const test = () => {
-  if (localStorage.getItem('token')) {
-    localStorage.removeItem('token')
-  } else {
-    localStorage.setItem('token', '123')
-  }
-}
 </script>
 
 <template>
@@ -50,7 +44,6 @@ const test = () => {
       <!-- <span class="font_family icon-icon_notice_b" style="font-size: 18px"></span>
       <span class="font_family icon-icon_language_b" style="font-size: 16px"></span> -->
 
-      <el-button @click="test">测试</el-button>
       <el-popover
         placement="bottom-end"
         :width="256"
@@ -59,11 +52,8 @@ const test = () => {
         content="this is content, this is content, this is content"
       >
         <div class="title">
-          <el-avatar
-            :size="48"
-            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
-          />
-          <span class="name">John Doe</span>
+          <div class="avatar">{{ userStore.username?.slice(0, 1) }}</div>
+          <span class="name">{{ userStore.username }}</span>
         </div>
         <div class="options">
           <div class="item" @click="handleChangePassword">
@@ -76,17 +66,24 @@ const test = () => {
           </div>
         </div>
         <template #reference>
-          <el-avatar
-            :size="24"
-            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
-          />
+          <div class="avatar" v-if="userStore.username">{{ userStore.username?.slice(0, 1) }}</div>
         </template>
       </el-popover>
-      <el-button class="el-button--main" style="padding: 8px 10px" plain @click="handleDownload">
+      <el-button
+        v-if="!userStore.username"
+        class="el-button--main"
+        style="padding: 8px 10px"
+        plain
+        @click="handleDownload"
+      >
         <span class="font_family icon-icon_download_b" style="margin-right: 4px"></span>
         Download KLN Portal
       </el-button>
-      <el-button class="el-button--main" style="margin-left: -10px" @click="handleLogin"
+      <el-button
+        v-if="!userStore.username"
+        class="el-button--main"
+        style="margin-left: -10px"
+        @click="handleLogin"
         >Log in</el-button
       >
     </div>
@@ -97,6 +94,18 @@ const test = () => {
 </template>
 
 <style lang="scss" scoped>
+.avatar {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  text-align: center;
+  line-height: 24px;
+  color: #fff;
+  font-size: 16px;
+  font-weight: 700;
+  background-color: var(--color-theme);
+  cursor: pointer;
+}
 .layout-toolbar {
   display: flex;
   justify-content: space-between;
@@ -140,6 +149,17 @@ div.el-popover.el-popper.user-config-popover {
     gap: 8px;
     height: 70px;
     border-bottom: 1px solid #eeeeed;
+    .avatar {
+      width: 48px;
+      height: 48px;
+      border-radius: 50%;
+      text-align: center;
+      line-height: 48px;
+      color: #fff;
+      font-size: 32px;
+      font-weight: 700;
+      background-color: var(--color-theme);
+    }
   }
   .options {
     .item {

src/views/Layout/src/components/Header/components/LogoutDialog.vue

@@ -1,9 +1,20 @@
 <script setup lang="ts">
+import { useRouter } from 'vue-router'
+import { useUserStore } from '@/stores/modules/user'
+
+const router = useRouter()
 const dialogVisible = ref(false)
 
 const openDialog = () => {
   dialogVisible.value = true
 }
+
+const userStore = useUserStore()
+const handleLogout = () => {
+  dialogVisible.value = false
+  userStore.logout()
+  router.push('/login')
+}
 defineExpose({
   openDialog
 })
@@ -17,7 +28,7 @@ defineExpose({
     </div>
     <template #footer>
       <el-button class="el-button--default" @click="dialogVisible = false">Cancel</el-button>
-      <el-button class="el-button--dark">Logout</el-button>
+      <el-button class="el-button--dark" @click="handleLogout">Logout</el-button>
     </template>
   </el-dialog>
 </template>

src/views/Layout/src/components/Menu/MenuView.vue

@@ -118,7 +118,7 @@ const whiteList = ['/login', '/public-tracking', '/public-tracking/detail']
 // 判断是否允许跳转
 const isAllowJump = (path: any) => {
   // 判断是否登录
-  if (!whiteList.includes(path) && !localStorage.getItem('token')) {
+  if (!whiteList.includes(path) && !localStorage.getItem('username')) {
     ElMessage.warning('Please log in to use this feature.')
     activeMenu.value = route.path // 保持选中状态不变
     return false
@@ -133,7 +133,7 @@ router.afterEach(() => {
 // 路由跳转函数
 const changeRouter = (path: any) => {
   let toPath = path
-  if (path === '/tracking' && !localStorage.getItem('token')) {
+  if (path === '/tracking' && !localStorage.getItem('username')) {
     toPath = '/public-tracking'
   }
 

src/views/Login/src/loginView.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { useRouter } from 'vue-router'
 import ErrorTips from './components/ErrorTips.vue'
+import { useUserStore } from '@/stores/modules/user'
 
 const router = useRouter()
 const loginForm = ref({
@@ -67,6 +68,8 @@ const handleCheckUser = () => {
   })
 }
 
+const userStore = useUserStore()
+
 // 点击登录按钮
 const handleLogin = () => {
   // 这里是登录逻辑
@@ -96,6 +99,7 @@ const handleLogin = () => {
             }
           )
         }
+        userStore.setUsername(res.data.uname || '')
         router.push('/')
       } else if (res.code === 400) {
         // 验证码错误

src/views/Tracking/src/components/TrackingDetail/src/TrackingDetail.vue

@@ -12,6 +12,9 @@ import AttachmentView from './components/AttachmentView.vue'
 import MapView from './components/MapView.vue'
 import { cloneDeep } from 'lodash'
 import { transportationMode } from '@/components/TransportationMode'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
 
 // 可拖拽模块的列表
 const boxList = ref([
@@ -87,8 +90,8 @@ const getData = () => {
   $api
     .getTrackingDetail({
       status: 'Confirmed',
-      // a: 'UjwCcE8rEPXDQ6jYG3xp9V208RYJ6UrRpAH%2FRna8t%2BqjYnUcZnqOnvrE4Gg',
-      a: 'AjxXeBouEvrDQ6jYG3xp9V208RYJ6UrRpAH%2FRna8t%2BqjYnUcZnqOnvrE4Gg5'
+      a: route.query.a,
+      _schemas: route.query._schemas
     })
     .then((res: any) => {
       if (res.code === 200) {
@@ -401,6 +404,7 @@ const formatTime = (time: string) => {
   justify-content: flex-start;
   align-items: flex-start;
   gap: 8px;
+  min-height: 38px;
   .title {
     font-size: 12px;
     color: var(--color-neutral-2);

src/views/Tracking/src/components/TrackingDetail/src/components/UploadFilesDialog.vue

@@ -56,11 +56,18 @@ const clearData = () => {
   uploadFileList.value = []
 }
 const beforeAvatarUpload = (rawFile: any) => {
-  if (!['application/pdf', '.docx', '.xlsx'].includes(rawFile.type)) {
-    ElMessage.error('Avatar picture must be JPG format!')
+  console.log(rawFile, '文件类型')
+  if (
+    ![
+      'application/pdf',
+      'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+      'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+    ].includes(rawFile.type)
+  ) {
+    ElMessage.error('The file types allowed for upload are: PDF, DOCX, and XLSX.')
     return false
   } else if (rawFile.size / 1024 / 1024 > 25) {
-    ElMessage.error('Avatar picture size can not exceed 25MB!')
+    ElMessage.error('File size must not exceed 25MB!')
     return false
   }
   return true
@@ -84,7 +91,6 @@ const beforeAvatarUpload = (rawFile: any) => {
         class="upload-demo"
         ref="uploadRef"
         drag
-        :auto-upload="false"
         :accept="'application/pdf,.docx,.xlsx'"
         :show-file-list="false"
         :action="'http://localhost:3000/upload'"

src/views/Tracking/src/components/TrackingTable/src/TrackingTable.vue

@@ -72,6 +72,7 @@ const getTableColumns = async (isInit: boolean) => {
     if (res.code === 200) {
       trackingTable.value.columns = [
         { type: 'checkbox', width: 50, fixed: 'left' },
+        { field: '__serial_no', title: 'serial_no', width: 300, fixed: 'left' },
         ...handleColumns(res.data.TrackingTableColumns)
       ]
       tableOriginColumnsField.value = res.data.TrackingTableColumns
@@ -266,7 +267,7 @@ const customizeColumns = async () => {
 const handleCellDblclick = ({ row }: any) => {
   router.push({
     path: '/tracking/detail',
-    query: { a: row.__serial_no, _schemas: row.__schemas }
+    query: { a: row.__serial_no, _schemas: row._schemas }
   })
 }
 // 点击link字段是时
@@ -274,12 +275,12 @@ const handleLinkClick = (row: any, column: any) => {
   if (column.field === 'booking_no') {
     router.push({
       path: '/booking/detail',
-      query: { a: row.__serial_no, _schemas: row.__schemas }
+      query: { a: row.__serial_no, _schemas: row._schemas }
     })
   } else if (column.field === 'h_bol') {
     router.push({
       path: '/tracking/detail',
-      query: { a: row.__serial_no, _schemas: row.__schemas }
+      query: { a: row.__serial_no, _schemas: row._schemas }
     })
   }
 }