feat: 更改验证方式

src/views/flow/components/ParamsDrawer.vue

@@ -2,12 +2,12 @@
   <el-drawer
       v-model="props.drawer"
       custom-class="custom-drawer-header"
+      :title="props.data.properties?.name || '参数配置'"
       class="no-header-margin"
-      :close-on-click-modal="false"
-      :close-on-press-escape="false"
-      :show-close="false"
+
+      :before-close="confirm"
   >
-    <template #header>
+    <!-- <template #header>
       <div class="drawer-header">
         <div>{{ props.data.properties?.name || '参数配置' }}</div>
         <div>
@@ -26,7 +26,7 @@
           </el-popconfirm>
         </div>
       </div>
-    </template>
+    </template> -->
     <div class="input__container" v-if="props.data.type === 'start'">
       <el-collapse v-model="activeNames">
         <el-collapse-item name="1" icon-position="left">
@@ -1206,9 +1206,10 @@
         </el-collapse>
       </el-form>
     </div>
-    <template #footer>
+    <!-- <template #footer>
+      <el-button  @click="cancel">取消</el-button>
       <el-button type="primary" @click="confirm">保存</el-button>
-    </template>
+    </template> -->
   </el-drawer>
 </template>
 
@@ -1247,17 +1248,23 @@ let editorInstance
 const dynamicForm = ref()
 const outputFormRef = ref()
 
+const throwAnError = (flag) => {
+  if (dynamicForm.value) {
+    dynamicForm.value.clearValidate()
+  }
+  if (outputFormRef.value) {
+    outputFormRef.value.clearValidate()
+  }
+  emitter.emit("throwAnError", { id: props.data.id, hasError: flag });
+  emits('close')
+}
+
 const confirm = async () => {
   if (props.data.type === 'http') {
     if (dynamicForm.value) {
       await dynamicForm.value.validate((valid, fields) => {
         if (valid) {
-          if (httpNodeData.value.body.type === 'json') {
-            if (hasErrors()) {
-              ElMessage.error('JSON中存在错误，请修正后再保存！');
-              return;
-            }
-          }
+          
           const nodeParams = []
           nodeParams.push({ name: "config", type: "input", input: "", children: httpNodeData.value.config, disabled: true, required: true })
           if (httpNodeData.value?.headers?.length > 0) {
@@ -1275,16 +1282,20 @@ const confirm = async () => {
             ]
           }
           nodeParams.push(bodyObj)
-          
           lf.setProperties(props.data.id, {
             ...props.data.properties,
             nodeParams
           });
 
           emitter.emit("setProperties", { id: props.data.id});
-          emits('close')
+          if (httpNodeData.value.body.type === 'json') {
+            if (hasErrors()) {
+              throwAnError(true)
+            }
+          }
+          throwAnError(false)
         } else {
-          console.log('error submit!', fields)
+          throwAnError(true)
         }
       });
     }
@@ -1307,30 +1318,28 @@ const confirm = async () => {
       })
     }
 
