feat:添加页眉

src/stores/modules/breadCrumb.ts

@@ -1,5 +1,4 @@
 import { defineStore } from 'pinia'
-import { collapseTextChangeRangesAcrossMultipleVersions } from 'typescript'
 
 interface Route {
   label: string

src/views/DestinationDelivery/src/components/CreateNewBooking/src/CreateNewbooking.vue

@@ -31,7 +31,9 @@ const NoEligibleVisible = ref(false)
 const isDisabled = ref(false)
 const SaveedVisible = ref(false)
 const UnableSaveVisible = ref(false)
+const isRecommendDate = ref(false)
 const missingmessage = ref('')
+const recommendateWarning = ref('')
 const ATATimeList = ref(null)
 const ETATimeList = ref(null)
 const Addressradio = ref()
@@ -48,6 +50,7 @@ const Requirements = ref('')
 const selectedAddressList = ref()
 const isselectedAddress = ref(null)
 const checkShipmentsSubmitInfo = ref({})
+const RecommendateList = ref([])
 const ModeType = ref([
   {
     label: 'Truck',
@@ -79,10 +82,7 @@ const isNotSubmit = computed(() => {
 
 const ManageAddressList = ref([])
 // 需要特殊样式的日期列表
-const specialDates = ref([
-  '2025-05-27',
-  '2025-05-28', 
-]);
+const specialDates = ref([]);
 
 
 const DateRangeChangeETA = (val:any) => {
@@ -214,15 +214,21 @@ const SearchShipment = () => {
 
 // 选择shipments获取address book
 const isrecommenddate = ref()
+const isConsistent = ref(false)
 // 判断date是否一致
 const areAllDateRangesSame = (date: any) => { 
   const firstRange = date[0].date_range;
   return date.every(item => {
     const currentRange = item.date_range;
-    return (
-      currentRange.length === firstRange.length &&
-      currentRange.every((date, index) => date === firstRange[index])
-    );
+    if(currentRange.length === firstRange.length &&
+      currentRange.every((date, index) => date === firstRange[index])) {
+        return true
+      } else {
+        isConsistent.value = true
+        RecommendateList.value = date.map(item => ({Hbol: item.Hbol}))
+        console.log(RecommendateList.value)
+        return false
+      }
   });
 }
 // 遍历日期
@@ -264,7 +270,6 @@ const selectChangeEvent = (val: any, date: any, submitInfo: any) => {
   $api
   .getAddressBookList({
     ...val,
-
   })
   .then((res: any) => {
     if (res.code === 200) {
@@ -273,14 +278,34 @@ const selectChangeEvent = (val: any, date: any, submitInfo: any) => {
   })
 }
 
+//选择日期
+const changeDatePicker = (val:any) => {
+  if(specialDates.value.length != 0 ){
+    if(isConsistent.value) {
+      isRecommendDate.value = true
+      recommendateWarning.value = 'This date for following shipments is outside recommended period.'
+      isConsistent.value = false
+    } else {
+      console.log(specialDates.value)
+      console.log(val)
+      if(!specialDates.value.includes(val)) {
+        isRecommendDate.value = true
+        recommendateWarning.value = 'This date is outside our recommended period.'
+      }
+    }
+  }
+}
+
 // 保存
 const SubmitBooking = () => {
+  const date = DateValue.value.split('.')
+  const datetwo = date[1] + '/' + date[2] + '/' + date[1]
   $api
   .SaveBookingList({
     ...checkShipmentsSubmitInfo.value,
     ...selectedAddressList.value,
     delivery_mode: modetypeValue.value,
-    delivery_date: DateValue.value,
+    delivery_date: datetwo,
     special_requirements: Requirements.value
   })
   .then((res: any) => {
@@ -305,12 +330,20 @@ onMounted(() => {
 <template>
   <div>
     <div class="Title">
-      <div>Create New Booking</div>
+      <div v-if="a == undefined">Create New Booking</div>
+      <div v-else>Modify Booking</div>
       <div class="flex">
         <el-button class="el-button--default create-button"><span class="font_family icon-icon_return_b"></span> Cancel</el-button>
         <el-button :disabled="isNotSubmit" @click="SubmitBooking" class="el-button--main create-button"><span class="font_family icon-icon_submit_b"></span> Submit</el-button>
       </div>
     </div>
+    <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>
+    <el-divider style="margin: 8px 0" />
     <!-- Select Shipments -->
     <div class="select_shipments">
       <div><span class="stars_red">*</span>Select Shipments</div>
@@ -403,11 +436,12 @@ onMounted(() => {
         <a-date-picker
           v-model:value ="DateValue"
           :disabled="isNotClickAddress"
+          @change="changeDatePicker"
           :showToday="false"
           style="width: 240px;"
           :format="userStore.dateFormat"
           placeholder="Please Select Date"
-          valueFormat="MM/DD/YYYY"
+          valueFormat="YYYY.MM.DD"
         >
           <template #renderExtraFooter>
             <div class="recommended"><div class="recommend_color"></div>Recommended delivery date</div>
@@ -574,7 +608,7 @@ onMounted(() => {
       </template>
       <template #header>
         <div class="cancel_header">
-          <span class="iconfont_icon iconfont_warning">
+          <span class="iconfont_icon">
             <svg class="iconfont icon_danger" aria-hidden="true">
               <use xlink:href="#icon-icon_fail_fill_b"></use>
             </svg>
@@ -583,6 +617,35 @@ onMounted(() => {
         </div>
       </template>
     </el-dialog>
+    <!-- 當選擇非建議日期内的date時給出的提示 -->
+    <el-dialog v-model="isRecommendDate" width="480">
+      <div>{{ recommendateWarning }}</div>
+      <div style="margin-top: 4px;">Additional storage fees may apply.</div>
+      <div style="margin-top: 8px;">
+        <div class="Notice" v-for="(item, index) in RecommendateList" :key="index">HOBL: {{ item.Hbol }}</div>
+      </div>
+      <template #footer>
+        <div class="dialog-footer" style="justify-content: end;">
+          <el-button
+            class="el-button--warning"
+            @click="isRecommendDate = false"
+            style="width: 100px"
+          >
+            OK
+          </el-button>
+        </div>
+      </template>
+      <template #header>
+        <div class="cancel_header">
+          <span class="iconfont_icon">
+            <svg class="iconfont iconfont_warning" aria-hidden="true">
+              <use xlink:href="#icon-icon_tipsfilled_b"></use>
+            </svg>
+          </span>
+          Additional Fees Notice
+        </div>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
@@ -617,7 +680,7 @@ onMounted(() => {
 }
 .select_shipments {
   border: 1px solid var(--color-border);
-  margin: 32px 24px 12px 24px;
+  margin: 17px 24px 12px 24px;
   padding: 9px 16px 16px 16px;
   border-radius: 12px;
 }
@@ -822,4 +885,39 @@ onMounted(() => {
 :deep(.notDialog .el-dialog__header) {
   display: none;
 }
+.iconfont_warning {
+  fill: var(--color-warning)
+}
+.Notice {
+  font-weight: 700;
+  margin-top: 4px;
+}
+.booking-info {
+  display: flex;
+  align-items: center;
+  height: 48px;
+  padding: 0 16px;
+  margin: 17px 24px 8px 24px;
+  border-radius: 12px;
+  background-image: var(--color-booking-info-linear-bg);
+
+  .booking-no {
+    display: flex;
+    align-items: center;
+    .no {
+      margin-top: 2px;
+      font-size: 18px;
+      font-weight: 700;
+      line-height: 21px;
+    }
+    .tag {
+      margin-left: 8px;
+    }
+  }
+  .created-time {
+    margin-top: 8px;
+    font-size: 12px;
+    color: var(--color-neutral-2);
+  }
+}
 </style>

src/views/DestinationDelivery/src/components/CreateNewBooking/src/components/NewbookingTable.vue

@@ -93,7 +93,7 @@ const selectChangeEvent = () => {
   if ($grid) {
     const records = $grid.getCheckboxRecords()
     checkShipments = records.map(item => ({ consignee_id: item.consignee_id }))
-    checkRecommend = records.map(item => ({ date_range: item.date_range.split('-') }))
+    checkRecommend = records.map(item => ({ date_range: item.date_range.split('-'), Hbol: item.h_bol  }))
     if(checkShipments.length != 0) {
       checkShipmentsdata = Object.keys(checkShipments?.[0])
       checkShipmentsSubmit = Object.keys(records?.[0])
@@ -104,7 +104,13 @@ const selectChangeEvent = () => {
       })
       checkShipmentsSubmit.forEach((item) => {
         Object.assign(checkShipmentsSubmitInfo, {
-          [item]: records.map((row) => row[item] )
+          [item]: records.map((row) => {
+            if(row[item] == null){
+              return ''
+            } else {
+              return row[item]
+            }
+          } )
         })
       })
     } else {
@@ -119,7 +125,7 @@ const selectAllChangeEvent= () => {
   if ($grid) {
     const records = $grid.getCheckboxRecords()
     checkShipments = records.map(item => ({ consignee_id: item.consignee_id }))
-    checkRecommend = records.map(item => ({ date_range: item.date_range.split('-') }))
+    checkRecommend = records.map(item => ({ date_range: item.date_range.split('-'), Hbol: item.h_bol }))
     if(checkShipments.length != 0) {
       checkShipmentsdata = Object.keys(checkShipments?.[0])
       checkShipmentsSubmit = Object.keys(records?.[0])
@@ -130,7 +136,13 @@ const selectAllChangeEvent= () => {
       })
       checkShipmentsSubmit.forEach((item) => {
         Object.assign(checkShipmentsSubmitInfo, {
-          [item]: records.map((row) => row[item] )
+          [item]: records.map((row) => {
+            if(row[item] == null){
+              return ''
+            } else {
+              return row[item]
+            }
+          } )
         })
       })
     } else {