feat:完善system页面

src/api/module/system.ts

@@ -31,4 +31,18 @@ export const Savesubscribe = (params: any, config: any) => {
     },
     config
   )
+}
+/**
+ * 删除AddedRules表格数据
+ */
+export const DeleteAddedRules = (params: any, config: any) => {
+  return HttpAxios.post(
+    `${baseUrl}`,
+    {
+      action: 'system_setting',
+      operate: 'subscribe_notification_rules_delete',
+      ...params
+    },
+    config
+  )
 }

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

@@ -1,9 +1,39 @@
 <script lang="ts" setup>
-import { ref, computed } from 'vue'
+import { ref, computed, watch } from 'vue'
 
 const props = defineProps({
-  Title: String
+  Title: String,
+  DelayedData: Object
 })
+const delayed_data = ref(props.DelayedData)
+watch(
+  () => props.DelayedData,
+  (current) => {
+    delayed_data.value = current
+    DelayedInit()
+  }
+)
+
+const DelayedInit = () => {
+  let array2: any = []
+  OceanCheckedList.value = []
+  if (delayed_data.value?.atd_etd != '' && delayed_data.value?.atd_etd != undefined) {
+    isDeparture.value = true
+    DepartureTime.value = delayed_data.value?.atd_etd
+    DepartureSelect.value = delayed_data.value?.atd_etd_unit
+    OceanCheckedList.value.push('Departure Delayed')
+    array2.push('Departure')
+  }
+  if (delayed_data.value?.ata_eta != '' && delayed_data.value?.ata_eta != undefined) {
+    isArrival.value = true
+    ArrivalTime.value = delayed_data.value?.ata_eta
+    ArrivalSelect.value = delayed_data.value?.ata_eta_unit
+    OceanCheckedList.value.push('Arrival Delayed (ATA-ETA)')
+    array2.push('Arrival')
+  }
+  CheckChange(OceanCheckedList.value)
+  changedeparture(array2)
+}
 const isDeparture = ref(false)
 const isArrival = ref(false)
 const OceanActive = ref(['DelayedShipments'])
@@ -101,17 +131,35 @@ const closeDelayed = (val: any) => {
     OceanCheckedList.value.splice(OceanCheckedList.value.indexOf('Departure Delayed'), 1)
     DepartureList.value.Departure = ''
     isDeparture.value = false
+    DepartureTime.value = ''
+    DepartureSelect.value = ''
   }
   if (val.includes('Arrival')) {
     OceanCheckedList.value.splice(OceanCheckedList.value.indexOf('Arrival Delayed (ATA-ETA)'), 1)
     DepartureList.value.Arrival = ''
     isArrival.value = false
+    ArrivalTime.value = ''
+    ArrivalSelect.value = ''
   }
   emit('ChangeCheckRules', DepartureList.value)
 }
 
+// 清除所有数据
+const ClearData = () => {
+  OceanCheckedList.value = []
+  DepartureList.value.Departure = ''
+  isDeparture.value = false
+  DepartureList.value.Arrival = ''
+  isArrival.value = false
+  DepartureTime.value = ''
+  DepartureSelect.value = ''
+  ArrivalTime.value = ''
+  ArrivalSelect.value = ''
+}
+
 defineExpose({
-  closeDelayed
+  closeDelayed,
+  ClearData
 })
 </script>
 <template>

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

@@ -1,9 +1,50 @@
 <script lang="ts" setup>
-import { ref, computed } from 'vue'
+import { ref, computed, watch } from 'vue'
 
 const props = defineProps({
-  Title: String
+  Title: String,
+  ETDData: Object
 })