+    const nodeParams = []
+    nodeParams.push({ name: "config", type: "input", input: "", children: sdAgentNodeData.value.config,  required: true })
+    nodeParams.push({ name: "invokeTts", type: "input", input: sdAgentNodeData.value.invokeTts })
+    if (sdAgentNodeData.value.invokeTts) {
+      nodeParams.push({ name: "tts", type: "input", input: "", children: sdAgentNodeData.value.tts })
+    }
+    lf.setProperties(props.data.id, {
+      ...props.data.properties,
+      nodeParams,
+      outputParams: sdAgentNodeData.value.outputParams
+    });
+
+    emitter.emit("setProperties", { id: props.data.id});
+
     // 验证通过
     if (inputValidate && outputValidate) {
-      const nodeParams = []
-      nodeParams.push({ name: "config", type: "input", input: "", children: sdAgentNodeData.value.config,  required: true })
-      nodeParams.push({ name: "invokeTts", type: "input", input: sdAgentNodeData.value.invokeTts })
-      if (sdAgentNodeData.value.invokeTts) {
-        nodeParams.push({ name: "tts", type: "input", input: "", children: sdAgentNodeData.value.tts })
-      }
-      lf.setProperties(props.data.id, {
-        ...props.data.properties,
-        nodeParams,
-        outputParams: sdAgentNodeData.value.outputParams
-      });
-
-      emitter.emit("setProperties", { id: props.data.id});
-      emits('close')
+      throwAnError(false)
+    } else {
+      throwAnError(true)
     }
   } else {
     if (props.data.type === 'code') {
-      if (hasErrors()) {
-        ElMessage.error('代码中存在错误，请修正后再保存！');
-        return;
-      }
-
       const targetObj = formData.nodeParams.find(item => item.name === 'code');
       if (targetObj) {
         // 存在：修改该对象的 input 属性
@@ -1359,15 +1368,23 @@ const confirm = async () => {
       })
     }
 
+    lf.setProperties(props.data.id, {
+      ...props.data.properties,
+      ...formData
+    });
+    emitter.emit("setProperties", { id: props.data.id});
+
     // 验证通过
     if (inputValidate && outputValidate) {
-      lf.setProperties(props.data.id, {
-        ...props.data.properties,
-        ...formData
-      });
+      if (props.data.type === 'code') {
+        if (hasErrors()) {
+          throwAnError(true)
+        }
+      }
 
-      emitter.emit("setProperties", { id: props.data.id});
-      emits('close')
+      throwAnError(false)
+    } else {
+      throwAnError(true)
     }
   }
 }
@@ -1669,6 +1686,8 @@ watch(
 );
 
 onUnmounted(() => {
+  emitter.off('throwAnError');
+  emitter.off('setProperties');
   disposeEditor()
 })
 </script>

src/views/flow/index.vue

@@ -274,6 +274,11 @@ const testRun = async () => {
     return;
   }
 
+  if (nodeErrorList.value.length > 0) {
+    ElMessage.warning("存在参数错误的节点，请检查！");
+    return;
+  }
+
   isOpen.value = true;
 };
 
@@ -614,8 +619,6 @@ const initFlow = () => {
     lf.on("node:mousemove", ({ data, e }) => {
       const { nodes } = lf.getGraphData();
       const arr = recursiveFilter(nodes, data.id, "loop");
-      // const arr = findRelationNodesById(nodes, data.id);
-      console.log('arr', arr)
       arr.forEach((item) => {
         const node = lf.getNodeModelById(item.id);
         node.updateSize();
@@ -636,7 +639,6 @@ const initFlow = () => {
       ) {
         return;
       }
-      console.log("data", data);
       showParamsDrawer.value = true;
       paramsDrawerData.value = data;
     });
@@ -770,6 +772,8 @@ const clearRun = () => {
   });
 }
 
+const nodeErrorList = ref([]);
+
 onMounted(() => {
   justLoadFlow();
   initFlow();
@@ -781,6 +785,20 @@ onMounted(() => {
     paramsDrawerData.value = node;
   });
 
+  emitter.on("throwAnError", (data) => {
+    // 处理错误抛出逻辑
+    const { id, hasError } = data;
+    const element = document.getElementsByClassName(`node__container ${id}`)[0].parentElement;
+    if (hasError) {
+      if (!nodeErrorList.value.includes(id)) {
+        nodeErrorList.value.push(id);
+        element.style.background = "#ff00001a";
+      }
+    } else {
+      nodeErrorList.value = nodeErrorList.value.filter((item) => item !== id);
+      element.style.background = "#fff";
+    }
+  });
 });
 
 const operationEdge = (arr) => {
@@ -792,6 +810,7 @@ const operationEdge = (arr) => {
 onUnmounted(() => {
   emitter.off("changeNodeState");
   emitter.off("openParamsDrawer");
+  emitter.off("throwAnError");
 
   window.removeEventListener("beforeunload", handleBeforeUnload);
   document.removeEventListener("singleNodeExecution", singleNodeExecution);