feat:新建system页面

src/api/index.ts

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

src/api/module/system.ts

@@ -0,0 +1,34 @@
+import HttpAxios from '@/utils/axios'
+
+const base = import.meta.env.VITE_API_HOST
+const baseUrl = `${base}/main_new_version.php`
+
+
+/**
+ * 获取subscribe数据
+ */
+export const getsubscribe = (params: any, config: any) => {
+  return HttpAxios.get(
+    `${baseUrl}`,
+    {
+      action: 'system_setting',
+      operate: 'subscribe_notification_init',
+      ...params
+    },
+    config
+  )
+}
+/**
+ * 提交subscribe数据
+ */
+export const Savesubscribe = (params: any, config: any) => {
+  return HttpAxios.get(
+    `${baseUrl}`,
+    {
+      action: 'system_setting',
+      operate: 'subscribe_notification_event_update',
+      ...params
+    },
+    config
+  )
+}

src/auto-imports.d.ts

@@ -3,7 +3,6 @@
 // @ts-nocheck
 // noinspection JSUnusedGlobalSymbols
 // Generated by unplugin-auto-import
-// biome-ignore lint: disable
 export {}
 declare global {
   const $api: typeof import('@/api/index')['default']
@@ -69,6 +68,6 @@ declare global {
 // for type re-export
 declare global {
   // @ts-ignore
-  export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
+  export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
   import('vue')
 }

src/components/AddRules/index.ts

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

src/components/AddRules/src/AddRules.vue

@@ -0,0 +1,1110 @@
+<script lang="ts" setup>
+import { ref, watch } from 'vue'
+import RulesShipments from './components/RulesShipments.vue'
+import AddedrluesTag from './components/AddedrluesTag.vue'
+import DelayedType from './components/DelayedType.vue'
+import ETDShipments from './components/ETDShipments.vue'
+import ShipmentRange from './components/ShipmentRange.vue'
+import { defaultTimeZone } from '@/utils/timezone'
+import moment from 'moment-timezone'
+interface CheckboxItem {
+  value: string
+  label: string
+}
+
+interface Props {
+  SystemList: Object
+  TitleType: String
+}
+
+const MilestoneOceanListInit = ref<CheckboxItem[]>([])
+const MilestoneAirListInit = ref<CheckboxItem[]>([])
+const ContainerOceanListInit = ref<CheckboxItem[]>([])
+const props = defineProps<Props>()
+let savesubscribeobj: any = {}
+
+const SystemList = ref(props.SystemList)
+watch(
+  () => props.SystemList,
+  (current) => {
+    console.log(current)
+    SystemList.value = current
+    MilestoneOceanListInit.value = current['Milestone_Update'].OceanCheckBoxList
+    MilestoneAirListInit.value = current['Milestone_Update'].AirCheckBoxList
+    ContainerOceanListInit.value = current['Container_Status_Update'].CtnrCheckBoxList
+  }
+)
+
+const RulesActive = ref(['SelectMilestone', 'NotificationFrequency', 'NotificationMethod'])
+const OceanCheckList = ref()
+const AirCheckList = ref()
+const ContainerOceanList = ref()
+const FrequencyList = ref()
+const IsFirstActive = ref(true)
+const IsTwoActive = ref(true)
+const IsThreeActive = ref(true)
+const radio = ref(0)
+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()
+const CancelRulesVisible = ref(false)
+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)
+const checkMethodList = ref()
+const DelayedDeparturedList = ref()
+const DelayedAirdList = ref()
+const ETDOceanList = ref()
+const ETDAirList = ref()
+const CreateRuleOceanCheckList = ref()
+const CreateRuleAirCheckList = ref()
+
+// 给tag list赋值
+const ChangeCheckOceanRules = (val: any) => {
+  OceanCheckList.value = val
+}
+const ChangeContainerRules = (val: any) => {
+  ContainerOceanList.value = val
+}
+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]
+  } else {
+    delete savesubscribeobj.ocean_atd_sub_etd
+    delete savesubscribeobj.ocean_atd_sub_etd_unit
+  }
+  if (val.Arrival != '') {
+    DelayedDeparturedList.value.push(val.Arrival)
+    savesubscribeobj.ocean_ata_sub_eta = val.Departure.split(' ')[4]
+    savesubscribeobj.ocean_ata_sub_eta_unit = val.Departure.split(' ')[5]
+  } else {
+    delete savesubscribeobj.ocean_ata_sub_eta
+    delete savesubscribeobj.ocean_ata_sub_eta_unit
+  }
+}
+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]
+  } else {
+    delete savesubscribeobj.air_atd_sub_etd
+    delete savesubscribeobj.air_atd_sub_etd_unit
+  }
+  if (val.Arrival != '') {
+    DelayedAirdList.value.push(val.Arrival)
+    savesubscribeobj.air_ata_sub_eta = val.Departure.split(' ')[4]
+    savesubscribeobj.air_ata_sub_eta_unit = val.Departure.split(' ')[5]
+  } else {
+    delete savesubscribeobj.air_ata_sub_eta
+    delete savesubscribeobj.air_ata_sub_eta_unit
+  }
+}
+const ChangeCheckAirRules = (val: any) => {
+  AirCheckList.value = val
+}
+
+//选择create new rules
+const createList = ref()
+const ChangeCheckCreateRuleOceanRules = (val: any) => {
+  CreateRuleOceanCheckList.value = val
+}
+const ChangeCheckCreateRuleAirRules = (val: any) => {
+  CreateRuleAirCheckList.value = val
+}
+
+let createObj: any = {
+  Transportstr: '',
+  Timestr: ''
+}
+const changecheckCreateRules = (val: any) => {
+  createList.value = []
+  createObj.Transportstr = val
+  if (createObj.Transportstr != '') {
+    createList.value.push(createObj.Transportstr)
+  }
+  if (createObj.Timestr != '') {
+    createList.value.push(createObj.Timestr)
+  }
+}
+const ChangeCheckTimeRules = (val: any) => {
+  createList.value = []
+  createObj.Timestr = val
+  if (createObj.Transportstr != '') {
+    createList.value.push(createObj.Transportstr)
+  }
+  if (createObj.Timestr != '') {
+    createList.value.push(createObj.Timestr)
+  }
+}
+// 删除create tag
+const ShipmentRangeRef = ref()
+const handleCloseCreateRule = (val: any) => {
+  if (val.indexOf('ETD') != -1 || val.indexOf('ETA') != -1) {
+    createObj.Timestr = ''
+  } else if (val.indexOf('Transport') != -1) {
+    createObj.Transportstr = ''
+  }
+  ShipmentRangeRef.value.handleCloseCreateRule(val)
+}
+// 更改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
+  }
+}
+const changeTime = (val: any) => {
+  if (val == 'Daily') {
+    ChangeFrequency(2)
+  } else {
+    ChangeFrequency(3)
+  }
+}
+// 删除 Frequency tag
+const handleCloseRadio = () => {
+  radio.value = 0
+  ChangeFrequency(0)
+}
+const OceanDelayed = ref()
+const AirDelayed = ref()
+
+const handleCloseDelayed = (val: any) => {
+  OceanDelayed.value.closeDelayed(val)
+}
+const handleCloseAirDelayed = (val: any) => {
+  AirDelayed.value.closeDelayed(val)
+}
+// ETD Change
+const ChangeETDOceanRules = (val: any) => {
+  ETDOceanList.value = []
+  if (val.ETD != '') {
+    if (val.ETD.indexOf('≥') != -1) {
+      savesubscribeobj.ocean_etd_change = false
+      savesubscribeobj.ocean_etd_old_sub_new = val.ETD.split(' ')[6]
+      savesubscribeobj.ocean_etd_old_sub_new_unit = val.ETD.split(' ')[7]
+    } else {
+      savesubscribeobj.ocean_etd_change = true
+    }
+    ETDOceanList.value.push(val.ETD)
+  } else {
+    delete savesubscribeobj.ocean_etd_change
+    delete savesubscribeobj.ocean_etd_old_sub_new
+    delete savesubscribeobj.ocean_etd_old_sub_new_unit
+  }
+  if (val.ETA != '') {
+    if (val.ETA.indexOf('≥') != -1) {
+      savesubscribeobj.ocean_eta_change = false
+      savesubscribeobj.ocean_eta_old_sub_new = val.ETD.split(' ')[6]
+      savesubscribeobj.ocean_eta_old_sub_new_unit = val.ETD.split(' ')[7]
+    } else {
+      savesubscribeobj.ocean_eta_change = true
+    }
+    ETDOceanList.value.push(val.ETA)
+  } else {
+    delete savesubscribeobj.ocean_eta_change
+    delete savesubscribeobj.ocean_eta_old_sub_new
+    delete savesubscribeobj.ocean_eta_old_sub_new_unit
+  }
+}
+// 删除ETD tag
+const OceanETD = ref()
+const closeOceanETD = (val: any) => {
+  OceanETD.value.closeETD(val)
+}
+// ETA Change
+const ChangeETDAirRules = (val: any) => {
+  ETDAirList.value = []
+  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]
+    } else {
+      savesubscribeobj.air_etd_change = true
+    }
+    ETDAirList.value.push(val.ETD)
+  } else {
+    delete savesubscribeobj.air_etd_change
+    delete savesubscribeobj.air_etd_old_sub_new
+    delete savesubscribeobj.air_etd_old_sub_new_unit
+  }
+  if (val.ETA != '') {
+    if (val.ETA.indexOf('≥') != -1) {
+      savesubscribeobj.air_eta_change = false
+      savesubscribeobj.air_eta_old_sub_new = val.ETD.split(' ')[6]
+      savesubscribeobj.air_eta_old_sub_new_unit = val.ETD.split(' ')[7]
+    } else {
+      savesubscribeobj.air_eta_change = true
+    }
+    ETDAirList.value.push(val.ETA)
+  } else {
+    delete savesubscribeobj.air_eta_change
+    delete savesubscribeobj.air_eta_old_sub_new
+    delete savesubscribeobj.air_eta_old_sub_new_unit
+  }
+}
+// 删除ETA tag
+const AirETD = ref()
+const closeAirETD = (val: any) => {
+  AirETD.value.closeETD(val)
+}
+const emits = defineEmits(['UnsavedCollapse'])
+// 不保存修改的折叠面板
+const UnsavedCollapse = () => {
+  CancelRulesVisible.value = false
+  emits('UnsavedCollapse')
+}
+
+// 选中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 = ''
+  }
+}
+
+// 保存subscribe配置
+const Savesubscribe = () => {
+  let str = ''
+  if (props.TitleType == 'Milestone') {
+    savesubscribeobj.rules_type = 'Milestone_Update'
+    savesubscribeobj.ocean_milestone = OceanCheckList.value
+    savesubscribeobj.air_milestone = AirCheckList.value
+    str =
+      'Ocean Milestones: ' +
+      OceanCheckList.value.join(',') +
+      ';\nAir Milestones: ' +
+      AirCheckList.value.join(',') +
+      ';'
+  } else if (props.TitleType == 'Container') {
+    savesubscribeobj.rules_type = 'Container_Status_Update'
+    savesubscribeobj.ocean_milestone = ContainerOceanList.value
+    str = 'Ocean Container: ' + ContainerOceanList.value.join(',')
+  } else if (props.TitleType == 'Departure') {
+    console.log(DelayedDeparturedList.value)
+    savesubscribeobj.rules_type = 'Departure/Arrival_Delay'
+    str = DelayedDeparturedList.value.join(';\n') + ';\n' + DelayedAirdList.value.join(';\n')
+  } else {
+    savesubscribeobj.rules_type = 'ETD/ETA_Change'
+    str = ETDOceanList.value.join(';\n') + ';\n' + ETDAirList.value.join(';\n')
+  }
+  savesubscribeobj.event_details = str
+  $api
+    .Savesubscribe({
+      ...savesubscribeobj
+    })
+    .then((res: any) => {
+      if (res.code === 200) {
+        console.log(res.data)
+      }
+    })
+}
+</script>
+<template>
+  <div class="Rules_flex">
+    <div class="Rules_left">
+      <div class="Rules_collapse">
+        <el-collapse
+          v-model="RulesActive"
+          @change="IsFirstActive = !IsFirstActive"
+          v-if="props.TitleType == 'Milestone'"
+        >
+          <el-collapse-item name="SelectMilestone">
+            <template #title>
+              <div class="Rules_Title">
+                <span class="iconfont_icon">
+                  <svg class="iconfont" aria-hidden="true">
+                    <use
+                      :xlink:href="IsFirstActive ? '#icon-icon_dropdown_b' : '#icon-icon_up_b'"
+                    ></use>
+                  </svg>
+                </span>
+                <span class="stars_red">*</span>Select Milestone
+              </div>
+            </template>
+            <div>
+              <RulesShipments
+                Title="Ocean shipments"
+                @ChangeCheckRules="ChangeCheckOceanRules"
+                :CheckboxList="MilestoneOceanListInit"
+              ></RulesShipments>
+            </div>
+            <div>
+              <RulesShipments
+                Title="Air shipments"
+                @ChangeCheckRules="ChangeCheckAirRules"
+                :CheckboxList="MilestoneAirListInit"
+              ></RulesShipments>
+            </div>
+          </el-collapse-item>
+        </el-collapse>
+        <el-collapse
+          v-model="RulesActive"
+          @change="IsFirstActive = !IsFirstActive"
+          v-if="props.TitleType == 'Container'"
+        >
+          <el-collapse-item name="SelectMilestone">
+            <template #title>
+              <div class="Rules_Title">
+                <span class="iconfont_icon">
+                  <svg class="iconfont" aria-hidden="true">
+                    <use
+                      :xlink:href="IsFirstActive ? '#icon-icon_dropdown_b' : '#icon-icon_up_b'"
+                    ></use>
+                  </svg>
+                </span>
+                <span class="stars_red">*</span>Select Container Status
+              </div>
+            </template>
+            <div>
+              <RulesShipments
+                Title="Ocean shipments"
+                @ChangeCheckRules="ChangeContainerRules"
+                :CheckboxList="ContainerOceanListInit"
+              ></RulesShipments>
+            </div>
+          </el-collapse-item>
+        </el-collapse>
+        <el-collapse
+          v-model="RulesActive"
+          @change="IsFirstActive = !IsFirstActive"
+          v-if="props.TitleType == 'Departure'"
+        >
+          <el-collapse-item name="SelectMilestone">
+            <template #title>
+              <div class="Rules_Title">
+                <span class="iconfont_icon">
+                  <svg class="iconfont" aria-hidden="true">
+                    <use
+                      :xlink:href="IsFirstActive ? '#icon-icon_dropdown_b' : '#icon-icon_up_b'"
+                    ></use>
+                  </svg>
+                </span>
+                <span class="stars_red">*</span>Select Delayed Type
+              </div>
+            </template>
+            <div>
+              <DelayedType
+                Title="Ocean shipments"
+                ref="OceanDelayed"
+                @ChangeCheckRules="ChangeDeayedRules"
+              ></DelayedType>
+            </div>
+            <div>
+              <DelayedType
+                Title="Air shipments"
+                ref="AirDelayed"
+                @ChangeCheckRules="ChangeAirRules"
+              ></DelayedType>
+            </div>
+          </el-collapse-item>
+        </el-collapse>
+        <el-collapse
+          v-model="RulesActive"
+          @change="IsFirstActive = !IsFirstActive"
+          v-if="props.TitleType == 'CreateRule'"
+        >
+          <el-collapse-item name="SelectMilestone">
+            <template #title>
+              <div class="Rules_Title">
+                <span class="iconfont_icon">
+                  <svg class="iconfont" aria-hidden="true">
+                    <use
+                      :xlink:href="IsFirstActive ? '#icon-icon_dropdown_b' : '#icon-icon_up_b'"
+                    ></use>
+                  </svg>
+                </span>
+                <span class="stars_red">*</span>Shipment Range
+              </div>
+            </template>
+            <div>
+              <ShipmentRange
+                ref="ShipmentRangeRef"
+                @ChangeCheckRules="changecheckCreateRules"
+                @ChangeCheckTimeRules="ChangeCheckTimeRules"
+              ></ShipmentRange>
+            </div>
+          </el-collapse-item>
+        </el-collapse>
+        <el-collapse
+          v-model="RulesActive"
+          @change="IsFirstActive = !IsFirstActive"
+          v-if="props.TitleType == 'CreateRule'"
+        >
+          <el-collapse-item name="SelectMilestone">
+            <template #title>
+              <div class="Rules_Title">
+                <span class="iconfont_icon">
+                  <svg class="iconfont" aria-hidden="true">
+                    <use
+                      :xlink:href="IsFirstActive ? '#icon-icon_dropdown_b' : '#icon-icon_up_b'"
+                    ></use>
+                  </svg>
+                </span>
+                <span class="stars_red">*</span>Select Milestone
+              </div>
+            </template>
+            <div>
+              <RulesShipments
+                Title="Ocean shipments"
+                @ChangeCheckRules="ChangeCheckCreateRuleOceanRules"
+              ></RulesShipments>
+            </div>
+            <div>
+              <RulesShipments
+                Title="Air shipments"
+                @ChangeCheckRules="ChangeCheckCreateRuleAirRules"
+              ></RulesShipments>
+            </div>
+          </el-collapse-item>
+        </el-collapse>
+        <el-collapse
+          v-model="RulesActive"
+          @change="IsFirstActive = !IsFirstActive"
+          v-if="props.TitleType == 'ETDChange'"
+        >
+          <el-collapse-item name="SelectMilestone">
+            <template #title>
+              <div class="Rules_Title">
+                <span class="iconfont_icon">
+                  <svg class="iconfont" aria-hidden="true">
+                    <use
+                      :xlink:href="IsFirstActive ? '#icon-icon_dropdown_b' : '#icon-icon_up_b'"
+                    ></use>
+                  </svg>
+                </span>
+                <span class="stars_red">*</span>Select Delayed Type
+              </div>
+            </template>
+            <div>
+              <ETDShipments
+                Title="Ocean shipments"
+                ref="OceanETD"
+                @ChangeCheckRules="ChangeETDOceanRules"
+              ></ETDShipments>
+            </div>
+            <div>
+              <ETDShipments
+                Title="Air shipments"
+                ref="AirETD"
+                @ChangeCheckRules="ChangeETDAirRules"
+              ></ETDShipments>
+            </div>
+          </el-collapse-item>
+        </el-collapse>
+        <el-collapse
+          style="margin-top: 17px; margin-right: 16px"
+          v-model="RulesActive"
+          @change="IsTwoActive = !IsTwoActive"
+        >
+          <el-collapse-item name="NotificationFrequency">
+            <template #title>
+              <div class="Rules_Title">
+                <span class="iconfont_icon">
+                  <svg class="iconfont" aria-hidden="true">
+                    <use
+                      :xlink:href="IsTwoActive ? '#icon-icon_dropdown_b' : '#icon-icon_up_b'"
+                    ></use>
+                  </svg>
+                </span>
+                <span class="stars_red">*</span>Notification Frequency
+              </div>
+            </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>
+          </el-collapse-item>
+        </el-collapse>
+        <el-collapse
+          style="margin: 17px 0"
+          v-model="RulesActive"
+          @change="IsThreeActive = !IsThreeActive"
+        >
+          <el-collapse-item name="NotificationMethod">
+            <template #title>
+              <div class="Rules_Title">
+                <span class="iconfont_icon">
+                  <svg class="iconfont" aria-hidden="true">
+                    <use
+                      :xlink:href="IsThreeActive ? '#icon-icon_dropdown_b' : '#icon-icon_up_b'"
+                    ></use>
+                  </svg>
+                </span>
+                <span class="stars_red">*</span>Notification Method
+              </div>
+            </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>
+          </el-collapse-item>
+        </el-collapse>
+      </div>
+    </div>
+    <div class="Rules_right">
+      <div class="right_Title">Added Rules</div>
+      <AddedrluesTag
+        v-if="props.TitleType == 'CreateRule'"
+        :CheckedList="createList"
+        Title="Shipment Range"
+        @handleCloseRadio="handleCloseCreateRule"
+      ></AddedrluesTag>
+      <AddedrluesTag
+        :CheckedList="DelayedDeparturedList"
+        v-if="props.TitleType == 'Departure'"
+        @handleCloseRadio="handleCloseDelayed"
+        Title="Ocean Shipments"
+      ></AddedrluesTag>
+      <AddedrluesTag
+        v-if="props.TitleType == 'Milestone'"
+        :CheckedList="OceanCheckList"
+        Title="Ocean Shipments"
+      ></AddedrluesTag>
+      <AddedrluesTag
+        v-if="props.TitleType == 'CreateRule'"
+        :CheckedList="CreateRuleOceanCheckList"
+        Title="Ocean Shipments"
+      ></AddedrluesTag>
+      <AddedrluesTag
+        v-if="props.TitleType == 'Container'"
+        :CheckedList="ContainerOceanList"
+        Title="Ocean Shipments"
+      ></AddedrluesTag>
+      <AddedrluesTag
+        :CheckedList="ETDOceanList"
+        v-if="props.TitleType == 'ETDChange'"
+        Title="Ocean Shipments"
+        @handleCloseRadio="closeOceanETD"
+      ></AddedrluesTag>
+      <AddedrluesTag
+        :CheckedList="ETDAirList"
+        v-if="props.TitleType == 'ETDChange'"
+        @handleCloseRadio="closeAirETD"
+        Title="Air Shipments"
+      ></AddedrluesTag>
+      <AddedrluesTag
+        v-if="props.TitleType == 'CreateRule'"
+        :CheckedList="CreateRuleAirCheckList"
+        Title="Air Shipments"
+      ></AddedrluesTag>
+      <AddedrluesTag
+        :CheckedList="DelayedAirdList"
+        v-if="props.TitleType == 'Departure'"
+        @handleCloseRadio="handleCloseAirDelayed"
+        Title="Air Shipments"
+      ></AddedrluesTag>
+      <AddedrluesTag
+        v-if="props.TitleType == 'Milestone'"
+        :CheckedList="AirCheckList"
+        Title="Air Shipments"
+      ></AddedrluesTag>
+      <AddedrluesTag
+        :CheckedList="FrequencyList"
+        Title="Notification Frequency"
+        @handleCloseRadio="handleCloseRadio"
+      ></AddedrluesTag>
+      <AddedrluesTag :CheckedList="checkMethodList" Title="Notification Method"></AddedrluesTag>
+    </div>
+  </div>
+  <div class="Rules_buttom" v-if="props.TitleType != 'CreateRule'">
+    <el-button class="el-button--dark rules_button" @click="Savesubscribe">Save</el-button>
+    <el-button @click="CancelRulesVisible = true" class="rules_button" type="default"
+      >Cancel</el-button
+    >
+    <el-dialog v-model="CancelRulesVisible" title="Tips" width="480">
+      <div>You have unsaved changes.</div>
+      <div>Are you sure you want to leave this page?</div>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="default" @click="CancelRulesVisible = false" style="width: 100px"
+            >Cancel</el-button
+          >
+          <el-button class="el-button--warning" @click="UnsavedCollapse" style="width: 100px">
+            OK
+          </el-button>
+        </div>
+      </template>
+      <template #header>
+        <div class="cancel_header">
+          <span class="iconfont_icon iconfont_warning">
+            <svg class="iconfont icon_warning" aria-hidden="true">
+              <use xlink:href="#icon-icon_tipsfilled_b"></use>
+            </svg>
+          </span>
+          Unsaved Changes
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.Rules_flex {
+  padding: 0 0 0 8px;
+  display: flex;
+}
+.Rules_left {
+  width: 60%;
+  border-right: 1px solid var(--color-user-config-title-bottom-border);
+}
+.Rules_right {
+  width: 40%;
+  background-color: var(--more-filters-background-color);
+}
+.right_Title {
+  color: var(--color-neutral-1);
+  padding: 9px 8px;
+  font-size: 18px;
+  font-weight: 700;
+  border-bottom: 1px solid var(--color-user-config-title-bottom-border);
+  background-color: var(--color-drawer-body-bg);
+}
+.iconfont {
+  width: 16px;
+  height: 16px;
+  margin-right: 8px;
+}
+:deep(.Rules_Title) {
+  color: var(--color-neutral-1);
+  font-size: 14px;
+  font-weight: 700;
+  height: 22px;
+  display: flex;
+  align-items: center;
+}
+.stars_red {
+  color: var(--color-danger);
+}
+:deep(.el-collapse-item__header) {
+  height: 25px !important;
+  margin: 14px 0 0 0 !important;
+  border: none !important;
+  padding: 0 !important;
+}
+:deep(.el-collapse-item__header):hover {
+  background-color: #fff !important;
+  border: none !important;
+}
+:deep(.el-collapse-item__arrow) {
+  width: 0 !important;
+  height: 0 !important;
+}
+:deep(.el-icon svg) {
+  width: 0 !important;
+}
+:deep(.el-collapse-item__header.is-active) {
+  background-color: transparent !important;
+  border-color: transparent !important;
+}
+:deep(.el-collapse-item__arrow.is-active) {
+  transform: rotate(-180deg) !important;
+}
+:deep(.Ocean_collapse .el-collapse-item__arrow) {
+  width: 16px !important;
+  height: 16px !important;
+  background-image: url('../src/images/icon_expand.png') !important;
+  background-size: contain;
+  background-repeat: no-repeat;
+  transform: rotate(0);
+}
+:deep(.Ocean_collapse .el-collapse-item__header) {
+  background-color: #fff !important;
+  padding: 0 8px !important;
+  height: 40px !important;
+}
+:deep(.Ocean_collapse .el-collapse-item) {
+  background-color: var(--color-dialog-header-bg);
+  border-radius: 12px;
+}
+:deep(.Ocean_collapse .el-collapse-item__wrap) {
+  padding: 0 8px !important;
+}
+:deep(.Ocean_collapse .el-collapse-item__header.is-active) {
+  background-color: var(--color-dialog-header-bg) !important;
+}
+:deep(.el-checkbox__input.is-checked + .el-checkbox__label) {
+  color: var(--color-neutral-1);
+}
+: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;
+}
+.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;
+}
+.Rules_buttom {
+  padding: 8px;
+  border-top: 1px solid var(--color-border-1);
+}
+.rules_button {
+  width: 100px;
+  height: 40px;
+}
+.cancel_header {
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--color-neutral-1);
+  display: flex;
+  align-items: center;
+}
+.icon_warning {
+  width: 22px;
+  height: 22px;
+  margin-right: 0;
+  fill: var(--color-btn-warning-bg);
+}
+.iconfont_warning {
+  display: flex;
+  align-items: center;
+}
+:deep(header.el-dialog__header) {
+  background-color: #fff;
+}
+:deep(footer.el-dialog__footer) {
+  border-top: none;
+}
+:deep(.el-collapse) {
+  margin-right: 8px;
+}
+</style>

