feat: 重构more filter部分代码

src/components/FliterTags/src/FilterTags.vue

@@ -135,7 +135,7 @@ const handleTagToggle = (index: any, checked: any) => {
   background-color: var(--color-tag-cancelled-bg);
   color: var(--color-tag-cancelled);
 }
-.v-tag__departure {
+.v-tag__departed {
   font-weight: 400;
   background-color: var(--color-tag-departure-bg);
   color: var(--color-tag-departure);

src/components/MoreFilters/src/MoreFilters.new.vue

@@ -8,6 +8,7 @@ const route = useRoute()
 const searchMode = route.path.includes('booking') ? 'booking' : 'tracking'
 
 const filtersStore = useFiltersStore()
+const filtersList = computed(() => filtersStore.filtersList)
 
 const drawer = ref(false)
 
@@ -58,8 +59,18 @@ const placesViewRef = ref()
 const initData = () => {
   partiesViewRef.value.initData()
   placesViewRef.value.initData()
-  incotermsRef.value.initData()
-  serviceRef.value.initData()
+  if (searchMode === 'tracking') {
+    incotermsRef.value?.initData()
+    serviceRef.value?.initData()
+  }
+  transportaionData.value.forEach((item) => {
+    const filterItem = filtersList.value.find((filterItem) => filterItem.title === item.title)
+    if (filterItem) {
+      item.value = filterItem.value as string[]
+    } else {
+      item.value = []
+    }
+  })
 }
 const transportationBadgeCount = computed(() => {
   let count = 0
@@ -76,8 +87,10 @@ const serviceRef = ref()
 const getQueryData = () => {
   partiesViewRef.value.getQueryData()
   placesViewRef.value.getQueryData()
-  incotermsRef.value.getQueryData()
-  serviceRef.value.getQueryData()
+  if (searchMode === 'tracking') {
+    incotermsRef.value.getQueryData()
+    serviceRef.value.getQueryData()
+  }
   // Transportation
   transportaionData.value.forEach((item) => {
     if (item.value.length !== 0) {
@@ -105,8 +118,8 @@ const changeTransportationData = (data: any, title: string) => {
 const emit = defineEmits(['handleSearch', 'clearMoreFiltersTags'])
 const handleSearch = () => {
   getQueryData()
-  console.log(filtersStore, 'value')
-  // emit('handleSearch')
+  emit('handleSearch')
+  drawer.value = false
 }
 // 清除
 const clearrest = () => {}
@@ -267,7 +280,9 @@ img.more-filters-guide-class {
   fill: var(--color-danger);
   cursor: pointer;
 }
-
+:deep(.el-collapse-item__header) {
+  background-color: var(--color-header-bg);
+}
 .More_Filters {
   display: flex;
   align-items: center;

src/components/MoreFilters/src/components/PartiesView.vue

@@ -7,7 +7,7 @@ const route = useRoute()
 const searchMode = route.path.includes('booking') ? 'booking' : 'tracking'
 
 const filtersStore = useFiltersStore()
-const filtersList = filtersStore.filtersList
+const filtersList = computed(() => filtersStore.filtersList)
 
 const pageData = ref([
   {
@@ -70,11 +70,12 @@ if (searchMode === 'tracking') {
 const moreList = ref([])
 
 const initData = () => {
+  console.log('initData')
   moreList.value = []
   pageData.value.forEach((item) => {
     item.value = []
   })
-  filtersList.forEach((item) => {
+  filtersList.value.forEach((item) => {
     pageData.value.forEach((pageItem) => {
       if (item.title === pageItem.title) {
         pageItem.value = item.value as string[]

src/components/MoreFilters/src/components/PlacesView.vue

@@ -7,7 +7,7 @@ const route = useRoute()
 const searchMode = route.path.includes('booking') ? 'booking' : 'tracking'
 
 const filtersStore = useFiltersStore()
-const filtersList = filtersStore.filtersList
+const filtersList = computed(() => filtersStore.filtersList)
 
 const pageData = ref([
   {
@@ -54,7 +54,7 @@ const initData = () => {
   pageData.value.forEach((item) => {
     item.value = []
   })
-  filtersList.forEach((item) => {
+  filtersList.value.forEach((item) => {
     pageData.value.forEach((ite) => {
       if (item.title === ite.title) {
         ite.value = item.value as string[]

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

@@ -26,6 +26,10 @@ watch(
     checkAll.value = transportList.value.every((item) => {
       return item.checked
     })
+  },
+  {
+    immediate: true,
+    deep: true
   }
 )
 
@@ -148,14 +152,14 @@ defineExpose({
       </div>
       <template #dropdown>
         <div class="dropdownwidth">
-          <div class="title">{{ title }}</div>
+          <div class="title" style="margin-bottom: 3px">{{ title }}</div>
           <el-dropdown-menu>
             <el-dropdown-item>
               <el-checkbox v-model="checkAll" class="checkbox" @change="handleCheckAll">
                 <div class="checkbox_title">Select All</div>
               </el-checkbox>
             </el-dropdown-item>
-            <el-divider></el-divider>
+            <el-divider style="border-color: var(--input-border)"></el-divider>
             <div class="inval" :class="{ seeall: seeall }">
               <el-dropdown-item v-for="(item, index) in transportList" :key="index">
                 <el-checkbox
@@ -203,23 +207,26 @@ defineExpose({
 .select {
   cursor: pointer;
   width: 368px;
-  height: 32px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   background-color: white;
-  border: 1px solid var(--color-select-border);
-  border-radius: var(--border-radius-6);
   background-color: transparent;
 }
-.select:hover {
-  border: 1px solid var(--color-theme);
-}
+
 .el-dropdown-link {
   width: 360px;
+  min-height: 32px;
+  padding-top: 3px;
   display: flex;
   align-items: center;
   justify-content: space-between;
+  border-radius: var(--border-radius-6);
+  border: 1px solid var(--color-select-border);
+
+  &:hover {
+    border: 1px solid var(--color-theme);
+  }
 }
 .select_title {
   font-size: var(--font-size-3);
@@ -231,6 +238,7 @@ defineExpose({
   font-size: var(--font-size-3);
   font-weight: 400;
   margin-left: 8.53px;
+  line-height: 21px;
   color: var(--color-neutral-1);
 }
 .title {

src/components/SelectTableSelect/src/SelectTableSelect.vue

@@ -41,17 +41,16 @@ const getAvailableOptions = (curTitle: string) => {
   })
 }
 
-// 删除当前more type
 const deleteType = (id: number) => {
   emit('deleteType', id)
 }
 const selectTableRef = ref()
-// 选中type改变
+
+// 在title变化时，清空搜索框
 const changeType = (item: any) => {
   item.value = []
   const id = item.id
   emit('changeType', item)
-  // 在title变化时，清空搜索框
   nextTick(() => {
     const index = pageData.value.findIndex((type) => {
       return type.id === id
@@ -59,7 +58,6 @@ const changeType = (item: any) => {
     selectTableRef.value[index].clearSearchInput()
   })
 }
-// 选中name改变
 const emit = defineEmits(['changeType', 'deleteType', 'changeData'])
 
 const changePageData = (data: any, title: string) => {

src/views/Booking/src/BookingView.new.vue

@@ -94,18 +94,17 @@ const initPage = () => {
 
 initPage()
 
-const BookingSearch = ref()
+const textSearch = ref()
 const tableLoadingTableData = ref(false)
-let searchTableQeury: any = {}
 
 const handleClose = (tagTitle: any) => {
   filtersStore.deleteFilterByTitle(tagTitle)
-  getBookingdata()
+  getBookingData()
 }
 
 const clearfilters = () => {
   filtersStore.clearFilters()
-  getBookingdata()
+  getBookingData()
 }
 
 const clearDaterangeTags = () => {}
@@ -115,7 +114,7 @@ const BookingTable_ref = ref()
 const transportListItem = ref()
 
 const isShowAlertIcon = ref(false)
-const getBookingdata = () => {
+const getBookingData = () => {
   const queryData = filtersStore.getQueryData
 
   tableLoadingTableData.value = true
@@ -126,6 +125,7 @@ const getBookingdata = () => {
       ps: BookingTable_ref.value.pageInfo.pageSize,
       rc: -1,
       other_filed: '',
+      _textSearch: textSearch.value,
       ...queryData
     })
     .then((res: any) => {
@@ -144,9 +144,9 @@ const getBookingdata = () => {
         })
 
         sessionStorage.setItem('BookingData', JSON.stringify(res.data))
-        BookingTable_ref.value.searchTableData(searchTableQeury)
+        BookingTable_ref.value.searchTableData()
         // 查询没结果的话显示icon
-        if (BookingSearch.value != '' && BookingSearch.value != undefined) {
+        if (textSearch.value != '' && textSearch.value != undefined) {
           if (res.data.searchData.length == 0) {
             isShowAlertIcon.value = true
           }
@@ -166,16 +166,15 @@ const tabChange = (changeTabList: any) => {
     key: 'filterTag'
   })
 
-  getBookingdata()
+  getBookingData()
 }
 // 点击search按钮
 const SearchInput = () => {
-  searchTableQeury._textSearch = BookingSearch.value
-  getBookingdata()
+  getBookingData()
 }
 
 onMounted(() => {
-  getBookingdata()
+  getBookingData()
 })
 import BookingGuide from './components/BookingGuide.vue'
 import { useGuideStore } from '@/stores/modules/guide'
@@ -195,6 +194,10 @@ onBeforeRouteLeave((route: any) => {
     filtersStore.clearFilters()
   }
 })
+
+const handleSearch = () => {
+  getBookingData()
+}
 </script>
 
 <template>
@@ -211,7 +214,7 @@ onBeforeRouteLeave((route: any) => {
           <div class="search">
             <el-input
               placeholder="Enter Booking/HBL/PO/Carrier Booking No. "
-              v-model="BookingSearch"
+              v-model="textSearch"
               class="log_input"
               @keyup.enter="SearchInput"
             >
@@ -242,15 +245,16 @@ onBeforeRouteLeave((route: any) => {
           </div>
           <TransportMode
             :transportListItem="transportListItem"
-            @transportSearch="getBookingdata()"
+            @transportSearch="getBookingData()"
           ></TransportMode>
           <DateRange
-            @DateRangeSearch="getBookingdata()"
+            @DateRangeSearch="getBookingData()"
             @clearDaterangeTags="clearDaterangeTags"
           ></DateRange>
         </div>
       </div>
       <MoreFilters
+        @handleSearch="handleSearch"
         @clearMoreFiltersTags="clearMoreFiltersTags"
         :isShowMoreFiltersGuidePhoto="guideStore.booking.isShowMoreFiltersGuidePhoto"
       ></MoreFilters>
@@ -284,7 +288,11 @@ onBeforeRouteLeave((route: any) => {
       <div class="text_button" @click="clearfilters">Clear Filters</div>
     </div>
   </div>
-  <BookingTable :height="containerHeight" ref="BookingTable_ref"></BookingTable>
+  <BookingTable
+    :textSearch="textSearch"
+    :height="containerHeight"
+    ref="BookingTable_ref"
+  ></BookingTable>
 </template>
 
 <style lang="scss" scoped>

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

@@ -22,30 +22,13 @@ const props = defineProps({
   height: {
     type: Number,
     default: 440
+  },
+  textSearch: {
+    type: String,
+    default: ''
   }
 })
 
-const tagsData = computed(() => {
-  return filtersList.value.map((filter) => {
-    if (filter.keyType === 'dateRange') {
-      return {
-        title: filter.title,
-        value: filter.title + ': ' + filter.value[0] + ' To ' + filter.value[1]
-      }
-    } else if (filter.keyType === 'array') {
-      return {
-        title: filter.title,
-        value: filter.title + ': ' + filter.value.join(', ')
-      }
-    } else {
-      return {
-        title: filter.title,
-        value: filter.title + ': ' + filter.value
-      }
-    }
-  })
-})
-
 const tableLoadingTable = ref()
 const getLoadingData = (data: any) => {
   tableLoadingTable.value = data
@@ -165,6 +148,7 @@ const getTableData = async (isPageChange?: boolean) => {
       ps: pageInfo.value.pageSize,
       rc,
       other_filed: '',
+      _textSearch: props.textSearch,
       ...queryData
     })
     .then((res: any) => {
@@ -182,7 +166,7 @@ const getTableData = async (isPageChange?: boolean) => {
     })
 }
 // 查询列表数据
-const searchTableData = (data: any) => {
+const searchTableData = () => {
   if (sessionStorage.getItem('BookingData') != null) {
     const data = JSON.parse(sessionStorage.getItem('BookingData') as string) || {}
     assignTableData(data)
@@ -195,6 +179,8 @@ const searchTableData = (data: any) => {
         sessionStorage.removeItem('BookingData')
       })
     }, 100)
+  } else {
+    getTableData()
   }
 }
 
@@ -346,7 +332,6 @@ const getExportTableData = (status: number) => {
   } else {
     column = buildColumnString(allTable.value.columns)
   }
-  const queryData = filtersStore.getQueryData
 
   $api
     .getAllBookingTableData({

src/views/Tracking/src/TrackingView.new.vue

@@ -14,7 +14,6 @@ import { useFiltersStore } from '@/stores/modules/filtersList'
 
 const userStore = useUserStore()
 const formatDate = userStore.dateFormat
-const valueFormatDate = 'MM/DD/YYYY'
 
 const filterRef: Ref<HTMLElement | null> = ref(null)
 const containerHeight = useCalculatingHeight(document.documentElement, 246, [filterRef])
@@ -73,33 +72,71 @@ const initPage = () => {
 
 initPage()
 
-const TrackingSearch = ref()
+const textSearch = ref()
 const tableLoadingTableData = ref(false)
 
+// const tabList = ref([
+//   {
+//     name: 'All',
+//     number: 0,
+//     checked: true,
+//     type: 'all'
+//   },
+//   {
+//     name: 'Created',
+//     number: 0,
+//     checked: false,
+//     type: 'created'
+//   },
+//   {
+//     name: 'Confirmed',
+//     number: 0,
+//     checked: false,
+//     type: 'confirmed'
+//   },
+//   {
+//     name: 'Cancelled',
+//     number: 0,
+//     checked: false,
+//     type: 'cancelled'
+//   }
+// ])
 const tabList = ref([
   {
     name: 'All',
     number: 0,
-    checked: true,
-    type: 'all'
+    type: 'all',
+    checked: true
   },
   {
     name: 'Created',
     number: 0,
-    checked: false,
-    type: 'created'
+    type: 'created',
+    checked: false
   },
   {
-    name: 'Confirmed',
+    name: 'Cargo Received',
     number: 0,
-    checked: false,
-    type: 'confirmed'
+    type: 'cargo_received',
+    checked: false
   },
   {
-    name: 'Cancelled',
+    name: 'Departed',
     number: 0,
-    checked: false,
-    type: 'cancelled'
+    type: 'departed',
+    checked: false
+  },
+  {
+    name: 'Arrived',
+    number: 0,
+    type: 'arrived',
+    checked: false
+  },
+  {
+    name: 'Completed',
+    number: 0,
+    type: 'completed',
+    checked: false
   }
 ])
 
@@ -141,11 +178,13 @@ const getTrackingData = () => {
       ps: TrackingTable_ref.value.pageInfo.pageSize,
       rc: -1,
       other_filed: '',
+      _textSearch: textSearch.value,
       ...queryData
     })
     .then((res: any) => {
       if (res.code === 200) {
         transportListItem.value = res.data.TransportList
+
         tabList.value = res.data.tagsList
         const checkedTabNames = tabList.value
           .filter((item) => item.checked)
@@ -162,7 +201,7 @@ const getTrackingData = () => {
         sessionStorage.setItem('TrackingData', JSON.stringify(res.data))
         TrackingTable_ref.value.searchTableData()
         // 查询没结果的话显示icon
-        if (TrackingSearch.value != '' && TrackingSearch.value != undefined) {
+        if (textSearch.value != '' && textSearch.value != undefined) {
           if (res.data.searchData.length == 0) {
             isShowAlertIcon.value = true
           }
@@ -190,7 +229,7 @@ const tabChange = (changeTabList: any) => {
 }
 // 点击search按钮
 const SearchInput = () => {
-  TrackingTable_ref.value.searchTableData()
+  getTrackingData()
 }
 
 import TrackingGuide from './components/TrackingGuide.vue'
@@ -203,7 +242,10 @@ const handleGuide = () => {
   trackingGuideRef.value.startGuide() // 开始引导
 }
 
-const clearfilters = () => {}
+const clearfilters = () => {
+  filtersStore.clearFilters()
+  getTrackingData()
+}
 
 const handleClose = (tagTitle: any) => {
   filtersStore.deleteFilterByTitle(tagTitle)
@@ -232,12 +274,12 @@ onBeforeRouteLeave((route: any) => {
   <div class="display" ref="filterRef">
     <div class="filter-box">
       <div class="filters-container" id="filters-container-guide">
-        <FilterTags :tagsList="tabList" @changeTag="tabChange"></FilterTags>
+        <FilterTags :tagsList="tabList" @tabChange="tabChange"></FilterTags>
         <div class="heaer_top">
           <div class="search">
             <el-input
               placeholder="Enter Booking/HBL/PO/Container/Carrier Booking No. "
-              v-model="TrackingSearch"
+              v-model="textSearch"
               class="log_input"
               @keyup.enter="SearchInput"
             >
@@ -313,7 +355,11 @@ onBeforeRouteLeave((route: any) => {
       <div class="text_button" @click="clearfilters">Clear Filters</div>
     </div>
   </div>
-  <TrackingTable :height="containerHeight" ref="TrackingTable_ref"></TrackingTable>
+  <TrackingTable
+    :textSearch="textSearch"
+    :height="containerHeight"
+    ref="TrackingTable_ref"
+  ></TrackingTable>
 </template>
 
 <style lang="scss" scoped>

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

@@ -24,6 +24,10 @@ const props = defineProps({
   height: {
     type: Number,
     default: 440
+  },
+  textSearch: {
+    type: String,
+    default: ''
   }
 })
 const tableLoadingTable = ref()
@@ -182,6 +186,7 @@ const getTableData = async (isPageChange?: boolean) => {
       ps: pageInfo.value.pageSize,
       rc,
       other_filed: '',
+      _textSearch: props.textSearch,
       ...queryData
     })
     .then((res: any) => {
@@ -201,7 +206,6 @@ const getTableData = async (isPageChange?: boolean) => {
 
 // 查询列表数据
 const searchTableData = () => {
-  console.log(sessionStorage.getItem('TrackingData'), 'tableData')
   if (sessionStorage.getItem('TrackingData') != null) {
     const data = JSON.parse(sessionStorage.getItem('TrackingData') as string) || {}
     assignTableData(data)
@@ -214,6 +218,8 @@ const searchTableData = () => {
         sessionStorage.removeItem('TrackingData')
       })
     }, 100)
+  } else {
+    getTableData()
   }
 }