feat: 联调delivery部分接口代码

src/api/module/Delivery.ts

@@ -198,4 +198,80 @@ export const SaveBookingList = (params: any, config: any) => {
     },
     config
   )
+}
+
+/**
+ * 获取delivery booking表格数据
+ */
+export const getDeliveryBookingTableColumn = (params: any, config: any) => {
+  return HttpAxios.post(
+    `${baseUrl}`,
+    {
+      action: 'destination_delivery_booking',
+      operate: 'destination_delivery_search',
+      ...params
+    },
+    config
+  )
+}
+
+/**
+ * 获取delivery booking表格数据
+ */
+export const getDeliveryBookingTableData = (params: any, config: any) => {
+  return HttpAxios.post(
+    `${baseUrl}`,
+    {
+      action: 'destination_delivery_booking',
+      operate: 'search',
+      ...params
+    },
+    config
+  )
+}
+
+/**
+ * 获取delivery booking dialog详情
+ */
+export const getDeliveryBookingDialogData = (params: any, config: any) => {
+  return HttpAxios.post(
+    `${baseUrl}`,
+    {
+      action: 'destination_delivery_booking',
+      operate: 'view_detail',
+      ...params
+    },
+    config
+  )
+}
+
+/**
+ * delivery_booking 邮件留言Save
+ */
+export const saveDliveryBookingEmail = (params: any, config: any) => {
+  return HttpAxios.post(
+    `${baseUrl}`,
+    {
+      action: 'destination_delivery_booking',
+      operate: 'email_message_board',
+      ...params
+    },
+    config
+  )
+}
+
+
+/**
+ * 审核delivery_booking
+ */
+export const reviewDliveryBooking = (params: any, config: any) => {
+  return HttpAxios.post(
+    `${baseUrl}`,
+    {
+      action: 'destination_delivery_booking',
+      operate: 'review',
+      ...params
+    },
+    config
+  )
 }

src/views/DestinationDelivery/src/DestinationDelivery.vue

@@ -5,19 +5,16 @@ import DeliveryDate from './components/DeliveryDate.vue'
 import { useRouter } from 'vue-router'
 
 const router = useRouter()
-const OperationSearch = ref()
 const filterRef: Ref<HTMLElement | null> = ref(null)
 const containerHeight = useCalculatingHeight(document.documentElement, 376, [filterRef])