src/components/AddRules/src/components/AddedrluesTag.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts" >
+import { ref, watch } from 'vue'
+const props = defineProps({
+  CheckedList: Array,
+  Title: String
+})
+const CheckedList = ref(props.CheckedList)
+watch(
+  () => props.CheckedList,
+  (current) => {
+    CheckedList.value = current
+  }
+)
+
+const emit = defineEmits(['handleCloseRadio'])
+
+const handleClose = (tag: any) => {
+  CheckedList.value?.splice(CheckedList.value.indexOf(tag), 1)
+  emit('handleCloseRadio', tag)
+}
+</script>
+
+<template>
+  <div>
+    <el-card class="Rules_Card">
+      <div class="Card_Title">{{ props.Title }}</div>
+      <div class="right_flex">
+        <el-tag
+          class="tag"
+          v-for="(tag, index) in CheckedList"
+          :key="index"
+          closable
+          @close="handleClose(tag)"
+        >
+          {{ tag }}
+        </el-tag>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.tag {
+  border-radius: 3px;
+  margin-bottom: 4px;
+  color: var(--color-neutral-1);
+  height: 32px;
+  width: fit-content;
+  font-weight: 400;
+  font-size: 14px;
+  background-color: var(--tag-bg-color) !important;
+  border-color: var(--tag-bg-color);
+}
+.tag:last-child {
+  margin-bottom: 0;
+}
+:deep(.el-card__body) {
+  padding: 8px !important;
+  max-height: 400px;
+  overflow-y: scroll;
+}
+:deep(.el-tag .el-tag__close svg) {
+  width: 16px !important;
+}
+.right_flex {
+  display: flex;
+  flex-direction: column;
+}
+.Rules_Card {
+  margin: 8px;
+}
+.Card_Title {
+  color: var(--color-neutral-1);
+  font-size: 14px;
+  font-weight: 600;
+  margin: 9px 0 11px 0;
+}
+</style>

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

