feat: 给详情页顶部时间添加时区的格式化

src/components/ContainerStatus/src/ContainerStatus.vue

@@ -26,8 +26,16 @@ watch(
   }
 )
 
-const formatDate = (date: string) => {
-  return date ? dayjs(date).format('MMM-DD-YYYY HH:mm [(GMT]Z[)]') : '--'
+const formatTimezone = (tiem: string, timezone: string) => {
+  if (!tiem) return '--'
+  const formattedTime = dayjs(tiem).format('MMM-DD-YYYY hh:mm A')
+  let gmtOffset = ''
+  if (timezone && timezone.length > 3) {
+    const timeZoneOffset = dayjs().tz(timezone).format('Z')
+    // 替换 "+07:00" 为 "GMT+7"
+    gmtOffset = `(GMT${timeZoneOffset.slice(0, 3)})`
+  }
+  return `${formattedTime} ${gmtOffset}`
 }
 </script>
 
@@ -51,7 +59,7 @@ const formatDate = (date: string) => {
             <div class="info">
               <div class="left-info">
                 <div class="title">{{ item.title }}</div>
-                <div class="date">{{ formatDate(item.date) }}</div>
+                <div class="date">{{ formatTimezone(item.date, item.timezone) }}</div>
               </div>
               <div class="right-country">{{ item.country }}</div>
             </div>

src/stores/modules/headerSearch.ts

@@ -3,15 +3,13 @@ import { defineStore } from 'pinia'
 interface HeaderSearch {
   searchValue: string
   searchResult?: string
-  isChangeByLogin: boolean
   trackingData?: any
 }
 export const useHeaderSearch = defineStore('headerSearch', {
   state: (): HeaderSearch => ({
     searchValue: JSON.parse(localStorage.getItem('searchData'))?.searchValue || '',
     searchResult: JSON.parse(localStorage.getItem('searchData'))?.searchResult || '',
-    trackingData: JSON.parse(localStorage.getItem('searchData'))?.searchResult || {},
-    isChangeByLogin: Boolean(localStorage.getItem('isChangeByLogin')) || false
+    trackingData: JSON.parse(localStorage.getItem('searchData'))?.searchResult || {}
   }),
   getters: {},
   actions: {
@@ -21,19 +19,12 @@ export const useHeaderSearch = defineStore('headerSearch', {
       this.searchResult = searchData?.searchResult
       this.trackingData = searchData?.trackingData
     },
-    setChangeByLogin(isChangeByLogin: boolean) {
-      localStorage.setItem('isChangeByLogin', JSON.stringify(isChangeByLogin))
-      this.isChangeByLogin = isChangeByLogin
-    },
+
     clearSearchData() {
       localStorage.removeItem('searchData')
       this.searchValue = ''
       this.searchResult = ''
       this.trackingData = ''
-    },
-    clearChangeByLogin() {
-      localStorage.removeItem('isChangeByLogin')
-      this.isChangeByLogin = false
     }
   }
 })

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

@@ -90,16 +90,16 @@ const getData = () => {
 }
 getData()
 
-const formatTime = (time: string) => {
-  return time ? dayjs(time).format('MMM-DD-YYYY hh:mm A') : '--'
-}
 const formatTimezone = (tiem: string, timezone: string) => {
   if (!tiem) return '--'
   const formattedTime = dayjs(tiem).format('MMM-DD-YYYY hh:mm A')
-  const timeZoneOffset = dayjs().tz(timezone).format('Z')
-  // 替换 "+07:00" 为 "GMT+7"
-  const gmtOffset = `GMT${timeZoneOffset.slice(0, 3)}`
-  return `${formattedTime} (${gmtOffset})`
+  let gmtOffset = ''
+  if (timezone && timezone.length > 3) {
+    const timeZoneOffset = dayjs().tz(timezone).format('Z')
+    // 替换 "+07:00" 为 "GMT+7"
+    gmtOffset = `(GMT${timeZoneOffset.slice(0, 3)})`
+  }
+  return `${formattedTime} ${gmtOffset}`
 }
 
 const originRef = ref()
@@ -161,19 +161,28 @@ const { isOverflow: isDestinationOverflow } = useOverflow(destinationRef, allDat
           <div class="title">ETD/ATD</div>
           <div class="content">
             <span
-              >{{ formatTime(allData?.transportInfo?.etd) }}
+              >{{
+                formatTimezone(allData?.transportInfo?.etd, allData?.transportInfo?.etd_timezone)
+              }}
               /
             </span>
             <span style="color: var(--color-neutral-1)">{{
-              formatTime(allData?.transportInfo?.atd)
+              formatTimezone(allData?.transportInfo?.atd, allData?.transportInfo?.atd_timezone)
             }}</span>
           </div>
         </div>
         <div class="item">
           <div class="title">ETA/ATA</div>
           <div class="content">
-            <span>{{ formatTime(allData?.transportInfo?.eta) }} / </span>
-            <span>{{ formatTime(allData?.transportInfo?.ata) }}</span>
+            <span
+              >{{
+                formatTimezone(allData?.transportInfo?.eta, allData?.transportInfo?.eta_timezone)
+              }}
+              /
+            </span>
+            <span>{{
+              formatTimezone(allData?.transportInfo?.ata, allData?.transportInfo?.ata_timezone)
+            }}</span>
           </div>
         </div>
       </div>

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

@@ -259,7 +259,11 @@ const handleDownload = () => {
       curSelectedColumns.push(item.title)
     }
   })
-  downloadDialogRef.value.openDialog(props.tagsData, curSelectedColumns)
+  downloadDialogRef.value.openDialog(
+    props.tagsData,
+    curSelectedColumns,
+    selectedNumber.value || pageInfo.value.total
+  )
 }
 
 const exportLoading = ref(false)

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

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 const dialogVisible = ref(false)
 
-const openDialog = (tagsData: string[], selectedColumns: string[]) => {
+const openDialog = (tagsData: string[], selectedColumns: string[], slectedDataNumber: number) => {
   listData.value = tagsData
+  selectedDataNumber.value = slectedDataNumber
   columns.value = selectedColumns
   dialogVisible.value = true
 }
@@ -10,7 +11,7 @@ const openDialog = (tagsData: string[], selectedColumns: string[]) => {
 const isShowSelectColumn = ref(false)
 
 const downloadFilter = ref(1)
-
+const selectedDataNumber = ref(0)
 const listData = ref()
 
 const columns = ref()
@@ -38,7 +39,7 @@ defineExpose({
         <div class="select-data">
           <div style="display: inline-block">
             Select data on your booking list：<span style="color: var(--color-theme)">{{
-              listData.length || 0
+              selectedDataNumber
             }}</span>
           </div>
         </div>

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

@@ -68,34 +68,19 @@ const handleSearch = () => {
           } else {
             isJumpPageBySearch.value = true
           }
-          if (searchData.length === 1) {
-            router.push({
-              name: 'Tracking Detail',
-              query: {
-                a: res.data.searchData[0].__serial_no,
-                _schemas: res.data.searchData[0].__schemas
-              }
-            })
-          } else if (searchData.length !== 1) {
-            headerSearch.setChangeByLogin(true)
-            headerSearch.setSearchData({
-              searchValue: searchValue.value,
-              searchResult: '',
-              trackingData: res.data
-            })
-            // localStorage.setItem('TrackingData', JSON.stringify(res.data))
-            router.push({
-              name: 'Tracking'
-            })
-          }
+          headerSearch.setSearchData({
+            searchValue: searchValue.value,
+            searchResult: '',
+            trackingData: res.data
+          })
+          router.push({
+            name: 'Tracking'
+          })
         }
       })
   }
 }
 onBeforeRouteUpdate((to, from, next) => {
-  // if (to.name === 'Tracking') {
-  //   headerSearch.setChangeByLogin(false)
-  // }
   if (isJumpPageBySearch.value) {
     isJumpPageBySearch.value = false
   } else {

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

@@ -68,6 +68,18 @@ const formatTime = (time: string) => {
   return time ? dayjs(time).format('MMM-DD-YYYY hh:mm A') : '--'
 }
 
+const formatTimezone = (tiem: string, timezone: string) => {
+  if (!tiem) return '--'
+  const formattedTime = dayjs(tiem).format('MMM-DD-YYYY hh:mm A')
+  let gmtOffset = ''
+  if (timezone && timezone.length > 3) {
+    const timeZoneOffset = dayjs().tz(timezone).format('Z')
+    // 替换 "+07:00" 为 "GMT+7"
+    gmtOffset = `(GMT${timeZoneOffset.slice(0, 3)})`
+  }
+  return `${formattedTime} ${gmtOffset}`
+}
+
 const originRef = ref()
 const destinationRef = ref()
 const { isOverflow: isOriginOverflow } = useOverflow(originRef, allData)
@@ -124,17 +136,29 @@ const { isOverflow: isDestinationOverflow } = useOverflow(destinationRef, allDat
         <div class="item">
           <div class="title">ETD/ATD</div>
           <div class="content">
-            <span>{{ formatTime(allData?.transportInfo?.etd) }} / </span>
+            <span
+              >{{
+                formatTimezone(allData?.transportInfo?.etd, allData?.transportInfo?.etd_timezone)
+              }}
+              /
+            </span>
             <span style="color: var(--color-neutral-1)">{{
-              formatTime(allData?.transportInfo?.atd)
+              formatTimezone(allData?.transportInfo?.atd, allData?.transportInfo?.atd_timezone)
             }}</span>
           </div>
         </div>
         <div class="item">
           <div class="title">ETA/ATA</div>
           <div class="content">
-            <span>{{ formatTime(allData?.transportInfo?.eta) }} / </span>
-            <span>{{ formatTime(allData?.transportInfo?.ata) }}</span>
+            <span
+              >{{
+                formatTimezone(allData?.transportInfo?.eta, allData?.transportInfo?.eta_timezone)
+              }}
+              /
+            </span>
+            <span>{{
+              formatTimezone(allData?.transportInfo?.ata, allData?.transportInfo?.ata_timezone)
+            }}</span>
           </div>
         </div>
       </div>

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

@@ -105,8 +105,16 @@ const getData = () => {
 }
 getData()
 
-const formatTime = (time: string) => {
-  return time ? dayjs(time).format('MMM-DD-YYYY hh:mm A') : '--'
+const formatTimezone = (tiem: string, timezone: string) => {
+  if (!tiem) return '--'
+  const formattedTime = dayjs(tiem).format('MMM-DD-YYYY hh:mm A')
+  let gmtOffset = ''
+  if (timezone && timezone.length > 3) {
+    const timeZoneOffset = dayjs().tz(timezone).format('Z')
+    // 替换 "+07:00" 为 "GMT+7"
+    gmtOffset = `(GMT${timeZoneOffset.slice(0, 3)})`
+  }
+  return `${formattedTime} ${gmtOffset}`
 }
 
 const originRef = ref()
@@ -181,17 +189,29 @@ const { isOverflow: isDestinationOverflow } = useOverflow(destinationRef, allDat
         <div class="item">
           <div class="title">ETD/ATD</div>
           <div class="content">
-            <span>{{ formatTime(allData?.transportInfo?.etd) }} / </span>
+            <span
+              >{{
+                formatTimezone(allData?.transportInfo?.etd, allData?.transportInfo?.etd_timezone)
+              }}
+              /
+            </span>
             <span style="color: var(--color-neutral-1)">{{
-              formatTime(allData?.transportInfo?.atd)
+              formatTimezone(allData?.transportInfo?.atd, allData?.transportInfo?.atd_timezone)
             }}</span>
           </div>
         </div>
         <div class="item">
           <div class="title">ETA/ATA</div>
           <div class="content">
-            <span>{{ formatTime(allData?.transportInfo?.eta) }} / </span>
-            <span>{{ formatTime(allData?.transportInfo?.ata) }}</span>
+            <span
+              >{{
+                formatTimezone(allData?.transportInfo?.eta, allData?.transportInfo?.eta_timezone)
+              }}
+              /
+            </span>
+            <span>{{
+              formatTimezone(allData?.transportInfo?.ata, allData?.transportInfo?.ata_timezone)
+            }}</span>
           </div>
         </div>
       </div>

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

@@ -49,10 +49,13 @@ const handleColumns = (columns: any) => {
         formatter: ({ row, cellValue }: any) => {
           if (!cellValue) return '--'
           const formattedTime = dayjs(cellValue).format('MMM-DD-YYYY hh:mm A')
-          const timeZoneOffset = dayjs().tz(row.timezone).format('Z')
-          // 替换 "+07:00" 为 "GMT+7"
-          const gmtOffset = `GMT${timeZoneOffset.slice(0, 3)}`
-          return `${formattedTime} (${gmtOffset})`
+          let gmtOffset = ''
+          if (row.timezone && row.timezone.length > 3) {
+            const timeZoneOffset = dayjs().tz(row.timezone).format('Z')
+            // 替换 "+07:00" 为 "GMT+7"
+            gmtOffset = `(GMT${timeZoneOffset.slice(0, 3)})`
+          }
+          return `${formattedTime} ${gmtOffset}`
         }
       }
     }

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

@@ -370,7 +370,11 @@ const handleDownload = () => {
       curSelectedColumns.push(item.title)
     }
   })
-  downloadDialogRef.value.openDialog(props.tagsData, curSelectedColumns)
+  downloadDialogRef.value.openDialog(
+    props.tagsData,
+    curSelectedColumns,
+    selectedNumber.value || pageInfo.value.total
+  )
 }
 
 const exportLoading = ref(false)

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

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 const dialogVisible = ref(false)
 
-const openDialog = (tagsData: string[], selectedColumns: string[]) => {
+const openDialog = (tagsData: string[], selectedColumns: string[], slectedDataNumber: number) => {
   listData.value = tagsData
+  selectedDataNumber.value = slectedDataNumber
   columns.value = selectedColumns
   dialogVisible.value = true
 }
@@ -10,6 +11,7 @@ const openDialog = (tagsData: string[], selectedColumns: string[]) => {
 const isShowSelectColumn = ref(false)
 
 const downloadFilter = ref(1)
+const selectedDataNumber = ref(0)
 
 const listData = ref()
 
@@ -37,7 +39,7 @@ defineExpose({
         <div class="select-data">
           <div style="display: inline-block">
             Select data on your shipment list：<span style="color: var(--color-theme)">{{
-              listData.length || 0
+              selectedDataNumber
             }}</span>
           </div>
         </div>