style: 将表格获得数据后处理封装为函数

src/views/Booking/src/components/BookingDetail/src/BookingDetail.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'
@@ -10,9 +7,13 @@ 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)
+
 const route = useRoute()
 
 // 可拖拽模块的列表

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

@@ -88,8 +88,23 @@ const getTableColumns = async () => {
 const pageInfo = ref({ pageNo: 1, pageSize: 100, total: 0 })
 
 const tempSearch = ref()
-// 获取表格数据
 let filterdataobj: any = {}
+// 获得表格数据后赋值
+const assignTableData = (data: any) => {
+  bookingTable.value.data = data.searchData || []
+  pageInfo.value.total = Number(data.rc)
+  tempSearch.value = data.tmp_search
+  // 拥有所有字段的表格
+  setTimeout(() => {
+    allTable.value.columns = handleColumns(data.allColums, 'all')
+    allTable.value.data = data.searchData || []
+    // 为了让导出的表格列宽度自适应
+    nextTick(() => {
+      allTableRef.value && autoWidth(allTable.value, allTableRef.value)
+    })
+  }, 1000)
+}
+// 获取表格数据
 const getTableData = async (isPageChange?: boolean) => {
   const rc = isPageChange ? pageInfo.value.total : -1
   tableLoadingTableData.value = true
@@ -103,24 +118,15 @@ const getTableData = async (isPageChange?: boolean) => {
     })
     .then((res: any) => {
       if (res.code === 200) {
-        bookingTable.value.data = res.data.searchData || []
-        pageInfo.value.total = Number(res.data.rc)
-        tempSearch.value = res.data.tmp_search
-        // 拥有所有字段的表格
-        setTimeout(() => {
-          allTable.value.columns = handleColumns(res.data.allColums, 'all')
-          allTable.value.data = res.data.searchData || []
-          // 为了让导出的表格列宽度自适应
-          nextTick(() => {
-            allTableRef.value && autoWidth(allTable.value, allTableRef.value)
-          })
-        }, 1000)
+        assignTableData(res.data)
       }
     })
-  nextTick(() => {
-    tableRef.value && autoWidth(bookingTable.value, tableRef.value)
-    tableLoadingTableData.value = false
-  })
+    .finally(() => {
+      nextTick(() => {
+        tableRef.value && autoWidth(bookingTable.value, tableRef.value)
+        tableLoadingTableData.value = false
+      })
+    })
 }
 // 查询列表数据
 const searchTableData = (data: any) => {
@@ -136,23 +142,14 @@ const searchTableData = (data: any) => {
     })
     .then((res: any) => {
       if (res.code === 200) {
-        bookingTable.value.data = res.data.searchData || []
-        pageInfo.value.total = Number(res.data.rc)
-        tempSearch.value = res.data.tmp_search
-        // 拥有所有字段的表格
-        setTimeout(() => {
-          allTable.value.columns = handleColumns(res.data.allColums, 'all')
-          allTable.value.data = res.data.searchData || []
-          // 为了让导出的表格列宽度自适应
-          nextTick(() => {
-            allTableRef.value && autoWidth(allTable.value, allTableRef.value)
-          })
-        }, 1000)
+        assignTableData(res.data)
       }
     })
     .finally(() => {
-      tableRef.value && autoWidth(bookingTable.value, tableRef.value)
-      tableLoadingTableData.value = false
+      nextTick(() => {
+        tableRef.value && autoWidth(bookingTable.value, tableRef.value)
+        tableLoadingTableData.value = false
+      })
     })
 }
 

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

