Merge pull request #1620 from alibaba/xflow-validate

Xflow增加控制面板表单校验

Author: lhbxs

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);

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;