feat:调整Tracking Booking 首页的重构

src/components/DateRange/src/DateRange.vue

@@ -106,6 +106,9 @@ const DateRangeSearch = () => {
 
 // 清除
 const clearRest = () => {
+  etdDateRange.value = []
+  etaDateRange.value = []
+  otherDateType.value = []
   filtersStore.deleteFilterByTitle('ETA')
   filtersStore.deleteFilterByTitle('ETD')
   allOtherType.value.forEach((item) => {

src/components/MoreFilters/src/MoreFilters.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import AutoSelect from '@/components/AutoSelect'
-// import SelectAutoSelect from '@/components/SelectAutoSelect'
 import { useFiltersStore } from '@/stores/modules/filtersList'
 import { useRoute } from 'vue-router'
 
@@ -18,25 +17,6 @@ const props = defineProps({
   serviceList: Array<any>
 })
 
-const InputForm = ref({
-  parties: {
-    Shippername: [],
-    Consigneename: []
-  },
-  transportation: {
-    Vessel: [],
-    Voyage: []
-  },
-  palces: {
-    Origin: [],
-    Destination: []
-  },
-  General: {
-    Incoterms: '',
-    Service: ''
-  }
-})
-
 const transportaionData = ref([
   {
     title: 'Vessel',
@@ -105,7 +85,18 @@ const getQueryData = () => {
     }
   })
 }
-const GeneralBadge = ref()
+const GeneralBadge = computed(() => {
+  let count = 0
+  if (searchMode === 'tracking') {
+    if (incotermsRef.value?.getValue()) {
+      count++
+    }
+    if (serviceRef.value?.getValue()) {
+      count++
+    }
+  }
+  return count
+})
 
 const collapseValue = ref()
 
@@ -122,14 +113,41 @@ const handleSearch = () => {
   drawer.value = false
 }
 // 清除
-const clearrest = () => {}
-
-const IncotermsSearch = (val: any, value: any) => {
-  InputForm.value.General.Incoterms = val.data
-}
-const ServiceSearch = (val: any, value: any) => {
-  InputForm.value.General.Service = val.data
+const clearrest = () => {
+  const moreFilters = [
+    'shipper_city',
+    'shipper',
+    'consignee',
+    'consignee_city',
+    'origin',
+    'agent',
+    'sales_rep',
+    'notify',
+    'bill_to',
+    'dest_op',
+    'destination',
+    'f_vessel/m_vessel',
+    'f_voyage/m_voyage',
+    'place_of_delivery/place_of_delivery_exp',
+    'place_of_receipt/place_of_receipt_exp',
+    'fport_of_loading_uncode/fport_of_loading_exp',
+    'Place of Discharge',
+    'incoterms',
+    'service'
+  ]
+  moreFilters.forEach((item) => {
+    filtersStore.deleteFilterByKey(item)
+  })
+  partiesViewRef.value.resetData()
+  placesViewRef.value.resetData()
+  incotermsRef.value?.resetData()
+  serviceRef.value?.resetData()
+  transportaionData.value.forEach((item) => {
+    item.value = []
+  })
+  emit('clearMoreFiltersTags')
 }
+
 const clickmorefilters = () => {
   drawer.value = true
 }
@@ -175,27 +193,30 @@ const moreFiltersGuideImg = computed(() => {
         <el-collapse-item class="collapse_item" name="General" v-if="searchMode === 'tracking'">
           <template #title>
             <span class="collapse-title"
-              >General <el-badge class="mark" :value="GeneralBadge" type="warning"
+              >General
+              <el-badge
+                v-if="GeneralBadge > 0 && !collapseValue?.includes('General')"
+                class="mark"
+                :value="GeneralBadge"
+                type="warning"
             /></span>
           </template>
           <div class="ETD">
             <div class="ETD_title">Incoterms</div>
             <SelectValue
               title="Incoterms"
-              key="incoterms"
+              keyValue="incoterms"
               ref="incotermsRef"
               :transportListData="props.incotermsList"
-              @generalSearch="IncotermsSearch"
             ></SelectValue>
           </div>
           <div class="ETA">
             <div class="ETD_title">Service</div>
             <SelectValue
               title="Service"
-              key="service"
+              keyValue="service"
               ref="serviceRef"
               :transportListData="props.serviceList"
-              @generalSearch="ServiceSearch"
             ></SelectValue>
           </div>
         </el-collapse-item>

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

@@ -166,10 +166,17 @@ const getBadgeData = () => {
   return count
 }
 
+const resetData = () => {
+  pageData.value.forEach((item) => {
+    item.value = []
+  })
+}
+
 defineExpose({
   getQueryData,
   initData,
-  getBadgeData
+  getBadgeData,
+  resetData
 })
 </script>
 

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

@@ -162,10 +162,18 @@ const getBadgeData = () => {
   return count
 }
 
+const resetData = () => {
+  pageData.value.forEach((item) => {
+    item.value = []
+  })
+  moreList.value = []
+}
+
 defineExpose({
   initData,
   getQueryData,
-  getBadgeData
+  getBadgeData,
+  resetData
 })
 </script>
 

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

@@ -12,11 +12,10 @@ interface ListItem {
 interface Props {
   transportListData: ListItem[]
   title: string
-  key: string
+  keyValue: string
 }
 const props = withDefaults(defineProps<Props>(), {})
 const transportList = ref(props.transportListData)
-const title = ref(props.title)
 const checkAll = ref()
 const selectData = ref()
 watch(
@@ -84,20 +83,24 @@ const getQueryData = () => {
   if (checkAll.value) {
     filtersStore.updateFilter({
       title: props.title,
-      key: props.key,
+      key: props.keyValue,
       value: ['All'],
       keyType: 'array'
     })
   } else {
     filtersStore.updateFilter({
       title: props.title,
-      key: props.key,
+      key: props.keyValue,
       value: selectData.value.split(', '),
       keyType: 'array'
     })
   }
 }
 
+const getValue = () => {
+  return selectData.value
+}
+
 const initData = () => {
   const filterData = filtersStore.getFilterByTitle(props.title)
   if (filterData) {
@@ -126,9 +129,18 @@ const initData = () => {
   }
 }
 
+const resetData = () => {
+  transportList.value.forEach((item) => {
+    item.checked = false
+  })
+  selectData.value = ''
+  filtersStore.deleteFilterByTitle(props.title)
+}
 defineExpose({
   getQueryData,
-  initData
+  getValue,
+  initData,
+  resetData
 })
 </script>
 <template>
@@ -155,7 +167,7 @@ defineExpose({
       </div>
       <template #dropdown>
         <div class="dropdownwidth">
-          <div class="title" style="margin-bottom: 3px">{{ title }}</div>
+          <div class="title" style="margin-bottom: 3px">{{ props.title }}</div>
           <el-dropdown-menu>
             <el-dropdown-item>
               <el-checkbox v-model="checkAll" class="checkbox" @change="handleCheckAll">

src/views/Booking/src/BookingView.vue

@@ -173,6 +173,15 @@ onBeforeRouteLeave((route: any) => {
   }
 })
 
+const getTabsList = (list) => {
+  tabList.value.forEach((item) => {
+    const current = list.find((i) => i.name === item.name)
+    if (current) {
+      item.number = current.number
+    }
+  })
+}
+
 const handleSearch = () => {
   getBookingData()
 }
@@ -270,6 +279,7 @@ const handleSearch = () => {
     :textSearch="textSearch"
     :height="containerHeight"
     ref="BookingTable_ref"
+    @getTabsList="getTabsList"
   ></BookingTable>
 </template>
 

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

@@ -135,6 +135,7 @@ const assignTableData = (data: any) => {
     })
   }, 1000)
 }
+const emit = defineEmits(['getTabsList'])
 // 获取表格数据
 const getTableData = async (isPageChange?: boolean) => {
   const rc = isPageChange ? pageInfo.value.total : -1
@@ -154,6 +155,7 @@ const getTableData = async (isPageChange?: boolean) => {
     .then((res: any) => {
       if (res.code === 200) {
         assignTableData(res.data)
+        emit('getTabsList', res.data.tagsList)
       }
     })
     .finally(() => {

src/views/Tracking/src/TrackingView.vue

@@ -190,6 +190,15 @@ const tabChange = (changeTabList: any) => {
 
   getTrackingData()
 }
+const getTabsList = (list) => {
+  tabList.value.forEach((item) => {
+    const current = list.find((i) => i.name === item.name)
+    if (current) {
+      item.number = current.number
+    }
+  })
+}
+
 // 点击search按钮
 const SearchInput = () => {
   getTrackingData()
@@ -215,9 +224,13 @@ const handleClose = (tagTitle: any) => {
   getTrackingData()
 }
 
-const clearDaterangeTags = () => {}
+const clearDaterangeTags = () => {
+  getTrackingData()
+}
 
-const clearMoreFiltersTags = () => {}
+const clearMoreFiltersTags = () => {
+  getTrackingData()
+}
 
 onBeforeRouteLeave((route: any) => {
   // guideStore.clearGuide()
@@ -323,6 +336,7 @@ onBeforeRouteLeave((route: any) => {
     :textSearch="textSearch"
     :height="containerHeight"
     ref="trackingTable_ref"
+    @getTabsList="getTabsList"
   ></TrackingTable>
 </template>
 

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

@@ -158,6 +158,7 @@ const assignTableData = (data: any) => {
   }, 1000)
 }
 
+const emit = defineEmits(['getTabsList'])
 // 切换分页时重新获取表格数据
 const getTableData = async (isPageChange?: boolean) => {
   // 保存页长以及当前页码
@@ -177,6 +178,7 @@ const getTableData = async (isPageChange?: boolean) => {
     .then((res: any) => {
       if (res.code === 200) {
         assignTableData(res.data)
+        emit('getTabsList', res.data.tagsList)
       }
     })
     .finally(() => {