模版解析正确

This commit is contained in:
dengqichen 2024-12-06 12:50:20 +08:00
parent e96e19ca01
commit 49a711356b

View File

@ -16,7 +16,7 @@ import './index.module.less';
import NodePanel from './components/NodePanel'; import NodePanel from './components/NodePanel';
import NodeConfig from './components/NodeConfig'; import NodeConfig from './components/NodeConfig';
import Toolbar from './components/Toolbar'; import Toolbar from './components/Toolbar';
import { NodeType } from './service'; import { NodeType, getNodeTypes } from './service';
const {Sider, Content} = Layout; const {Sider, Content} = Layout;
@ -24,7 +24,10 @@ interface NodeData {
type: string; type: string;
name?: string; name?: string;
description?: string; description?: string;
config: Record<string, any>; config: {
executor?: string;
[key: string]: any;
};
} }
const FlowDesigner: React.FC = () => { const FlowDesigner: React.FC = () => {
@ -39,8 +42,27 @@ const FlowDesigner: React.FC = () => {
const [configVisible, setConfigVisible] = useState(false); const [configVisible, setConfigVisible] = useState(false);
const [currentNode, setCurrentNode] = useState<Node>(); const [currentNode, setCurrentNode] = useState<Node>();
const [currentNodeType, setCurrentNodeType] = useState<NodeType>(); const [currentNodeType, setCurrentNodeType] = useState<NodeType>();
const [nodeTypes, setNodeTypes] = useState<NodeType[]>([]);
const [form] = Form.useForm(); 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 = () => { const initGraph = () => {
if (!containerRef.current) return; if (!containerRef.current) return;
@ -234,17 +256,20 @@ const FlowDesigner: React.FC = () => {
const data = node.getData() as NodeData; const data = node.getData() as NodeData;
if (data) { if (data) {
// 获取节点类型 // 获取节点类型
const nodeType = draggedNodeRef.current; const nodeType = nodeTypes.find(type => type.code === data.type);
if (nodeType && nodeType.code === data.type) { if (nodeType) {
setCurrentNodeType(nodeType); setCurrentNodeType(nodeType);
} // 设置表单值,包括基本信息和配置信息
// 设置表单值
form.setFieldsValue({ form.setFieldsValue({
name: data.name, name: data.name || nodeType.name,
description: data.description, description: data.description,
...data.config, executor: data.config?.executor,
...data.config
}); });
setConfigVisible(true); setConfigVisible(true);
} else {
message.error('未找到对应的节点类型');
}
} }
}); });
@ -352,7 +377,7 @@ const FlowDesigner: React.FC = () => {
data: { data: {
type: nodeType.code, type: nodeType.code,
name: nodeType.name, name: nodeType.name,
config: {}, config: {} as any,
}, },
}); });