feat: 根据问题反馈调整页面以及功能

src/styles/Antdui.scss

@@ -275,4 +275,16 @@ tr
 
  .ant-select .ant-select-arrow {
   color: var(--color-neutral-1);
+ }
+
+ .ant-picker,.ant-picker-range {
+  background-color: transparent !important;
+  border: 1px solid var(--color-select-border);
+  &.ant-picker-focused {
+    border-color: var(--color-theme) !important;
+    box-shadow: none;
+  }
+  .anticon-calendar {
+    color: var(--color-neutral-1) !important;
+  }
  }

src/views/DestinationDelivery/src/DestinationDelivery.vue

@@ -2,8 +2,10 @@
 import ListView from './components/ListView.vue'
 import CalendarView from './components/CalendarView.vue'
 import { useRouter } from 'vue-router'
+import { useUserStore } from '@/stores/modules/user'
 
 const router = useRouter()
+const userStore = useUserStore()
 
 const listView = ref(null)
 
@@ -32,7 +34,7 @@ const directionOptions = [
           style="height: 40px"
           type="default"
           @click="handleConfigurations"
-          v-if="listView?.isEmployeeRole === true"
+          v-if="userStore.userInfo.user_type === 'employee'"
         >
           <span style="margin-right: 4px" class="font_family icon-icon_configurations_b"></span>
           <span style="font-weight: 400">Configurations</span></el-button
@@ -41,7 +43,7 @@ const directionOptions = [
           style="height: 38px"
           class="el-button--main el-button--pain-theme"
           @click="handleCreate()"
-          v-if="listView?.isEmployeeRole === false"
+          v-if="userStore.userInfo.user_type !== 'employee'"
         >
           <span style="margin-right: 4px" class="font_family icon-icon_add_b"></span>
           <span style="font-weight: 400">Create New Booking</span>

src/views/DestinationDelivery/src/components/CalendarTagDetailDialog.vue

@@ -179,7 +179,7 @@ defineExpose({
               class="font_family icon-icon_delay_b1"
               style="margin-right: 3px; font-size: 13px"
             ></span>
-            <span class="type">1 Free Storage Period Ends</span>
+            <span class="type">{{ pageData?.endingNumber }} Free Storage Period Ends</span>
           </div>
         </div>
       </template>

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

@@ -514,9 +514,8 @@ const handleTagClick = (type, date) => {
 </style>
 
 <style lang="scss">
-div:where(.css-dev-only-do-not-override-1p3hq3p).ant-picker-calendar.ant-picker-calendar-full
-  .ant-picker-panel {
-  background-color: var(--color-mode);
+.ant-picker-calendar.ant-picker-calendar-full .ant-picker-panel {
+  background-color: var(--color-mode) !important;
   span,
   td,
   th {

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

@@ -371,7 +371,7 @@ const SaveNewAddress = () => {
 }
 // 点击按钮
 const handleclickbutton = (val: any) => {
-  Requirements.value = Requirements.value + val
+  Requirements.value = Requirements.value ? Requirements.value + ',' + val : val
 }
 let delivery_address = ''
 const changeAddressRadio = () => {
@@ -702,6 +702,10 @@ onMounted(() => {
       <div v-if="a == undefined">Create New Booking</div>
       <div v-else>Modify Booking</div>
       <div class="flex">
+        <div class="select-info">
+          <span style="color: var(--color-neutral-2)">Selected: </span>
+          <span>0 Shipments｜0 ctns</span>
+        </div>
         <el-button @click="CancelRulesVisible = true" class="el-button--default create-button"
           ><span class="font_family icon-icon_return_b"></span> Cancel</el-button
         >
@@ -721,31 +725,29 @@ onMounted(() => {
     </div>
     <el-divider v-if="a != undefined" style="margin: 8px 0" />
     <!-- Select Shipments -->
+    <div class="Delivery" style="font-weight: bold">
+      <span class="serial-number">1</span>
+      <span class="stars_red">*</span>Select Shipments<span class="title_warning"
+        >*Please select items with the same consignee.</span
+      >
+    </div>
     <div class="select_shipments">
       <div v-if="isNotSameConfiguration" class="alertIndormation">
         Please select same consignee with same delivery information
       </div>
-      <div style="margin-bottom: 16px; font-weight: bold">
-        <span class="stars_red">*</span>Select Shipments<span class="title_warning"
-          >*Please select items with the same consignee.</span
-        >
-      </div>
+
       <div class="shipments_search" v-if="a == undefined">
-        <div class="left-filter-search">
+        <div class="top-filter-search">
           <el-input
             placeholder="Enter Booking/HBL/PO/Carrier Booking No. "
             v-model="CreateNewBOokingSearch"
             class="log_input"
           >
             <template #prefix>
-              <span class="iconfont_icon">
-                <svg class="iconfont icon_search" aria-hidden="true">
-                  <use xlink:href="#icon-icon_search_b"></use>
-                </svg>
-              </span>
+              <span class="font_family icon-icon_search_b"></span>
             </template>
           </el-input>
-          <div class="input-with-label" style="margin: 0 8px">
+          <div class="input-with-label">
             <!-- <AutoSelect ASPlaceholder="Input Vessel Name" :ASValue="VesselName" @changeFocus="changeFocus"></AutoSelect> -->
             <el-input
               placeholder="Shipper"
@@ -757,7 +759,7 @@ onMounted(() => {
             </el-input>
             <span v-if="showLabelShipper" class="border-label">Shipper</span>
           </div>
-          <div class="input-with-label" style="margin-right: 8px">
+          <div class="input-with-label">
             <!-- <AutoSelect ASPlaceholder="Input Vessel Name" :ASValue="VesselName" @changeFocus="changeFocus"></AutoSelect> -->
             <el-input
               placeholder="Consignee"
@@ -780,7 +782,7 @@ onMounted(() => {
             ></CalendarDate>
             <span v-if="showETAlabel" class="border-label">ETA</span>
           </div>
-          <div class="input-with-label" style="margin: 0 8px">
+          <div class="input-with-label">
             <CalendarDate
               :isNeedFooter="false"
               CalendarWidth="100%"
@@ -790,7 +792,7 @@ onMounted(() => {
             <span v-if="showataLabel" class="border-label">ATA</span>
           </div>
 
-          <div class="input-with-label" style="margin-right: 8px">
+          <div class="input-with-label">
             <!-- <AutoSelect ASPlaceholder="Input Vessel Name" :ASValue="VesselName" @changeFocus="changeFocus"></AutoSelect> -->
             <a-date-picker
               v-model:value="deliveryDate"
@@ -821,14 +823,14 @@ onMounted(() => {
             </el-input>
             <span v-if="showLabelVessel" class="border-label">Vessel Name</span>
           </div>
-        </div>
-        <div class="right-btn">
-          <el-button
-            style="width: 108px"
-            class="el-button--dark create-button"
-            @click="SearchShipment"
-            >Search</el-button
-          >
+          <div class="right-btn">
+            <el-button
+              style="width: 108px"
+              class="el-button--dark create-button"
+              @click="SearchShipment"
+              >Search</el-button
+            >
+          </div>
         </div>
       </div>
       <NewbookingTable
@@ -837,7 +839,10 @@ onMounted(() => {
       ></NewbookingTable>
     </div>
     <!-- Delivery Information -->
-    <div class="Delivery">Delivery Information</div>
+    <div class="Delivery">
+      <span class="serial-number">2</span>
+      <span>Delivery Information</span>
+    </div>
     <div class="delivery_address">
       <div class="deliverty_flex">
         <div><span class="stars_red">*</span>Delivery Address</div>
@@ -1320,11 +1325,7 @@ onMounted(() => {
       </template>
       <template #header>
         <div class="cancel_header">
-          <span class="iconfont_icon">
-            <svg class="iconfont icon_danger" aria-hidden="true">
-              <use xlink:href="#icon-icon_fail_fill_b"></use>
-            </svg>
-          </span>
+          <span class="font_family icon-icon_tipsfilled_b"></span>
           Unable to Save
         </div>
       </template>
@@ -1345,11 +1346,7 @@ onMounted(() => {
       </template>
       <template #header>
         <div class="cancel_header">
-          <span class="iconfont_icon iconfont_warning">
-            <svg class="iconfont icon_warning" aria-hidden="true">
-              <use xlink:href="#icon-icon_tipsfilled_b"></use>
-            </svg>
-          </span>
+          <span class="font_family icon-icon_tipsfilled_b"></span>
           Unsaved Changes
         </div>
       </template>
@@ -1376,11 +1373,7 @@ onMounted(() => {
       </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>
+          <span class="font_family icon-icon_tipsfilled_b"></span>
           Additional Fees Notice
         </div>
       </template>
@@ -1406,6 +1399,10 @@ onMounted(() => {
   background-color: var(--color-mode);
   box-sizing: border-box;
 }
+.select-info {
+  font-size: 14px;
+  line-height: 40px;
+}
 .flex {
   display: flex;
 }
@@ -1424,7 +1421,7 @@ onMounted(() => {
 }
 .select_shipments {
   border: 1px solid var(--color-border);
-  margin: 16px 24px 12px 24px;
+  margin: 10px 24px 12px 24px;
   padding: 9px 16px 16px 16px;
   border-radius: 12px;
   position: relative;
@@ -1459,10 +1456,10 @@ onMounted(() => {
   display: flex;
   margin-bottom: 16px;
 }
-.left-filter-search {
+.top-filter-search {
   flex: 1;
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(4, 1fr);
   grid-gap: 8px;
 }
 :deep(.log_input .el-input__wrapper) {
@@ -1490,9 +1487,22 @@ onMounted(() => {
   height: 40px;
 }
 .Delivery {
+  display: flex;
+  align-items: center;
   font-size: 18px;
   font-weight: 700;
-  margin: 11px 0 14px 24px;
+  line-height: 24px;
+  margin: 24px 0 10px 24px;
+  .serial-number {
+    width: 24px;
+    height: 24px;
+    margin-right: 4px;
+    background-color: var(--color-theme);
+    text-align: center;
+    color: #fff;
+    font-size: 14px;
+    border-radius: 50%;
+  }
 }
 .empty_address {
   height: 122px;
@@ -1729,4 +1739,21 @@ onMounted(() => {
 :deep(header.el-dialog__header) {
   background-color: var(--color-system-body-bg);
 }
+.cancel_header {
+  display: flex;
+  align-items: center;
+  // font-size: 18px;
+  // font-weight: 700;
+  .font_family {
+    color: #f19d38;
+    font-size: 18px;
+    width: 18px;
+    height: 18px;
+    border-radius: 24px;
+    margin-right: 4px;
+  }
+  .iconfont_icon {
+    font-size: 24px;
+  }
+}
 </style>

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

@@ -317,14 +317,17 @@ defineExpose({
 
 <template>
   <div class="new-booking-table">
-    <el-button
-      style="width: 170px; align-self: flex-end"
-      type="default"
-      @click="handleCustomizeColumns"
-    >
-      <span style="margin-right: 6px" class="font_family icon-icon_column_b"></span>
-      Customize Columns
-    </el-button>
+    <div class="table-tools">
+      <div class="table-total-info">{{ tableData.data.length }} result</div>
+      <el-button
+        style="width: 170px; align-self: flex-end"
+        type="default"
+        @click="handleCustomizeColumns"
+      >
+        <span style="margin-right: 6px" class="font_family icon-icon_column_b"></span>
+        Customize Columns
+      </el-button>
+    </div>
     <vxe-grid
       ref="tableRef"
       :style="{ border: 'none' }"
@@ -398,5 +401,13 @@ defineExpose({
   display: flex;
   flex-direction: column;
   gap: 8px;
+  .table-tools {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .table-total-info {
+      color: var(--color-neutral-2);
+    }
+  }
 }
 </style>

src/views/Layout/src/components/Header/components/LogoutDialog.vue

@@ -14,7 +14,7 @@ const handleLogout = () => {
   router.push('/login')
   sessionStorage.clear()
   localStorage.removeItem('user_type')
-  emitter.emit('login-out');
+  emitter.emit('login-out')
 }
 defineExpose({
   openDialog