fix：DEFECT-665 场景联动选择定时启用和自定义启用时,时间范围结束时间不能在开始时间之前,按照顺序进行选择

 <template>
-  <BasicModal
-    v-bind="$attrs"
-    :width="600"
-    title="编辑报警日程"
-    centered
-    @register="registerModal"
-    @ok="handleOk"
-    @cancel="handleCancel"
-  >
+  <BasicModal v-bind="$attrs" :width="600" title="编辑报警日程" centered @register="registerModal" @ok="handleOk"
+    @cancel="handleCancel">
     <BasicForm @register="registerForm" ref="basicFormRef">
       <template #customEnable>
         <template v-for="(item, optionIndex) in options" :key="item.flag">
@@ -15,230 +8,222 @@
             <div class="ml-4 mr-4 flex items-center">
               <Checkbox v-model:checked="item.enabled">星期{{ item.flag }}</Checkbox>
             </div>
-            <TimePicker
-              placeholder="开始时间"
-              v-model:value="item.startsOn"
-              value-format="x"
-              format="HH:mm"
-              :disabled="!item.enabled"
-            />
+            <TimePicker placeholder="开始时间" v-model:value="item.startsOn" value-format="x" format="HH:mm"
+              :disabled="!item.enabled" />
             <span class="ml-4 mr-4 flex items-center">~</span>
-            <TimePicker
-              placeholder="结束时间"
-              v-model:value="item.endsOn"
-              value-format="x"
-              format="HH:mm"
-              :disabled="!item.enabled"
-            /> </div
-        ></template>
+            <TimePicker @change="handleBlur(item.startsOn,item.endsOn)" placeholder="结束时间" v-model:value="item.endsOn"
+              value-format="x" format="HH:mm" :disabled="!item.enabled" />
+          </div>
+        </template>
       </template>
       <template #timing>
-        <TimePicker
-          placeholder="开始时间"
-          v-model:value="timeState.startsOn"
-          value-format="x"
-          format="HH:mm"
-        />
+        <TimePicker placeholder="开始时间" v-model:value="timeState.startsOn" value-format="x" format="HH:mm" />
         <span class="ml-4 mr-4">~</span>
-        <TimePicker
-          placeholder="结束时间"
-          v-model:value="timeState.endsOn"
-          value-format="x"
-          format="HH:mm"
-        />
+        <TimePicker @change="handleTimeBlur(timeState.startsOn,timeState.endsOn)" placeholder="结束时间"
+          v-model:value="timeState.endsOn" value-format="x" format="HH:mm" />
       </template>
     </BasicForm>
   </BasicModal>
 </template>
 
 <script lang="ts" setup>
-  import { reactive, ref, watch, nextTick } from 'vue';
-  import { useModalInner, BasicModal } from '/@/components/Modal';
-  import { BasicForm, useForm } from '/@/components/Form';
-  import { alarmScheduleSchemas } from '../config/config.data.ts';
-  import { Checkbox, TimePicker } from 'ant-design-vue';
+import { reactive, ref, watch, nextTick } from 'vue';
+import { useModalInner, BasicModal } from '/@/components/Modal';
+import { BasicForm, useForm } from '/@/components/Form';
+import { alarmScheduleSchemas } from '../config/config.data.ts';
+import { Checkbox, TimePicker } from 'ant-design-vue';
+import { useMessage } from '/@/hooks/web/useMessage';
 