@@ -94,6 +94,7 @@ const confirmVerify = () => {
         class="public-tracking-search-input"
         v-model="inputVModel"
         @focus="searchResult = ''"
+        @keyup.enter="handleSearchNo"
         placeholder="Search a reference number to see shipment details"
       >
         <template #append>

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

@@ -76,52 +76,52 @@ const convertData = (data: any) => {
       top: [
         {
           label: 'MAWB/MBL No.',
-          content: data.basicInfo['MAWB/MBL No.']
+          content: data.basicInfo['MAWB/MBL No.'] || '--'
         },
         {
           label: 'HAWB/HBL No.',
-          content: data.basicInfo['HAWB/HBOL']
+          content: data.basicInfo['HAWB/HBOL'] || '--'
         },
         {
           label: 'Booking No.',
-          content: data.basicInfo.Carrier_Booking_No
+          content: data.basicInfo.Carrier_Booking_No || '--'
         },
         {
           label: 'PO No.',
-          content: data.basicInfo.PO_NO
+          content: data.basicInfo.PO_NO || '--'
         }
       ]
     },
     businessPartners: [
       {
         title: 'Origin Agent',
-        company: data.businessPartners.origin.company,
-        address: data.businessPartners.origin.address,
-        phone: data.businessPartners.origin.phone
+        company: data.businessPartners.origin.company || '--',
+        address: data.businessPartners.origin.address || '--',
+        phone: data.businessPartners.origin.phone || '--'
       },
       {
         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: [
       {
         label: 'Quantity / Unit',
-        content: data.packing['Quantity/Unit']
+        content: data.packing['Quantity/Unit'] || '--'
       },
       {
         label: 'G. Weight',
-        content: data.packing['G. Weight']
+        content: data.packing['G. Weight'] || '--'
       },
       {
         label: 'Ch. Weight',
-        content: data.packing['Ch. Weight']
+        content: data.packing['Ch. Weight'] || '--'
       },
       {
         label: 'Volume',
-        content: data.packing.Volume
+        content: data.packing.Volume || '--'
       }
     ]
   }

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

@@ -47,10 +47,13 @@ const handleColumns = (columns: any) => {
         formatter: ({ cellValue, row }: 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/PublicTracking/src/components/PublicTrackingDetail.vue

@@ -4,8 +4,12 @@ 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'
 
+dayjs.extend(utc)
+dayjs.extend(timezone)
 const route = useRoute()
 
 const allData: any = ref({
@@ -64,10 +68,6 @@ if (Object.keys(sharedData).length === 0) {
   allData.value = sharedData
 }
 
-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')

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

@@ -1,5 +1,7 @@
 <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'
@@ -15,6 +17,9 @@ import { transportationMode } from '@/components/TransportationMode'
 import { useRoute } from 'vue-router'
 import { useOverflow } from '@/hooks/useOverflow'
 
+dayjs.extend(utc)
+dayjs.extend(timezone)
+
 const route = useRoute()
 
 // 可拖拽模块的列表

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

@@ -64,7 +64,7 @@ const handleColumns = (columns: any, status?: string) => {
 }
 
 // 获取表格列
-const getTableColumns = async (isInit: boolean) => {
+const getTableColumns = async () => {
   tableLoadingColumn.value = true
   await $api.getTrackingTableColumns().then((res: any) => {
     if (res.code === 200) {
@@ -85,7 +85,8 @@ const getTableColumns = async (isInit: boolean) => {
     }
   })
   nextTick(() => {
-    !isInit && (tableLoadingColumn.value = false)
+    tableLoadingColumn.value = false
+    selectedNumber.value = 0
   })
 }
 
@@ -93,46 +94,50 @@ const pageInfo = ref({ pageNo: 1, pageSize: 100, total: 0 })
 const TagsList = ref()
 const tempSearch = ref('')
 
-// 获取表格数据
+// 获得表格数据后赋值
+const assignTableData = (data: any) => {
+  trackingTable.value.data = data.searchData || []
+  pageInfo.value.total = Number(data.rc)
+  TagsList.value = data.tagsList
+  tempSearch.value = data.tmp_search
+
+  if (data.canEdiVgm && trackingTable.value.columns.length > 0) {
+    const index = trackingTable.value.columns.findIndex((item: any) => item.title === 'Action')
+    if (index === -1) {
+      trackingTable.value.columns.push({
+        title: 'Action',
+        fixed: 'right',
+        width: 80,
+        slots: { default: 'action' }
+      })
+    }
+  }
+  // 拥有所有字段的表格
+  setTimeout(() => {
+    allTable.value.columns = handleColumns(data.allColums, 'all')
+    allTable.value.data = data.searchData
+    nextTick(() => {
+      allTableRef.value && autoWidth(allTable.value, allTableRef.value)
+    })
+  }, 1000)
+}
+
 let filterdataobj: any = {}
 const getSharedTableData = () => {
   const trackingData = JSON.parse(localStorage.getItem('searchData'))?.trackingData
   if (trackingData) {
-    trackingTable.value.data = trackingData.searchData || []
-    pageInfo.value.total = Number(trackingData.rc)
     pageInfo.value.pageSize = Number(trackingData.ps)
-    TagsList.value = trackingData.tagsList
-    tempSearch.value = trackingData.tmp_search
-
-    if (trackingData.canEdiVgm && trackingTable.value.columns.length > 0) {
-      const index = trackingTable.value.columns.findIndex((item: any) => item.title === 'Action')
-      if (index === -1) {
-        trackingTable.value.columns.push({
-          title: 'Action',
-          fixed: 'right',
-          width: 80,
-          slots: { default: 'action' }
-        })
-      }
-    }
+    assignTableData(trackingData)
+    selectedNumber.value = 0
     nextTick(() => {
       tableRef.value && autoWidth(trackingTable.value, tableRef.value)
     })
-
-    // 拥有所有字段的表格
-    setTimeout(() => {
-      allTable.value.columns = handleColumns(trackingData.allColums, 'all')
-
-      allTable.value.data = trackingData.searchData || []
-      nextTick(() => {
-        allTableRef.value && autoWidth(allTable.value, allTableRef.value)
-      })
-    }, 1000)
     return true
   }
   return false
 }
 
+// 获取表格数据
 const getTableData = async (isPageChange?: boolean) => {
   const rc = isPageChange ? pageInfo.value.total : -1
   tableLoadingTableData.value = true
@@ -142,35 +147,15 @@ const getTableData = async (isPageChange?: boolean) => {
     sessionStorage.getItem('clickParams') != '{}'
   ) {
     const data = JSON.parse(sessionStorage.getItem('clickParams') as string) || {}
-    trackingTable.value.data = data.searchData || []
-    pageInfo.value.total = Number(data.rc)
-    TagsList.value = data.tagsList
-
-    tempSearch.value = data.tmp_search
-
-    if (data.canEdiVgm && trackingTable.value.columns.length > 0) {
-      const index = trackingTable.value.columns.findIndex((item: any) => item.title === 'Action')
-      if (index === -1) {
-        trackingTable.value.columns.push({
-          title: 'Action',
-          fixed: 'right',
-          width: 80,
-          slots: { default: 'action' }
-        })
-      }
-    }
-
-    // 拥有所有字段的表格
-    setTimeout(() => {
-      allTable.value.columns = handleColumns(data.allColums, 'all')
-      allTable.value.data = data.searchData
-      nextTick(() => {
-        allTableRef.value && autoWidth(allTable.value, allTableRef.value)
-      })
-    }, 1000)
+    assignTableData(data)
     setTimeout(() => {
       sessionStorage.removeItem('clickParams')
     }, 5000)
+    nextTick(() => {
+      tableRef.value && autoWidth(trackingTable.value, tableRef.value)
+      tableLoadingTableData.value = false
+      selectedNumber.value = 0
+    })
   } else {
     await $api
       .getTrackingTableData({
@@ -182,39 +167,17 @@ const getTableData = async (isPageChange?: boolean) => {
       })
       .then((res: any) => {
         if (res.code === 200) {
-          trackingTable.value.data = res.data.searchData || []
-          pageInfo.value.total = Number(res.data.rc)
-          tempSearch.value = res.data.tmp_search
-
-          if (res.data.canEdiVgm && trackingTable.value.columns.length > 0) {
-            const index = trackingTable.value.columns.findIndex(
-              (item: any) => item.title === 'Action'
-            )
-            if (index === -1) {
-              trackingTable.value.columns.push({
-                title: 'Action',
-                fixed: 'right',
-                width: 80,
-                slots: { default: 'action' }
-              })
-            }
-          }
-
-          // 拥有所有字段的表格
-          setTimeout(() => {
-            allTable.value.columns = handleColumns(res.data.allColums, 'all')
-            allTable.value.data = res.data.searchData || []
-            nextTick(() => {
-              allTableRef.value && autoWidth(allTable.value, allTableRef.value)
-            })
-          }, 1000)
+          assignTableData(res.data)
         }
       })
+      .finally(() => {
+        nextTick(() => {
+          tableRef.value && autoWidth(trackingTable.value, tableRef.value)
+          tableLoadingTableData.value = false
+        })
+        selectedNumber.value = 0
+      })
   }
-  nextTick(() => {
-    tableRef.value && autoWidth(trackingTable.value, tableRef.value)
-    tableLoadingTableData.value = false
-  })
 }
 
 // 查询列表数据
@@ -231,42 +194,19 @@ const searchTableData = (data: any) => {
     })
     .then((res: any) => {
       if (res.code === 200) {
-        trackingTable.value.data = res.data.searchData
-        pageInfo.value.total = Number(res.data.rc)
-        tempSearch.value = res.data.tmp_search
-
-        if (res.data.canEdiVgm && trackingTable.value.columns.length > 0) {
-          const index = trackingTable.value.columns.findIndex(
-            (item: any) => item.title === 'Action'
-          )
-          if (index === -1) {
-            trackingTable.value.columns.push({
-              title: 'Action',
-              fixed: 'right',
-              width: 80,
-              slots: { default: 'action' }
-            })
-          }
-        }
-        // 拥有所有字段的表格
-        setTimeout(() => {
-          allTable.value.columns = handleColumns(res.data.allColums, 'all')
-          allTable.value.data = res.data.searchData
-          nextTick(() => {
-            allTableRef.value && autoWidth(allTable.value, allTableRef.value)
-          })
-        }, 1000)
+        assignTableData(res.data)
       }
     })
     .finally(() => {
       tableRef.value && autoWidth(trackingTable.value, tableRef.value)
       tableLoadingTableData.value = false
+      selectedNumber.value = 0
     })
 }
 
 onMounted(() => {
   tableLoadingColumn.value = true
-  Promise.all([getTableColumns(true)]).finally(() => {
+  Promise.all([getTableColumns()]).finally(() => {
     tableLoadingColumn.value = false
     nextTick(() => {
       tableRef.value && autoWidth(trackingTable.value, tableRef.value)
@@ -457,7 +397,7 @@ const handleCustomizeColumns = () => {
 
 // 定制表格
 const customizeColumns = async () => {
-  await getTableColumns(false)
+  await getTableColumns()
   nextTick(() => {
     tableRef.value && autoWidth(trackingTable.value, tableRef.value)
   })