diff --git a/frontend/src/pages/Workflow/Definition/Design/components/NodeConfigModal.tsx b/frontend/src/pages/Workflow/Definition/Design/components/NodeConfigModal.tsx index 0ae7997e..c3068f04 100644 --- a/frontend/src/pages/Workflow/Definition/Design/components/NodeConfigModal.tsx +++ b/frontend/src/pages/Workflow/Definition/Design/components/NodeConfigModal.tsx @@ -31,7 +31,7 @@ const NodeConfigDrawer: React.FC = ({ const [form] = Form.useForm(); useEffect(() => { - if (visible && node) { + if (visible && node && nodeDefinition) { // 获取节点当前的配置 const currentConfig = { code: node.getProp('code'), @@ -42,7 +42,7 @@ const NodeConfigDrawer: React.FC = ({ form.setFieldsValue(currentConfig); } - }, [visible, node, form]); + }, [visible, node, nodeDefinition, form]); const handleOk = async () => { try { diff --git a/frontend/src/pages/Workflow/Definition/Design/index.tsx b/frontend/src/pages/Workflow/Definition/Design/index.tsx index 47df284e..e38afa0e 100644 --- a/frontend/src/pages/Workflow/Definition/Design/index.tsx +++ b/frontend/src/pages/Workflow/Definition/Design/index.tsx @@ -4,6 +4,7 @@ import { Button, Space, Card, Row, Col, message } from 'antd'; import { ArrowLeftOutlined, SaveOutlined, PlayCircleOutlined } from '@ant-design/icons'; import { Graph, Cell } from '@antv/x6'; import { getDefinitionDetail, saveDefinition } from '../service'; +import { getNodeDefinitionList } from './service'; import NodePanel from './components/NodePanel'; import NodeConfigDrawer from './components/NodeConfigModal'; import { NodeDefinition } from './types'; @@ -27,6 +28,21 @@ const WorkflowDesign: React.FC = () => { const [selectedNodeDefinition, setSelectedNodeDefinition] = useState(null); const [configModalVisible, setConfigModalVisible] = useState(false); const [definitionData, setDefinitionData] = useState(null); + const [nodeDefinitions, setNodeDefinitions] = useState([]); + + // 加载节点定义列表 + useEffect(() => { + const loadNodeDefinitions = async () => { + try { + const data = await getNodeDefinitionList(); + setNodeDefinitions(data); + } catch (error) { + console.error('加载节点定义失败:', error); + message.error('加载节点定义失败'); + } + }; + loadNodeDefinitions(); + }, []); useEffect(() => { if (graphContainerRef.current) { @@ -74,10 +90,14 @@ const WorkflowDesign: React.FC = () => { // 节点双击事件 graph.on('node:dblclick', ({ node }) => { - const nodeDefinition = node.getProp('nodeDefinition'); - setSelectedNode(node); - setSelectedNodeDefinition(nodeDefinition); - setConfigModalVisible(true); + const nodeType = node.getProp('type'); + // 从节点定义列表中找到对应的定义 + const definition = nodeDefinitions.find(def => def.type === nodeType); + if (definition) { + setSelectedNode(node); + setSelectedNodeDefinition(definition); + setConfigModalVisible(true); + } }); setGraph(graph); @@ -91,7 +111,7 @@ const WorkflowDesign: React.FC = () => { graph.dispose(); }; } - }, [graphContainerRef, id]); + }, [graphContainerRef, id, nodeDefinitions]); const loadDefinitionDetail = async (graphInstance: Graph, definitionId: number) => { try { @@ -266,7 +286,10 @@ const WorkflowDesign: React.FC = () => { > - +