From 49a711356bd74278341e2c917a3903ea10fdf3cd Mon Sep 17 00:00:00 2001
From: dengqichen <dengqichen@iscmtech.com>
Date: Fri, 6 Dec 2024 12:50:20 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A8=A1=E7=89=88=E8=A7=A3=E6=9E=90=E6=AD=A3?=
 =?UTF-8?q?=E7=A1=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Workflow/Definition/Designer/index.tsx    | 49 ++++++++++++++-----
 1 file changed, 37 insertions(+), 12 deletions(-)

diff --git a/frontend/src/pages/Workflow/Definition/Designer/index.tsx b/frontend/src/pages/Workflow/Definition/Designer/index.tsx
index 546cec92..224695e1 100644
--- a/frontend/src/pages/Workflow/Definition/Designer/index.tsx
+++ b/frontend/src/pages/Workflow/Definition/Designer/index.tsx
@@ -16,7 +16,7 @@ import './index.module.less';
 import NodePanel from './components/NodePanel';
 import NodeConfig from './components/NodeConfig';
 import Toolbar from './components/Toolbar';
-import { NodeType } from './service';
+import { NodeType, getNodeTypes } from './service';
 
 const {Sider, Content} = Layout;
 
@@ -24,7 +24,10 @@ interface NodeData {
     type: string;
     name?: string;
     description?: string;
-    config: Record<string, any>;
+    config: {
+        executor?: string;
+        [key: string]: any;
+    };
 }
 
 const FlowDesigner: React.FC = () => {
@@ -39,8 +42,27 @@ const FlowDesigner: React.FC = () => {
     const [configVisible, setConfigVisible] = useState(false);
     const [currentNode, setCurrentNode] = useState<Node>();
     const [currentNodeType, setCurrentNodeType] = useState<NodeType>();
+    const [nodeTypes, setNodeTypes] = useState<NodeType[]>([]);
     const [form] = Form.useForm();
 
+    // 获取所有节点类型
+    const fetchNodeTypes = async () => {
+        try {
+            const types = await getNodeTypes({ enabled: true });
+            setNodeTypes(types);
+            return types;
+        } catch (error) {
+            console.error('获取节点类型失败:', error);
+            message.error('获取节点类型失败');
+            return [];
+        }
+    };
+
+    // 首次加载获取节点类型
+    useEffect(() => {
+        fetchNodeTypes();
+    }, []);
+
     // 初始化图形
     const initGraph = () => {
         if (!containerRef.current) return;
@@ -234,17 +256,20 @@ const FlowDesigner: React.FC = () => {
             const data = node.getData() as NodeData;
             if (data) {
                 // 获取节点类型
-                const nodeType = draggedNodeRef.current;
-                if (nodeType && nodeType.code === data.type) {
+                const nodeType = nodeTypes.find(type => type.code === data.type);
+                if (nodeType) {
                     setCurrentNodeType(nodeType);
+                    // 设置表单值，包括基本信息和配置信息
+                    form.setFieldsValue({
+                        name: data.name || nodeType.name,
+                        description: data.description,
+                        executor: data.config?.executor,
+                        ...data.config
+                    });
+                    setConfigVisible(true);
+                } else {
+                    message.error('未找到对应的节点类型');
                 }
-                // 设置表单值
-                form.setFieldsValue({
-                    name: data.name,
-                    description: data.description,
-                    ...data.config,
-                });
-                setConfigVisible(true);
             }
         });
 
@@ -352,7 +377,7 @@ const FlowDesigner: React.FC = () => {
             data: {
                 type: nodeType.code,
                 name: nodeType.name,
-                config: {},
+                config: {} as any,
             },
         });