@@ -0,0 +1,231 @@
+<script lang="ts" setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  Title: String
+})
+const isDeparture = ref(false)
+const isArrival = ref(false)
+const OceanActive = ref(['DelayedShipments'])
+const OceanCheckedList = ref()
+const DepartureTime = ref('')
+const DepartureSelect = ref('')
+const ArrivalTime = ref('')
+const ArrivalSelect = ref('')
+const emit = defineEmits(['ChangeCheckRules', 'closeDelayed'])
+const DepartureList = ref({
+  Departure: '',
+  Arrival: ''
+})
+let Departurestr: any = ''
+let Arrivalstr: any = ''
+
+const clampedValue = computed(() => {
+  if (DepartureTime.value == '') {
+    return 0
+  } else {
+    const numericValue = DepartureTime.value.replace(/[^0-9]/g, 0) // 移除非数字字符
+    return Math.min(Math.max(parseInt(numericValue, 10), 0), 365) // 确保值在0到1000之间，但不更新原输入值仅用于显示
+  }
+})
+const clampedArrivalValue = computed(() => {
+  if (ArrivalTime.value == '') {
+    return 0
+  } else {
+    const numericValue = ArrivalTime.value.replace(/[^0-9]/g, 0) // 移除非数字字符
+    return Math.min(Math.max(parseInt(numericValue, 10), 0), 365) // 确保值在0到1000之间，但不更新原输入值仅用于显示
+  }
+})
+
+const CheckChange = (val: any) => {
+  if (val.includes('Departure Delayed')) {
+    isDeparture.value = true
+    Departurestr = 'Departure Delayed' + ' ≥ ' + clampedValue.value + ' ' + DepartureSelect.value
+    if (DepartureSelect.value != '') {
+      DepartureList.value.Departure = Departurestr
+    }
+    if (val.includes('Arrival Delayed (ATA-ETA)')) {
+      isArrival.value = true
+      Arrivalstr =
+        'Arrival Delayed (ATA-ETA)' + ' ≥ ' + clampedArrivalValue.value + ' ' + ArrivalSelect.value
+      if (ArrivalSelect.value != '') {
+        DepartureList.value.Arrival = Arrivalstr
+      }
+    } else {
+      isArrival.value = false
+      DepartureList.value.Arrival = ''
+    }
+  } else {
+    isDeparture.value = false
+    DepartureList.value.Departure = ''
+    if (val.includes('Arrival Delayed (ATA-ETA)')) {
+      isArrival.value = true
+      Arrivalstr =
+        'Arrival Delayed (ATA-ETA)' + ' ≥ ' + clampedArrivalValue.value + ' ' + ArrivalSelect.value
+      if (ArrivalSelect.value != '') {
+        DepartureList.value.Arrival = Arrivalstr
+      }
+    } else {
+      isArrival.value = false
+      DepartureList.value.Arrival = ''
+    }
+  }
+  emit('ChangeCheckRules', DepartureList.value)
+}
+const changedeparture = (val: any) => {
+  if (val == 'Departure') {
+    Departurestr = 'Departure Delayed' + ' ≥ ' + clampedValue.value + ' ' + DepartureSelect.value
+    if (DepartureSelect.value != '') {
+      DepartureList.value.Departure = Departurestr
+    }
+    if (val == 'Arrival') {
+      Arrivalstr =
+        'Arrival Delayed (ATA-ETA)' + ' ≥ ' + clampedArrivalValue.value + ' ' + ArrivalSelect.value
+      if (ArrivalSelect.value != '') {
+        DepartureList.value.Arrival = Arrivalstr
+      }
+    }
+  } else {
+    if (val == 'Arrival') {
+      Arrivalstr =
+        'Arrival Delayed (ATA-ETA)' + ' ≥ ' + clampedArrivalValue.value + ' ' + ArrivalSelect.value
+      if (ArrivalSelect.value != '') {
+        DepartureList.value.Arrival = Arrivalstr
+      }
+    }
+  }
+  emit('ChangeCheckRules', DepartureList.value)
+}
+const closeDelayed = (val: any) => {
+  if (val.includes('Departure')) {
+    OceanCheckedList.value.splice(OceanCheckedList.value.indexOf('Departure Delayed'), 1)
+    DepartureList.value.Departure = ''
+    isDeparture.value = false
+  }
+  if (val.includes('Arrival')) {
+    OceanCheckedList.value.splice(OceanCheckedList.value.indexOf('Arrival Delayed (ATA-ETA)'), 1)
+    DepartureList.value.Arrival = ''
+    isArrival.value = false
+  }
+  emit('ChangeCheckRules', DepartureList.value)
+}
+
+defineExpose({
+  closeDelayed
+})
+</script>
+<template>
+  <div class="Ocean_collapse">
+    <el-collapse v-model="OceanActive">
+      <el-collapse-item name="DelayedShipments">
+        <template #title>
+          <div class="Rules_Title OceanTitle">{{ props.Title }}</div>
+        </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>
+              <div v-if="isDeparture" style="margin-top: 16px">
+                <span class="delayedTitle">Delayed Time</span>
+                <span class="delayedIcon">></span>
+                <el-input
+                  v-model="DepartureTime"
+                  class="input-with-select"
+                  :value="clampedValue"
+                  @input="changedeparture('Departure')"
+                >
+                  <template #append>
+                    <el-select
+                      v-model="DepartureSelect"
+                      placeholder="Select"
+                      @change="changedeparture('Departure')"
+                    >
+                      <el-option label="Day(s)" value="Day(s)" />
+                      <el-option label="Hour(s)" value="Hour(s)" />
+                    </el-select>
+                  </template>
+                </el-input>
+              </div>
+            </el-checkbox>
+            <el-checkbox class="delayedType" value="Arrival Delayed (ATA-ETA)">
+              <div>Arrival Delayed (ATA-ETA)</div>
+              <div v-if="isArrival" style="margin-top: 16px">
+                <span class="delayedTitle">Delayed Time</span>
+                <span class="delayedIcon">></span>
+                <el-input
+                  v-model="ArrivalTime"
+                  @input="changedeparture('Arrival')"
+                  :value="clampedArrivalValue"
+                  class="input-with-select"
+                >
+                  <template #append>
+                    <el-select
+                      v-model="ArrivalSelect"
+                      placeholder="Select"
+                      @change="changedeparture('Arrival')"
+                    >
+                      <el-option label="Day(s)" value="Day(s)" />
+                      <el-option label="Hour(s)" value="Hour(s)" />
+                    </el-select>
+                  </template>
+                </el-input>
+              </div>
+            </el-checkbox>
+          </el-checkbox-group>
+        </div>
+      </el-collapse-item>
+    </el-collapse>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+:deep(.el-checkbox-group) {
+  border: 1px solid var(--color-select-border);
+  border-radius: 5px;
+}
+:deep(.el-checkbox) {
+  width: 100%;
+  background-color: var(--color-drawer-body-bg);
+  border-bottom: 1px solid var(--color-select-border);
+  padding: 8px;
+}
+:deep(.el-checkbox:first-child) {
+  border-radius: 6px 6px 0 0;
+}
+:deep(.el-checkbox:last-child) {
+  border-radius: 0 0 6px 6px;
+  border-bottom: none;
+}
+.delayedType {
+  align-items: start;
+  height: fit-content;
+  margin-right: 5px;
+  border-radius: 6px;
+  padding: 8px;
+}
+.input-with-select {
+  width: 180px;
+}
+:deep(.el-input__wrapper) {
+  width: 50%;
+}
+:deep(.el-input-group__append) {
+  width: 50%;
+  padding: 0;
+  border: none;
+}
+:deep(.el-input-group--append .el-input-group__append .el-select .el-select__wrapper) {
+  padding: 5px 10px;
+  background-color: #fff;
+}
+.delayedTitle {
+  color: var(--color-neutral-2);
+  font-size: 12px;
+}
+.delayedIcon {
+  margin: 0 8px;
+}
+.oceanCheckbox {
+  margin-bottom: 8px;
+}
+</style>

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

