feat: 解决morefilter部分赋值bug

src/components/DateRange/src/DateRange.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import emitter from '@/utils/bus'
-import { ref, watch, onMounted, onBeforeMount } from 'vue'
 import IconDropDown from '@/components/IconDropDown'
 import CalendarDate from './components/CalendarDate.vue'
 import dayjs from 'dayjs'

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

@@ -85,12 +85,12 @@ const transportationBadgeCount = computed(() => {
 const incotermsRef = ref()
 const serviceRef = ref()
 const getQueryData = () => {
-  partiesViewRef.value.getQueryData()
-  placesViewRef.value.getQueryData()
   if (searchMode === 'tracking') {
     incotermsRef.value.getQueryData()
     serviceRef.value.getQueryData()
   }
+  partiesViewRef.value.getQueryData()
+  placesViewRef.value.getQueryData()
   // Transportation
   transportaionData.value.forEach((item) => {
     if (item.value.length !== 0) {

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

@@ -103,11 +103,16 @@ const addType = () => {
   })
 }
 
-const changeData = (data: any) => {
-  const index = moreList.value.findIndex((item) => item.title === data.title)
-  moreList.value[index].value = cloneDeep(data)
+const changeTitle = (data: any, title: string) => {
+  const index = moreList.value.findIndex((item) => item.id === data.id)
+  moreList.value[index].title = title
+  moreList.value[index].value = []
 }
-const deleteType = (title: string) => {
+const changeValue = (data: any, value: any) => {
+  const index = moreList.value.findIndex((item) => item.id === data.id)
+  moreList.value[index].value = value
+}
+const deleteItem = (title: string) => {
   const index = moreList.value.findIndex((item) => item.title === title)
   moreList.value.splice(index, 1)
 }
@@ -186,9 +191,10 @@ defineExpose({
 
     <SelectAutoSelect
       :typeOptions="partyTypeOptions"
-      :pageData="moreList"
-      @deleteType="deleteType"
-      @changeData="changeData"
+      :data="moreList"
+      @deleteItem="deleteItem"
+      @changeTitle="changeTitle"
+      @changeValue="changeValue"
       placeholder="Please input party name"
     >
     </SelectAutoSelect>

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

@@ -90,12 +90,13 @@ const addType = () => {
   })
 }
 
-const changeType = (data: any) => {
-  const needKey = placeTypeOptions.value.find((item) => item.title === data.title)?.needKey
+const changeTitle = (id: any, title: string) => {
+  console.log('changeTitle id', id, 'title', title)
+  const needKey = placeTypeOptions.value.find((item) => item.title === title)?.needKey
   moreList.value.forEach((item) => {
-    if (item.id === data.id) {
-      item.value = data.value
-      item.title = data.title
+    if (item.id === id) {
+      item.value = []
+      item.title = title
       item.needKey = needKey
     }
   })
@@ -178,7 +179,7 @@ defineExpose({
     :data="moreList"
     :dateTypeoptions="placeTypeOptions"
     @changeData="changeData"
-    @changeType="changeType"
+    @changeTitle="changeTitle"
     @deleteType="deleteType"
     placeholder="Please input places name"
   >

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

@@ -77,7 +77,10 @@ const clickSeeAll = () => {
 }
 
 const getQueryData = () => {
-  if (!selectData.value) filtersStore.deleteFilterByTitle(props.title)
+  if (!selectData.value) {
+    filtersStore.deleteFilterByTitle(props.title)
+    return
+  }
   if (checkAll.value) {
     filtersStore.updateFilter({
       title: props.title,

src/components/SelectTableSelect/src/SelectTableSelect.vue

@@ -47,25 +47,24 @@ const deleteType = (id: number) => {
 const selectTableRef = ref()
 
 // 在title变化时，清空搜索框
-const changeType = (item: any) => {
-  item.value = []
-  const id = item.id
-  emit('changeType', item)
+const changeTitle = (title: string, item: any) => {
+  // item.value = []
+  emit('changeTitle', item.id, title)
   nextTick(() => {
     const index = pageData.value.findIndex((type) => {
-      return type.id === id
+      return type.id === item.id
     })
     selectTableRef.value[index].clearSearchInput()
   })
 }
-const emit = defineEmits(['changeType', 'deleteType', 'changeData'])
+const emit = defineEmits(['changeTitle', 'deleteType', 'changeData'])
 
 const changePageData = (data: any, title: string) => {
   emit('changeData', data, title)
 }
 </script>
 <template>
-  <div class="AddType" v-for="(item, index) in pageData" :key="item.id">
+  <div class="AddType" v-for="item in pageData" :key="item.id">
     <div>
       <div class="Date_Title">
         <div class="ETD_title">Places Type</div>
@@ -76,10 +75,10 @@ const changePageData = (data: any, title: string) => {
         </span>
       </div>
       <el-select
-        v-model="item.title"
+        :model-value="item.title"
         :suffix-icon="IconDropDown"
         class="testname"
-        @change="changeType(item)"
+        @change="changeTitle($event, item)"
         placeholder="Please Select Party Type"
       >
         <el-option

src/components/selectAutoSelect/src/selectAutoSelect.vue

@@ -12,18 +12,19 @@ const filtersStore = useFiltersStore()
 interface Props {
   placeholder: string
   typeOptions: Array<any>
-  pageData: Array<any>
+  data: Array<any>
 }
 
 const loading = ref(false)
 const props = withDefaults(defineProps<Props>(), {})
 // 搜索得到的值列表
 const detailsData = ref([])
-const typeData = ref(cloneDeep(props.pageData))
+const pageData = ref(cloneDeep(props.data))
 watch(
-  () => props.pageData,
+  () => props.data,
   (newVal) => {
-    typeData.value = cloneDeep(newVal)
+    console.log('props.data changed', newVal)
+    pageData.value = cloneDeep(newVal)
   },
   {
     deep: true
@@ -35,7 +36,7 @@ const originnalTypeOptions = ref(props.typeOptions)
 // 计算排除其他已选项后的可用选项
 const getAvailableOptions = (curTitle: string) => {
   // 获取其他下拉已选的值（排除自己）
-  const otherTypeOptions = typeData.value
+  const otherTypeOptions = pageData.value
     .filter((type) => {
       return type.title !== curTitle
     })
@@ -46,15 +47,21 @@ const getAvailableOptions = (curTitle: string) => {
     return !otherTypeOptions.includes(type.title)
   })
 }
-const emit = defineEmits(['deleteType', 'changeType'])
+const emit = defineEmits(['deleteItem', 'changeTitle', 'changeValue'])
 
-const changeData = (item: any) => {
-  item.value = []
-  emit('changeType', item)
+const changeTitle = (title: string, item: any) => {
+  console.log('changeTitle item', item, 'value', title)
+  // item.value = []
+  emit('changeTitle', item, title)
+}
+const changeValue = (value: string[], item: any) => {
+  console.log('changeValue item', item, 'value', value)
+  // item.value = value
+  emit('changeValue', item, value)
 }
 
-const deleteType = (title: string) => {
-  emit('deleteType', title)
+const deleteItem = (title: string) => {
+  emit('deleteItem', title)
 }
 
 const visibleChange = (val: boolean) => {
@@ -97,17 +104,17 @@ const createQueryHandler = (title: string, curValue: string[]) => {
     <div>
       <div class="Date_Title">
         <div class="ETD_title">Party Type</div>
-        <span class="iconfont_icon" @click="deleteType(item.title)">
+        <span class="iconfont_icon" @click="deleteItem(item.title)">
           <svg class="iconfont icon_delete" aria-hidden="true">
             <use xlink:href="#icon-icon_delete_b"></use>
           </svg>
         </span>
       </div>
       <el-select
-        v-model="item.title"
+        :model-value="item.title"
         :suffix-icon="IconDropDown"
         class="testname"
-        @change="changeData(item)"
+        @change="changeTitle($event, item)"
         placeholder="Please Select Party Type"
       >
         <el-option
@@ -122,7 +129,7 @@ const createQueryHandler = (title: string, curValue: string[]) => {
     <div style="margin-top: 16px">
       <div class="ETD_title">Party Details</div>
       <el-select
-        v-model="item.value"
+        :model-value="item.value"
         multiple
         filterable
         remote
@@ -137,6 +144,7 @@ const createQueryHandler = (title: string, curValue: string[]) => {
         :max-collapse-tags="3"
         :remote-method="createQueryHandler(item.title, item.value)"
         :loading="loading"
+        @change="changeValue($event, item)"
         @visible-change="visibleChange"
       >
         <el-option

src/stores/modules/loadingState.ts

@@ -1,18 +0,0 @@
-import { defineStore } from 'pinia'
-
-interface LoadingState {
-  trackingTableLoading: boolean
-}
-
-export const useLoadingState = defineStore('loadingState', {
-  state: (): LoadingState => ({
-    trackingTableLoading: JSON.parse(localStorage.getItem('trackingTableLoading')) || false
-  }),
-  getters: {},
-  actions: {
-    setTrackingTableLoading(state: boolean) {
-      localStorage.setItem('trackingTableLoading', JSON.stringify(state))
-      this.trackingTableLoading = state
-    }
-  }
-})

src/views/Layout/src/components/Header/HeaderView.vue

@@ -6,7 +6,6 @@ import { useRouter, useRoute } from 'vue-router'
 import { useUserStore } from '@/stores/modules/user'
 import { useHeaderSearch } from '@/stores/modules/headerSearch'
 import { onBeforeRouteUpdate } from 'vue-router'
-import { useLoadingState } from '@/stores/modules/loadingState'
 import { useThemeStore } from '@/stores/modules/theme'
 import { useNotificationMessage } from '@/stores/modules/notificationMessage'
 import NotificationDrawer from './components/NotificationDrawer.vue'
@@ -29,7 +28,7 @@ const toggleThemeMode = (theme: string) => {
 }
 
 const searchValue = ref('')
-// 用于判断是否在搜索后跳转页面，跳转后清空搜索框的值
+// 用于判断是否在搜索后跳转页面，跳转后清空搜索框的值  false不用清空，true清空
 const isJumpPageBySearch = ref(false)
 const handleSearch = () => {
   if (!searchValue.value) {
@@ -69,34 +68,19 @@ const handleSearch = () => {
       }
     })
   } else {
-    const trackingTableLoadingState = useLoadingState()
-    trackingTableLoadingState.setTrackingTableLoading(true)
-    // 已登录
-    $api
-      .getTrackingTableData({
-        _textSearch: searchValue.value
-      })
-      .then((res) => {
-        if (res.code === 200) {
-          // 如果是在tracking页面搜索，那么isJumpPageBySearch不用置为true，跳转路由后直接清空搜索框
-          if (route.path === '/tracking') {
-            isJumpPageBySearch.value = false
-          } else {
-            isJumpPageBySearch.value = true
-          }
-          headerSearch.setSearchData({
-            searchValue: searchValue.value,
-            searchResult: '',
-            trackingData: res.data
-          })
-          router.push({
-            name: 'Tracking'
-          })
-        }
-      })
-      .finally(() => {
-        trackingTableLoadingState.setTrackingTableLoading(false)
-      })
+    headerSearch.setSearchData({
+      searchValue: searchValue.value,
+      searchResult: '',
+      trackingData: []
+    })
+    if (route.path === '/tracking') {
+      isJumpPageBySearch.value = false
+    } else {
+      isJumpPageBySearch.value = true
+    }
+    router.push({
+      name: 'Tracking'
+    })
   }
 }
 onBeforeRouteUpdate((to, from, next) => {

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

@@ -22,6 +22,26 @@ const filtersStore = useFiltersStore()
 const filtersList = computed(() => filtersStore.filtersList)
 
 const headerSearch = useHeaderSearch()
+// 从 store 中获取数据并绑定到输入框
+const headerSearchValue = computed(() => headerSearch.searchValue)
+// 监听顶部搜索结果的变化
+watch(
+  () => headerSearchValue.value,
+  (newData) => {
+    if (newData) {
+      // 从顶部获取的值
+      filtersStore.clearFilters()
+      filtersStore.updateFilter({
+        title: 'Shipment Status',
+        value: ['All'],
+        keyType: 'array',
+        key: 'filterTag'
+      })
+      textSearch.value = headerSearchValue.value
+      getTrackingData()
+    }
+  }
+)
 
 const filterTagsList = computed(() => {
   return filtersList.value.map((filter) => {
@@ -43,64 +63,10 @@ const filterTagsList = computed(() => {
     }
   })
 })
-const initPage = () => {
-  if (!filtersList.value || (filtersList.value && filtersList.value.length == 0)) {
-    filtersStore.updateFilter({
-      title: 'Transport Mode',
-      value: ['All'],
-      keyType: 'array',
-      key: 'transport_mode'
-    })
-    filtersStore.updateFilter({
-      title: 'ETD',
-      value: [
-        dayjs().subtract(2, 'month').startOf('month').format(formatDate),
-        dayjs().add(1, 'month').format(formatDate)
-      ],
-      keyType: 'dateRange',
-      key: ['etd_start', 'etd_end']
-    })
-    filtersStore.updateFilter({
-      title: 'Shipment Status',
-      value: ['All'],
-      keyType: 'array',
-      key: 'filterTag'
-    })
-  } else {
-  }
-}
-
-initPage()
 
 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',
@@ -140,42 +106,15 @@ const tabList = ref([
   }
 ])
 
-// 筛选框查询
-const FiltersSeach = (val: any, value: any) => {
-  getTrackingData()
-}
-//TransportSearch
-const TransportSearch = (val: any) => {}
-
-//defaultDate
-
-// 从 store 中获取数据并绑定到输入框
-const headerSearchdData = computed(() => headerSearch.searchValue)
-// 监听顶部搜索结果的变化
-watch(
-  () => headerSearchdData.value,
-  (newData) => {
-    if (newData) {
-      // 从顶部获取的值
-    }
-  }
-)
-
-const TrackingTable_ref = ref()
-const transportListItem = ref()
-
-const isShowAlertIcon = ref(false)
-const incotermsList = ref([])
-const serviceList = ref([])
 const getTrackingData = () => {
   const queryData = filtersStore.getQueryData
 
   tableLoadingTableData.value = true
-  TrackingTable_ref.value.getLoadingData(tableLoadingTableData.value)
+  trackingTable_ref.value.getLoadingData(tableLoadingTableData.value)
   $api
     .getTrackingTableData({
-      cp: TrackingTable_ref.value.pageInfo.pageNo,
-      ps: TrackingTable_ref.value.pageInfo.pageSize,
+      cp: trackingTable_ref.value.pageInfo.pageNo,
+      ps: trackingTable_ref.value.pageInfo.pageSize,
       rc: -1,
       other_filed: '',
       _textSearch: textSearch.value,
@@ -199,7 +138,7 @@ const getTrackingData = () => {
         serviceList.value = res.data.ServiceList
 
         sessionStorage.setItem('TrackingData', JSON.stringify(res.data))
-        TrackingTable_ref.value.searchTableData()
+        trackingTable_ref.value.searchTableData()
         // 查询没结果的话显示icon
         if (textSearch.value != '' && textSearch.value != undefined) {
           if (res.data.searchData.length == 0) {
@@ -211,10 +150,57 @@ const getTrackingData = () => {
       }
     })
 }
-onMounted(() => {
+onMounted(() => {})
+const initPage = () => {
+  console.log(headerSearchValue.value, 'headerSearchValue.value')
+  if (headerSearchValue.value) {
+    filtersStore.clearFilters()
+    filtersStore.updateFilter({
+      title: 'Shipment Status',
+      value: ['All'],
+      keyType: 'array',
+      key: 'filterTag'
+    })
+    textSearch.value = headerSearchValue.value
+  } else if (!filtersList.value || (filtersList.value && filtersList.value.length == 0)) {
+    filtersStore.updateFilter({
+      title: 'Transport Mode',
+      value: ['All'],
+      keyType: 'array',
+      key: 'transport_mode'
+    })
+    filtersStore.updateFilter({
+      title: 'ETD',
+      value: [
+        dayjs().subtract(2, 'month').startOf('month').format(formatDate),
+        dayjs().add(1, 'month').format(formatDate)
+      ],
+      keyType: 'dateRange',
+      key: ['etd_start', 'etd_end']
+    })
+    filtersStore.updateFilter({
+      title: 'Shipment Status',
+      value: ['All'],
+      keyType: 'array',
+      key: 'filterTag'
+    })
+  }
   getTrackingData()
+}
+
+onMounted(() => {
+  initPage()
 })
 
+//defaultDate
+
+const trackingTable_ref = ref()
+const transportListItem = ref()
+
+const isShowAlertIcon = ref(false)
+const incotermsList = ref([])
+const serviceList = ref([])
+
 const tabChange = (changeTabList: any) => {
   tabList.value = changeTabList
   const checkedTabNames = tabList.value.filter((item) => item.checked).map((item) => item.name)
@@ -235,6 +221,7 @@ const SearchInput = () => {
 import TrackingGuide from './components/TrackingGuide.vue'
 import { useGuideStore } from '@/stores/modules/guide'
 import { onBeforeRouteLeave } from 'vue-router'
+import { get } from 'lodash'
 
 const guideStore = useGuideStore()
 const trackingGuideRef = ref()
@@ -311,7 +298,7 @@ onBeforeRouteLeave((route: any) => {
 
           <TransportMode
             :transportListItem="transportListItem"
-            @TransportSearch="TransportSearch"
+            @TransportSearch="getTrackingData()"
           ></TransportMode>
           <DateRange
             @DateRangeSearch="getTrackingData()"
@@ -358,7 +345,7 @@ onBeforeRouteLeave((route: any) => {
   <TrackingTable
     :textSearch="textSearch"
     :height="containerHeight"
-    ref="TrackingTable_ref"
+    ref="trackingTable_ref"
   ></TrackingTable>
 </template>
 

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

@@ -6,7 +6,6 @@ import dayjs from 'dayjs'
 import { useRouter } from 'vue-router'
 import { ref, onMounted } from 'vue'
 import { transportationMode } from '@/components/transportationMode'
-import { useLoadingState } from '@/stores/modules/loadingState'
 import { useThemeStore } from '@/stores/modules/theme'
 import { useVisitedRowState } from '@/stores/modules/visitedRow'
 import { formatTimezone, formatNumber } from '@/utils/tools'
@@ -537,8 +536,6 @@ const handleVGM = (row) => {
   })
 }
 
-const loadingState = useLoadingState()
-
 // 表格右键点击事件
 const handleCurrentRow = (params) => {
   tableRef.value?.setCurrentRow(params.row)
@@ -644,7 +641,7 @@ defineExpose({
 
     <vxe-grid
       ref="tableRef"
-      v-vloading="tableLoadingColumn || tableLoadingTable || loadingState.trackingTableLoading"
+      v-vloading="tableLoadingColumn || tableLoadingTable"
       :height="props.height"
       :style="{ border: 'none' }"
       :row-class-name="handleRowClassName"