feat: 修改New Online 1.0 UAT第二天bug

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

@@ -217,7 +217,7 @@ const formatTime = (time: string) => {
   border-right: 1px solid var(--color-border);
 }
 .booking-detail {
-  padding: 0 16px 16px;
+  padding-bottom: 16px;
   & > .header {
     background: linear-gradient(
       251deg,
@@ -233,7 +233,7 @@ const formatTime = (time: string) => {
       display: flex;
       align-items: center;
       height: 64px;
-      padding: 0 16px;
+      padding-left: 22px;
       border-bottom: 1px solid var(--color-border);
       .no {
         margin-left: 6px;
@@ -245,6 +245,7 @@ const formatTime = (time: string) => {
     .detail-info {
       display: flex;
       height: 96px;
+      margin: 0 8px;
       // border-bottom: 1px solid var(--color-border);
       & > .item {
         flex: 1;
@@ -330,8 +331,7 @@ const formatTime = (time: string) => {
   border-radius: 12px;
 }
 .info-content {
-  margin-top: -1px;
-  margin-bottom: 8px;
+  margin: -1px 24px 8px;
 }
 
 :deep(.data-item) {

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

@@ -320,15 +320,26 @@ defineExpose({
           {{ item.content }}
         </div>
         <template v-else>
-          <div
-            class="content ref-no-content"
-            v-for="noItem in item.content"
-            :key="noItem.label"
-            @mouseenter="isHoverRef = noItem.label"
-            @mouseleave="isHoverRef = ''"
-          >
-            <span>{{ noItem.label }}: {{ noItem.value }}</span>
-          </div>
+          <template v-if="item.content?.length > 0">
+            <div
+              class="content ref-no-content"
+              v-for="noItem in item.content"
+              :key="noItem.label"
+              @mouseenter="isHoverRef = noItem.label"
+              @mouseleave="isHoverRef = ''"
+            >
+              <span>{{ noItem.label }}: {{ noItem.value }}</span>
+            </div>
+          </template>
+          <template v-else>
+            <div
+              class="content"
+              :class="{ link: item.type === 'link' }"
+              @click="handLink(item.content)"
+            >
+              --
+            </div>
+          </template>
         </template>
       </div>
 
@@ -652,7 +663,7 @@ defineExpose({
     width: 16px;
   }
   .font_family {
-    font-size: 10px !important;
+    font-size: 12px !important;
     color: var(--color-neutral-1) !important;
   }
 }

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

@@ -233,6 +233,7 @@ const sendEmail = () => {
 .email-view {
   display: flex;
   flex-direction: column;
+  margin: 0 24px;
   padding: 16px;
   border-radius: 12px;
   border-bottom: 1px solid var(--color-border);

src/views/Dashboard/src/components/TopMap.vue

@@ -47,7 +47,7 @@ onMounted(() => {
   <div id="map" style="width: 100%; height: 272px"></div>
 </template>
 
-<style lang="scss" >
+<style lang="scss">
 @import 'leaflet/dist/leaflet.css';
 .leaflet-popup-content-wrapper {
   width: 58px !important;
@@ -92,4 +92,4 @@ onMounted(() => {
     }
   }
 }
-</style>
+</style>

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

@@ -6,12 +6,15 @@ import LogoutDialog from './components/LogoutDialog.vue'
 import { useRouter } from 'vue-router'
 import { useUserStore } from '@/stores/modules/user'
 import { useHeaderSearch } from '@/stores/modules/headerSearch'
+import { onBeforeRouteUpdate } from 'vue-router'
+import { head } from 'lodash'
 
 const userStore = useUserStore()
 const router = useRouter()
 const headerSearch = useHeaderSearch()
 
 const searchValue = ref('')
+const isJumpPageBySearch = ref(false)
 const handleSearch = () => {
   if (!searchValue.value) {
     return
@@ -22,6 +25,7 @@ const handleSearch = () => {
     $api.getPublicTrackingDetail({ reference_number: searchValue.value }).then((res) => {
       if (res.code === 200) {
         const { data } = res
+        isJumpPageBySearch.value = true
         if (data.msg === 'No matches') {
           headerSearch.setSearchData({
             searchValue: searchValue.value,
@@ -53,6 +57,7 @@ const handleSearch = () => {
       .then((res) => {
         if (res.code === 200) {
           const { searchData } = res.data
+          isJumpPageBySearch.value = true
           if (searchData.length === 1) {
             router.push({
               name: 'Tracking Detail',
@@ -63,6 +68,10 @@ const handleSearch = () => {
             })
           } else if (searchData.length !== 1) {
             headerSearch.setChangeByLogin(true)
+            headerSearch.setSearchData({
+              searchValue: searchValue.value,
+              searchResult: ''
+            })
             localStorage.setItem('TrackingData', JSON.stringify(res.data))
             router.push({
               name: 'Tracking'
@@ -72,6 +81,19 @@ const handleSearch = () => {
       })
   }
 }
+onBeforeRouteUpdate((to, from, next) => {
+  console.log(to, from)
+  // if (to.name === 'Tracking') {
+  //   headerSearch.setChangeByLogin(false)
+  // }
+  console.log(isJumpPageBySearch.value)
+  if (isJumpPageBySearch.value) {
+    isJumpPageBySearch.value = false
+  } else {
+    searchValue.value = ''
+  }
+  next()
+})
 
 const downloadKLNPortalRef = ref()
 const handleDownload = () => {

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

@@ -113,7 +113,6 @@ const changeRouter = (path: any) => {
   if (path === '/tracking' && !localStorage.getItem('username')) {
     toPath = '/public-tracking'
   }
-
   // 如果允许跳转，执行跳转
   if (isAllowJump(toPath)) {
     router.push(toPath)

src/views/Tracking/src/TrackingView.vue

@@ -7,6 +7,9 @@ import DateRange from '@/components/DateRange'
 import MoreFilters from '@/components/MoreFilters'
 import { ref, reactive, onMounted } from 'vue'
 import { useCalculatingHeight } from '@/hooks/calculatingHeight'
+import { useHeaderSearch } from '@/stores/modules/headerSearch'
+
+const headerSearch = useHeaderSearch()
 
 const filterRef: Ref<HTMLElement | null> = ref(null)
 
@@ -235,6 +238,24 @@ const clearMoreFiltersTags = () => {
   filterData.morefiltersData = []
 }
 
+// 从 store 中获取数据并绑定到输入框
+const headerSearchdData = computed(() => headerSearch.searchValue)
+
+// 监听 sharedData 的变化并更新 inputValue
+headerSearchdData.value && (TrackingSearch.value = headerSearchdData.value)
+headerSearch.clearSearchData()
+// 当 sharedData 发生变化时，更新 inputValue
+watch(
+  () => headerSearchdData.value,
+  (newData) => {
+    if (newData) {
+      console.log(headerSearchdData.value)
+      TrackingSearch.value = headerSearchdData.value
+      headerSearch.clearSearchData()
+    }
+  }
+)
+
 const TrackingTable_ref = ref()
 const TransportListItem = ref()
 interface ListItem {
@@ -246,20 +267,27 @@ interface ListItem {
 const TagsList = ref<ListItem[]>([])
 const filterTag = ref(['All'])
 const Gettrackingdata = () => {
-  $api
-    .getTrackingTableData({
-      cp: TrackingTable_ref.value.pageInfo.pageNo,
-      ps: TrackingTable_ref.value.pageInfo.pageSize,
-      rc: -1,
-      other_filed: '',
-      ...searchTableQeury
-    })
-    .then((res: any) => {
-      if (res.code === 200) {
-        TransportListItem.value = res.data.TransportList
-        TagsList.value = res.data.tagsList
-      }
-    })
+  const trackingData = JSON.parse(localStorage.getItem('TrackingData'))
+  if (trackingData) {
+    TransportListItem.value = trackingData.TransportList
+    TagsList.value = trackingData.tagsList
+    TrackingSearch.value = trackingData.searchData
+  } else {
+    $api
+      .getTrackingTableData({
+        cp: TrackingTable_ref.value.pageInfo.pageNo,
+        ps: TrackingTable_ref.value.pageInfo.pageSize,
+        rc: -1,
+        other_filed: '',
+        ...searchTableQeury
+      })
+      .then((res: any) => {
+        if (res.code === 200) {
+          TransportListItem.value = res.data.TransportList
+          TagsList.value = res.data.tagsList
+        }
+      })
+  }
 }
 onMounted(() => {
   if (

src/views/Tracking/src/components/PublicTracking/src/PublicTrackingSearch.vue

@@ -18,12 +18,12 @@ headerSearch.clearSearchData()
 // 当 sharedData 发生变化时，更新 inputValue
 watch(
   () => headerSearchdData.value,
-  () => {
-    // if (newData) {
-    inputVModel.value = headerSearchdData.value
-    searchResult.value = headerSearch.searchResult
-    headerSearch.clearSearchData()
-    // }
+  (newData) => {
+    if (newData) {
+      inputVModel.value = headerSearchdData.value
+      searchResult.value = headerSearch.searchResult
+      headerSearch.clearSearchData()
+    }
   }
 )
 
@@ -61,6 +61,7 @@ const handleSearchNo = () => {
       <el-input
         class="public-tracking-search-input"
         v-model="inputVModel"
+        @focus="searchResult = ''"
         placeholder="Search a reference number to see shipment details"
       >
         <template #append>

src/views/Tracking/src/components/PublicTracking/src/components/BasicInformation.vue

@@ -410,7 +410,7 @@ const handleCopy = (data: any) => {
     width: 16px;
   }
   .font_family {
-    font-size: 10px !important;
+    font-size: 12px !important;
     color: var(--color-neutral-1) !important;
   }
 }

src/views/Tracking/src/components/PublicTracking/src/components/PublicTrackingDetail.vue

@@ -149,7 +149,7 @@ const formatTime = (time: string) => {
   border-right: 1px solid var(--color-border);
 }
 .tracking-detail {
-  padding: 0 16px 16px;
+  padding-bottom: 16px;
   & > .header {
     background: linear-gradient(
       251deg,
@@ -165,9 +165,9 @@ const formatTime = (time: string) => {
       display: flex;
       align-items: center;
       height: 64px;
-      padding: 0 16px;
+      padding-left: 14px;
       border-bottom: 1px solid var(--color-border);
-
+      margin: 0 8px;
       .no {
         margin-left: 6px;
         margin-right: 8px;
@@ -178,7 +178,7 @@ const formatTime = (time: string) => {
     .detail-info {
       display: flex;
       height: 96px;
-      // border-bottom: 1px solid var(--color-border);
+      margin: 0 8px;
       & > .item {
         flex: 1;
         display: flex;
@@ -244,8 +244,7 @@ const formatTime = (time: string) => {
 }
 
 .info-content {
-  margin-top: -1px;
-  margin-bottom: 8px;
+  margin: -1px 24px 8px;
 }
 
 :deep(.data-item) {

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

@@ -282,7 +282,7 @@ const formatTime = (time: string) => {
   border-right: 1px solid var(--color-border);
 }
 .tracking-detail {
-  padding: 0 16px 16px;
+  padding-bottom: 16px;
   & > .header {
     background: linear-gradient(
       251deg,
@@ -297,22 +297,19 @@ const formatTime = (time: string) => {
       position: relative;
       display: flex;
       align-items: center;
-      padding: 0 16px;
+      padding-left: 22px;
       height: 64px;
       border-bottom: 1px solid var(--color-border);
 
       .right-operation {
         position: absolute;
-        right: 16px;
+        right: 24px;
         top: 50%;
         transform: translateY(-50%);
         display: flex;
         align-items: center;
-        gap: 16px;
-        .operation {
-          display: flex;
-          align-items: center;
-          gap: 8px;
+        .el-button {
+          height: 40px;
         }
       }
       .no {
@@ -325,7 +322,7 @@ const formatTime = (time: string) => {
     .detail-info {
       display: flex;
       height: 96px;
-      // border-bottom: 1px solid var(--color-border);
+      margin: 0 8px;
       & > .item {
         flex: 1;
         display: flex;
@@ -421,8 +418,7 @@ const formatTime = (time: string) => {
   border-radius: 12px;
 }
 .info-content {
-  margin-top: -1px;
-  margin-bottom: 8px;
+  margin: -1px 24px 8px;
 }
 
 :deep(.data-item) {

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

@@ -173,9 +173,9 @@ const convertData = (data: any) => {
       },
       {
         title: 'Destination Agent',
-        company: data.businessPartners.destination.company,
-        address: data.businessPartners.destination.address,
-        phone: data.businessPartners.destination.phone
+        company: data.businessPartners.destination.company || '--',
+        address: data.businessPartners.destination.address || '--',
+        phone: data.businessPartners.destination.phone || '--'
       }
     ],
     packing: [
@@ -317,15 +317,26 @@ defineExpose({
           {{ item.content }}
         </div>
         <template v-else>
-          <div
-            class="content ref-no-content"
-            v-for="noItem in item.content"
-            :key="noItem.label"
-            @mouseenter="isHoverRef = noItem.label"
-            @mouseleave="isHoverRef = ''"
-          >
-            <span>{{ noItem.label }}: {{ noItem.value }}</span>
-          </div>
+          <template v-if="item.content?.length > 0">
+            <div
+              class="content ref-no-content"
+              v-for="noItem in item.content"
+              :key="noItem.label"
+              @mouseenter="isHoverRef = noItem.label"
+              @mouseleave="isHoverRef = ''"
+            >
+              <span>{{ noItem.label }}: {{ noItem.value }}</span>
+            </div>
+          </template>
+          <template v-else>
+            <div
+              class="content"
+              :class="{ link: item.type === 'link' }"
+              @click="handLink(item.content)"
+            >
+              --
+            </div>
+          </template>
         </template>
       </div>
 
@@ -647,7 +658,7 @@ defineExpose({
     width: 16px;
   }
   .font_family {
-    font-size: 10px !important;
+    font-size: 12px !important;
     color: var(--color-neutral-1) !important;
   }
 }

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

@@ -1,5 +1,5 @@
 <template>
-  <div id="map" style="width: 100%; height: 520px"></div>
+  <div id="map" style="width: 100%; height: 520px" class="tracking-map"></div>
 </template>
 <script setup lang="ts">
 import L from 'leaflet'
@@ -137,8 +137,36 @@ const getMarker = () => {
     })
     .then((res) => {
       if (res.code === 200) {
-        const { data } = res
-
+        // const { data } = res
+        const data = [
+          {
+            lng: '117.70000000',
+            lat: '38.98333333',
+            label: 'Origin',
+            infor: 'XINGANG, CHINA',
+            sort: '1',
+            stime: '',
+            ptype: 'pol'
+          },
+          {
+            lng: '-76.61666667',
+            lat: '39.28333333',
+            label: 'Destination',
+            infor: 'BALTIMORE, MD',
+            sort: '2',
+            stime: '',
+            ptype: 'pod'
+          },
+          {
+            lng: '129.05000000',
+            lat: '35.13333333',
+            label: 'Transfer',
+            infor: 'BUSAN,KOREA',
+            sort: '3',
+            stime: '',
+            ptype: 'poe'
+          }
+        ]
         data &&
           data.forEach((item) => {
             const iconColorList = {
@@ -180,31 +208,46 @@ onMounted(() => {
 
 <style lang="scss">
 @import 'leaflet/dist/leaflet.css';
-.leaflet-popup-content-wrapper {
-  border-radius: 6px;
-}
-.leaflet-popup-content {
-  padding: 4px;
-  padding-right: 8px;
-  margin: 0;
-  .popup-content {
-    p {
-      margin: 0;
-      white-space: nowrap;
-      span {
-        margin-left: -2px;
+.tracking-map {
+  .leaflet-popup-content-wrapper {
+    border-radius: 6px;
+  }
+  .leaflet-popup-content {
+    margin: 0;
+    padding: 4px;
+    .popup-content {
+      p {
+        height: 15px;
+        margin: 0;
+        white-space: nowrap;
+        span {
+          margin-left: -2px;
+          font-size: 12px;
+          font-weight: 700;
+        }
+      }
+      .label {
+        margin-bottom: 4px;
         font-size: 12px;
-        font-weight: 700;
+        color: var(--color-neutral-2);
       }
     }
-    .label {
-      margin-bottom: 4px;
-      font-size: 12px;
-      color: var(--color-neutral-2);
+  }
+
+  /* 隐藏默认的弹出窗口箭头 */
+  .leaflet-popup-tip {
+    display: none;
+  }
+  .transport-map {
+    .leaflet-touch {
+      .leaflet-bar {
+        border: 0;
+        border-radius: 4px;
+        overflow: hidden;
+      }
     }
   }
 }
-
 /* 自定义重置缩放按钮控件样式 */
 .reset-zoom-control {
   margin-top: 10px; /* 增加上边距，使按钮与默认缩放按钮之间有间距 */
@@ -220,18 +263,4 @@ onMounted(() => {
   cursor: pointer;
   padding: 6px;
 }
-
-/* 隐藏默认的弹出窗口箭头 */
-.leaflet-popup-tip {
-  display: none;
-}
-.transport-map {
-  .leaflet-touch {
-    .leaflet-bar {
-      border: 0;
-      border-radius: 4px;
-      overflow: hidden;
-    }
-  }
-}
 </style>

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

@@ -45,7 +45,7 @@ const handleTabClick = (name: string) => {
   height: 484px;
   background-color: #fff;
   border: 1px solid #eaebed;
-  border-radius: 3px;
+  border-radius: 12px;
   .header {
     display: flex;
     height: 48px;

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

@@ -70,10 +70,19 @@ const getTableColumns = async (isInit: boolean) => {
   tableLoading.value = true
   await $api.getTrackingTableColumns().then((res: any) => {
     if (res.code === 200) {
-      trackingTable.value.columns = trackingTable.value.columns.concat([
+      const index = trackingTable.value.columns.findIndex((item: any) => item.title === 'Action')
+      trackingTable.value.columns = [
         { type: 'checkbox', width: 50, fixed: 'left' },
         ...handleColumns(res.data.TrackingTableColumns)
-      ])
+      ]
+      if (index !== -1) {
+        trackingTable.value.columns.push({
+          title: 'Action',
+          fixed: 'right',
+          width: 80,
+          slots: { default: 'action' }
+        })
+      }
       tableOriginColumnsField.value = res.data.TrackingTableColumns
     }
   })

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

@@ -59,30 +59,7 @@ const tableData = ref<VxeGridProps<any>>({
   border: true,
   round: true,
   columns: [],
-  data: [
-    {
-      container_no: '123',
-      carrier_booking_no: '123',
-      size: '123',
-      vgm_weight: '123',
-      vgm_kg_lg: '12311111111111111111111111111',
-      vgm_time: '',
-      vgm_method: '123',
-      cargo_weight_kg: '123',
-      cargo_weight_lb: '123'
-    },
-    {
-      container_no: '123',
-      carrier_booking_no: '123',
-      size: '123',
-      vgm_weight: '123',
-      vgm_kg_lg: '123',
-      vgm_time: '',
-      vgm_method: '123',
-      cargo_weight_kg: '123',
-      cargo_weight_lb: '123'
-    }
-  ],
+  data: [],
   scrollY: { enabled: true, oSize: 20, gt: 30 },
   stripe: true,
   emptyText: ' ',
@@ -176,35 +153,35 @@ const convertData = (data: any) => {
     baseInfo: [
       {
         label: 'HBL No.',
-        value: data?.['HBL No.']
+        value: data?.['HBL No.'] || '--'
       },
       {
         label: 'Carrier Booking No.',
-        value: data?.['Carrier Booking No.']
+        value: data?.['Carrier Booking No.'] || '--'
       },
       {
         label: 'Vessel',
-        value: data.Vessel
+        value: data.Vessel || '--'
       },
       {
         label: 'Voyage',
-        value: data.Voyage
+        value: data.Voyage || '--'
       },
       {
         label: 'ETD',
-        value: data.ETD
+        value: formatTime(data.ETD)
       },
       {
         label: 'ETA ',
-        value: data.ETA
+        value: formatTime(data.ETA)
       },
       {
         label: 'Last Updated User',
-        value: data?.['Last updated User']
+        value: data?.['Last updated User'] || '--'
       },
       {
         label: 'Last Updated Time',
-        value: data?.['Last updated Time']
+        value: formatTime(data?.['Last updated Time'])
       }
     ],
     formData: {
@@ -301,6 +278,10 @@ const handleSave = () => {
       }
     })
 }
+
+const formatTime = (time: string) => {
+  return time ? dayjs(time).format('MMM/DD/YYYY') : '--'
+}
 </script>
 
 <template>