Merge branch 'dev' of United_Software/k_online_ui into test

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

@@ -266,9 +266,9 @@ defineExpose({
 <template>
   <div style="margin-top: 11px">
     <el-radio-group v-model="radio" @change="ChangeFrequency">
-      <el-radio :value="1" v-if="user_type != null && user_type != 'customer'"
+      <!-- <el-radio :value="1" v-if="user_type != null && user_type != 'customer'"
         >Instant notification for each update</el-radio
-      >
+      > -->
       <el-radio :value="2">
         <div>Daily Summary</div>
         <div class="Daily" v-if="isDaily">

src/components/CreateAddRules/src/CreateAddRules.vue

@@ -266,15 +266,19 @@ const changecheckCreateRulesMilestone = (val: any, value: any) => {
   savesubscribeobj.shipment_transport_mode = value
   savesubscribeobj.shipment_details = createListMilestone.value.join(';\n')
 }
-const ChangeCheckTimeRulesMilestone = (val: any, time: any) => {
+const ChangeCheckTimeRulesMilestone = (val: any, time: any, timeend :any) => {
   createListMilestone.value = []
   createObj.Timestr = val
   if (val.includes('ETD')) {
-    savesubscribeobj.shipment_etd_limit = time
+    savesubscribeobj.shipment_etd_limit_from = time
+    savesubscribeobj.shipment_etd_limit = timeend
+    savesubscribeobj.shipment_eta_limit_from = ''
     savesubscribeobj.shipment_eta_limit = ''
   }
   if (val.includes('ETA')) {
-    savesubscribeobj.shipment_eta_limit = time
+    savesubscribeobj.shipment_eta_limit_from = time
+    savesubscribeobj.shipment_eta_limit = timeend
+    savesubscribeobj.shipment_etd_limit_from = ''
     savesubscribeobj.shipment_etd_limit = ''
   }
   if (createObj.Transportstr != '') {
@@ -297,15 +301,19 @@ const changecheckCreateRulesContainer = (val: any, value: any) => {
   savesubscribeobj.shipment_transport_mode = value
   savesubscribeobj.shipment_details = createListContainer.value.join(';\n')
 }
-const ChangeCheckTimeRulesContainer = (val: any, time: any) => {
+const ChangeCheckTimeRulesContainer = (val: any, time: any, timeend :any) => {
   createListContainer.value = []
   createObj.Timestr = val
   if (val.includes('ETD')) {
-    savesubscribeobj.shipment_etd_limit = time
+    savesubscribeobj.shipment_etd_limit_from = time
+    savesubscribeobj.shipment_etd_limit = timeend
+    savesubscribeobj.shipment_eta_limit_from = ''
     savesubscribeobj.shipment_eta_limit = ''
   }
   if (val.includes('ETA')) {
-    savesubscribeobj.shipment_eta_limit = time
+    savesubscribeobj.shipment_eta_limit_from = time
+    savesubscribeobj.shipment_eta_limit = timeend
+    savesubscribeobj.shipment_etd_limit_from = ''
     savesubscribeobj.shipment_etd_limit = ''
   }
   if (createObj.Transportstr != '') {
@@ -328,15 +336,19 @@ const changecheckCreateRulesDeparture = (val: any, value: any) => {
   savesubscribeobj.shipment_transport_mode = value
   savesubscribeobj.shipment_details = createListDeparture.value.join(';\n')
 }
-const ChangeCheckTimeRulesDeparture = (val: any, time: any) => {
+const ChangeCheckTimeRulesDeparture = (val: any, time: any, timeend :any) => {
   createListDeparture.value = []
   createObj.Timestr = val
   if (val.includes('ETD')) {
-    savesubscribeobj.shipment_etd_limit = time
+    savesubscribeobj.shipment_etd_limit_from = time
+    savesubscribeobj.shipment_etd_limit = timeend
+    savesubscribeobj.shipment_eta_limit_from = ''
     savesubscribeobj.shipment_eta_limit = ''
   }
   if (val.includes('ETA')) {
-    savesubscribeobj.shipment_eta_limit = time
+    savesubscribeobj.shipment_eta_limit_from = time
+    savesubscribeobj.shipment_eta_limit = timeend
+    savesubscribeobj.shipment_etd_limit_from = ''
     savesubscribeobj.shipment_etd_limit = ''
   }
   if (createObj.Transportstr != '') {
@@ -359,15 +371,19 @@ const changecheckCreateRulesETDChange = (val: any, value: any) => {
   savesubscribeobj.shipment_transport_mode = value
   savesubscribeobj.shipment_details = createListETDChange.value.join(';\n')
 }
-const ChangeCheckTimeRulesETDChange = (val: any, time: any) => {
+const ChangeCheckTimeRulesETDChange = (val: any, time: any, timeend :any) => {
   createListETDChange.value = []
   createObj.Timestr = val
   if (val.includes('ETD')) {
-    savesubscribeobj.shipment_etd_limit = time
+    savesubscribeobj.shipment_etd_limit_from = time
+    savesubscribeobj.shipment_etd_limit = timeend
+    savesubscribeobj.shipment_eta_limit_from = ''
     savesubscribeobj.shipment_eta_limit = ''
   }
   if (val.includes('ETA')) {
-    savesubscribeobj.shipment_eta_limit = time
+    savesubscribeobj.shipment_eta_limit_from = time
+    savesubscribeobj.shipment_eta_limit = timeend
+    savesubscribeobj.shipment_etd_limit_from = ''
     savesubscribeobj.shipment_etd_limit = ''
   }
   if (createObj.Transportstr != '') {

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

@@ -266,9 +266,9 @@ defineExpose({
 <template>
   <div style="margin-top: 11px">
     <el-radio-group v-model="radio" @change="ChangeFrequency">
-      <el-radio :value="1" v-if="user_type != null && user_type != 'customer'"
+      <!-- <el-radio :value="1" v-if="user_type != null && user_type != 'customer'"
         >Instant notification for each update</el-radio
-      >
+      > -->
       <el-radio :value="2">
         <div>Daily Summary</div>
         <div class="Daily" v-if="isDaily">

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

@@ -28,6 +28,8 @@ TransportList.value = [
 ]
 
 const TimeChecked = ref()
+const defaultradio = ref()
+const defaultradio2 = ref()
 
 watch(
   () => props.ShipmentRangeData,
@@ -43,38 +45,78 @@ const ShipmentRangeInit = () => {
     CheckChange(ShipmentRange_data.value?.shipment_transport_mode)
   }
   if (ShipmentRange_data.value?.shipment_eta_limit != '') {
-    ETATime.value = ShipmentRange_data.value?.shipment_eta_limit
+    ETATimeStart.value = ShipmentRange_data.value?.shipment_eta_limit_from
+    ETATimeEnd.value = ShipmentRange_data.value?.shipment_eta_limit
     TimeChecked.value = 2
     changeTime(2)
   }
-  if (ShipmentRange_data.value?.shipment_etd_limit != '') {
-    ETDTime.value = ShipmentRange_data.value?.shipment_etd_limit
+  if (ShipmentRange_data.value?.shipment_etd_limit != '' && ShipmentRange_data.value?.shipment_etd_limit_from != '') {
+    ETDTimeStart.value = ShipmentRange_data.value?.shipment_etd_limit_from
+    ETDTimeEnd.value = ShipmentRange_data.value?.shipment_etd_limit
     TimeChecked.value = 1
     changeTime(1)
   }
 }
 
-const ETDTime = ref()
-const ETATime = ref()
+const ETDTimeStart = ref()
+const ETDTimeEnd = ref()
+const ETATimeStart = ref()
+const ETATimeEnd = ref()
 
-const clampedETDValue = computed({
-  get: () => ETDTime.value,
+const clampedETDValueStart = computed({
+  get: () => ETDTimeStart.value,
   set: (newVal) => {
-    const isValid = /^[1-9]\d*$/.test(newVal);
-    ETDTime.value = isValid ? newVal : '';
-    if( ETDTime.value!='') {
-      ETDTime.value = Math.min(Math.max(parseInt(ETDTime.value, 10), 1), 365)
+    // 转换为整数
+    const num = parseInt(newVal, 10);
+    // 处理非数字和NaN情况
+    if (isNaN(num)) {
+      ETDTimeStart.value = 0;
+      return;
     }
+    // 范围限制
+    ETDTimeStart.value = Math.max(0, Math.min(365, num));
   }
 })
-const clampedETAValue = computed({
-  get: () => ETATime.value,
+const clampedETDValueEnd = computed({
+  get: () => ETDTimeEnd.value,
   set: (newVal) => {
-    const isValid = /^[1-9]\d*$/.test(newVal);
-    ETATime.value = isValid ? newVal : '';
-    if( ETATime.value!='') {
-      ETATime.value = Math.min(Math.max(parseInt(ETATime.value, 10), 1), 365)
+    // 转换为整数
+    const num = parseInt(newVal, 10);
+    // 处理非数字和NaN情况
+    if (isNaN(num)) {
+      ETDTimeEnd.value = 0;
+      return;
     }
+    // 范围限制
+    ETDTimeEnd.value = Math.max(0, Math.min(365, num));
+  }
+})
+const clampedETAValueStart = computed({
+  get: () => ETATimeStart.value,
+  set: (newVal) => {
+    // 转换为整数
+    const num = parseInt(newVal, 10);
+    // 处理非数字和NaN情况
+    if (isNaN(num)) {
+      ETATimeStart.value = 0;
+      return;
+    }
+    // 范围限制
+    ETATimeStart.value = Math.max(0, Math.min(365, num));
+  }
+})
+const clampedETAValueEnd = computed({
+  get: () => ETATimeEnd.value,
+  set: (newVal) => {
+    // 转换为整数
+    const num = parseInt(newVal, 10);
+    // 处理非数字和NaN情况
+    if (isNaN(num)) {
+      ETATimeEnd.value = 0;
+      return;
+    }
+    // 范围限制
+    ETATimeEnd.value = Math.max(0, Math.min(365, num));
   }
 })
 
@@ -90,32 +132,88 @@ const CheckChange = (val: any) => {
   emit('ChangeCheckRules', Transportstr, TransportCheckedList.value)
 }
 
+const isETDVisible = ref(false)
+const isETAVisible = ref(false)
 // 输入ETD、ETA
 const changeTime = (val: any) => {
   if (val == 1) {
-    if(clampedETDValue.value != '' && clampedETDValue.value != undefined) {
-      Timestr = 'ETD within ' + clampedETDValue.value + ' Day(s)'
+    isETDVisible.value = true
+    isETAVisible.value = false
+    defaultradio.value =''
+    defaultradio2.value =''
+    ETATimeStart.value = ''
+    ETATimeEnd.value = ''
+    if(typeof clampedETDValueStart.value == 'number' && typeof clampedETDValueEnd.value == 'number') {
+      Timestr = 'ETD: minus' + clampedETDValueStart.value + ' Day(s) to Plus'+ clampedETDValueEnd.value + ' Day(s)'
     } else{
       Timestr = ''
     }
-    emit('ChangeCheckTimeRules', Timestr, clampedETDValue.value)
+    emit('ChangeCheckTimeRules', Timestr, clampedETDValueStart.value,clampedETDValueEnd.value)
   } else if (val == 2) {
-    if(clampedETAValue.value != '' && clampedETAValue.value != undefined) {
-      Timestr = 'ETA within ' + clampedETAValue.value + ' Day(s)'
+    isETDVisible.value = false
+    isETAVisible.value = true
+    defaultradio2.value =''
+    defaultradio.value =''
+    ETDTimeStart.value = ''
+    ETDTimeEnd.value = ''
+    if(clampedETAValueStart.value != '' && clampedETAValueStart.value != undefined || clampedETAValueStart.value == 0 && clampedETAValueEnd.value != '' && clampedETAValueEnd.value != undefined  || clampedETAValueEnd.value == 0 ) {
+      Timestr = 'ETA: minus' + clampedETAValueStart.value + ' Day(s) to Plus'+ clampedETAValueEnd.value + ' Day(s)'
     } else{
       Timestr = ''
     }
-    emit('ChangeCheckTimeRules', Timestr, clampedETAValue.value)
+    emit('ChangeCheckTimeRules', Timestr, clampedETAValueStart.value, clampedETAValueEnd.value)
   } else {
     Timestr = ''
   }
 }
 
+//切换默认值
+const changedefaultradio = (val:any) => {
+  if(val == 'Next 30 days') {
+    clampedETDValueStart.value = 0
+    clampedETDValueEnd.value = 30
+  } else if(val == 'Next 60 days') {
+    clampedETDValueStart.value = 0
+    clampedETDValueEnd.value = 60
+  } else if(val == 'Past 30 days') {
+    clampedETDValueStart.value = 30
+    clampedETDValueEnd.value = 0
+  } else {
+    clampedETDValueStart.value = 10
+    clampedETDValueEnd.value = 60
+  }
+  Timestr = 'ETD: minus' + clampedETDValueStart.value + ' Day(s) to Plus'+ clampedETDValueEnd.value + ' Day(s)'
+  emit('ChangeCheckTimeRules', Timestr, clampedETDValueStart.value,clampedETDValueEnd.value)
+}
+//切换默认值
+const changedefaultradioETA = (val:any) => {
+  if(val == 'Next 30 days') {
+    clampedETAValueStart.value = 0
+    clampedETAValueEnd.value = 30
+  } else if(val == 'Next 60 days') {
+    clampedETAValueStart.value = 0
+    clampedETAValueEnd.value = 60
+  } else if(val == 'Past 30 days') {
+    clampedETAValueStart.value = 30
+    clampedETAValueEnd.value = 0
+  } else {
+    clampedETAValueStart.value = 10
+    clampedETAValueEnd.value = 60
+  }
+  Timestr = 'ETD: minus' + clampedETAValueStart.value + ' Day(s) to Plus'+ clampedETAValueEnd.value + ' Day(s)'
+  emit('ChangeCheckTimeRules', Timestr, clampedETAValueStart.value,clampedETAValueEnd.value)
+}
 const handleCloseCreateRule = (val: any) => {
   if (val.indexOf('ETD') != -1 || val.indexOf('ETA') != -1) {
     TimeChecked.value = 0
-    ETDTime.value = ''
-    ETATime.value = ''
+    ETDTimeStart.value = ''
+    ETDTimeEnd.value = ''
+    isETDVisible.value = false
+    defaultradio.value = ''
+    defaultradio2.value = ''
+    ETATimeStart.value = ''
+    ETATimeEnd.value = ''
+    isETAVisible.value = false
   } else if (val.indexOf('Transport') != -1) {
     TransportCheckedList.value = []
   }
@@ -150,27 +248,83 @@ defineExpose({
         <div class="oceanCheckbox">
           <el-radio-group v-model="TimeChecked" @change="changeTime">
             <el-radio :value="1">
-              <div class="flex">
-                <div style="width: 70px">ETD within</div>
-                <el-input
-                  @input="changeTime('1')"
-                  v-model="clampedETDValue"
-                  class="input-with-select"
-                >
-                </el-input>
-                <div class="Days">Day(s)</div>
+              <div>ETD</div>
+              <div v-if="isETDVisible">
+                <el-radio-group v-model="defaultradio" @change="changedefaultradio">
+                  <el-radio-button label="Next 30 days" value="Next 30 days" />
+                  <el-radio-button label="Next 60 days" value="Next 60 days" />
+                  <el-radio-button label="Past 10 days to next 60 days" value="Past 10 days to next 60 days" />
+                  <el-radio-button label="Past 30 days" value="Past 30 days" />
+                </el-radio-group>
+                <div class="flex" style="align-items: end;margin-bottom: 8.5px;">
+                  <div>
+                    <div class="time_title">Start Date</div>
+                    <div class="flex">
+                      <div class="currentTime">Current time minus</div>
+                      <el-input
+                        @input="changeTime('1')"
+                        v-model="clampedETDValueStart"
+                        class="input-with-select"
+                      >
+                      </el-input>
+                      <div class="Days">Day(s)</div>
+                    </div>
+                  </div>
+                  <div class="To">To</div>
+                  <div>
+                    <div class="time_title">End Date</div>
+                    <div class="flex">
+                      <div class="currentTime">Current time plus</div>
+                      <el-input
+                        @input="changeTime('1')"
+                        v-model="clampedETDValueEnd"
+                        class="input-with-select"
+                      >
+                      </el-input>
+                      <div class="Days">Day(s)</div>
+                    </div>
+                  </div>
+                </div>
               </div>
             </el-radio>
             <el-radio :value="2">
-              <div class="flex">
-                <div style="width: 70px">ETA within</div>
-                <el-input
-                  @input="changeTime('2')"
-                  v-model="clampedETAValue"
-                  class="input-with-select"
-                >
-                </el-input>
-                <div class="Days">Day(s)</div>
+              <div>ETA</div>
+              <div v-if="isETAVisible">
+                <el-radio-group v-model="defaultradio2" @change="changedefaultradioETA">
+                  <el-radio-button label="Next 30 days" value="Next 30 days" />
+                  <el-radio-button label="Next 60 days" value="Next 60 days" />
+                  <el-radio-button label="Past 10 days to next 60 days" value="Past 10 days to next 60 days" />
+                  <el-radio-button label="Past 30 days" value="Past 30 days" />
+                </el-radio-group>
+                <div class="flex" style="align-items: end;margin-bottom: 8.5px;">
+                  <div>
+                    <div class="time_title">Start Date</div>
+                    <div class="flex">
+                      <div class="currentTime">Current time minus</div>
+                      <el-input
+                        @input="changeTime('2')"
+                        v-model="clampedETAValueStart"
+                        class="input-with-select"
+                      >
+                      </el-input>
+                      <div class="Days">Day(s)</div>
+                    </div>
+                  </div>
+                  <div class="To">To</div>
+                  <div>
+                    <div class="time_title">End Date</div>
+                    <div class="flex">
+                      <div class="currentTime">Current time plus</div>
+                      <el-input
+                        @input="changeTime('2')"
+                        v-model="clampedETAValueEnd"
+                        class="input-with-select"
+                      >
+                      </el-input>
+                      <div class="Days">Day(s)</div>
+                    </div>
+                  </div>
+                </div>
               </div>
             </el-radio>
           </el-radio-group>
@@ -204,14 +358,20 @@ defineExpose({
   margin-bottom: 8px;
   overflow-y: scroll;
 }
-
-.input-with-select {
-  width: 96px;
+.currentTime {
+  background-color: var(--el-disabled-bg-color);
   border-radius: 6px 0 0 6px;
-  margin-left: 8px;
+  padding: 0 8px;
+  height: 28px;
+  line-height: 28px;
+  border: 1px solid var(--color-system-border);
+}
+.input-with-select {
+  width: 84px;
+  border-radius: 0;
 }
 :deep(.el-input__wrapper) {
-  border-radius: 6px 0 0 6px;
+  border-radius: 0;
   opacity: 0.8;
   height: 28px;
 }
@@ -220,7 +380,7 @@ defineExpose({
   align-items: center;
 }
 .Days {
-  width: 64px;
+  width: 47px;
   border: 1px solid var(--color-system-border);
   border-radius: 0 6px 6px 0;
   background-color: var(--color-system-body-bg);
@@ -231,6 +391,17 @@ defineExpose({
   opacity: 0.8;
   height: 28px;
 }
+.time_title {
+  color: var(--color-neutral-2);
+  font-size: 12px;
+  height: 25px;
+}
+.To {
+  color: var(--color-neutral-2);
+  font-size: 12px;
+  margin: 0 6px;
+  line-height: 24px;
+}
 :deep(.el-radio-group) {
   display: block;
 }
@@ -245,7 +416,7 @@ defineExpose({
   margin-right: 0;
   height: fit-content;
   line-height: 32px;
-  align-items: center;
+  align-items:  start;
 }
 :deep( .el-radio__inner) {
   border: 1px solid var(--color-system-checkbox-border);
@@ -253,10 +424,19 @@ defineExpose({
 :deep(.el-radio__input.is-checked + .el-radio__label) {
   color: var(--color-neutral-1);
 }
+:deep(.el-radio__input) {
+  margin-top: 7px;
+}
 :deep(.el-input__wrapper) {
   box-shadow: 0 0 0 1px var(--color-system-border-1) inset;
 }
 :deep(.el-input-group--append .el-input-group__append .el-select .el-select__wrapper) {
   box-shadow: 0 1px 0 0 var(--color-system-border-1) inset,0 -1px 0 0 var(--color-system-border-1) inset,-1px 0 0 0 var(--color-system-border-1) inset;
 }
+:deep(.el-radio-button__inner) {
+  border: 1px solid var(--color-system-border);
+}
+:deep(.el-radio-button:first-child .el-radio-button__inner) {
+  border-left:1px solid var(--color-system-border);
+}
 </style>