@@ -0,0 +1,260 @@
+<script lang="ts" setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  Title: String
+})
+const isETD = ref(false)
+const isETA = ref(false)
+const OceanActive = ref(['ETDShipments'])
+const OceanCheckedList = ref()
+const ETDTime = ref('')
+const ETDSelect = ref('')
+const ETATime = ref('')
+const ETASelect = ref('')
+const ETDRadio = ref()
+const ETARadio = ref()
+const emit = defineEmits(['ChangeCheckRules', 'closeETD'])
+const ETDETAList = ref({
+  ETD: '',
+  ETA: ''
+})
+let ETDstr: any = ''
+let ETAstr: any = ''
+const CheckChange = (val: any) => {
+  if (val.includes('ETD')) {
+    isETD.value = true
+    if (ETDSelect.value != '') {
+      ETDETAList.value.ETD = ETDstr
+    }
+    if (val.includes('ETA')) {
+      isETA.value = true
+      if (ETASelect.value != '') {
+        ETDETAList.value.ETA = ETAstr
+      }
+    } else {
+      isETA.value = false
+      ETDETAList.value.ETA = ''
+    }
+  } else {
+    isETD.value = false
+    ETDETAList.value.ETD = ''
+    if (val.includes('ETA')) {
+      isETA.value = true
+      if (ETASelect.value != '') {
+        ETDETAList.value.ETA = ETAstr
+      }
+    } else {
+      isETA.value = false
+      ETDETAList.value.ETA = ''
+    }
+  }
+  emit('ChangeCheckRules', ETDETAList.value)
+}
+const changeETDRadio = (val: any) => {
+  if (val == 1) {
+    ETDstr = 'ETD: Notify for all changes'
+    ETDETAList.value.ETD = ETDstr
+  } else {
+    ETDstr = 'ETD: Notify for all changes ≥ ' + clampedValue.value + ' ' + ETDSelect.value
+    if (ETDSelect.value != '') {
+      ETDETAList.value.ETD = ETDstr
+    } else {
+      ETDETAList.value.ETD = ''
+    }
+  }
+  emit('ChangeCheckRules', ETDETAList.value)
+}
+const changeETARadio = (val: any) => {
+  if (val == 1) {
+    ETAstr = 'ETA: Notify for all changes'
+    ETDETAList.value.ETA = ETAstr
+  } else {
+    ETAstr = 'ETA: Notify for all changes ≥ ' + clampedETAValue.value + ' ' + ETASelect.value
+    if (ETASelect.value != '') {
+      ETDETAList.value.ETA = ETAstr
+    } else {
+      ETDETAList.value.ETA = ''
+    }
+  }
+  emit('ChangeCheckRules', ETDETAList.value)
+}
+const changedeparture = (val: any) => {
+  if (val == 'ETD') {
+    ETDstr = 'ETD: Notify for all changes ≥ ' + clampedValue.value + ' ' + ETDSelect.value
+    if (ETDSelect.value != '') {
+      ETDETAList.value.ETD = ETDstr
+    }
+    if (val == 'ETA') {
+      ETAstr = 'ETA: Notify for all changes ≥ ' + clampedETAValue.value + ' ' + ETASelect.value
+      if (ETASelect.value != '') {
+        ETDETAList.value.ETA = ETAstr
+      }
+    }
+  } else {
+    if (val == 'ETA') {
+      ETAstr = 'ETA: Notify for all changes ≥ ' + clampedETAValue.value + ' ' + ETASelect.value
+      if (ETASelect.value != '') {
+        ETDETAList.value.ETA = ETAstr
+      }
+    }
+  }
+  emit('ChangeCheckRules', ETDETAList.value)
+}
+const closeETD = (val: any) => {
+  if (val.includes('ETD')) {
+    OceanCheckedList.value.splice(OceanCheckedList.value.indexOf('ETD'), 1)
+    ETDETAList.value.ETD = ''
+    isETD.value = false
+  }
+  if (val.includes('ETA')) {
+    OceanCheckedList.value.splice(OceanCheckedList.value.indexOf('ETA'), 1)
+    ETDETAList.value.ETA = ''
+    isETA.value = false
+  }
+  emit('ChangeCheckRules', ETDETAList.value)
+}
+
+defineExpose({
+  closeETD
+})
+
+const clampedValue = computed(() => {
+  if (ETDTime.value == '') {
+    return 0
+  } else {
+    const numericValue = ETDTime.value.replace(/[^0-9]/g, 0) // 移除非数字字符
+    return Math.min(Math.max(parseInt(numericValue, 10), 0), 365) // 确保值在0到1000之间，但不更新原输入值仅用于显示
+  }
+})
+const clampedETAValue = computed(() => {
+  if (ETATime.value == '') {
+    return 0
+  } else {
+    const numericValue = ETATime.value.replace(/[^0-9]/g, 0) // 移除非数字字符
+    return Math.min(Math.max(parseInt(numericValue, 10), 0), 365) // 确保值在0到1000之间，但不更新原输入值仅用于显示
+  }
+})
+</script>
+<template>
+  <div class="Ocean_collapse">
+    <el-collapse v-model="OceanActive">
+      <el-collapse-item name="ETDShipments">
+        <template #title>
+          <div class="Rules_Title OceanTitle">{{ props.Title }}</div>
+        </template>
+        <div class="oceanCheckbox">
+          <el-checkbox-group @change="CheckChange" v-model="OceanCheckedList">
+            <el-checkbox class="delayedType" value="ETD">
+              <div>ETD</div>
+              <div v-if="isETD" style="margin-top: 16px">
+                <el-radio-group v-model="ETDRadio" @change="changeETDRadio">
+                  <el-radio value="1">Notify for all changes</el-radio>
+                  <el-radio value="2"
+                    >Notify only when time difference
+                    <span class="delayedIcon">></span>
+                    <el-input
+                      v-model="ETDTime"
+                      :value="clampedValue"
+                      class="input-with-select"
+                      @input="changedeparture('ETD')"
+                    >
+                      <template #append>
+                        <el-select
+                          v-model="ETDSelect"
+                          placeholder="Select"
+                          @change="changedeparture('ETD')"
+                        >
+                          <el-option label="Day(s)" value="Day(s)" />
+                          <el-option label="Hour(s)" value="Hour(s)" />
+                        </el-select>
+                      </template> </el-input
+                  ></el-radio>
+                </el-radio-group>
+              </div>
+            </el-checkbox>
+            <el-checkbox class="delayedType" value="ETA">
+              <div>ETA</div>
+              <div v-if="isETA" style="margin-top: 16px">
+                <el-radio-group v-model="ETARadio" @change="changeETARadio">
+                  <el-radio value="1">Notify for all changes</el-radio>
+                  <el-radio value="2"
+                    >Notify only when time difference
+                    <span class="delayedIcon">></span>
+                    <el-input
+                      v-model="ETATime"
+                      :value="clampedETAValue"
+                      class="input-with-select"
+                      @input="changedeparture('ETA')"
+                    >
+                      <template #append>
+                        <el-select
+                          v-model="ETASelect"
+                          placeholder="Select"
+                          @change="changedeparture('ETA')"
+                        >
+                          <el-option label="Day(s)" value="Day(s)" />
+                          <el-option label="Hour(s)" value="Hour(s)" />
+                        </el-select>
+                      </template> </el-input
+                  ></el-radio>
+                </el-radio-group>
+              </div>
+            </el-checkbox>
+          </el-checkbox-group>
+        </div>
+      </el-collapse-item>
+    </el-collapse>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+:deep(.el-checkbox-group) {
+  border: 1px solid var(--color-select-border);
+  border-radius: 5px;
+}
+:deep(.el-checkbox) {
+  width: 100%;
+  background-color: var(--color-drawer-body-bg);
+  border-bottom: 1px solid var(--color-select-border);
+  padding: 8px;
+}
+:deep(.el-checkbox:first-child) {
+  border-radius: 6px 6px 0 0;
+}
+:deep(.el-checkbox:last-child) {
+  border-radius: 0 0 6px 6px;
+  border-bottom: none;
+}
+:deep(.el-radio) {
+  border: none !important;
+}
+.delayedType {
+  align-items: start;
+  height: fit-content;
+  margin-right: 5px;
+  border-radius: 6px;
+  padding: 8px;
+}
+.input-with-select {
+  width: 180px;
+}
+:deep(.el-input__wrapper) {
+  width: 50%;
+}
+:deep(.el-input-group__append) {
+  width: 50%;
+  padding: 0;
+  border: none;
+}
+:deep(.el-input-group--append .el-input-group__append .el-select .el-select__wrapper) {
+  padding: 5px 10px;
+  background-color: #fff;
+}
+.delayedIcon {
+  margin: 0 8px;
+}
+.oceanCheckbox {
+  margin-bottom: 8px;
+}
+</style>

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

