feat: 修改时区格式化，封装时区格式化函数

src/components/ContainerStatus/src/ContainerStatus.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import dayjs from 'dayjs'
 import emptyImage from './image/no-data.png'
+import { formatTimezone } from '@/utils/tools'
 
 const props = defineProps({
   data: Object
@@ -26,25 +26,6 @@ watch(
     deep: true
   }
 )
-
-const formatTimezone = (time: string, timezone: string) => {
-  if (!time) return '--'
-  let formattedTime = ''
-  // 有时分秒才有添加时区的必要
-  if (time.length > 12) {
-    formattedTime = dayjs(time).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}`
-  } else {
-    formattedTime = dayjs(time).format('MMM-DD-YYYY')
-    return formattedTime
-  }
-}
 </script>
 
 <template>

src/utils/tools.ts

@@ -0,0 +1,17 @@
+import moment from 'moment-timezone'
+
+export const formatTimezone = (time: string, timezone: string) => {
+  if (!time) return '--'
+  let formattedTime = ''
+  if (time.length > 12) {
+    formattedTime = moment(time).format('MMM-DD-YYYY hh:mm A')
+    let gmtOffset = ''
+    const timeZoneOffset = moment().tz(timezone).format('Z')
+    // 替换 "+07:00" 为 "GMT+07"
+    gmtOffset = `(GMT${timeZoneOffset.slice(0, 3)})`
+    return `${formattedTime} ${gmtOffset}`
+  } else {
+    formattedTime = moment(time).format('MMM-DD-YYYY')
+    return formattedTime
+  }
+}

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

@@ -7,12 +7,7 @@ import { cloneDeep } from 'lodash'
 import { transportationMode } from '@/components/TransportationMode'
 import { useRoute } from 'vue-router'
 import { useOverflow } from '@/hooks/useOverflow'
-import dayjs from 'dayjs'
-import timezone from 'dayjs/plugin/timezone'
-import utc from 'dayjs/plugin/utc'
-
-dayjs.extend(utc)
-dayjs.extend(timezone)
+import { formatTimezone } from '@/utils/tools'
 
 const route = useRoute()
 
@@ -91,25 +86,6 @@ const getData = () => {
 }
 getData()
 
-const formatTimezone = (time: string, timezone: string) => {
-  if (!time) return '--'
-  let formattedTime = ''
-  // 有时分秒才有添加时区的必要
-  if (time.length > 12) {
-    formattedTime = dayjs(time).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}`
-  } else {
-    formattedTime = dayjs(time).format('MMM-DD-YYYY')
-    return formattedTime
-  }
-}
-
 const originRef = ref()
 const destinationRef = ref()
 const { isOverflow: isOriginOverflow } = useOverflow(originRef, allData)

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

@@ -1,13 +1,9 @@
 <script setup lang="ts">
-import dayjs from 'dayjs'
-import timezone from 'dayjs/plugin/timezone'
-import utc from 'dayjs/plugin/utc'
 import { type VxeGridInstance, type VxeGridProps } from 'vxe-table'
-import { autoWidth } from '@/utils/table'
+// import { autoWidth } from '@/utils/table'
 import { useRowClickStyle } from '@/hooks/rowClickStyle'
+import { formatTimezone } from '@/utils/tools'
 
