style: 调整deliver部分样式

src/views/DestinationDelivery/src/components/DeliveryDate.vue

@@ -37,7 +37,7 @@ watch(
   { immediate: true, deep: true }
 )
 
-const testDate = {
+const stateDataList = {
   '2025-06-01': {
     pending: 3,
     approved: 3
@@ -48,7 +48,7 @@ const testDate = {
   }
 }
 const isShowStatus = (date: string) => {
-  return testDate[date] ? true : false
+  return stateDataList[date] ? true : false
 }
 
 const emit = defineEmits(['DateRangeChange', 'DateChange'])
@@ -120,10 +120,6 @@ const handlePanelChange = (value: any, mode: any) => {
     isShowExtra.value = true
   }
 }
-// 判断失焦时是否两个都有值
-const isTwoDate = (date: any) => {
-  console.log(date)
-}
 </script>
 <template>
   <div class="delivery-date">

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

@@ -358,7 +358,11 @@ defineExpose({
           <span style="color: 'red'" class="font_family icon-icon_confirm_b"> </span>
         </el-button>
         <!-- reject -->
-        <el-button class="action-btn el-button--blue" style="height: 24px; width: 24px">
+        <el-button
+          @click="tipsDialogModel = true"
+          class="action-btn el-button--blue"
+          style="height: 24px; width: 24px"
+        >
           <span style="color: 'red'" class="font_family icon-icon_reject_b"> </span>
         </el-button>
       </template>

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

@@ -2,42 +2,77 @@
 import DetailStep from './DetailStep.vue'
 import ShipmentInforTable from './ShipmentInforTable.vue'
 import OperationLogProcess from './OperationLogProcess.vue'
+import { formatTimezone } from '@/utils/tools'
 
 const visible = ref(false)
 
 const openDialog = (row: any) => {
   visible.value = true
-  console.log(row)
 }
 
 const stepList: any = ref([
   {
-    id: 1,
     label: 'Created',
     date: 'Jun-01-2024',
     icon: 'icon_submit_b',
     status: 'completed'
-  },
-  {
-    label: 'Pending',
-    date: 'Current',
-    icon: 'icon_time_b',
-    status: 'current'
-  },
-  {
-    label: 'Rejected',
-    date: 'Jun-03-2024',
-    icon: 'icon_reject_b',
-    status: 'rejected'
-  },
-  {
-    label: 'Approved',
-    date: 'Jun-03-2024',
-    icon: 'icon_confirm_b',
-    status: 'current'
   }
 ])
 
+const status = ref('pending')
+const handleStepData = () => {
+  let updateTime = 'Jun-04-2024'
+  if (updateTime && status.value === 'pending') {
+    stepList.value.push({
+      label: 'Modified',
+      date: 'Jun-04-2024',
+      icon: 'icon_edit_b'
+    })
+  }
+  if (status.value === 'pending') {
+    stepList.value.push({
+      label: 'Pending',
+      date: 'Current',
+      icon: 'icon_time_b',
+      status: 'current'
+    })
+    stepList.value.push({
+      label: 'Approved',
+      date: 'Current',
+      icon: 'icon_confirm_b',
+      status: 'unfinished'
+    })
+  } else if (status.value === 'approved') {
+    stepList.value.push({
+      label: 'Approved',
+      date: '--',
+      icon: 'icon_confirm_b',
+      status: 'unfinished'
+    })
+  } else if (status.value === 'rejected') {
+    stepList.value.push({
+      label: 'Rejected',
+      date: 'Jun-05-2024',
+      icon: 'icon_reject_b',
+      status: 'rejected'
+    })
+  } else if (status.value === 'cancelled') {
+    stepList.value.push({
+      label: 'Cancelled',
+      date: 'Jun-05-2024',
+      icon: 'icon_cancelled_b',
+      status: 'completed'
+    })
+  }
+}
+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'
+})
+
 defineExpose({
   openDialog
 })
@@ -67,29 +102,27 @@ defineExpose({
       <div class="delivery-info">
         <div class="delivery-item inline-flex" style="width: 200px">
           <span class="item-label">Mode Type</span>
-          <span class="item-value">Shanghai, China</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">Jun-15-2024</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"
-              >Main Distribution Center,160#BEIJING ROAD, JINGAN District, Shenzhen, China</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">Tail Lift Required</span>
+            <span style="margin-top: 1px">{{ deliveryInfoData.specialRequirements }}</span>
           </span>
         </div>
       </div>

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { formatTimezone } from '@/utils/tools'
 const props = defineProps<{
   stepList: Array<{
     id?: number
@@ -6,6 +7,7 @@ const props = defineProps<{
     date?: string
     icon: string
     status: 'completed' | 'current' | 'unfinished' | 'rejected' | 'approved'
+    description?: string
   }>
 }>()
 </script>
@@ -44,7 +46,7 @@ const props = defineProps<{
               trigger="hover"
               effect="dark"
               placement="top"
-              content="This is some description information about the pending task, if there is too much content."
+              :content="step.description || ''"
             >
               <span
                 style="font-size: 12px"
@@ -53,7 +55,11 @@ const props = defineProps<{
               ></span>
             </el-tooltip>
           </div>
-          <div class="step-date">{{ step.date || '--' }}</div>
+          <div class="step-date">
+            {{
+              step.date !== '--' && step.date !== 'Current' ? formatTimezone(step.date) : step.date
+            }}
+          </div>
         </div>
       </div>
 

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

@@ -1,13 +1,15 @@
 <script setup lang="ts">
 const processList = ref([
   {
-    time: 'Jun-01-2024 16:25:31 UTC+3',
+    time: 'Jun-01-2024 16:25:31 ',
+    timezone: 'UTC+3',
     label: 'Submit Booking',
     createdBy: 'Customer A',
     tips: '--'
   },
   {
-    time: 'May-15-2024 16:25:31 UTC+3',
+    time: 'May-15-2024 16:25:31 ',
+    timezone: 'UTC+3',
     label: 'Reject Booking',
     createdBy: 'John Doe',
     tips: 'Too early'

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

@@ -12,7 +12,34 @@ const tableData = ref<VxeGridProps<any>>({
   minHeight: 70,
   border: true,
   round: true,
-  columns: [],
+  columns: [
+    {
+      field: 'userType',
+      title: 'HBOL No.',
+      minWidth: 100
+    },
+    {
+      field: 'containerType',
+      title: 'Container No.'
+    },
+    {
+      field: 'containerType',
+      title: 'Service Type'
+    },
+    {
+      field: 'shipmentDate',
+      title: 'ETA',
+      minWidth: 100,
+      formatter: ({ cellValue }: any) => formatTimezone(cellValue)
+    },
+
+    {
+      field: 'action',
+      title: 'Recommended Delivery Date',
+      width: 120,
+      formatter: ({ cellValue }: any) => formatTimezone(cellValue)
+    }
+  ],
   data: [],
   scrollY: { enabled: true, oSize: 20, gt: 30 },
   emptyText: ' ',
@@ -26,76 +53,7 @@ const tableData = ref<VxeGridProps<any>>({
 })
 
 const tableLoadingTable = ref()
-const tableLoadingColumn = ref(false)
-const handleColumns = (columns: any) => {
-  const newColumns = columns.map((item: any) => {
-    let curColumn: any = {
-      title: item.title,
-      field: item.field,
-      minWidth: 30
-    }
-
-    // 格式化
-    if (item.formatter === 'date' || item.formatter === 'dateTime') {
-      curColumn = {
-        ...curColumn,
-        formatter: ({ cellValue }: any) => formatTimezone(cellValue)
-      }
-    } else if (item.formatter === 'number') {
-      curColumn = {
-        ...curColumn,
-        formatter: ({ cellValue }: any) => formatNumber(Number(cellValue), item?.digits)
-      }
-    }
-    return curColumn
-  })
-  return newColumns
-}
-watch(
-  () => props.data,
-  (newVal) => {
-    const containers = newVal?.containers
-    if (containers && containers.container_column) {
-      tableData.value.columns = handleColumns(containers.container_column)
-      tableData.value.data = containers.container_data
-      nextTick(() => {
-        tableRef.value && autoWidth(tableData.value, tableRef.value)
-      })
-    }
-  },
-  {
-    immediate: true,
-    deep: true
-  }
-)
 
-const tableOriginColumnsField = ref()
-// 获取表格列
-const getTableColumns = async () => {
-  tableLoadingColumn.value = true
-  await $api.getOperationTableColumns().then((res: any) => {
-    if (res.code === 200) {
-      tableData.value.columns = [
-        { type: 'checkbox', width: 50, fixed: 'left' },
-        ...handleColumns(res.data.OperationTableColumns),
-        {}
-      ]
-      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' }
-        })
-      }
-      tableOriginColumnsField.value = res.data.OperationTableColumns
-    }
-  })
-  nextTick(() => {
-    tableLoadingColumn.value = false
-  })
-}
 let searchdata: any = {}
 // 获得表格数据后赋值
 const assignTableData = (data: any) => {
@@ -135,9 +93,6 @@ const getTableData = async () => {
     })
 }
 
-onMounted(() => {
-  Promise.all([getTableColumns(), getTableData()]).finally(() => {})
-})
 // 实现行点击样式
 useRowClickStyle(tableRef)
 </script>
@@ -146,7 +101,7 @@ useRowClickStyle(tableRef)
   <div class="shipment-infor-table">
     <div class="label">Shipment Information</div>
     <vxe-grid
-      v-vloading="tableLoadingTable || tableLoadingColumn"
+      v-vloading="tableLoadingTable"
       ref="tableRef"
       v-bind="tableData"
       max-height="240"