Página Principal Explorar Ajuda
Registe-se Iniciar Sessão
United_Software
/
k_online_ui
2
0
Fork 0
Ficheiros Problemas 0 Pull Requests 0 Wiki
Ver Fonte

feat: 解决tacking表格时间错误排序bug

zhouyuhao há 1 ano atrás
pai
79aa93f43d
commit
7a20763fe8
13 ficheiros alterados com 98 adições e 61 exclusões
Visão Dividida Mostrar Estatísticas Diff
  1. 1 1
      index.html
  2. 1 1
      src/components/VTag/src/VTag.vue
  3. 2 2
      src/styles/elementui.scss
  4. 15 15
      src/styles/theme.scss
  5. 0 3
      src/views/Booking/src/components/BookingTable/src/BookingTable.vue
  6. 0 3
      src/views/Tracking/src/TrackingView.vue
  7. 2 3
      src/views/Tracking/src/components/PublicTracking/src/PublicTrackingSearch.vue
  8. 5 5
      src/views/Tracking/src/components/PublicTracking/src/components/BasicInformation.vue
  9. 4 1
      src/views/Tracking/src/components/PublicTracking/src/components/MilestonesTable.vue
  10. 2 2
      src/views/Tracking/src/components/PublicTracking/src/components/PublicTrackingDetail.vue
  11. 9 9
      src/views/Tracking/src/components/TrackingDetail/src/components/BasicInformation.vue
  12. 12 13
      src/views/Tracking/src/components/TrackingDetail/src/components/MapView.vue
  13. 45 3
      src/views/Tracking/src/components/TrackingTable/src/TrackingTable.vue

+ 1 - 1
index.html
Ver Ficheiro 

@@ -7,7 +7,7 @@
 
     <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
 
     <meta http-equiv="Pragma" content="no-cache" />
 
     <meta http-equiv="Expires" content="0" />
 
-    <title>online</title>
 
+    <title>Apex Online Tracking</title>
 
   </head>
 
   <body>
 
     <div id="app"></div>

+ 1 - 1
src/components/VTag/src/VTag.vue
Ver Ficheiro 

@@ -38,7 +38,7 @@ defineProps<internalProps>()
 
   justify-content: center;
 
   cursor: default;
 
   align-items: center;
 
-  padding: 4px 8px;
 
+  padding: 5px 8px;
 
   height: 22px;
 
   line-height: 28px;
 
   font-size: 12px;

+ 2 - 2
src/styles/elementui.scss
Ver Ficheiro 

@@ -378,7 +378,7 @@ span.el-checkbox__input.is-checked + .el-checkbox__label {
 
   color: var(--color-neutral-2);
 
 }
 
 /* 修改选中时打勾图标的大小 */
 