+const ETD_data = ref(props.ETDData)
+watch(
+  () => props.ETDData,
+  (current) => {
+    ETD_data.value = current
+    ETDInit()
+  }
+)
+
+const ETDInit = () => {
+  OceanCheckedList.value = []
+  if (ETD_data.value?.ETDradio == 't') {
+    ETDRadio.value = '1'
+    OceanCheckedList.value.push('ETD')
+  } else {
+    if (ETD_data.value?.etd_old_sub_new != '' && ETD_data.value?.etd_old_sub_new != undefined) {
+      ETDRadio.value = '2'
+      isETD.value = true
+      ETDTime.value = ETD_data.value?.etd_old_sub_new
+      ETDSelect.value = ETD_data.value?.etd_old_sub_new_unit
+      OceanCheckedList.value.push('ETD')
+    }
+  }
+  if (ETD_data.value?.ETAradio == 't') {
+    ETARadio.value = '1'
+    OceanCheckedList.value.push('ETA')
+  } else {
+    if (ETD_data.value?.eta_old_sub_new != '' && ETD_data.value?.eta_old_sub_new != undefined) {
+      ETARadio.value = '2'
+      isETA.value = true
+      ETATime.value = ETD_data.value?.eta_old_sub_new
+      ETASelect.value = ETD_data.value?.eta_old_sub_new_unit
+      OceanCheckedList.value.push('ETA')
+    }
+  }
+  CheckChange(OceanCheckedList.value)
+  changeETDRadio(ETDRadio.value)
+  changeETARadio(ETARadio.value)
+  changedeparture(OceanCheckedList.value)
+}
 const isETD = ref(false)
 const isETA = ref(false)
 const OceanActive = ref(['ETDShipments'])
