Merge branch 'dev_g' of United_Software/k_online_ui into dev

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

@@ -17,6 +17,8 @@ const { query } = value
 const { a } = query
 
 const CreateNewBOokingSearch = ref('')
+const status = ref('')
+const booking = ref('')
 const DateValue = ref('')
 const bookingTableRef = ref()
 const VesselName = ref([])
@@ -31,7 +33,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()
@@ -45,9 +49,11 @@ const ContactNumber = ref('')
 const instructions = ref('')
 const modetypeValue = ref('Truck')
 const Requirements = ref('')
+const Modification = ref()
 const selectedAddressList = ref()
 const isselectedAddress = ref(null)
 const checkShipmentsSubmitInfo = ref({})
+const RecommendateList = ref([])
 const ModeType = ref([
   {
     label: 'Truck',
@@ -66,6 +72,20 @@ const isNotSubmit = computed(() => {
     return true
   }
 
+  if(a != undefined) {
+    if(
+      selectedAddressList.value == undefined ||
+      modetypeValue.value == '' ||
+      DateValue.value == '' ||
+      Modification.value == null ||
+      Modification.value == ''
+    ) {
+      return true
+    } else {
+      return false
+    }
+  }
+
   if(
     Object.keys(checkShipmentsSubmitInfo.value).length == 0 ||
     selectedAddressList.value == undefined ||
@@ -74,15 +94,13 @@ const isNotSubmit = computed(() => {
   ) {
     return true
   }
+
   return false;
 })
 
 const ManageAddressList = ref([])
 // 需要特殊样式的日期列表
-const specialDates = ref([
-  '2025-05-27',
-  '2025-05-28', 
-]);
+const specialDates = ref([]);
 
 
 const DateRangeChangeETA = (val:any) => {
@@ -175,10 +193,15 @@ const changeAddressRadio = () => {
   selectedAddressList.value = ManageAddressList.value[Addressradio.value]
 }
 // 页面初始化
+let checkShipments = []
+let checkShipmentsSubmit = []
+let checkShipmentsdata = []
+let checkShipmentsInfo = {}
+let checkShipmentsSubmitInfoData = {}
 const getInitBookingData = () => {
   $api
   .InitCreateBooking({
-    a: a != undefined ? a: ''
+    serial_no: a != undefined ? a: ''
   })
   .then((res: any) => {
     if (res.code === 200) {
@@ -188,6 +211,51 @@ const getInitBookingData = () => {
       }
       if(res.data.msg.includes('success')) {
         bookingTableRef.value.getTableData(res.data.data.tableData)
+        if(a) {
+          status.value = res.data.data.status
+          booking.value = res.data.data.booking_no
+          Requirements.value = res.data.data.special_requirements
+          modetypeValue.value = res.data.data.delivery_mode
+          DateValue.value = res.data.data.created_time
+          Modification.value = res.data.data.modify_reason
+          const address1 = res.data.data.delivery_address.split('\n')[0]
+          checkShipments = res.data.data.tableData.map(item => ({ consignee_id: item.consignee_id }))
+          checkShipmentsdata = Object.keys(checkShipments?.[0])
+          checkShipmentsSubmit = Object.keys(res.data.data.tableData?.[0])
+          checkShipmentsdata.forEach((item) => {
+            Object.assign(checkShipmentsInfo, {
+              [item]: checkShipments.map((row) => row[item] )
+            })
+          })
+          checkShipmentsSubmit.forEach((item) => {
+            if(item == 'serial_no') return
+            Object.assign(checkShipmentsSubmitInfoData, {
+              [item]: res.data.data.tableData.map((row) => {
+                if(row[item] == null){
+                  return ''
+                } else {
+                  return row[item]
+                }
+              } )
+            })
+          })
+          $api
+          .getAddressBookList({
+            ...checkShipmentsInfo,
+          })
+          .then((res: any) => {
+            if (res.code === 200) {
+              ManageAddressList.value = res.data
+              ManageAddressList.value.forEach((item, index) => {
+                if(item.location_name === address1) {
+                  selectedAddressList.value = item
+                  isselectedAddress.value = index
+                  Addressradio.value = index
+                }
+              })
+            }
+          })
+        }
       }
     }
   })
@@ -214,15 +282,20 @@ 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}))
+        return false
+      }
   });
 }
 // 遍历日期
