feat:修改create new rule

src/api/index.ts

@@ -6,6 +6,7 @@ import * as other from './module/other'
 import * as notificationMessage from './module/notificationMessage'
 import * as system from './module/system'
 import * as AIRobot from './module/AIRobot'
+import * as Delivery from './module/Delivery'
 /**
  * api 对象接口定义
  */
@@ -25,7 +26,8 @@ const apis = generateApiMap({
   ...other,
   ...notificationMessage,
   ...system,
-  ...AIRobot
+  ...AIRobot,
+  ...Delivery
 })
 export default {
   ...apis // 取出所有可遍历属性赋值在新的对象上

src/api/module/Delivery.ts

@@ -0,0 +1,47 @@
+import HttpAxios from '@/utils/axios'
+
+const base = import.meta.env.VITE_API_HOST
+const baseUrl = `${base}/main_new_version.php`
+
+/**
+ * Select Country
+ */
+export const getDeliveryCountry = (params: any, config: any) => {
+  return HttpAxios.post(
+    `${baseUrl}`,
+    {
+      action: 'destination_delivery_load',
+      operate: 'country',
+      ...params
+    },
+    config
+  )
+}
+/**
+ * 选择了国家后的station list
+ */
+export const getDeliveryStation = (params: any, config: any) => {
+  return HttpAxios.post(
+    `${baseUrl}`,
+    {
+      action: 'destination_delivery_load',
+      operate: 'station',
+      ...params
+    },
+    config
+  )
+}
+/**
+ * KLN employee account List
+ */
+export const getKLNEmployeeList = (params: any, config: any) => {
+  return HttpAxios.post(
+    `${baseUrl}`,
+    {
+      action: 'destination_delivery_load',
+      operate: 'employee_account',
+      ...params
+    },
+    config
+  )
+}

src/components/MoreFilters/src/components/SelectValue.vue

@@ -102,7 +102,6 @@ const TransportSearch = (visible: any) => {
   } else {
     dropdown1.value.handleOpen()
   }
-  checkedCount = []
 }
 const seeall = ref(false)
 const clickSeeAll = () => {

src/components/VBreadcrumb/src/VBreadcrumb.vue

@@ -22,15 +22,15 @@ const jumpLink = (label: string, query: any) => {
       monitoringQuery.value = query
     } else if(label == 'Destination Delivery') {
       router.push({
-        name: 'Booking',
+        name: 'Destination Delivery',
         query: query
       })
-    } else if(label == 'Configurations') {
+    } else if (label == 'Configurations'){
       router.push({
-        name: 'Destination Delivery',
+        name: 'Configurations',
         query: query
       })
-    } else {
+    }else {
       label &&
       router.push({
         name: label,

src/router/index.ts

@@ -149,14 +149,19 @@ const router = createRouter({
           component: () => import('../views/DestinationDelivery')
         },
         {
-          path: '/Booking/CreateNewBooking',
+          path: '/destination-delivery/CreateNewBooking',
           name: 'Create New Booking',
-          component: () => import('../views/CreateNewBooking')
+          component: () => import('../views/DestinationDelivery/src/components/CreateNewBooking')
         },
         {
-          path: '/Booking/DestinationDelivery/CreateNewRule',
+          path: '/destination-delivery/ConfiguRations',
+          name: 'Configurations',
+          component: () => import('../views/DestinationDelivery/src/components/ConfiguRations')
+        },
+        {
+          path: '/destination-delivery/ConfiguRations/CreateNewRule',
           name: 'Destination Create New Rule',
-          component: () => import('../views/DesDelivery/src/components/CreateNewRule.vue')
+          component: () => import('../views/DestinationDelivery/src/components/ConfiguRations/src/components/CreateNewRule.vue')
         },
         {
           path: '/destination-delivery/modify-booking',

src/stores/modules/breadCrumb.ts

@@ -17,8 +17,8 @@ const whiteList = [
   'Public Tracking Detail',
   'Create New Rule',
   'System Message Detail',
-  'Destination Delivery',
   'Configurations',
+  'Create New Booking',
   'Destination Create New Rule',
 ]
 
@@ -32,16 +32,16 @@ export const useBreadCrumb = defineStore('breadCrumb', {
       const index = this.routeList.findIndex((item) => item.label === toRoute.name)
       if (index !== -1) {
         this.routeList.splice(index + 1)
-        if (toRoute.name === 'Destination Delivery') {
+        if (toRoute.name === 'Configurations') {
           this.routeList = [
             {
               label: 'Destination Delivery',
-              path: '/booking',
+              path: '/destination-delivery',
               query: ''
             },
             {
               label: 'Configurations',
-              path: '/Booking/DestinationDelivery',
+              path: '/destination-delivery/ConfiguRations',
               query: toRoute.query
             }
           ]
@@ -98,34 +98,34 @@ export const useBreadCrumb = defineStore('breadCrumb', {
             query: toRoute.query
           }
         ]
-      } else if (toRoute.name === 'Configurations') {
+      } else if (toRoute.name === 'Destination Create New Rule') {
         this.routeList = [
           {
             label: 'Destination Delivery',
-            path: '/booking',
+            path: '/destination-delivery',
             query: ''
           },
           {
             label: 'Configurations',
-            path: '/Booking/DestinationDelivery',
+            path: '/destination-delivery/ConfiguRations',
+            query: ''
+          },
+          {
+            label: 'Create New Rule',
+            path: '/destination-delivery/CreateNewRule',
             query: toRoute.query
           }
         ]
-      } else if (toRoute.name === 'Destination Create New Rule') {
+      } else if (toRoute.name === 'Create New Booking') {
         this.routeList = [
           {
             label: 'Destination Delivery',
-            path: '/booking',
-            query: ''
-          },
-          {
-            label: 'Configurations',
-            path: '/Booking/DestinationDelivery',
+            path: '/destination-delivery',
             query: ''
           },
           {
-            label: 'Create New Rule',
-            path: '/Booking/DestinationDelivery/CreateNewRule',
+            label: 'Create New Booking',
+            path: '/destination-delivery/CreateNewBooking',
             query: toRoute.query
           }
         ]

src/styles/Antdui.scss

@@ -197,3 +197,13 @@ tr
   height: 32px !important;
   border-radius: 6px !important;
 }
+.ant-checkbox-checked .ant-checkbox-inner {
+  background-color: var(--color-theme) !important;
+  border-color: var(--color-theme) !important;
+}
+.ant-checkbox-wrapper:not(.ant-checkbox-wrapper-disabled):hover .ant-checkbox-inner, .ant-checkbox:not(.ant-checkbox-disabled):hover .ant-checkbox-inner {
+  border-color: var(--color-theme) !important;
+}
+.ant-checkbox-checked:after{
+  border-color: var(--color-theme) !important;
+}

src/styles/elementui.scss

@@ -550,6 +550,12 @@ div .el-select-dropdown__item.is-selected {
     color: var(--color-theme);
   }
 }
+div .custom-sheader-select .el-select-dropdown__item.is-selected {
+  span {
+    color: var(--color-neutral-1);
+    font-weight: 400;
+  }
+}
 div .el-select-dropdown__item.is-hovering {
   background-color: var(--border-hover-color);
 }
@@ -887,3 +893,19 @@ div .prompt-dialog-inner .el-dialog__body {
   overflow-y: scroll;
   line-height: 21px;
 }
+div .el-autocomplete-suggestion li.highlighted, .el-autocomplete-suggestion li {
+  padding: 0 !important;
+  &:hover { 
+    background-color: transparent !important;
+  }
+}
+div .no-data-item:hover {
+  &:hover {
+    background-color: var(--management-bg-color);
+  }
+}
+div .suggestion-item:hover {
+  &:hover {
+    background-color: var(--color-arrow-hoverL);
+  }
+}

src/views/DesDelivery/src/components/CreateNewRule.vue

@@ -1,229 +0,0 @@
-<script setup lang="ts">
-import SelectStation from './SelectStation.vue'
-import SetBookingWindow from './SetBookingWindow.vue'
-import RecommendDate from './RecommendDate.vue'
-
-const RulesActive = ref(['SelectStation', 'SelectBooking', 'KLNPLC', 'RecommendDeliveryDate'])
-const IsFirstActive = ref(true)
-const IsTwoActive = ref(true)
-const IsFourActive = ref(true)
-const IsThreeActive = ref(true)
-const KLNPLCvalue = ref([])
-
-const CountryCheckedList = ref([])
-const CountryCheckboxList = ref([
-  { value: 'China', label: 'China' },
-  { value: 'USA', label: 'USA' },
-  { value: 'Japan', label: 'Japan' },
-  { value: 'Korea', label: 'Korea' },
-  { value: 'Taiwan', label: 'Taiwan' },
-  { value: 'Hong Kong', label: 'Hong Kong' },
-  { value: 'Hong Kong2', label: 'Hong Kong2' },
-  { value: 'Hong Kong3', label: 'Hong Kong3' },
-  { value: 'Hong Kong4', label: 'Hong Kong4' },
-  { value: 'Hong Kong5', label: 'Hong Kong5' },
-  { value: 'Hong Kong6', label: 'Hong Kong6' },
-  { value: 'Hong Kong7', label: 'Hong Kong7' },
-])
-
-const KLNPLoptions = [
-  {
-    value: 'Option1',
-    label: 'Option1',
-  },
-  {
-    value: 'Option2',
-    label: 'Option2',
-  },
-  {
-    value: 'Option3',
-    label: 'Option3',
-  },
-  {
-    value: 'Option4',
-    label: 'Option4',
-  },
-  {
-    value: 'Option5',
-    label: 'Option5',
-  },
-]
-
-// select country
-const handleClickSelectCountry = (val:any) =>{
-  console.log(val)
-}
-</script>
-
-<template>
-  <div>
-    <div class="Title">Create New Rule</div>
-    <div class="setting-content">
-      <div class="setting-top-title">Setting</div>
-      <el-collapse v-model="RulesActive" @change="IsFirstActive = !IsFirstActive">
-        <el-collapse-item name="SelectStation">
-            <template #title>
-              <div class="Rules_Title">
-                <span class="iconfont_icon icon_dark">
-                  <svg class="iconfont" aria-hidden="true">
-                    <use
-                      :xlink:href="IsFirstActive ? '#icon-icon_dropdown_b' : '#icon-icon_up_b'"
-                    ></use>
-                  </svg>
-                </span>
-                <span class="stars_red">*</span>Select Station (Enable Booking)
-              </div>
-            </template>
-            <div>
-              <SelectStation @handleClickSelectCountry="handleClickSelectCountry"
-              :CheckboxList="CountryCheckboxList"
-              :CheckedList="CountryCheckedList"
-              ></SelectStation>
-            </div>
-          </el-collapse-item>
-      </el-collapse>
-      <el-collapse v-model="RulesActive" @change="IsTwoActive = !IsTwoActive">
-        <el-collapse-item name="SelectBooking">
-            <template #title>
-              <div class="Rules_Title">
-                <span class="iconfont_icon icon_dark">
-                  <svg class="iconfont" aria-hidden="true">
-                    <use
-                      :xlink:href="IsTwoActive ? '#icon-icon_dropdown_b' : '#icon-icon_up_b'"
-                    ></use>
-                  </svg>
-                </span>
-                <span class="stars_red">*</span>Set Booking Window
-              </div>
-            </template>
-            <div>
-              <SetBookingWindow></SetBookingWindow>
-            </div>
-          </el-collapse-item>
-      </el-collapse>
-      <el-collapse v-model="RulesActive" @change="IsThreeActive = !IsThreeActive">
-        <el-collapse-item name="RecommendDeliveryDate">
-            <template #title>
-              <div class="Rules_Title">
-                <span class="iconfont_icon icon_dark">
-                  <svg class="iconfont" aria-hidden="true">
-                    <use
-                      :xlink:href="IsThreeActive ? '#icon-icon_dropdown_b' : '#icon-icon_up_b'"
-                    ></use>
-                  </svg>
-                </span>
-                <span class="stars_red">*</span>Recommend Delivery Date 
-              </div>
-            </template>
-            <div>
-              <RecommendDate></RecommendDate>
-            </div>
-          </el-collapse-item>
-      </el-collapse>
-      <el-collapse v-model="RulesActive" @change="IsFourActive = !IsFourActive">
-        <el-collapse-item name="KLNPLC">
-            <template #title>
-              <div class="Rules_Title">
-                <span class="iconfont_icon icon_dark">
-                  <svg class="iconfont" aria-hidden="true">
-                    <use
-                      :xlink:href="IsFourActive ? '#icon-icon_dropdown_b' : '#icon-icon_up_b'"
-                    ></use>
-                  </svg>
-                </span>
-                <span class="stars_red">*</span>KLN PLC
-              </div>
-            </template>
-            <div>
-              <el-select
-                v-model="KLNPLCvalue"
-                filterable
-                multiple
-                placeholder="Select Employee Account"
-                style="width: 400px; height: 40px;"
-              >
-                <el-option
-                  v-for="item in KLNPLoptions"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value"
-                />
-              </el-select>
-            </div>
-          </el-collapse-item>
-      </el-collapse>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.Title {
-  display: flex;
-  height: 68px;
-  border: 1px solid var(--color-border);
-  border-top: none;
-  border-width: 1px 0 1px 0;
-  font-size: var(--font-size-6);
-  font-weight: 700;
-  padding: 0 24px;
-  align-items: center;
-  justify-content: space-between;
-}
-.setting-content {
-  margin: 16px 24px 48px 24px;
-  padding-bottom: 24px;
-  border: 1px solid var(--color-system-border-1);
-  border-radius: 12px;
-}
-.setting-top-title {
-  background-color: var(--color-shipment-status-header-bg);
-  height: 48px;
-  padding: 0 16px;
-  display: flex;
-  align-items: center;
-  border-radius: 12px 12px 0 0;
-}
-.Rules_Title {
-  font-size: 14px;
-  font-weight: 700;
-}
-.stars_red {
-  color: var(--color-danger);
-}
-:deep(.el-collapse) {
-  border: none;
-  padding: 0 16px;
-}
-:deep(.el-collapse-item__header) {
-  border: none !important;
-}
-:deep(.el-collapse-item__arrow) {
-  width: 0 !important;
-  height: 0 !important;
-}
-:deep(.el-collapse-item__header.is-active) {
-  background-color: transparent !important;
-  border-color: transparent !important;
-}
-:deep(.el-collapse-item__arrow.is-active) {
-  transform: rotate(-180deg) !important;
-}
-:deep(.el-collapse-item__wrap) {
-  border-bottom: none;
-}
-.iconfont_icon {
-  margin-right: 8px;
-}
-:deep(.el-select__wrapper) {
-  box-shadow: none;
-  border: 1px solid var(--color-select-border);
-}
-:deep(.el-select__wrapper.is-hovering:not(.is-focused)) {
-  box-shadow: none;
-  border: 1px solid var(--color-theme);
-}
-:deep(.el-select__wrapper.is-focused ){
-  box-shadow: none;
-  border: 1px solid var(--color-theme);
-}
-</style>

src/views/DesDelivery/src/components/RecommendDate.vue

@@ -1,557 +0,0 @@
-<script setup lang="ts">
-const Recommendradio = ref(0)
-const isRecommendETA = ref(false)
-const isAir = ref(false)
-const isSea = ref(false)
-const RecommendCheckedList = ref([])
-const RuleTypeoptions = ref([
-  {
-    label: 'Default Rule',
-    value: 'Default Rule'
-  },
-  {
-    label: 'Specific Rule',
-    value: 'Specific Rule'
-  },
-  {
-    label: 'Single Dimension',
-    value: 'Single Dimension'
-  }
-])
-const AirPortoptions = ref([])
-const AirContentList = ref([
-  {
-    Priority: 'P1',
-    RuleType: 'Default Rule',
-    AirPort: 'All',
-    FromDate: '',
-    ToDate: ''
-  }
-])
-const SeaPortoptions = ref([])
-const SeaContentList = ref([
-  {
-    Priority: 'P1',
-    RuleType: 'Default Rule',
-    AirPort: 'All',
-    FromDate: '',
-    ToDate: ''
-  }
-])
-
-// 选择checkbox
-const CheckChange = (val: any) => {
-  if(val.includes('Air')) {
-    isAir.value = true
-    if(AirContentList.value.length == 0) {
-      AirContentList.value.push({
-        Priority: 'P1',
-        RuleType: 'Default Rule',
-        AirPort: 'All',
-        FromDate: '',
-        ToDate: ''
-      })
-    }
-  } else {
-    isAir.value = false
-  }
-  if(val.includes('Sea')) {
-    isSea.value = true
-    if(SeaContentList.value.length == 0) {
-      SeaContentList.value.push({
-        Priority: 'P1',
-        RuleType: 'Default Rule',
-        AirPort: 'All',
-        FromDate: '',
-        ToDate: ''
-      })
-    }
-  } else {
-    isSea.value = false
-  }
-}
-
-const handleCheckboxClick = (event:any) => {
-  // 判断点击的是否为复选框输入区域
-  const isCheckboxInput = event.target.closest('.el-checkbox__inner')
-  const isCheckboxTitle = event.target.closest('.titlecheckbox')
-  if (!isCheckboxInput) {
-    // 阻止默认切换行为
-    if(!isCheckboxTitle) {
-      event.preventDefault()
-    }
-  }
-}
-
-// 选择booking window
-const ChangeFrequency = (val: any) => {
-  if(val == 1) {
-    isRecommendETA.value = false
-  } else if(val == 2) {
-    isRecommendETA.value = true
-  } else {
-    isRecommendETA.value = false
-  }
-}
-const handleInput = (val, index, type) => {
-  // 移除非数字字符
-  const numStr = val.replace(/[^\d]/g, '');
-  // 转换为整数，处理NaN情况
-  let num = parseInt(numStr, 10) || 0;
-  // 确保最小值为1
-  num = num < 1 ? 1 : num;
-  // 更新对应数据
-  AirContentList.value[index][type] = num;
-};
-
-// 删除数据
-const handleDeleteAir = (val: any) => {
-  AirContentList.value.splice(val, 1);
-  if(AirContentList.value.length == 0) {
-    isAir.value = false
-    RecommendCheckedList.value = RecommendCheckedList.value.splice(RecommendCheckedList.value.indexOf('Air'), 1)
-  }
-};
-
-// 删除数据
-const handleDeleteSea = (val: any) => {
-  SeaContentList.value.splice(val, 1);
-  if(SeaContentList.value.length == 0) {
-    isAir.value = false
-    RecommendCheckedList.value = RecommendCheckedList.value.splice(RecommendCheckedList.value.indexOf('Sea'), 1)
-  }
-};
-
-// 添加数据
-const AddAirCoulumnList = (val: any) => {
-  val.unshift({
-    Priority: 'P1',
-    RuleType: 'Default Rule',
-    AirPort: 'All',
-    FromDate: '',
-    ToDate: ''
-  })
-}
-
-// 根据RuleType的值来修改Priority的值
-const updatePriorities = () => {
-  const length = AirContentList.value.length;
-  const length2 = SeaContentList.value.length;
-  if (length === 1) {
-    handleLengthOne(AirContentList.value);
-  } else if (length === 2) {
-    handleLengthTwo(AirContentList.value);
-  } else if (length >= 3) {
-    handleLengthThreePlus(AirContentList.value);
-  }
-  if (length2 === 1) {
-    handleLengthOne(SeaContentList.value);
-  } else if (length2 === 2) {
-    handleLengthTwo(SeaContentList.value);
-  } else if (length2 >= 3) {
-    handleLengthThreePlus(SeaContentList.value);
-  }
-};
-
-// 处理长度为1
-const handleLengthOne = (item: any) => {
-  item.forEach(item => item.Priority = 'P1');
-  item.AirPort = item.RuleType === 'Default Rule' ? 'All' : '';
-};
-
-// 处理长度为2（新增核心逻辑）
-const handleLengthTwo = (item: any) => {
-  const types = new Set(item.map(i => i.RuleType));
-  item.forEach(item => {
-    item.AirPort = item.RuleType === 'Default Rule' ? 'All' : '';
-  });
-
-  // 两个都是 Default Rule
-  if (types.size === 1 && types.has('Default Rule')) {
-    item.forEach(item => item.Priority = 'P1');
-    return;
-  }
-
-  // 包含 Default Rule 和其他类型
-  if (types.has('Default Rule')) {
-    item.forEach(item => {
-      item.Priority = item.RuleType === 'Default Rule' ? 'P2' : 'P1';
-    });
-    return;
-  }
-
-  //同时存在 Specific Rule 和 Single Dimension
-  if (types.has('Specific Rule') && types.has('Single Dimension')) {
-    item.forEach(item => {
-      item.Priority = item.RuleType === 'Specific Rule' ? 'P1' : 'P2';
-    });
-    return;
-  }
-
-  // 情况4：两个相同类型（都是 Specific 或都是 Single）
-  item.forEach(item => item.Priority = 'P1');
-};
-
-// 处理长度≥3（保持之前的逻辑不变）
-const handleLengthThreePlus = (item : any) => {
-  item.forEach(item => {
-    item.AirPort = item.RuleType === 'Default Rule' ? 'All' : '';
-  });
-  // 统计各类型数量
-  const counts = item.reduce((acc, cur) => {
-    acc[cur.RuleType] = (acc[cur.RuleType] || 0) + 1;
-    return acc;
-  }, {});
-
-  // 获取所有存在的类型
-  const existingTypes = Object.keys(counts);
-  
-  // 三个不同类型都存在
-  if (
-    existingTypes.includes('Specific Rule') &&
-    existingTypes.includes('Single Dimension') &&
-    existingTypes.includes('Default Rule')
-  ) {
-    const priorityMap = {
-      'Specific Rule': 'P1',
-      'Single Dimension': 'P2',
-      'Default Rule': 'P3'
-    };
-    item.forEach(item => {
-      item.Priority = priorityMap[item.RuleType];
-    });
-    return;
-  }
-
-  // 全为同一种类型的情况
-  if (existingTypes.length === 1) {
-    item.forEach(item => item.Priority = 'P1');
-    return; // 提前退出后续判断
-  }
-
-  // 处理 Specific + Default 组合
-  if (existingTypes.length === 2 && 
-      existingTypes.includes('Specific Rule') && 
-      existingTypes.includes('Default Rule')) {
-    item.forEach(item => {
-      item.Priority = item.RuleType === 'Specific Rule' ? 'P1' : 'P2';
-    });
-    return;
-  }
-
-  // 存在两个Default Rule
-  if (counts['Default Rule'] === 2 && existingTypes.length === 2) {
-    item.forEach(item => {
-      item.Priority = item.RuleType === 'Default Rule' ? 'P2' : 'P1';
-    });
-    return;
-  }
-
-  // 存在两个Single Dimension
-  if (counts['Single Dimension'] === 2) {
-    if (existingTypes.includes('Default Rule')) {
-      // 两个Single + 一个Default
-      item.forEach(item => {
-        item.Priority = item.RuleType === 'Default Rule' ? 'P2' : 'P1';
-      });
-    } else if (existingTypes.includes('Specific Rule')) {
-      // 两个Single + 一个Specific
-      item.forEach(item => {
-        item.Priority = item.RuleType === 'Specific Rule' ? 'P1' : 'P2';
-      });
-    }
-    return;
-  }
-
-  // 其他未明确定义的情况保持原逻辑
-  const defaultPriorityMap = {
-    'Specific Rule': 'P1',
-    'Single Dimension': 'P2',
-    'Default Rule': 'P3'
-  };
-  item.forEach(item => {
-    item.Priority = defaultPriorityMap[item.RuleType] || 'P3';
-  });
-};
-
-// 深度监听数组变化
-watch(
-  () => [...AirContentList.value],
-  () => updatePriorities(),
-  { deep: true }
-);
-watch(
-  () => [...SeaContentList.value],
-  () => updatePriorities(),
-  { deep: true }
-);
-
-
-</script>
-<template>
-  <div>
-    <el-radio-group v-model="Recommendradio" @change="ChangeFrequency">
-      <el-radio :value="1">No Specific recommended time for choosing delivery date</el-radio>
-      <el-radio :value="2">
-        <div>Recommend Delivery Date (ETA/ATA )</div>
-        <div v-if="isRecommendETA" class="oceanCheckbox">
-          <el-checkbox-group @change="CheckChange" v-model="RecommendCheckedList">
-            <el-checkbox class="delayedType" value="Air" @click="handleCheckboxClick($event)" >
-              <div class="titlecheckbox">
-                <div>Air</div>
-                <span v-if="isAir" class="icon_grey font_family icon-icon_dropdown_b"></span>
-                <span v-else class="icon_grey font_family icon-icon_up_b"></span>
-              </div>
-              <div v-if="isAir" class="radiocheckbox" style="margin-top: 16px">
-                <div class="AirCoulumn">
-                  <div class="AicoulumnTitile" style="width: 10%;">Priority</div>
-                  <div class="AicoulumnTitile" style="width: 20%;">Rule Type</div>
-                  <div class="AicoulumnTitile" style="width: 40%;">Air Port</div>
-                  <div style="display: flex;flex-direction: column;border-right: 1px solid var(--color-system-border);width: 20%;">
-                    <div class="AicoulumnTitile2">Recommended Delivery Date</div>
-                    <div style="display: flex;height: 24px;align-items: center;">
-                      <div class="datetitle" style="border-right: 1px solid var(--color-system-border);">From (ETA/ATA + Days)</div>
-                      <div class="datetitle">To (ETA/ATA + Days)</div>
-                    </div>
-                  </div>
-                  <div class="AirCoumlulnAdd" style="width: 10%;" @click="AddAirCoulumnList(AirContentList)">+ Add</div>
-                </div>
-                <div class="AirContent" v-for="(item,index) in AirContentList" :key="index">
-                  <div class="AirCoumlumn" style="width: 10%;">{{item.Priority}}</div>
-                  <div class="AirCoumlumn" style="width: 20%;">
-                    <el-select
-                      v-model="item.RuleType"
-                      style="width: 100%;"
-                    >
-                      <el-option
-                        v-for="item in RuleTypeoptions"
-                        :key="item.value"
-                        :label="item.label"
-                        :value="item.value"
-                      >
-                      </el-option>
-                    </el-select>
-                  </div>
-                  <div class="AirCoumlumn" style="width: 40%;">
-                    <el-select
-                      v-model="item.AirPort"
-                      style="width: 100%;"
-                    >
-                      <el-option
-                        v-for="item in AirPortoptions"
-                        :key="item.value"
-                        :label="item.label"
-                        :value="item.value"
-                      >
-                      </el-option>
-                    </el-select>
-                  </div>
-                  <div class="AirCoumlumn" style="width: 10%;">
-                    <el-input @input="(val) => handleInput(val, index, 'FromDate')" placeholder="Input" v-model="item.FromDate"></el-input>
-                  </div>
-                  <div class="AirCoumlumn" style="width: 10%;">
-                    <el-input @input="(val) => handleInput(val, index, 'ToDate')"  placeholder="Input" v-model="item.ToDate"></el-input>
-                  </div>
-                  <div class="AirDelete" style="width: 10%;">
-                    <el-button @click="handleDeleteAir(item)" class="el-button--blue" style="height: 24px">
-                      <span class="font_family icon-icon_delete_b"></span>
-                    </el-button>
-                  </div>
-                </div>
-              </div>
-            </el-checkbox>
-            <el-checkbox class="delayedType" value="Sea" @click="handleCheckboxClick($event)">
-              <div class="titlecheckbox">
-                <div>Sea</div>
-                <span v-if="isAir" class="icon_grey font_family icon-icon_dropdown_b"></span>
-                <span v-else class="icon_grey font_family icon-icon_up_b"></span>
-              </div>
-              <div v-if="isSea" style="margin-top: 16px">
-                <div class="AirCoulumn">
-                  <div class="AicoulumnTitile" style="width: 10%;">Priority</div>
-                  <div class="AicoulumnTitile" style="width: 20%;">Rule Type</div>
-                  <div class="AicoulumnTitile" style="width: 40%;">Air Port</div>
-                  <div style="display: flex;flex-direction: column;border-right: 1px solid var(--color-system-border);width: 20%;">
-                    <div class="AicoulumnTitile2">Recommended Delivery Date</div>
-                    <div style="display: flex;height: 24px;align-items: center;">
-                      <div class="datetitle" style="border-right: 1px solid var(--color-system-border);">From (ETA/ATA + Days)</div>
-                      <div class="datetitle">To (ETA/ATA + Days)</div>
-                    </div>
-                  </div>
-                  <div class="AirCoumlulnAdd" style="width: 10%;" @click="AddAirCoulumnList(SeaContentList)">+ Add</div>
-                </div>
-                <div class="AirContent" v-for="(item,index) in SeaContentList" :key="index">
-                  <div class="AirCoumlumn" style="width: 10%;">{{item.Priority}}</div>
-                  <div class="AirCoumlumn" style="width: 20%;">
-                    <el-select
-                      v-model="item.RuleType"
-                      style="width: 100%;"
-                    >
-                      <el-option
-                        v-for="item in RuleTypeoptions"
-                        :key="item.value"
-                        :label="item.label"
-                        :value="item.value"
-                      >
-                      </el-option>
-                    </el-select>
-                  </div>
-                  <div class="AirCoumlumn" style="width: 40%;">
-                    <el-select
-                      v-model="item.AirPort"
-                      style="width: 100%;"
-                    >
-                      <el-option
-                        v-for="item in SeaPortoptions"
-                        :key="item.value"
-                        :label="item.label"
-                        :value="item.value"
-                      >
-                      </el-option>
-                    </el-select>
-                  </div>
-                  <div class="AirCoumlumn" style="width: 10%;">
-                    <el-input @input="(val) => handleInput(val, index, 'FromDate')" placeholder="Input" v-model="item.FromDate"></el-input>
-                  </div>
-                  <div class="AirCoumlumn" style="width: 10%;">
-                    <el-input @input="(val) => handleInput(val, index, 'ToDate')"  placeholder="Input" v-model="item.ToDate"></el-input>
-                  </div>
-                  <div class="AirDelete" style="width: 10%;">
-                    <el-button @click="handleDeleteSea(item)" class="el-button--blue" style="height: 24px">
-                      <span class="font_family icon-icon_delete_b"></span>
-                    </el-button>
-                  </div>
-                </div>
-              </div>
-            </el-checkbox>
-          </el-checkbox-group>
-        </div>
-      </el-radio>
-    </el-radio-group>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-:deep(.el-radio-group) {
-  display: block;
-}
-:deep(.el-radio) {
-  display: flex;
-  min-height: 32px;
-  border: 1px solid var(--color-system-border);
-  background-color: var(--color-system-body-bg);
-  margin-bottom: 4px;
-  border-radius: 6px;
-  padding: 0 8px;
-  margin-right: 0;
-  height: fit-content;
-  line-height: 32px;
-  align-items: start;
-}
-:deep(.el-radio__input.is-checked + .el-radio__label) {
-  color: var(--color-neutral-1);
-}
-:deep( .el-radio__inner) {
-  border: 1px solid var(--color-system-checkbox-border);
-}
-:deep(.el-radio__inner) {
-  margin-top: 7px;
-}
-:deep(.el-checkbox-group) {
-  display: flex;
-  flex-direction: column;
-}
-.oceanCheckbox {
-  margin-bottom: 8px;
-}
-.delayedType {
-  align-items: start;
-  height: fit-content;
-  margin-right: 5px;
-  border-radius: 6px;
-  padding: 13px;
-}
-:deep(.el-checkbox) {
-  width: 100%;
-  border-radius: 6px;
-  background-color: var(--color-personal-preference-bg);
-  margin-bottom: 4px;
-}
-:deep(.el-checkbox__label) {
-  width: 100%;
-}
-.titlecheckbox {
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-}
-.icon_grey {
-  color: #b8bbbf;
-}
-.AirCoulumn {
-  display: flex;
-  border: 1px solid var(--color-system-border);
-  background-color: var(--color-personal-preference-bg);
-  border-radius: 6px 6px 0 0;
-}
-.AicoulumnTitile {
-  font-size: 14px;
-  font-weight: 700;
-  border-right: 1px solid var(--color-system-border);
-  height: 56px;
-  display: flex;
-  align-items: center;
-  padding: 0 8px;
-}
-.datetitle {
-  font-size: 12px;
-  font-weight: 400;
-  height: 24px;
-  width: 50%;
-  display: flex;
-  align-items: center;
-  padding: 0 8px;
-}
-.AicoulumnTitile2 {
-  font-weight: 700;
-  height: 32px;
-  display: flex;
-  border-bottom: 1px solid var(--color-system-border);
-  align-items: center;
-  padding: 0 8px;
-}
-.AirCoumlulnAdd {
-  font-size: 14px;
-  font-weight: 400;
-  height: 56px;
-  color: var(--color-theme);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 8px;
-}
-.AirContent {
-  display: flex;
-  border: 1px solid var(--color-system-border);
-  background-color: var(--color-mode);
-  border-top: none;
-  height: 40px;
-  align-items: center;
-}
-.AirContent:last-child {
-  border-radius: 0 0 6px 6px;
-}
-.AirCoumlumn {
-  border-right: 1px solid var(--color-system-border);
-  display: flex;
-  height: 40px;
-  align-items: center;
-  padding: 0 8px;
-}
-.AirDelete {
-  display: flex;
-  height: 40px;
-  align-items: center;
-  justify-content: center;
-}
-</style>

src/views/DesDelivery/src/components/SelectStation.vue

@@ -1,121 +0,0 @@
-<script setup lang="ts">
-
-const SelectCountry = ref('')
-const SelectCountryoptions = ref([
-  { value: 'China', label: 'China' },
-  { value: 'USA', label: 'USA' },
-  { value: 'Japan', label: 'Japan' },
-  { value: 'Korea', label: 'Korea' },
-  { value: 'Taiwan', label: 'Taiwan' },
-  { value: 'Hong Kong', label: 'Hong Kong' },
-  { value: 'Hong Kong2', label: 'Hong Kong2' },
-  { value: 'Hong Kong3', label: 'Hong Kong3' },
-  { value: 'Hong Kong4', label: 'Hong Kong4' },
-  { value: 'Hong Kong5', label: 'Hong Kong5' },
-  { value: 'Hong Kong6', label: 'Hong Kong6' },
-  { value: 'Hong Kong7', label: 'Hong Kong7' },
-])
-interface OceanCheckboxItem {
-  value: string
-  label: string
-}
-
-interface Props {
-  CheckboxList: OceanCheckboxItem[]
-  CheckedList: Array<''>
-}
-const props = defineProps<Props>()
-const CheckedList = ref(props.CheckedList)
-const CheckboxList = ref(props.CheckboxList)
-watch(
-  () => props.CheckboxList,
-  (current) => {
-    CheckboxList.value = current
-  }
-)
-watch(
-  () => props.CheckedList,
-  (current) => {
-    CheckedList.value = current
-  }
-)
-
-const emits = defineEmits(['handleClickSelectCountry'])
-// Select Country
-const handleClickSelectCountry = (val: any) => {
-  emits('handleClickSelectCountry', val)
-}
-
-</script>
-
-<template>
-  <div>
-    <el-select
-      v-model="SelectCountry"
-      placeholder="Select Country"
-      style="width: 400px"
-      @change="handleClickSelectCountry"
-    >
-      <el-option
-        v-for="item in SelectCountryoptions"
-        :key="item.value"
-        :label="item.label"
-        :value="item.value"
-      />
-    </el-select>
-    <div class="station-list">
-      <div class="station-list-title">Station List</div>
-      <div class="oceanCheckbox">
-        <el-checkbox-group v-model="CheckedList" :class="{isEmpty :  CheckboxList.length === 0}">
-          <el-checkbox
-            v-for="item in CheckboxList"
-            :key="item.label"
-            :label="item.label"
-            :value="item.value"
-          >
-            {{ item.label }}
-          </el-checkbox>
-        </el-checkbox-group>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped> 
-.station-list {
-  background-color: var(--color-personal-preference-bg);
-  border-radius: 6px;
-  margin: 4px 0 0 0;
-  padding: 8px;
-}
-.station-list-title {
-  margin: 1px 0 13px 0;
-  font-size: 14px;
-  font-weight: 600;
-}
-:deep(.el-checkbox-group) {
-  border: 1px solid var(--color-system-border);
-  border-radius: 5px;
-}
-.isEmpty {
-  border: none;
-}
-:deep(.el-checkbox) {
-  width: 100%;
-  background-color: var(--color-system-body-bg);
-  border-bottom: 1px solid var(--color-system-border);
-  padding: 8px;
-}
-:deep(.el-checkbox:first-child) {
-  border-radius: 6px 6px 0 0;
-}
-:deep(.el-checkbox:last-child) {
-  border-radius: 0 0 6px 6px;
-  border-bottom: none;
-}
-.oceanCheckbox {
-  max-height: 321px;
-  overflow-x: hidden;
-  overflow-y: scroll;
-}
-</style>

src/views/DestinationDelivery/src/DestinationDelivery.vue

@@ -73,11 +73,10 @@ const DateChange = (date: any) => {
 }
 
 const handleConfigurations = () => {
-  // Handle configurations logic here
-  console.log('Configurations clicked')
+  router.push({ name: 'Configurations' })
 }
 const handleCreate = () => {
-  // Handle create new booking logic here
+  router.push({ name: 'Create New Booking' })
 }
 
 const handleTest = () => {

src/views/DestinationDelivery/src/components/ConfiguRations/index.ts

@@ -0,0 +1 @@
+export { default } from './src/ConfiguRations.vue'

src/views/DesDelivery/src/components/ConfigurationsTable.vue → src/views/DestinationDelivery/src/components/ConfiguRations/src/components/ConfigurationsTable.vue

@@ -115,7 +115,7 @@ defineExpose({
 
 const clickAddNewRule = () => {
   router.push({
-    path: '/Booking/DestinationDelivery/CreateNewRule',
+    path: '/destination-delivery/ConfiguRations/CreateNewRule',
     query: {}
   })
 }

src/views/DestinationDelivery/src/components/ConfiguRations/src/components/CreateNewRule.vue

@@ -0,0 +1,369 @@
+<script setup lang="ts">
+import SelectStation from './SelectStation.vue'
+import SetBookingWindow from './SetBookingWindow.vue'
+import RecommendDate from './RecommendDate.vue'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+const activeRules = ref(['SelectStation', 'SelectBooking', 'KLNPLC', 'RecommendDeliveryDate'])
+const IsFirstActive = ref(true)
+const selectedCountry = ref('')
+const windowRadio = ref()
+const recommendRadio = ref()
+const windowBeforeDays = ref('')
+const windowAfterDays = ref('')
+const recommendCheckedList = ref([])
+const recommendCheckedAirList = ref([])
+const recommendCheckedSeaList = ref([])
+const IsTwoActive = ref(true)
+const IsFourActive = ref(true)
+const IsThreeActive = ref(true)
+const KLNPLCvalue = ref('')
+interface KLNItem {
+  value: string
+  label: string
+}
+
+const KLNLists = ref<KLNItem[]>([])
+const countryCheckedList = ref([])
+const CountryCheckboxList = ref([])
+
+
+const CreateRuleDisabled = computed(() => {
+  // 1. 检查基本条件是否满足
+  if (
+    countryCheckedList.value.length === 0 ||
+    selectedCountry.value === '' ||
+    windowRadio.value === undefined ||
+    recommendRadio.value === undefined ||
+    KLNPLCvalue.value === ''
+  ) {
+    return true;
+  }
+
+  // 2. 处理时间窗口条件
+  if (windowRadio.value !== 1) {
+    // 当 windowRadio 不为 1 时，需要验证时间窗口字段
+    if (windowBeforeDays.value === '' || windowAfterDays.value === '') {
+      return true;
+    }
+  } else {
+    // 当 windowRadio 为 1 时，时间窗口字段应为空
+    if (windowBeforeDays.value !== '' || windowAfterDays.value !== '') {
+      return true;
+    }
+  }
+
+  // 3. 处理推荐日期条件
+  if (recommendRadio.value !== 1) {
+    // 3.1 确保至少选择了一个运输方式
+    if (recommendCheckedList.value.length === 0) {
+      return true;
+    }
+
+    // 3.2 验证航空规则（如果选择了 Air）
+    if (recommendCheckedList.value.includes('Air')) {
+      const isAirValid = recommendCheckedAirList.value.every(item => 
+        item.AirPort.length > 0 && 
+        item.FormDate !== '' && 
+        item.ToDate !== ''
+      );
+      
+      if (!isAirValid) return true;
+    }
+
+    // 3.3 验证海运规则（如果选择了 Sea）
+    if (recommendCheckedList.value.includes('Sea')) {
+      const isSeaValid = recommendCheckedSeaList.value.every(item => 
+        item.Port.length > 0 && 
+        item.Carrier.length > 0 && 
+        item.FormDate !== '' && 
+        item.ToDate !== ''
+      );
+      
+      if (!isSeaValid) return true;
+    }
+  }
+  // 4. 所有条件都满足，返回 false（不禁用）
+  return false;
+});
+// select country
+const handleClickSelectCountry = (val:any) =>{
+  selectedCountry.value = val
+  countryCheckedList.value = []
+  getKLNList()
+}
+// select station list
+const handleChangeStation = (val:any) =>{
+  countryCheckedList.value = val
+  getKLNList()
+}
+
+// select booking window
+const changeBookingWindow = (radio: number, beforedays:any, afterdays:any) => {
+  windowRadio.value = radio
+  windowBeforeDays.value = beforedays
+  windowAfterDays.value = afterdays
+}
+const handleCancel = () => {
+  // Logic to handle cancel action
+  router.push({ name: 'Configurations' })
+}
+
+// select recommend date
+const checkRecommend = (checked: any, airlist: any, sealist: any, radio: number) => {
+  recommendCheckedList.value = checked
+  recommendCheckedAirList.value = airlist
+  recommendCheckedSeaList.value = sealist
+  recommendRadio.value = radio
+}
+
+// 获取KLN列表
+const getKLNList = (): Promise<KLNItem[]> => {
+  return new Promise((resolve) => {
+    $api.getKLNEmployeeList({ 
+      term: '',
+      station: countryCheckedList.value
+    })
+      .then((res: any) => {
+        if (res.code === 200) {
+          KLNLists.value = res.data
+        } else {
+          resolve([]); // 失败返回空数组
+        }
+      })
+      .catch(() => resolve([])); // 异常兜底
+  });
+};
+// 自动查询KLN
+let timeout: ReturnType<typeof setTimeout>
+const querySearchAsync = (queryString: string, cb: (arg: any) => void) => {
+  const results = queryString
+    ? KLNLists.value.filter(createFilter(queryString))
+    : KLNLists.value
+  clearTimeout(timeout)
+  timeout = setTimeout(() => {
+    cb(results)
+  }, 1000 * Math.random())
+}
+const createFilter = (queryString: string) => {
+  return (restaurant: KLNItem) => {
+    return (
+      restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) != -1
+    )
+  }
+}
+const handleSelectKLN = (item: Record<string, any>) => {
+  console.log(item)
+}
+
+onMounted(() => {
+  getKLNList()
+})
+</script>
+
+<template>
+  <div>
+    <div class="Title">
+      Create New Rule
+      <div class="operator">
+        <el-button @click="handleCancel" style="height: 40px; width: 115px" type="default">
+          <span style="margin-right: 4px" class="font_family icon-icon_return_b"></span>
+          <span style="font-weight: 400">Cancel</span></el-button
+        >
+        <el-button style="height: 40px; width: 120px" class="el-button--main el-button--pain-theme" :disabled="CreateRuleDisabled">
+          <span
+            style="
+              display: inline-block;
+              margin-top: -4px;
+              margin-right: 4px;
+              transform: rotate(-60deg);
+            "
+            class="font_family icon-icon_submit_b"
+          ></span>
+          <span style="font-weight: 400">Submit</span>
+        </el-button>
+      </div>
+    </div>
+    <div class="setting-content">
+      <div class="setting-top-title">Setting</div>
+      <el-collapse v-model="activeRules" @change="IsFirstActive = !IsFirstActive">
+        <el-collapse-item name="SelectStation">
+            <template #title>
+              <div class="Rules_Title">
+                <span class="iconfont_icon icon_dark">
+                  <svg class="iconfont" aria-hidden="true">
+                    <use
+                      :xlink:href="IsFirstActive ? '#icon-icon_dropdown_b' : '#icon-icon_up_b'"
+                    ></use>
+                  </svg>
+                </span>
+                <span class="stars_red">*</span>Select Station (Enable Booking)
+              </div>
+            </template>
+            <div>
+              <SelectStation @handleClickSelectCountry="handleClickSelectCountry"
+              @handleChangeStation="handleChangeStation"
+              :CheckboxList="CountryCheckboxList"
+              :CheckedList="countryCheckedList"
+              ></SelectStation>
+            </div>
+          </el-collapse-item>
+      </el-collapse>
+      <el-collapse v-model="activeRules" @change="IsTwoActive = !IsTwoActive">
+        <el-collapse-item name="SelectBooking">
+            <template #title>
+              <div class="Rules_Title">
+                <span class="iconfont_icon icon_dark">
+                  <svg class="iconfont" aria-hidden="true">
+                    <use
+                      :xlink:href="IsTwoActive ? '#icon-icon_dropdown_b' : '#icon-icon_up_b'"
+                    ></use>
+                  </svg>
+                </span>
+                <span class="stars_red">*</span>Set Booking Window
+              </div>
+            </template>
+            <div>
+              <SetBookingWindow
+                :windowRadio="windowRadio"
+                @changeBookingWindow="changeBookingWindow"
+              ></SetBookingWindow>
+            </div>
+          </el-collapse-item>
+      </el-collapse>
+      <el-collapse v-model="activeRules" @change="IsThreeActive = !IsThreeActive">
+        <el-collapse-item name="RecommendDeliveryDate">
+            <template #title>
+              <div class="Rules_Title">
+                <span class="iconfont_icon icon_dark">
+                  <svg class="iconfont" aria-hidden="true">
+                    <use
+                      :xlink:href="IsThreeActive ? '#icon-icon_dropdown_b' : '#icon-icon_up_b'"
+                    ></use>
+                  </svg>
+                </span>
+                <span class="stars_red">*</span>Recommend Delivery Date 
+              </div>
+            </template>
+            <div>
+              <RecommendDate
+                :recommendRadio="recommendRadio"
+                @checkRecommend="checkRecommend"
+              ></RecommendDate>
+            </div>
+          </el-collapse-item>
+      </el-collapse>
+      <el-collapse v-model="activeRules" @change="IsFourActive = !IsFourActive">
+        <el-collapse-item name="KLNPLC">
+            <template #title>
+              <div class="Rules_Title">
+                <span class="iconfont_icon icon_dark">
+                  <svg class="iconfont" aria-hidden="true">
+                    <use
+                      :xlink:href="IsFourActive ? '#icon-icon_dropdown_b' : '#icon-icon_up_b'"
+                    ></use>
+                  </svg>
+                </span>
+                <span class="stars_red">*</span>KLN PLC
+              </div>
+            </template>
+            <div>
+              <el-autocomplete
+                v-model="KLNPLCvalue"
+                style="width: 400px;margin-bottom: 5px;"
+                placeholder="Select Employee Account"
+                :fetch-suggestions="querySearchAsync"
+                @select="handleSelectKLN"
+              />
+            </div>
+          </el-collapse-item>
+      </el-collapse>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.Title {
+  display: flex;
+  height: 68px;
+  border: 1px solid var(--color-border);
+  border-top: none;
+  border-width: 1px 0 1px 0;
+  font-size: var(--font-size-6);
+  font-weight: 700;
+  padding: 0 24px;
+  align-items: center;
+  justify-content: space-between;
+}
+.operator {
+  display: flex;
+  align-items: center;
+  & > .el-button--text {
+    height: 32px;
+    font-size: 14px;
+    font-weight: 400;
+    span {
+      color: var(--color-theme);
+    }
+  }
+}
+.setting-content {
+  margin: 16px 24px 48px 24px;
+  padding-bottom: 24px;
+  border: 1px solid var(--color-system-border-1);
+  border-radius: 12px;
+}
+.setting-top-title {
+  background-color: var(--color-shipment-status-header-bg);
+  height: 48px;
+  padding: 0 16px;
+  display: flex;
+  align-items: center;
+  border-radius: 12px 12px 0 0;
+}
+.Rules_Title {
+  font-size: 14px;
+  font-weight: 700;
+}
+.stars_red {
+  color: var(--color-danger);
+}
+:deep(.el-collapse) {
+  border: none;
+  padding: 0 16px;
+}
+:deep(.el-collapse-item__header) {
+  border: none !important;
+}
+:deep(.el-collapse-item__arrow) {
+  width: 0 !important;
+  height: 0 !important;
+}
+:deep(.el-collapse-item__header.is-active) {
+  background-color: transparent !important;
+  border-color: transparent !important;
+}
+:deep(.el-collapse-item__arrow.is-active) {
+  transform: rotate(-180deg) !important;
+}
+:deep(.el-collapse-item__wrap) {
+  border-bottom: none;
+}
+.iconfont_icon {
+  margin-right: 8px;
+}
+:deep(.el-select__wrapper) {
+  box-shadow: none;
+  border: 1px solid var(--color-select-border);
+}
+:deep(.el-select__wrapper.is-hovering:not(.is-focused)) {
+  box-shadow: none;
+  border: 1px solid var(--color-theme);
+}
+:deep(.el-select__wrapper.is-focused ){
+  box-shadow: none;
+  border: 1px solid var(--color-theme);
+}
+</style>

src/views/DestinationDelivery/src/components/ConfiguRations/src/components/RecommendDate.vue

@@ -0,0 +1,601 @@
+<script setup lang="ts">
+import SelectValue from './SelectValue.vue'
+import { ref } from 'vue'
+
+// 定义类型接口
+interface RuleOption {
+  label: string;
+  value: string;
+}
+
+interface RuleItem {
+  Priority: string;
+  RuleType: string;
+  AirPort?: string[];
+  Port?: string[];
+  Carrier?: string[];
+  FromDate: string | number;
+  ToDate: string | number;
+}
+
+// 定义 RuleItem 中数组字段的类型
+type ArrayFields = 'AirPort' | 'Port' | 'Carrier';
+
+const props = defineProps({
+  Recommendradio: {
+    type: Number,
+    default: 0
+  },
+  recommendata: {
+    type: Object,
+    default: () => ({})
+  }
+})
+
+// 响应式变量
+const Recommendradio = ref(props.Recommendradio)
+const isRecommendETA = ref(false)
+const isAir = ref(false)
+const isSea = ref(false)
+const RecommendCheckedList = ref<string[]>([])
+
+// 选项配置
+const AirRuleTypeoptions = ref<RuleOption[]>([
+  { label: 'Specific Rule', value: 'Specific Rule' }
+])
+
+const RuleTypeoptions = ref<RuleOption[]>([
+  { label: 'Specific Rule', value: 'Specific Rule' },
+  { label: 'Single Dimension', value: 'Single Dimension' }
+])
+
+// 规则数据
+const AirContentList = ref<RuleItem[]>([
+  {
+    Priority: 'P1',
+    RuleType: '*Default Rule',
+    AirPort: ['All'],
+    FromDate: '',
+    ToDate: ''
+  }
+])
+const SeaContentList = ref<RuleItem[]>([
+  {
+    Priority: 'P1',
+    RuleType: '*Default Rule',
+    Port: ['All'],
+    Carrier: ['All'],
+    FromDate: '',
+    ToDate: ''
+  }
+])
+
+// 创建规则项的工厂函数
+function createRuleItem(type: 'Air' | 'Sea', ruleType: string): RuleItem {
+  const baseItem = {
+    Priority: 'P1',
+    RuleType: ruleType,
+    FromDate: '',
+    ToDate: ''
+  }
+  if (type === 'Air') {
+    return {
+      ...baseItem,
+      AirPort: ruleType === '*Default Rule' ? ['All'] : []
+    }
+  }
+  return {
+    ...baseItem,
+    Port: ruleType === '*Default Rule' ? ['All'] : [],
+    Carrier: ruleType === '*Default Rule' ? ['All'] : []
+  }
+}
+
+// 选择checkbox
+const emits = defineEmits(['chackchangerecommend'])
+const CheckChange = (val: string[]) => {
+  isAir.value = val.includes('Air')
+  isSea.value = val.includes('Sea')
+  // 确保至少有一条规则
+  if (isAir.value && AirContentList.value.length === 0) {
+    AirContentList.value.push(createRuleItem('Air', '*Default Rule'))
+  }
+  if (isSea.value && SeaContentList.value.length === 0) {
+    SeaContentList.value.push(createRuleItem('Sea', '*Default Rule'))
+  }
+  updatePriorities()
+}
+
+const handleCheckboxClick = (event: Event) => {
+  const target = event.target as HTMLElement
+  const isCheckboxInput = target.closest('.el-checkbox__inner')
+  const isCheckboxTitle = target.closest('.titlecheckbox')
+  if (!isCheckboxInput && !isCheckboxTitle) {
+    event.preventDefault()
+  }
+}
+// 选择booking window
+const ChangeFrequency = (val: number) => {
+  isRecommendETA.value = val === 2
+  emits('chackchangerecommend', RecommendCheckedList.value, AirContentList.value, SeaContentList.value, Recommendradio.value)
+}
+// 修复后的 handleInput 函数
+const handleInput = (val: string, index: number, type: 'FromDate' | 'ToDate', list: RuleItem[]) => {
+  // 移除非数字字符
+  const numStr = val.replace(/[^\d]/g, '');
+  // 转换为整数，处理NaN情况
+  let num = parseInt(numStr, 10) || 0;
+  // 确保最小值为1
+  num = num < 1 ? 1 : num;
+  // 更新对应数据
+  list[index][type] = num;
+};
+// 删除数据
+const handleDelete = (index: number, list: RuleItem[], type: 'Air' | 'Sea') => {
+  list.splice(index, 1);
+  if (list.length === 0) {
+    if (type === 'Air') {
+      isAir.value = false
+      RecommendCheckedList.value = RecommendCheckedList.value.filter(item => item !== 'Air')
+    } else {
+      isSea.value = false
+      RecommendCheckedList.value = RecommendCheckedList.value.filter(item => item !== 'Sea')
+    }
+  }
+  updatePriorities()
+};
+// 添加数据
+const AddRuleItem = (list: RuleItem[], type: 'Air' | 'Sea') => {
+  // 检查是否已存在默认规则
+  const hasDefaultRule = list.some(item => item.RuleType === '*Default Rule')
+  // 如果已经有默认规则，则创建特定规则
+  const ruleType = hasDefaultRule ? 'Specific Rule' : '*Default Rule'
+  list.push(createRuleItem(type, ruleType))
+  updatePriorities()
+}
+// 根据RuleType的值来修改Priority的值
+const updatePriorities = () => {
+  emits('chackchangerecommend', RecommendCheckedList.value, AirContentList.value, SeaContentList.value,Recommendradio.value)
+  updateListPriorities(AirContentList.value, 'Air')
+  updateListPriorities(SeaContentList.value, 'Sea')
+};
+// 统一更新列表优先级
+const updateListPriorities = (list: RuleItem[], type: 'Air' | 'Sea') => {
+  const length = list.length
+  // 保护默认规则的数据
+  list.forEach(item => {
+    if (item.RuleType === '*Default Rule') {
+      if (type === 'Air') {
+        item.AirPort = ['All']
+      } else {
+        item.Port = ['All']
+        item.Carrier = ['All']
+      }
+    }
+  })
+  if (length === 1) {
+    handleLengthOne(list, type)
+  } else if (length === 2) {
+    handleLengthTwo(list, type)
+  } else if (length >= 3) {
+    handleLengthThreePlus(list, type)
+  }
+}
+// 处理长度为1
+const handleLengthOne = (list: RuleItem[], type: string) => {
+  list.forEach(item => item.Priority = 'P1')
+};
+// 处理长度为2
+const handleLengthTwo = (list: RuleItem[], type: string) => {
+  const types = new Set(list.map(i => i.RuleType))
+  // 两个都是 *Default Rule
+  if (types.size === 1 && types.has('*Default Rule')) {
+    list.forEach(item => item.Priority = 'P1')
+    return
+  }
+  // 包含 *Default Rule 和其他类型
+  if (types.has('*Default Rule')) {
+    list.forEach(item => {
+      item.Priority = item.RuleType === '*Default Rule' ? 'P2' : 'P1'
+    })
+    return
+  }
+  // 同时存在 Specific Rule 和 Single Dimension
+  if (types.has('Specific Rule') && types.has('Single Dimension')) {
+    list.forEach(item => {
+      item.Priority = item.RuleType === 'Specific Rule' ? 'P1' : 'P2'
+    })
+    return
+  }
+  // 其他情况
+  list.forEach(item => item.Priority = 'P1')
+};
+// 处理长度≥3
+const handleLengthThreePlus = (list: RuleItem[], type: string) => {
+  // 统计各类型数量
+  const counts = list.reduce((acc, cur) => {
+    acc[cur.RuleType] = (acc[cur.RuleType] || 0) + 1
+    return acc
+  }, {} as Record<string, number>)
+  // 获取所有存在的类型
+  const existingTypes = Object.keys(counts)
+  // 三个不同类型都存在
+  if (
+    existingTypes.includes('Specific Rule') &&
+    existingTypes.includes('Single Dimension') &&
+    existingTypes.includes('*Default Rule')
+  ) {
+    const priorityMap: Record<string, string> = {
+      'Specific Rule': 'P1',
+      'Single Dimension': 'P2',
+      '*Default Rule': 'P3'
+    }
+    list.forEach(item => {
+      item.Priority = priorityMap[item.RuleType]
+    })
+    return
+  }
+  // 全为同一种类型的情况
+  if (existingTypes.length === 1) {
+    list.forEach(item => item.Priority = 'P1')
+    return
+  }
+  // 处理 Specific + Default 组合
+  if (existingTypes.length === 2 && 
+      existingTypes.includes('Specific Rule') && 
+      existingTypes.includes('*Default Rule')) {
+    list.forEach(item => {
+      item.Priority = item.RuleType === 'Specific Rule' ? 'P1' : 'P2'
+    })
+    return
+  }
+  // 存在两个Default Rule
+  if (counts['*Default Rule'] === 2 && existingTypes.length === 2) {
+    list.forEach(item => {
+      item.Priority = item.RuleType === '*Default Rule' ? 'P2' : 'P1'
+    })
+    return
+  }
+  // 存在两个Single Dimension
+  if (counts['Single Dimension'] === 2) {
+    if (existingTypes.includes('*Default Rule')) {
+      // 两个Single + 一个Default
+      list.forEach(item => {
+        item.Priority = item.RuleType === '*Default Rule' ? 'P2' : 'P1'
+      })
+    } else if (existingTypes.includes('Specific Rule')) {
+      // 两个Single + 一个Specific
+      list.forEach(item => {
+        item.Priority = item.RuleType === 'Specific Rule' ? 'P1' : 'P2'
+      })
+    }
+    return
+  }
+  // 其他情况
+  const defaultPriorityMap: Record<string, string> = {
+    'Specific Rule': 'P1',
+    'Single Dimension': 'P2',
+    '*Default Rule': 'P3'
+  }
+  list.forEach(item => {
+    item.Priority = defaultPriorityMap[item.RuleType] || 'P3'
+  })
+}
+// 修复：改变选项值 - 使用类型保护
+const changeSelectedValue = (val: string[], index: number, field: ArrayFields, list: RuleItem[]) => {
+  // 使用类型断言确保安全
+  const item = list[index] as Record<ArrayFields, string[]>;
+  item[field] = val;
+}
+// 改变规则类型
+const changeRuleType = (val: string, index: number, list: RuleItem[]) => {
+  const item = list[index]
+  // 保护默认规则
+  if (item.RuleType === '*Default Rule' && val !== '*Default Rule') {
+    // 从默认规则切换到其他规则时重置选项
+    if ('AirPort' in item) item.AirPort = []
+    if ('Port' in item) item.Port = []
+    if ('Carrier' in item) item.Carrier = []
+  } else if (val === '*Default Rule') {
+    // 切换到默认规则时设置默认值
+    if ('AirPort' in item) item.AirPort = ['All']
+    if ('Port' in item) item.Port = ['All']
+    if ('Carrier' in item) item.Carrier = ['All']
+  }
+  item.RuleType = val
+  updatePriorities()
+}
+</script>
+
+<template>
+  <div>
+    <el-radio-group v-model="Recommendradio" @change="ChangeFrequency">
+      <el-radio :value="1">No Specific recommended time for choosing delivery date</el-radio>
+      <el-radio :value="2">
+        <div>Recommend Delivery Date (ETA/ATA)</div>
+        <div v-if="isRecommendETA" class="oceanCheckbox">
+          <el-checkbox-group v-model="RecommendCheckedList" @change="CheckChange">
+            <!-- Air 部分 -->
+            <el-checkbox class="delayedType" value="Air" @click="handleCheckboxClick">
+              <div class="titlecheckbox">
+                <div>Air</div>
+                <span class="icon_grey font_family" :class="isAir ? 'icon-icon_dropdown_b' : 'icon-icon_up_b'"></span>
+              </div>
+              <div v-if="isAir" class="radiocheckbox" style="margin-top: 16px">
+                <div class="AirCoulumn">
+                  <div class="AicoulumnTitile" style="width: 10%;">Priority</div>
+                  <div class="AicoulumnTitile" style="width: 20%;">Rule Type</div>
+                  <div class="AicoulumnTitile" style="width: 40%;">Air Port</div>
+                  <div style="display: flex;flex-direction: column;border-right: 1px solid var(--color-system-border);width: 20%;">
+                    <div class="AicoulumnTitile2">Recommended Delivery Date</div>
+                    <div style="display: flex;height: 24px;align-items: center;">
+                      <div class="datetitle" style="border-right: 1px solid var(--color-system-border);">From (ETA/ATA + Days)</div>
+                      <div class="datetitle">To (ETA/ATA + Days)</div>
+                    </div>
+                  </div>
+                  <div class="AirCoumlulnAdd" style="width: 10%;" @click="AddRuleItem(AirContentList, 'Air')">+ Add</div>
+                </div>
+                <div class="AirContent" v-for="(item, index) in AirContentList" :key="index">
+                  <div class="AirCoumlumn" style="width: 10%;">{{ item.Priority }}</div>
+                  <div class="AirCoumlumn" style="width: 20%;">
+                    <el-select
+                      v-model="item.RuleType"
+                      :disabled="item.RuleType === '*Default Rule'"
+                      style="width: 100%;"
+                      @change="val => changeRuleType(val, index, AirContentList)"
+                    >
+                      <el-option
+                        v-for="opt in AirRuleTypeoptions"
+                        :key="opt.value"
+                        :label="opt.label"
+                        :value="opt.value"
+                      />
+                    </el-select>
+                  </div>
+                  <div class="AirCoumlumn" style="width: 40%;">
+                    <SelectValue
+                      :SelectIndex="index"
+                      :SelectedValue="item.AirPort"
+                      :typeisDisabled="item.RuleType"
+                      @changeSelectedValue="val => changeSelectedValue(val, index, 'AirPort', AirContentList)"
+                    />
+                  </div>
+                  <div class="AirCoumlumn" style="width: 10%;">
+                    <el-input 
+                      @input="val => handleInput(val, index, 'FromDate', AirContentList)" 
+                      placeholder="Input" 
+                      v-model="item.FromDate"
+                    />
+                  </div>
+                  <div class="AirCoumlumn" style="width: 10%;">
+                    <el-input 
+                      @input="val => handleInput(val, index, 'ToDate', AirContentList)"  
+                      placeholder="Input" 
+                      v-model="item.ToDate"
+                    />
+                  </div>
+                  <div class="AirDelete" style="width: 10%;">
+                    <el-button 
+                      v-if="item.RuleType !== '*Default Rule'" 
+                      @click="handleDelete(index, AirContentList, 'Air')" 
+                      class="el-button--blue" 
+                      style="height: 24px"
+                    >
+                      <span class="font_family icon-icon_delete_b"></span>
+                    </el-button>
+                  </div>
+                </div>
+              </div>
+            </el-checkbox>
+            <!-- Sea 部分 -->
+            <el-checkbox class="delayedType" value="Sea" @click="handleCheckboxClick">
+              <div class="titlecheckbox">
+                <div>Sea</div>
+                <span class="icon_grey font_family" :class="isSea ? 'icon-icon_dropdown_b' : 'icon-icon_up_b'"></span>
+              </div>
+              <div v-if="isSea" style="margin-top: 16px">
+                <div class="AirCoulumn">
+                  <div class="AicoulumnTitile" style="width: 10%;">Priority</div>
+                  <div class="AicoulumnTitile" style="width: 20%;">Rule Type</div>
+                  <div class="AicoulumnTitile" style="width: 20%;">Port</div>
+                  <div class="AicoulumnTitile" style="width: 20%;">Carrier</div>
+                  <div style="display: flex;flex-direction: column;border-right: 1px solid var(--color-system-border);width: 20%;">
+                    <div class="AicoulumnTitile2">Recommended Delivery Date</div>
+                    <div style="display: flex;height: 24px;align-items: center;">
+                      <div class="datetitle" style="border-right: 1px solid var(--color-system-border);">From (ETA/ATA + Days)</div>
+                      <div class="datetitle">To (ETA/ATA + Days)</div>
+                    </div>
+                  </div>
+                  <div class="AirCoumlulnAdd" style="width: 10%;" @click="AddRuleItem(SeaContentList, 'Sea')">+ Add</div>
+                </div>
+                <div class="AirContent" v-for="(item, index) in SeaContentList" :key="index">
+                  <div class="AirCoumlumn" style="width: 10%;">{{ item.Priority }}</div>
+                  <div class="AirCoumlumn" style="width: 20%;">
+                    <el-select
+                      v-model="item.RuleType"
+                      :disabled="item.RuleType === '*Default Rule'"
+                      style="width: 100%;"
+                      @change="val => changeRuleType(val, index, SeaContentList)"
+                    >
+                      <el-option
+                        v-for="opt in RuleTypeoptions"
+                        :key="opt.value"
+                        :label="opt.label"
+                        :value="opt.value"
+                      />
+                    </el-select>
+                  </div>
+                  <div class="AirCoumlumn" style="width: 20%;">
+                    <SelectValue
+                      :SelectIndex="index"
+                      :SelectedValue="item.Port"
+                      :typeisDisabled="item.RuleType"
+                      @changeSelectedValue="val => changeSelectedValue(val, index, 'Port', SeaContentList)"
+                    />
+                  </div>
+                  <div class="AirCoumlumn" style="width: 20%;">
+                    <SelectValue
+                      :SelectIndex="index"
+                      :SelectedValue="item.Carrier"
+                      :typeisDisabled="item.RuleType"
+                      @changeSelectedValue="val => changeSelectedValue(val, index, 'Carrier', SeaContentList)"
+                    />
+                  </div>
+                  <div class="AirCoumlumn" style="width: 10%;">
+                    <el-input 
+                      @input="val => handleInput(val, index, 'FromDate', SeaContentList)" 
+                      placeholder="Input" 
+                      v-model="item.FromDate"
+                    />
+                  </div>
+                  <div class="AirCoumlumn" style="width: 10%;">
+                    <el-input 
+                      @input="val => handleInput(val, index, 'ToDate', SeaContentList)"  
+                      placeholder="Input" 
+                      v-model="item.ToDate"
+                    />
+                  </div>
+                  <div class="AirDelete" style="width: 10%;">
+                    <el-button 
+                      v-if="item.RuleType !== '*Default Rule'" 
+                      @click="handleDelete(index, SeaContentList, 'Sea')" 
+                      class="el-button--blue" 
+                      style="height: 24px"
+                    >
+                      <span class="font_family icon-icon_delete_b"></span>
+                    </el-button>
+                  </div>
+                </div>
+              </div>
+            </el-checkbox>
+          </el-checkbox-group>
+        </div>
+      </el-radio>
+    </el-radio-group>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+:deep(.el-radio-group) {
+  display: block;
+}
+:deep(.el-radio) {
+  display: flex;
+  min-height: 32px;
+  border: 1px solid var(--color-system-border);
+  background-color: var(--color-system-body-bg);
+  margin-bottom: 4px;
+  border-radius: 6px;
+  padding: 0 8px;
+  margin-right: 0;
+  height: fit-content;
+  line-height: 32px;
+  align-items: start;
+}
+:deep(.el-radio__input.is-checked + .el-radio__label) {
+  color: var(--color-neutral-1);
+}
+:deep( .el-radio__inner) {
+  border: 1px solid var(--color-system-checkbox-border);
+}
+:deep(.el-radio__inner) {
+  margin-top: 7px;
+}
+:deep(.el-checkbox-group) {
+  display: flex;
+  flex-direction: column;
+}
+.oceanCheckbox {
+  margin-bottom: 8px;
+}
+.delayedType {
+  align-items: start;
+  height: fit-content;
+  margin-right: 5px;
+  border-radius: 6px;
+  padding: 13px;
+}
+:deep(.el-checkbox) {
+  width: 100%;
+  border-radius: 6px;
+  background-color: var(--color-personal-preference-bg);
+  margin-bottom: 4px;
+}
+:deep(.el-checkbox__label) {
+  width: 100%;
+}
+.titlecheckbox {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+}
+.icon_grey {
+  color: #b8bbbf;
+}
+.AirCoulumn {
+  display: flex;
+  border: 1px solid var(--color-system-border);
+  background-color: var(--color-personal-preference-bg);
+  border-radius: 6px 6px 0 0;
+}
+.AicoulumnTitile {
+  font-size: 14px;
+  font-weight: 700;
+  border-right: 1px solid var(--color-system-border);
+  height: 56px;
+  display: flex;
+  align-items: center;
+  padding: 0 8px;
+}
+.datetitle {
+  font-size: 12px;
+  font-weight: 400;
+  height: 24px;
+  width: 50%;
+  display: flex;
+  align-items: center;
+  padding: 0 8px;
+}
+.AicoulumnTitile2 {
+  font-weight: 700;
+  height: 32px;
+  display: flex;
+  border-bottom: 1px solid var(--color-system-border);
+  align-items: center;
+  padding: 0 8px;
+}
+.AirCoumlulnAdd {
+  font-size: 14px;
+  font-weight: 400;
+  height: 56px;
+  color: var(--color-theme);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 8px;
+}
+.AirContent {
+  display: flex;
+  border: 1px solid var(--color-system-border);
+  background-color: var(--color-mode);
+  border-top: none;
+  height: 40px;
+  align-items: center;
+}
+.AirContent:last-child {
+  border-radius: 0 0 6px 6px;
+}
+.AirCoumlumn {
+  border-right: 1px solid var(--color-system-border);
+  display: flex;
+  height: 40px;
+  align-items: center;
+  padding: 0 8px;
+}
+.AirDelete {
+  display: flex;
+  height: 40px;
+  align-items: center;
+  justify-content: center;
+}
+</style>

src/views/DestinationDelivery/src/components/ConfiguRations/src/components/SelectStation.vue

@@ -0,0 +1,189 @@
+<script setup lang="ts">
+import { popperContentEmits } from 'element-plus'
+
+
+const SelectCountry = ref('')
+interface CountryItem {
+  value: string
+  label: string
+}
+
+const countrys = ref<CountryItem[]>([])
+interface OceanCheckboxItem {
+  value: string
+  label: string
+}
+
+interface Props {
+  CheckboxList: OceanCheckboxItem[]
+  CheckedList: Array<''>
+}
+const props = defineProps<Props>()
+const CheckedList = ref(props.CheckedList)
+const CheckboxList = ref(props.CheckboxList)
+watch(
+  () => props.CheckboxList,
+  (current) => {
+    CheckboxList.value = current
+  }
+)
+watch(
+  () => props.CheckedList,
+  (current) => {
+    CheckedList.value = current
+  }
+)
+
+const emits = defineEmits(['handleClickSelectCountry','handleChangeStation'])
+const handlechangestation = (val: any) => {
+  emits('handleChangeStation', val)
+}
+
+// 获取contry列表
+const getCountryList = (): Promise<CountryItem[]> => {
+  return new Promise((resolve) => {
+    $api.getDeliveryCountry({ term: '' })
+      .then((res: any) => {
+        if (res.code === 200) {
+          countrys.value = res.data
+        } else {
+          resolve([]); // 失败返回空数组
+        }
+      })
+      .catch(() => resolve([])); // 异常兜底
+  });
+};
+// 自动输入
+let timeout: ReturnType<typeof setTimeout>
+const isNodata = ref([])
+const querySearchAsync = (queryString: string, cb: (arg: any) => void) => {
+  const results = queryString
+    ? countrys.value.filter(createFilter(queryString))
+    : countrys.value
+  isNodata.value = results
+  clearTimeout(timeout)
+  timeout = setTimeout(() => {
+    if(results.length == 0) {
+      cb([{ 
+        isNoData: true, 
+        value: '无搜索结果' 
+      }]);
+    } else {
+      cb(results)
+    }
+  }, 1000 * Math.random())
+}
+
+const popperClass = computed(() => {
+  return isNodata.value.length == 0 ? 'no-data-item' : ''
+})
+const createFilter = (queryString: string) => {
+  return (restaurant: CountryItem) => {
+    return (
+      restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) != -1
+    )
+  }
+}
+
+const handleSelect = (item: Record<string, any>) => {
+  emits('handleClickSelectCountry',item.value)
+  $api.getDeliveryStation({ country: item.value })
+  .then((res: any) => {
+    if (res.code === 200) {
+      CheckboxList.value = res.data
+    }
+  })
+}
+
+onMounted(() => {
+  getCountryList()
+})
+</script>
+
+<template>
+  <div>
+    <el-autocomplete
+      v-model="SelectCountry"
+      style="width: 400px;margin-bottom: 5px;"
+      placeholder="Select Country"
+      :popper-class="popperClass"
+      :fetch-suggestions="querySearchAsync"
+      @select="handleSelect"
+    >
+    <template #default="{ item }">
+      <div :class="[
+        'suggestion-item',
+        { 'no-data-item': item.isNoData }
+      ]">
+        {{ item.value }}
+      </div>
+    </template>
+    </el-autocomplete>
+    <div class="station-list">
+      <div class="station-list-title">Station List</div>
+      <div class="oceanCheckbox">
+        <el-checkbox-group v-model="CheckedList" :class="{isEmpty :  CheckboxList.length === 0}" @change="handlechangestation">
+          <el-checkbox
+            v-for="item in CheckboxList"
+            :key="item.label"
+            :label="item.label"
+            :value="item.value"
+          >
+            {{ item.label }}
+          </el-checkbox>
+        </el-checkbox-group>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped> 
+.station-list {
+  background-color: var(--color-personal-preference-bg);
+  border-radius: 6px;
+  margin: 4px 0 0 0;
+  padding: 8px;
+}
+.station-list-title {
+  margin: 1px 0 13px 0;
+  font-size: 14px;
+  font-weight: 600;
+}
+:deep(.el-checkbox-group) {
+  border: 1px solid var(--color-system-border);
+  border-radius: 5px;
+}
+.isEmpty {
+  border: none;
+}
+:deep(.el-checkbox) {
+  width: 100%;
+  background-color: var(--color-system-body-bg);
+  border-bottom: 1px solid var(--color-system-border);
+  padding: 8px;
+}
+:deep(.el-checkbox:first-child) {
+  border-radius: 6px 6px 0 0;
+}
+:deep(.el-checkbox:last-child) {
+  border-radius: 0 0 6px 6px;
+  border-bottom: none;
+}
+.oceanCheckbox {
+  max-height: 321px;
+  overflow-x: hidden;
+  overflow-y: scroll;
+}
+.no-data-item {
+  color: var(--color-neutral-2);
+  text-align: center;
+  padding: 20px;
+  cursor: default;
+  &:hover {
+    background-color: transparent !important;
+  }
+}
+.suggestion-item {
+  padding: 5px 20px;
+}
+</style>

src/views/DestinationDelivery/src/components/ConfiguRations/src/components/SelectValue.vue

@@ -0,0 +1,196 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+
+const props = defineProps({
+  SelectedValue: {
+    type: Array as () => string[],
+    default: () => []
+  },
+  SelectIndex: {
+    type: Number,
+    default: 0
+  },
+  typeisDisabled: {
+    type: String,
+    default: ''
+  }
+})
+const checkAll = ref(false)
+const value = ref<string[]>(props.SelectedValue)
+const SelectNumber = ref(props.SelectIndex)
+const typeisDisabled = ref(props.typeisDisabled)
+
+watch(
+  () => props.SelectedValue,
+  (val) => {
+    value.value = val
+  }
+)
+
+const cities = ref([
+  {
+    value: 'Beijing',
+    label: 'Beijing',
+    checked: false
+  },
+  {
+    value: 'Shanghai',
+    label: 'Shanghai',
+    checked: false
+  },
+  {
+    value: 'Nanjing',
+    label: 'Nanjing',
+    checked: false
+  },
+  {
+    value: 'Chengdu',
+    label: 'Chengdu',
+    checked: false
+  },
+  {
+    value: 'Shenzhen',
+    label: 'Shenzhen',
+    checked: false
+  },
+  {
+    value: 'Guangzhou',
+    label: 'Guangzhou',
+    checked: false
+  },
+])
+
+const emits = defineEmits(['changeSelectedValue', 'handelremovetag'])
+
+watch(value, (val) => {
+  if (val.length === 0) {
+    checkAll.value = false
+  } else if (val.length === cities.value.length) {
+    checkAll.value = true
+    value.value = ['All']
+  }else if (val.length == 1 && val[0] == 'All') {
+    checkAll.value = true
+  } else {
+    checkAll.value = false
+  }
+  emits('changeSelectedValue', val, SelectNumber.value)
+})
+
+const handleCheckAll = (val) => {
+  if (val.target.checked) {
+    value.value = ['All']
+    cities.value.forEach((item) => { 
+      item.checked = true
+    })
+  } else {
+    value.value = []
+    cities.value.forEach((item) => { 
+      item.checked = false
+    })
+  }
+}
+
+const handelchangeSelect = () => {
+  value.value = cities.value.filter(item => item.checked === true).map(item => item.value)
+}
+
+//移除tag
+const handelRemoveTag = (tag) => {
+  console.log(tag)
+  // 阻止事件冒泡和默认行为
+  event.stopPropagation()
+  event.preventDefault()
+  
+  // 更新选中值（移除当前标签）
+  const newValue = value.value.filter(item => item !== tag)
+  emits('changeSelectedValue', newValue, SelectNumber.value)
+  
+  // 更新对应的城市选中状态
+  const city = cities.value.find(item => item.value === tag)
+  if (city) {
+    city.checked = false
+  }
+  
+  // 更新全选状态
+  checkAll.value = newValue.length === cities.value.length
+}
+
+const visibleTags = computed(() => { 
+  return value.value.slice(0, 3);
+})
+const hiddenTagsCount = computed(() => { 
+  return Math.max(value.value.length - 3, 0);
+})
+</script>
+<template>
+  <div style="width: 100%;">
+    <el-select
+      v-model="value"
+      multiple
+      filterable
+      :disabled="typeisDisabled  == '*Default Rule'"
+      placeholder="Select"
+      popper-class="custom-sheader-select"
+      @change="handelchangeSelect"
+    >
+      <template #header>
+        <a-checkbox v-model:checked="checkAll" @change="handleCheckAll">All</a-checkbox>
+      </template>
+      <template #tag>
+        <!-- 显示前3个标签 -->
+        <el-tag 
+          v-for="(tag, index) in visibleTags" 
+          :key="index"
+          :closable="!tag.includes('All')" 
+          @close="handelRemoveTag(tag)"
+          class="tag"
+        >
+          {{ tag }}
+        </el-tag>
+        
+        <!-- 显示折叠数量提示 -->
+        <el-tag v-if="hiddenTagsCount > 0" class="tag">
+          +{{ hiddenTagsCount }}
+        </el-tag>
+      </template>
+      <el-option
+        v-for="item in cities"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value"
+      >
+      <div style="width: 100%;" @click="item.checked = !item.checked">
+        <a-checkbox v-model:checked="item.checked"></a-checkbox>
+        <span class="label">{{ item.label }}</span>
+      </div>
+      </el-option>
+    </el-select>
+  </div>
+</template>
+<style lang="scss" scoped>
+.el-select-dropdown__item.is-selected {
+  background-color: transparent;
+  div {
+    color: var(--badge__content--warning);
+  }
+}
+.el-select-dropdown__item {
+  padding-left: 7.7px;
+  display: flex;
+  align-items: center;
+}
+.label {
+  margin-left: 8px;
+}
+.el-select-dropdown__item.is-hovering {
+  div {
+    color: var(--badge__content--warning);
+  }
+}
+.tag {
+  color: var(--color-neutral-1);
+  font-size: var(--font-size-2);
+  border-color: var(--tag-boder-color);
+  background-color: var(--tag-bg-color) !important;
+}
+</style>

src/views/DesDelivery/src/components/SetBookingWindow.vue → src/views/DestinationDelivery/src/components/ConfiguRations/src/components/SetBookingWindow.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-const windowradio = ref(0)
 const isBookingETD = ref(false)
 const isBookingETA = ref(false)
 const beforeETDdays = ref('')
@@ -7,7 +6,26 @@ const afterETDdays = ref('')
 const beforeETAdays = ref('')
 const afterETAdays = ref('')
 
+const props = defineProps({
+  windowradio: {
+    type: Number,
+    default: 0
+  },
+  setbookingdata: {
+    type: Object,
+    default: () => ({})
+  }
+})
+
+const windowradio = ref(props.windowradio)
+const setbookingdata = ref(props.setbookingdata)
+
+watch(() => props.setbookingdata, (val) => { 
+  setbookingdata.value = val
+})
+
 // 选择booking window
+const emits = defineEmits(['changeBookingWindow'])
 const ChangeFrequency = (val: any) => {
   if(val == 1) {
     isBookingETD.value = false
@@ -34,6 +52,15 @@ const ChangeFrequency = (val: any) => {
     beforeETAdays.value = ''
     afterETAdays.value = ''
   }
+  emits('changeBookingWindow',windowradio.value, beforeETAdays.value, afterETAdays.value)
+}
+
+const changeTime = (val: any) => {
+  if(val == 'ETD') {
+    ChangeFrequency(2)
+  } else {
+    ChangeFrequency(3)
+  }
 }
 
 </script>
@@ -42,20 +69,20 @@ const ChangeFrequency = (val: any) => {
     <el-radio-group v-model="windowradio" @change="ChangeFrequency">
       <el-radio :value="1">No Specific time restrictions for creating booking</el-radio>
       <el-radio :value="2">
-        <div>Booking Window (ETD)</div>
+        <div>Booking Window (ETD/ATD)</div>
         <div class="ETDWindow" v-if="isBookingETD">
-          <el-input style="width: 80px;height: 32px;" v-model="beforeETDdays"></el-input>
+          <el-input style="width: 80px;height: 32px;" v-model="beforeETDdays" @input="changeTime('ETD')"></el-input>
           days before to 
-          <el-input style="width: 80px;height: 32px;" v-model="afterETDdays"></el-input>
+          <el-input style="width: 80px;height: 32px;" v-model="afterETDdays" @input="changeTime('ETD')"></el-input>
           days after
         </div>
       </el-radio>
       <el-radio :value="3">
-        <div>Booking Window (ETA)</div>
+        <div>Booking Window (ETA/ATA)</div>
         <div class="ETDWindow" v-if="isBookingETA">
-          <el-input style="width: 80px;height: 32px;" v-model="beforeETAdays"></el-input>
+          <el-input style="width: 80px;height: 32px;" v-model="beforeETAdays" @input="changeTime('ETA')"></el-input>
           days before to 
-          <el-input style="width: 80px;height: 32px;" v-model="afterETAdays"></el-input>
+          <el-input style="width: 80px;height: 32px;" v-model="afterETAdays" @input="changeTime('ETA')"></el-input>
           days after
         </div>
       </el-radio>