@@ -55,7 +96,7 @@ const changeETDRadio = (val: any) => {
   if (val == 1) {
     ETDstr = 'ETD: Notify for all changes'
     ETDETAList.value.ETD = ETDstr
-  } else {
+  } else if (val == 2) {
     ETDstr = 'ETD: Notify for all changes ≥ ' + clampedValue.value + ' ' + ETDSelect.value
     if (ETDSelect.value != '') {
       ETDETAList.value.ETD = ETDstr
@@ -69,7 +110,7 @@ const changeETARadio = (val: any) => {
   if (val == 1) {
     ETAstr = 'ETA: Notify for all changes'
     ETDETAList.value.ETA = ETAstr
-  } else {
+  } else if (val == 2) {
     ETAstr = 'ETA: Notify for all changes ≥ ' + clampedETAValue.value + ' ' + ETASelect.value
     if (ETASelect.value != '') {
       ETDETAList.value.ETA = ETAstr
@@ -106,17 +147,39 @@ const closeETD = (val: any) => {
     OceanCheckedList.value.splice(OceanCheckedList.value.indexOf('ETD'), 1)
     ETDETAList.value.ETD = ''
     isETD.value = false
+    ETDTime.value = ''
+    ETDSelect.value = ''
+    ETDRadio.value = 0
   }
   if (val.includes('ETA')) {
     OceanCheckedList.value.splice(OceanCheckedList.value.indexOf('ETA'), 1)
     ETDETAList.value.ETA = ''
     isETA.value = false
+    ETATime.value = ''
+    ETASelect.value = ''
+    ETARadio.value = 0
   }
   emit('ChangeCheckRules', ETDETAList.value)
 }
 
+// 清除所有数据
+const ClearData = () => {
+  OceanCheckedList.value = []
+  ETDETAList.value.ETD = ''
+  isETD.value = false
+  ETDETAList.value.ETA = ''
+  isETA.value = false
+  ETDRadio.value = 0
+  ETARadio.value = 0
+  ETDTime.value = ''
+  ETDSelect.value = ''
+  ETATime.value = ''
+  ETASelect.value = ''
+}
+
 defineExpose({
-  closeETD
+  closeETD,
+  ClearData
 })
 
 const clampedValue = computed(() => {
@@ -257,4 +320,22 @@ const clampedETAValue = computed(() => {
 .oceanCheckbox {
   margin-bottom: 8px;
 }
+:deep(.el-radio-group) {
+  display: block;
+}
+:deep(.el-radio) {
+  display: flex;
+  min-height: 32px;
+  border: 1px solid var(--color-select-border);
+  margin-bottom: 4px;
+  border-radius: 6px;
+  padding: 0 8px;
+  margin-right: 0;
+  height: fit-content;
+  line-height: 32px;
+  align-items: center;
+}
+:deep(.el-radio__input.is-checked + .el-radio__label) {
+  color: var(--color-neutral-1);
+}
 </style>

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

@@ -0,0 +1,394 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import moment from 'moment-timezone'
+import { defaultTimeZone } from '@/utils/timezone'
+
+const props = defineProps({
+  FrequencyData: Object
+})
+
+const frequency_data = ref(props.FrequencyData)
+const radio = ref(0)
+const FrequencyList = ref()
+const DailyTime = ref('')
+const WeeklyTime = ref('')
+const WeeklyDay = ref('')
+const WeekDay = ref([
+  {
+    label: 'Monday',
+    value: 'Monday'
+  },
+  {
+    label: 'Tuesday',
+    value: 'Tuesday'
+  },
+  {
+    label: 'Wednesday',
+    value: 'Wednesday'
+  },
+  {
+    label: 'Thursday',
+    value: 'Thursday'
+  },
+  {
+    label: 'Friday',
+    value: 'Friday'
+  },
+  {
+    label: 'Saturday',
+    value: 'Saturday'
+  },
+  {
+    label: 'Sunday',
+    value: 'Sunday'
+  }
+])
+const TimeZone = ref([
+  {
+    label: 'UTC-08',
+    value: 'UTC-08'
+  },
+  {
+    label: 'UTC-07',
+    value: 'UTC-07'
+  },
+  {
+    label: 'UTC-06',
+    value: 'UTC-06'
+  },
+  {
+    label: 'UTC-05',
+    value: 'UTC-05'
+  },
+  {
+    label: 'UTC-04',
+    value: 'UTC-04'
+  },
+  {
+    label: 'UTC-03',
+    value: 'UTC-03'
+  },
+  {
+    label: 'UTC-02',
+    value: 'UTC-02'
+  },
+  {
+    label: 'UTC-01',
+    value: 'UTC-01'
+  },
+  {
+    label: 'UTC-00',
+    value: 'UTC-00'
+  },
+  {
+    label: 'UTC+01',
+    value: 'UTC+01'
+  },
+  {
+    label: 'UTC+02',
+    value: 'UTC+02'
+  },
+  {
+    label: 'UTC+03',
+    value: 'UTC+03'
+  },
+  {
+    label: 'UTC+04',
+    value: 'UTC+04'
+  },
+  {
+    label: 'UTC+05',
+    value: 'UTC+05'
+  },
+  {
+    label: 'UTC+05:30',
+    value: 'UTC+05:30'
+  },
+  {
+    label: 'UTC+06',
+    value: 'UTC+06'
+  },
+  {
+    label: 'UTC+07',
+    value: 'UTC+07'
+  },
+  {
+    label: 'UTC+08',
+    value: 'UTC+08'
+  },
+  {
+    label: 'UTC+09',
+    value: 'UTC+09'
+  },
+  {
+    label: 'UTC+10',
+    value: 'UTC+10'
+  },
+  {
+    label: 'UTC+11',
+    value: 'UTC+11'
+  },
+  {
+    label: 'UTC+12',
+    value: 'UTC+12'
+  }
+])
+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)
+const isDaily = ref(false)
+const isWeekly = ref(false)
+let savesubscribeobj: any = {}
+
+watch(
+  () => props.FrequencyData,
+  (current) => {
+    frequency_data.value = current
+    FrequencyDataInit()
+  }
+)
+
+const emits = defineEmits(['ChangeFrequencyAdd'])
+
+// 初始设置Frequency
+const FrequencyDataInit = () => {
+  if (frequency_data.value?.frequency_type == 'Instant') {
+    radio.value = 1
+    ChangeFrequency(1)
+  } else if (frequency_data.value?.frequency_type == 'Daily') {
+    radio.value = 2
+    DailyTime.value = frequency_data.value?.daily_time
+    TimeZoneDailySelect.value = frequency_data.value?.daily_time_zone
+    ChangeFrequency(2)
+  } else if (frequency_data.value?.frequency_type == 'Weekly') {
+    radio.value = 3
+    WeeklyDay.value = frequency_data.value?.weekly_week
+    WeeklyTime.value = frequency_data.value?.weekly_time
+    TimeZoneWeeklySelect.value = frequency_data.value?.weekly_time_zone
+    ChangeFrequency(3)
+  } else {
+    radio.value = 0
+    ChangeFrequency(0)
+  }
+}
+
+// 更改Frequency时间
+const ChangeFrequency = (val: any) => {
+  FrequencyList.value = []
+  let str: any = ''
+  if (val == 1) {
+    isDaily.value = false
+    isWeekly.value = false
+    str = 'Instant notification for each update'
+    FrequencyList.value.push(str)
+    savesubscribeobj.frequency_type = 'Instant'
+    savesubscribeobj.frequency_display = str
+  } else if (val == 2) {
+    isDaily.value = true
+    isWeekly.value = false
+    str = 'Daily, ' + DailyTime.value + ', ' + TimeZoneDailySelect.value
+    if (DailyTime.value != '' && TimeZoneDailySelect.value !== '') {
+      FrequencyList.value.push(str)
+    }
+    savesubscribeobj.frequency_type = 'Daily'
+    savesubscribeobj.daily_time = DailyTime.value
+    savesubscribeobj.daily_time_zone = TimeZoneDailySelect.value
+    savesubscribeobj.frequency_display = str
+  } else if (val == 3) {
+    isDaily.value = false
+    isWeekly.value = true
+    str = 'Weekly, ' + WeeklyDay.value + ', ' + WeeklyTime.value + ', ' + TimeZoneWeeklySelect.value
+    if (WeeklyDay.value != '' && WeeklyTime.value != '' && TimeZoneWeeklySelect.value !== '') {
+      FrequencyList.value.push(str)
+    }
+    savesubscribeobj.frequency_type = 'Weekly'
+    if (WeeklyDay.value == 'Monday') {
+      savesubscribeobj.weekly_week = 1
+    } else if (WeeklyDay.value == 'Tuesday') {
+      savesubscribeobj.weekly_week = 2
+    } else if (WeeklyDay.value == 'Wednesday') {
+      savesubscribeobj.weekly_week = 3
+    } else if (WeeklyDay.value == 'Thursday') {
+      savesubscribeobj.weekly_week = 4
+    } else if (WeeklyDay.value == 'Friday') {
+      savesubscribeobj.weekly_week = 5
+    } else if (WeeklyDay.value == 'Saturday') {
+      savesubscribeobj.weekly_week = 6
+    } else if (WeeklyDay.value == 'Sunday') {
+      savesubscribeobj.weekly_week = 0
+    }
+    savesubscribeobj.weekly_time = WeeklyTime.value
+    savesubscribeobj.weekly_time_zone = TimeZoneWeeklySelect.value
+    savesubscribeobj.frequency_display = str
+  } else {
+    isDaily.value = false
+    isWeekly.value = false
+    DailyTime.value = ''
+    WeeklyTime.value = ''
+    WeeklyDay.value = ''
+    delete savesubscribeobj.frequency_type
+    delete savesubscribeobj.daily_time
+    delete savesubscribeobj.daily_time_zone
+    delete savesubscribeobj.weekly_week
+    delete savesubscribeobj.weekly_time
+    delete savesubscribeobj.weekly_time_zone
+  }
+  emits('ChangeFrequencyAdd', FrequencyList.value, savesubscribeobj)
+}
+const changeTime = (val: any) => {
+  if (val == 'Daily') {
+    ChangeFrequency(2)
+  } else {
+    ChangeFrequency(3)
+  }
+}
+
+// 删除 Frequency tag
+const handleCloseRadioFrequency = () => {
+  radio.value = 0
+  ChangeFrequency(0)
+}
+
+defineExpose({
+  handleCloseRadioFrequency,
+  FrequencyDataInit
+})
+</script>
+<template>
+  <div style="margin-top: 11px">
+    <el-radio-group v-model="radio" @change="ChangeFrequency">
+      <el-radio :value="1">Instant notification for each update</el-radio>
+      <el-radio :value="2">
+        <div>Daily Summary</div>
+        <div class="Daily" v-if="isDaily">
+          <div class="Daily_left" style="margin-right: 8px">
+            Select Time
+            <div>
+              <el-time-select
+                v-model="DailyTime"
+                start="00:00"
+                step="00:30"
+                end="23:30"
+                prefix-icon=""
+                @change="changeTime('Daily')"
+                placeholder="Select Time"
+              ></el-time-select>
+            </div>
+          </div>
+          <div class="Daily_left">
+            Select Time Zone
+            <div>
+              <el-select
+                v-model="TimeZoneDailySelect"
+                placeholder="Select Time Zone"
+                @change="changeTime('Daily')"
+              >
+                <el-option
+                  v-for="item in TimeZone"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </div>
+          </div>
+        </div>
+      </el-radio>
+      <el-radio :value="3">
+        <div>Weekly Summary</div>
+        <div class="Daily" v-if="isWeekly">
+          <div class="Weekly_left">
+            Select Day
+            <div>
+              <el-select
+                v-model="WeeklyDay"
+                @change="changeTime('Weekly')"
+                placeholder="Select Day"
+              >
+                <el-option
+                  v-for="item in WeekDay"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </div>
+          </div>
+          <div class="Weekly_left" style="margin: 0 8px">
+            Select Time
+            <div>
+              <el-time-select
+                v-model="WeeklyTime"
+                @change="changeTime('Weekly')"
+                start="00:00"
+                step="00:30"
+                end="23:30"
+                prefix-icon=""
+                placeholder="Select time"
+              ></el-time-select>
+            </div>
+          </div>
+          <div class="Weekly_left">
+            Select Time Zone
+            <div>
+              <el-select
+                v-model="TimeZoneWeeklySelect"
+                placeholder="Select Time Zone"
+                @change="changeTime('Weekly')"
+              >
+                <el-option
+                  v-for="item in TimeZone"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </div>
+          </div>
+        </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-select-border);
+  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);
+}
+.Daily {
+  margin: 0 0 9px 0;
+  display: flex;
+}
+.Daily_left {
+  color: var(--color-neutral-2);
+  width: 50%;
+}
+.Weekly_left {
+  color: var(--color-neutral-2);
+  width: 33%;
+}
+:deep(.el-select__icon.el-icon svg) {
+  width: 1em !important;
+}
+:deep(.el-select__wrapper.is-filterable) {
+  padding-left: 7px;
+}
+:deep(.el-radio__inner) {
+  margin-top: 7px;
+}
+</style>

src/components/AddRules/src/components/NotiMethods.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+
+const checkMethodList = ref()
+let savesubscribeobj: any = {}
+const props = defineProps({
+  MethodsData: Object
+})
+
+const methods_data = ref(props.MethodsData)
+watch(
+  () => props.MethodsData,
+  (current) => {
+    methods_data.value = current
+    MethodsInit()
+  }
+)
+const emits = defineEmits(['ChangeMethodsAdd'])
+// 初始设置Methods
+const MethodsInit = () => {
+  checkMethodList.value = []
+  if (methods_data.value?.method_display != undefined) {
+    if (methods_data.value?.method_display.indexOf('Email') != -1) {
+      checkMethodList.value.push('By Email')
+    }
+  }
+  if (methods_data.value?.method_display != undefined) {
+    if (methods_data.value?.method_display.indexOf('System Message') != -1) {
+      checkMethodList.value.push('By System Message')
+    }
+  }
+  changeMethod(checkMethodList.value)
+}
+
+// 选中Method
+const changeMethod = (val: any) => {
+  if (val.indexOf('By Email') != -1) {
+    savesubscribeobj.method_by_email = true
+  } else {
+    savesubscribeobj.method_by_email = false
+  }
+  if (val.indexOf('By System Message ') != -1) {
+    savesubscribeobj.method_by_message = true
+  } else {
+    savesubscribeobj.method_by_message = false
+  }
+  if (val.length != 0) {
+    savesubscribeobj.method_display = val.map((e: any) => e.replace('By ', '')).join(',')
+  } else {
+    savesubscribeobj.method_display = ''
+  }
+  emits('ChangeMethodsAdd', checkMethodList.value, savesubscribeobj)
+}
+</script>
+<template>
+  <div style="margin-top: 11px">
+    <div class="Method">
+      <el-checkbox-group v-model="checkMethodList" @change="changeMethod">
+        <el-checkbox class="methodcheckbox" value="By Email">
+          <div>By Email</div>
+          <div class="methos_image"><img src="../images/illustration_email@2x.png" /></div>
+        </el-checkbox>
+        <el-checkbox class="methodcheckbox" value="By System Message ">
+          <div>By System Message</div>
+          <div class="methos_image">
+            <img src="../images/illustration_system massage@2x.png" />
+          </div>
+        </el-checkbox>
+      </el-checkbox-group>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.methodcheckbox {
+  align-items: start;
+  height: fit-content;
+  width: 49%;
+  margin-right: 5px;
+  background-color: var(--color-dialog-header-bg);
+  border-radius: 6px;
+  padding: 11px 0 0 13px;
+}
+.methos_image {
+  margin: 9px 0;
+}
+</style>

src/components/AddRules/src/components/RulesShipments.vue

@@ -8,11 +8,12 @@ interface OceanCheckboxItem {
 interface Props {
   CheckboxList: OceanCheckboxItem[]
   Title: String
+  CheckedList: Array<''>
 }
 const props = defineProps<Props>()
 
 const OceanActive = ref(['OceanShipments'])
-const CheckedList = ref([])
+const CheckedList = ref(props.CheckedList)
 const CheckboxList = ref(props.CheckboxList)
 watch(
   () => props.CheckboxList,
@@ -20,11 +21,17 @@ watch(
     CheckboxList.value = current
   }
 )
+watch(
+  () => props.CheckedList,
+  (current) => {
+    CheckedList.value = current
+  }
+)
 
 const emit = defineEmits(['ChangeCheckRules'])
-const CheckChange = (val: any) => {
-  console.log(CheckedList)
-  emit('ChangeCheckRules', val)
+const CheckChange = () => {
+  console.log(CheckedList.value)
+  emit('ChangeCheckRules', CheckedList.value)
 }
 </script>
 <template>

src/views/SystemSettings/src/SystemSettings.vue

@@ -8,9 +8,9 @@ const isMilestoneChecked = ref(false)
 const isContainerChecked = ref(false)
 const isDepartureChecked = ref(false)
 const isETDChangeChecked = ref(false)
-const isMilestoneAdded = ref(true)
+const isMilestoneAdded = ref(false)
 const isContainerAdded = ref(false)
-const isDepartureAdded = ref(true)
+const isDepartureAdded = ref(false)
 const isETDChangeAdded = ref(false)
 const CollapseActive = ref()
 const isActiveCollapse = ref({
@@ -136,10 +136,54 @@ const getsubscribe = () => {
       subscribeInit.value = res.data
       SubShipmentsTable.value.getTableData(res.data.subscribeShipmentWithPage)
       AddRulesTable.value.getTableData(res.data.addedRules)
+      isMilestoneAdded.value = res.data.Milestone_Update.is_display
+      isContainerAdded.value = res.data.Container_Status_Update.is_display
+      isDepartureAdded.value = res.data['Departure/Arrival_Delay'].is_display
+      isETDChangeAdded.value = res.data['ETD/ETA_Change'].is_display
     }
   })
 }
 
+// 保存成功后更改表单数据
+const SavedAddedRules = (val: any, type: any) => {
+  AddRulesTable.value.getTableData(val)
+  CollapseActive.value = ''
+  isMilestoneChecked.value = false
+  isContainerChecked.value = false
+  isDepartureChecked.value = false
+  isETDChangeChecked.value = false
+  if (type == 'Milestone_Update') {
+    isMilestoneAdded.value = true
+  } else if (type == 'Container_Status_Update') {
+    isContainerAdded.value = true
+  } else if (type == 'Arrival_Delay') {
+    isDepartureAdded.value = true
+  } else {
+    isETDChangeAdded.value = true
+  }
+}
+
+// 删除表格后更改数据
+const Milestone = ref()
+const Container = ref()
+const Departure = ref()
+const ETDChange = ref()
+const deleteAddedRules = (val: any) => {
+  if (val == 'Milestone_Update') {
+    isMilestoneAdded.value = false
+    Milestone.value.clearData(val)
+  } else if (val == 'Container_Status_Update') {
+    isContainerAdded.value = false
+    Container.value.clearData(val)
+  } else if (val == 'Departure/Arrival_Delay') {
+    isDepartureAdded.value = false
+    Departure.value.clearData(val)
+  } else {
+    isETDChangeAdded.value = false
+    ETDChange.value.clearData(val)
+  }
+}
+
 onMounted(() => {
   getsubscribe()
 })
@@ -167,6 +211,8 @@ onMounted(() => {
                 TitleType="Milestone"
                 @UnsavedCollapse="UnsavedCollapse"
                 :SystemList="subscribeInit"
+                @SavedAddedRules="SavedAddedRules"
+                ref="Milestone"
               ></AddRules>
             </div>
           </el-collapse-item>
@@ -183,8 +229,10 @@ onMounted(() => {
             <div>
               <AddRules
                 TitleType="Container"
+                ref="Container"
                 @UnsavedCollapse="UnsavedCollapse"
                 :SystemList="subscribeInit"
+                @SavedAddedRules="SavedAddedRules"
               ></AddRules>
             </div>
           </el-collapse-item>
@@ -201,8 +249,10 @@ onMounted(() => {
             <div>
               <AddRules
                 TitleType="Departure"
+                ref="Departure"
                 @UnsavedCollapse="UnsavedCollapse"
                 :SystemList="subscribeInit"
+                @SavedAddedRules="SavedAddedRules"
               ></AddRules>
             </div>
           </el-collapse-item>
@@ -219,8 +269,10 @@ onMounted(() => {
             <div>
               <AddRules
                 TitleType="ETDChange"
+                ref="ETDChange"
                 @UnsavedCollapse="UnsavedCollapse"
                 :SystemList="subscribeInit"
+                @SavedAddedRules="SavedAddedRules"
               ></AddRules>
             </div>
           </el-collapse-item>
@@ -231,6 +283,7 @@ onMounted(() => {
         :propsType="true"
         ref="AddRulesTable"
         :ColumnsList="AddedRulesColumns"
+        @deleteAddedRules="deleteAddedRules"
       ></AddRSettingTableules>
       <div class="TableTitle subscribetitle">Subscribed Shipments</div>
       <AddRSettingTableules

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

@@ -2,7 +2,7 @@
 import { type VxeGridInstance, type VxeGridProps } from 'vxe-table'
 import { useRowClickStyle } from '@/hooks/rowClickStyle'
 import dayjs from 'dayjs'
-import { ref, onMounted, watch } from 'vue'
+import { ref, onMounted } from 'vue'
 interface ColumnsListItem {
   field: String
   title: String
@@ -60,7 +60,7 @@ const handleColumns = (columns: any) => {
 const getTableColumns = async () => {
   tableData.value.columns = handleColumns(columnstest.value)
   if (props.propsType) {
-    tableData.value.columns.push({
+    tableData.value.columns?.push({
       title: 'Action',
       fixed: 'right',
       width: 80,
@@ -90,10 +90,21 @@ const getTableData = (val: any) => {
 // 实现行点击样式
 useRowClickStyle(tableRef)
 
+const emits = defineEmits(['deleteAddedRules'])
 // 点击删除
 const handleDelete = (row: any) => {
-  visible.value = true
-  console.log(row)
+  row.visible = false
+  $api
+    .DeleteAddedRules({
+      rules_type: row.Event
+    })
+    .then((res: any) => {
+      if (res.code === 200) {
+        console.log(tableData.value.data)
+        tableData.value.data = tableData.value.data?.filter((item) => item.Event !== row.Event)
+        emits('deleteAddedRules', row.Event)
+      }
+    })
 }
 
 onMounted(() => {
@@ -112,20 +123,22 @@ defineExpose({
       </template>
 
       <template #action="{ row }">
-        <el-popover :visible="visible" placement="left" :width="480">
+        <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
           </div>
           <p class="delete_content">Are you sure to delete this notification event?</p>
           <div style="text-align: right; margin: 0; padding: 8px">
-            <el-button style="width: 100px" tupe="default" @click="visible = false"
+            <el-button style="width: 100px" tupe="default" @click="row.visible = false"
               >cancel</el-button
             >
-            <el-button style="width: 100px" type="warning" @click="visible = false"> OK </el-button>
+            <el-button style="width: 100px" type="warning" @click="handleDelete(row)">
+              OK
+            </el-button>
           </div>
           <template #reference>
-            <el-button @click="handleDelete(row)" class="el-button--blue" style="height: 24px">
+            <el-button @click="row.visible = true" class="el-button--blue" style="height: 24px">
               <span class="font_family icon-icon_delete_b"></span>
             </el-button>
           </template>

vite.config.ts

@@ -10,6 +10,7 @@ import IconsResolver from 'unplugin-icons/resolver'
 // https://vitejs.dev/config/
 export default defineConfig({
   base: `/`,
+  // base: `/k_new_online/`,
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url))