@@ -264,7 +337,6 @@ const selectChangeEvent = (val: any, date: any, submitInfo: any) => {
   $api
   .getAddressBookList({
     ...val,
-
   })
   .then((res: any) => {
     if (res.code === 200) {
@@ -273,15 +345,36 @@ 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 {
+      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({
+    serial_no: a != undefined ? a : '',
     ...checkShipmentsSubmitInfo.value,
     ...selectedAddressList.value,
+    ...checkShipmentsSubmitInfoData,
     delivery_mode: modetypeValue.value,
-    delivery_date: DateValue.value,
-    special_requirements: Requirements.value
+    delivery_date: datetwo,
+    special_requirements: Requirements.value,
+    modify_reason: Modification.value
   })
   .then((res: any) => {
     if (res.code === 200 && res.data.msg == 'success') {
@@ -305,16 +398,24 @@ 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.{{ booking }}</span>
+        <v-tag class="tag" type="Pending Approval">{{ status }}</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>
-      <div class="flex shipments_search">
+      <div style="margin-bottom: 16px;"><span class="stars_red">*</span>Select Shipments</div>
+      <div class="flex shipments_search" v-if="a == undefined">
         <el-input
           placeholder="Enter Booking/HBL/PO/Carrier Booking No. "
           v-model="CreateNewBOokingSearch"
@@ -403,11 +504,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>
@@ -428,6 +530,8 @@ onMounted(() => {
         <el-button :disabled="isNotClickAddress" class="el-button--grey" @click="handleclickbutton('Special Equipment')">Special Equipment</el-button>
       </div>
       <el-input :disabled="isNotClickAddress" v-model="Requirements" placeholder="Eenter any additional requirements or notes..." type="textarea" style="margin-top: 8px;" :rows="4"></el-input>
+      <div v-if="a!= undefined" class="delivery_type_title" style="margin-top: 16px;"><span class="stars_red">*</span>Modification Reason</div>
+      <el-input v-if="a!=undefined" :disabled="isNotClickAddress" v-model="Modification" placeholder="Eenter any additional requirements or notes..." type="textarea" style="margin-top: 8px;" :rows="4"></el-input>
     </div>
     <el-dialog
       v-model="ManageVisible"
@@ -574,7 +678,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 +687,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 +750,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;
 }
@@ -631,7 +764,7 @@ onMounted(() => {
   color: var(--color-danger);
 }
 .shipments_search {
-  margin: 16px 0 8px 0;
+  margin: 0 0 8px 0;
 }
 :deep(.log_input .el-input__wrapper) {
   box-shadow: 0 0 0 1px var(--color-select-border) inset;
@@ -754,6 +887,7 @@ onMounted(() => {
 .radio_title {
   font-size: 14px;
   font-weight: 700;
+  margin-top: -7px;
 }
 .radio_content_text {
   color: var(--color-neutral-2);
@@ -774,7 +908,7 @@ onMounted(() => {
   margin-right: 0;
   height: fit-content;
   line-height: 32px;
-  align-items: baseline;
+  align-items: start;
 }
 .el-button--blue {
   width: 24px;
@@ -822,4 +956,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

@@ -3,6 +3,13 @@ import { type VxeGridInstance, type VxeGridProps } from 'vxe-table'
 import { useRowClickStyle } from '@/hooks/rowClickStyle'
 import { formatTimezone } from '@/utils/tools'
 import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+const { currentRoute } = router
+const { value } = currentRoute
+const { query } = value
+const { a } = query
 
 const tableLoadingTable = ref(false)
 const tableLoadingColumn = ref(false)
@@ -65,10 +72,16 @@ const getTableColumns = async () => {
   tableLoadingColumn.value = true
   await $api.BookingTableColumn().then((res: any) => {
     if (res.code === 200) {
-      tableData.value.columns = [
-        { type: 'checkbox', width: 50, fixed: 'left' },
-        ...handleColumns(res.data.TrackingTableColumns)
-      ]
+      if(a == undefined) {
+        tableData.value.columns = [
+          { type: 'checkbox', width: 50, fixed: 'left' },
+          ...handleColumns(res.data.TrackingTableColumns)
+        ]
+      }else {
+        tableData.value.columns = [
+          ...handleColumns(res.data.TrackingTableColumns)
+        ]
+      }
     }
   })
   nextTick(() => {
@@ -93,7 +106,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 +117,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 +138,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 +149,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 {

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

@@ -314,16 +314,14 @@ const clickEmailBtn = (row: any) => {
 
 // edit
 const handelEdit = (row: any) => {
-  console.log(row)
   router.push({
     path: '/destination-delivery/CreateNewBooking',
-    query: { a: row._serial_no }
+    query: { a: row._serial_no}
   })
 }
 
 const handleCreate = () => {
-  // Handle create new booking logic here
-  console.log('Create new booking')
+  router.push({ name: 'Create New Booking' })
 }
 
 const handleLinkClick = (row: any, column: any) => {