@@ -0,0 +1,76 @@
+<script lang="ts" setup>
+import { ref, watch } from 'vue'
+
+interface OceanCheckboxItem {
+  value: string
+  label: string
+}
+interface Props {
+  CheckboxList: OceanCheckboxItem[]
+  Title: String
+}
+const props = defineProps<Props>()
+
+const OceanActive = ref(['OceanShipments'])
+const CheckedList = ref([])
+const CheckboxList = ref(props.CheckboxList)
+watch(
+  () => props.CheckboxList,
+  (current) => {
+    CheckboxList.value = current
+  }
+)
+
+const emit = defineEmits(['ChangeCheckRules'])
+const CheckChange = (val: any) => {
+  console.log(CheckedList)
+  emit('ChangeCheckRules', val)
+}
+</script>
+<template>
+  <div class="Ocean_collapse">
+    <el-collapse v-model="OceanActive">
+      <el-collapse-item name="OceanShipments">
+        <template #title>
+          <div class="Rules_Title OceanTitle">{{ props.Title }}</div>
+        </template>
+        <div class="oceanCheckbox">
+          <el-checkbox-group @change="CheckChange" v-model="CheckedList">
+            <el-checkbox
+              v-for="item in CheckboxList"
+              :key="item.label"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-checkbox-group>
+        </div>
+      </el-collapse-item>
+    </el-collapse>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+:deep(.el-checkbox-group) {
+  border: 1px solid var(--color-select-border);
+  border-radius: 5px;
+}
+:deep(.el-checkbox) {
+  width: 100%;
+  background-color: var(--color-drawer-body-bg);
+  border-bottom: 1px solid var(--color-select-border);
+  padding: 8px;
+}
+:deep(.el-checkbox:first-child) {
+  border-radius: 6px 6px 0 0;
+}
+:deep(.el-checkbox:last-child) {
+  border-radius: 0 0 6px 6px;
+  border-bottom: none;
+}
+.oceanCheckbox {
+  max-height: 321px;
+  overflow-x: hidden;
+  margin-bottom: 8px;
+  overflow-y: scroll;
+}
+</style>

src/components/AddRules/src/components/ShipmentRange.vue

@@ -0,0 +1,196 @@
+<script lang="ts" setup>
+import { ref, computed } from 'vue'
+
+const OceanActive = ref(['TransportMode', 'Time'])
+const TransportCheckedList = ref([])
+interface OceanItem {
+  label: string
+  value: string
+}
+const TransportList = ref<OceanItem[]>([])
+TransportList.value = [
+  {
+    label: 'Ocean',
+    value: 'Ocean'
+  },
+  {
+    label: 'Air',
+    value: 'Air'
+  },
+  {
+    label: 'Road',
+    value: 'Road'
+  }
+]
+
+const TimeChecked = ref()
+
+const ETDTime = ref('')
+const ETATime = ref('')
+
+const clampedETDValue = computed(() => {
+  if (ETDTime.value == '') {
+    return 0
+  } else {
+    const numericValue = ETDTime.value.replace(/[^0-9]/g, 0) // 移除非数字字符
+    return Math.min(Math.max(parseInt(numericValue, 10), 0), 365) // 确保值在0到1000之间，但不更新原输入值仅用于显示
+  }
+})
+const clampedETAValue = computed(() => {
+  if (ETATime.value == '') {
+    return 0
+  } else {
+    const numericValue = ETATime.value.replace(/[^0-9]/g, 0) // 移除非数字字符
+    return Math.min(Math.max(parseInt(numericValue, 10), 0), 365) // 确保值在0到1000之间，但不更新原输入值仅用于显示
+  }
+})
+
+let Transportstr: any = ''
+let Timestr: any = ''
+const emit = defineEmits(['ChangeCheckRules', 'ChangeCheckTimeRules'])
+const CheckChange = (val: any) => {
+  if (val != '') {
+    Transportstr = 'Transport Mode: ' + val
+  } else {
+    Transportstr = ''
+  }
+  emit('ChangeCheckRules', Transportstr)
+}
+
+// 输入ETD、ETA
+const changeTime = (val: any) => {
+  if (val == 1) {
+    Timestr = 'ETD within ' + clampedETDValue.value + ' Day(s)'
+  } else if (val == 2) {
+    Timestr = 'ETA within ' + clampedETAValue.value + ' Day(s)'
+  } else {
+    Timestr = ''
+  }
+  emit('ChangeCheckTimeRules', Timestr)
+}
+
+const handleCloseCreateRule = (val: any) => {
+  if (val.indexOf('ETD') != -1 || val.indexOf('ETA') != -1) {
+    TimeChecked.value = 0
+    ETDTime.value = ''
+    ETATime.value = ''
+  } else if (val.indexOf('Transport') != -1) {
+    TransportCheckedList.value = []
+  }
+}
+
+defineExpose({
+  handleCloseCreateRule
+})
+</script>
+<template>
+  <div class="Ocean_collapse">
+    <el-collapse v-model="OceanActive">
+      <el-collapse-item name="TransportMode">
+        <template #title>
+          <div class="Rules_Title OceanTitle">Transport Mode</div>
+        </template>
+        <div class="oceanCheckbox">
+          <el-checkbox-group @change="CheckChange" v-model="TransportCheckedList">
+            <el-checkbox
+              v-for="item in TransportList"
+              :key="item.label"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-checkbox-group>
+        </div>
+      </el-collapse-item>
+      <el-collapse-item name="Time">
+        <template #title>
+          <div class="Rules_Title OceanTitle">Time</div>
+        </template>
+        <div class="oceanCheckbox">
+          <el-radio-group v-model="TimeChecked" @change="changeTime">
+            <el-radio value="1">
+              <div class="flex">
+                ETD within
+                <el-input
+                  @input="changeTime('1')"
+                  v-model="ETDTime"
+                  :value="clampedETDValue"
+                  class="input-with-select"
+                >
+                </el-input>
+                <div class="Days">Day(s)</div>
+              </div>
+            </el-radio>
+            <el-radio value="2">
+              <div class="flex">
+                ETA within
+                <el-input
+                  @input="changeTime('2')"
+                  v-model="ETATime"
+                  :value="clampedETAValue"
+                  class="input-with-select"
+                >
+                </el-input>
+                <div class="Days">Day(s)</div>
+              </div>
+            </el-radio>
+          </el-radio-group>
+        </div>
+      </el-collapse-item>
+    </el-collapse>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+:deep(.el-checkbox-group) {
+  border: 1px solid var(--color-select-border);
+  border-radius: 5px;
+}
+:deep(.el-checkbox) {
+  width: 100%;
+  background-color: var(--color-drawer-body-bg);
+  border-bottom: 1px solid var(--color-select-border);
+  padding: 8px;
+}
+:deep(.el-checkbox:first-child) {
+  border-radius: 6px 6px 0 0;
+}
+:deep(.el-checkbox:last-child) {
+  border-radius: 0 0 6px 6px;
+  border-bottom: none;
+}
+.oceanCheckbox {
+  max-height: 321px;
+  overflow-x: hidden;
+  margin-bottom: 8px;
+  overflow-y: scroll;
+}
+
+.input-with-select {
+  width: 96px;
+  border-radius: 6px 0 0 6px;
+}
+:deep(.el-input__wrapper) {
+  border-radius: 6px 0 0 6px;
+  opacity: 0.8;
+  height: 28px;
+}
+.flex {
+  display: flex;
+  align-items: center;
+}
+.Days {
+  width: 64px;
+  border: 1px solid var(--color-select-border);
+  border-radius: 0 6px 6px 0;
+  background-color: var(--color-drawer-body-bg);
+  border-left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0.8;
+  height: 28px;
+}
+:deep(.el-radio) {
+  background-color: var(--color-drawer-body-bg);
+}
+</style>

src/components/TableEmpty/TableEmpty.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import lightPng from './image/default_notification_setting.png'
+import darkPng from './image/default_notification_setting.png'
+import { useThemeStore } from '@/stores/modules/theme'
+
+const themeStore = useThemeStore()
+// 判断当前系统主题模式
+const emptyImg = computed(() => {
+  return themeStore.theme === 'dark' ? darkPng : lightPng
+})
+
+const props = defineProps({
+  EmptyTitle: String
+})
+</script>
+
+<template>
+  <div class="v-empty">
+    <div class="empty-img">
+      <img :src="emptyImg" alt="" />
+    </div>
+    <p class="title">
+      <slot name="title">{{ props.EmptyTitle }}</slot>
+    </p>
+    <div>
+      <slot name="suggestion"></slot>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.v-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  .empty-img {
+    margin-bottom: 16px;
+  }
+  .title {
+    margin-bottom: 8px;
+    font-weight: 400;
+    color: var(--color-neutral-2);
+  }
+}
+</style>

src/components/TableEmpty/index.ts

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

src/router/index.ts

@@ -87,6 +87,19 @@ const router = createRouter({
           path: '/Operationlog',
           name: 'Operationlog',
           component: () => import('../views/OperationLog')
+        },
+        {
+          path: '/SystemSettings',
+          name: 'Monitoring Settings',
+          component: () => import('../views/SystemSettings')
+        },
+        {
+          path: '/SystemSettings/createnewrule',
+          name: 'Create New Rule',
+          component: () => import('../views/SystemSettings/src/components/CreateNewrule'),
+          meta: {
+            activeMenu: '/SystemSettings'
+          }
         }
       ]
     }

src/stores/modules/breadCrumb.ts

@@ -9,7 +9,7 @@ interface BreadCrumb {
   routeList: Route[]
 }
 // 需要添加多级菜单的页面，值为route的name
