feat: 解决Tracking Booking页面bug

src/components/AutoSelect/src/AutoSelect.vue

@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import { useFiltersStore } from '@/stores/modules/filtersList'
 import { cloneDeep, debounce } from 'lodash'
+import { useRoute } from 'vue-router'
 import axios from 'axios'
 
+const route = useRoute()
+const searchMode = route.path.includes('booking') ? 'booking' : 'tracking'
 const filtersStore = useFiltersStore()
 
 const props = defineProps({
@@ -57,7 +60,7 @@ const remoteMethod = (query: string) => {
           term: query,
           type: props.type,
           search_field: props.title,
-          search_mode: 'booking',
+          search_mode: searchMode,
           ...queryData
         },
         { signal: newController.signal }

src/components/DateRange/src/DateRange.vue

@@ -7,8 +7,8 @@ import { useRoute } from 'vue-router'
 
 const route = useRoute()
 const searchMode = route.path.includes('booking') ? 'booking' : 'tracking'
-const etaKey = searchMode === 'booking' ? ['f_eta_start', 'f_eta_start'] : ['eta_start', 'eta_end']
-const etdKey = searchMode === 'booking' ? ['f_etd_start', 'f_etd_start'] : ['etd_start', 'etd_end']
+const etaKey = searchMode === 'booking' ? ['f_eta_start', 'f_eta_end'] : ['eta_start', 'eta_end']
+const etdKey = searchMode === 'booking' ? ['f_etd_start', 'f_etd_end'] : ['etd_start', 'etd_end']
 
 const filtersStore = useFiltersStore()
 const filtersList = computed(() => filtersStore.filtersList)

src/components/DateRange/src/components/VCalendarDate.vue

@@ -6,8 +6,6 @@ import { useUserStore } from '@/stores/modules/user'
 const userStore = useUserStore()
 const formatDate = userStore.dateFormat
 const valueFormatDate = 'MM/DD/YYYY'
-// type RangeValue = [Dayjs, Dayjs]
-// const ETDDate = ref<RangeValue>()
 const props = defineProps({
   CalendarWidth: {
     type: String,
@@ -44,20 +42,6 @@ const CreatePlaceholder = computed(() => {
     return ['Start ATA Time', 'End ATA Time']
   }
 })
-// watch(
-//   () => props.date,
-//   (current: any) => {
-//     if (current?.length == 2) {
-//       ETDDate.value = [
-//         current[0] ? dayjs(current[0], formatDate).format(valueFormatDate) : '',
-//         current[1] ? dayjs(current[1], formatDate).format(valueFormatDate) : ''
-//       ]
-//     } else {
-//       ETDDate.value = []
-//     }
-//   },
-//   { immediate: true, deep: true }
-// )
 
 const emit = defineEmits(['DateRangeChange', 'DateChange', 'update:date'])
 const open = ref(false)
@@ -120,9 +104,9 @@ const handleCalendarOpen = (date: any) => {
       :open="open"
       @change="changeRangeData"
       :placeholder="isNeedFooter ? ['Start Time', 'End Time'] : CreatePlaceholder"
-      :format="userStore.dateFormat"
+      :format="formatDate"
       @openChange="handleCalendarOpen(ETDDate)"
-      :valueFormat="userStore.dateFormat"
+      :valueFormat="formatDate"
       :value="props.date"
     >
       <template #suffixIcon>

src/components/MoreFilters/src/MoreFilters.vue

@@ -51,6 +51,31 @@ const initData = () => {
       item.value = []
     }
   })
+
+  const moreFiltersTitles = [
+    {
+      title: 'General',
+      numberKey: generalBadgeCount.value
+    },
+    {
+      title: 'Parties',
+      numberKey: partiesBadgeCount.value
+    },
+    {
+      title: 'Places',
+      numberKey: placesBadgeCount.value
+    },
+    {
+      title: 'Transportation',
+      numberKey: transportationBadgeCount.value
+    }
+  ]
+  collapseValue.value = []
+  moreFiltersTitles.forEach((item) => {
+    if (item.numberKey > 0) {
+      collapseValue.value.push(item.title)
+    }
+  })
 }
 const transportationBadgeCount = computed(() => {
   let count = 0
@@ -62,6 +87,14 @@ const transportationBadgeCount = computed(() => {
   return count
 })
 
+const placesBadgeCount = computed(() => {
+  return placesViewRef.value?.getBadgeData()
+})
+
+const partiesBadgeCount = computed(() => {
+  return partiesViewRef.value?.getBadgeData()
+})
+
 const incotermsRef = ref()
 const serviceRef = ref()
 const getQueryData = () => {
@@ -85,7 +118,7 @@ const getQueryData = () => {
     }
   })
 }
-const GeneralBadge = computed(() => {
+const generalBadgeCount = computed(() => {
   let count = 0
   if (searchMode === 'tracking') {
     if (incotermsRef.value?.getValue()) {
@@ -195,9 +228,9 @@ const moreFiltersGuideImg = computed(() => {
             <span class="collapse-title"
               >General
               <el-badge
-                v-if="GeneralBadge > 0 && !collapseValue?.includes('General')"
+                v-if="generalBadgeCount > 0 && !collapseValue?.includes('General')"
                 class="mark"
-                :value="GeneralBadge"
+                :value="generalBadgeCount"
                 type="warning"
             /></span>
           </template>
@@ -226,8 +259,8 @@ const moreFiltersGuideImg = computed(() => {
             <span class="collapse-title"
               >Parties
               <el-badge
-                v-if="partiesViewRef?.getBadgeData() && !collapseValue?.includes('Parties')"
-                :value="partiesViewRef?.getBadgeData()"
+                v-if="partiesBadgeCount && !collapseValue?.includes('Parties')"
+                :value="partiesBadgeCount"
                 class="mark"
                 type="warning"
             /></span>
@@ -240,8 +273,8 @@ const moreFiltersGuideImg = computed(() => {
             ><span class="collapse-title"
               >Places<el-badge
                 class="mark"
-                v-if="placesViewRef?.getBadgeData() && !collapseValue?.includes('Places')"
-                :value="placesViewRef?.getBadgeData()"
+                v-if="placesBadgeCount && !collapseValue?.includes('Places')"
+                :value="placesBadgeCount"
                 type="warning" /></span
           ></template>
           <PlacesView ref="placesViewRef"></PlacesView>

src/components/MoreFilters/src/components/SelectValue.vue

@@ -227,10 +227,11 @@ defineExpose({
   justify-content: space-between;
   background-color: white;
   background-color: transparent;
+  border-radius: 6px;
 }
 
 .el-dropdown-link {
-  width: 360px;
+  width: 368px;
   min-height: 32px;
   padding-top: 3px;
   display: flex;

src/components/SelectTable/src/SelectTable.vue

@@ -153,11 +153,12 @@ const clearSearchInput = () => {
   searchVal.value = ''
   state.tableData = []
   state.currentPage = 1
-  state.total = 0
+  state.total = -1
   if (searchAbortController) {
     searchAbortController.abort()
     searchAbortController = null
   }
+  tagInputRef.value?.blur()
 }
 
 defineExpose({ clearSearchInput })
@@ -178,6 +179,7 @@ onUnmounted(() => {
       :teleported="false"
       :width="props.poverWidth"
       trigger="manual"
+      @hide="clearSearchInput"
     >
       <template #reference>
         <!-- 点击此区域才打开弹窗 -->

src/views/Booking/src/BookingView.vue

@@ -149,6 +149,13 @@ const tabChange = (changeTabList: any) => {
 }
 // 点击search按钮
 const SearchInput = () => {
+  filtersStore.updateFilter({
+    title: 'text search',
+    value: textSearch.value,
+    keyType: 'normal',
+    key: '_textSearch',
+    isHide: true
+  })
   getBookingData()
 }
 

src/views/Tracking/src/TrackingView.vue

@@ -37,6 +37,13 @@ watch(
         key: 'filterTag'
       })
       textSearch.value = headerSearchValue.value
+      filtersStore.updateFilter({
+        title: 'text search',
+        value: textSearch.value,
+        keyType: 'normal',
+        key: '_textSearch',
+        isHide: true
+      })
       getTrackingData()
     }
   }
@@ -139,6 +146,13 @@ const initPage = () => {
       key: 'filterTag'
     })
     textSearch.value = headerSearchValue.value
+    filtersStore.updateFilter({
+      title: 'text search',
+      value: textSearch.value,
+      keyType: 'normal',
+      key: '_textSearch',
+      isHide: true
+    })
   } else if (!filtersList.value || (filtersList.value && filtersList.value.length == 0)) {
     filtersStore.updateFilter({
       title: 'Transport Mode',
@@ -201,6 +215,13 @@ const getTabsList = (list) => {
 
 // 点击search按钮
 const SearchInput = () => {
+  filtersStore.updateFilter({
+    title: 'text search',
+    value: textSearch.value,
+    keyType: 'normal',
+    key: '_textSearch',
+    isHide: true
+  })
   getTrackingData()
 }