-span.el-checkbox__inner::after {
 
+div .el-checkbox.el-checkbox--large span.el-checkbox__inner::after {
 
   left: 4px; /* 调整左边距 */
 
   top: 0px; /* 调整上边距 */
 
   width: 5px; /* 打勾图标宽度 */
 
@@ -646,4 +646,4 @@ div .el-radio-button__inner:hover {
 
 div .el-space {
 
   flex-wrap: wrap;
 
   margin: 3px 0 0 0;
 
-}
 
+}

+ 15 - 15
src/styles/theme.scss
Ver Ficheiro 

@@ -5,14 +5,14 @@
 
   --color-neutral-1: #2b2f36;
 
   --color-neutral-2: #646a73;
 
   --color-neutral-3: #b5b9bf;
 
-  --color-neutral-4: #F5F7FA;
 
-  --color-neutral-5: #BFC1C3;
 
+  --color-neutral-4: #f5f7fa;
 
+  --color-neutral-5: #bfc1c3;
 
 
   --color-white: #fff;
 
   --color-success: #00a870;
 
   --color-warning: #edb82f;
 
   --color-danger: #c9353f;
 
-  --color-grey: #F4F5F5;
 
+  --color-grey: #f4f5f5;
 
 
   --color-accent-1: #2b2f36;
 
   --color-accent-2: #ed6d00;
 
@@ -45,7 +45,7 @@
 
   --color-orange-3: #fb8e00;
 
   --color-orange-4: #ffb74d;
 
   --color-orange-5: #ffd393;
 
-  --color-orange-6: #FDF0E6;
 
+  --color-orange-6: #fdf0e6;
 
 
   --color-tag-confirmed: #5bb462;
 
   --color-tag-cancelled: #243041;
 
@@ -60,7 +60,7 @@
 
   --color-tag-confirmed-bg: #e8fbe4;
 
   --color-tag-cancelled-bg: #ebeef1;
 
   --color-tag-created-bg: #e5f0fb;
 
-  --color-tag-booked-bg: #d9d9d9;
 
+  --color-tag-booked-bg: #f3e6fa;
 
   --color-tag-all-bg: #ffe5cf;
 
   --color-tag-cargo-received-bg: #eaecff;
 
   --color-tag-departure-bg: #ecf7ff;
 
@@ -68,8 +68,8 @@
 
   --color-tag-completed-bg: #e8fbe4;
 
 
   --color-border: #eaebed;
 
-  --color-border-1: #E8EAEE;
 
-  --color-border-2: #EAEBED;
 
+  --color-border-1: #e8eaee;
 
+  --color-border-2: #eaebed;
 
 
   --color-mune-active-bg: #fdf5f1;
 
 
@@ -100,7 +100,7 @@
 
   --color-tag-checked-cancelled: #ebeef1;
 
   --color-tag-checked-confirmed: #e8fbe4;
 
 
-  --color-border-top: #EFF0F1;
 
+  --color-border-top: #eff0f1;
 
 
   --color-header-bg: #f6f8fa;
 
 
@@ -122,13 +122,13 @@
 
   --border-hover-color: #fff1e6;
 
   --border-cancel-hover-color: #f4f5f5;
 
 
-  --icon-color-black:#202020;
 
-  --more-filters-background-color:#F9F9F9;
 
-  --addparties-background-color:#EFF1F5;
 
+  --icon-color-black: #202020;
 
+  --more-filters-background-color: #f9f9f9;
 
+  --addparties-background-color: #eff1f5;
 
 
-  --badge__content--warning:#ED6D00;
 
-  --tag-info-bg-color: #F2F2F2;
 
-  --tag-info-text-color: #2B2F36;
 
+  --badge__content--warning: #ed6d00;
 
+  --tag-info-bg-color: #f2f2f2;
 
+  --tag-info-text-color: #2b2f36;
 
 
-  --dashboard-text-color:#646A73;
 
+  --dashboard-text-color: #646a73;
 
 }

+ 0 - 3
src/views/Booking/src/components/BookingTable/src/BookingTable.vue
Ver Ficheiro 

@@ -52,9 +52,6 @@ const handleColumns = (columns: any, status?: string) => {
 
     if (item.formatter === 'date') {
 
       curColumn = {
 
         ...curColumn,
 
-        sortBy: ({ row, column }: any) => {
 
-          return dayjs(row[column.field]).unix()
 
-        },
 
         formatter: ({ cellValue }: any) =>
 
           cellValue ? dayjs(cellValue).format('MMM-YYYY-DD ') : '--'
 
       }

+ 0 - 3
src/views/Tracking/src/TrackingView.vue
Ver Ficheiro 

@@ -7,9 +7,6 @@ import DateRange from '@/components/DateRange'
 
 import MoreFilters from '@/components/MoreFilters'
 
 import { ref, reactive, onMounted } from 'vue'
 
 import { useCalculatingHeight } from '@/hooks/calculatingHeight'
 
-import { useRouter } from 'vue-router'
 
-
 
-const router = useRouter()
 
 
 const filterRef: Ref<HTMLElement | null> = ref(null)

+ 2 - 3
src/views/Tracking/src/components/PublicTracking/src/PublicTrackingSearch.vue
Ver Ficheiro 

@@ -15,7 +15,7 @@ const headerSearchdData = computed(() => headerSearch.searchValue)
 
 // 监听 sharedData 的变化并更新 inputValue
 
 headerSearchdData.value && (inputVModel.value = headerSearchdData.value)
 
 searchResult.value = headerSearch.searchResult
 
-
 
+headerSearch.clearSearchData()
 
 // 当 sharedData 发生变化时，更新 inputValue
 
 watch(
 
   () => headerSearchdData.value,
 
@@ -23,7 +23,7 @@ watch(
 
     // if (newData) {
 
     inputVModel.value = headerSearchdData.value
 
     searchResult.value = headerSearch.searchResult
 
-    // headerSearch.clearSearchData()
 
+    headerSearch.clearSearchData()
 
     // }
 
   }
 
 )
 
@@ -52,7 +52,6 @@ const handleSearchNo = () => {
 
     .finally(() => {
 
       loading.value = false
 
     })
 
-  // router.push(`/public-tracking/detail?searchNo=${inputVModel.value}`)
 
 }
 
 </script>

+ 5 - 5
src/views/Tracking/src/components/PublicTracking/src/components/BasicInformation.vue
Ver Ficheiro 

@@ -27,13 +27,13 @@ const allData: any = ref({
 
   businessPartners: [
 
     {
 
       title: 'Origin Agent',
 
-      conpany: 'Dynarex Corp.',
 
+      company: 'Dynarex Corp.',
 
       address: '1975 LINDEN BLVD 3RD FL SUITE # 300 ELMONT',
 
       phone: '+1 212 5551234'
 
     },
 
     {
 
       title: 'Destination Agent',
 
-      conpany: 'Dynarex Corp.',
 
+      company: 'Dynarex Corp.',
 
       address: '1975 LINDEN BLVD 3RD FL SUITE # 300 ELMONT',
 
       phone: '+1 212 5551234'
 
     }
 
@@ -93,13 +93,13 @@ const convertData = (data: any) => {
 
     businessPartners: [
 
       {
 
         title: 'Origin Agent',
 
-        conpany: data.businessPartners.origin.company,
 
+        company: data.businessPartners.origin.company,
 
         address: data.businessPartners.origin.address,
 
         phone: data.businessPartners.origin.phone
 
       },
 
       {
 
         title: 'Destination Agent',
 
-        conpany: data.businessPartners.destination.company,
 
+        company: data.businessPartners.destination.company,
 
         address: data.businessPartners.destination.address,
 
         phone: data.businessPartners.destination.phone
 
       }
 
@@ -155,7 +155,7 @@ watch(
 
             <div class="info">
 
               <span class="font_family icon-icon_company_b"></span>
 
               <span style="color: var(--color-neutral-1); font-weight: 600">{{
 
-                item.conpany
 
+                item.company
 
               }}</span>
 
             </div>
 
             <div class="info">

+ 4 - 1
src/views/Tracking/src/components/PublicTracking/src/components/MilestonesTable.vue
Ver Ficheiro 

@@ -9,13 +9,16 @@ import { useRowClickStyle } from '@/hooks/rowClickStyle'
 
 dayjs.extend(utc)
 
 dayjs.extend(timezone)
 
 const props = defineProps({
 
+  height: {
 
+    type: Number,
 
+    default: 240
 
+  },
 
   data: Object
 
 })
 
 
 const tableData = ref<VxeGridProps<any>>({
 
   border: true,
 
   minHeight: 70,
 
-  maxHeight: 440,
 
   columns: [],
 
   data: [],
 
   scrollY: { enabled: true, oSize: 20, gt: 30 },

+ 2 - 2
src/views/Tracking/src/components/PublicTracking/src/components/PublicTrackingDetail.vue
Ver Ficheiro 

@@ -116,7 +116,7 @@ const formatTime = (time: string) => {
 
       </div>
 
     </div>
 
     <div class="info-content">
 
-      <VBox :is-see-all="false" :is-draggable="false">
 
+      <VBox :is-see-all="false" :is-draggable="false" ref="basicInformationRef">
 
         <template #header>
 
           <div style="display: flex; border-radius: 12px 12px 0 0">
 
             <div class="basic-information-header">
 
@@ -126,7 +126,7 @@ const formatTime = (time: string) => {
 
           </div>
 
         </template>
 
         <template #content>
 
-          <BasicInformation :data="allData" ref="basicInformationRef"></BasicInformation>
 
+          <BasicInformation :data="allData"></BasicInformation>
 
         </template>
 
       </VBox>
 
       <!-- Milestones -->

+ 9 - 9
src/views/Tracking/src/components/TrackingDetail/src/components/BasicInformation.vue
Ver Ficheiro 

@@ -55,25 +55,25 @@ const allData: any = ref({
 
   businessPartners: [
 
     {
 
       title: 'Shipper',
 
-      conpany: '',
 
+      company: '',
 
       address: '',
 
       phone: ''
 
     },
 
     {
 
       title: 'Consignee',
 
-      conpany: '',
 
+      company: '',
 
       address: '',
 
       phone: ''
 
     },
 
     {
 
       title: 'Origin Agent',
 
-      conpany: '',
 
+      company: '',
 
       address: '',
 
       phone: ''
 
     },
 
     {
 
       title: 'Destination Agent',
 
-      conpany: '',
 
+      company: '',
 
       address: '',
 
       phone: ''
 
     }
 
@@ -155,25 +155,25 @@ const convertData = (data: any) => {
 
     businessPartners: [
 
       {
 
         title: 'Shipper',
 
-        conpany: data.businessPartners.shipper.company,
 
+        company: data.businessPartners.shipper.company,
 
         address: data.businessPartners.shipper.address,
 
         phone: data.businessPartners.shipper.phone
 
       },
 
       {
 
         title: 'Consignee',
 
-        conpany: data.businessPartners.consignee.company,
 
+        company: data.businessPartners.consignee.company,
 
         address: data.businessPartners.consignee.address,
 
         phone: data.businessPartners.consignee.phone
 
       },
 
       {
 
         title: 'Origin Agent',
 
-        conpany: data.businessPartners.origin.company,
 
+        company: data.businessPartners.origin.company,
 
         address: data.businessPartners.origin.address,
 
         phone: data.businessPartners.origin.phone
 
       },
 
       {
 
         title: 'Destination Agent',
 
-        conpany: data.businessPartners.destination.company,
 
+        company: data.businessPartners.destination.company,
 
         address: data.businessPartners.destination.address,
 
         phone: data.businessPartners.destination.phone
 
       }
 
@@ -349,7 +349,7 @@ defineExpose({
 
             <div class="info">
 
               <span class="font_family icon-icon_company_b"></span>
 
               <span style="color: var(--color-neutral-1); font-weight: 600">{{
 
-                item.conpany
 
+                item.company
 
               }}</span>
 
             </div>
 
             <div class="info">

+ 12 - 13
src/views/Tracking/src/components/TrackingDetail/src/components/MapView.vue
Ver Ficheiro 

@@ -9,8 +9,8 @@ import TransferIcon from '../images/transferIcon.png'
 
 import { onMounted, ref, watch } from 'vue'
 
 
 const props = defineProps<{
 
-  serial_no: string
 
-  uncode: string
 
+  serial_no?: string
 
+  uncode?: string
 
 }>()
 
 
 const markerPositions = ref([])
 
@@ -116,17 +116,15 @@ const addMarkersToMap = () => {
 
 
   if (latLngBounds.length > 0) {
 
     const bounds = L.latLngBounds(latLngBounds)
 
-    map!.fitBounds(bounds, { paddingTopLeft: [20, 20], paddingBottomRight: [400, 40] })
 
-
 
-    // 首次添加标记时保存中心和缩放级别
 
-    if (isFirstRender) {
 
-      initialCenter = bounds.getCenter() // 保存中心
 
-      initialZoomLevel = map!.getZoom() // 保存缩放比例
 
-      isFirstRender = false
 
-
 
-      // 接口请求成功并首次添加标记后，动态添加重置按钮
 
-      addResetZoomButton(initialCenter, initialZoomLevel)
 
-    }
 
+    map!.fitBounds(bounds, { paddingTopLeft: [20, 70], paddingBottomRight: [400, 0] })
 
+    setTimeout(() => {
 
+      if (isFirstRender) {
 
+        initialCenter = map!.getCenter()
 
+        initialZoomLevel = map!.getZoom()
 
+        isFirstRender = false
 
+      }
 
+      addResetZoomButton(initialCenter!, initialZoomLevel!)
 
+    }, 0)
 
   }
 
 }
 
 
@@ -140,6 +138,7 @@ const getMarker = () => {
 
     .then((res) => {
 
       if (res.code === 200) {
 
         const { data } = res
 
+
 
         data &&
 
           data.forEach((item) => {
 
             const iconColorList = {

+ 45 - 3
src/views/Tracking/src/components/TrackingTable/src/TrackingTable.vue
Ver Ficheiro 

@@ -50,9 +50,6 @@ const handleColumns = (columns: any, status?: string) => {
 
     if (item.formatter === 'date') {
 
       curColumn = {
 
         ...curColumn,
 
-        sortBy: ({ row, column }: any) => {
 
-          return dayjs(row[column.field]).unix()
 
-        },
 
         formatter: ({ cellValue }: any) =>
 
           cellValue ? dayjs(cellValue).format('MMM-YYYY-DD ') : '--'
 
       }
 
@@ -273,7 +270,52 @@ const trackingTable = ref<any>({
 
   headerRowStyle: {
 
     backgroundColor: 'var(--color-table-header-bg)'
 
   },
 
+  sortConfig: {
 
+    sortMethod: (params) => {
 
+      const { data, sortList } = params
 
+      // 如果没有排序条件，直接返回原数据
 
+      if (sortList.length === 0) return data
 
+      // 对数据进行多重排序
 
+      const sortedData = [...data].sort((a, b) => {
 
+        for (const { field, order } of sortList) {
 
+          const curColumn = tableOriginColumnsField.value.find((item: any) => item.field === field)
 
+          if (!curColumn) continue
 
+
 
+          const typeName = curColumn.type
 
+          const aValue = a[field]
 
+          const bValue = b[field]
 
+
 
+          const compareResult = (aValue: any, bValue: any) => {
 
+            // 如果 aValue 或 bValue 是 null 或 undefined，优先处理这些值
 
+            if (aValue == null && bValue == null) {
 
+              return 0 // 如果两个值都为 null 或 undefined，视为相等
 
+            } else if (aValue == null) {
 
+              return -1 // 如果 aValue 是 null，bValue 不是，则将 aValue 视为较小值
 
+            } else if (bValue == null) {
 
+              return 1 // 如果 bValue 是 null，aValue 不是，则将 bValue 视为较小值
 
+            }
 
+
 
+            if (typeName === 'datetime' || typeName === 'date' || typeName === 'time') {
 
+              return dayjs(aValue).unix() - dayjs(bValue).unix()
 
+            } else if (isNaN(Number(aValue)) || isNaN(Number(bValue))) {
 
+              return aValue.localeCompare(bValue)
 
+            } else {
 
+              return Number(aValue) - Number(bValue)
 
+            }
 
+          }
 
 
+          const result = compareResult(aValue, bValue)
 
+          if (result !== 0) {
 
+            return order === 'asc' ? result : -result
 
+          }
 
+        }
 
+
 
+        return 0 // 如果所有字段都相等
 
+      })
 
+
 
+      return sortedData
 
+    }
 
+  },
 
   columnConfig: { resizable: true, useKey: true },
 
   rowConfig: { isHover: true },
 
   exportConfig: {