-const whiteList = ['Booking Detail', 'Tracking Detail', 'Add VGM', 'Public Tracking Detail']
+const whiteList = ['Booking Detail', 'Tracking Detail', 'Add VGM', 'Public Tracking Detail','Create New Rule']
 
 export const useBreadCrumb = defineStore('breadCrumb', {
   state: (): BreadCrumb => ({

src/styles/elementui.scss

@@ -75,6 +75,19 @@ button.el-button--main {
     fill: var(--color-white);
   }
 }
+button.el-button--main.is-disabled {
+  border: none;
+  background-color: var(--color-btn-main-bg-disabled);
+  span {
+    color: var(--color-white);
+  }
+  fill: var(--color-white);
+  &:hover {
+    background-color: var(--color-btn-main-bg-disabled);
+    color: var(--color-white);
+    fill: var(--color-white);
+  }
+}
 
 button.el-button.el-button--pain-theme {
   border: 1px solid var(--color-el-btn-pain-theme-border);
@@ -776,4 +789,7 @@ div .DaterangeClass {
   background-color: var(--management-bg-color) !important;
   border-color: var(--management-bg-color) !important;
   border-radius: 12px !important;
+}
+div .el-radio__label {
+  width: 100%;
 }

src/styles/icons/iconfont.css

@@ -1,9 +1,9 @@
 @font-face {
   font-family: "font_family"; /* Project id 4672385 */
-  src: url('iconfont.woff2?t=1736324058852') format('woff2'),
-       url('iconfont.woff?t=1736324058852') format('woff'),
-       url('iconfont.ttf?t=1736324058852') format('truetype'),
-       url('iconfont.svg?t=1736324058852#font_family') format('svg');
+  src: url('iconfont.woff2?t=1737535437731') format('woff2'),
+       url('iconfont.woff?t=1737535437731') format('woff'),
+       url('iconfont.ttf?t=1737535437731') format('truetype'),
+       url('iconfont.svg?t=1737535437731#font_family') format('svg');
 }
 
 .font_family {
@@ -14,6 +14,34 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-icon_up_b:before {
+  content: "\e704";
+}
+
+.icon-icon_route_b:before {
+  content: "\e700";
+}
+
+.icon-icon_model_b:before {
+  content: "\e701";
+}
+
+.icon-icon_delay_b:before {
+  content: "\e702";
+}
+
+.icon-icon_container__filled_b:before {
+  content: "\e703";
+}
+
+.icon-icon_po__sscc_b:before {
+  content: "\e6fe";
+}
+
+.icon-icon_po__request_b:before {
+  content: "\e6ff";
+}
+
 .icon-icon_currentlink_b:before {
   content: "\e6fc";
 }

src/styles/icons/iconfont.svg

@@ -14,6 +14,20 @@
     />
       <missing-glyph />
       
+      <glyph glyph-name="icon_up_b" unicode="&#59140;" d="M503.488 519.104a32 32 0 0 0 44.992 0l227.072-224.64a32 32 0 0 0-22.528-54.784H299.008A32 32 0 0 0 276.48 294.4l227.008 224.704z"  horiz-adv-x="1088" />
+      
+      <glyph glyph-name="icon_route_b" unicode="&#59136;" d="M428.544 674.816a131.008 131.008 0 1 0-0.768-76.8H332.672a89.024 89.024 0 0 1 0-178.112h387.2a165.312 165.312 0 0 0 0-330.56h-43.072a130.944 130.944 0 1 0 3.2 76.8h39.872a88.512 88.512 0 1 1 0 176.96h-387.2a165.824 165.824 0 1 0 0 331.712h95.872z"  horiz-adv-x="1088" />
+      
+      <glyph glyph-name="icon_model_b" unicode="&#59137;" d="M540.096 858.112A28.8 28.8 0 0 1 515.904 858.24L80 657.6a28.8 28.8 0 0 1-14.272-37.76v-483.264a28.8 28.8 0 0 1 16.64-26.112l428.928-200.32a28.8 28.8 0 0 1 24.768-0.32l435.968 200.576a28.8 28.8 0 0 1 16.704 26.176V631.424a28.8 28.8 0 0 1-18.88 27.072L540.096 858.24z m12.8-445.76l378.24 174.08v-431.424l-378.24-174.08v431.36z m-429.568 172.8l371.84-172.8v-431.104l-371.84 173.632V585.152z m767.872 46.336L524.16 462.72 161.792 631.808l366.08 168.448 363.328-168.768z"  horiz-adv-x="1088" />
+      
+      <glyph glyph-name="icon_delay_b" unicode="&#59138;" d="M489.984 631.182222a56.888889 56.888889 0 0 0 96.142222-0.227555l288.483556-458.126223a56.888889 56.888889 0 0 0-48.128-87.210666H247.068444A56.888889 56.888889 0 0 0 199.111111 172.942222l290.929778 458.183111z m48.014222-30.492444l-290.929778-458.183111h579.413334L537.998222 600.689778z m27.136-146.773334v-180.906666h-56.888889V453.973333h56.888889z m0-275.000888v47.104h-56.888889v-47.104h56.888889z"  horiz-adv-x="1080" />
+      
+      <glyph glyph-name="icon_container__filled_b" unicode="&#59139;" d="M422.336 113.728V654.272a12.8 12.8 0 0 0 15.104 12.608l526.08-95.36a12.8 12.8 0 0 0 10.496-12.544v-344.064a12.8 12.8 0 0 0-10.432-12.544l-526.08-101.248a12.8 12.8 0 0 0-15.168 12.608z m78.464 57.856l23.168 3.584V596.672l-23.168 3.712v-428.8z m102.976 15.488l23.168 3.2V580.928l-23.168 3.776v-397.632z m102.976 381.44v-365.504l23.232 3.2V565.12l-23.232 3.328z m102.976-349.76l23.232 3.456V549.12l-23.232 3.52v-333.824z m103.04 318.08v-301.952l23.168 3.328v295.04l-23.232 3.584zM396.352 652.352v-537.6a12.8 12.8 0 0 0-14.976-12.672l-134.4 22.976V375.36h73.216v23.232H246.976V644.096l134.656 20.864a12.8 12.8 0 0 0 14.784-12.608z m-172.672-523.392v246.4H141.888v23.232h81.92v241.92l-134.976-20.928a12.8 12.8 0 0 1-10.88-12.672v-442.24a12.8 12.8 0 0 1 10.688-12.608l135.104-23.04z"  horiz-adv-x="1088" />
+      
+      <glyph glyph-name="icon_po__sscc_b" unicode="&#59134;" d="M216.768 864a32 32 0 0 1-32-32v-896a32 32 0 0 1 32-32h284.8v64h-252.8v832H579.2v-160.064a128 128 0 0 1 128-128h160.064v-176.384h64v204.8 1.92a32 32 0 0 1-9.344 24.32L633.728 854.528A32 32 0 0 1 608.448 864h-391.68z m426.432-112.128l175.424-176H707.2a64 64 0 0 0-64 64v112z m-63.552-640a143.808 143.808 0 1 0 287.616-0.064 143.808 143.808 0 0 0-287.616 0z m143.808 207.744a207.808 207.808 0 1 1 0-415.616 207.808 207.808 0 0 1 0 415.616z m80-207.808a80 80 0 1 0-160 0 80 80 0 0 0 160 0z"  horiz-adv-x="1088" />
+      
+      <glyph glyph-name="icon_po__request_b" unicode="&#59135;" d="M184.768 832a32 32 0 0 0 32 32h391.68a32 32 0 0 0 25.344-9.344l288.128-288.128a32 32 0 0 0 9.28-24.32l0.064-1.792v-270.784h-64V511.936H707.2a128 128 0 0 0-128 128V800H248.768v-832h309.248v-64H216.768a32 32 0 0 0-32 32V832z m633.856-256.064L643.2 751.872v-112a64 64 0 0 1 64-64h111.424z m-23.104-672v135.808h135.744v64H795.52v135.744h-64v-135.744H595.776v-64h135.68V-96h64z"  horiz-adv-x="1088" />
+      
       <glyph glyph-name="icon_currentlink_b" unicode="&#59132;" d="M102.4 384a409.6 409.6 0 1 0 819.2 0A409.6 409.6 0 0 0 102.4 384zM512 870.4a486.4 486.4 0 1 1 0-972.8A486.4 486.4 0 0 1 512 870.4z m0-742.336a256 256 0 1 1 0 512 256 256 0 0 1 0-512z"  horiz-adv-x="1024" />
       
       <glyph glyph-name="icon_jumplink_b1" unicode="&#59133;" d="M636.416 633.28h-252.16v96h368a48 48 0 0 0 48-48v-368h-96v252.16l-370.56-370.624-67.904 67.84 370.56 370.624z m305.6-610.24h-832v96h832v-96z"  horiz-adv-x="1088" />

src/styles/theme.scss

@@ -96,12 +96,14 @@
   --color-btn-main-plain-bg-hover: hsl(26, 100%, 95%);
   // main
   --color-btn-main-bg-hover: #d56200;
+  --color-btn-main-bg-disabled: rgba(237, 109, 0, 0.3);
   // success
   --color-btn-success-bg-hover: #009765;
   // warning
   --color-btn-warning-bg: #e9b227;
   --color-btn-warning-bg-hover: #d2a023;
   // danger
+  --color-btn-danger-bg: #C9353F;
   --color-btn-danger-bg-hover: #b53039;
 
   --color-tag-checked-all: #fff2e8;
@@ -246,6 +248,8 @@
   --color-vxe-table-visited-row-bg: #f2f2f2;
 
   --color-public-tracking-empty-bg: #fff;
+  --color-dot-unchecked: #eeeeee;
+  --color-dot-checked: #ed6d00;
 }
 
 :root.dark {

src/utils/timezone.ts

@@ -0,0 +1,27 @@
+export const defaultTimeZone = (zone: any) => {
+  if(zone == 'zh-CN' || zone == 'zh-TW' || zone == 'zh-HK'|| zone == 'en-AU'|| zone == 'ms-MY' || zone == 'id-ID' ) {
+    return 'UTC+08'
+  } else if(zone == 'ja-JP' || zone == 'ko-KR') {
+    return 'UTC+09'
+  } else if(zone == 'en-US') {
+    return 'UTC-08'
+  } else if(zone == 'en-GB' || zone == 'pt-PT') {
+    return 'UTC+00'
+  } else if(zone == 'en-NZ' ) {
+    return 'UTC+12'
+  } else if(zone == 'de-DE' || zone == 'fr-FR' || zone == 'es-ES'|| zone == 'it-IT'|| zone == 'nl-NL'|| zone == 'pl-PL'|| zone == 'sv-SE'|| zone == 'da-DK'|| zone == 'no-NO') {
+    return 'UTC+01'
+  } else if(zone == 'ru-RU' || zone == 'fi-FI' || zone == 'he-IL'|| zone == 'el-GR') {
+    return 'UTC+02'
+  } else if(zone == 'es-MX') {
+    return 'UTC-06'
+  } else if(zone == 'pt-BR') {
+    return 'UTC-03'
+  } else if(zone == 'ar-SA' || zone == 'tr-TR') {
+    return 'UTC+03'
+  } else if(zone == 'hi-IN') {
+    return 'UTC+05:30'
+  } else if(zone == 'th-TH' || zone == 'vi-VN') {
+    return 'UTC+07'
+  }
+}

src/views/OperationLog/src/components/BookingTable/src/BookingTable.vue

@@ -111,7 +111,7 @@ const getTableData = async (isPageChange?: boolean) => {
     .SearchOperationLog({
       cp: pageInfo.value.pageNo,
       ps: pageInfo.value.pageSize,
-      rc: -1,
+      rc,
       ...searchdata
     })
     .then((res: any) => {
@@ -153,7 +153,7 @@ const SearchOperationLog = (val: any) => {
     })
 }
 onMounted(() => {
-  Promise.all([getTableColumns(), getTableData()]).finally(() => {
+  Promise.all([getTableColumns(), getTableData(false)]).finally(() => {
     nextTick(() => {
       // tableRef.value && autoWidth(bookingTable.value, tableRef.value)
     })

src/views/SystemSettings/index.ts

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

src/views/SystemSettings/src/SystemSettings.vue

@@ -0,0 +1,284 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import AddRSettingTableules from './components/SettingTable'
+import MonitoringTable from './components/MonitoringTable'
+
+const TabActive = ref('Subscribe Notifications')
+const isMilestoneChecked = ref(false)
+const isContainerChecked = ref(false)
+const isDepartureChecked = ref(false)
+const isETDChangeChecked = ref(false)
+const isMilestoneAdded = ref(true)
+const isContainerAdded = ref(false)
+const isDepartureAdded = ref(true)
+const isETDChangeAdded = ref(false)
+const CollapseActive = ref()
+const isActiveCollapse = ref({
+  Milestone: false,
+  Container: false,
+  Departure: false,
+  ETDChange: false
+})
+// 展开与折叠
+const isActive = (name: any) => {
+  isContainerChecked.value = false
+  isMilestoneChecked.value = false
+  isETDChangeChecked.value = false
+  isDepartureChecked.value = false
+  isActiveCollapse.value.ETDChange = false
+  isActiveCollapse.value.Milestone = false
+  isActiveCollapse.value.Departure = false
+  isActiveCollapse.value.Container = false
+  isActiveCollapse.value[name] = true
+}
+const changeCollapse = (val: any) => {
+  if (val == 'Milestone') {
+    isActive('Milestone')
+    isMilestoneChecked.value = true
+  } else if (val == 'Container') {
+    isActive('Container')
+    isContainerChecked.value = true
+  } else if (val == 'Departure') {
+    isActive('Departure')
+    isDepartureChecked.value = true
+  } else if (val == 'ETDChange') {
+    isActive('ETDChange')
+    isETDChangeChecked.value = true
+  } else {
+    isContainerChecked.value = false
+    isMilestoneChecked.value = false
+    isETDChangeChecked.value = false
+    isDepartureChecked.value = false
+    isActiveCollapse.value.ETDChange = false
+    isActiveCollapse.value.Milestone = false
+    isActiveCollapse.value.Departure = false
+    isActiveCollapse.value.Container = false
+  }
+}
+
+const UnsavedCollapse = () => {
+  CollapseActive.value = ''
+}
+
+// System Settings初始数据
+const subscribeInit = ref()
+const getsubscribe = () => {
+  $api.getsubscribe({}).then((res: any) => {
+    if (res.code === 200) {
+      subscribeInit.value = res.data
+    }
+  })
+}
+
+onMounted(() => {
+  getsubscribe()
+})
+</script>
+<template>
+  <div class="Title">System Settings</div>
+  <el-tabs v-model="TabActive" class="demo-tabs">
+    <el-tab-pane label="Personal Profile" name="Personal Profile"> Personal Profile </el-tab-pane>
+    <el-tab-pane label="Subscribe Notifications" name="Subscribe Notifications">
+      <div class="subscribedTitle">Notification Events for Subscribed Shipments</div>
+      <div class="SubscribeCollapse">
+        <el-collapse v-model="CollapseActive" accordion @change="changeCollapse">
+          <el-collapse-item name="Milestone" :class="isMilestoneChecked ? 'border_ischecked' : ''">
+            <template #title>
+              <div class="flex">
+                <div class="collapse_left" :class="isMilestoneAdded ? 'text_ischecked' : ''">
+                  <div class="dot" :class="isMilestoneAdded ? 'dot_ischecked' : ''"></div>
+                  Milestone Update
+                </div>
+                <div class="collapse_edit">{{ isMilestoneAdded ? 'Edit' : 'Add' }}</div>
+              </div>
+            </template>
+            <div>
+              <AddRules
+                TitleType="Milestone"
+                @UnsavedCollapse="UnsavedCollapse"
+                :SystemList="subscribeInit"
+              ></AddRules>
+            </div>
+          </el-collapse-item>
+          <el-collapse-item name="Container" :class="isContainerChecked ? 'border_ischecked' : ''">
+            <template #title>
+              <div class="flex">
+                <div class="collapse_left" :class="isContainerAdded ? 'text_ischecked' : ''">
+                  <div class="dot" :class="isContainerAdded ? 'dot_ischecked' : ''"></div>
+                  Container Status Update
+                </div>
+                <div class="collapse_edit">{{ isContainerAdded ? 'Edit' : 'Add' }}</div>
+              </div>
+            </template>
+            <div>
+              <AddRules
+                TitleType="Container"
+                @UnsavedCollapse="UnsavedCollapse"
+                :SystemList="subscribeInit"
+              ></AddRules>
+            </div>
+          </el-collapse-item>
+          <el-collapse-item name="Departure" :class="isDepartureChecked ? 'border_ischecked' : ''">
+            <template #title>
+              <div class="flex">
+                <div class="collapse_left" :class="isDepartureAdded ? 'text_ischecked' : ''">
+                  <div class="dot" :class="isDepartureAdded ? 'dot_ischecked' : ''"></div>
+                  Departure/Arrival Delay
+                </div>
+                <div class="collapse_edit">{{ isDepartureAdded ? 'Edit' : 'Add' }}</div>
+              </div>
+            </template>
+            <div>
+              <AddRules
+                TitleType="Departure"
+                @UnsavedCollapse="UnsavedCollapse"
+                :SystemList="subscribeInit"
+              ></AddRules>
+            </div>
+          </el-collapse-item>
+          <el-collapse-item name="ETDChange" :class="isETDChangeChecked ? 'border_ischecked' : ''">
+            <template #title>
+              <div class="flex">
+                <div class="collapse_left" :class="isETDChangeAdded ? 'text_ischecked' : ''">
+                  <div class="dot" :class="isETDChangeAdded ? 'dot_ischecked' : ''"></div>
+                  ETD/ETA Change
+                </div>
+                <div class="collapse_edit">{{ isETDChangeAdded ? 'Edit' : 'Add' }}</div>
+              </div>
+            </template>
+            <div>
+              <AddRules
+                TitleType="ETDChange"
+                @UnsavedCollapse="UnsavedCollapse"
+                :SystemList="subscribeInit"
+              ></AddRules>
+            </div>
+          </el-collapse-item>
+        </el-collapse>
+      </div>
+      <div class="TableTitle">Added Rules</div>
+      <AddRSettingTableules></AddRSettingTableules>
+    </el-tab-pane>
+    <el-tab-pane label="Monitoring Settings" name="Monitoring Settings">
+      <div class="subscribedTitle">Added Rules</div>
+      <MonitoringTable></MonitoringTable>
+    </el-tab-pane>
+  </el-tabs>
+</template>
+
+<style lang="scss" scoped>
+.Title {
+  display: flex;
+  height: 68px;
+  font-size: var(--font-size-6);
+  font-weight: 700;
+  padding: 0 24px;
+  align-items: center;
+}
+.TableTitle {
+  font-size: 18px;
+  font-weight: 700;
+  padding: 21px 24px 13px 24px;
+}
+.SubscribeCollapse {
+  padding: 0 24px 24px 24px;
+  border-bottom: 1px solid var(--color-select-border);
+}
+:deep(.el-tabs__nav-wrap:after) {
+  height: 2px;
+}
+:deep(.el-tabs__item) {
+  color: var(--color-neutral-1);
+  font-weight: 400;
+  font-size: 18px;
+  padding: 0 64px;
+}
+.subscribedTitle {
+  color: var(--color-neutral-1);
+  font-weight: 700;
+  font-size: 18px;
+  padding: 0 24px;
+  margin: 38px 0 20px 0;
+}
+:deep(.el-collapse) {
+  border: none;
+}
+:deep(.el-collapse-item__wrap) {
+  border: none;
+  background-color: transparent;
+}
+:deep(.el-collapse-item) {
+  border: none;
+  width: 100%;
+  border-radius: 6px;
+  margin: 8px 0;
+}
+:deep(.el-collapse-item__header) {
+  border: 1px solid var(--color-select-border);
+  padding: 0 24px 0 12px;
+  border-radius: 6px;
+  color: var(--color-neutral-1);
+  font-size: 14px;
+  font-weight: 700;
+  height: 64px;
+  display: flex;
+  align-items: center;
+  background-color: transparent;
+}
+.border_ischecked {
+  border: 2px solid var(--color-theme);
+}
+:deep(.el-tabs__nav) {
+  padding-left: 24px;
+}
+:deep(.el-collapse-item__header):hover {
+  background-color: var(--border-hover-color);
+  border-color: var(--border-hover-color);
+}
+:deep(.el-collapse-item__header.is-active) {
+  background-color: var(--border-hover-color);
+  border-color: var(--border-hover-color);
+}
+.flex {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 98%;
+  margin-right: 8px;
+}
+.collapse_left {
+  display: flex;
+  align-items: center;
+}
+.dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background-color: var(--color-dot-unchecked);
+  margin: 0 15px 0 9px;
+}
+.dot_ischecked {
+  background-color: var(--color-dot-checked);
+}
+.text_ischecked {
+  color: var(--color-theme);
+}
+.collapse_edit {
+  color: var(--color-theme);
+  font-weight: 400;
+}
+:deep(.el-collapse-item__arrow) {
+  width: 16px;
+  height: 16px;
+  background-image: url('../src/images/icon_expand_colorful.png');
+  background-size: contain;
+  background-repeat: no-repeat;
+  transform: rotate(0);
+}
+:deep(.el-collapse-item__arrow.is-active) {
+  transform: rotate(-180deg);
+}
+:deep(.el-icon svg) {
+  width: 0;
+}
+</style>

src/views/SystemSettings/src/components/CreateNewrule/index.ts

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

src/views/SystemSettings/src/components/CreateNewrule/src/CreateNewrule.vue

@@ -0,0 +1,163 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+const notificationvalue = ref()
+const notificationoptions = ref([
+  {
+    label: 'Milestone Update',
+    value: 'Milestone Update'
+  },
+  {
+    label: 'Container Status Update',
+    value: 'Container Status Update'
+  },
+  {
+    label: 'Departure/Arrival Delay',
+    value: 'Departure/Arrival Delay'
+  },
+  {
+    label: 'ETD/ETA Change',
+    value: 'ETD/ETA Change'
+  }
+])
+
+// 退回上一页
+const CancelCreate = () => {
+  router.back()
+}
+</script>
+<template>
+  <div class="Title">
+    <div>Create New Rule</div>
+    <div>
+      <el-button class="create_button" type="default" @click="CancelCreate">
+        <span class="iconfont_icon">
+          <svg class="iconfont" aria-hidden="true">
+            <use xlink:href="#icon-icon_return_b"></use>
+          </svg>
+        </span>
+        Cancel
+      </el-button>
+      <el-button
+        :disabled="notificationvalue == '' || notificationvalue == undefined"
+        class="el-button--main create_button"
+      >
+        <span class="iconfont_icon">
+          <svg class="iconfont" aria-hidden="true">
+            <use xlink:href="#icon-icon_save_b"></use>
+          </svg>
+        </span>
+        Save
+      </el-button>
+    </div>
+  </div>
+  <div class="contetnt">
+    <div class="notification">
+      <div class="notification_title">Notification Events</div>
+      <div>
+        <el-select v-model="notificationvalue" placeholder="Select event" style="width: 400px">
+          <el-option
+            v-for="item in notificationoptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </div>
+    </div>
+    <div class="setting">
+      <div class="setting_header">Setting</div>
+      <TableEmpty
+        v-if="notificationvalue == '' || notificationvalue == undefined"
+        style="margin-top: 100px"
+        EmptyTitle="Please select Notification Events first"
+      ></TableEmpty>
+      <div v-else>
+        <AddRules TitleType="CreateRule"></AddRules>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.Title {
+  display: flex;
+  background-color: var(--color-mode);
+  height: 68px;
+  font-size: var(--font-size-6);
+  font-weight: 700;
+  padding: 0 24px;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid var(--color-border);
+}
+.create_button {
+  width: 115px;
+  height: 40px;
+}
+.contetnt {
+  padding: 0 24px;
+  margin-top: 16px;
+  margin-bottom: 14px;
+}
+.notification {
+  border: 1px solid var(--color-border);
+  padding: 16px;
+  border-radius: 12px;
+}
+.notification_title {
+  font-size: 18px;
+  font-weight: 700;
+  margin-bottom: 21px;
+}
+.setting {
+  margin-top: 8px;
+  border: 1px solid var(--color-border);
+  border-radius: 12px;
+  min-height: 741px;
+}
+.setting_header {
+  font-size: 18px;
+  font-weight: 700;
+  background-color: var(--color-dialog-header-bg);
+  height: 48px;
+  padding: 13px 16px;
+  border-radius: 12px 12px 0 0;
+}
+:deep(.el-collapse-item__header):hover {
+  background-color: var(--border-hover-color);
+  border-color: var(--border-hover-color);
+}
+:deep(.el-collapse-item__header.is-active) {
+  background-color: var(--border-hover-color);
+  border-color: var(--border-hover-color);
+}
+:deep(.el-collapse) {
+  border: none;
+}
+:deep(.el-collapse-item__wrap) {
+  border: none;
+  background-color: transparent;
+}
+:deep(.el-collapse-item) {
+  border: none;
+  width: 100%;
+  border-radius: 6px;
+  margin: 8px 0;
+}
+:deep(.el-collapse-item__header) {
+  border: 1px solid var(--color-select-border);
+  padding: 0 24px 0 12px;
+  border-radius: 6px;
+  color: var(--color-neutral-1);
+  font-size: 14px;
+  font-weight: 700;
+  height: 64px;
+  display: flex;
+  align-items: center;
+  background-color: transparent;
+}
+</style>

src/views/SystemSettings/src/components/MonitoringTable/index.ts

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

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

@@ -0,0 +1,206 @@
+<script setup lang="ts">
+import { type VxeGridInstance, type VxeGridProps } from 'vxe-table'
+import { useRowClickStyle } from '@/hooks/rowClickStyle'
+import dayjs from 'dayjs'
+import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+const columnstest = ref([
+  {
+    field: 'Event',
+    title: 'Event',
+    type: 'normal',
+    formatter: ''
+  },
+  {
+    field: 'Shipment Range',
+    title: 'Shipment Range',
+    type: 'normal',
+    formatter: ''
+  },
+  {
+    field: 'Event Details',
+    title: 'Event Details',
+    type: 'normal',
+    formatter: ''
+  },
+  {
+    field: 'Frequency',
+    title: 'Frequency',
+    type: 'normal',
+    formatter: ''
+  },
+  {
+    field: 'Methods',
+    title: 'Methods',
+    type: 'normal',
+    formatter: ''
+  }
+])
+const datatest = ref([
+  // {
+  //   Event: '123',
+  //   ['Shipment Range']: '123',
+  //   ['Event Details']: '123',
+  //   Frequency: '123',
+  //   Methods: '123'
+  // }
+])
+const visible = ref(false)
+const tableData = ref<VxeGridProps<any>>({
+  border: true,
+  round: true,
+  minHeight: 726,
+  maxHeight: 726,
+  columns: [],
+  data: [],
+  scrollY: { enabled: true, oSize: 20, gt: 30 },
+  stripe: true,
+  emptyText: ' ',
+  showHeaderOverflow: true,
+  showOverflow: true,
+  headerRowStyle: {
+    backgroundColor: 'var(--color-table-header-bg)'
+  },
+  columnConfig: { resizable: true, useKey: true },
+  rowConfig: { isHover: true }
+})
+
+const tableRef = ref<VxeGridInstance | null>(null)
+
+const handleColumns = (columns: any) => {
+  const newColumns = columns.map((item: any) => {
+    let curColumn: any = {
+      title: item.title,
+      field: item.field
+    }
+    // 格式化
+    if (item.formatter === 'date') {
+      curColumn = {
+        ...curColumn,
+        formatter: ({ cellValue }: any) =>
+          cellValue ? dayjs(cellValue).format('MMM-DD-YYYY ') : '--'
+      }
+    }
+    return curColumn
+  })
+  return newColumns
+}
+// 获取表格列
+const getTableColumns = async () => {
+  tableData.value.columns = handleColumns(columnstest.value)
+  // await $api.getBookingTableColumns().then((res: any) => {
+  //   if (res.code === 200) {
+  //     tableData.value.columns = [
+  //       ...handleColumns(res.data.BookingTableColumns)
+  //     ]
+  tableData.value.columns.push({
+    title: 'Operation',
+    fixed: 'right',
+    width: 100,
+    slots: { default: 'action' }
+  })
+  //   }
+  // })
+}
+// 获取表格数据
+const getTableData = async () => {
+  // 保存页长以及当前页码
+  tableData.value.data = datatest.value
+  // await $api
+  //   .getBookingTableData({
+  //     other_filed: '',
+  //     ...filterdataobj.value
+  //   })
+  //   .then((res: any) => {
+  //     if (res.code === 200) {
+  //       tableData.value.data = res.data
+  //     }
+  //   })
+  //   .finally(() => {
+  //   })
+}
+
+// 实现行点击样式
+useRowClickStyle(tableRef)
+
+// 点击删除
+const handleDelete = (row: any) => {
+  visible.value = true
+  console.log(row)
+}
+
+// 跳转Create New Rule页面
+const ToCreateRule = () => {
+  router.push({
+    path: '/SystemSettings/createnewrule',
+    query: {}
+  })
+}
+
+onMounted(() => {
+  getTableColumns()
+  getTableData()
+})
+</script>
+
+<template>
+  <div class="SettingTable">
+    <vxe-grid class="radius-bottom" ref="tableRef" :style="{ border: 'none' }" v-bind="tableData">
+      <!-- 空数据时的插槽 -->
+      <template #empty v-if="tableData.data.length === 0">
+        <TableEmpty EmptyTitle="Customize your shipment tracking preferences.">
+          <template #suggestion>
+            <el-button class="el-button--main" @click="ToCreateRule">+ Add Rule</el-button>
+          </template>
+        </TableEmpty>
+      </template>
+      <template #action="{ row }">
+        <el-popover :visible="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"
+              >cancel</el-button
+            >
+            <el-button style="width: 100px" type="warning" @click="visible = false"> OK </el-button>
+          </div>
+          <template #reference>
+            <el-button @click="handleDelete(row)" class="el-button--blue" style="height: 24px">
+              <span class="font_family icon-icon_delete_b"></span>
+            </el-button>
+          </template>
+        </el-popover>
+      </template>
+    </vxe-grid>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.SettingTable {
+  padding: 0 24px 20px 24px;
+}
+.font_family::before {
+  color: var(--color-btn-danger-bg);
+}
+.icon_alert::before {
+  color: var(--color-btn-warning-bg);
+}
+.delete_title {
+  font-size: 18px;
+  font-weight: 700;
+  padding: 20px 16px;
+  color: var(--color-neutral-1);
+}
+.delete_content {
+  font-size: 14px;
+  font-weight: 400;
+  color: var(--color-neutral-1);
+  padding: 15px 0 33px 37px;
+}
+</style>

src/views/SystemSettings/src/components/SettingTable/index.ts

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

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

@@ -0,0 +1,184 @@
+<script setup lang="ts">
+import { type VxeGridInstance, type VxeGridProps } from 'vxe-table'
+import { useRowClickStyle } from '@/hooks/rowClickStyle'
+import dayjs from 'dayjs'
+import { ref, onMounted } from 'vue'
+
+const columnstest = ref([
+  {
+    field: 'Event',
+    title: 'Event',
+    type: 'normal',
+    formatter: ''
+  },
+  {
+    field: 'Event Details',
+    title: 'Event Details',
+    type: 'normal',
+    formatter: ''
+  },
+  {
+    field: 'Frequency',
+    title: 'Frequency',
+    type: 'normal',
+    formatter: ''
+  },
+  {
+    field: 'Methods',
+    title: 'Methods',
+    type: 'normal',
+    formatter: ''
+  }
+])
+const datatest = ref([
+  {
+    Event: '123',
+    ['Event Details']: '123',
+    Frequency: '123',
+    Methods: '123'
+  }
+])
+const visible = ref(false)
+const tableData = ref<VxeGridProps<any>>({
+  border: true,
+  round: true,
+  minHeight: 70,
+  maxHeight: 500,
+  columns: [],
+  data: [],
+  scrollY: { enabled: true, oSize: 20, gt: 30 },
+  stripe: true,
+  emptyText: ' ',
+  showHeaderOverflow: true,
+  showOverflow: true,
+  headerRowStyle: {
+    backgroundColor: 'var(--color-table-header-bg)'
+  },
+  columnConfig: { resizable: true, useKey: true },
+  rowConfig: { isHover: true }
+})
+
+const tableRef = ref<VxeGridInstance | null>(null)
+
+const handleColumns = (columns: any) => {
+  const newColumns = columns.map((item: any) => {
+    let curColumn: any = {
+      title: item.title,
+      field: item.field
+    }
+    // 格式化
+    if (item.formatter === 'date') {
+      curColumn = {
+        ...curColumn,
+        formatter: ({ cellValue }: any) =>
+          cellValue ? dayjs(cellValue).format('MMM-DD-YYYY ') : '--'
+      }
+    }
+    return curColumn
+  })
+  return newColumns
+}
+// 获取表格列
+const getTableColumns = async () => {
+  tableData.value.columns = handleColumns(columnstest.value)
+  // await $api.getBookingTableColumns().then((res: any) => {
+  //   if (res.code === 200) {
+  //     tableData.value.columns = [
+  //       ...handleColumns(res.data.BookingTableColumns)
+  //     ]
+  tableData.value.columns.push({
+    title: 'Action',
+    fixed: 'right',
+    width: 80,
+    slots: { default: 'action' }
+  })
+  //   }
+  // })
+}
+// 获取表格数据
+const getTableData = async () => {
+  // 保存页长以及当前页码
+  tableData.value.data = datatest.value
+  // await $api
+  //   .getBookingTableData({
+  //     other_filed: '',
+  //     ...filterdataobj.value
+  //   })
+  //   .then((res: any) => {
+  //     if (res.code === 200) {
+  //       tableData.value.data = res.data
+  //     }
+  //   })
+  //   .finally(() => {
+  //   })
+}
+
+// 实现行点击样式
+useRowClickStyle(tableRef)
+
+// 点击删除
+const handleDelete = (row: any) => {
+  visible.value = true
+  console.log(row)
+}
+
+onMounted(() => {
+  getTableColumns()
+  getTableData()
+})
+</script>
+
+<template>
+  <div class="SettingTable">
+    <vxe-grid class="radius-bottom" ref="tableRef" :style="{ border: 'none' }" v-bind="tableData">
+      <template #empty>
+        <div class="empty">No data</div>
+      </template>
+
+      <template #action="{ row }">
+        <el-popover :visible="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"
+              >cancel</el-button
+            >
+            <el-button style="width: 100px" type="warning" @click="visible = false"> OK </el-button>
+          </div>
+          <template #reference>
+            <el-button @click="handleDelete(row)" class="el-button--blue" style="height: 24px">
+              <span class="font_family icon-icon_delete_b"></span>
+            </el-button>
+          </template>
+        </el-popover>
+      </template>
+    </vxe-grid>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.SettingTable {
+  padding: 0 24px 20px 24px;
+}
+.font_family::before {
+  color: var(--color-btn-danger-bg);
+}
+.icon_alert::before {
+  color: var(--color-btn-warning-bg);
+}
+.delete_title {
+  font-size: 18px;
+  font-weight: 700;
+  padding: 20px 16px;
+  color: var(--color-neutral-1);
+}
+.delete_content {
+  font-size: 14px;
+  font-weight: 400;
+  color: var(--color-neutral-1);
+  padding: 15px 0 33px 37px;
+}
+</style>