feat:修改Bug

src/components/AddRules/src/AddRules.vue

@@ -153,8 +153,8 @@ const ChangeDeayedRules = (val: any) => {
   DelayedDeparturedList.value = []
   if (val.Departure != '') {
     DelayedDeparturedList.value.push(val.Departure)
-    savesubscribeobj.ocean_atd_sub_etd = val.Departure.split(' ')[3]
-    savesubscribeobj.ocean_atd_sub_etd_unit = val.Departure.split(' ')[4]
+    savesubscribeobj.ocean_atd_sub_etd = val.Departure.split(' ')[4]
+    savesubscribeobj.ocean_atd_sub_etd_unit = val.Departure.split(' ')[5]
   } else {
     delete savesubscribeobj.ocean_atd_sub_etd
     delete savesubscribeobj.ocean_atd_sub_etd_unit
@@ -172,8 +172,8 @@ const ChangeAirRules = (val: any) => {
   DelayedAirdList.value = []
   if (val.Departure != '') {
     DelayedAirdList.value.push(val.Departure)
-    savesubscribeobj.air_atd_sub_etd = val.Departure.split(' ')[3]
-    savesubscribeobj.air_atd_sub_etd_unit = val.Departure.split(' ')[4]
+    savesubscribeobj.air_atd_sub_etd = val.Departure.split(' ')[4]
+    savesubscribeobj.air_atd_sub_etd_unit = val.Departure.split(' ')[5]
   } else {
     delete savesubscribeobj.air_atd_sub_etd
     delete savesubscribeobj.air_atd_sub_etd_unit
@@ -321,8 +321,8 @@ const ChangeETDAirRules = (val: any) => {
   if (val.ETD != '') {
     if (val.ETD.indexOf('≥') != -1) {
       savesubscribeobj.air_etd_change = false
-      savesubscribeobj.air_etd_old_sub_new = val.ETD.split(' ')[6]
-      savesubscribeobj.air_etd_old_sub_new_unit = val.ETD.split(' ')[7]
+      savesubscribeobj.air_etd_old_sub_new = val.ETD.split(' ')[7]
+      savesubscribeobj.air_etd_old_sub_new_unit = val.ETD.split(' ')[8]
     } else {
       savesubscribeobj.air_etd_change = true
     }
@@ -335,8 +335,8 @@ const ChangeETDAirRules = (val: any) => {
   if (val.ETA != '') {
     if (val.ETA.indexOf('≥') != -1) {
       savesubscribeobj.air_eta_change = false
-      savesubscribeobj.air_eta_old_sub_new = val.ETA.split(' ')[6]
-      savesubscribeobj.air_eta_old_sub_new_unit = val.ETA.split(' ')[7]
+      savesubscribeobj.air_eta_old_sub_new = val.ETA.split(' ')[7]
+      savesubscribeobj.air_eta_old_sub_new_unit = val.ETA.split(' ')[8]
     } else {
       savesubscribeobj.air_eta_change = true
     }
@@ -392,7 +392,7 @@ const Savesubscribe = () => {
       MilMethodsList.value.length == 0
     ) {
       if (OceanCheckList.value.length == 0 && AirCheckList.value.length == 0) {
-        missingmessage.value += 'Select Milstone, '
+        missingmessage.value += 'Select Milstones, '
       }
       if (MilFrequencyList.value.length == 0) {
         missingmessage.value += 'Notification Frequency, '
@@ -452,19 +452,16 @@ const Savesubscribe = () => {
   } else if (props.TitleType == 'Departure') {
     savesubscribeobj.rules_type = 'Departure/Arrival_Delay'
     if (
-      DelayedDeparturedList.value == undefined ||
-      DelayedDeparturedList.value.length == 0 ||
-      DelayedAirdList.value == undefined ||
+      DelayedDeparturedList.value == undefined  &&
+      DelayedAirdList.value == undefined || 
+      DelayedDeparturedList.value.length == 0 &&
       DelayedAirdList.value.length == 0 ||
       DepFrequencyList.value.length == 0 ||
       DepMethodsList.value == undefined ||
       DepMethodsList.value.length == 0
     ) {
-      if (DelayedDeparturedList.value == undefined || DelayedDeparturedList.value.length == 0) {
-        missingmessage.value += 'Ocean Shipments, '
-      }
-      if (DelayedAirdList.value == undefined || DelayedAirdList.value.length == 0) {
-        missingmessage.value += 'Air Shipments, '
+      if (DelayedDeparturedList.value.length == 0 && DelayedAirdList.value.length == 0 || DelayedDeparturedList.value == undefined && DelayedAirdList.value == undefined) {
+        missingmessage.value += 'Select Delayed Type, '
       }
       if (DepFrequencyList.value.length == 0) {
         missingmessage.value += 'Notification Frequency, '
@@ -475,7 +472,22 @@ const Savesubscribe = () => {
       missingmessage.value = missingmessage.value.substring(0, missingmessage.value.length - 2)
       UnableSaveVisible.value = true
     } else {
-      str = DelayedDeparturedList.value.join(';\n') + ';\n' + DelayedAirdList.value.join(';\n')
+      if(DelayedDeparturedList.value.length == 0) {
+        str =
+        'Air: ' +
+        DelayedAirdList.value.join(',')
+      } else if(DelayedAirdList.value.length == 0) {
+        str =
+        'Ocean: ' +
+        DelayedDeparturedList.value.join(',')
+      } else {
+        str =
+        'Ocean: ' +
+        DelayedDeparturedList.value.join(',') +
+        ';\nAir: ' +
+        DelayedAirdList.value.join(',') +
+        ';'
+      }
       savesubscribeobj.event_details = str
       SaveSuceessful()
     }
@@ -483,18 +495,15 @@ const Savesubscribe = () => {
     savesubscribeobj.rules_type = 'ETD/ETA_Change'
     if (
       ETDOceanList.value == undefined ||
+      ETDAirList.value == undefined &&
       ETDOceanList.value.length == 0 ||
-      ETDAirList.value == undefined ||
-      ETDAirList.value.length == 0 ||
+      ETDAirList.value.length == 0 &&
       ETDFrequencyList.value.length == 0 ||
       ETDMethodsList.value == undefined ||
       ETDMethodsList.value.length == 0
     ) {
-      if (ETDOceanList.value == undefined || ETDOceanList.value.length == 0) {
-        missingmessage.value += 'Ocean Shipments, '
-      }
-      if (ETDAirList.value == undefined || ETDAirList.value.length == 0) {
-        missingmessage.value += 'Air Shipments, '
+      if (ETDOceanList.value == undefined && ETDAirList.value == undefined || ETDOceanList.value.length == 0 && ETDAirList.value.length) {
+        missingmessage.value += 'Select Time Type, '
       }
       if (ETDFrequencyList.value.length == 0) {
         missingmessage.value += 'Notification Frequency, '
@@ -505,7 +514,22 @@ const Savesubscribe = () => {
       missingmessage.value = missingmessage.value.substring(0, missingmessage.value.length - 2)
       UnableSaveVisible.value = true
     } else {
-      str = ETDOceanList.value.join(';\n') + ';\n' + ETDAirList.value.join(';\n')
+      if(ETDOceanList.value.length == 0) {
+        str =
+        '[Air]' +
+        ETDAirList.value.join(',')
+      } else if(ETDAirList.value.length == 0) {
+        str =
+        '[Ocean]' +
+        ETDOceanList.value.join(',')
+      } else {
+        str =
+        '[Ocean]' +
+        ETDOceanList.value.join(',') +
+        ';\n[Air]' +
+        ETDAirList.value.join(',') +
+        ';'
+      }
       savesubscribeobj.event_details = str
       SaveSuceessful()
     }
@@ -594,7 +618,7 @@ defineExpose({
             </template>
             <div>
               <RulesShipments
-                Title="Ocean shipments"
+                Title="Ocean Shipments"
                 ref="MilOceanref"
                 @ChangeCheckRules="ChangeCheckOceanRules"
                 :CheckboxList="MilestoneOceanListInit"
@@ -603,7 +627,7 @@ defineExpose({
             </div>
             <div>
               <RulesShipments
-                Title="Air shipments"
+                Title="Air Shipments"
                 ref="MilAirref"
                 @ChangeCheckRules="ChangeCheckAirRules"
                 :CheckboxList="MilestoneAirListInit"
@@ -632,7 +656,7 @@ defineExpose({
             </template>
             <div>
               <RulesShipments
-                Title="Ocean shipments"
+                Title="Ocean Shipments"
                 ref="ContainerOcean"
                 @ChangeCheckRules="ChangeContainerRules"
                 :CheckboxList="ContainerOceanListInit"
@@ -661,7 +685,7 @@ defineExpose({
             </template>
             <div>
               <DelayedType
-                Title="Ocean shipments"
+                Title="Ocean Shipments"
                 ref="OceanDelayed"
                 :DelayedData="DelayedDataInit"
                 @ChangeCheckRules="ChangeDeayedRules"
@@ -669,7 +693,7 @@ defineExpose({
             </div>
             <div>
               <DelayedType
-                Title="Air shipments"
+                Title="Air Shipments"
                 ref="AirDelayed"
                 :DelayedData="DelayedDataInitAir"
                 @ChangeCheckRules="ChangeAirRules"
@@ -692,12 +716,12 @@ defineExpose({
                     ></use>
                   </svg>
                 </span>
-                <span class="stars_red">*</span>Select Delayed Type
+                <span class="stars_red">*</span>Select Time Type
               </div>
             </template>
             <div>
               <ETDShipments
-                Title="Ocean shipments"
+                Title="Ocean Shipments"
                 ref="OceanETD"
                 :ETDData="OceanETDInit"
                 @ChangeCheckRules="ChangeETDOceanRules"
@@ -705,7 +729,7 @@ defineExpose({
             </div>
             <div>
               <ETDShipments
-                Title="Air shipments"
+                Title="Air Shipments"
                 ref="AirETD"
                 :ETDData="AirETDInit"
                 @ChangeCheckRules="ChangeETDAirRules"
@@ -1016,9 +1040,12 @@ defineExpose({
   width: 0 !important;
   height: 0 !important;
 }
-:deep(.el-icon svg) {
+:deep(.Ocean_collapse .el-icon svg) {
   width: 0 !important;
 }
+:deep(.arrivalselect .el-icon svg) {
+  width: 1em !important;
+}
 :deep(.el-collapse-item__header.is-active) {
   background-color: transparent !important;
   border-color: transparent !important;

src/components/AddRules/src/components/DelayedType.vue

@@ -70,12 +70,13 @@ const clampedArrivalValue = computed({
     }
   }
 })
-
 const CheckChange = (val: any) => {
   if (val.includes('Departure Delayed')) {
     isDeparture.value = true
+    clampedArrivalValue.value = ''
+    ArrivalSelect.value = ''
     if(clampedValue.value != '' && clampedValue.value!= undefined) {
-      Departurestr = 'Departure Delayed' + ' ≥ ' + clampedValue.value + ' ' + DepartureSelect.value
+      Departurestr = 'Departure Delayed (ATD-ETD)' + ' ≥ ' + clampedValue.value + ' ' + DepartureSelect.value
     } else {
       Departurestr = ''
     }
@@ -95,10 +96,14 @@ const CheckChange = (val: any) => {
     } else {
       isArrival.value = false
       DepartureList.value.Arrival = ''
+      clampedArrivalValue.value = ''
+      ArrivalSelect.value = ''
     }
   } else {
     isDeparture.value = false
     DepartureList.value.Departure = ''
+    clampedValue.value = ''
+    DepartureSelect.value = ''
     if (val.includes('Arrival Delayed (ATA-ETA)')) {
       isArrival.value = true
       if(clampedArrivalValue.value != '' && clampedArrivalValue.value!= undefined) {
@@ -112,18 +117,31 @@ const CheckChange = (val: any) => {
     } else {
       isArrival.value = false
       DepartureList.value.Arrival = ''
+      clampedArrivalValue.value = ''
+      ArrivalSelect.value = ''
     }
   }
   emit('ChangeCheckRules', DepartureList.value)
 }
+const handleCheckboxClick = (event:any) => {
+  // 判断点击的是否为复选框输入区域
+  const isCheckboxInput = event.target.closest('.el-checkbox__inner')
+  const isCheckboxTitle = event.target.closest('.titlecheckbox')
+  if (!isCheckboxInput) {
+    // 阻止默认切换行为
+    if(!isCheckboxTitle) {
+      event.preventDefault()
+    }
+  }
+}
 const changedeparture = (val: any) => {
-  if(props.Title != 'Air shipments') {
+  if(props.Title != 'Air Shipments') {
     DepartureSelect.value = 'Day(s)'
     ArrivalSelect.value = 'Day(s)'
   }
   if (val == 'Departure') {
     if(clampedValue.value != '' && clampedValue.value!= undefined) {
-      Departurestr = 'Departure Delayed' + ' ≥ ' + clampedValue.value + ' ' + DepartureSelect.value
+      Departurestr = 'Departure Delayed (ATD-ETD)' + ' ≥ ' + clampedValue.value + ' ' + DepartureSelect.value
     } else {
       Departurestr = ''
     }
@@ -156,7 +174,7 @@ const changedeparture = (val: any) => {
 }
 const closeDelayed = (val: any) => {
   if (val.includes('Departure')) {
-    OceanCheckedList.value.splice(OceanCheckedList.value.indexOf('Departure Delayed'), 1)
+    OceanCheckedList.value.splice(OceanCheckedList.value.indexOf('Departure Delayed (ATD-ETD)'), 1)
     DepartureList.value.Departure = ''
     isDeparture.value = false
     DepartureTime.value = ''
@@ -199,21 +217,22 @@ defineExpose({
         </template>
         <div class="oceanCheckbox">
           <el-checkbox-group @change="CheckChange" v-model="OceanCheckedList">
-            <el-checkbox class="delayedType" value="Departure Delayed">
-              <div>Departure Delayed (ATD-ETD)</div>
+            <el-checkbox @click="handleCheckboxClick($event)" class="delayedType" value="Departure Delayed">
+              <div class="titlecheckbox">Departure Delayed (ATD-ETD)</div>
               <div v-if="isDeparture" class="flex" style="margin-top: 16px">
                 <span class="delayedTitle">Delayed Time</span>
-                <span class="delayedIcon">></span>
+                <span class="delayedIcon">≥</span>
                 <el-input
                   v-model="clampedValue"
                   class="input-with-select"
                   @input="changedeparture('Departure')"
-                  v-if="props.Title == 'Air shipments'" 
+                  v-if="props.Title == 'Air Shipments'" 
                 >
                   <template #append>
                     <el-select
                       v-model="DepartureSelect"
                       placeholder="Select"
+                      class="arrivalselect"
                       @change="changedeparture('Departure')"
                     >
                       <el-option label="Day(s)" value="Day(s)" />
@@ -229,24 +248,25 @@ defineExpose({
                 >
                 </el-input>
                 <div
-                v-if="props.Title != 'Air shipments'" class="Days">Day(s)</div>
+                v-if="props.Title != 'Air Shipments'" class="Days">Day(s)</div>
               </div>
             </el-checkbox>
-            <el-checkbox class="delayedType" value="Arrival Delayed (ATA-ETA)">
-              <div>Arrival Delayed (ATA-ETA)</div>
+            <el-checkbox class="delayedType" @click="handleCheckboxClick($event)"  value="Arrival Delayed (ATA-ETA)">
+              <div class="titlecheckbox">Arrival Delayed (ATA-ETA)</div>
               <div v-if="isArrival" class="flex" style="margin-top: 16px">
                 <span class="delayedTitle">Delayed Time</span>
-                <span class="delayedIcon">></span>
+                <span class="delayedIcon">≥</span>
                 <el-input
                   v-model="clampedArrivalValue"
                   @input="changedeparture('Arrival')"
                   class="input-with-select"
-                  v-if="props.Title == 'Air shipments'"
+                  v-if="props.Title == 'Air Shipments'"
                 >
                   <template #append>
                     <el-select
                       v-model="ArrivalSelect"
                       placeholder="Select"
+                      class="arrivalselect"
                       @change="changedeparture('Arrival')"
                     >
                       <el-option label="Day(s)" value="Day(s)" />
@@ -261,7 +281,7 @@ defineExpose({
                   class="input-with-select1"
                 >
                 </el-input>
-                <div v-if="props.Title != 'Air shipments'" class="Days">Day(s)</div>
+                <div v-if="props.Title != 'Air Shipments'" class="Days">Day(s)</div>
               </div>
             </el-checkbox>
           </el-checkbox-group>

src/components/AddRules/src/components/ETDShipments.vue

@@ -63,12 +63,15 @@ const ETDETAList = ref({
 let ETDstr: any = ''
 let ETAstr: any = ''
 const CheckChange = (val: any) => {
-  if(props.Title != 'Air shipments') {
+  if(props.Title != 'Air Shipments') {
     ETASelect.value = 'Day(s)'
     ETDSelect.value = 'Day(s)'
   }
   if (val.includes('ETD')) {
     isETD.value = true
+    clampedETAValue.value = ''
+    ETARadio.value = ''
+    ETASelect.value = ''
     if(ETDstr.includes('all changes')) {
       ETDETAList.value.ETD = ETDstr
     } else {
@@ -92,10 +95,16 @@ const CheckChange = (val: any) => {
     } else {
       isETA.value = false
       ETDETAList.value.ETA = ''
+      clampedETAValue.value = ''
+      ETARadio.value = ''
+      ETASelect.value = ''
     }
   } else {
     isETD.value = false
     ETDETAList.value.ETD = ''
+    clampedValue.value = ''
+    ETDRadio.value = ''
+    ETDSelect.value = ''
     if (val.includes('ETA')) {
       isETA.value = true
       if(ETAstr.includes('all changes')) {
@@ -110,15 +119,19 @@ const CheckChange = (val: any) => {
     } else {
       isETA.value = false
       ETDETAList.value.ETA = ''
+      clampedETAValue.value = ''
+      ETARadio.value = ''
+      ETASelect.value = ''
     }
   }
   emit('ChangeCheckRules', ETDETAList.value)
 }
 const changeETDRadio = (val: any) => {
-  if(props.Title != 'Air shipments') {
+  if(props.Title != 'Air Shipments') {
     ETDSelect.value = 'Day(s)'
   }
   if (val == 1) {
+    clampedValue.value = ''
     ETDstr = 'ETD: Notify for all changes'
     ETDETAList.value.ETD = ETDstr
   } else if (val == 2) {
@@ -132,12 +145,13 @@ const changeETDRadio = (val: any) => {
   emit('ChangeCheckRules', ETDETAList.value)
 }
 const changeETARadio = (val: any) => {
-  if(props.Title != 'Air shipments') {
+  if(props.Title != 'Air Shipments') {
     ETASelect.value = 'Day(s)'
   }
   if (val == 1) {
     ETAstr = 'ETA: Notify for all changes'
     ETDETAList.value.ETA = ETAstr
+    clampedETAValue.value = ''
   } else if (val == 2) {
     ETAstr = 'ETA: Notify only when time difference ≥ ' + clampedETAValue.value + ' ' + ETASelect.value
     if (ETASelect.value != '' && clampedETAValue.value!= '' && clampedETAValue.value!= undefined) {
@@ -149,7 +163,7 @@ const changeETARadio = (val: any) => {
   emit('ChangeCheckRules', ETDETAList.value)
 }
 const changedeparture = (val: any) => {
-  if(props.Title != 'Air shipments') {
+  if(props.Title != 'Air Shipments') {
     ETDSelect.value = 'Day(s)'
     ETASelect.value = 'Day(s)'
   }
@@ -193,6 +207,20 @@ const changedeparture = (val: any) => {
   }
   emit('ChangeCheckRules', ETDETAList.value)
 }
+const handleCheckboxClick = (event:any) => {
+  // 判断点击的是否为复选框输入区域
+  const isCheckboxInput = event.target.closest('.el-checkbox__inner')
+  const isCheckboxTitle = event.target.closest('.titlecheckbox')
+  const isCheckboxRadio = event.target.closest('.radiocheckbox')
+  if (!isCheckboxInput) {
+    // 阻止默认切换行为
+    if(!isCheckboxTitle) {
+      if(!isCheckboxRadio) {
+        event.preventDefault()
+      }
+    }
+  }
+}
 const closeETD = (val: any) => {
   if (val.includes('ETD')) {
     OceanCheckedList.value.splice(OceanCheckedList.value.indexOf('ETD'), 1)
@@ -263,17 +291,17 @@ const clampedETAValue = computed({
         </template>
         <div class="oceanCheckbox">
           <el-checkbox-group @change="CheckChange" v-model="OceanCheckedList">
-            <el-checkbox class="delayedType" value="ETD">
-              <div>ETD</div>
+            <el-checkbox @click="handleCheckboxClick($event)" class="delayedType" value="ETD">
+              <div class="titlecheckbox">ETD</div>
               <div v-if="isETD" style="margin-top: 16px">
-                <el-radio-group v-model="ETDRadio" @change="changeETDRadio">
+                <el-radio-group class="radiocheckbox" v-model="ETDRadio" @change="changeETDRadio">
                   <el-radio value="1">Notify for all changes</el-radio>
                   <el-radio value="2">
                     <div class="flex">
                       Notify only when time difference
                       <span class="delayedIcon">≥</span>
                       <el-input
-                      v-if="props.Title == 'Air shipments'"
+                      v-if="props.Title == 'Air Shipments'"
                         v-model="clampedValue"
                         class="input-with-select"
                         @input="changedeparture('ETD')"
@@ -282,6 +310,7 @@ const clampedETAValue = computed({
                           <el-select
                             v-model="ETDSelect"
                             placeholder="Select"
+                            class="arrivalselect"
                             @change="changedeparture('ETD')"
                           >
                             <el-option label="Day(s)" value="Day(s)" />
@@ -297,23 +326,23 @@ const clampedETAValue = computed({
                       >
                       </el-input>
                       <div
-                      v-if="props.Title != 'Air shipments'" class="Days">Day(s)</div>
+                      v-if="props.Title != 'Air Shipments'" class="Days">Day(s)</div>
                     </div>
                   </el-radio>
                 </el-radio-group>
               </div>
             </el-checkbox>
-            <el-checkbox class="delayedType" value="ETA">
-              <div>ETA</div>
+            <el-checkbox @click="handleCheckboxClick($event)" class="delayedType" value="ETA">
+              <div class="titlecheckbox">ETA</div>
               <div v-if="isETA" style="margin-top: 16px">
-                <el-radio-group v-model="ETARadio" @change="changeETARadio">
+                <el-radio-group class="radiocheckbox" v-model="ETARadio" @change="changeETARadio">
                   <el-radio value="1">Notify for all changes</el-radio>
                   <el-radio value="2">
                     <div class="flex">
                       Notify only when time difference
                       <span class="delayedIcon">≥</span>
                       <el-input
-                      v-if="props.Title == 'Air shipments'"
+                      v-if="props.Title == 'Air Shipments'"
                         v-model="clampedETAValue"
                         class="input-with-select"
                         @input="changedeparture('ETA')"
@@ -322,6 +351,7 @@ const clampedETAValue = computed({
                           <el-select
                             v-model="ETASelect"
                             placeholder="Select"
+                            class="arrivalselect"
                             @change="changedeparture('ETA')"
                           >
                             <el-option label="Day(s)" value="Day(s)" />
@@ -337,7 +367,7 @@ const clampedETAValue = computed({
                       >
                       </el-input>
                       <div
-                      v-if="props.Title != 'Air shipments'" class="Days">Day(s)</div>
+                      v-if="props.Title != 'Air Shipments'" class="Days">Day(s)</div>
                     </div>
                   </el-radio>
                 </el-radio-group>

src/components/AddRules/src/components/NotiFrequency.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue'
 import moment from 'moment-timezone'
-import { defaultTimeZone } from '@/utils/timezone'
 
 const props = defineProps({
   FrequencyData: Object
@@ -46,59 +45,59 @@ const WeekDay = ref([
 const TimeZone = ref([
   {
     label: 'UTC-08',
-    value: 'UTC-08'
+    value: 'UTC-08:00'
   },
   {
     label: 'UTC-07',
-    value: 'UTC-07'
+    value: 'UTC-07:00'
   },
   {
     label: 'UTC-06',
-    value: 'UTC-06'
+    value: 'UTC-06:00'
   },
   {
     label: 'UTC-05',
-    value: 'UTC-05'
+    value: 'UTC-05:00'
   },
   {
     label: 'UTC-04',
-    value: 'UTC-04'
+    value: 'UTC-04:00'
   },
   {
     label: 'UTC-03',
-    value: 'UTC-03'
+    value: 'UTC-03:00'
   },
   {
     label: 'UTC-02',
-    value: 'UTC-02'
+    value: 'UTC-02:00'
   },
   {
     label: 'UTC-01',
-    value: 'UTC-01'
+    value: 'UTC-01:00'
   },
   {
     label: 'UTC-00',
-    value: 'UTC-00'
+    value: 'UTC-00:00'
   },
   {
     label: 'UTC+01',
-    value: 'UTC+01'
+    value: 'UTC+01:00'
   },
   {
     label: 'UTC+02',
-    value: 'UTC+02'
+    value: 'UTC+02:00'
   },
   {
     label: 'UTC+03',
-    value: 'UTC+03'
+    value: 'UTC+03:00'
   },
   {
     label: 'UTC+04',
-    value: 'UTC+04'
+    value: 'UTC+04:00'
   },
   {
     label: 'UTC+05',
-    value: 'UTC+05'
+    value: 'UTC+05:00'
   },
   {
     label: 'UTC+05:30',
@@ -106,37 +105,39 @@ const TimeZone = ref([
   },
   {
     label: 'UTC+06',
-    value: 'UTC+06'
+    value: 'UTC+06:00'
   },
   {
     label: 'UTC+07',
-    value: 'UTC+07'
+    value: 'UTC+07:00'
   },
   {
     label: 'UTC+08',
-    value: 'UTC+08'
+    value: 'UTC+08:00'
   },
   {
     label: 'UTC+09',
-    value: 'UTC+09'
+    value: 'UTC+09:00'
   },
   {
     label: 'UTC+10',
-    value: 'UTC+10'
+    value: 'UTC+10:00'
   },
   {
     label: 'UTC+11',
-    value: 'UTC+11'
+    value: 'UTC+11:00'
   },
   {
     label: 'UTC+12',
-    value: 'UTC+12'
+    value: 'UTC+12:00'
   }
 ])
 const TimeZoneDailySelect = ref()
 const TimeZoneWeeklySelect = ref()
-TimeZoneDailySelect.value = 'UTC' + moment().tz(moment.tz.guess()).format('Z').slice(0, 3)
-TimeZoneWeeklySelect.value = 'UTC' + moment().tz(moment.tz.guess()).format('Z').slice(0, 3)
+TimeZoneDailySelect.value = 'UTC' + moment().tz(moment.tz.guess()).format('Z')
+let defaultDailyTimeZone = TimeZoneDailySelect.value
+TimeZoneWeeklySelect.value = 'UTC' + moment().tz(moment.tz.guess()).format('Z')
+let defaultWeeklyTimeZone = TimeZoneDailySelect.value
 const isDaily = ref(false)
 const isWeekly = ref(false)
 let savesubscribeobj: any = {}
@@ -183,6 +184,8 @@ const ChangeFrequency = (val: any) => {
     DailyTime.value = ''
     WeeklyDay.value = ''
     WeeklyTime.value = ''
+    TimeZoneDailySelect.value  = defaultDailyTimeZone
+    TimeZoneWeeklySelect.value  = defaultWeeklyTimeZone
     str = 'Instant notification for each update'
     FrequencyList.value.push(str)
     savesubscribeobj.frequency_type = 'Instant'
@@ -192,8 +195,9 @@ const ChangeFrequency = (val: any) => {
     isWeekly.value = false
     WeeklyDay.value = ''
     WeeklyTime.value = ''
+    TimeZoneWeeklySelect.value  = defaultWeeklyTimeZone
     str = 'Daily, ' + DailyTime.value + ', ' + TimeZoneDailySelect.value
-    if (DailyTime.value != '' && TimeZoneDailySelect.value !== '') {
+    if (DailyTime.value != '' && DailyTime.value != undefined && TimeZoneDailySelect.value !== '') {
       FrequencyList.value.push(str)
     }
     savesubscribeobj.frequency_type = 'Daily'
@@ -204,8 +208,9 @@ const ChangeFrequency = (val: any) => {
     isDaily.value = false
     isWeekly.value = true
     DailyTime.value = ''
+    TimeZoneDailySelect.value  = defaultDailyTimeZone
     str = 'Weekly, ' + WeeklyDay.value + ', ' + WeeklyTime.value + ', ' + TimeZoneWeeklySelect.value
-    if (WeeklyDay.value != '' && WeeklyTime.value != '' && TimeZoneWeeklySelect.value !== '') {
+    if (WeeklyDay.value != '' && WeeklyTime.value != undefined && WeeklyTime.value != '' && TimeZoneWeeklySelect.value !== '') {
       FrequencyList.value.push(str)
     }
     savesubscribeobj.frequency_type = 'Weekly'
@@ -233,6 +238,8 @@ const ChangeFrequency = (val: any) => {
     DailyTime.value = ''
     WeeklyTime.value = ''
     WeeklyDay.value = ''
+    TimeZoneDailySelect.value  = defaultDailyTimeZone
+    TimeZoneWeeklySelect.value  = defaultWeeklyTimeZone
     delete savesubscribeobj.frequency_type
     delete savesubscribeobj.daily_time
     delete savesubscribeobj.daily_time_zone

src/components/CreateAddRules/src/CreateAddRules.vue

@@ -225,8 +225,8 @@ const ChangeDeayedRules = (val: any) => {
   DelayedDeparturedList.value = []
   if (val.Departure != '') {
     DelayedDeparturedList.value.push(val.Departure)
-    savesubscribeobj.ocean_atd_sub_etd = val.Departure.split(' ')[3]
-    savesubscribeobj.ocean_atd_sub_etd_unit = val.Departure.split(' ')[4]
+    savesubscribeobj.ocean_atd_sub_etd = val.Departure.split(' ')[4]
+    savesubscribeobj.ocean_atd_sub_etd_unit = val.Departure.split(' ')[5]
   } else {
     delete savesubscribeobj.ocean_atd_sub_etd
     delete savesubscribeobj.ocean_atd_sub_etd_unit
@@ -244,8 +244,8 @@ const ChangeAirRules = (val: any) => {
   DelayedAirdList.value = []
   if (val.Departure != '') {
     DelayedAirdList.value.push(val.Departure)
-    savesubscribeobj.air_atd_sub_etd = val.Departure.split(' ')[3]
-    savesubscribeobj.air_atd_sub_etd_unit = val.Departure.split(' ')[4]
+    savesubscribeobj.air_atd_sub_etd = val.Departure.split(' ')[4]
+    savesubscribeobj.air_atd_sub_etd_unit = val.Departure.split(' ')[5]
   } else {
     delete savesubscribeobj.air_atd_sub_etd
     delete savesubscribeobj.air_atd_sub_etd_unit
@@ -636,7 +636,7 @@ const Savesubscribe = () => {
         missingmessage.value += 'Time, '
       }
       if (OceanCheckList.value.length == 0 && AirCheckList.value.length == 0 ) {
-        missingmessage.value += 'Select Milstone, '
+        missingmessage.value += 'Select Milstones, '
       }
       if (MilFrequencyList.value.length == 0) {
         missingmessage.value += 'Notification Frequency, '
@@ -703,11 +703,12 @@ const Savesubscribe = () => {
   } else if (props.TitleType == 'Departure') {
     savesubscribeobj.rules_type = 'Departure/Arrival_Delay'
     if (
-      DelayedDeparturedList.value == undefined ||
-      DelayedDeparturedList.value.length == 0 ||
-      DelayedAirdList.value == undefined ||
+      DelayedDeparturedList.value == undefined  &&
+      DelayedAirdList.value == undefined || 
+      DelayedDeparturedList.value.length == 0 &&
       DelayedAirdList.value.length == 0 ||
       DepFrequencyList.value.length == 0 ||
+      DepMethodsList.value == undefined ||
       DepMethodsList.value.length == 0 ||
       createObj.Transportstr == '' ||
       createObj.Timestr == ''
@@ -718,11 +719,8 @@ const Savesubscribe = () => {
       if (createObj.Timestr == '') {
         missingmessage.value += 'Time, '
       }
-      if (DelayedDeparturedList.value == undefined || DelayedDeparturedList.value.length == 0) {
-        missingmessage.value += 'Ocean Shipments, '
-      }
-      if (DelayedAirdList.value == undefined || DelayedAirdList.value.length == 0) {
-        missingmessage.value += 'Air Shipments, '
+      if (DelayedDeparturedList.value.length == 0 && DelayedAirdList.value.length == 0 || DelayedDeparturedList.value == undefined && DelayedAirdList.value == undefined) {
+        missingmessage.value += 'Select Delayed Shipments, '
       }
       if (DepFrequencyList.value.length == 0) {
         missingmessage.value += 'Notification Frequency, '
@@ -733,7 +731,22 @@ const Savesubscribe = () => {
       missingmessage.value = missingmessage.value.substring(0, missingmessage.value.length - 2)
       UnableSaveVisible.value = true
     } else {
-      str = DelayedDeparturedList.value.join(';\n') + ';\n' + DelayedAirdList.value.join(';\n')
+      if(DelayedDeparturedList.value.length == 0) {
+        str =
+        'Air: ' +
+        DelayedAirdList.value.join(',')
+      } else if(DelayedAirdList.value.length == 0) {
+        str =
+        'Ocean: ' +
+        DelayedDeparturedList.value.join(',')
+      } else {
+        str =
+        'Ocean: ' +
+        DelayedDeparturedList.value.join(',') +
+        ';\nAir: ' +
+        DelayedAirdList.value.join(',') +
+        ';'
+      }
       savesubscribeobj.event_details = str
       SaveSuceessful()
     }
@@ -741,9 +754,9 @@ const Savesubscribe = () => {
     savesubscribeobj.rules_type = 'ETD/ETA_Change'
     if (
       ETDOceanList.value == undefined ||
+      ETDAirList.value == undefined &&
       ETDOceanList.value.length == 0 ||
-      ETDAirList.value == undefined ||
-      ETDAirList.value.length == 0 ||
+      ETDAirList.value.length == 0 &&
       ETDFrequencyList.value.length == 0 ||
       ETDMethodsList.value.length == 0 ||
       createObj.Transportstr == '' ||
@@ -755,11 +768,8 @@ const Savesubscribe = () => {
       if (createObj.Timestr == '') {
         missingmessage.value += 'Time, '
       }
-      if (ETDOceanList.value == undefined || ETDOceanList.value.length == 0) {
-        missingmessage.value += 'Ocean Shipments, '
-      }
-      if (ETDAirList.value == undefined || ETDAirList.value.length == 0) {
-        missingmessage.value += 'Air Shipments, '
+      if (ETDOceanList.value == undefined && ETDAirList.value == undefined || ETDOceanList.value.length == 0 && ETDAirList.value.length) {
+        missingmessage.value += 'Select Time Type, '
       }
       if (ETDFrequencyList.value.length == 0) {
         missingmessage.value += 'Notification Frequency, '
@@ -770,7 +780,22 @@ const Savesubscribe = () => {
       missingmessage.value = missingmessage.value.substring(0, missingmessage.value.length - 2)
       UnableSaveVisible.value = true
     } else {
-      str = ETDOceanList.value.join(';\n') + ';\n' + ETDAirList.value.join(';\n')
+      if(ETDOceanList.value.length == 0) {
+        str =
+        '[Air]' +
+        ETDAirList.value.join(',')
+      } else if(ETDAirList.value.length == 0) {
+        str =
+        '[Ocean]' +
+        ETDOceanList.value.join(',')
+      } else {
+        str =
+        '[Ocean]' +
+        ETDOceanList.value.join(',') +
+        ';\n[Air]' +
+        ETDAirList.value.join(',') +
+        ';'
+      }
       savesubscribeobj.event_details = str
       SaveSuceessful()
     }
@@ -899,7 +924,7 @@ defineExpose({
             </template>
             <div>
               <RulesShipments
-                Title="Ocean shipments"
+                Title="Ocean Shipments"
                 ref="MilOceanref"
                 @ChangeCheckRules="ChangeCheckOceanRules"
                 :CheckboxList="MilestoneOceanListInit"
@@ -908,7 +933,7 @@ defineExpose({
             </div>
             <div>
               <RulesShipments
-                Title="Air shipments"
+                Title="Air Shipments"
                 ref="MilAirref"
                 @ChangeCheckRules="ChangeCheckAirRules"
                 :CheckboxList="MilestoneAirListInit"
@@ -937,7 +962,7 @@ defineExpose({
             </template>
             <div>
               <RulesShipments
-                Title="Ocean shipments"
+                Title="Ocean Shipments"
                 ref="ContainerOcean"
                 @ChangeCheckRules="ChangeContainerRules"
                 :CheckboxList="ContainerOceanListInit"
@@ -966,7 +991,7 @@ defineExpose({
             </template>
             <div>
               <DelayedType
-                Title="Ocean shipments"
+                Title="Ocean Shipments"
                 ref="OceanDelayed"
                 :DelayedData="DelayedDataInit"
                 @ChangeCheckRules="ChangeDeayedRules"
@@ -974,7 +999,7 @@ defineExpose({
             </div>
             <div>
               <DelayedType
-                Title="Air shipments"
+                Title="Air Shipments"
                 ref="AirDelayed"
                 :DelayedData="DelayedDataInitAir"
                 @ChangeCheckRules="ChangeAirRules"
@@ -997,12 +1022,12 @@ defineExpose({
                     ></use>
                   </svg>
                 </span>
-                <span class="stars_red">*</span>Select Delayed Type
+                <span class="stars_red">*</span>Select Time Type
               </div>
             </template>
             <div>
               <ETDShipments
-                Title="Ocean shipments"
+                Title="Ocean Shipments"
                 ref="OceanETD"
                 :ETDData="OceanETDInit"
                 @ChangeCheckRules="ChangeETDOceanRules"
@@ -1010,7 +1035,7 @@ defineExpose({
             </div>
             <div>
               <ETDShipments
-                Title="Air shipments"
+                Title="Air Shipments"
                 ref="AirETD"
                 :ETDData="AirETDInit"
                 @ChangeCheckRules="ChangeETDAirRules"

src/components/CreateAddRules/src/components/DelayedType.vue

@@ -74,8 +74,10 @@ const clampedArrivalValue = computed({
 const CheckChange = (val: any) => {
   if (val.includes('Departure Delayed')) {
     isDeparture.value = true
+    clampedArrivalValue.value = ''
+    ArrivalSelect.value = ''
     if(clampedValue.value != '' && clampedValue.value!= undefined) {
-      Departurestr = 'Departure Delayed' + ' ≥ ' + clampedValue.value + ' ' + DepartureSelect.value
+      Departurestr = 'Departure Delayed (ATD-ETD)' + ' ≥ ' + clampedValue.value + ' ' + DepartureSelect.value
     } else {
       Departurestr = ''
     }
@@ -95,10 +97,14 @@ const CheckChange = (val: any) => {
     } else {
       isArrival.value = false
       DepartureList.value.Arrival = ''
+      clampedArrivalValue.value = ''
+      ArrivalSelect.value = ''
     }
   } else {
     isDeparture.value = false
     DepartureList.value.Departure = ''
+    clampedValue.value = ''
+    DepartureSelect.value = ''
     if (val.includes('Arrival Delayed (ATA-ETA)')) {
       isArrival.value = true
       if(clampedArrivalValue.value != '' && clampedArrivalValue.value!= undefined) {
@@ -112,18 +118,31 @@ const CheckChange = (val: any) => {
     } else {
       isArrival.value = false
       DepartureList.value.Arrival = ''
+      clampedArrivalValue.value = ''
+      ArrivalSelect.value = ''
     }
   }
   emit('ChangeCheckRules', DepartureList.value)
 }
+const handleCheckboxClick = (event:any) => {
+  // 判断点击的是否为复选框输入区域
+  const isCheckboxInput = event.target.closest('.el-checkbox__inner')
+  const isCheckboxTitle = event.target.closest('.titlecheckbox')
+  if (!isCheckboxInput) {
+    // 阻止默认切换行为
+    if(!isCheckboxTitle) {
+      event.preventDefault()
+    }
+  }
+}
 const changedeparture = (val: any) => {
-  if(props.Title != 'Air shipments') {
+  if(props.Title != 'Air Shipments') {
     DepartureSelect.value = 'Day(s)'
     ArrivalSelect.value = 'Day(s)'
   }
   if (val == 'Departure') {
     if(clampedValue.value != '' && clampedValue.value!= undefined) {
-      Departurestr = 'Departure Delayed' + ' ≥ ' + clampedValue.value + ' ' + DepartureSelect.value
+      Departurestr = 'Departure Delayed (ATD-ETD)' + ' ≥ ' + clampedValue.value + ' ' + DepartureSelect.value
     } else {
       Departurestr = ''
     }
@@ -156,7 +175,7 @@ const changedeparture = (val: any) => {
 }
 const closeDelayed = (val: any) => {
   if (val.includes('Departure')) {
-    OceanCheckedList.value.splice(OceanCheckedList.value.indexOf('Departure Delayed'), 1)
+    OceanCheckedList.value.splice(OceanCheckedList.value.indexOf('Departure Delayed (ATD-ETD)'), 1)
     DepartureList.value.Departure = ''
     isDeparture.value = false
     DepartureTime.value = ''
@@ -199,21 +218,22 @@ defineExpose({
         </template>
         <div class="oceanCheckbox">
           <el-checkbox-group @change="CheckChange" v-model="OceanCheckedList">
-            <el-checkbox class="delayedType" value="Departure Delayed">
-              <div>Departure Delayed (ATD-ETD)</div>
+            <el-checkbox @click="handleCheckboxClick($event)"  class="delayedType" value="Departure Delayed">
+              <div class="titlecheckbox">Departure Delayed (ATD-ETD)</div>
               <div v-if="isDeparture" class="flex" style="margin-top: 16px">
                 <span class="delayedTitle">Delayed Time</span>
-                <span class="delayedIcon">></span>
+                <span class="delayedIcon">≥</span>
                 <el-input
                   v-model="clampedValue"
                   class="input-with-select"
                   @input="changedeparture('Departure')"
-                  v-if="props.Title == 'Air shipments'" 
+                  v-if="props.Title == 'Air Shipments'" 
                 >
                   <template #append>
                     <el-select
                       v-model="DepartureSelect"
                       placeholder="Select"
+                      class="arrivalselect"
                       @change="changedeparture('Departure')"
                     >
                       <el-option label="Day(s)" value="Day(s)" />
@@ -229,24 +249,25 @@ defineExpose({
                 >
                 </el-input>
                 <div
-                v-if="props.Title != 'Air shipments'" class="Days">Day(s)</div>
+                v-if="props.Title != 'Air Shipments'" class="Days">Day(s)</div>
               </div>
             </el-checkbox>
-            <el-checkbox class="delayedType" value="Arrival Delayed (ATA-ETA)">
-              <div>Arrival Delayed (ATA-ETA)</div>
+            <el-checkbox @click="handleCheckboxClick($event)"  class="delayedType" value="Arrival Delayed (ATA-ETA)">
+              <div class="titlecheckbox">Arrival Delayed (ATA-ETA)</div>
               <div v-if="isArrival" class="flex" style="margin-top: 16px">
                 <span class="delayedTitle">Delayed Time</span>
-                <span class="delayedIcon">></span>
+                <span class="delayedIcon">≥</span>
                 <el-input
                   v-model="clampedArrivalValue"
                   @input="changedeparture('Arrival')"
                   class="input-with-select"
-                  v-if="props.Title == 'Air shipments'"
+                  v-if="props.Title == 'Air Shipments'"
                 >
                   <template #append>
                     <el-select
                       v-model="ArrivalSelect"
                       placeholder="Select"
+                      class="arrivalselect"
                       @change="changedeparture('Arrival')"
                     >
                       <el-option label="Day(s)" value="Day(s)" />
@@ -261,7 +282,7 @@ defineExpose({
                   class="input-with-select1"
                 >
                 </el-input>
-                <div v-if="props.Title != 'Air shipments'" class="Days">Day(s)</div>
+                <div v-if="props.Title != 'Air Shipments'" class="Days">Day(s)</div>
               </div>
             </el-checkbox>
           </el-checkbox-group>

src/components/CreateAddRules/src/components/ETDShipments.vue

@@ -63,12 +63,15 @@ const ETDETAList = ref({
 let ETDstr: any = ''
 let ETAstr: any = ''
 const CheckChange = (val: any) => {
-  if(props.Title != 'Air shipments') {
+  if(props.Title != 'Air Shipments') {
     ETASelect.value = 'Day(s)'
     ETDSelect.value = 'Day(s)'
   }
   if (val.includes('ETD')) {
     isETD.value = true
+    clampedETAValue.value = ''
+    ETARadio.value = ''
+    ETASelect.value = ''
     if (ETDSelect.value != ''  && clampedValue.value!= '' && clampedValue.value!= undefined) {
       ETDETAList.value.ETD = ETDstr
     } else {
@@ -84,10 +87,16 @@ const CheckChange = (val: any) => {
     } else {
       isETA.value = false
       ETDETAList.value.ETA = ''
+      clampedETAValue.value = ''
+      ETARadio.value = ''
+      ETASelect.value = ''
     }
   } else {
     isETD.value = false
     ETDETAList.value.ETD = ''
+    clampedValue.value = ''
+    ETDRadio.value = ''
+    ETDSelect.value = ''
     if (val.includes('ETA')) {
       isETA.value = true
       if (ETASelect.value != ''  && clampedETAValue.value!= '' && clampedETAValue.value!= undefined) {
@@ -98,12 +107,15 @@ const CheckChange = (val: any) => {
     } else {
       isETA.value = false
       ETDETAList.value.ETA = ''
+      clampedETAValue.value = ''
+      ETARadio.value = ''
+      ETASelect.value = ''
     }
   }
   emit('ChangeCheckRules', ETDETAList.value)
 }
 const changeETDRadio = (val: any) => {
-  if(props.Title != 'Air shipments') {
+  if(props.Title != 'Air Shipments') {
     ETDSelect.value = 'Day(s)'
   }
   if (val == 1) {
@@ -120,7 +132,7 @@ const changeETDRadio = (val: any) => {
   emit('ChangeCheckRules', ETDETAList.value)
 }
 const changeETARadio = (val: any) => {
-  if(props.Title != 'Air shipments') {
+  if(props.Title != 'Air Shipments') {
     ETASelect.value = 'Day(s)'
   }
   if (val == 1) {
@@ -137,7 +149,7 @@ const changeETARadio = (val: any) => {
   emit('ChangeCheckRules', ETDETAList.value)
 }
 const changedeparture = (val: any) => {
-  if(props.Title != 'Air shipments') {
+  if(props.Title != 'Air Shipments') {
     ETDSelect.value = 'Day(s)'
     ETASelect.value = 'Day(s)'
   }
@@ -181,6 +193,20 @@ const changedeparture = (val: any) => {
   }
   emit('ChangeCheckRules', ETDETAList.value)
 }
+const handleCheckboxClick = (event:any) => {
+  // 判断点击的是否为复选框输入区域
+  const isCheckboxInput = event.target.closest('.el-checkbox__inner')
+  const isCheckboxTitle = event.target.closest('.titlecheckbox')
+  const isCheckboxRadio = event.target.closest('.radiocheckbox')
+  if (!isCheckboxInput) {
+    // 阻止默认切换行为
+    if(!isCheckboxTitle) {
+      if(!isCheckboxRadio) {
+        event.preventDefault()
+      }
+    }
+  }
+}
 const closeETD = (val: any) => {
   if (val.includes('ETD')) {
     OceanCheckedList.value.splice(OceanCheckedList.value.indexOf('ETD'), 1)
@@ -251,17 +277,17 @@ const clampedETAValue = computed({
         </template>
         <div class="oceanCheckbox">
           <el-checkbox-group @change="CheckChange" v-model="OceanCheckedList">
-            <el-checkbox class="delayedType" value="ETD">
-              <div>ETD</div>
+            <el-checkbox @click="handleCheckboxClick($event)" class="delayedType" value="ETD">
+              <div class="titlecheckbox">ETD</div>
               <div v-if="isETD" style="margin-top: 16px">
-                <el-radio-group v-model="ETDRadio" @change="changeETDRadio">
+                <el-radio-group class="radiocheckbox" v-model="ETDRadio" @change="changeETDRadio">
                   <el-radio value="1">Notify for all changes</el-radio>
                   <el-radio value="2">
                     <div class="flex">
                       Notify only when time difference
                       <span class="delayedIcon">≥</span>
                       <el-input
-                      v-if="props.Title == 'Air shipments'"
+                        v-if="props.Title == 'Air Shipments'"
                         v-model="clampedValue"
                         class="input-with-select"
                         @input="changedeparture('ETD')"
@@ -270,6 +296,7 @@ const clampedETAValue = computed({
                           <el-select
                             v-model="ETDSelect"
                             placeholder="Select"
+                            class="arrivalselect"
                             @change="changedeparture('ETD')"
                           >
                             <el-option label="Day(s)" value="Day(s)" />
@@ -285,23 +312,23 @@ const clampedETAValue = computed({
                       >
                       </el-input>
                       <div
-                      v-if="props.Title != 'Air shipments'" class="Days">Day(s)</div>
+                      v-if="props.Title != 'Air Shipments'" class="Days">Day(s)</div>
                     </div>
                   </el-radio>
                 </el-radio-group>
               </div>
             </el-checkbox>
-            <el-checkbox class="delayedType" value="ETA">
-              <div>ETA</div>
+            <el-checkbox class="delayedType" @click="handleCheckboxClick($event)"  value="ETA">
+              <div class="titlecheckbox">ETA</div>
               <div v-if="isETA" style="margin-top: 16px">
-                <el-radio-group v-model="ETARadio" @change="changeETARadio">
+                <el-radio-group class="radiocheckbox" v-model="ETARadio" @change="changeETARadio">
                   <el-radio value="1">Notify for all changes</el-radio>
                   <el-radio value="2">
                     <div class="flex">
                       Notify only when time difference
                       <span class="delayedIcon">≥</span>
                       <el-input
-                      v-if="props.Title == 'Air shipments'"
+                      v-if="props.Title == 'Air Shipments'"
                         v-model="clampedETAValue"
                         class="input-with-select"
                         @input="changedeparture('ETA')"
@@ -310,6 +337,7 @@ const clampedETAValue = computed({
                           <el-select
                             v-model="ETASelect"
                             placeholder="Select"
+                            class="arrivalselect"
                             @change="changedeparture('ETA')"
                           >
                             <el-option label="Day(s)" value="Day(s)" />
@@ -325,7 +353,7 @@ const clampedETAValue = computed({
                       >
                       </el-input>
                       <div
-                      v-if="props.Title != 'Air shipments'" class="Days">Day(s)</div>
+                      v-if="props.Title != 'Air Shipments'" class="Days">Day(s)</div>
                     </div>
                   </el-radio>
                 </el-radio-group>

src/components/CreateAddRules/src/components/NotiFrequency.vue

@@ -44,61 +44,61 @@ const WeekDay = ref([
   }
 ])
 const TimeZone = ref([
-  {
+{
     label: 'UTC-08',
-    value: 'UTC-08'
+    value: 'UTC-08:00'
   },
   {
     label: 'UTC-07',
-    value: 'UTC-07'
+    value: 'UTC-07:00'
   },
   {
     label: 'UTC-06',
-    value: 'UTC-06'
+    value: 'UTC-06:00'
   },
   {
     label: 'UTC-05',
-    value: 'UTC-05'
+    value: 'UTC-05:00'
   },
   {
     label: 'UTC-04',
-    value: 'UTC-04'
+    value: 'UTC-04:00'
   },
   {
     label: 'UTC-03',
-    value: 'UTC-03'
+    value: 'UTC-03:00'
   },
   {
     label: 'UTC-02',
-    value: 'UTC-02'
+    value: 'UTC-02:00'
   },
   {
     label: 'UTC-01',
-    value: 'UTC-01'
+    value: 'UTC-01:00'
   },
   {
     label: 'UTC-00',
-    value: 'UTC-00'
+    value: 'UTC-00:00'
   },
   {
     label: 'UTC+01',
-    value: 'UTC+01'
+    value: 'UTC+01:00'
   },
   {
     label: 'UTC+02',
-    value: 'UTC+02'
+    value: 'UTC+02:00'
   },
   {
     label: 'UTC+03',
-    value: 'UTC+03'
+    value: 'UTC+03:00'
   },
   {
     label: 'UTC+04',
-    value: 'UTC+04'
+    value: 'UTC+04:00'
   },
   {
     label: 'UTC+05',
-    value: 'UTC+05'
+    value: 'UTC+05:00'
   },
   {
     label: 'UTC+05:30',
@@ -106,37 +106,39 @@ const TimeZone = ref([
   },
   {
     label: 'UTC+06',
-    value: 'UTC+06'
+    value: 'UTC+06:00'
   },
   {
     label: 'UTC+07',
-    value: 'UTC+07'
+    value: 'UTC+07:00'
   },
   {
     label: 'UTC+08',
-    value: 'UTC+08'
+    value: 'UTC+08:00'
   },
   {
     label: 'UTC+09',
-    value: 'UTC+09'
+    value: 'UTC+09:00'
   },
   {
     label: 'UTC+10',
-    value: 'UTC+10'
+    value: 'UTC+10:00'
   },
   {
     label: 'UTC+11',
-    value: 'UTC+11'
+    value: 'UTC+11:00'
   },
   {
     label: 'UTC+12',
-    value: 'UTC+12'
+    value: 'UTC+12:00'
   }
 ])
 const TimeZoneDailySelect = ref()
 const TimeZoneWeeklySelect = ref()
-TimeZoneDailySelect.value = 'UTC' + moment().tz(moment.tz.guess()).format('Z').slice(0, 3)
-TimeZoneWeeklySelect.value = 'UTC' + moment().tz(moment.tz.guess()).format('Z').slice(0, 3)
+TimeZoneDailySelect.value = 'UTC' + moment().tz(moment.tz.guess()).format('Z')
+let defaultDailyTimeZone = TimeZoneDailySelect.value
+TimeZoneWeeklySelect.value = 'UTC' + moment().tz(moment.tz.guess()).format('Z')
+let defaultWeeklyTimeZone = TimeZoneDailySelect.value
 const isDaily = ref(false)
 const isWeekly = ref(false)
 let savesubscribeobj: any = {}
@@ -183,6 +185,8 @@ const ChangeFrequency = (val: any) => {
     DailyTime.value = ''
     WeeklyDay.value = ''
     WeeklyTime.value = ''
+    TimeZoneDailySelect.value  = defaultDailyTimeZone
+    TimeZoneWeeklySelect.value  = defaultWeeklyTimeZone
     str = 'Instant notification for each update'
     FrequencyList.value.push(str)
     savesubscribeobj.frequency_type = 'Instant'
@@ -192,8 +196,9 @@ const ChangeFrequency = (val: any) => {
     isWeekly.value = false
     WeeklyDay.value = ''
     WeeklyTime.value = ''
+    TimeZoneDailySelect.value  = defaultDailyTimeZone
     str = 'Daily, ' + DailyTime.value + ', ' + TimeZoneDailySelect.value
-    if (DailyTime.value != '' && TimeZoneDailySelect.value !== '') {
+    if (DailyTime.value != '' && DailyTime.value != undefined && TimeZoneDailySelect.value !== '') {
       FrequencyList.value.push(str)
     }
     savesubscribeobj.frequency_type = 'Daily'
@@ -204,8 +209,9 @@ const ChangeFrequency = (val: any) => {
     isDaily.value = false
     isWeekly.value = true
     DailyTime.value = ''
+    TimeZoneDailySelect.value  = defaultDailyTimeZone
     str = 'Weekly, ' + WeeklyDay.value + ', ' + WeeklyTime.value + ', ' + TimeZoneWeeklySelect.value
-    if (WeeklyDay.value != '' && WeeklyTime.value != '' && TimeZoneWeeklySelect.value !== '') {
+    if (WeeklyDay.value != '' && WeeklyTime.value != undefined && WeeklyTime.value != '' && TimeZoneWeeklySelect.value !== '') {
       FrequencyList.value.push(str)
     }
     savesubscribeobj.frequency_type = 'Weekly'
@@ -233,6 +239,8 @@ const ChangeFrequency = (val: any) => {
     DailyTime.value = ''
     WeeklyTime.value = ''
     WeeklyDay.value = ''
+    TimeZoneDailySelect.value  = defaultDailyTimeZone
+    TimeZoneWeeklySelect.value  = defaultWeeklyTimeZone
     delete savesubscribeobj.frequency_type
     delete savesubscribeobj.daily_time
     delete savesubscribeobj.daily_time_zone

src/components/CreateAddRules/src/components/ShipmentRange.vue

@@ -342,8 +342,8 @@ defineExpose({
                   <el-radio-button label="Past 30 days" value="Past 30 days" />
                   <el-radio-button label="Customize" value="Customize" />
                 </el-radio-group>
-                <div class="flex" style="align-items: end;margin-bottom: 8.5px;flex-wrap: wrap;">
-                  <div>
+                <div class="flex" style="align-items: end;margin: 0 8px 8px 0;flex-wrap: wrap;">
+                  <div class="date_flex">
                     <div class="time_title">Start Date</div>
                     <div class="flex">
                       <div class="currentTime">Current time minus</div>
@@ -357,7 +357,7 @@ defineExpose({
                     </div>
                   </div>
                   <div class="To">To</div>
-                  <div>
+                  <div class="date_flex">
                     <div class="time_title">End Date</div>
                     <div class="flex">
                       <div class="currentTime">Current time plus</div>

src/router/index.ts

@@ -42,6 +42,14 @@ const router = createRouter({
             activeMenu: '/tracking'
           }
         },
+        {
+          path: '/shipment/detail',
+          name: 'Shipment Detail',
+          component: () => import('../views/Tracking/src/components/TrackingDetail'),
+          meta: {
+            activeMenu: '/tracking'
+          }
+        },
         {
           path: '/tracking/add-vgm',
           name: 'Add VGM',
@@ -107,6 +115,11 @@ const router = createRouter({
           name: 'Monitoring Settings',
           component: () => import('../views/SystemSettings')
         },
+        {
+          path: '/SystemSettings',
+          name: 'System Settings',
+          component: () => import('../views/SystemSettings')
+        },
         {
           path: '/SystemSettings/createnewrule',
           name: 'Create New Rule',

src/stores/modules/breadCrumb.ts

@@ -27,6 +27,8 @@ export const useBreadCrumb = defineStore('breadCrumb', {
   actions: {
     setRouteList(toRoute: any) {
       const index = this.routeList.findIndex((item) => item.label === toRoute.name)
+      console.log(this.routeList)
+      console.log(toRoute.name)
       if (index !== -1) {
         this.routeList.splice(index + 1)
       } else if (toRoute.name === 'Public Tracking Detail') {
@@ -55,6 +57,19 @@ export const useBreadCrumb = defineStore('breadCrumb', {
             query: toRoute.query
           }
         ]
+      } else if (toRoute.name === 'Shipment Detail') {
+        this.routeList = [
+          {
+            label: 'System Settings',
+            path: '/SystemSettings',
+            query: ''
+          },
+          {
+            label: 'Shipment Detail',
+            path: '/shipment/detail',
+            query: toRoute.query
+          }
+        ]
       } else if (toRoute.name && whiteList.includes(toRoute.name)) {
         this.routeList.push({
           label: toRoute?.meta?.breadName || toRoute.name,

src/views/SystemSettings/src/components/MonitoringTable/src/MonitoringTable.vue

@@ -210,7 +210,7 @@ onMounted(() => {
         <el-popover trigger="click" :visible="row.visible" placement="left" :width="480">
           <div class="delete_title">
             <span class="font_family icon_alert icon-icon_tipsfilled_b"></span>
-            Delete Rules
+            Delete Rule
           </div>
           <p class="delete_content">Are you sure to delete this notification event?</p>
           <div style="text-align: right; margin: 0; padding: 8px">

src/views/SystemSettings/src/components/SettingTable/src/SettingTable.vue

@@ -108,12 +108,12 @@ const handleDelete = (row: any) => {
 
 // 点击link字段
 const handleLinkClick = (row: any) => {
-  console.log(row)
   router.push({
-      path: '/tracking/detail',
-      query: { a: row.__serial_no, _schemas: row._schemas }
-    })
-    visitedRowState.setTrackingTableData(row['__serial_no'])
+    path: '/shipment/detail',
+    query: { a: row.__serial_no, _schemas: row._schemas }
+  })
+  sessionStorage.setItem('activeTab', 'Subscribe Notifications')
+  visitedRowState.setTrackingTableData(row['__serial_no'])
 }
 
 onMounted(() => {
@@ -163,7 +163,7 @@ const getpaginationTableData = () => {
         <el-popover :visible="row.visible" placement="left" :width="480">
           <div class="delete_title">
             <span class="font_family icon_alert icon-icon_tipsfilled_b"></span>
-            Delete Rules
+            Delete Rule
           </div>
           <p class="delete_content">Are you sure to delete this notification event?</p>
           <div style="text-align: right; margin: 0; padding: 8px">

src/views/Tracking/src/components/TrackingTable/src/TrackingTable.vue

@@ -124,7 +124,7 @@ const assignTableData = (data: any) => {
   TagsList.value = data.tagsList
   tempSearch.value = data.tmp_search
   canEdiVgm.value = data.canEdiVgm
-  if (canEdiVgm.value && trackingTable.value.columns.length > 0) {
+  if (trackingTable.value.columns.length > 0) {
     const index = trackingTable.value.columns.findIndex((item: any) => item.title === 'Action')
     if (index === -1) {
       trackingTable.value.columns.push({