فهرست منبع

perf(views): 优化“报警管理”模块表单校验逻辑

wangshun 1 ماه پیش
والد
کامیت
76fbfc47c3
3فایلهای تغییر یافته به همراه60 افزوده شده و 42 حذف شده
  1. 5 0
      src/views/alarm-manage/AlarmConditions.vue
  2. 4 0
      src/views/alarm-manage/AlarmExecution.vue
  3. 51 42
      src/views/alarm-manage/AlarmManage.vue

+ 5 - 0
src/views/alarm-manage/AlarmConditions.vue

@@ -43,6 +43,10 @@ const formRefSubmit = () => {
   return formRef.value?.validate() || Promise.resolve();
 };
 
+const formResetFields = () => {
+  formRef.value?.resetFields();
+};
+
 const parameterSelection = () => {
   dataSelectionRef.value?.showView();
   dataSelectionRef.value?.addAllGatewayList(-1);
@@ -72,6 +76,7 @@ const confirmClick = (value: DataSelectionItem) => {
 
 defineExpose({
   formRefSubmit,
+  formResetFields,
 });
 </script>
 

+ 4 - 0
src/views/alarm-manage/AlarmExecution.vue

@@ -32,6 +32,9 @@ const formRefSubmit = () => {
   return formRef.value?.validate() || Promise.resolve();
 };
 
+const formResetFields = () => {
+  formRef.value?.resetFields();
+};
 const parameterSelection = () => {
   dataSelectionRef.value?.showView();
   dataSelectionRef.value?.addAllGatewayList(-1);
@@ -55,6 +58,7 @@ const deleteExecutionConditions = () => {
 
 defineExpose({
   formRefSubmit,
+  formResetFields,
 });
 </script>
 

+ 51 - 42
src/views/alarm-manage/AlarmManage.vue

@@ -470,6 +470,11 @@ const closeModal = () => {
       paramName: '',
     },
   ];
+
+  const allComponents = [...triggerConditionRefs.value, ...judgmentConditionRefs.value, ...executionActionRefs.value];
+
+  formRef.value?.resetFields();
+  allComponents.map((child) => child.formResetFields());
 };
 
 // 添加格式转换
@@ -522,49 +527,53 @@ const convertAtoB = (arr: TriggerConditionItem[] | ExecutionAction[]): AlarmEven
 
 const okConfirm = async () => {
   try {
-    const allComponents = [...triggerConditionRefs.value, ...judgmentConditionRefs.value, ...executionActionRefs.value];
-    await Promise.all(allComponents.map((child) => child.formRefSubmit()));
-
-    formRef.value
-      ?.validate()
-      .then(() => {
-        handleRequest(async () => {
-          const { eventName, time, enabled, conditionLogic } = alarmForm.value;
-          const data = time.map(formatDate) || [];
-          const triggerList = convertAtoB(triggerConditionList.value);
-          const judgmentList = convertAtoB(judgmentConditionList.value);
-          const executionList = convertAtoB(executionActionList.value);
-
-          if (titleShow.value) {
-            await addAlarmEvent({
-              eventName,
-              startTime: data[0],
-              endTime: data[1],
-              enabled,
-              conditionLogic: conditionLogic === 1 ? true : false,
-              triggerConditionList: triggerList,
-              judgmentConditionList: judgmentList,
-              executionActionList: executionList,
-            });
-          } else {
-            await updateAlarmEvent({
-              id: alarmId.value,
-              eventName,
-              startTime: data[0],
-              endTime: data[1],
-              enabled,
-              conditionLogic: conditionLogic === 1 ? true : false,
-              triggerConditionList: triggerList,
-              judgmentConditionList: judgmentList,
-              executionActionList: executionList,
-            });
-          }
-
-          alarmOpen.value = false;
-          getAlarmEventGetPageData();
+    // 创建校验任务队列(包含所有子组件+父组件自身)
+    const allTasks = [
+      // 所有子组件校验
+      ...triggerConditionRefs.value.map((c) => c.formRefSubmit()),
+      ...judgmentConditionRefs.value.map((c) => c.formRefSubmit()),
+      ...executionActionRefs.value.map((c) => c.formRefSubmit()),
+      // 父组件自身校验(核心新增点)
+      formRef.value?.validate() || Promise.resolve(),
+    ];
+    // 并行执行所有校验(父+子)
+    await Promise.all(allTasks);
+
+    handleRequest(async () => {
+      const { eventName, time, enabled, conditionLogic } = alarmForm.value;
+      const data = time.map(formatDate) || [];
+      const triggerList = convertAtoB(triggerConditionList.value);
+      const judgmentList = convertAtoB(judgmentConditionList.value);
+      const executionList = convertAtoB(executionActionList.value);
+
+      if (titleShow.value) {
+        await addAlarmEvent({
+          eventName,
+          startTime: data[0],
+          endTime: data[1],
+          enabled,
+          conditionLogic: conditionLogic === 1 ? true : false,
+          triggerConditionList: triggerList,
+          judgmentConditionList: judgmentList,
+          executionActionList: executionList,
+        });
+      } else {
+        await updateAlarmEvent({
+          id: alarmId.value,
+          eventName,
+          startTime: data[0],
+          endTime: data[1],
+          enabled,
+          conditionLogic: conditionLogic === 1 ? true : false,
+          triggerConditionList: triggerList,
+          judgmentConditionList: judgmentList,
+          executionActionList: executionList,
         });
-      })
-      .catch(() => {});
+      }
+
+      alarmOpen.value = false;
+      getAlarmEventGetPageData();
+    });
   } catch {
     console.log('存在验证未通过的表单');
   }