feat: 实现delivery日历Booking tag跳转功能

src/views/DestinationDelivery/src/DestinationDelivery.vue

@@ -19,6 +19,20 @@ const handleCreate = (date?: string) => {
   })
 }
 
+const jumpListPage = (date?: string) => {
+  pageType.value = 'List View'
+  nextTick(() => {
+    listView.value.searchTableData(date)
+  })
+}
+const changePageType = () => {
+  if (pageType.value === 'List View') {
+    console.log('pageType.value', pageType.value)
+    nextTick(() => {
+      listView.value.searchTableData()
+    })
+  }
+}
 const pageType = ref('Calendar View')
 const directionOptions = [
   { label: 'Calendar View', value: 'Calendar View', icon: 'icon_ratesheet_b' },
@@ -51,7 +65,7 @@ const directionOptions = [
       </div>
     </div>
     <div class="page-type">
-      <el-segmented v-model="pageType" :options="directionOptions">
+      <el-segmented v-model="pageType" @change="changePageType()" :options="directionOptions">
         <template #default="scope">
           <div class="flex-center">
             <span
@@ -67,6 +81,7 @@ const directionOptions = [
     <ListView ref="listView" v-if="pageType === 'List View'"></ListView>
     <CalendarView
       @add="handleCreate"
+      @jumpListPage="jumpListPage"
       :isEmployeeRole="listView?.isEmployeeRole"
       v-if="pageType === 'Calendar View'"
     ></CalendarView>

src/views/DestinationDelivery/src/components/CalendarView.vue

@@ -27,7 +27,7 @@ const getDataByDate = (date: Dayjs, key: string) => {
   return calendarData.value[date.format('YYYY-MM-DD')]?.[key] ?? 0
 }
 
-const emit = defineEmits(['add'])
+const emit = defineEmits(['add', 'jumpListPage'])
 const calendarLoading = ref(false)
 const handleAddClick = (date) => {
   emit('add', dayjs(date).format('YYYY-MM-DD'))
@@ -76,6 +76,10 @@ const calendarTagDialog = ref()
 const handleTagClick = (type, date) => {
   calendarTagDialog.value.openDialog(type, date, calendarData.value[date.format('YYYY-MM-DD')])
 }
+
+const jumpListPage = (date) => {
+  emit('jumpListPage', date.format('YYYY-MM-DD'))
+}
 </script>
 
 <template>
@@ -181,6 +185,7 @@ const handleTagClick = (type, date) => {
               v-if="
                 getDataByDate(current, 'bookingNumber') || getDataByDate(current, 'bookingCtns')
               "
+              @click="jumpListPage(current)"
             >
               <div class="label">Destination Booking</div>
               <div class="tag-style">

src/views/DestinationDelivery/src/components/ListView.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { useCalculatingHeight } from '@/hooks/calculatingHeight'
 import TableView from './TableView'
+import dayjs from 'dayjs'
 import DeliveryDate from './DeliveryDate.vue'
 
 const filterRef: Ref<HTMLElement | null> = ref(null)
@@ -85,11 +86,24 @@ const setNumberCards = (cards) => {
 }
 
 const handleSearch = () => {
-  tableRef.value.SearchOperationLog()
+  tableRef.value.searchTableData()
+}
+
+const searchTableData = (date: string) => {
+  console.log('searchTableData')
+  if (!date) {
+    handleSearch()
+    return
+  }
+  DateStart.value = [date, date]
+  queryData.value.delivery_date_start = dayjs(date).format('MM/DD/YYYY')
+  queryData.value.delivery_date_end = dayjs(date).format('MM/DD/YYYY')
+  handleSearch()
 }
 
 defineExpose({
-  isEmployeeRole
+  isEmployeeRole,
+  searchTableData
 })
 </script>
 

src/views/DestinationDelivery/src/components/TableView/src/TableView.vue

@@ -179,7 +179,7 @@ const getTableData = async (isPageChange?: boolean) => {
       })
     })
 }
-const SearchOperationLog = () => {
+const searchTableData = () => {
   tableLoadingTableData.value = true
   $api
     .getDeliveryBookingTableData({
@@ -204,7 +204,7 @@ const SearchOperationLog = () => {
     })
 }
 onMounted(() => {
-  Promise.all([getTableColumns(), getTableData(false)]).finally(() => {
+  Promise.all([getTableColumns()]).finally(() => {
     nextTick(() => {
       tableRef.value && autoWidth(tableData.value, tableRef.value)
     })
@@ -322,11 +322,11 @@ const handleTips = (type: string, row: any) => {
   tipsDialogRef.value.openDialog(type, row)
 }
 const handleChangeRowState = () => {
-  SearchOperationLog()
+  searchTableData()
 }
 
 defineExpose({
-  SearchOperationLog,
+  searchTableData,
   isEmployeeRole
 })
 </script>