-const searchData = ref({
-  inputModel: '',
-  startDate: '',
-  endDate: '',
-  userType: '',
-  questionType: '',
-  answerType: '',
-  answerSatisfaction: '',
-  comparator: 'thanOrEqual',
-  responseDuration: 0
+const queryData = ref({
+  text_search: '',
+  created_time_start: '',
+  created_time_end: '',
+  delivery_mode: '',
+  delivery_date_start: '',
+  delivery_date_end: '',
+  filterTag: ['ALL']
 })
 
 const modeList = [
@@ -31,9 +28,10 @@ const modeList = [
   }
 ]
 
-const numberCards = [
+const numberCards = ref([
   {
     label: 'Total Bookings',
+    key: 'ALL',
     value: 0,
     color: '#2b2f36'
   },
@@ -61,15 +59,20 @@ const numberCards = [
     color: '#243041',
     icon: 'icon_cancelled_b'
   }
-]
-const activeCard = ref(0)
-const clickCard = (index: number) => {
-  activeCard.value = index
+])
+const clickCard = (filterTagItem: string) => {
+  queryData.value.filterTag.pop()
+  queryData.value.filterTag.push(filterTagItem)
+  handleSearch()
 }
 
 const DateChange = (date: any) => {
-  searchData.value.startDate = date[0]
-  searchData.value.endDate = date[1]
+  queryData.value.created_time_start = date[0]
+  queryData.value.created_time_end = date[1]
+}
+const deliveryDataChange = (date) => {
+  queryData.value.delivery_date_start = date[0]
+  queryData.value.delivery_date_end = date[1]
 }
 
 const handleConfigurations = () => {
@@ -79,13 +82,16 @@ const handleCreate = () => {
   router.push({ name: 'Create New Booking' })
 }
 
-const handleTest = () => {
-  // Handle test logic here
-  router.push({ name: 'Modify Booking' })
-}
-
 const DateStart = ref([])
 const tableRef = ref()
+
+const setNumberCards = (cards) => {
+  numberCards.value = cards
+}
+
+const handleSearch = () => {
+  tableRef.value.SearchOperationLog()
+}
 </script>
 <template>
   <div class="destination-delivery">
@@ -104,20 +110,18 @@ const tableRef = ref()
           <span style="margin-right: 4px" class="font_family icon-icon_add_b"></span>
           <span style="font-weight: 400">Create New Booking</span>
         </el-button>
-
-        <el-button @click="handleTest">测试</el-button>
       </div>
     </div>
     <div class="display">
       <div class="header_top">
         <div class="date-tips_filter filter-item">
           <span class="label">Delivery Date:</span>
-          <DeliveryDate :Date="DateStart" />
+          <DeliveryDate @DateChange="deliveryDataChange" :Date="DateStart" />
         </div>
 
         <div class="tips_filter filter-item">
           <span class="label">Delivery Mode:</span>
-          <el-select v-model="searchData.userType" placeholder="" clearable>
+          <el-select v-model="queryData.delivery_mode" placeholder="" clearable>
             <el-option
               v-for="item in modeList"
               :key="item.value"
@@ -133,7 +137,7 @@ const tableRef = ref()
         <div class="input-tips_filter filter-item">
           <el-input
             placeholder="Search Question Booking No、HBOL No、MBL No、Container No、Consignee"
-            v-model="OperationSearch"
+            v-model="queryData.text_search"
             class="log_input"
           >
             <template #prefix>
@@ -145,13 +149,17 @@ const tableRef = ref()
             </template>
           </el-input>
         </div>
-        <el-button class="el-button--dark">Search</el-button>
+        <el-button class="el-button--dark" @click="handleSearch">Search</el-button>
       </div>
       <div class="number-cards">
         <div
           class="card"
-          :class="{ 'is-active': index === activeCard }"
-          @click="clickCard(index)"
+          :class="{
+            'is-active':
+              queryData.filterTag.includes(item.key as string | undefined) ||
+              queryData.filterTag.includes(item.label)
+          }"
+          @click="clickCard((item.key || item.label) as string)"
           v-for="(item, index) in numberCards"
           :key="index"
         >
@@ -170,7 +178,12 @@ const tableRef = ref()
         </div>
       </div>
     </div>
-    <TableView :height="containerHeight" ref="tableRef"></TableView>
+    <TableView
+      @get-number-cards="setNumberCards"
+      :height="containerHeight"
+      :queryData="queryData"
+      ref="tableRef"
+    ></TableView>
   </div>
 </template>
 

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, nextTick, onMounted } from 'vue'
 import { type VxeGridInstance, type VxeGridProps } from 'vxe-table'
-// import { autoWidth } from '@/utils/table'
+import { autoWidth } from '@/utils/table'
 import { useRowClickStyle } from '@/hooks/rowClickStyle'
 import dayjs from 'dayjs'
 import { formatTimezone, formatNumber } from '@/utils/tools'
@@ -15,6 +15,10 @@ const props = defineProps({
   height: {
     type: Number,
     default: 440
+  },
+  queryData: {
+    type: Object,
+    default: () => ({})
   }
 })
 
@@ -38,14 +42,6 @@ const handleColumns = (columns: any, status?: string) => {
         ...curColumn,
         slots: { default: 'link' }
       }
-    } else if (item.type === 'mode' && status !== 'all') {
-      curColumn = {
-        ...curColumn,
-        slots: { default: 'mode' },
-        formatter: ({ cellValue }: any) => {
-          return cellValue
-        }
-      }
     }
     // 格式化
     if (item.formatter === 'date' || item.formatter === 'dateTime') {
@@ -62,11 +58,11 @@ const handleColumns = (columns: any, status?: string) => {
 // 获取表格列
 const getTableColumns = async () => {
   tableLoadingColumn.value = true
-  await $api.getOperationTableColumns().then((res: any) => {
+  await $api.getDeliveryBookingTableColumn().then((res: any) => {
     if (res.code === 200) {
       tableData.value.columns = [
         { type: 'checkbox', width: 50, fixed: 'left' },
-        ...handleColumns(res.data.OperationTableColumns)
+        ...handleColumns(res.data.TrackingTableColumns)
       ]
       console.log('tableData.value.columns', tableData.value.columns)
       const index = tableData.value.columns.findIndex((item: any) => item.title === 'Action')
@@ -82,7 +78,7 @@ const getTableColumns = async () => {
     }
   })
   nextTick(() => {
-    // tableRef.value && autoWidth(tableData.value, tableRef.value)
+    tableRef.value && autoWidth(tableData.value, tableRef.value)
     tableLoadingColumn.value = false
     selectedTableData.value = []
   })
@@ -109,59 +105,99 @@ const assignTableData = (data: any) => {
   }
 }
 
-let searchdata: any = {}
+const isEmployeeRole = ref(true)
+
+const emit = defineEmits(['getNumberCards'])
+const rtnNumberCards = (data) => {
+  const cards = [
+    {
+      label: 'Total Bookings',
+      value: data.All || 0,
+      color: '#2b2f36',
+      key: 'ALL'
+    },
+    {
+      label: 'Pending Approval',
+      value: data.pending_approval_rc || 0,
+      color: '#edb82f',
+      icon: 'icon_time_b'
+    },
+    {
+      label: 'Approved',
+      value: data.approved_rc || 0,
+      color: '#00a870',
+      icon: 'icon_confirm_b'
+    },
+    {
+      label: 'Rejected',
+      value: data.rejected_rc || 0,
+      color: '#c9353f',
+      icon: 'icon_reject_b'
+    },
+    {
+      label: 'Cancelled',
+      value: data.cancelled_rc || 0,
+      color: '#243041',
+      icon: 'icon_cancelled_b'
+    }
+  ]
+  emit('getNumberCards', cards)
+}
 // 获取表格数据
 const getTableData = async (isPageChange?: boolean) => {
   const rc = isPageChange ? pageInfo.value.total : -1
   tableLoadingTableData.value = true
   await $api
-    .SearchOperationLog({
+    .getDeliveryBookingTableData({
       cp: pageInfo.value.pageNo,
       ps: pageInfo.value.pageSize,
       rc,
-      ...searchdata
+      ...props.queryData
     })
     .then((res: any) => {
       if (res.code === 200) {
+        isEmployeeRole.value = res.data.is_employee
         assignTableData(res.data)
+        rtnNumberCards(res.data)
       }
     })
     .finally(() => {
       selectedTableData.value = []
       nextTick(() => {
-        // tableRef.value && autoWidth(tableData.value, tableRef.value)
+        tableRef.value && autoWidth(tableData.value, tableRef.value)
         tableLoadingTableData.value = false
       })
     })
 }
-const SearchOperationLog = (val: any) => {
-  searchdata = val
+const SearchOperationLog = () => {
   tableLoadingTableData.value = true
   $api
-    .SearchOperationLog({
+    .getDeliveryBookingTableData({
       cp: pageInfo.value.pageNo,
       ps: pageInfo.value.pageSize,
       rc: -1,
-      ...val
+      ...props.queryData
     })
     .then((res: any) => {
       if (res.code === 200) {
+        isEmployeeRole.value = res.data.is_employee
         assignTableData(res.data)
+        rtnNumberCards(res.data)
       }
     })
     .finally(() => {
       selectedTableData.value = []
       nextTick(() => {
-        // tableRef.value && autoWidth(tableData.value, tableRef.value)
+        tableRef.value && autoWidth(tableData.value, tableRef.value)
         tableLoadingTableData.value = false
       })
     })
 }
 onMounted(() => {
   Promise.all([getTableColumns(), getTableData(false)]).finally(() => {
-    // nextTick(() => {
-    //   tableRef.value && autoWidth(tableData.value, tableRef.value)
-    // })
+    nextTick(() => {
+      tableRef.value && autoWidth(tableData.value, tableRef.value)
+    })
   })
 })
 
@@ -227,7 +263,7 @@ const tableData = ref<VxeGridProps<any>>({
     }
   },
   columnConfig: { resizable: true, useKey: true },
-  rowConfig: { isHover: true },
+  rowConfig: { isHover: true, isCurrent: true },
   exportConfig: {
     types: ['csv', 'html', 'txt', 'xlsx'],
     modes: ['current', 'selected', 'all']
@@ -256,9 +292,9 @@ const handleCustomizeColumns = () => {
 // 定制表格
 const customizeColumns = async () => {
   await getTableColumns()
-  // nextTick(() => {
-  //   tableRef.value && autoWidth(tableData.value, tableRef.value)
-  // })
+  nextTick(() => {
+    tableRef.value && autoWidth(tableData.value, tableRef.value)
+  })
 }
 
 const tableLoadingColumn = ref(false)
@@ -281,7 +317,7 @@ const handelEdit = (row: any) => {
   console.log(row)
   router.push({
     path: '/destination-delivery/CreateNewBooking',
-    query: { a: row._serial_no}
+    query: { a: row._serial_no }
   })
 }
 
@@ -290,7 +326,25 @@ const handleCreate = () => {
   console.log('Create new booking')
 }
 
-const tipsDialogModel = ref(false)
+const handleLinkClick = (row: any, column: any) => {
+  if (column.title === 'Booking No.') {
+    router.push({
+      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 }
+    })
+  }
+}
+
+const tipsDialogRef = ref()
+const handleTips = (type: string) => {
+  tipsDialogRef.value.openDialog(type)
+}
 
 defineExpose({
   SearchOperationLog
@@ -346,37 +400,67 @@ defineExpose({
           class="action-btn el-button--blue"
           style="height: 24px; width: 24px"
         >
-          <span style="color: 'red'" class="font_family icon-icon_view_b"> </span>
+          <span class="font_family icon-icon_view_b"> </span>
         </el-button>
         <!-- email -->
         <el-button
           @click="clickEmailBtn(row)"
           class="action-btn el-button--blue"
           style="height: 24px; width: 24px"
+          v-if="isEmployeeRole && row.status === 'Approved'"
         >
-          <span style="color: 'red'" class="font_family icon-icon_email_b"> </span>
+          <span class="font_family icon-icon_email_b"> </span>
         </el-button>
         <!-- edit -->
         <el-button
           @click="handelEdit(row)"
           class="action-btn el-button--blue"
           style="height: 24px; width: 24px"
+          v-if="isEmployeeRole && row.status === 'Pending Approval'"
+        >
+          <span class="font_family icon-icon_edit_b"> </span>
+        </el-button>
+        <!-- cancel -->
+        <el-button
+          @click="handleTips('cancel')"
+          class="action-btn el-button--blue"
+          style="height: 24px; width: 24px"
+          v-if="isEmployeeRole && row.status === 'Pending Approval'"
         >
-          <span style="color: 'red'" class="font_family icon-icon_edit_b"> </span>
+          <span class="font_family icon-icon_cancelled_b"> </span>
         </el-button>
         <!-- confirm -->
-        <el-button class="action-btn el-button--blue" style="height: 24px; width: 24px">
-          <span style="color: 'red'" class="font_family icon-icon_confirm_b"> </span>
+        <el-button
+          v-if="!isEmployeeRole && row.status === 'Pending Approval'"
+          @click="handleTips('confirm')"
+          class="action-btn el-button--blue"
+          style="height: 24px; width: 24px"
+        >
+          <span class="font_family icon-icon_confirm_b"> </span>
         </el-button>
         <!-- reject -->
         <el-button
-          @click="tipsDialogModel = true"
+          v-if="!isEmployeeRole && row.status === 'Pending Approval'"
+          @click="handleTips('reject')"
           class="action-btn el-button--blue"
           style="height: 24px; width: 24px"
         >
-          <span style="color: 'red'" class="font_family icon-icon_reject_b"> </span>
+          <span class="font_family icon-icon_reject_b"> </span>
         </el-button>
       </template>
+      <!-- Status字段的插槽 -->
+      <template #status="{ row, column }">
+        <VTag :type="row[column.field]">{{ row[column.field] }}</VTag>
+      </template>
+      <!-- Booking No字段的插槽 -->
+      <template #link="{ row, column }">
+        <span
+          style="color: var(--color-theme); cursor: pointer"
+          @click="handleLinkClick(row, column)"
+        >
+          {{ row[column.field] }}
+        </span>
+      </template>
     </vxe-grid>
 
     <div class="bottom-pagination">
@@ -399,7 +483,7 @@ defineExpose({
     <CustomizeColumns @customize="customizeColumns" ref="CustomizeColumnsRef" />
     <BookingDetailDialog ref="bookingDetailDiaRef" />
     <EmailDialog ref="emailDialogRef" />
-    <TipsDialog ref="tipsDialogRef" v-model="tipsDialogModel" type="reject" booking-no="123" />
+    <TipsDialog ref="tipsDialogRef" type="reject" booking-no="123" />
   </div>
 </template>
 

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

@@ -5,31 +5,50 @@ import OperationLogProcess from './OperationLogProcess.vue'
 import { formatTimezone } from '@/utils/tools'
 
 const visible = ref(false)
+const loading = ref(false)
 
+const shipmentInfoTableData = ref([])
 const openDialog = (row: any) => {
   visible.value = true
+  loading.value = true
+  $api
+    .getDeliveryBookingDialogData({ serial_no: row._serial_no })
+    .then((res) => {
+      console.log('res', res)
+      const data = res.data.data
+      if (data.update_time !== data.create_time && data.status === 'Pending Approval') {
+        data.status = 'Modified'
+      }
+      handleStepData(data.status, data)
+      deliveryInfoData.value = {
+        modeType: data.delivery_mode || '--',
+        deliveryDate: data.delivery_date || '--',
+        deliveryAddress: data.delivery_address || '--',
+        specialRequirements: data.special_requirements || '--'
+      }
+      shipmentInfoTableData.value = data.shipmentsData || []
+    })
+    .finally(() => {
+      loading.value = false
+    })
 }
 
-const stepList: any = ref([
-  {
-    label: 'Created',
-    date: 'Jun-01-2024',
-    icon: 'icon_submit_b',
-    status: 'completed'
-  }
-])
+const stepList: any = ref([])
 
-const status = ref('pending')
-const handleStepData = () => {
-  let updateTime = 'Jun-04-2024'
-  if (updateTime && status.value === 'pending') {
+const handleStepData = (status, data) => {
+  stepList.value.push({
+    label: 'Created',
+    date: data.created_time || '--',
+    icon: 'icon_submit_b'
+  })
+  if (status === 'Modified') {
     stepList.value.push({
       label: 'Modified',
-      date: 'Jun-04-2024',
+      date: data.update_time || '--',
       icon: 'icon_edit_b'
     })
   }
-  if (status.value === 'pending') {
+  if (status === 'Pending Approval' || status === 'Modified') {
     stepList.value.push({
       label: 'Pending',
       date: 'Current',
@@ -38,25 +57,25 @@ const handleStepData = () => {
     })
     stepList.value.push({
       label: 'Approved',
-      date: 'Current',
+      date: '--',
       icon: 'icon_confirm_b',
       status: 'unfinished'
     })
-  } else if (status.value === 'approved') {
+  } else if (status === 'Approved') {
     stepList.value.push({
       label: 'Approved',
       date: '--',
       icon: 'icon_confirm_b',
       status: 'unfinished'
     })
-  } else if (status.value === 'rejected') {
+  } else if (status === 'Rejected') {
     stepList.value.push({
       label: 'Rejected',
       date: 'Jun-05-2024',
       icon: 'icon_reject_b',
       status: 'rejected'
     })
-  } else if (status.value === 'cancelled') {
+  } else if (status === 'Cancelled') {
     stepList.value.push({
       label: 'Cancelled',
       date: 'Jun-05-2024',
@@ -65,14 +84,23 @@ const handleStepData = () => {
     })
   }
 }
-handleStepData()
 const deliveryInfoData = ref({
-  modeType: 'Truck',
-  deliveryDate: 'Jun-15-2024',
-  deliveryAddress: 'Main Distribution Center,160#BEIJING ROAD, JINGAN District, Shenzhen, China',
-  specialRequirements: 'Tail Lift Required'
+  modeType: '',
+  deliveryDate: '',
+  deliveryAddress: '',
+  specialRequirements: ''
 })
 
+const clearData = () => {
+  shipmentInfoTableData.value = []
+  stepList.value = []
+  deliveryInfoData.value = {
+    modeType: '',
+    deliveryDate: '',
+    deliveryAddress: '',
+    specialRequirements: ''
+  }
+}
 defineExpose({
   openDialog
 })
@@ -86,49 +114,54 @@ defineExpose({
     :close-on-click-modal="false"
     width="1000px"
     top="10vh"
+    @closed="clearData"
     v-if="visible"
   >
-    <DetailStep :stepList="stepList" />
-    <div class="booking-info">
-      <div class="booking-no">
-        <span class="no">Booking No.B83131200164</span>
-        <v-tag class="tag" type="Pending Approval">Pending Approval</v-tag>
-      </div>
-      <div class="created-time">Created Time:Jun-01-2024</div>
-    </div>
-    <ShipmentInforTable></ShipmentInforTable>
-    <div class="delivery-information">
-      <div class="label">Delivery Information</div>
-      <div class="delivery-info">
-        <div class="delivery-item inline-flex" style="width: 200px">
-          <span class="item-label">Mode Type</span>
-          <span class="item-value">{{ deliveryInfoData.modeType }}</span>
-        </div>
-        <div class="delivery-item inline-flex">
-          <span class="item-label">Delivery Date</span>
-          <span class="item-value">
-            <span class="font_family icon-icon_date_b" style="margin-right: 4px"></span>
-            <span style="margin-top: 1px">{{ formatTimezone(deliveryInfoData.deliveryDate) }}</span>
-          </span>
+    <div v-vloading="loading">
+      <DetailStep :stepList="stepList" />
+      <div class="booking-info">
+        <div class="booking-no">
+          <span class="no">Booking No.B83131200164</span>
+          <v-tag class="tag" type="Pending Approval">Pending Approval</v-tag>
         </div>
-        <div class="delivery-item">
-          <span class="item-label">Delivery Address</span>
-          <span class="item-value">
-            <span class="font_family icon-icon_location_b" style="margin-right: 2px"></span>
-            <span style="margin-top: 1px">{{ deliveryInfoData.deliveryAddress }}</span>
-          </span>
-        </div>
-        <div class="delivery-item">
-          <span class="item-label">Special Requirements</span>
-          <span class="item-value">
-            <span class="font_family icon-icon_paragraph_b" style="margin-right: 2px"></span>
-            <span style="margin-top: 1px">{{ deliveryInfoData.specialRequirements }}</span>
-          </span>
+        <div class="created-time">Created Time:Jun-01-2024</div>
+      </div>
+      <ShipmentInforTable :data="shipmentInfoTableData" />
+      <div class="delivery-information">
+        <div class="label">Delivery Information</div>
+        <div class="delivery-info">
+          <div class="delivery-item inline-flex" style="width: 200px">
+            <span class="item-label">Mode Type</span>
+            <span class="item-value">{{ deliveryInfoData.modeType }}</span>
+          </div>
+          <div class="delivery-item inline-flex">
+            <span class="item-label">Delivery Date</span>
+            <span class="item-value">
+              <span class="font_family icon-icon_date_b" style="margin-right: 4px"></span>
+              <span style="margin-top: 1px">{{
+                formatTimezone(deliveryInfoData.deliveryDate)
+              }}</span>
+            </span>
+          </div>
+          <div class="delivery-item">
+            <span class="item-label">Delivery Address</span>
+            <span class="item-value">
+              <span class="font_family icon-icon_location_b" style="margin-right: 2px"></span>
+              <span style="margin-top: 1px">{{ deliveryInfoData.deliveryAddress }}</span>
+            </span>
+          </div>
+          <div class="delivery-item">
+            <span class="item-label">Special Requirements</span>
+            <span class="item-value">
+              <span class="font_family icon-icon_paragraph_b" style="margin-right: 2px"></span>
+              <span style="margin-top: 1px">{{ deliveryInfoData.specialRequirements }}</span>
+            </span>
+          </div>
         </div>
       </div>
+      <el-divider style="margin-top: 8px; margin-bottom: 20px" />
+      <OperationLogProcess />
     </div>
-    <el-divider style="margin-top: 8px; margin-bottom: 20px" />
-    <OperationLogProcess />
   </el-dialog>
 </template>
 

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

@@ -148,8 +148,7 @@ const sendEmail = () => {
   const html = editorRef.value.getHtml()
   const text = editorRef.value.getText()
   $api
-    .sendEmailApi({
-      action: 'ocean_booking',
+    .saveDliveryBookingEmail({
       email: emailData.value.email,
       communication_cc: emailData.value.ccEmail,
       serial_no: emailData.value.serial_no,

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

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { type VxeGridInstance, type VxeGridProps } from 'vxe-table'
-import { autoWidth } from '@/utils/table'
 import { useRowClickStyle } from '@/hooks/rowClickStyle'
 import { formatTimezone, formatNumber } from '@/utils/tools'
 
@@ -14,29 +13,29 @@ const tableData = ref<VxeGridProps<any>>({
   round: true,
   columns: [
     {
-      field: 'userType',
+      field: 'HBOL No.',
       title: 'HBOL No.',
-      minWidth: 100
+      width: 120
     },
     {
-      field: 'containerType',
+      field: 'Container No.',
       title: 'Container No.'
     },
     {
-      field: 'containerType',
+      field: 'Service Type',
       title: 'Service Type'
     },
     {
-      field: 'shipmentDate',
+      field: 'ETA',
       title: 'ETA',
       minWidth: 100,
       formatter: ({ cellValue }: any) => formatTimezone(cellValue)
     },
 
     {
-      field: 'action',
+      field: 'Recommended Delivery Date',
       title: 'Recommended Delivery Date',
-      width: 120,
+      width: 220,
       formatter: ({ cellValue }: any) => formatTimezone(cellValue)
     }
   ],
@@ -52,25 +51,22 @@ const tableData = ref<VxeGridProps<any>>({
   rowConfig: { isHover: true }
 })
 
-const tableLoadingTable = ref()
-
-let searchdata: any = {}
 // 获得表格数据后赋值
 const assignTableData = (data: any) => {
-  tableData.value.data = data.searchData || []
-
-  if (tableData.value.columns.length > 0) {
-    const index = tableData.value.columns.findIndex((item: any) => item.title === 'Action')
-    if (index === -1) {
-      tableData.value.columns.push({
-        title: 'Action',
-        fixed: 'right',
-        width: 120,
-        slots: { default: 'action' }
-      })
-    }
-  }
+  tableData.value.data = data || []
 }
+watch(
+  () => props.data,
+  (newData) => {
+    if (newData) {
+      assignTableData(newData)
+    }
+  },
+  { immediate: true, deep: true }
+)
+const tableLoadingTable = ref()
+
+let searchdata: any = {}
 
 // 获取表格数据
 const getTableData = async () => {