From 6a6b826dceb728001c914f763ca0c440515a4c44 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=98=94=E6=A2=A6?= <hemengying.hmy@alibaba-inc.com>
Date: Tue, 21 Jan 2025 15:26:44 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E5=A2=9E=E5=8A=A0=E6=8E=A7=E5=88=B6?=
 =?UTF-8?q?=E9=9D=A2=E6=9D=BF=E5=BF=85=E5=A1=AB=E6=A0=A1=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/x-flow/src/XFlow.tsx                 | 21 ++++++++++--
 .../src/components/NodeEditor/index.tsx       | 33 +++++++++++++++++--
 2 files changed, 48 insertions(+), 6 deletions(-)

diff --git a/packages/x-flow/src/XFlow.tsx b/packages/x-flow/src/XFlow.tsx
index 3c8cfe0b2..f07833623 100644
--- a/packages/x-flow/src/XFlow.tsx
+++ b/packages/x-flow/src/XFlow.tsx
@@ -32,6 +32,7 @@ import FlowProps from './types';
 import { isTruthy, uuid, uuid4 } from './utils';
 import autoLayoutNodes from './utils/autoLayoutNodes';
 
+import { message } from 'antd';
 import { shallow } from 'zustand/shallow';
 import NodeEditor from './components/NodeEditor';
 import NodeLogPanel from './components/NodeLogPanel';
@@ -87,6 +88,7 @@ const XFlow: FC<FlowProps> = memo(props => {
   const [openPanel, setOpenPanel] = useState<boolean>(true);
   const [openLogPanel, setOpenLogPanel] = useState<boolean>(true);
   const { onNodeClick } = props;
+  const nodeEditorRef = useRef(null);
 
   useEffect(() => {
     zoomTo(0.8);
@@ -226,7 +228,14 @@ const XFlow: FC<FlowProps> = memo(props => {
             type={_nodeType}
             layout={layout}
             status={_status}
-            onClick={e => {
+            onClick={async e => {
+              if (nodeEditorRef?.current?.validateForm) {
+                const result = await nodeEditorRef?.current?.validateForm();
+                if (!result) {
+                  message.error('请检查必填项！');
+                  return;
+                }
+              }
               setActiveNode({
                 id,
                 _nodeType,
@@ -249,6 +258,7 @@ const XFlow: FC<FlowProps> = memo(props => {
         onChange={handleNodeValueChange}
         nodeType={activeNode?._nodeType}
         id={activeNode?.id}
+        ref={nodeEditorRef}
       />
     );
   }, [activeNode?.id]);
@@ -286,7 +296,6 @@ const XFlow: FC<FlowProps> = memo(props => {
     });
     return result;
   };
-  console.log('121212', nodes, getNodesJ(nodes),edges);
 
   return (
     <div id="xflow-container" ref={workflowContainerRef}>
@@ -362,8 +371,14 @@ const XFlow: FC<FlowProps> = memo(props => {
           <PanelContainer
             id={activeNode?.id}
             nodeType={activeNode?._nodeType}
-            onClose={() => {
+            onClose={async () => {
+              // 面板关闭校验表单
+              const result = await nodeEditorRef?.current?.validateForm();
+              if (!result) {
+                return;
+              }
               setOpenPanel(false);
+
               // 如果日志面板关闭
               if (!isTruthy(activeNode?._status) || !openLogPanel) {
                 setActiveNode(null);
diff --git a/packages/x-flow/src/components/NodeEditor/index.tsx b/packages/x-flow/src/components/NodeEditor/index.tsx
index bca9c7d86..fad585027 100644
--- a/packages/x-flow/src/components/NodeEditor/index.tsx
+++ b/packages/x-flow/src/components/NodeEditor/index.tsx
@@ -1,7 +1,14 @@
 import FormRender, { Schema, useForm } from 'form-render';
 import produce from 'immer';
 import { debounce, isFunction } from 'lodash';
-import React, { FC, useContext, useEffect, useState } from 'react';
+import React, {
+  FC,
+  forwardRef,
+  useContext,
+  useEffect,
+  useImperativeHandle,
+  useState,
+} from 'react';
 import { shallow } from 'zustand/shallow';
 import { useStore } from '../../hooks/useStore';
 import { ConfigContext } from '../../models/context';
@@ -14,7 +21,7 @@ interface INodeEditorProps {
   id: string;
 }
 
-const NodeEditor: FC<INodeEditorProps> = (props: any) => {
+const NodeEditor: FC<INodeEditorProps> = forwardRef((props, ref) => {
   const { data, onChange, nodeType, id } = props;
   const form = useForm();
   // // 1.获取节点配置信息
@@ -26,6 +33,26 @@ const NodeEditor: FC<INodeEditorProps> = (props: any) => {
   const getSettingSchema = nodeSetting['getSettingSchema'];
   const [asyncSchema, setAsyncSchema] = useState<Schema>({});
 
+  useImperativeHandle(ref, () => ({
+    validateForm: async () => {
+      let result = true;
+      if (
+        nodeSetting?.settingSchema ||
+        (isFunction(getSettingSchema) && Object.keys(asyncSchema).length > 0)
+      ) {
+        result = await form
+          .validateFields()
+          .then(() => {
+            return true;
+          })
+          .catch(err => {
+            return false;
+          });
+      }
+      return result;
+    },
+  }));
+
   async function getSchema() {
     const shema = await getSettingSchema(
       id,
@@ -158,6 +185,6 @@ const NodeEditor: FC<INodeEditorProps> = (props: any) => {
   } else {
     return null;
   }
-};
+});
 
 export default NodeEditor;