feat: 表格下载数据时先去请求服务器获得所有表格数据

src/api/module/booking.ts

@@ -90,3 +90,18 @@ export const getMoreFiltersTableData = (params: any, config: any) => {
     config
   )
 }
+
+/**
+ * 用户下载表格时获取所有数据
+ */
+export const getAllBookingTableData = (params: any, config: any) => {
+  return HttpAxios.post(
+    `${baseUrl}`,
+    {
+      action: 'ocean_booking',
+      operate: 'excel',
+      ...params
+    },
+    config
+  )
+}

src/api/module/tracking.ts

@@ -107,3 +107,18 @@ export const saveVGMData = (params: any, config: any) => {
     config
   )
 }
+
+/**
+ * 用户下载表格时获取所有数据
+ */
+export const getAllTrackingTableData = (params: any, config: any) => {
+  return HttpAxios.post(
+    `${baseUrl}`,
+    {
+      action: 'ocean_order',
+      operate: 'excel',
+      ...params
+    },
+    config
+  )
+}

src/utils/axios.ts

@@ -30,7 +30,7 @@ const CODE_MESSAGE: codeMessage = {
 
 class HttpAxios {
   instance: AxiosInstance
-  timeout = 10000
+  timeout = 30000
   cancelTokenArr: Array<any> = []
 
   constructor(config: AxiosRequestConfig) {
@@ -45,8 +45,8 @@ class HttpAxios {
   }
 
   _requestInterceptors = (config: AxiosRequestConfig) => {
-    // const _config = { timeout: this.timeout }
-    // return { ...config, ..._config }
+    const _config = { timeout: this.timeout }
+    return { ...config, ..._config }
     return config
   }
   /**

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

@@ -68,8 +68,8 @@ const handleColumns = (columns: any, status?: string) => {
 }
 
 // 获取表格列
-const getTableColumns = async (isInit: boolean) => {
-  tableLoading.value = true
+const getTableColumns = async () => {
+  tableLoadingColumn.value = true
   await $api.getBookingTableColumns().then((res: any) => {
     if (res.code === 200) {
       bookingTable.value.columns = [
@@ -80,20 +80,19 @@ const getTableColumns = async (isInit: boolean) => {
     }
   })
   nextTick(() => {
-    if (!isInit) {
-      tableRef.value && autoWidth(bookingTable.value, tableRef.value)
-      tableLoading.value = false
-    }
+    tableRef.value && autoWidth(bookingTable.value, tableRef.value)
+    tableLoadingColumn.value = false
   })
 }
 
 const pageInfo = ref({ pageNo: 1, pageSize: 100, total: 0 })
 
+const tempSearch = ref()
 // 获取表格数据
 let filterdataobj: any = {}
-const getTableData = async (isInit: boolean, isPageChange?: boolean) => {
+const getTableData = async (isPageChange?: boolean) => {
   const rc = isPageChange ? pageInfo.value.total : -1
-  tableLoading.value = true
+  tableLoadingTableData.value = true
   await $api
     .getBookingTableData({
       cp: pageInfo.value.pageNo,
@@ -106,7 +105,7 @@ const getTableData = async (isInit: boolean, isPageChange?: boolean) => {
       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')
@@ -119,15 +118,13 @@ const getTableData = async (isInit: boolean, isPageChange?: boolean) => {
       }
     })
   nextTick(() => {
-    if (!isInit) {
-      tableRef.value && autoWidth(bookingTable.value, tableRef.value)
-      tableLoading.value = false
-    }
+    tableRef.value && autoWidth(bookingTable.value, tableRef.value)
+    tableLoadingTableData.value = false
   })
 }
 // 查询列表数据
 const searchTableData = (data: any) => {
-  tableLoading.value = true
+  tableLoadingTableData.value = true
   filterdataobj = data
   $api
     .getBookingTableData({
@@ -151,9 +148,10 @@ const searchTableData = (data: any) => {
         } else {
           bookingTable.value.data = res.data.searchData || []
           pageInfo.value.total = Number(res.data.rc)
+          tempSearch.value = res.data.tmp_search
           nextTick(() => {
             tableRef.value && autoWidth(bookingTable.value, tableRef.value)
-            tableLoading.value = false
+            tableLoadingTableData.value = false
           })
           // 拥有所有字段的表格
           setTimeout(() => {
@@ -170,11 +168,9 @@ const searchTableData = (data: any) => {
 }
 
 onMounted(() => {
-  tableLoading.value = true
-  Promise.all([getTableColumns(true), getTableData(true)]).finally(() => {
+  Promise.all([getTableColumns(), getTableData()]).finally(() => {
     nextTick(() => {
       tableRef.value && autoWidth(bookingTable.value, tableRef.value)
-      tableLoading.value = false
     })
   })
 })
@@ -276,6 +272,44 @@ const handleDownload = () => {
   downloadDialogRef.value.openDialog(props.tagsData, curSelectedColumns)
 }
 
+const exportLoading = ref(false)
+// 获取导出表格数据
+const getExportTableData = (status: number) => {
+  exportLoading.value = true
+  const buildColumnString = (columns: any[]): string => {
+    return columns
+      .filter((item) => item.field)
+      .map((item) => item.title)
+      .join(',')
+  }
+
+  let column = ''
+  if (status === 1) {
+    column = buildColumnString(bookingTable.value.columns)
+  } else {
+    column = buildColumnString(allTable.value.columns)
+  }
+
+  $api
+    .getAllBookingTableData({
+      'selected fields': column,
+      excel_filter_condition: props.tagsData.join(','),
+      tmp_search: tempSearch.value
+    })
+    .then((res: any) => {
+      if (res.code === 200) {
+        allTable.value.data = res.data.Data || []
+        nextTick(() => {
+          exportLoading.value = false
+          // 导出数据
+          exportTable(status)
+        })
+      }
+    })
+    .finally(() => {
+      exportLoading.value = false
+    })
+}
 // 导出表格 status: 1 导出当前表格 2 导出所有字段表格
 const exportTable = (status: number) => {
   const exportConfig: any = {
@@ -294,7 +328,8 @@ const exportTable = (status: number) => {
   allTableRef.value?.exportData(exportConfig)
 }
 
-const tableLoading = ref(false)
+const tableLoadingColumn = ref(false)
+const tableLoadingTableData = ref(false)
 
 const CustomizeColumnsRef = ref()
 // 打开定制表格弹窗
@@ -314,7 +349,7 @@ const handleCustomizeColumns = () => {
 }
 // 定制表格
 const customizeColumns = async () => {
-  await getTableColumns(false)
+  await getTableColumns()
   nextTick(() => {
     tableRef.value && autoWidth(bookingTable.value, tableRef.value)
   })
@@ -357,7 +392,12 @@ defineExpose({
 </script>
 
 <template>
-  <div style="padding: 0px 24px" class="booking-table">
+  <div
+    style="padding: 0px 24px"
+    class="booking-table"
+    v-loading.fullscreen.lock="exportLoading"
+    element-loading-background="rgb(43, 47, 54, 0.7)"
+  >
     <div class="table-tools">
       <div class="left-total-records">{{ selectedNumber }} Selected</div>
       <div class="right-tools-btn">
@@ -373,7 +413,7 @@ defineExpose({
     </div>
     <vxe-grid
       ref="tableRef"
-      v-vloading="tableLoading"
+      v-vloading="tableLoadingTableData || tableLoadingColumn"
       :height="props.height"
       :style="{ border: 'none' }"
       v-bind="bookingTable"
@@ -382,7 +422,7 @@ defineExpose({
       @checkbox-all="handleCheckAllChange"
     >
       <!-- 空数据时的插槽 -->
-      <template #empty>
+      <template #empty v-if="!tableLoadingTableData && bookingTable.data.length === 0">
         <VEmpty>
           <template #suggestion>
             <p style="color: var(--color-neutral-3)">
@@ -431,12 +471,12 @@ defineExpose({
           background
           layout="sizes, prev, pager, next"
           :total="pageInfo.total"
-          @size-change="getTableData(false, true)"
-          @current-change="getTableData(false, true)"
+          @size-change="getTableData(true)"
+          @current-change="getTableData(true)"
         />
       </div>
     </div>
-    <DownloadDialog @export="exportTable" ref="downloadDialogRef" />
+    <DownloadDialog @export="getExportTableData" ref="downloadDialogRef" />
     <CustomizeColumns @customize="customizeColumns" ref="CustomizeColumnsRef" />
   </div>
 </template>

src/views/Booking/src/components/BookingTable/src/BookingTableColumns.ts

@@ -1,510 +0,0 @@
-import dayjs from 'dayjs'
-
-const BookingTableColumns: any = [
-  {
-    field: 'booking_no',
-    title: 'Booking No.',
-    slots: {
-      default: 'bookingNo'
-    },
-    type: 'link'
-  },
-  {
-    field: 'm_bol',
-    title: 'MBOL No.'
-  },
-  {
-    field: 'h_bol',
-    title: 'HBOL No.'
-  },
-  {
-    field: 'po_no',
-    title: 'PO No.'
-  },
-  {
-    field: 'quote_no',
-    title: 'Quote No.'
-  },
-  {
-    field: 'carrier_booking',
-    title: 'Carrier Booking No.'
-  },
-  {
-    field: 'contract',
-    title: 'Contract No.'
-  },
-  {
-    field: 'mode',
-    title: 'Transportation Mode',
-    type: 'mode',
-    slots: {
-      default: 'mode'
-    }
-  },
-  {
-    field: 'status',
-    title: 'Status',
-    type: 'status',
-    slots: {
-      default: 'status'
-    }
-  },
-  {
-    field: 'shipper',
-    title: 'Shipper'
-  },
-  {
-    field: 'consignee',
-    title: 'Consignee'
-  },
-  {
-    field: 'origin',
-    title: 'Origin Agent'
-  },
-  {
-    field: 'agent',
-    title: 'Destination Agent'
-  },
-  {
-    field: 'sales_rep',
-    title: 'Sales'
-  },
-  {
-    field: 'created_time',
-    title: 'Creation Time',
-    formatter: ({ cellValue }: any) => {
-      return cellValue ? dayjs(cellValue).format('MMM-DD-YYYY HH:mm:ss') : '--'
-    }
-  },
-  {
-    field: 'confirmation_time',
-    title: 'Confirmation Time',
-    formatter: ({ cellValue }: any) => {
-      return cellValue ? dayjs(cellValue).format('MMM-DD-YYYY HH:mm:ss') : '--'
-    }
-  },
-  {
-    field: 'f_etd',
-    title: 'ETD',
-    formatter: ({ cellValue }: any) => {
-      return cellValue ? dayjs(cellValue).format('MMM-DD-YYYY') : '--'
-    }
-  },
-  {
-    field: 'f_eta',
-    title: 'ETA',
-    formatter: ({ cellValue }: any) => {
-      return cellValue ? dayjs(cellValue).format('MMM-DD-YYYY') : '--'
-    }
-  },
-  {
-    field: 'place_of_receipt_exp',
-    title: 'Place of Receipt'
-  },
-  {
-    field: 'fport_of_loading_exp',
-    title: 'Port of Loading'
-  },
-  {
-    field: 'place_of_delivery_exp',
-    title: 'Place of Delivery'
-  },
-  {
-    field: 'final_desination_exp',
-    title: 'Destination'
-  },
-  {
-    field: 'from_station',
-    title: 'Origin'
-  },
-  {
-    field: 'f_carrier',
-    title: 'Carrier'
-  },
-  {
-    field: 'f_voyage',
-    title: 'Voyage'
-  },
-  {
-    field: 'f_vessel',
-    title: 'Vessel'
-  },
-  {
-    field: 'week',
-    title: 'Week'
-  },
-  {
-    field: 'd20',
-    title: 'D20'
-  },
-  {
-    field: 'sd40',
-    title: 'D40'
-  },
-  {
-    field: 'd45',
-    title: 'D45'
-  },
-  {
-    field: 'rd40',
-    title: 'RD'
-  },
-  {
-    field: 'hq40',
-    title: 'HQ'
-  },
-  {
-    field: 'created_by',
-    title: 'Created by'
-  },
-  {
-    field: 'terms',
-    title: 'Other info'
-  }
-]
-
-const addOtherConfig = () => {
-  BookingTableColumns.forEach((item: any) => {
-    item.sortable = true
-  })
-}
-addOtherConfig()
-
-const defaultColumns = [
-  'Transportation Mode',
-  'Status',
-  'Booking No.',
-  'MBOL No.',
-  'HBOL No.',
-  'PO No.',
-  'Shipper',
-  'Consignee',
-  'Origin',
-  'Destination',
-  'Creation Time',
-  'ETD',
-  'ETA',
-  'Week',
-  'Vessel',
-  'Voyage',
-  'Created by',
-  'Other info'
-]
-
-// 分组
-const groupColumns = [
-  {
-    name: 'All',
-    children: [
-      {
-        label: 'Booking No.',
-        field: 'booking_no'
-      },
-      {
-        label: 'MBOL No.',
-        field: 'm_bol'
-      },
-      {
-        label: 'HBOL No.',
-        field: 'h_bol'
-      },
-      {
-        label: 'PO No.',
-        field: 'po_no'
-      },
-      {
-        label: 'Quote No.',
-        field: 'quote_no'
-      },
-      {
-        label: 'Carrier Booking No.',
-        field: 'carrier_booking'
-      },
-      {
-        label: 'Contract No.',
-        field: 'contract'
-      },
-      {
-        label: 'Transportation Mode',
-        field: 'mode'
-      },
-      {
-        label: 'Status',
-        field: 'status'
-      },
-      {
-        label: 'Shipper',
-        field: 'shipper'
-      },
-      {
-        label: 'Consignee',
-        field: 'consignee'
-      },
-      {
-        label: 'Origin Agent',
-        field: 'origin'
-      },
-      {
-        label: 'Destination Agent',
-        field: 'agent'
-      },
-      {
-        label: 'Sales',
-        field: 'sales_rep'
-      },
-      {
-        label: 'Creation Time',
-        field: 'created_time'
-      },
-      {
-        label: 'Confirmation Time',
-        field: 'confirmation_time'
-      },
-      {
-        label: 'ETD',
-        field: 'f_etd'
-      },
-      {
-        label: 'ETA',
-        field: 'f_eta'
-      },
-      {
-        label: 'Place of Receipt',
-        field: 'place_of_receipt_exp'
-      },
-      {
-        label: 'Port of Loading',
-        field: 'fport_of_loading_exp'
-      },
-      {
-        label: 'Place of Delivery',
-        field: 'place_of_delivery_exp'
-      },
-      {
-        label: 'Destination',
-        field: 'final_desination_exp'
-      },
-      {
-        label: 'Origin',
-        field: 'from_station'
-      },
-      {
-        label: 'Carrier',
-        field: 'f_carrier'
-      },
-      {
-        label: 'Voyage',
-        field: 'f_voyage'
-      },
-      {
-        label: 'Vessel',
-        field: 'f_vessel'
-      },
-      {
-        label: 'Week',
-        field: 'week'
-      },
-      {
-        label: 'D20',
-        field: 'd20'
-      },
-      {
-        label: 'D40',
-        field: 'sd40'
-      },
-      {
-        label: 'D45',
-        field: 'd45'
-      },
-      {
-        label: 'RD',
-        field: 'rd40'
-      },
-      {
-        label: 'HQ',
-        field: 'hq40'
-      },
-      {
-        label: 'Created by',
-        field: 'created_by'
-      },
-      {
-        label: 'Other info',
-        field: 'terms'
-      }
-    ]
-  },
-  {
-    name: 'Reference No.',
-    children: [
-      {
-        label: 'Booking No.',
-        field: 'booking_no'
-      },
-      {
-        label: 'MBOL No.',
-        field: 'm_bol'
-      },
-      {
-        label: 'HBOL No.',
-        field: 'h_bol'
-      },
-      {
-        label: 'PO No.',
-        field: 'po_no'
-      },
-      {
-        label: 'Quote No.',
-        field: 'quote_no'
-      },
-      {
-        label: 'Carrier Booking No.',
-        field: 'carrier_booking'
-      },
-      {
-        label: 'Contract No.',
-        field: 'contract'
-      }
-    ]
-  },
-  {
-    name: 'General',
-    children: [
-      {
-        label: 'Transportation Mode',
-        field: 'mode'
-      },
-      {
-        label: 'Status',
-        field: 'status'
-      }
-    ]
-  },
-  {
-    name: 'Parties',
-    children: [
-      {
-        label: 'Shipper',
-        field: 'shipper'
-      },
-      {
-        label: 'Consignee',
-        field: 'consignee'
-      },
-      {
-        label: 'Origin Agent',
-        field: 'origin'
-      },
-      {
-        label: 'Destination Agent',
-        field: 'agent'
-      },
-      {
-        label: 'Sales',
-        field: 'sales_rep'
-      }
-    ]
-  },
-  {
-    name: 'Time',
-    children: [
-      {
-        label: 'Creation Time',
-        field: 'created_time'
-      },
-      {
-        label: 'Confirmation Time',
-        field: 'confirmation_time'
-      },
-      {
-        label: 'ETD',
-        field: 'f_etd'
-      },
-      {
-        label: 'ETA',
-        field: 'f_eta'
-      }
-    ]
-  },
-  {
-    name: 'Places',
-    children: [
-      {
-        label: 'Place of Receipt',
-        field: 'place_of_receipt_exp'
-      },
-      {
-        label: 'Port of Loading',
-        field: 'fport_of_loading_exp'
-      },
-      {
-        label: 'Place of Delivery',
-        field: 'place_of_delivery_exp'
-      },
-      {
-        label: 'Destination',
-        field: 'final_desination_exp'
-      },
-      {
-        label: 'Origin',
-        field: 'from_station'
-      }
-    ]
-  },
-  {
-    name: 'Transportation',
-    children: [
-      {
-        label: 'Carrier',
-        field: 'f_carrier'
-      },
-      {
-        label: 'Voyage',
-        field: 'voyage_m_voyage'
-      },
-      {
-        label: 'Vessel',
-        field: 'vessel_m_vessel'
-      },
-      {
-        label: 'Week',
-        field: 'week'
-      },
-      {
-        label: 'D20',
-        field: 'd20'
-      },
-      {
-        label: 'D40',
-        field: 'sd40'
-      },
-      {
-        label: 'D45',
-        field: 'd45'
-      },
-      {
-        label: 'RD',
-        field: 'rd40'
-      },
-      {
-        label: 'HQ',
-        field: 'hq40'
-      }
-    ]
-  },
-  {
-    name: 'Others',
-    children: [
-      {
-        label: 'Created by',
-        field: 'created_by'
-      },
-      {
-        label: 'Other info',
-        field: 'terms'
-      }
-    ]
-  }
-]
-
-export { BookingTableColumns, defaultColumns, groupColumns }

src/views/Login/src/loginView.vue

@@ -121,7 +121,9 @@ const getCode = () => {
       loading.value = false
     })
 }
-getCode()
+onMounted(() => {
+  getCode()
+})
 
 const userStore = useUserStore()
 

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

@@ -8,7 +8,6 @@ import { transportationMode } from '@/components/TransportationMode'
 import { useHeaderSearch } from '@/stores/modules/headerSearch'
 
 const router = useRouter()
-const headerSearch = useHeaderSearch()
 const props = defineProps({
   height: {
     type: Number,
@@ -93,6 +92,7 @@ const getTableColumns = async (isInit: boolean) => {
 
 const pageInfo = ref({ pageNo: 1, pageSize: 100, total: 0 })
 const TagsList = ref()
+const tempSearch = ref('')
 
 // 获取表格数据
 let filterdataobj: any = {}
@@ -103,6 +103,8 @@ const getSharedTableData = () => {
     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) {
@@ -135,6 +137,7 @@ const getSharedTableData = () => {
 const getTableData = async (isInit: boolean, isPageChange?: boolean) => {
   const rc = isPageChange ? pageInfo.value.total : -1
   tableLoadingTableData.value = true
+
   if (
     sessionStorage.getItem('clickParams') != null &&
     sessionStorage.getItem('clickParams') != '{}'
@@ -143,6 +146,9 @@ const getTableData = async (isInit: boolean, isPageChange?: boolean) => {
     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) {
@@ -179,6 +185,8 @@ const getTableData = async (isInit: boolean, isPageChange?: boolean) => {
         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'
@@ -238,6 +246,8 @@ const searchTableData = (data: any) => {
         } else {
           trackingTable.value.data = res.data.searchData
           pageInfo.value.total = Number(res.data.rc)
+          tempSearch.value = res.data.tmp_search
+
           nextTick(() => {
             tableRef.value && autoWidth(trackingTable.value, tableRef.value)
           })
@@ -367,7 +377,45 @@ const handleDownload = () => {
   downloadDialogRef.value.openDialog(props.tagsData, curSelectedColumns)
 }
 
-// 导出表格
+const exportLoading = ref(false)
+// 获取导出表格数据
+const getExportTableData = (status: number) => {
+  exportLoading.value = true
+  const buildColumnString = (columns: any[]): string => {
+    return columns
+      .filter((item) => item.field)
+      .map((item) => item.title)
+      .join(',')
+  }
+
+  let column = ''
+  if (status === 1) {
+    column = buildColumnString(trackingTable.value.columns)
+  } else {
+    column = buildColumnString(allTable.value.columns)
+  }
+
+  $api
+    .getAllTrackingTableData({
+      'selected fields': column,
+      excel_filter_condition: props.tagsData.join(','),
+      tmp_search: tempSearch.value
+    })
+    .then((res: any) => {
+      if (res.code === 200) {
+        allTable.value.data = res.data.Data || []
+        nextTick(() => {
+          exportLoading.value = false
+          // 导出数据
+          exportTable(status)
+        })
+      }
+    })
+    .finally(() => {
+      exportLoading.value = false
+    })
+}
+// 导出表格 status: 1 导出当前表格 2 导出所有字段表格
 const exportTable = (status: number) => {
   const exportConfig: any = {
     type: 'xlsx',
@@ -461,7 +509,12 @@ defineExpose({
 </script>
 
 <template>
-  <div style="padding: 0px 24px" class="tracking-table">
+  <div
+    style="padding: 0px 24px"
+    class="tracking-table"
+    v-loading.fullscreen.lock="exportLoading"
+    element-loading-background="rgb(43, 47, 54, 0.7)"
+  >
     <div class="table-tools">
       <div class="left-total-records">{{ selectedNumber }} Selected</div>
       <div class="right-tools-btn">
@@ -487,7 +540,7 @@ defineExpose({
       @checkbox-all="handleCheckAllChange"
     >
       <!-- 空数据时的插槽 -->
-      <template #empty>
+      <template #empty v-if="!tableLoadingTableData && trackingTable.data.length === 0">
         <VEmpty>
           <template #suggestion>
             <p>We support the following references number to find tracking:</p>
@@ -545,7 +598,7 @@ defineExpose({
         />
       </div>
     </div>
-    <DownloadDialog @export="exportTable" ref="downloadDialogRef" />
+    <DownloadDialog @export="getExportTableData" ref="downloadDialogRef" />
     <CustomizeColumns @customize="customizeColumns" ref="CustomizeColumnsRef" />
   </div>
 </template>

src/views/Tracking/src/components/TrackingTable/src/TrackingTableColumns.ts

@@ -1,731 +0,0 @@
-import dayjs from 'dayjs'
-
-const TrackingTableColumns: any = [
-  {
-    field: 'trackingNo',
-    title: 'Tracking No.',
-    slots: {
-      default: 'trackingNo'
-    }
-  },
-  {
-    field: 'mBOLNo',
-    title: 'MBOL No.'
-  },
-  {
-    field: 'hbOLNo',
-    title: 'HBOL No.'
-  },
-  {
-    field: 'containerNo',
-    title: 'Container No.'
-  },
-  {
-    field: 'invoiceNo',
-    title: 'Invoice No.'
-  },
-  {
-    field: 'bookingNo',
-    title: 'Booking No.'
-  },
-  {
-    field: 'poNo',
-    title: 'PO No.'
-  },
-  {
-    field: 'quoteNo',
-    title: 'Quote No.'
-  },
-  {
-    field: 'carrierBookingNo',
-    title: 'Carrier Booking No.'
-  },
-  {
-    field: 'contractNo',
-    title: 'Contract No.'
-  },
-  {
-    field: 'fileNo',
-    title: 'File No.'
-  },
-  {
-    field: 'otherRefNo',
-    title: 'Other refenrence No.'
-  },
-  {
-    field: 'mode',
-    title: 'Transportation Mode',
-    slots: {
-      default: 'mode'
-    }
-  },
-  {
-    field: 'service',
-    title: 'Service'
-  },
-  {
-    field: 'bolType',
-    title: 'BOL Type'
-  },
-  {
-    field: 'exim',
-    title: 'EX/IM'
-  },
-  {
-    field: 'incoterms',
-    title: 'Incoterms'
-  },
-  {
-    field: 'trackingStatus',
-    title: 'Status',
-    slots: {
-      default: 'status'
-    }
-  },
-  {
-    field: 'shipper',
-    title: 'Shipper'
-  },
-  {
-    field: 'shipperId',
-    title: 'Shipper ID'
-  },
-  {
-    field: 'consignee',
-    title: 'Consignee'
-  },
-  {
-    field: 'consigneeId',
-    title: 'Consignee ID'
-  },
-  {
-    field: 'notifyParty',
-    title: 'Notify Party'
-  },
-  {
-    field: 'notifyPartyId',
-    title: 'Notify Party ID'
-  },
-  {
-    field: 'billTo',
-    title: 'Bill to'
-  },
-  {
-    field: 'groupName',
-    title: 'Group Name'
-  },
-  {
-    field: 'originAgent',
-    title: 'Origin Agent'
-  },
-  {
-    field: 'destinationAgent',
-    title: 'Destination Agent'
-  },
-  {
-    field: 'destinationAgent',
-    title: 'Destination Operator'
-  },
-  {
-    field: 'sales',
-    title: 'Sales'
-  },
-  {
-    field: 'etd',
-    title: 'ETD',
-    formatter: ({ cellValue }: any) => {
-      return cellValue ? dayjs(cellValue).format('MMM-DD-YYYY') : '--'
-    }
-  },
-  {
-    field: 'eta',
-    title: 'ETA',
-    formatter: ({ cellValue }: any) => {
-      return cellValue ? dayjs(cellValue).format('MMM-DD-YYYY') : '--'
-    }
-  },
-  {
-    field: 'creationTime',
-    title: 'Creation Time',
-    formatter: ({ cellValue }: any) => {
-      return cellValue ? dayjs(cellValue).format('MMM-DD-YYYY HH:mm:ss') : '--'
-    }
-  },
-  {
-    field: 'origin',
-    title: 'Origin'
-  },
-  {
-    field: 'destination',
-    title: 'Destination'
-  },
-  {
-    field: 'placeOfReceipt',
-    title: 'Place of Receipt'
-  },
-  {
-    field: 'portOfLoading',
-    title: 'Port of Loading'
-  },
-  {
-    field: 'portOfDischarge',
-    title: 'Port of Discharge'
-  },
-  {
-    field: 'placeOfDelivery',
-    title: 'Place of Delivery'
-  },
-
-  {
-    field: 'carrier',
-    title: 'Carrier'
-  },
-  {
-    field: 'voyage',
-    title: 'Voyage'
-  },
-  {
-    field: 'vessel',
-    title: 'Vessel'
-  },
-  {
-    field: 'week',
-    title: 'Week'
-  },
-  {
-    field: 'size',
-    title: 'Size'
-  },
-  {
-    field: 'itemNo',
-    title: 'Item No.'
-  },
-  {
-    field: 'cartonNo',
-    title: 'Carton No.'
-  },
-  {
-    field: 'weightNo',
-    title: 'Weight No.'
-  },
-  {
-    field: 'file',
-    title: 'File'
-  },
-  {
-    field: 'attachment',
-    title: 'ACE-M1 Status'
-  },
-  {
-    field: 'isISF',
-    title: 'Is ISF'
-  },
-  {
-    field: 'obL_SET',
-    title: 'OBL_SET'
-  },
-  {
-    field: 'createdBy',
-    title: 'Created by'
-  }
-]
-
-const addOtherConfig = () => {
-  TrackingTableColumns.forEach((item: any) => {
-    item.sortable = true
-  })
-}
-addOtherConfig()
-
-const defaultColumns = [
-  'Transportation Mode',
-  'Status',
-  'Tracking No.',
-  'HBOL No.',
-  'MBOL No.',
-  'PO No.',
-  'Booking No.',
-  'Container No.',
-  'Service',
-  'BOL Type',
-  'EX/IM',
-  'Shipper',
-  'Consignee',
-  'Notify Party',
-  'Bill to',
-  // 'Agent',
-  'Origin',
-  'Destination',
-  'Creation Time',
-  'ETD',
-  'ETA',
-  'Carrier',
-  'Week',
-  'Vessel',
-  'Voyage',
-  'ACE-M1 Status',
-  'Is ISF',
-  'Created by'
-]
-
-// 分组
-const groupColumns = [
-  {
-    name: 'All',
-    children: [
-      {
-        label: 'Tracking No.',
-        field: 'trackingNo'
-      },
-      {
-        label: 'MBOL No.',
-        field: 'mBOLNo'
-      },
-      {
-        label: 'HBOL No.',
-        field: 'hbOLNo'
-      },
-      {
-        label: 'Container No.',
-        field: 'containerNo'
-      },
-      {
-        label: 'Invoice No.',
-        field: 'invoiceNo'
-      },
-      {
-        label: 'Booking No.',
-        field: 'bookingNo'
-      },
-      {
-        label: 'PO No.',
-        field: 'poNo'
-      },
-      {
-        label: 'Quote No.',
-        field: 'quoteNo'
-      },
-      {
-        label: 'Carrier Booking No.',
-        field: 'carrierBookingNo'
-      },
-      {
-        label: 'Contract No.',
-        field: 'contractNo'
-      },
-      {
-        label: 'File No.',
-        field: 'fileNo'
-      },
-      {
-        label: 'Other refenrence No.',
-        field: 'otherRefNo'
-      },
-      {
-        label: 'Transportation Mode',
-        field: 'mode'
-      },
-      {
-        label: 'Service',
-        field: 'service'
-      },
-      {
-        label: 'BOL Type',
-        field: 'bolType'
-      },
-      {
-        label: 'EX/IM',
-        field: 'exim'
-      },
-      {
-        label: 'Incoterms',
-        field: 'incoterms'
-      },
-      {
-        label: 'Status',
-        field: 'trackingStatus'
-      },
-      {
-        label: 'Shipper',
-        field: 'shipper'
-      },
-      {
-        label: 'Shipper ID',
-        field: 'shipperId'
-      },
-      {
-        label: 'Consignee',
-        field: 'consignee'
-      },
-      {
-        label: 'Consignee ID',
-        field: 'consigneeId'
-      },
-      {
-        label: 'Notify Party',
-        field: 'notifyParty'
-      },
-      {
-        label: 'Notify Party ID',
-        field: 'notifyPartyId'
-      },
-      {
-        label: 'Bill to',
-        field: 'billTo'
-      },
-      {
-        label: 'Group Name',
-        field: 'groupName'
-      },
-      {
-        label: 'Origin Agent',
-        field: 'originAgent'
-      },
-      {
-        label: 'Destination Agent',
-        field: 'destinationAgent'
-      },
-      {
-        label: 'Destination Operator',
-        field: 'destinationOperator'
-      },
-      {
-        label: 'Sales',
-        field: 'sales'
-      },
-      {
-        label: 'ETD',
-        field: 'etd'
-      },
-      {
-        label: 'ETA',
-        field: 'eta'
-      },
-      {
-        label: 'Creation Time',
-        field: 'creationTime'
-      },
-      {
-        label: 'Origin',
-        field: 'origin'
-      },
-      {
-        label: 'Destination',
-        field: 'destination'
-      },
-      {
-        label: 'Place of Receipt',
-        field: 'placeOfReceipt'
-      },
-      {
-        label: 'Port of Loading',
-        field: 'portOfLoading'
-      },
-      {
-        label: 'Port of Discharge',
-        field: 'portOfDischarge'
-      },
-      {
-        label: 'Place of Delivery',
-        field: 'placeOfDelivery'
-      },
-      {
-        label: 'Carrier',
-        field: 'carrier'
-      },
-      {
-        label: 'Voyage',
-        field: 'voyage'
-      },
-      {
-        label: 'Vessel',
-        field: 'vessel'
-      },
-      {
-        label: 'Week',
-        field: 'week'
-      },
-      {
-        label: 'Size',
-        field: 'size'
-      },
-      {
-        label: 'Item No.',
-        field: 'itemNo'
-      },
-      {
-        label: 'Carton No.',
-        field: 'cartonNo'
-      },
-      {
-        label: 'Weight No.',
-        field: 'weightNo'
-      },
-      {
-        label: 'File',
-        field: 'file'
-      },
-      {
-        label: 'ACE-M1 Status',
-        field: 'attachment'
-      },
-      {
-        label: 'Is ISF',
-        field: 'isISF'
-      },
-      {
-        label: 'OBL_SET',
-        field: 'obL_SET'
-      },
-      {
-        label: 'Created by',
-        field: 'createdBy'
-      }
-    ]
-  },
-  {
-    name: 'Reference No.',
-    children: [
-      {
-        label: 'Tracking No.',
-        field: 'trackingNo'
-      },
-      {
-        label: 'MBOL No.',
-        field: 'mBOLNo'
-      },
-      {
-        label: 'HBOL No.',
-        field: 'hbOLNo'
-      },
-      {
-        label: 'Container No.',
-        field: 'containerNo'
-      },
-      {
-        label: 'Invoice No.',
-        field: 'invoiceNo'
-      },
-      {
-        label: 'Booking No.',
-        field: 'bookingNo'
-      },
-      {
-        label: 'PO No.',
-        field: 'poNo'
-      },
-      {
-        label: 'Quote No.',
-        field: 'quoteNo'
-      },
-      {
-        label: 'Carrier Booking No.',
-        field: 'carrierBookingNo'
-      },
-      {
-        label: 'Contract No.',
-        field: 'contractNo'
-      },
-      {
-        label: 'File No.',
-        field: 'fileNo'
-      },
-      {
-        label: 'Other refenrence No.',
-        field: 'otherRefNo'
-      }
-    ]
-  },
-  {
-    name: 'General',
-    children: [
-      {
-        label: 'Transportation Mode',
-        field: 'mode'
-      },
-      {
-        label: 'Service',
-        field: 'service'
-      },
-      {
-        label: 'BOL Type',
-        field: 'bolType'
-      },
-      {
-        label: 'EX/IM',
-        field: 'exim'
-      },
-      {
-        label: 'Incoterms',
-        field: 'incoterms'
-      },
-      {
-        label: 'Status',
-        field: 'trackingStatus'
-      }
-    ]
-  },
-  {
-    name: 'Parties',
-    children: [
-      {
-        label: 'Shipper',
-        field: 'shipper'
-      },
-      {
-        label: 'Shipper ID',
-        field: 'shipperId'
-      },
-      {
-        label: 'Consignee',
-        field: 'consignee'
-      },
-      {
-        label: 'Consignee ID',
-        field: 'consigneeId'
-      },
-      {
-        label: 'Notify Party',
-        field: 'notifyParty'
-      },
-      {
-        label: 'Notify Party ID',
-        field: 'notifyPartyId'
-      },
-      {
-        label: 'Bill to',
-        field: 'billTo'
-      },
-      {
-        label: 'Group Name',
-        field: 'groupName'
-      },
-      {
-        label: 'Origin Agent',
-        field: 'originAgent'
-      },
-      {
-        label: 'Destination Agent',
-        field: 'destinationAgent'
-      },
-      {
-        label: 'Destination Operator',
-        field: 'destinationOperator'
-      },
-      {
-        label: 'Sales',
-        field: 'sales'
-      }
-    ]
-  },
-  {
-    name: 'Date Range',
-    children: [
-      {
-        label: 'ETD',
-        field: 'etd'
-      },
-      {
-        label: 'ETA',
-        field: 'eta'
-      },
-      {
-        label: 'Creation Time',
-        field: 'creationTime'
-      }
-    ]
-  },
-  {
-    name: 'Places',
-    children: [
-      {
-        label: 'Origin',
-        field: 'origin'
-      },
-      {
-        label: 'Destination',
-        field: 'destination'
-      },
-      {
-        label: 'Place of Receipt',
-        field: 'placeOfReceipt'
-      },
-      {
-        label: 'Port of Loading',
-        field: 'portOfLoading'
-      },
-      {
-        label: 'Port of Discharge',
-        field: 'portOfDischarge'
-      },
-      {
-        label: 'Place of Delivery',
-        field: 'placeOfDelivery'
-      }
-    ]
-  },
-  {
-    name: 'Transportation',
-    children: [
-      {
-        label: 'Carrier',
-        field: 'carrier'
-      },
-      {
-        label: 'Voyage',
-        field: 'voyage'
-      },
-      {
-        label: 'Vessel',
-        field: 'vessel'
-      },
-      {
-        label: 'Week',
-        field: 'week'
-      }
-    ]
-  },
-  {
-    name: 'Others',
-    children: [
-      {
-        label: 'Size',
-        field: 'size'
-      },
-      {
-        label: 'Item No.',
-        field: 'itemNo'
-      },
-      {
-        label: 'Carton No.',
-        field: 'cartonNo'
-      },
-      {
-        label: 'Weight No.',
-        field: 'weightNo'
-      },
-      {
-        label: 'File',
-        field: 'file'
-      },
-      {
-        label: 'ACE-M1 Status',
-        field: 'attachment'
-      },
-      {
-        label: 'Is ISF',
-        field: 'isISF'
-      },
-      {
-        label: 'OBL_SET',
-        field: 'obL_SET'
-      },
-      {
-        label: 'Created by',
-        field: 'createdBy'
-      }
-    ]
-  }
-]
-
-export { TrackingTableColumns, defaultColumns, groupColumns }