feat: 重构booking Tracking筛选项daterange

src/components/DateRange/src/DateRange.vue

@@ -11,16 +11,18 @@ const formatDate = userStore.dateFormat
 const valueFormatDate = 'MM/DD/YYYY'
 
 onMounted(() => {
-  defaultDate()
+  const emitPayload = defaultDate()
+  // 统一 emit（只调用一次）
+  emit('defaultDate', daterangeObj2, emitPayload)
   emitter.on('clearTag', (tag: any) => {
     if (tag.includes('ETD')) {
-      clearDateStart()
+      clearETdDateRange()
     }
     if (tag.includes('ETA')) {
-      clearDateEnd()
+      clearEtaDateRange()
     }
     if (tag.includes('Creation Time')) {
-      clearDateEnd()
+      clearEtaDateRange()
     }
   })
   emitter.on('clearDaterangeObj', () => {
@@ -45,8 +47,8 @@ const AddDateType = ref()
 AddDateType.value = []
 const AddType = () => {
   AddDateType.value.push({
-    value: '',
-    number: ''
+    label: '',
+    value: ''
   })
 }
 const deleteType = (i: any) => {
@@ -57,204 +59,154 @@ const deleteType = (i: any) => {
 const props = defineProps({
   isShipment: Boolean
 })
-let daterangeObj: any = {}
-const DateStart = ref()
-DateStart.value = []
-const DateEnd = ref()
-DateEnd.value = []
+const etdDateRange = ref()
+etdDateRange.value = []
+const etaDateRange = ref()
+etaDateRange.value = []
 const DateCreation = ref()
-DateCreation.value = []
-const searchTableQeury = ref()
-const searchTableQeuryTracking = ref()
 // 查询默认日期
 const defaultDate = () => {
-  if (props.isShipment) {
-    if (
-      sessionStorage.getItem('clickParams') == null ||
-      sessionStorage.getItem('clickParams') == '{}'
-    ) {
-      if (sessionStorage.getItem('searchTableQeuryTracking') == null) {
-        DateStart.value = [dayjs().subtract(2, 'month').startOf('month'), dayjs().add(1, 'month')]
-        daterangeObj.ETD =
-          DateStart.value[0].format(formatDate) + ' To ' + DateStart.value[1].format(formatDate)
-        const obj = {
-          title: 'ETD',
-          data: [
-            DateStart.value[0].format(valueFormatDate),
-            DateStart.value[1].format(valueFormatDate)
-          ]
-        }
-
-        daterangeObj2.ETD = obj
-      } else {
-        searchTableQeuryTracking.value =
-          JSON.parse(sessionStorage.getItem('searchTableQeuryTracking') as string) || {}
-        if (searchTableQeuryTracking.value.etd_start) {
-          DateStart.value = [
-            dayjs(searchTableQeuryTracking.value.etd_start),
-            dayjs(searchTableQeuryTracking.value.etd_end)
-          ]
-          daterangeObj.ETD =
-            DateStart.value[0].format(formatDate) + ' To ' + DateStart.value[1].format(formatDate)
-          const obj = {
-            title: 'ETD',
-            data: [
-              DateStart.value[0].format(valueFormatDate),
-              DateStart.value[1].format(valueFormatDate)
-            ]
-          }
-          daterangeObj2.ETD = obj
-        }
-        if (searchTableQeuryTracking.value.eta_start) {
-          DateEnd.value = [
-            dayjs(searchTableQeuryTracking.value.eta_start),
-            dayjs(searchTableQeuryTracking.value.eta_end)
-          ]
-          daterangeObj.ETA =
-            DateEnd.value[0].format(formatDate) + ' To ' + DateEnd.value[1].format(formatDate)
-          const obj = {
-            title: 'ETA',
-            data: [
-              DateEnd.value[0].format(valueFormatDate),
-              DateEnd.value[1].format(valueFormatDate)
-            ]
-          }
-          daterangeObj2.ETA = obj
-        }
-        if (searchTableQeuryTracking.value.created_time_start) {
-          DateCreation.value = [
-            dayjs(searchTableQeuryTracking.value.created_time_start),
-            dayjs(searchTableQeuryTracking.value.created_time_end)
-          ]
-          daterangeObj['Creation Time'] =
-            DateCreation.value[0].format(formatDate) +
-            ' To ' +
-            DateCreation.value[1].format(formatDate)
-          const obj = {
-            title: 'Creation Time',
-            data: [
-              DateCreation.value[0].format(valueFormatDate),
-              DateCreation.value[1].format(valueFormatDate)
-            ]
-          }
-          daterangeObj2['Creation Time'] = obj
-        }
-      }
-      emit('defaultDate', daterangeObj, daterangeObj2, searchTableQeuryTracking.value)
-    } else {
-      const data = JSON.parse(sessionStorage.getItem('reportList') as string) || {}
-      searchTableQeuryTracking.value =
-        JSON.parse(sessionStorage.getItem('searchTableQeuryTracking') as string) || {}
-      if (data.eta_start) {
-        DateEnd.value = [dayjs(data.eta_start), dayjs(data.eta_end)]
-        daterangeObj.ETA =
-          DateEnd.value[0].format(formatDate) + ' To ' + DateEnd.value[1].format(formatDate)
-        const obj = {
-          title: 'ETA',
-          data: [DateEnd.value[0].format(valueFormatDate), DateEnd.value[1].format(valueFormatDate)]
-        }
+  // 工具函数：安全格式化日期范围
+  const formatDateRange = (startStr: string | null, endStr: string | null, oldFormat: string) => {
+    if (!startStr || !endStr) return [null, null]
+    const start = dayjs(startStr, oldFormat)
+    const end = dayjs(endStr, oldFormat)
+    return start.isValid() && end.isValid()
+      ? [start.format(formatDate), end.format(formatDate)]
+      : [null, null]
+  }
 
-        daterangeObj2.ETA = obj
-        emit('defaultDate', daterangeObj, daterangeObj2, searchTableQeuryTracking.value)
-      }
-      if (data.etd_start) {
-        DateStart.value = [dayjs(data.etd_start), dayjs(data.etd_end)]
-        daterangeObj.ETD =
-          DateStart.value[0].format(formatDate) + ' To ' + DateStart.value[1].format(formatDate)
-        const obj = {
-          title: 'ETD',
-          data: [
-            DateStart.value[0].format(valueFormatDate),
-            DateStart.value[1].format(valueFormatDate)
-          ]
-        }
-        daterangeObj2.ETD = obj
-        emit('defaultDate', daterangeObj, daterangeObj2, searchTableQeuryTracking.value)
-      }
+  // 工具函数：设置 daterangeObj2 条目
+  const setRange = (
+    key: string,
+    title: string,
+    startStr: string | null,
+    endStr: string | null,
+    oldFormat: string
+  ) => {
+    const [start, end] = formatDateRange(startStr, endStr, oldFormat)
+    if (start && end) {
+      daterangeObj2[key] = { title, data: [start, end] }
     }
-  } else {
-    if (sessionStorage.getItem('searchTableQeury') == null) {
-      DateStart.value = [dayjs().subtract(2, 'month').startOf('month'), dayjs().add(1, 'month')]
-      daterangeObj.ETD =
-        DateStart.value[0].format(formatDate) + ' To ' + DateStart.value[1].format(formatDate)
-      const obj = {
-        title: 'ETD',
-        data: [
-          DateStart.value[0].format(valueFormatDate),
-          DateStart.value[1].format(valueFormatDate)
-        ]
-      }
-      daterangeObj2.ETD = obj
+  }
+
+  // 工具函数：设置 AddDateType（仅用于 Creation Time）
+  const setAddDateType = (startStr: string | null, endStr: string | null, oldFormat: string) => {
+    const [start, end] = formatDateRange(startStr, endStr, oldFormat)
+    AddDateType.value = [{ label: 'Creation Time', value: [start, end] }]
+  }
+
+  // 默认时间范围（2个月前月初 到 下个月）
+  const getDefaultRange = () => [
+    dayjs().subtract(2, 'month').startOf('month').format(formatDate),
+    dayjs().add(1, 'month').format(formatDate)
+  ]
+
+  // ----------------------------
+  // 主逻辑开始
+  // ----------------------------
+
+  let trackingData: Record<string, any> = {}
+  let emitPayload: Record<string, any> = {}
+
+  if (props.isShipment) {
+    const clickParams = sessionStorage.getItem('clickParams')
+    if (clickParams && clickParams !== '{}') {
+      // 场景 A: 有 clickParams → 读取 reportList
+      const reportList = JSON.parse(sessionStorage.getItem('reportList') || '{}')
+      trackingData = JSON.parse(sessionStorage.getItem('searchTableQeuryTracking') || '{}')
+      const oldFormat = trackingData.dateFormat
+      setRange('ETD', 'ETD', reportList.etd_start, reportList.etd_end, oldFormat)
+      setRange('ETA', 'ETA', reportList.eta_start, reportList.eta_end, oldFormat)
     } else {
-      searchTableQeury.value =
-        JSON.parse(sessionStorage.getItem('searchTableQeury') as string) || {}
-      if (searchTableQeury.value.f_etd_start) {
-        DateStart.value = [
-          dayjs(searchTableQeury.value.f_etd_start).format(valueFormatDate),
-          dayjs(searchTableQeury.value.f_etd_end).format(valueFormatDate)
+      // 场景 B: 无 clickParams → 读取 searchTableQeuryTracking
+      const stored = sessionStorage.getItem('searchTableQeuryTracking')
+      if (!stored) {
+        // 子场景 B1: 无存储 → 用默认值
+        const [start, end] = getDefaultRange()
+        etdDateRange.value = [start, end]
+        setRange('ETD', 'ETD', start, end, formatDate)
+      } else {
+        // 子场景 B2: 有存储
+        trackingData = JSON.parse(stored)
+        const oldFormat = trackingData.dateFormat
+        etdDateRange.value = [
+          trackingData.etd_start ? trackingData.etd_start : null,
+          trackingData.etd_end ? trackingData.etd_end : null
         ]
-        daterangeObj.ETD =
-          DateStart.value[0].format(formatDate) + ' To ' + DateStart.value[1].format(formatDate)
-        const obj = {
-          title: 'ETD',
-          data: [
-            DateStart.value[0].format(valueFormatDate),
-            DateStart.value[1].format(valueFormatDate)
-          ]
-        }
-        daterangeObj2.ETD = obj
-      }
-      if (searchTableQeury.value.m_eta_start) {
-        DateEnd.value = [
-          dayjs(searchTableQeury.value.m_eta_start),
-          dayjs(searchTableQeury.value.m_eta_end)
+        etaDateRange.value = [
+          trackingData.eta_start ? trackingData.eta_start : null,
+          trackingData.eta_end ? trackingData.eta_end : null
         ]
-        daterangeObj.ETA =
-          DateEnd.value[0].format(formatDate) + ' To ' + DateEnd.value[1].format(formatDate)
-        const obj = {
-          title: 'ETA',
-          data: [DateEnd.value[0].format(valueFormatDate), DateEnd.value[1].format(valueFormatDate)]
+        setRange('ETD', 'ETD', trackingData.etd_start, trackingData.etd_end, oldFormat)
+        setRange('ETA', 'ETA', trackingData.eta_start, trackingData.eta_end, oldFormat)
+        if (trackingData.created_time_start) {
+          setAddDateType(trackingData.created_time_start, trackingData.created_time_end, oldFormat)
+          setRange(
+            'Creation Time',
+            'Creation Time',
+            trackingData.created_time_start,
+            trackingData.created_time_end,
+            oldFormat
+          )
         }
-        daterangeObj2.ETA = obj
       }
-      if (searchTableQeury.value.created_time_start) {
-        DateCreation.value = [
-          dayjs(searchTableQeury.value.created_time_start),
-          dayjs(searchTableQeury.value.created_time_end)
-        ]
-        daterangeObj['Creation Time'] =
-          DateCreation.value[0].format(formatDate) +
-          ' To ' +
-          DateCreation.value[1].format(formatDate)
-        const obj = {
-          title: 'Creation Time',
-          data: [
-            DateCreation.value[0].format(valueFormatDate),
-            DateCreation.value[1].format(valueFormatDate)
-          ]
-        }
-        daterangeObj2['Creation Time'] = obj
+    }
+    emitPayload = trackingData
+  } else {
+    // 非 shipment 场景
+    const stored = sessionStorage.getItem('searchTableQeury')
+    if (!stored) {
+      // 无存储 → 默认值
+      const [start, end] = getDefaultRange()
+      etdDateRange.value = [start, end]
+      setRange('ETD', 'ETD', start, end, formatDate)
+    } else {
+      // 有存储
+      const queryData = JSON.parse(stored)
+      emitPayload = queryData
+      const oldFormat = queryData.dateFormat
+
+      etdDateRange.value = [
+        queryData.f_etd_start ? queryData.f_etd_start : null,
+        queryData.f_etd_end ? queryData.f_etd_end : null
+      ]
+      etaDateRange.value = [
+        queryData.m_eta_start ? queryData.m_eta_start : null,
+        queryData.m_eta_end ? queryData.m_eta_end : null
+      ]
+      setRange('ETD', 'ETD', queryData.f_etd_start, queryData.f_etd_end, oldFormat)
+      setRange('ETA', 'ETA', queryData.m_eta_start, queryData.m_eta_end, oldFormat)
+      if (queryData.created_time_start) {
+        setAddDateType(queryData.created_time_start, queryData.created_time_end, oldFormat)
+        setRange(
+          'Creation Time',
+          'Creation Time',
+          queryData.created_time_start,
+          queryData.created_time_end,
+          oldFormat
+        )
       }
     }
-    emit('defaultDate', daterangeObj, daterangeObj2, searchTableQeury.value)
   }
+  return emitPayload
 }
 const daterangedata = ref()
 daterangedata.value = []
 let daterangeObj2: any = {}
 const DateRangeChange = (val: any) => {
   if (val.data != null) {
-    const date1 = dayjs(String(val.data[0])).format(formatDate)
-    const date2 = dayjs(String(val.data[1])).format(formatDate)
-    daterangeObj[val.title] = date1 + ' To ' + date2
+    val.data = [
+      dayjs(val.data[0], valueFormatDate).format(formatDate),
+      dayjs(val.data[1], valueFormatDate).format(formatDate)
+    ]
     daterangeObj2[val.title] = val
   } else {
-    delete daterangeObj[val.title]
     delete daterangeObj2[val.title]
     if (val.title == 'ETD') {
-      DateStart.value = []
+      etdDateRange.value = []
     } else if (val.title == 'ETA') {
-      DateEnd.value = []
+      etaDateRange.value = []
     } else {
       DateCreation.value = []
       AddDateType.value = []
@@ -264,34 +216,26 @@ const DateRangeChange = (val: any) => {
 }
 const emit = defineEmits(['DateRangeSearch', 'clearDaterangeTags', 'defaultDate'])
 const DateRangeSearch = () => {
-  emit('DateRangeSearch', daterangeObj, daterangeObj2)
+  emit('DateRangeSearch', daterangeObj2)
   Date_visible.value = false
 }
-const CalendarTitle = ref('Date Range')
-watch(
-  () => DateType.value,
-  (current) => {
-    CalendarTitle.value = current
-  }
-)
+
 // 清除
-const clearrest = () => {
+const clearRest = () => {
   emit('clearDaterangeTags')
-  clearDateStart()
-  clearDateEnd()
+  clearETdDateRange()
+  clearEtaDateRange()
   clearDateCreation()
   clearDaterangeObj()
 }
 // 清除EDT
-const clearDateStart = () => {
-  DateStart.value = []
-  delete daterangeObj['ETD']
+const clearETdDateRange = () => {
+  etdDateRange.value = []
   delete daterangeObj2['ETD']
 }
 // 清除EDA
-const clearDateEnd = () => {
-  DateEnd.value = []
-  delete daterangeObj['ETA']
+const clearEtaDateRange = () => {
+  etaDateRange.value = []
   delete daterangeObj2['ETA']
 }
 // 清除Creation Time
@@ -299,19 +243,23 @@ const clearDateCreation = () => {
   DateCreation.value = []
   AddDateType.value = []
   DateType.value = ''
-  CalendarTitle.value = 'Date Range'
-  delete daterangeObj['Creation Time']
   delete daterangeObj2['Creation Time']
 }
 // 清除 daterangeObj
 const clearDaterangeObj = () => {
-  daterangeObj = {}
   daterangeObj2 = {}
 }
 </script>
 <template>
   <div class="select">
-    <el-popover trigger="click" :width="400" :visible="Date_visible" popper-class="DaterangeClass">
+    <el-popover
+      trigger="click"
+      :width="400"
+      :visible="Date_visible"
+      popper-class="DaterangeClass"
+      @before-enter="defaultDate()"
+      @hide="clearDateCreation()"
+    >
       <template #reference>
         <div class="Date_Range" @blur="Date_visible = false" @click="Date_visible = !Date_visible">
           <div class="select_title">Date Range</div>
@@ -327,18 +275,18 @@ const clearDaterangeObj = () => {
         <div class="ETD">
           <CalendarDate
             CalendarTitle="ETD"
-            :Date="DateStart"
+            :Date="etdDateRange"
             @DateRangeChange="DateRangeChange"
           ></CalendarDate>
         </div>
         <div class="ETA">
           <CalendarDate
             CalendarTitle="ETA"
-            :Date="DateEnd"
+            :Date="etaDateRange"
             @DateRangeChange="DateRangeChange"
           ></CalendarDate>
         </div>
-        <div class="AddType" v-for="(item, index) in AddDateType" :key="item">
+        <div class="AddType" v-for="(item, index) in AddDateType" :key="item.value">
           <div>
             <div class="ETD_title Date_Title">
               <div class="Date_type">Date Type</div>
@@ -351,7 +299,7 @@ const clearDaterangeObj = () => {
             <el-select
               :suffix-icon="IconDropDown"
               placeholder="Please Select Date Type"
-              v-model="DateType"
+              v-model="item.label"
             >
               <el-option
                 v-for="item in DateTypeoptions"
@@ -364,9 +312,9 @@ const clearDaterangeObj = () => {
           </div>
           <div style="margin-top: 16px">
             <CalendarDate
-              :CalendarTitle="CalendarTitle"
+              :CalendarTitle="item.label || 'Date Range'"
               CalendarWidth="352px"
-              :Date="DateCreation"
+              :Date="item.value"
               @DateRangeChange="DateRangeChange"
               :isType="true"
             ></CalendarDate>
@@ -376,7 +324,7 @@ const clearDaterangeObj = () => {
           <el-button class="el-button--noborder moretype">+ More Date Type</el-button>
         </div>
         <div class="daterange_bottom">
-          <div><el-button type="default" @click="clearrest" class="Clear">Reset</el-button></div>
+          <div><el-button type="default" @click="clearRest" class="Clear">Reset</el-button></div>
           <div>
             <el-button class="search el-button--dark" @click="DateRangeSearch">Search</el-button>
           </div>

src/components/DateRange/src/components/CalendarDate.vue

@@ -4,6 +4,7 @@ import { ref, watch } from 'vue'
 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>()
@@ -48,8 +49,8 @@ watch(
   (current: any) => {
     if (current?.length == 2) {
       ETDDate.value = [
-        current[0] ? dayjs(current[0]).format(valueFormatDate) : '',
-        current[1] ? dayjs(current[1]).format(valueFormatDate) : ''
+        current[0] ? dayjs(current[0], formatDate).format(valueFormatDate) : '',
+        current[1] ? dayjs(current[1], formatDate).format(valueFormatDate) : ''
       ]
     } else {
       ETDDate.value = []
@@ -76,15 +77,10 @@ const daterange = (val: any) => {
 }
 const ChangeToday = (val: any) => {
   if (val == 'Earliest') {
-    // ETDDate.value = [dayjs(), dayjs()]
-    ETDDate.value[0] = dayjs()
-    const date1 = dayjs(String(ETDDate.value[0])).format(valueFormatDate)
-    DateList.value[0] = date1
+    DateList.value[0] = dayjs().format(valueFormatDate)
     daterange(DateList.value[1])
   } else {
-    ETDDate.value[1] = dayjs()
-    const date1 = dayjs(String(ETDDate.value[1])).format(valueFormatDate)
-    DateList.value[1] = date1
+    DateList.value[1] = dayjs().format(valueFormatDate)
     daterange(DateList.value[0])
   }
 }
@@ -99,15 +95,11 @@ const handleCalendarOpen = (date: any) => {
   }
 }
 const Earliest = () => {
-  ETDDate.value[0] = dayjs('Oct-05-2009')
-  const date1 = dayjs(String(ETDDate.value[0])).format(valueFormatDate)
-  DateList.value[0] = date1
+  DateList.value[0] = dayjs('Oct-05-2009').format(valueFormatDate)
   daterange(DateList.value[1])
 }
 const Latest = () => {
-  ETDDate.value[1] = dayjs()
-  const date1 = dayjs(String(ETDDate.value[1])).format(valueFormatDate)
-  DateList.value[1] = date1
+  DateList.value[1] = dayjs().format(valueFormatDate)
   daterange(DateList.value[0])
 }
 const changeRangeData = (value: any) => {
@@ -128,10 +120,6 @@ const handlePanelChange = (value: any, mode: any) => {
     isShowExtra.value = true
   }
 }
-// 判断失焦时是否两个都有值
-const isTwoDate = (date: any) => {
-  console.log(date)
-}
 </script>
 <template>
   <div>

src/components/TransportMode/src/TransportMode.vue

@@ -2,6 +2,7 @@
 import { ref, onMounted, onBeforeMount, watch, computed } from 'vue'
 import type { DropdownInstance } from 'element-plus'
 import emitter from '@/utils/bus'
+import { cloneDeep } from 'lodash'
 
 interface ListItem {
   name: string
@@ -16,22 +17,24 @@ interface Props {
 }
 const props = withDefaults(defineProps<Props>(), {})
 const TransportList = ref(props.TransportListItem)
+const updateTransportList = (data: any) => {
+  TransportList.value = cloneDeep(data)
+  TransportList.value.forEach((item: any) => {
+    if (item.checked) {
+      checkedCount.push(item.sname)
+      const map = new Map()
+      checkedCount.forEach((item) => map.set(item, true))
+      checkedCount = [...map.keys()]
+    }
+    if (checkedCount.length == TransportList.value.length) {
+      checkAll.value = true
+    }
+  })
+}
 watch(
   () => props.TransportListItem,
   (current) => {
-    console.log(current)
-    TransportList.value = current
-    TransportList.value.forEach((item: any) => {
-      if (item.checked) {
-        checkedCount.push(item.sname)
-        const map = new Map()
-        checkedCount.forEach((item) => map.set(item, true))
-        checkedCount = [...map.keys()]
-      }
-      if (checkedCount.length == TransportList.value.length) {
-        checkAll.value = true
-      }
-    })
+    updateTransportList(current)
   }
 )
 
@@ -49,7 +52,7 @@ onBeforeMount(() => {
 })
 
 const checkAll = ref(false)
-const dropdown1 = ref<DropdownInstance>()
+const dropdownVisible = ref<DropdownInstance>()
 let checkedCount: any[] = []
 const TotalAll = computed(() => {
   var total_sum = 0
@@ -120,11 +123,11 @@ const TransportSearch = (visible: any) => {
   }
   TransportData.data = changedata.value
   emit('TransportSearch', TransportData)
-  if (!dropdown1.value) return
+  if (!dropdownVisible.value) return
   if (visible) {
-    dropdown1.value.handleClose()
+    dropdownVisible.value.handleClose()
   } else {
-    dropdown1.value.handleOpen()
+    dropdownVisible.value.handleOpen()
   }
 }
 const searchTableQeury = ref()
@@ -201,10 +204,22 @@ const defaultTransport = () => {
     emit('defaultTransport', TransportData, searchTableQeury.value)
   }
 }
+
+// 每次打开时都应该重新赋值
+const handleDropdownVisibleChange = (visible: boolean) => {
+  if (visible) {
+    updateTransportList(props.TransportListItem)
+  }
+}
 </script>
 <template>
   <div class="select">
-    <el-dropdown ref="dropdown1" trigger="click" :hide-on-click="false">
+    <el-dropdown
+      ref="dropdownVisible"
+      trigger="click"
+      :hide-on-click="false"
+      @visible-change="handleDropdownVisibleChange"
+    >
       <div class="el-dropdown-link">
         <div class="select_title">Transport Mode</div>
         <span class="iconfont_icon">

src/views/Booking/src/BookingView.vue

@@ -7,6 +7,12 @@ import DateRange from '@/components/DateRange'
 import MoreFilters from '@/components/MoreFilters'
 import { ref, reactive } from 'vue'
 import { useCalculatingHeight } from '@/hooks/calculatingHeight'
+import { useUserStore } from '@/stores/modules/user'
+import dayjs from 'dayjs'
+
+const userStore = useUserStore()
+const formatDate = userStore.dateFormat
+const valueFormatDate = 'MM/DD/YYYY'
 
 const filterRef: Ref<HTMLElement | null> = ref(null)
 
@@ -77,12 +83,14 @@ const handleClose = (tag: any) => {
   } else if (tag.includes('Voyage')) {
     delete searchTableQeury['f_voyage/m_voyage']
   }
+  searchTableQeury.dateFormat = formatDate
   sessionStorage.setItem('searchTableQeury', JSON.stringify(searchTableQeury))
   getbookingdata()
 }
 // 筛选框查询
 const FiltersSeach = (val: any, value: any) => {
   searchTableQeury[val] = value
+  searchTableQeury.dateFormat = formatDate
   sessionStorage.setItem('searchTableQeury', JSON.stringify(searchTableQeury))
   getbookingdata()
 }
@@ -111,18 +119,13 @@ const defaultTransport = (val: any, value: any) => {
   renderTagsData()
 }
 // defaultDate
-const defaultDate = (val: any, value: any, data: any) => {
-  filterData.daterangeData = []
-  if (Object.keys(val).length) {
-    for (const key in val) {
-      let str = `${key}:${val[key]}`
-      filterData.daterangeData.push(str)
-    }
-  }
+const defaultDate = (dateRangeData: any, data: any) => {
+  setFilterData(dateRangeData)
+
   if (sessionStorage.getItem('searchTableQeury') == null) {
-    for (const key in value) {
-      searchTableQeury.f_etd_start = value[key].data[0]
-      searchTableQeury.f_etd_end = value[key].data[1]
+    for (const key in dateRangeData) {
+      searchTableQeury.f_etd_start = dateRangeData[key].data[0]
+      searchTableQeury.f_etd_end = dateRangeData[key].data[1]
     }
   } else {
     searchTableQeury = data
@@ -133,16 +136,20 @@ const defaultDate = (val: any, value: any, data: any) => {
   getbookingdata()
   renderTagsData()
 }
-//DateRangeSearch
-const DateRangeSearch = (val: any, value: any) => {
+
+const setFilterData = (dateRangeData: any) => {
   filterData.daterangeData = []
-  if (Object.keys(val).length) {
-    for (const key in val) {
-      let str = `${key}:${val[key]}`
-      filterData.daterangeData.push(str)
-    }
+  for (const key in dateRangeData) {
+    const startEnd = dateRangeData[key].data[0] + ' To ' + dateRangeData[key].data[1]
+    let str = `${key}:${startEnd}`
+    filterData.daterangeData.push(str)
   }
-  if (Object.keys(value).length == 0) {
+}
+//DateRangeSearch
+const DateRangeSearch = (dateRangeData: any) => {
+  setFilterData(dateRangeData)
+
+  if (Object.keys(dateRangeData).length == 0) {
     delete searchTableQeury.f_etd_start
     delete searchTableQeury.f_etd_end
     delete searchTableQeury.m_eta_start
@@ -150,18 +157,34 @@ const DateRangeSearch = (val: any, value: any) => {
     delete searchTableQeury.created_time_start
     delete searchTableQeury.created_time_end
   }
-  for (const key in value) {
+  const fieldList = [
+    {
+      title: 'ETD',
+      keys: ['f_etd_start', 'f_etd_end']
+    },
+    { title: 'ETA', keys: ['m_eta_start', 'm_eta_end'] },
+    { title: 'Creation Time', keys: ['created_time_start', 'created_time_end'] }
+  ]
+  fieldList.forEach((item) => {
+    if (!dateRangeData.hasOwnProperty(item.title)) {
+      // 删除不存在的字段
+      searchTableQeury[item.keys[0]] = undefined
+      searchTableQeury[item.keys[1]] = undefined
+    }
+  })
+  for (const key in dateRangeData) {
     if (key == 'ETD') {
-      searchTableQeury.f_etd_start = value[key].data[0]
-      searchTableQeury.f_etd_end = value[key].data[1]
+      searchTableQeury.f_etd_start = dateRangeData[key].data[0]
+      searchTableQeury.f_etd_end = dateRangeData[key].data[1]
     } else if (key == 'ETA') {
-      searchTableQeury.m_eta_start = value[key].data[0]
-      searchTableQeury.m_eta_end = value[key].data[1]
+      searchTableQeury.m_eta_start = dateRangeData[key].data[0]
+      searchTableQeury.m_eta_end = dateRangeData[key].data[1]
     } else {
-      searchTableQeury.created_time_start = value[key].data[0]
-      searchTableQeury.created_time_end = value[key].data[1]
+      searchTableQeury.created_time_start = dateRangeData[key].data[0]
+      searchTableQeury.created_time_end = dateRangeData[key].data[1]
     }
   }
+  searchTableQeury.dateFormat = formatDate
   sessionStorage.setItem('searchTableQeury', JSON.stringify(searchTableQeury))
   getbookingdata()
   renderTagsData()
@@ -212,6 +235,7 @@ const MoreFiltersSearch = (val: any, value: any) => {
       searchTableQeury['f_voyage/m_voyage'] = value[key]
     }
   }
+  searchTableQeury.dateFormat = formatDate
   sessionStorage.setItem('searchTableQeury', JSON.stringify(searchTableQeury))
   getbookingdata()
   renderTagsData()
@@ -280,6 +304,7 @@ const clearfilters = () => {
   emitter.emit('clearTag', 'Voyage')
   searchTableQeury = {}
   searchTableQeury.filterTag = ['All']
+  searchTableQeury.dateFormat = formatDate
   sessionStorage.setItem('searchTableQeury', JSON.stringify(searchTableQeury))
   getbookingdata()
   renderTagsData()
@@ -329,7 +354,23 @@ interface ListItem {
 const TagsList = ref<ListItem[]>([])
 const filterTag = ref(['All'])
 const isShowAlertIcon = ref(false)
+const setSearchQeury = () => {}
 const getbookingdata = () => {
+  const dateRangeKeys = [
+    'f_etd_start',
+    'f_etd_end',
+    'm_eta_start',
+    'm_eta_end',
+    'created_time_start',
+    'created_time_end'
+  ]
+  const curRangeData: any = {}
+  for (const key of dateRangeKeys) {
+    if (searchTableQeury[key] !== undefined) {
+      curRangeData[key] = dayjs(searchTableQeury[key], formatDate).format(valueFormatDate)
+    }
+  }
+
   tableLoadingTableData.value = true
   BookingTable_ref.value.getLoadingData(tableLoadingTableData.value)
   $api
@@ -338,7 +379,8 @@ const getbookingdata = () => {
       ps: BookingTable_ref.value.pageInfo.pageSize,
       rc: -1,
       other_filed: '',
-      ...searchTableQeury
+      ...searchTableQeury,
+      ...curRangeData
     })
     .then((res: any) => {
       if (res.code === 200) {
@@ -375,6 +417,7 @@ const changeTag = (val: any, boolean: any) => {
   searchTableQeury.filterTag = val
   let str = 'Shipment status: ' + val
   filterData.filtersTagData.push(str)
+  searchTableQeury.dateFormat = formatDate
   sessionStorage.setItem('searchTableQeury', JSON.stringify(searchTableQeury))
   if (boolean) {
     getbookingdata()
@@ -385,6 +428,7 @@ const changeTag = (val: any, boolean: any) => {
 // 点击search按钮
 const SearchInput = () => {
   searchTableQeury._textSearch = BookingSearch.value
+  searchTableQeury.dateFormat = formatDate
   sessionStorage.setItem('searchTableQeury', JSON.stringify(searchTableQeury))
   getbookingdata()
 }

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

@@ -426,13 +426,13 @@ const handleLinkClick = (row: any, column: any) => {
       path: '/booking/detail',
       query: { a: row.__serial_no, _schemas: row._schemas, status: row.Status }
     })
-    visitedRowState.setBookingTableData(row['__serial_no'])
   } else if (column.title === 'HBOL/HAWB No.') {
     router.push({
       path: '/tracking/detail',
       query: { a: row.__serial_no, _schemas: row._schemas }
     })
   }
+  visitedRowState.setBookingTableData(row['__serial_no'])
 }
 
 const selectedNumber = ref(0)

src/views/Dashboard/src/DashboardView.vue

@@ -582,11 +582,7 @@ const ClickParams = (val: any) => {
   }
   //  PendingArrival点击跳转
   else if (val == 'Pending1') {
-    handleTurnData(
-      dashboardObj.PendingDefaultData.date_start,
-      dashboardObj.PendingDefaultData.date_end,
-      ''
-    )
+    handleTurnData('', '', '') // 因为Pending没有时间筛选，所以传空
     reportList._reportRef = pie_chart_pending_arrival.value[0].paramsdata.name
     reportList._reportType = 'r3'
     handlereportlist(
@@ -606,11 +602,7 @@ const ClickParams = (val: any) => {
   }
   // PendingDeparture点击跳转
   else if (val == 'Pending0') {
-    handleTurnData(
-      dashboardObj.PendingDefaultData.date_start,
-      dashboardObj.PendingDefaultData.date_end,
-      ''
-    )
+    handleTurnData('', '', '') // 因为Pending没有时间筛选，所以传空
     reportList._reportType = 'r4'
     reportList._reportRef = pie_chart_pending_departure.value[0].paramsdata.name
     handlereportlist(
@@ -880,10 +872,21 @@ function handleImageClick(event) {
             <div class="management_content" v-for="(item, index) in Management" :key="index">
               <div class="management_flex">
                 <div class="content_title">{{ item.title }}</div>
-                <div><el-switch v-model="item.switchValue" :disabled="item.isRevenueDisplay != undefined && item.isRevenueDisplay == false" /></div>
+                <div>
+                  <el-switch
+                    v-model="item.switchValue"
+                    :disabled="item.isRevenueDisplay != undefined && item.isRevenueDisplay == false"
+                  />
+                </div>
               </div>
               <div class="content_text">{{ item.text }}</div>
-              <div class="content_text_warining" v-if="item.isRevenueDisplay != undefined && item.isRevenueDisplay == false">*To ensure the accuracy of the data display, this report needs to be configured and displayed after communicating clearly with Sales.</div>
+              <div
+                class="content_text_warining"
+                v-if="item.isRevenueDisplay != undefined && item.isRevenueDisplay == false"
+              >
+                *To ensure the accuracy of the data display, this report needs to be configured and
+                displayed after communicating clearly with Sales.
+              </div>
             </div>
             <el-divider />
             <div class="tips">

src/views/Dashboard/src/components/RecentStatus.vue

@@ -45,7 +45,6 @@ const SubscribeShipments = (val: any) => {
     })
     .then((res: any) => {
       if (res.code === 200) {
-        console.log(res.data)
       }
     })
 }

src/views/DestinationDelivery/src/components/ConfiguRations/src/components/CreateNewRule.vue

@@ -42,37 +42,36 @@ const CountryCheckboxList = ref([])
 
 // 页面初始化
 const InitRuleData = () => {
-  if ( a!= undefined ) {
+  if (a != undefined) {
     $api
-    .InitCreateRule({
-      a: a
-    })
-    .then((res: any) => {
-      if (res.code === 200) {
-        const { returnData } = res.data
-        KLNPLCvalue.value = returnData.KLNPLCvalue
-        selectedCountry.value = returnData.country
-        setbookingdata.value = returnData.SetBookingWindow
-        windowRadio.value = returnData.SetBookingWindow.windowradio
-        if(windowRadio.value != 1) {
-          windowBeforeDays.value = returnData.booking_window_date_start
-          windowAfterDays.value = returnData.booking_window_date_end
-        }
-        recommendRadio.value = returnData.RcommendDeliveryDate.Recommendradio
-        if(recommendRadio.value != 1) {
-          recommendCheckedList.value = returnData.RcommendDeliveryDate.RecommendCheckedList
-          recommendCheckedAirList.value = returnData.RcommendDeliveryDate.RecommendCheckedAirList
-          recommendCheckedSeaList.value = returnData.RcommendDeliveryDate.RecommendCheckedSeaList
+      .InitCreateRule({
+        a: a
+      })
+      .then((res: any) => {
+        if (res.code === 200) {
+          const { returnData } = res.data
+          KLNPLCvalue.value = returnData.KLNPLCvalue
+          selectedCountry.value = returnData.country
+          setbookingdata.value = returnData.SetBookingWindow
+          windowRadio.value = returnData.SetBookingWindow.windowradio
+          if (windowRadio.value != 1) {
+            windowBeforeDays.value = returnData.booking_window_date_start
+            windowAfterDays.value = returnData.booking_window_date_end
+          }
+          recommendRadio.value = returnData.RcommendDeliveryDate.Recommendradio
+          if (recommendRadio.value != 1) {
+            recommendCheckedList.value = returnData.RcommendDeliveryDate.RecommendCheckedList
+            recommendCheckedAirList.value = returnData.RcommendDeliveryDate.RecommendCheckedAirList
+            recommendCheckedSeaList.value = returnData.RcommendDeliveryDate.RecommendCheckedSeaList
+          }
+          countryCheckedList.value = returnData.station
+          CountryCheckboxList.value = returnData.CountryCheckedList
+          recommendata.value = returnData.RcommendDeliveryDate
         }
-        countryCheckedList.value = returnData.station
-        CountryCheckboxList.value = returnData.CountryCheckedList
-        recommendata.value = returnData.RcommendDeliveryDate
-      }
-    })
+      })
   }
 }
 
-
 const CreateRuleDisabled = computed(() => {
   // 1. 检查基本条件是否满足
   if (
@@ -82,14 +81,14 @@ const CreateRuleDisabled = computed(() => {
     recommendRadio.value === undefined ||
     KLNPLCvalue.value.length === 0
   ) {
-    return true;
+    return true
   }
 
   // 2. 处理时间窗口条件
   if (windowRadio.value !== 1) {
     // 当 windowRadio 不为 1 时，需要验证时间窗口字段
     if (windowBeforeDays.value === '' || windowAfterDays.value === '') {
-      return true;
+      return true
     }
   }
 
@@ -97,55 +96,54 @@ const CreateRuleDisabled = computed(() => {
   if (recommendRadio.value !== 1) {
     // 3.1 确保至少选择了一个运输方式
     if (recommendCheckedList.value.length === 0) {
-      return true;
+      return true
     }
 
     // 3.2 验证航空规则（如果选择了 Air）
-    console.log(recommendCheckedList.value)
     if (recommendCheckedList.value.includes('Air')) {
-      const isAirValid = recommendCheckedAirList.value.every(item => 
-        item.ports.length > 0 && 
-        item.recommended_delivery_from !== '' && 
-        item.recommended_delivery_to !== ''
-      );
-      
-      if (!isAirValid) return true;
+      const isAirValid = recommendCheckedAirList.value.every(
+        (item) =>
+          item.ports.length > 0 &&
+          item.recommended_delivery_from !== '' &&
+          item.recommended_delivery_to !== ''
+      )
+
+      if (!isAirValid) return true
     }
 
     // 3.3 验证海运规则（如果选择了 Sea）
     if (recommendCheckedList.value.includes('Sea')) {
-      const hasInvalidSeaItem = recommendCheckedSeaList.value.some(item => {
-        const hasValidDeliveryTime = 
-          item.recommended_delivery_from && 
-          item.recommended_delivery_to;
-        
-        const hasRequiredFields = item.rule_type !== 'Single Dimension'
-          ? item.ports.length > 0 && item.carrier.length > 0
-          : item.ports.length > 0 || item.carrier.length > 0;
-        
-        return !hasValidDeliveryTime || !hasRequiredFields;
-      });
-      
-      if (hasInvalidSeaItem) return true;
+      const hasInvalidSeaItem = recommendCheckedSeaList.value.some((item) => {
+        const hasValidDeliveryTime = item.recommended_delivery_from && item.recommended_delivery_to
+
+        const hasRequiredFields =
+          item.rule_type !== 'Single Dimension'
+            ? item.ports.length > 0 && item.carrier.length > 0
+            : item.ports.length > 0 || item.carrier.length > 0
+
+        return !hasValidDeliveryTime || !hasRequiredFields
+      })
+
+      if (hasInvalidSeaItem) return true
     }
   }
   // 4. 所有条件都满足，返回 false（不禁用）
-  return false;
-});
-// select country 
-const handleClickSelectCountry = (val:any) =>{
+  return false
+})
+// select country
+const handleClickSelectCountry = (val: any) => {
   selectedCountry.value = val
   countryCheckedList.value = []
 }
 // select station list
-const handleChangeStation = (val:any) =>{
+const handleChangeStation = (val: any) => {
   countryCheckedList.value = val
 }
 
 // select booking window
 const bookingWindow = ref('')
 const bookingdetail = ref('')
-const changeBookingWindow = (radio: number, beforedays:any, afterdays:any) => {
+const changeBookingWindow = (radio: number, beforedays: any, afterdays: any) => {
   windowRadio.value = radio
   windowBeforeDays.value = beforedays
   windowAfterDays.value = afterdays
@@ -169,10 +167,11 @@ const querySearchAsync = (query: string) => {
   if (query) {
     loading.value = true
     setTimeout(() => {
-      $api.getKLNEmployeeList({ 
-        term: query,
-        station: countryCheckedList.value
-      })
+      $api
+        .getKLNEmployeeList({
+          term: query,
+          station: countryCheckedList.value
+        })
         .then((res: any) => {
           if (res.code === 200) {
             loading.value = false
@@ -189,17 +188,17 @@ const querySearchAsync = (query: string) => {
 }
 // 保存
 const handleSubmitRule = () => {
-  const airlist = recommendCheckedAirList.value.map(item => {
-    const {PortList, ...rest} = item
-    if(recommendRadio.value == 2) {
+  const airlist = recommendCheckedAirList.value.map((item) => {
+    const { PortList, ...rest } = item
+    if (recommendRadio.value == 2) {
       return rest
     } else {
       return []
     }
   })
-  const seaList = recommendCheckedSeaList.value.map(item => {
-    const {PortList,CarrierList, ...rest} = item
-    if(recommendRadio.value == 2) {
+  const seaList = recommendCheckedSeaList.value.map((item) => {
+    const { PortList, CarrierList, ...rest } = item
+    if (recommendRadio.value == 2) {
       return rest
     } else {
       return []
@@ -208,39 +207,59 @@ const handleSubmitRule = () => {
   let airData = []
   let airlistInfo = {}
   let mergeData = []
-  if(windowRadio.value == 1) {
+  if (windowRadio.value == 1) {
     bookingWindow.value = 'No_Restrictions'
     bookingdetail.value = 'No Specific time restrictions for creating booking'
-  } else if(windowRadio.value == 2) {
+  } else if (windowRadio.value == 2) {
     bookingWindow.value = 'Restrictions_ETD_ATD'
-    bookingdetail.value = 'ETD/ATD: ' + windowBeforeDays.value + ' days before to ' + windowAfterDays.value + ' days after'
-  } else if(windowRadio.value == 3) {
+    bookingdetail.value =
+      'ETD/ATD: ' +
+      windowBeforeDays.value +
+      ' days before to ' +
+      windowAfterDays.value +
+      ' days after'
+  } else if (windowRadio.value == 3) {
     bookingWindow.value = 'Restrictions_ETA_ATA'
-    bookingdetail.value = 'ETA/ATA: ' + windowBeforeDays.value + ' days before to ' + windowAfterDays.value + ' days after'
+    bookingdetail.value =
+      'ETA/ATA: ' +
+      windowBeforeDays.value +
+      ' days before to ' +
+      windowAfterDays.value +
+      ' days after'
   }
-  if(recommendRadio.value == 1) {
+  if (recommendRadio.value == 1) {
     recommendDelivery.value = 'No_Recommended'
     recommenddetail.value = 'No Specific recommended time for choosing delivery date'
   } else {
     recommendDelivery.value = 'Delivery_ETA_ATA'
-    if(recommendCheckedList.value.includes('Air')) {
-      recommenddetail.value += 'Air:\nDefault Rule- Air Port: ALL,\nRecommend Delivery Date: ETA/ATA+' + airlist[0].recommended_delivery_from + ' Days to ETA/ATA+'+ airlist[0].recommended_delivery_to + ' Days;\n'
+    if (recommendCheckedList.value.includes('Air')) {
+      recommenddetail.value +=
+        'Air:\nDefault Rule- Air Port: ALL,\nRecommend Delivery Date: ETA/ATA+' +
+        airlist[0].recommended_delivery_from +
+        ' Days to ETA/ATA+' +
+        airlist[0].recommended_delivery_to +
+        ' Days;\n'
       airlist.forEach((item) => {
         item.ports = item.ports.join(',')
         item.carrier = ''
       })
       mergeData = [...airlist]
     }
-    if(recommendCheckedList.value.includes('Sea')) {
-      recommenddetail.value += 'Sea:\nDefault Rule- ort: ALL, Carrier: ALL,\nRecommend Delivery Date: ETA/ATA+' + seaList[0].recommended_delivery_from + ' Days to ETA/ATA+'+ seaList[0].recommended_delivery_to + ' Days;' 
+    if (recommendCheckedList.value.includes('Sea')) {
+      recommenddetail.value +=
+        'Sea:\nDefault Rule- ort: ALL, Carrier: ALL,\nRecommend Delivery Date: ETA/ATA+' +
+        seaList[0].recommended_delivery_from +
+        ' Days to ETA/ATA+' +
+        seaList[0].recommended_delivery_to +
+        ' Days;'
       seaList.forEach((item) => {
         item.ports = item.ports.join(',')
         item.carrier = item.carrier.join(',')
       })
-      mergeData = [...mergeData , ...seaList]
+      mergeData = [...mergeData, ...seaList]
     }
   }
-  if(seaList.length != 0) {
+  if (seaList.length != 0) {
     airData = Object.keys(seaList?.[0])
     airData.forEach((item) => {
       Object.assign(airlistInfo, {
@@ -248,36 +267,37 @@ const handleSubmitRule = () => {
       })
     })
   }
-  $api.handelSaveRule({
-    serial_no: a != undefined ? a: '',
-    country: selectedCountry.value,
-    station: countryCheckedList.value,
-    booking_window: bookingWindow.value,
-    booking_window_date_start: windowBeforeDays.value,
-    booking_window_date_end: windowAfterDays.value,
-    recommended_delivery: recommendDelivery.value,
-    booking_window_desc: bookingdetail.value,
-    kln_pic: KLNPLCvalue.value,
-    recommended_delivery_date_desc: recommenddetail.value,
-    ...airlistInfo
-  }).then((res: any) => {
-    if (res.code === 200 && res.data.msg == 'success') {
-      SaveedVisible.value = true
-      setTimeout(() => {
-        SaveedVisible.value = false
-        router.push({ name: 'Configurations'})
-      }, 3000)
-    } else {
+  $api
+    .handelSaveRule({
+      serial_no: a != undefined ? a : '',
+      country: selectedCountry.value,
+      station: countryCheckedList.value,
+      booking_window: bookingWindow.value,
+      booking_window_date_start: windowBeforeDays.value,
+      booking_window_date_end: windowAfterDays.value,
+      recommended_delivery: recommendDelivery.value,
+      booking_window_desc: bookingdetail.value,
+      kln_pic: KLNPLCvalue.value,
+      recommended_delivery_date_desc: recommenddetail.value,
+      ...airlistInfo
+    })
+    .then((res: any) => {
+      if (res.code === 200 && res.data.msg == 'success') {
+        SaveedVisible.value = true
+        setTimeout(() => {
+          SaveedVisible.value = false
+          router.push({ name: 'Configurations' })
+        }, 3000)
+      } else {
         UnableSaveVisible.value = true
         missingmessage.value = res.data.msg
-    }
-  })
+      }
+    })
 }
 
 onMounted(() => {
   InitRuleData()
 })
-
 </script>
 
 <template>
@@ -286,11 +306,20 @@ onMounted(() => {
       <div v-if="a != undefined">Modify Rule</div>
       <div v-else>Create New Rule</div>
       <div class="operator">
-        <el-button @click="CancelRulesVisible = true" style="height: 40px; width: 115px" type="default">
+        <el-button
+          @click="CancelRulesVisible = true"
+          style="height: 40px; width: 115px"
+          type="default"
+        >
           <span style="margin-right: 4px" class="font_family icon-icon_return_b"></span>
           <span style="font-weight: 400">Cancel</span></el-button
         >
-        <el-button style="height: 40px; width: 120px" class="el-button--main el-button--pain-theme" :disabled="CreateRuleDisabled" @click="handleSubmitRule">
+        <el-button
+          style="height: 40px; width: 120px"
+          class="el-button--main el-button--pain-theme"
+          :disabled="CreateRuleDisabled"
+          @click="handleSubmitRule"
+        >
           <span
             style="
               display: inline-block;
@@ -355,7 +384,9 @@ onMounted(() => {
         </el-dialog>
         <!-- 保存成功 -->
         <el-dialog v-model="SaveedVisible" width="320" style="height: 212px">
-          <div style="text-align: center"><el-image :src="submitsucessful" style="width: 64px;" /></div>
+          <div style="text-align: center">
+            <el-image :src="submitsucessful" style="width: 64px" />
+          </div>
           <div style="text-align: center; margin-top: 20px">Saved successfully</div>
         </el-dialog>
       </div>
@@ -364,107 +395,107 @@ onMounted(() => {
       <div class="setting-top-title">Setting</div>
       <el-collapse v-model="activeRules" @change="IsFirstActive = !IsFirstActive">
         <el-collapse-item name="SelectStation">
-            <template #title>
-              <div class="Rules_Title">
-                <span class="iconfont_icon icon_dark">
-                  <svg class="iconfont" aria-hidden="true">
-                    <use
-                      :xlink:href="IsFirstActive ? '#icon-icon_dropdown_b' : '#icon-icon_up_b'"
-                    ></use>
-                  </svg>
-                </span>
-                <span class="stars_red">*</span>Select Station (Enable Booking)
-              </div>
-            </template>
-            <div>
-              <SelectStation
+          <template #title>
+            <div class="Rules_Title">
+              <span class="iconfont_icon icon_dark">
+                <svg class="iconfont" aria-hidden="true">
+                  <use
+                    :xlink:href="IsFirstActive ? '#icon-icon_dropdown_b' : '#icon-icon_up_b'"
+                  ></use>
+                </svg>
+              </span>
+              <span class="stars_red">*</span>Select Station (Enable Booking)
+            </div>
+          </template>
+          <div>
+            <SelectStation
               @handleClickSelectCountry="handleClickSelectCountry"
               @handleChangeStation="handleChangeStation"
               :CheckboxList="CountryCheckboxList"
               :CheckedList="countryCheckedList"
               :SelectCountry="selectedCountry"
-              ></SelectStation>
-            </div>
-          </el-collapse-item>
+            ></SelectStation>
+          </div>
+        </el-collapse-item>
       </el-collapse>
       <el-collapse v-model="activeRules" @change="IsTwoActive = !IsTwoActive">
         <el-collapse-item name="SelectBooking">
-            <template #title>
-              <div class="Rules_Title">
-                <span class="iconfont_icon icon_dark">
-                  <svg class="iconfont" aria-hidden="true">
-                    <use
-                      :xlink:href="IsTwoActive ? '#icon-icon_dropdown_b' : '#icon-icon_up_b'"
-                    ></use>
-                  </svg>
-                </span>
-                <span class="stars_red">*</span>Set Booking Window
-              </div>
-            </template>
-            <div>
-              <SetBookingWindow
-                :setbookingdata="setbookingdata"
-                @changeBookingWindow="changeBookingWindow"
-              ></SetBookingWindow>
+          <template #title>
+            <div class="Rules_Title">
+              <span class="iconfont_icon icon_dark">
+                <svg class="iconfont" aria-hidden="true">
+                  <use
+                    :xlink:href="IsTwoActive ? '#icon-icon_dropdown_b' : '#icon-icon_up_b'"
+                  ></use>
+                </svg>
+              </span>
+              <span class="stars_red">*</span>Set Booking Window
             </div>
-          </el-collapse-item>
+          </template>
+          <div>
+            <SetBookingWindow
+              :setbookingdata="setbookingdata"
+              @changeBookingWindow="changeBookingWindow"
+            ></SetBookingWindow>
+          </div>
+        </el-collapse-item>
       </el-collapse>
       <el-collapse v-model="activeRules" @change="IsThreeActive = !IsThreeActive">
         <el-collapse-item name="RecommendDeliveryDate">
-            <template #title>
-              <div class="Rules_Title">
-                <span class="iconfont_icon icon_dark">
-                  <svg class="iconfont" aria-hidden="true">
-                    <use
-                      :xlink:href="IsThreeActive ? '#icon-icon_dropdown_b' : '#icon-icon_up_b'"
-                    ></use>
-                  </svg>
-                </span>
-                <span class="stars_red">*</span>Recommend Delivery Date 
-              </div>
-            </template>
-            <div>
-              <RecommendDate
-                :recommendata="recommendata"
-                @chackchangerecommend="checkRecommend"
-              ></RecommendDate>
+          <template #title>
+            <div class="Rules_Title">
+              <span class="iconfont_icon icon_dark">
+                <svg class="iconfont" aria-hidden="true">
+                  <use
+                    :xlink:href="IsThreeActive ? '#icon-icon_dropdown_b' : '#icon-icon_up_b'"
+                  ></use>
+                </svg>
+              </span>
+              <span class="stars_red">*</span>Recommend Delivery Date
             </div>
-          </el-collapse-item>
+          </template>
+          <div>
+            <RecommendDate
+              :recommendata="recommendata"
+              @chackchangerecommend="checkRecommend"
+            ></RecommendDate>
+          </div>
+        </el-collapse-item>
       </el-collapse>
       <el-collapse v-model="activeRules" @change="IsFourActive = !IsFourActive">
         <el-collapse-item name="KLNPLC">
-            <template #title>
-              <div class="Rules_Title">
-                <span class="iconfont_icon icon_dark">
-                  <svg class="iconfont" aria-hidden="true">
-                    <use
-                      :xlink:href="IsFourActive ? '#icon-icon_dropdown_b' : '#icon-icon_up_b'"
-                    ></use>
-                  </svg>
-                </span>
-                <span class="stars_red">*</span>KLN PIC
-              </div>
-            </template>
-            <div>
-              <el-select
-                v-model="KLNPLCvalue"
-                filterable
-                remote
-                multiple
-                placeholder="Select Employee Account"
-                :remote-method="querySearchAsync"
-                :loading="loading"
-                style="width: 400px;margin-bottom: 5px;"
-              >
-                <el-option
-                  v-for="item in options"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value"
-                />
-              </el-select>
+          <template #title>
+            <div class="Rules_Title">
+              <span class="iconfont_icon icon_dark">
+                <svg class="iconfont" aria-hidden="true">
+                  <use
+                    :xlink:href="IsFourActive ? '#icon-icon_dropdown_b' : '#icon-icon_up_b'"
+                  ></use>
+                </svg>
+              </span>
+              <span class="stars_red">*</span>KLN PIC
             </div>
-          </el-collapse-item>
+          </template>
+          <div>
+            <el-select
+              v-model="KLNPLCvalue"
+              filterable
+              remote
+              multiple
+              placeholder="Select Employee Account"
+              :remote-method="querySearchAsync"
+              :loading="loading"
+              style="width: 400px; margin-bottom: 5px"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </div>
+        </el-collapse-item>
       </el-collapse>
     </div>
   </div>
@@ -550,7 +581,7 @@ onMounted(() => {
   box-shadow: none;
   border: 1px solid var(--color-theme);
 }
-:deep(.el-select__wrapper.is-focused ){
+:deep(.el-select__wrapper.is-focused) {
   box-shadow: none;
   border: 1px solid var(--color-theme);
 }
@@ -580,4 +611,4 @@ onMounted(() => {
 :deep(.el-dialog__body) {
   font-weight: 400;
 }
-</style>
+</style>

src/views/Tracking/src/TrackingView.vue

@@ -8,6 +8,12 @@ import MoreFilters from '@/components/MoreFilters'
 import { ref, reactive, onMounted } from 'vue'
 import { useCalculatingHeight } from '@/hooks/calculatingHeight'
 import { useHeaderSearch } from '@/stores/modules/headerSearch'
+import { useUserStore } from '@/stores/modules/user'
+import dayjs from 'dayjs'
+
+const userStore = useUserStore()
+const formatDate = userStore.dateFormat
+const valueFormatDate = 'MM/DD/YYYY'
 
 const headerSearch = useHeaderSearch()
 
@@ -142,14 +148,18 @@ const handleClose = (tag: any) => {
   } else if (tag.includes('Voyage')) {
     delete searchTableQeuryTracking['f_voyage/voyage']
   }
+
+  searchTableQeuryTracking.dateFormat = formatDate
   sessionStorage.setItem('searchTableQeuryTracking', JSON.stringify(searchTableQeuryTracking))
-  Gettrackingdata()
+  getTrackingData()
 }
 // 筛选框查询
 const FiltersSeach = (val: any, value: any) => {
   searchTableQeuryTracking[val] = value
+
+  searchTableQeuryTracking.dateFormat = formatDate
   sessionStorage.setItem('searchTableQeuryTracking', JSON.stringify(searchTableQeuryTracking))
-  Gettrackingdata()
+  getTrackingData()
 }
 //TransportSearch
 const TransportSearch = (val: any) => {
@@ -179,36 +189,32 @@ const defaultTransport = (val: any, value: any) => {
     searchTableQeuryTracking = value
   }
 }
-//defaultDate
-const defaultDate = (val: any, value: any, data: any) => {
+const setFilterData = (dateRangeData: any) => {
   filterData.daterangeData = []
-  if (Object.keys(val).length) {
-    for (const key in val) {
-      let str = `${key}:${val[key]}`
-      filterData.daterangeData.push(str)
-    }
+  for (const key in dateRangeData) {
+    const startEnd = dateRangeData[key].data[0] + ' To ' + dateRangeData[key].data[1]
+    let str = `${key}:${startEnd}`
+    filterData.daterangeData.push(str)
   }
+}
+//defaultDate
+const defaultDate = (dateRangeData: any, data: any) => {
+  setFilterData(dateRangeData)
 
   if (sessionStorage.getItem('searchTableQeuryTracking') == null) {
     if (
       sessionStorage.getItem('clickParams') === null ||
       sessionStorage.getItem('clickParams') === '{}'
     ) {
-      if (Object.keys(value).length == 0) {
+      if (Object.keys(dateRangeData).length == 0) {
         delete searchTableQeuryTracking.etd_start
         delete searchTableQeuryTracking.etd_end
       }
-      for (const key in value) {
-        searchTableQeuryTracking.etd_start = value[key].data[0]
-        searchTableQeuryTracking.etd_end = value[key].data[1]
+      for (const key in dateRangeData) {
+        searchTableQeuryTracking.etd_start = dateRangeData[key].data[0]
+        searchTableQeuryTracking.etd_end = dateRangeData[key].data[1]
       }
     }
-    // else {
-    //   for (const key in value) {
-    //     searchTableQeuryTracking.etd_start = value[key].data[0]
-    //     searchTableQeuryTracking.etd_end = value[key].data[1]
-    //   }
-    // }
   } else {
     searchTableQeuryTracking = data
     if (searchTableQeuryTracking._textSearch) {
@@ -222,21 +228,15 @@ const defaultDate = (val: any, value: any, data: any) => {
     // 根据顶部搜索框的搜索结果赋值
     initDataByHeaderSearch()
   } else {
-    Gettrackingdata()
+    getTrackingData()
   }
 
   renderTagsData()
 }
 //DateRangeSearch
-const DateRangeSearch = (val: any, value: any) => {
-  filterData.daterangeData = []
-  if (Object.keys(val).length) {
-    for (const key in val) {
-      let str = `${key}:${val[key]}`
-      filterData.daterangeData.push(str)
-    }
-  }
-  if (Object.keys(value).length == 0) {
+const DateRangeSearch = (dateRangeData: any) => {
+  setFilterData(dateRangeData)
+  if (Object.keys(dateRangeData).length == 0) {
     delete searchTableQeuryTracking.etd_start
     delete searchTableQeuryTracking.etd_end
     delete searchTableQeuryTracking.eta_start
@@ -244,20 +244,36 @@ const DateRangeSearch = (val: any, value: any) => {
     delete searchTableQeuryTracking.created_time_start
     delete searchTableQeuryTracking.created_time_end
   }
-  for (const key in value) {
+  const fieldList = [
+    {
+      title: 'ETD',
+      keys: ['f_etd_start', 'f_etd_end']
+    },
+    { title: 'ETA', keys: ['m_eta_start', 'm_eta_end'] },
+    { title: 'Creation Time', keys: ['created_time_start', 'created_time_end'] }
+  ]
+  fieldList.forEach((item) => {
+    if (!dateRangeData.hasOwnProperty(item.title)) {
+      // 删除不存在的字段
+      searchTableQeuryTracking[item.keys[0]] = undefined
+      searchTableQeuryTracking[item.keys[1]] = undefined
+    }
+  })
+  for (const key in dateRangeData) {
     if (key == 'ETD') {
-      searchTableQeuryTracking.etd_start = value[key].data[0]
-      searchTableQeuryTracking.etd_end = value[key].data[1]
+      searchTableQeuryTracking.etd_start = dateRangeData[key].data[0]
+      searchTableQeuryTracking.etd_end = dateRangeData[key].data[1]
     } else if (key == 'ETA') {
-      searchTableQeuryTracking.eta_start = value[key].data[0]
-      searchTableQeuryTracking.eta_end = value[key].data[1]
+      searchTableQeuryTracking.eta_start = dateRangeData[key].data[0]
+      searchTableQeuryTracking.eta_end = dateRangeData[key].data[1]
     } else {
-      searchTableQeuryTracking.created_time_start = value[key].data[0]
-      searchTableQeuryTracking.created_time_end = value[key].data[1]
+      searchTableQeuryTracking.created_time_start = dateRangeData[key].data[0]
+      searchTableQeuryTracking.created_time_end = dateRangeData[key].data[1]
     }
   }
+  searchTableQeuryTracking.dateFormat = formatDate
   sessionStorage.setItem('searchTableQeuryTracking', JSON.stringify(searchTableQeuryTracking))
-  Gettrackingdata()
+  getTrackingData()
   renderTagsData()
 }
 //MoreFiltersSearch
@@ -324,8 +340,9 @@ const MoreFiltersSearch = (val: any, value: any) => {
       searchTableQeuryTracking['f_voyage/voyage'] = value[key]
     }
   }
+  searchTableQeuryTracking.dateFormat = formatDate
   sessionStorage.setItem('searchTableQeuryTracking', JSON.stringify(searchTableQeuryTracking))
-  Gettrackingdata()
+  getTrackingData()
   renderTagsData()
 }
 const defaultMorefilters = (val: any, value: any, data: any) => {
@@ -412,6 +429,7 @@ const clearfilters = () => {
   emitter.emit('clearTag', 'Voyage')
   searchTableQeuryTracking = {}
   searchTableQeuryTracking.filterTag = ['All']
+  searchTableQeuryTracking.dateFormat = formatDate
   sessionStorage.setItem('searchTableQeuryTracking', JSON.stringify(searchTableQeuryTracking))
   if (
     sessionStorage.getItem('reportList') != null ||
@@ -426,7 +444,7 @@ const clearfilters = () => {
   } else {
     searchTableQeuryTracking.filterTag = ['All']
   }
-  Gettrackingdata()
+  getTrackingData()
   renderTagsData()
 }
 const renderTagsData = () => {
@@ -496,6 +514,8 @@ const initDataByHeaderSearch = () => {
     sessionStorage.removeItem('searchTableQeuryTracking')
     searchTableQeuryTracking._textSearch = TrackingSearch.value
     searchTableQeuryTracking.filterTag = ['All']
+
+    searchTableQeuryTracking.dateFormat = formatDate
     sessionStorage.setItem('searchTableQeuryTracking', JSON.stringify(searchTableQeuryTracking))
     setTimeout(() => {
       emitter.emit('clearTag', 'Shipment status')
@@ -549,7 +569,22 @@ interface ListItem {
 const TagsList = ref<ListItem[]>([])
 const filterTag = ref(['All'])
 const isShowAlertIcon = ref(false)
-const Gettrackingdata = () => {
+const getTrackingData = () => {
+  const dateRangeKeys = [
+    'etd_start',
+    'etd_end',
+    'eta_start',
+    'eta_end',
+    'created_time_start',
+    'created_time_end'
+  ]
+  const curRangeData = {}
+  for (const key of dateRangeKeys) {
+    if (searchTableQeuryTracking[key]) {
+      curRangeData[key] = dayjs(searchTableQeuryTracking[key], formatDate).format(valueFormatDate)
+    }
+  }
+
   tableLoadingTableData.value = true
   TrackingTable_ref.value.getLoadingData(tableLoadingTableData.value)
   $api
@@ -558,7 +593,8 @@ const Gettrackingdata = () => {
       ps: TrackingTable_ref.value.pageInfo.pageSize,
       rc: -1,
       other_filed: '',
-      ...searchTableQeuryTracking
+      ...searchTableQeuryTracking,
+      ...curRangeData
     })
     .then((res: any) => {
       if (res.code === 200) {
@@ -614,8 +650,10 @@ onMounted(() => {
         filterData.dashboardData.push(str)
       }
     }
+
+    searchTableQeuryTracking.dateFormat = formatDate
     sessionStorage.setItem('searchTableQeuryTracking', JSON.stringify(searchTableQeuryTracking))
-    Gettrackingdata()
+    getTrackingData()
   }
   renderTagsData()
 })
@@ -625,17 +663,21 @@ const changeTag = (val: any, boolean: any) => {
   let str = 'Shipment status: ' + val
   filterData.filtersTagData.push(str)
   filterTag.value = val
+
+  searchTableQeuryTracking.dateFormat = formatDate
   sessionStorage.setItem('searchTableQeuryTracking', JSON.stringify(searchTableQeuryTracking))
   if (boolean) {
-    Gettrackingdata()
+    getTrackingData()
   }
   renderTagsData()
 }
 // 点击search按钮
 const SearchInput = () => {
   searchTableQeuryTracking._textSearch = TrackingSearch.value
+
+  searchTableQeuryTracking.dateFormat = formatDate
   sessionStorage.setItem('searchTableQeuryTracking', JSON.stringify(searchTableQeuryTracking))
-  Gettrackingdata()
+  getTrackingData()
 }
 
 import TrackingGuide from './components/TrackingGuide.vue'

src/views/Tracking/src/components/TrackingDetail/src/TrackingDetail.vue

@@ -140,7 +140,6 @@ const SubscribeShipments = () => {
     })
     .then((res: any) => {
       if (res.code === 200) {
-        console.log(res.data)
       }
     })
 }

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

@@ -545,8 +545,8 @@ const handleLinkClick = (row: any, column: any) => {
       path: '/tracking/detail',
       query: { a: row.__serial_no, _schemas: row._schemas }
     })
-    visitedRowState.setTrackingTableData(row['__serial_no'])
   }
+  visitedRowState.setTrackingTableData(row['__serial_no'])
 }
 
 const selectedNumber = ref(0)
@@ -605,7 +605,6 @@ const SubscribeShipments = (row: any) => {
     })
     .then((res: any) => {
       if (res.code === 200) {
-        console.log(res.data)
       }
     })
 }