-  const emit = defineEmits(['register', 'cancel']);
-  const [registerForm, { setFieldsValue, getFieldsValue }] = useForm({
-    showActionButtonGroup: false,
-    schemas: alarmScheduleSchemas,
-  });
-  const timeState = reactive({
+const emit = defineEmits(['register', 'cancel']);
+const { createMessage } = useMessage();
+const [registerForm, { setFieldsValue, getFieldsValue }] = useForm({
+  showActionButtonGroup: false,
+  schemas: alarmScheduleSchemas,
+});
+const timeState = reactive({
+  startsOn: null,
+  endsOn: null,
+});
+
+const options = ref([
+  {
+    enabled: false,
+    dayOfWeek: 1,
+    flag: '一',
+    endsOn: null,
     startsOn: null,
+  },
+  {
+    enabled: false,
+    dayOfWeek: 2,
+    flag: '二',
     endsOn: null,
-  });
-
-  const options = ref([
-    {
-      enabled: false,
-      dayOfWeek: 1,
-      flag: '一',
-      endsOn: null,
-      startsOn: null,
-    },
-    {
-      enabled: false,
-      dayOfWeek: 2,
-      flag: '二',
-      endsOn: null,
-      startsOn: null,
-    },
-    {
-      enabled: false,
-      dayOfWeek: 3,
-      flag: '三',
-      endsOn: null,
-      startsOn: null,
-    },
-    {
-      enabled: false,
-      dayOfWeek: 4,
-      flag: '四',
-      endsOn: null,
-      startsOn: null,
-    },
-    {
-      enabled: false,
-      dayOfWeek: 5,
-      flag: '五',
-      endsOn: null,
-      startsOn: null,
-    },
-    {
-      enabled: false,
-      dayOfWeek: 6,
-      flag: '六',
-      endsOn: null,
-      startsOn: null,
-    },
-    {
-      enabled: false,
-      dayOfWeek: 7,
-      flag: '日',
-      endsOn: null,
-      startsOn: null,
-    },
-  ]);
-  const basicFormRef = ref<InstanceType<typeof BasicForm>>();
-  let index = ref(null);
-  watch(
-    options,
-    (newValue) => {
-      const arr = [];
-      for (let item of newValue) {
-        if (item.enabled && item.startsOn && item.endsOn) {
-          arr.push(true);
-        } else if ((!item.enabled && item.startsOn && item.endsOn) || item.enabled) {
-          arr.push(false);
-        }
+    startsOn: null,
+  },
+  {
+    enabled: false,
+    dayOfWeek: 3,
+    flag: '三',
+    endsOn: null,
+    startsOn: null,
+  },
+  {
+    enabled: false,
+    dayOfWeek: 4,
+    flag: '四',
+    endsOn: null,
+    startsOn: null,
+  },
+  {
+    enabled: false,
+    dayOfWeek: 5,
+    flag: '五',
+    endsOn: null,
+    startsOn: null,
+  },
+  {
+    enabled: false,
+    dayOfWeek: 6,
+    flag: '六',
+    endsOn: null,
+    startsOn: null,
+  },
+  {
+    enabled: false,
+    dayOfWeek: 7,
+    flag: '日',
+    endsOn: null,
+    startsOn: null,
+  },
+]);
+const basicFormRef = ref<InstanceType<typeof BasicForm>>();
+let index = ref(null);
+watch(
+  options,
+  (newValue) => {
+    const arr = [];
+    for (let item of newValue) {
+      if (item.enabled && item.startsOn && item.endsOn) {
+        arr.push(true);
+      } else if ((!item.enabled && item.startsOn && item.endsOn) || item.enabled) {
+        arr.push(false);
       }
-      console.log(arr);
-      const flag = arr.length ? !arr.every((item) => item) : true;
-      console.log(flag);
-      nextTick(() => {
-        setModalProps({
-          okButtonProps: {
-            disabled: flag,
-          },
-        });
-      });
-    },
-    {
-      deep: true,
     }
-  );
-
-  const [registerModal, { closeModal, setModalProps }] = useModalInner((data) => {
-    watch([timeState, basicFormRef.value.formModel], ([timeState, formModel]) => {
+    const flag = arr.length ? !arr.every((item) => item) : true;
+    nextTick(() => {
       setModalProps({
         okButtonProps: {
-          disabled:
-            timeState.startsOn === null ||
-            timeState.endsOn === null ||
-            !formModel.daysOfWeek?.length,
+          disabled: flag,
         },
       });
-      watch(
-        () => formModel.schedule,
-        () => {
-          timeState.startsOn = null;
-          timeState.endsOn = null;
-        }
-      );
     });
-    const { value, currentIndex, isUpdate, scheduleData } = data;
-    index.value = currentIndex;
-    const dayZenoTime = Math.round(new Date(new Date().toLocaleDateString()).getTime());
-    // 编辑
-    setFieldsValue({
-      schedule: value,
+  },
+  {
+    deep: true,
+  }
+);
+
+const [registerModal, { closeModal, setModalProps }] = useModalInner((data) => {
+  watch([timeState, basicFormRef.value.formModel], ([timeState, formModel]) => {
+    setModalProps({
+      okButtonProps: {
+        disabled:
+          timeState.startsOn === null ||
+          timeState.endsOn === null ||
+          !formModel.daysOfWeek?.length,
+      },
     });
-    if (isUpdate) {
-      nextTick(() => {
-        // 回显定时启用
-        if (scheduleData.type === 'SPECIFIC_TIME') {
-          setFieldsValue({
-            daysOfWeek: scheduleData.daysOfWeek,
-          });
-          timeState.startsOn = scheduleData.startsOn + dayZenoTime + '';
-          timeState.endsOn = scheduleData.endsOn + dayZenoTime + '';
-        }
-        // 回显自定义启用
-        if (scheduleData.type === 'CUSTOM') {
-          for (let [index, item] of scheduleData?.items.entries()) {
-            if (item.enabled) {
-              options.value[index].enabled = item.enabled;
-              options.value[index].startsOn = item.startsOn + dayZenoTime + '';
-              options.value[index].endsOn = item.endsOn + dayZenoTime + '';
-            }
-          }
-        }
-      });
-    }
+    watch(
+      () => formModel.schedule,
+      () => {
+        timeState.startsOn = null;
+        timeState.endsOn = null;
+      }
+    );
   });
-  const scheduleData = ref({
-    type: 'ANY_TIME',
+  const { value, currentIndex, isUpdate, scheduleData } = data;
+  index.value = currentIndex;
+  const dayZenoTime = Math.round(new Date(new Date().toLocaleDateString()).getTime());
+  // 编辑
+  setFieldsValue({
+    schedule: value,
   });
-  const handleOk = () => {
-    const { schedule: type, timezone, daysOfWeek } = getFieldsValue();
-    // 获取当天0时时间戳
-    const dayZenoTime = Math.round(new Date(new Date().toLocaleDateString()).getTime());
-    if (type === 'CUSTOM') {
-      const items = options.value.map((item) => {
-        return {
-          startsOn: item.startsOn ? item.startsOn - dayZenoTime : 0,
-          endsOn: item.endsOn ? item.endsOn - dayZenoTime : 0,
-          dayOfWeek: item.dayOfWeek,
-          enabled: item.enabled,
-        };
-      });
-      scheduleData.value = {
-        type,
-        timezone,
-        items,
-      };
-    } else if (type === 'SPECIFIC_TIME') {
-      scheduleData.value = {
-        type,
-        timezone,
-        daysOfWeek,
-        startsOn: timeState.startsOn - dayZenoTime,
-        endsOn: timeState.endsOn - dayZenoTime,
+  if (isUpdate) {
+    nextTick(() => {
+      // 回显定时启用
+      if (scheduleData.type === 'SPECIFIC_TIME') {
+        setFieldsValue({
+          daysOfWeek: scheduleData.daysOfWeek,
+        });
+        timeState.startsOn = scheduleData.startsOn + dayZenoTime + '';
+        timeState.endsOn = scheduleData.endsOn + dayZenoTime + '';
+      }
+      // 回显自定义启用
+      if (scheduleData.type === 'CUSTOM') {
+        for (let [index, item] of scheduleData?.items.entries()) {
+          if (item.enabled) {
+            options.value[index].enabled = item.enabled;
+            options.value[index].startsOn = item.startsOn + dayZenoTime + '';
+            options.value[index].endsOn = item.endsOn + dayZenoTime + '';
+          }
+        }
+      }
+    });
+  }
+});
+const scheduleData = ref({
+  type: 'ANY_TIME',
+});
+const handleBlur = (eS, eE) => {
+  if (eS > eE) {
+    return createMessage.error('开始时间不能大于结束时间')
+  }
+}
+const handleTimeBlur = (eS, eE) => {
+  if (eS > eE) {
+    return createMessage.error('开始时间不能大于结束时间')
+  }
+}
+const handleOk = () => {
+  const { schedule: type, timezone, daysOfWeek } = getFieldsValue();
+  // 获取当天0时时间戳
+  const dayZenoTime = Math.round(new Date(new Date().toLocaleDateString()).getTime());
+  if (type === 'CUSTOM') {
+    const items = options.value.map((item) => {
+      return {
+        startsOn: item.startsOn ? item.startsOn - dayZenoTime : 0,
+        endsOn: item.endsOn ? item.endsOn - dayZenoTime : 0,
+        dayOfWeek: item.dayOfWeek,
+        enabled: item.enabled,
       };
-    }
-    closeModal();
-  };
-  const handleCancel = () => {
-    emit('cancel', index.value);
-  };
+    });
+    scheduleData.value = {
+      type,
+      timezone,
+      items,
+    };
+  } else if (type === 'SPECIFIC_TIME') {
+    scheduleData.value = {
+      type,
+      timezone,
+      daysOfWeek,
+      startsOn: timeState.startsOn - dayZenoTime,
+      endsOn: timeState.endsOn - dayZenoTime,
+    };
+  }
+  closeModal();
+};
+const handleCancel = () => {
+  emit('cancel', index.value);
+};
 
-  defineExpose({
-    scheduleData,
-  });
+defineExpose({
+  scheduleData,
+});
 </script>
 
 <style lang="less" scoped>
-  :deep(.ant-time-picker) {
-    width: 12rem;
-  }
+:deep(.ant-time-picker) {
+  width: 12rem;
+}
 </style>