|
|
@@ -0,0 +1,1215 @@
|
|
|
+<script lang="ts" setup>
|
|
|
+import { ref, watch, onMounted } 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 NotiFrequency from './components/NotiFrequency.vue'
|
|
|
+import ShipmentRange from './components/ShipmentRange.vue'
|
|
|
+import NotiMethods from './components/NotiMethods.vue'
|
|
|
+import submitsucessful from './images/submit_successful.png'
|
|
|
+interface CheckboxItem {
|
|
|
+ value: string
|
|
|
+ label: string
|
|
|
+}
|
|
|
+
|
|
|
+interface Props {
|
|
|
+ SystemList: Object
|
|
|
+ TitleType: String
|
|
|
+}
|
|
|
+const MilestoneOceanListInit = ref<CheckboxItem[]>([])
|
|
|
+const MilestoneOceanListChecked = ref()
|
|
|
+const MilestoneAirListInit = ref<CheckboxItem[]>([])
|
|
|
+const MilestoneAirListChecked = ref()
|
|
|
+const ContainerOceanListInit = ref<CheckboxItem[]>([])
|
|
|
+const ContainerOceanListChecked = ref()
|
|
|
+const props = defineProps<Props>()
|
|
|
+let savesubscribeobj: any = {}
|
|
|
+const SystemList = ref(props.SystemList)
|
|
|
+const RulesActive = ref([
|
|
|
+ 'ShipmentRange',
|
|
|
+ 'SelectMilestone',
|
|
|
+ 'NotificationFrequency',
|
|
|
+ 'NotificationMethod'
|
|
|
+])
|
|
|
+const OceanCheckList = ref()
|
|
|
+const AirCheckList = ref()
|
|
|
+const ContainerOceanList = ref()
|
|
|
+const IsFirstActive = ref(true)
|
|
|
+const IsTwoActive = ref(true)
|
|
|
+const IsThreeActive = ref(true)
|
|
|
+const IsFourActive = ref(true)
|
|
|
+const UnableSaveVisible = ref(false)
|
|
|
+const SaveedVisible = ref(false)
|
|
|
+const DelayedDeparturedList = ref()
|
|
|
+const DelayedAirdList = ref()
|
|
|
+const ETDOceanList = ref()
|
|
|
+const ETDAirList = ref()
|
|
|
+const FrequencyDataMil = ref()
|
|
|
+const FrequencyDataCon = ref()
|
|
|
+const FrequencyDataDep = ref()
|
|
|
+const FrequencyDataETD = ref()
|
|
|
+const MethodsDataMil = ref()
|
|
|
+const MethodsDataCon = ref()
|
|
|
+const MethodsDataDep = ref()
|
|
|
+const MethodsDataETD = ref()
|
|
|
+const DelayedDataInit = ref()
|
|
|
+const DelayedDataInitAir = ref()
|
|
|
+const OceanETDInit = ref()
|
|
|
+const AirETDInit = ref()
|
|
|
+
|
|
|
+watch(
|
|
|
+ () => props.SystemList,
|
|
|
+ (current) => {
|
|
|
+ SystemList.value = current
|
|
|
+ FrequencyDataMil.value = current['Milestone_Update']
|
|
|
+ MethodsDataMil.value = current['Milestone_Update']
|
|
|
+ FrequencyDataCon.value = current['Container_Status_Update']
|
|
|
+ MethodsDataCon.value = current['Container_Status_Update']
|
|
|
+ FrequencyDataDep.value = current['Departure/Arrival_Delay']
|
|
|
+ MethodsDataDep.value = current['Departure/Arrival_Delay']
|
|
|
+ FrequencyDataETD.value = current['ETD/ETA_Change']
|
|
|
+ MethodsDataETD.value = current['ETD/ETA_Change']
|
|
|
+ Initdata(current)
|
|
|
+ }
|
|
|
+)
|
|
|
+
|
|
|
+const MonitoringList = ref()
|
|
|
+const getInitMonitoring = () => {
|
|
|
+ $api
|
|
|
+ .MonitoringInit({})
|
|
|
+ .then((res: any) => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ MonitoringList.value = res.data
|
|
|
+ MilestoneOceanListInit.value = res.data.OceanCheckBoxList
|
|
|
+ MilestoneAirListInit.value = res.data.AirCheckBoxList
|
|
|
+ ContainerOceanListInit.value = res.data.CtnrCheckBoxList
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .finally(() => {})
|
|
|
+}
|
|
|
+onMounted(() => {
|
|
|
+ getInitMonitoring()
|
|
|
+})
|
|
|
+// 初始赋值
|
|
|
+const Initdata = (val: any) => {
|
|
|
+ console.log(val)
|
|
|
+ MilestoneOceanListInit.value = val.Milestone_Update.OceanCheckBoxList
|
|
|
+ MilestoneOceanListChecked.value = val.Milestone_Update.OceanCheckedList
|
|
|
+ OceanCheckList.value = val.Milestone_Update.OceanCheckedList
|
|
|
+ MilestoneAirListInit.value = val.Milestone_Update.AirCheckBoxList
|
|
|
+ MilestoneAirListChecked.value = val.Milestone_Update.AirCheckedList
|
|
|
+ AirCheckList.value = val.Milestone_Update.AirCheckedList
|
|
|
+ ContainerOceanListInit.value = val.Container_Status_Update.CtnrCheckBoxList
|
|
|
+ ContainerOceanListChecked.value = val.Container_Status_Update.CtnrCheckedList
|
|
|
+ ContainerOceanList.value = val.Container_Status_Update.CtnrCheckedList
|
|
|
+ let OceanObj: any = {}
|
|
|
+ OceanObj.atd_etd = val['Departure/Arrival_Delay'].ocean_atd_sub_etd
|
|
|
+ OceanObj.atd_etd_unit = val['Departure/Arrival_Delay'].ocean_atd_sub_etd_unit
|
|
|
+ OceanObj.ata_eta = val['Departure/Arrival_Delay'].ocean_ata_sub_eta
|
|
|
+ OceanObj.ata_eta_unit = val['Departure/Arrival_Delay'].ocean_ata_sub_eta_unit
|
|
|
+ DelayedDataInit.value = OceanObj
|
|
|
+ let AirObj: any = {}
|
|
|
+ AirObj.atd_etd = val['Departure/Arrival_Delay'].air_atd_sub_etd
|
|
|
+ AirObj.atd_etd_unit = val['Departure/Arrival_Delay'].air_atd_sub_etd_unit
|
|
|
+ AirObj.ata_eta = val['Departure/Arrival_Delay'].air_ata_sub_eta
|
|
|
+ AirObj.ata_eta_unit = val['Departure/Arrival_Delay'].air_ata_sub_eta_unit
|
|
|
+ DelayedDataInitAir.value = AirObj
|
|
|
+ let OceanChange: any = {}
|
|
|
+ OceanChange.ETDradio = val['ETD/ETA_Change'].ocean_etd_change
|
|
|
+ OceanChange.etd_old_sub_new = val['ETD/ETA_Change'].ocean_etd_old_sub_new
|
|
|
+ OceanChange.etd_old_sub_new_unit = val['ETD/ETA_Change'].ocean_etd_old_sub_new_unit
|
|
|
+ OceanChange.ETAradio = val['ETD/ETA_Change'].ocean_eta_change
|
|
|
+ OceanChange.eta_old_sub_new = val['ETD/ETA_Change'].ocean_eta_old_sub_new
|
|
|
+ OceanChange.eta_old_sub_new_unit = val['ETD/ETA_Change'].ocean_eta_old_sub_new_unit
|
|
|
+ OceanETDInit.value = OceanChange
|
|
|
+ let AirChange: any = {}
|
|
|
+ AirChange.ETDradio = val['ETD/ETA_Change'].air_etd_change
|
|
|
+ AirChange.etd_old_sub_new = val['ETD/ETA_Change'].air_etd_old_sub_new
|
|
|
+ AirChange.etd_old_sub_new_unit = val['ETD/ETA_Change'].air_etd_old_sub_new_unit
|
|
|
+ AirChange.ETAradio = val['ETD/ETA_Change'].air_eta_change
|
|
|
+ AirChange.eta_old_sub_new = val['ETD/ETA_Change'].air_eta_old_sub_new
|
|
|
+ AirChange.eta_old_sub_new_unit = val['ETD/ETA_Change'].air_eta_old_sub_new_unit
|
|
|
+ AirETDInit.value = AirChange
|
|
|
+}
|
|
|
+
|
|
|
+// 给tag list赋值
|
|
|
+const ChangeCheckOceanRules = (val: any) => {
|
|
|
+ OceanCheckList.value = val
|
|
|
+}
|
|
|
+const ChangeContainerRules = (val: any) => {
|
|
|
+ ContainerOceanList.value = val
|
|
|
+}
|
|
|
+// delayed赋值
|
|
|
+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.Arrival.split(' ')[4]
|
|
|
+ savesubscribeobj.ocean_ata_sub_eta_unit = val.Arrival.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.Arrival.split(' ')[4]
|
|
|
+ savesubscribeobj.air_ata_sub_eta_unit = val.Arrival.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 createListMilestone = ref()
|
|
|
+const createListContainer = ref()
|
|
|
+const createListDeparture = ref()
|
|
|
+const createListETDChange = ref()
|
|
|
+
|
|
|
+let createObj: any = {
|
|
|
+ Transportstr: '',
|
|
|
+ Timestr: ''
|
|
|
+}
|
|
|
+const changecheckCreateRulesMilestone = (val: any, value: any) => {
|
|
|
+ createListMilestone.value = []
|
|
|
+ createObj.Transportstr = val
|
|
|
+ if (createObj.Transportstr != '') {
|
|
|
+ createListMilestone.value.push(createObj.Transportstr)
|
|
|
+ }
|
|
|
+ if (createObj.Timestr != '') {
|
|
|
+ createListMilestone.value.push(createObj.Timestr)
|
|
|
+ }
|
|
|
+ savesubscribeobj.shipment_transport_mode = value
|
|
|
+ savesubscribeobj.shipment_details = createListMilestone.value.join(';\n')
|
|
|
+}
|
|
|
+const ChangeCheckTimeRulesMilestone = (val: any, time: any) => {
|
|
|
+ createListMilestone.value = []
|
|
|
+ createObj.Timestr = val
|
|
|
+ if (val.includes('ETD')) {
|
|
|
+ savesubscribeobj.shipment_etd_limit = time
|
|
|
+ savesubscribeobj.shipment_eta_limit = ''
|
|
|
+ }
|
|
|
+ if (val.includes('ETA')) {
|
|
|
+ savesubscribeobj.shipment_eta_limit = time
|
|
|
+ savesubscribeobj.shipment_etd_limit = ''
|
|
|
+ }
|
|
|
+ if (createObj.Transportstr != '') {
|
|
|
+ createListMilestone.value.push(createObj.Transportstr)
|
|
|
+ }
|
|
|
+ if (createObj.Timestr != '') {
|
|
|
+ createListMilestone.value.push(createObj.Timestr)
|
|
|
+ }
|
|
|
+ savesubscribeobj.shipment_details = createListMilestone.value.join(';\n')
|
|
|
+}
|
|
|
+const changecheckCreateRulesContainer = (val: any, value: any) => {
|
|
|
+ createListContainer.value = []
|
|
|
+ createObj.Transportstr = val
|
|
|
+ if (createObj.Transportstr != '') {
|
|
|
+ createListContainer.value.push(createObj.Transportstr)
|
|
|
+ }
|
|
|
+ if (createObj.Timestr != '') {
|
|
|
+ createListContainer.value.push(createObj.Timestr)
|
|
|
+ }
|
|
|
+ savesubscribeobj.shipment_transport_mode = value
|
|
|
+ savesubscribeobj.shipment_details = createListMilestone.value.join(';\n')
|
|
|
+}
|
|
|
+const ChangeCheckTimeRulesContainer = (val: any, time: any) => {
|
|
|
+ createListContainer.value = []
|
|
|
+ createObj.Timestr = val
|
|
|
+ if (val.includes('ETD')) {
|
|
|
+ savesubscribeobj.shipment_etd_limit = time
|
|
|
+ savesubscribeobj.shipment_eta_limit = ''
|
|
|
+ }
|
|
|
+ if (val.includes('ETA')) {
|
|
|
+ savesubscribeobj.shipment_eta_limit = time
|
|
|
+ savesubscribeobj.shipment_etd_limit = ''
|
|
|
+ }
|
|
|
+ if (createObj.Transportstr != '') {
|
|
|
+ createListContainer.value.push(createObj.Transportstr)
|
|
|
+ }
|
|
|
+ if (createObj.Timestr != '') {
|
|
|
+ createListContainer.value.push(createObj.Timestr)
|
|
|
+ }
|
|
|
+ savesubscribeobj.shipment_details = createListMilestone.value.join(';\n')
|
|
|
+}
|
|
|
+const changecheckCreateRulesDeparture = (val: any, value: any) => {
|
|
|
+ createListDeparture.value = []
|
|
|
+ createObj.Transportstr = val
|
|
|
+ if (createObj.Transportstr != '') {
|
|
|
+ createListDeparture.value.push(createObj.Transportstr)
|
|
|
+ }
|
|
|
+ if (createObj.Timestr != '') {
|
|
|
+ createListDeparture.value.push(createObj.Timestr)
|
|
|
+ }
|
|
|
+ savesubscribeobj.shipment_transport_mode = value
|
|
|
+ savesubscribeobj.shipment_details = createListMilestone.value.join(';\n')
|
|
|
+}
|
|
|
+const ChangeCheckTimeRulesDeparture = (val: any, time: any) => {
|
|
|
+ createListDeparture.value = []
|
|
|
+ createObj.Timestr = val
|
|
|
+ if (val.includes('ETD')) {
|
|
|
+ savesubscribeobj.shipment_etd_limit = time
|
|
|
+ savesubscribeobj.shipment_eta_limit = ''
|
|
|
+ }
|
|
|
+ if (val.includes('ETA')) {
|
|
|
+ savesubscribeobj.shipment_eta_limit = time
|
|
|
+ savesubscribeobj.shipment_etd_limit = ''
|
|
|
+ }
|
|
|
+ if (createObj.Transportstr != '') {
|
|
|
+ createListDeparture.value.push(createObj.Transportstr)
|
|
|
+ }
|
|
|
+ if (createObj.Timestr != '') {
|
|
|
+ createListDeparture.value.push(createObj.Timestr)
|
|
|
+ }
|
|
|
+ savesubscribeobj.shipment_details = createListMilestone.value.join(';\n')
|
|
|
+}
|
|
|
+const changecheckCreateRulesETDChange = (val: any, value: any) => {
|
|
|
+ createListETDChange.value = []
|
|
|
+ createObj.Transportstr = val
|
|
|
+ if (createObj.Transportstr != '') {
|
|
|
+ createListETDChange.value.push(createObj.Transportstr)
|
|
|
+ }
|
|
|
+ if (createObj.Timestr != '') {
|
|
|
+ createListETDChange.value.push(createObj.Timestr)
|
|
|
+ }
|
|
|
+ savesubscribeobj.shipment_transport_mode = value
|
|
|
+ savesubscribeobj.shipment_details = createListMilestone.value.join(';\n')
|
|
|
+}
|
|
|
+const ChangeCheckTimeRulesETDChange = (val: any, time: any) => {
|
|
|
+ createListETDChange.value = []
|
|
|
+ createObj.Timestr = val
|
|
|
+ if (val.includes('ETD')) {
|
|
|
+ savesubscribeobj.shipment_etd_limit = time
|
|
|
+ savesubscribeobj.shipment_eta_limit = ''
|
|
|
+ }
|
|
|
+ if (val.includes('ETA')) {
|
|
|
+ savesubscribeobj.shipment_eta_limit = time
|
|
|
+ savesubscribeobj.shipment_etd_limit = ''
|
|
|
+ }
|
|
|
+ if (createObj.Transportstr != '') {
|
|
|
+ createListETDChange.value.push(createObj.Transportstr)
|
|
|
+ }
|
|
|
+ if (createObj.Timestr != '') {
|
|
|
+ createListETDChange.value.push(createObj.Timestr)
|
|
|
+ }
|
|
|
+ savesubscribeobj.shipment_details = createListMilestone.value.join(';\n')
|
|
|
+}
|
|
|
+// 删除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 MilFrequencyList = ref([])
|
|
|
+const ChangeMilFrequency = (val: any, type: any) => {
|
|
|
+ MilFrequencyList.value = val
|
|
|
+ savesubscribeobj = { ...savesubscribeobj, ...type }
|
|
|
+}
|
|
|
+const ConFrequencyList = ref([])
|
|
|
+const ChangeConFrequency = (val: any, type: any) => {
|
|
|
+ ConFrequencyList.value = val
|
|
|
+ savesubscribeobj = { ...savesubscribeobj, ...type }
|
|
|
+}
|
|
|
+const DepFrequencyList = ref([])
|
|
|
+const ChangeDepFrequency = (val: any, type: any) => {
|
|
|
+ DepFrequencyList.value = val
|
|
|
+ savesubscribeobj = { ...savesubscribeobj, ...type }
|
|
|
+}
|
|
|
+const ETDFrequencyList = ref([])
|
|
|
+const ChangeETDFrequency = (val: any, type: any) => {
|
|
|
+ ETDFrequencyList.value = val
|
|
|
+ savesubscribeobj = { ...savesubscribeobj, ...type }
|
|
|
+}
|
|
|
+
|
|
|
+// 删除 Frequency tag
|
|
|
+const NotiFrequencyDeleteMil = ref()
|
|
|
+const NotiFrequencyDeleteCon = ref()
|
|
|
+const NotiFrequencyDeleteDep = ref()
|
|
|
+const NotiFrequencyDeleteETD = ref()
|
|
|
+const handleCloseRadio = (val: any) => {
|
|
|
+ if (val == 'Mil') {
|
|
|
+ NotiFrequencyDeleteMil.value.handleCloseRadioFrequency()
|
|
|
+ } else if (val == 'Con') {
|
|
|
+ NotiFrequencyDeleteCon.value.handleCloseRadioFrequency()
|
|
|
+ } else if (val == 'Dep') {
|
|
|
+ NotiFrequencyDeleteDep.value.handleCloseRadioFrequency()
|
|
|
+ } else {
|
|
|
+ NotiFrequencyDeleteETD.value.handleCloseRadioFrequency()
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// methods 切换
|
|
|
+const MilMethodsList = ref([])
|
|
|
+const ChangeMethodsAddMil = (val: any, type: any) => {
|
|
|
+ MilMethodsList.value = val
|
|
|
+ savesubscribeobj = { ...savesubscribeobj, ...type }
|
|
|
+}
|
|
|
+const ConMethodsList = ref([])
|
|
|
+const ChangeMethodsAddCon = (val: any, type: any) => {
|
|
|
+ ConMethodsList.value = val
|
|
|
+ savesubscribeobj = { ...savesubscribeobj, ...type }
|
|
|
+}
|
|
|
+const DepMethodsList = ref([])
|
|
|
+const ChangeMethodsAddDep = (val: any, type: any) => {
|
|
|
+ DepMethodsList.value = val
|
|
|
+ savesubscribeobj = { ...savesubscribeobj, ...type }
|
|
|
+}
|
|
|
+const ETDMethodsList = ref([])
|
|
|
+const ChangeMethodsAddETD = (val: any, type: any) => {
|
|
|
+ ETDMethodsList.value = val
|
|
|
+ savesubscribeobj = { ...savesubscribeobj, ...type }
|
|
|
+}
|
|
|
+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.ETA.split(' ')[6]
|
|
|
+ savesubscribeobj.ocean_eta_old_sub_new_unit = val.ETA.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.ETA.split(' ')[6]
|
|
|
+ savesubscribeobj.air_eta_old_sub_new_unit = val.ETA.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(['SavedAddedRules'])
|
|
|
+// 不保存修改的折叠面板
|
|
|
+
|
|
|
+// 保存subscribe配置
|
|
|
+const missingmessage = ref('')
|
|
|
+// 保存成功调用接口
|
|
|
+const SaveSuceessful = () => {
|
|
|
+ $api
|
|
|
+ .MonitoringSave({
|
|
|
+ ...savesubscribeobj
|
|
|
+ })
|
|
|
+ .then((res: any) => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ SaveedVisible.value = true
|
|
|
+ setTimeout(() => {
|
|
|
+ SaveedVisible.value = false
|
|
|
+ emits('SavedAddedRules', res.data.addedRules, savesubscribeobj.rules_type)
|
|
|
+ }, 3000)
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+const Savesubscribe = () => {
|
|
|
+ missingmessage.value = ''
|
|
|
+ let str = ''
|
|
|
+ if (props.TitleType == 'Milestone') {
|
|
|
+ savesubscribeobj.rules_type = 'Milestone_Update'
|
|
|
+ if (
|
|
|
+ OceanCheckList.value == undefined ||
|
|
|
+ AirCheckList.value == undefined ||
|
|
|
+ MilFrequencyList.value.length == 0 ||
|
|
|
+ MilMethodsList.value.length == 0 ||
|
|
|
+ createObj.Transportstr == '' ||
|
|
|
+ createObj.Timestr == ''
|
|
|
+ ) {
|
|
|
+ console.log(createObj)
|
|
|
+ if (createObj.Transportstr == '') {
|
|
|
+ missingmessage.value += 'Transport Mode, '
|
|
|
+ }
|
|
|
+ if (createObj.Timestr == '') {
|
|
|
+ missingmessage.value += 'Time, '
|
|
|
+ }
|
|
|
+ if (OceanCheckList.value == undefined) {
|
|
|
+ missingmessage.value += 'Ocean Shipments, '
|
|
|
+ }
|
|
|
+ if (AirCheckList.value == undefined) {
|
|
|
+ missingmessage.value += 'Air Shipments, '
|
|
|
+ }
|
|
|
+ if (MilFrequencyList.value.length == 0) {
|
|
|
+ missingmessage.value += 'Notification Frequency, '
|
|
|
+ }
|
|
|
+ if (MilMethodsList.value.length == 0) {
|
|
|
+ missingmessage.value += 'Notification Method, '
|
|
|
+ }
|
|
|
+ missingmessage.value = missingmessage.value.substring(0, missingmessage.value.length - 2)
|
|
|
+ UnableSaveVisible.value = true
|
|
|
+ } else {
|
|
|
+ savesubscribeobj.ocean_milestone = OceanCheckList.value
|
|
|
+ savesubscribeobj.air_milestone = AirCheckList.value
|
|
|
+ str =
|
|
|
+ 'Ocean Milestones: ' +
|
|
|
+ OceanCheckList.value.join(',') +
|
|
|
+ ';\nAir Milestones: ' +
|
|
|
+ AirCheckList.value.join(',') +
|
|
|
+ ';'
|
|
|
+ savesubscribeobj.event_details = str
|
|
|
+ SaveSuceessful()
|
|
|
+ }
|
|
|
+ } else if (props.TitleType == 'Container') {
|
|
|
+ savesubscribeobj.rules_type = 'Container_Status_Update'
|
|
|
+ if (
|
|
|
+ ContainerOceanList.value == undefined ||
|
|
|
+ ConFrequencyList.value.length == 0 ||
|
|
|
+ ConMethodsList.value.length == 0
|
|
|
+ ) {
|
|
|
+ if (ContainerOceanList.value == undefined) {
|
|
|
+ missingmessage.value += 'Ocean Shipments, '
|
|
|
+ }
|
|
|
+ if (ConFrequencyList.value.length == 0) {
|
|
|
+ missingmessage.value += 'Notification Frequency, '
|
|
|
+ }
|
|
|
+ if (ConMethodsList.value.length == 0) {
|
|
|
+ missingmessage.value += 'Notification Method, '
|
|
|
+ }
|
|
|
+ missingmessage.value = missingmessage.value.substring(0, missingmessage.value.length - 2)
|
|
|
+ UnableSaveVisible.value = true
|
|
|
+ } else {
|
|
|
+ savesubscribeobj.ocean_ctnr_status = ContainerOceanList.value
|
|
|
+ str = 'Ocean Container: ' + ContainerOceanList.value.join(',')
|
|
|
+ savesubscribeobj.event_details = str
|
|
|
+ SaveSuceessful()
|
|
|
+ }
|
|
|
+ } else if (props.TitleType == 'Departure') {
|
|
|
+ savesubscribeobj.rules_type = 'Departure/Arrival_Delay'
|
|
|
+ if (
|
|
|
+ DelayedDeparturedList.value == undefined ||
|
|
|
+ DelayedAirdList.value == undefined ||
|
|
|
+ DepFrequencyList.value.length == 0 ||
|
|
|
+ DepMethodsList.value.length == 0
|
|
|
+ ) {
|
|
|
+ if (DelayedDeparturedList.value == undefined) {
|
|
|
+ missingmessage.value += 'Ocean Shipments, '
|
|
|
+ }
|
|
|
+ if (DelayedAirdList.value == undefined) {
|
|
|
+ missingmessage.value += 'Air Shipments, '
|
|
|
+ }
|
|
|
+ if (DepFrequencyList.value.length == 0) {
|
|
|
+ missingmessage.value += 'Notification Frequency, '
|
|
|
+ }
|
|
|
+ if (DepMethodsList.value.length == 0) {
|
|
|
+ missingmessage.value += 'Notification Method, '
|
|
|
+ }
|
|
|
+ missingmessage.value = missingmessage.value.substring(0, missingmessage.value.length - 2)
|
|
|
+ UnableSaveVisible.value = true
|
|
|
+ } else {
|
|
|
+ str = DelayedDeparturedList.value.join(';\n') + ';\n' + DelayedAirdList.value.join(';\n')
|
|
|
+ savesubscribeobj.event_details = str
|
|
|
+ SaveSuceessful()
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ savesubscribeobj.rules_type = 'ETD/ETA_Change'
|
|
|
+ if (
|
|
|
+ ETDOceanList.value == undefined ||
|
|
|
+ ETDOceanList.value.length == 0 ||
|
|
|
+ ETDAirList.value == undefined ||
|
|
|
+ ETDAirList.value.length == 0 ||
|
|
|
+ ETDFrequencyList.value.length == 0 ||
|
|
|
+ ETDMethodsList.value.length == 0
|
|
|
+ ) {
|
|
|
+ if (ETDOceanList.value == undefined) {
|
|
|
+ missingmessage.value += 'Ocean Shipments, '
|
|
|
+ }
|
|
|
+ if (ETDAirList.value == undefined) {
|
|
|
+ missingmessage.value += 'Air Shipments, '
|
|
|
+ }
|
|
|
+ if (ETDFrequencyList.value.length == 0) {
|
|
|
+ missingmessage.value += 'Notification Frequency, '
|
|
|
+ }
|
|
|
+ if (ETDMethodsList.value.length == 0) {
|
|
|
+ missingmessage.value += 'Notification Method, '
|
|
|
+ }
|
|
|
+ missingmessage.value = missingmessage.value.substring(0, missingmessage.value.length - 2)
|
|
|
+ UnableSaveVisible.value = true
|
|
|
+ } else {
|
|
|
+ str = ETDOceanList.value.join(';\n') + ';\n' + ETDAirList.value.join(';\n')
|
|
|
+ savesubscribeobj.event_details = str
|
|
|
+ SaveSuceessful()
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 删除表格数据后清空所有数据
|
|
|
+const clearData = (val: any) => {
|
|
|
+ if (val == 'Milestone') {
|
|
|
+ OceanCheckList.value = []
|
|
|
+ AirCheckList.value = []
|
|
|
+ MilFrequencyList.value = []
|
|
|
+ MilMethodsList.value = []
|
|
|
+ MilestoneOceanListChecked.value = []
|
|
|
+ MilestoneAirListChecked.value = []
|
|
|
+ createListMilestone.value = []
|
|
|
+ } else if (val == 'Container') {
|
|
|
+ ContainerOceanList.value = []
|
|
|
+ createListContainer.value = []
|
|
|
+ ConFrequencyList.value = []
|
|
|
+ ConMethodsList.value = []
|
|
|
+ ContainerOceanListChecked.value = []
|
|
|
+ } else if (val == 'Departure') {
|
|
|
+ DelayedDeparturedList.value = []
|
|
|
+ DelayedAirdList.value = []
|
|
|
+ DepFrequencyList.value = []
|
|
|
+ DepMethodsList.value = []
|
|
|
+ createListDeparture.value = []
|
|
|
+ } else {
|
|
|
+ ETDOceanList.value = []
|
|
|
+ ETDAirList.value = []
|
|
|
+ ETDFrequencyList.value = []
|
|
|
+ ETDMethodsList.value = []
|
|
|
+ createListETDChange.value = []
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+defineExpose({
|
|
|
+ clearData,
|
|
|
+ Savesubscribe
|
|
|
+})
|
|
|
+</script>
|
|
|
+<template>
|
|
|
+ <div class="Rules_flex">
|
|
|
+ <div class="Rules_left">
|
|
|
+ <div class="Rules_collapse">
|
|
|
+ <el-collapse v-model="RulesActive" @change="IsFourActive = !IsFourActive">
|
|
|
+ <el-collapse-item name="ShipmentRange">
|
|
|
+ <template #title>
|
|
|
+ <div class="Rules_Title">
|
|
|
+ <span class="iconfont_icon">
|
|
|
+ <svg class="iconfont" aria-hidden="true">
|
|
|
+ <use
|
|
|
+ :xlink:href="IsFourActive ? '#icon-icon_dropdown_b' : '#icon-icon_up_b'"
|
|
|
+ ></use>
|
|
|
+ </svg>
|
|
|
+ </span>
|
|
|
+ <span class="stars_red">*</span>Shipment Range
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <div>
|
|
|
+ <ShipmentRange
|
|
|
+ ref="ShipmentRangeRef"
|
|
|
+ v-if="props.TitleType == 'Milestone'"
|
|
|
+ @ChangeCheckRules="changecheckCreateRulesMilestone"
|
|
|
+ @ChangeCheckTimeRules="ChangeCheckTimeRulesMilestone"
|
|
|
+ ></ShipmentRange>
|
|
|
+ <ShipmentRange
|
|
|
+ ref="ShipmentRangeRef"
|
|
|
+ v-if="props.TitleType == 'Container'"
|
|
|
+ @ChangeCheckRules="changecheckCreateRulesContainer"
|
|
|
+ @ChangeCheckTimeRules="ChangeCheckTimeRulesContainer"
|
|
|
+ ></ShipmentRange>
|
|
|
+ <ShipmentRange
|
|
|
+ ref="ShipmentRangeRef"
|
|
|
+ v-if="props.TitleType == 'Departure'"
|
|
|
+ @ChangeCheckRules="changecheckCreateRulesDeparture"
|
|
|
+ @ChangeCheckTimeRules="ChangeCheckTimeRulesDeparture"
|
|
|
+ ></ShipmentRange>
|
|
|
+ <ShipmentRange
|
|
|
+ ref="ShipmentRangeRef"
|
|
|
+ v-if="props.TitleType == 'ETDChange'"
|
|
|
+ @ChangeCheckRules="changecheckCreateRulesETDChange"
|
|
|
+ @ChangeCheckTimeRules="ChangeCheckTimeRulesETDChange"
|
|
|
+ ></ShipmentRange>
|
|
|
+ </div>
|
|
|
+ </el-collapse-item>
|
|
|
+ </el-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"
|
|
|
+ :CheckedList="MilestoneOceanListChecked"
|
|
|
+ ></RulesShipments>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <RulesShipments
|
|
|
+ Title="Air shipments"
|
|
|
+ @ChangeCheckRules="ChangeCheckAirRules"
|
|
|
+ :CheckboxList="MilestoneAirListInit"
|
|
|
+ :CheckedList="MilestoneAirListChecked"
|
|
|
+ ></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"
|
|
|
+ :CheckedList="ContainerOceanListChecked"
|
|
|
+ ></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"
|
|
|
+ :DelayedData="DelayedDataInit"
|
|
|
+ @ChangeCheckRules="ChangeDeayedRules"
|
|
|
+ ></DelayedType>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <DelayedType
|
|
|
+ Title="Air shipments"
|
|
|
+ ref="AirDelayed"
|
|
|
+ :DelayedData="DelayedDataInitAir"
|
|
|
+ @ChangeCheckRules="ChangeAirRules"
|
|
|
+ ></DelayedType>
|
|
|
+ </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"
|
|
|
+ :ETDData="OceanETDInit"
|
|
|
+ @ChangeCheckRules="ChangeETDOceanRules"
|
|
|
+ ></ETDShipments>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <ETDShipments
|
|
|
+ Title="Air shipments"
|
|
|
+ ref="AirETD"
|
|
|
+ :ETDData="AirETDInit"
|
|
|
+ @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>
|
|
|
+ <NotiFrequency
|
|
|
+ v-if="props.TitleType == 'Milestone'"
|
|
|
+ ref="NotiFrequencyDeleteMil"
|
|
|
+ :FrequencyData="FrequencyDataMil"
|
|
|
+ @ChangeFrequencyAdd="ChangeMilFrequency"
|
|
|
+ ></NotiFrequency>
|
|
|
+ <NotiFrequency
|
|
|
+ v-if="props.TitleType == 'Container'"
|
|
|
+ ref="NotiFrequencyDeleteCon"
|
|
|
+ :FrequencyData="FrequencyDataCon"
|
|
|
+ @ChangeFrequencyAdd="ChangeConFrequency"
|
|
|
+ ></NotiFrequency>
|
|
|
+ <NotiFrequency
|
|
|
+ v-if="props.TitleType == 'Departure'"
|
|
|
+ ref="NotiFrequencyDeleteDep"
|
|
|
+ :FrequencyData="FrequencyDataDep"
|
|
|
+ @ChangeFrequencyAdd="ChangeDepFrequency"
|
|
|
+ ></NotiFrequency>
|
|
|
+ <NotiFrequency
|
|
|
+ v-if="props.TitleType == 'ETDChange'"
|
|
|
+ ref="NotiFrequencyDeleteETD"
|
|
|
+ :FrequencyData="FrequencyDataETD"
|
|
|
+ @ChangeFrequencyAdd="ChangeETDFrequency"
|
|
|
+ ></NotiFrequency>
|
|
|
+ </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>
|
|
|
+ <NotiMethods
|
|
|
+ v-if="props.TitleType == 'Milestone'"
|
|
|
+ :MethodsData="MethodsDataMil"
|
|
|
+ @ChangeMethodsAdd="ChangeMethodsAddMil"
|
|
|
+ ></NotiMethods>
|
|
|
+ <NotiMethods
|
|
|
+ v-if="props.TitleType == 'Container'"
|
|
|
+ :MethodsData="MethodsDataCon"
|
|
|
+ @ChangeMethodsAdd="ChangeMethodsAddCon"
|
|
|
+ ></NotiMethods>
|
|
|
+ <NotiMethods
|
|
|
+ v-if="props.TitleType == 'Departure'"
|
|
|
+ :MethodsData="MethodsDataDep"
|
|
|
+ @ChangeMethodsAdd="ChangeMethodsAddDep"
|
|
|
+ ></NotiMethods>
|
|
|
+ <NotiMethods
|
|
|
+ v-if="props.TitleType == 'ETDChange'"
|
|
|
+ :MethodsData="MethodsDataETD"
|
|
|
+ @ChangeMethodsAdd="ChangeMethodsAddETD"
|
|
|
+ ></NotiMethods>
|
|
|
+ </el-collapse-item>
|
|
|
+ </el-collapse>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="Rules_right">
|
|
|
+ <div class="right_Title">Added Rules</div>
|
|
|
+ <AddedrluesTag
|
|
|
+ v-if="props.TitleType == 'Milestone'"
|
|
|
+ :CheckedList="createListMilestone"
|
|
|
+ Title="Shipment Range"
|
|
|
+ @handleCloseRadio="handleCloseCreateRule"
|
|
|
+ ></AddedrluesTag>
|
|
|
+ <AddedrluesTag
|
|
|
+ v-if="props.TitleType == 'Container'"
|
|
|
+ :CheckedList="createListContainer"
|
|
|
+ Title="Shipment Range"
|
|
|
+ @handleCloseRadio="handleCloseCreateRule"
|
|
|
+ ></AddedrluesTag>
|
|
|
+ <AddedrluesTag
|
|
|
+ v-if="props.TitleType == 'Departure'"
|
|
|
+ :CheckedList="createListDeparture"
|
|
|
+ Title="Shipment Range"
|
|
|
+ @handleCloseRadio="handleCloseCreateRule"
|
|
|
+ ></AddedrluesTag>
|
|
|
+ <AddedrluesTag
|
|
|
+ v-if="props.TitleType == 'ETDChange'"
|
|
|
+ :CheckedList="createListETDChange"
|
|
|
+ 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 == '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
|
|
|
+ :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
|
|
|
+ v-if="props.TitleType == 'Milestone'"
|
|
|
+ :CheckedList="MilFrequencyList"
|
|
|
+ Title="Notification Frequency"
|
|
|
+ @handleCloseRadio="handleCloseRadio('Mil')"
|
|
|
+ ></AddedrluesTag>
|
|
|
+ <AddedrluesTag
|
|
|
+ v-if="props.TitleType == 'Container'"
|
|
|
+ :CheckedList="ConFrequencyList"
|
|
|
+ Title="Notification Frequency"
|
|
|
+ @handleCloseRadio="handleCloseRadio('Con')"
|
|
|
+ ></AddedrluesTag>
|
|
|
+ <AddedrluesTag
|
|
|
+ v-if="props.TitleType == 'Departure'"
|
|
|
+ :CheckedList="DepFrequencyList"
|
|
|
+ Title="Notification Frequency"
|
|
|
+ @handleCloseRadio="handleCloseRadio('Dep')"
|
|
|
+ ></AddedrluesTag>
|
|
|
+ <AddedrluesTag
|
|
|
+ v-if="props.TitleType == 'ETDChange'"
|
|
|
+ :CheckedList="ETDFrequencyList"
|
|
|
+ Title="Notification Frequency"
|
|
|
+ @handleCloseRadio="handleCloseRadio('ETD')"
|
|
|
+ ></AddedrluesTag>
|
|
|
+ <AddedrluesTag
|
|
|
+ v-if="props.TitleType == 'Milestone'"
|
|
|
+ :CheckedList="MilMethodsList"
|
|
|
+ Title="Notification Method"
|
|
|
+ ></AddedrluesTag>
|
|
|
+ <AddedrluesTag
|
|
|
+ v-if="props.TitleType == 'Container'"
|
|
|
+ :CheckedList="ConMethodsList"
|
|
|
+ Title="Notification Method"
|
|
|
+ ></AddedrluesTag>
|
|
|
+ <AddedrluesTag
|
|
|
+ v-if="props.TitleType == 'Departure'"
|
|
|
+ :CheckedList="DepMethodsList"
|
|
|
+ Title="Notification Method"
|
|
|
+ ></AddedrluesTag>
|
|
|
+ <AddedrluesTag
|
|
|
+ v-if="props.TitleType == 'ETDChange'"
|
|
|
+ :CheckedList="ETDMethodsList"
|
|
|
+ Title="Notification Method"
|
|
|
+ ></AddedrluesTag>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-dialog v-model="UnableSaveVisible" width="480">
|
|
|
+ <div>{{ missingmessage }} missing.</div>
|
|
|
+ <div>Please complete all required fields.</div>
|
|
|
+ <template #footer>
|
|
|
+ <div class="dialog-footer">
|
|
|
+ <el-button
|
|
|
+ class="el-button--danger"
|
|
|
+ @click="UnableSaveVisible = false"
|
|
|
+ style="width: 100px"
|
|
|
+ >
|
|
|
+ OK
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template #header>
|
|
|
+ <div class="cancel_header">
|
|
|
+ <span class="iconfont_icon iconfont_warning">
|
|
|
+ <svg class="iconfont icon_danger" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-icon_fail_fill_b"></use>
|
|
|
+ </svg>
|
|
|
+ </span>
|
|
|
+ Unable to Save
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+ <!-- 保存成功 -->
|
|
|
+ <el-dialog v-model="SaveedVisible" width="320" style="height: 212px">
|
|
|
+ <div style="text-align: center"><el-image :src="submitsucessful" /></div>
|
|
|
+ <div style="text-align: center; margin-top: 20px">Saved successfully</div>
|
|
|
+ </el-dialog>
|
|
|
+</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;
|
|
|
+}
|
|
|
+.icon_danger {
|
|
|
+ fill: var(--color-btn-danger-bg);
|
|
|
+}
|
|
|
+: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);
|
|
|
+}
|
|
|
+.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;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.el-radio-group) {
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+:deep(.el-radio) {
|
|
|
+ display: flex;
|
|
|
+ min-height: 32px;
|
|
|
+ border: 1px solid var(--color-select-border);
|
|
|
+ margin-bottom: 4px;
|
|
|
+ border-radius: 6px;
|
|
|
+ padding: 0 8px;
|
|
|
+ margin-right: 0;
|
|
|
+ height: fit-content;
|
|
|
+ line-height: 32px;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+:deep(.el-radio__input.is-checked + .el-radio__label) {
|
|
|
+ color: var(--color-neutral-1);
|
|
|
+}
|
|
|
+</style>
|
AmandaG