-dayjs.extend(utc)
-dayjs.extend(timezone)
 const props = defineProps({
   height: {
     type: Number,
@@ -45,24 +41,7 @@ const handleColumns = (columns: any) => {
     if (item.formatter === 'dateTime') {
       curColumn = {
         ...curColumn,
-        formatter: ({ cellValue, row }: any) => {
-          if (!cellValue) return '--'
-          let formattedTime = ''
-          // 有时分秒才有添加时区的必要
-          if (cellValue.length > 12) {
-            formattedTime = dayjs(cellValue).format('MMM-DD-YYYY hh:mm A')
-            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}`
-          } else {
-            formattedTime = dayjs(cellValue).format('MMM-DD-YYYY')
-            return formattedTime
-          }
-        }
+        formatter: ({ cellValue, row }: any) => formatTimezone(cellValue, row.timezone)
       }
     }
     return curColumn

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

@@ -3,13 +3,9 @@ import BasicInformation from './BasicInformation.vue'
 import MilestonesTable from './MilestonesTable.vue'
 import { transportationMode } from '@/components/TransportationMode'
 import { useRoute } from 'vue-router'
-import dayjs from 'dayjs'
-import timezone from 'dayjs/plugin/timezone'
-import utc from 'dayjs/plugin/utc'
 import { useOverflow } from '@/hooks/useOverflow'
+import { formatTimezone } from '@/utils/tools'
 
-dayjs.extend(utc)
-dayjs.extend(timezone)
 const route = useRoute()
 
 const allData: any = ref({
@@ -68,25 +64,6 @@ if (Object.keys(sharedData).length === 0) {
   allData.value = sharedData
 }
 
-const formatTimezone = (time: string, timezone: string) => {
-  if (!time) return '--'
-  let formattedTime = ''
-  // 有时分秒才有添加时区的必要
-  if (time.length > 12) {
-    formattedTime = dayjs(time).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}`
-  } else {
-    formattedTime = dayjs(time).format('MMM-DD-YYYY')
-    return formattedTime
-  }
-}
-
 const originRef = ref()
 const destinationRef = ref()
 const { isOverflow: isOriginOverflow } = useOverflow(originRef, allData)

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

@@ -1,7 +1,4 @@
 <script setup lang="ts">
-import dayjs from 'dayjs'
-import timezone from 'dayjs/plugin/timezone'
-import utc from 'dayjs/plugin/utc'
 import { VueDraggable } from 'vue-draggable-plus'
 import BasicInformation from './components/BasicInformation.vue'
 import ContainersView from './components/ContainersView.vue'
@@ -16,9 +13,7 @@ import { cloneDeep } from 'lodash'
 import { transportationMode } from '@/components/TransportationMode'
 import { useRoute } from 'vue-router'
 import { useOverflow } from '@/hooks/useOverflow'
-
-dayjs.extend(utc)
-dayjs.extend(timezone)
+import { formatTimezone } from '@/utils/tools'
 
 const route = useRoute()
 
@@ -110,25 +105,6 @@ const getData = () => {
 }
 getData()
 
-const formatTimezone = (time: string, timezone: string) => {
-  if (!time) return '--'
-  let formattedTime = ''
-  // 有时分秒才有添加时区的必要
-  if (time.length > 12) {
-    formattedTime = dayjs(time).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}`
-  } else {
-    formattedTime = dayjs(time).format('MMM-DD-YYYY')
-    return formattedTime
-  }
-}
-
 const originRef = ref()
 const destinationRef = ref()
 const { isOverflow: isOriginOverflow } = useOverflow(originRef, allData)

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

@@ -1,13 +1,8 @@
 <script setup lang="ts">
-import dayjs from 'dayjs'
-import timezone from 'dayjs/plugin/timezone'
-import utc from 'dayjs/plugin/utc'
 import { type VxeGridInstance, type VxeGridProps } from 'vxe-table'
-import { autoWidth } from '@/utils/table'
+// import { autoWidth } from '@/utils/table'
 import { useRowClickStyle } from '@/hooks/rowClickStyle'
-
-dayjs.extend(utc)
-dayjs.extend(timezone)
+import { formatTimezone } from '@/utils/tools'
 
 const props = defineProps({
   data: Object
@@ -45,25 +40,7 @@ const handleColumns = (columns: any) => {
     if (item.formatter === 'dateTime') {
       curColumn = {
         ...curColumn,
-        formatter: ({ row, cellValue }: any) => {
-          if (!cellValue) return '--'
-
-          let formattedTime = ''
-          // 有时分秒才有添加时区的必要
-          if (cellValue.length > 12) {
-            formattedTime = dayjs(cellValue).format('MMM-DD-YYYY hh:mm A')
-            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}`
-          } else {
-            formattedTime = dayjs(cellValue).format('MMM-DD-YYYY')
-            return formattedTime
-          }
-        }
+        formatter: ({ row, cellValue }: any) => formatTimezone(cellValue, row.timezone)
       }
     }
     return curColumn