feat(flow): 新增流程数据反向转换与更新功能

master
钟良源 3 months ago
parent 3ef6790140
commit 225776d99a

@ -20,6 +20,11 @@ export function setMainFlow(data: FlowDefinition, appId: string) {
return axios.post(`${urlPrefix}/appRes/${appId}/updateMain`, data); return axios.post(`${urlPrefix}/appRes/${appId}/updateMain`, data);
} }
// 更新主流程-新数据结构
export function setMainFlowNew(data: FlowDefinition, appId: string) {
return axios.post(`${urlPrefix}/appRes/${appId}/updateMainNew`, data);
}
// 新增子流程 // 新增子流程
export function addSub(appId: string, data?: FlowDefinition[]) { export function addSub(appId: string, data?: FlowDefinition[]) {
return axios.post( return axios.post(

@ -7,10 +7,10 @@ import {
Node, Node,
Edge Edge
} from '@xyflow/react'; } from '@xyflow/react';
import { setMainFlow } from '@/api/appRes'; import { setMainFlow, setMainFlowNew } from '@/api/appRes';
import { Message } from '@arco-design/web-react'; import { Message } from '@arco-design/web-react';
import { nodeTypeMap, registerNodeType } from '@/components/FlowEditor/node'; import { nodeTypeMap, registerNodeType } from '@/components/FlowEditor/node';
import { convertFlowData, revertFlowData } from '@/utils/convertFlowData'; import { convertFlowData, reverseConvertFlowData, revertFlowData } from '@/utils/convertFlowData';
import { localNodeData } from '@/pages/flowEditor/sideBar/config/localNodeData'; import { localNodeData } from '@/pages/flowEditor/sideBar/config/localNodeData';
import { useAlignmentGuidelines } from '@/hooks/useAlignmentGuidelines'; import { useAlignmentGuidelines } from '@/hooks/useAlignmentGuidelines';
import LocalNode from '@/components/FlowEditor/node/localNode/LocalNode'; import LocalNode from '@/components/FlowEditor/node/localNode/LocalNode';
@ -843,6 +843,7 @@ export const useFlowCallbacks = (
if (nodeType === 'EVENTLISTENE') { if (nodeType === 'EVENTLISTENE') {
// 事件接收节点 // 事件接收节点
params.eventListenes.push({ params.eventListenes.push({
nodeName: nodeConfig.nodeName || '',
eventId: eventConfig?.eventId || '', eventId: eventConfig?.eventId || '',
topic: eventConfig?.topic || '', topic: eventConfig?.topic || '',
eventName: eventConfig?.name || '', eventName: eventConfig?.name || '',
@ -852,6 +853,7 @@ export const useFlowCallbacks = (
else if (nodeType === 'EVENTSEND') { else if (nodeType === 'EVENTSEND') {
// 事件发送节点 // 事件发送节点
params.eventSends.push({ params.eventSends.push({
nodeName: nodeConfig.nodeName || '',
eventId: eventConfig?.eventId || '', eventId: eventConfig?.eventId || '',
topic: eventConfig?.topic || '', topic: eventConfig?.topic || '',
eventName: eventConfig?.name || '', eventName: eventConfig?.name || '',
@ -860,9 +862,8 @@ export const useFlowCallbacks = (
} }
} }
}); });
// 调用更新事件的API // 调用更新事件的API
if (initialData?.appId && params.eventListenes.lengrh > 0 && params.eventSends.length > 0) { if (params.eventListenes.lengrh > 0 || params.eventSends.length > 0) {
updateAppEvent(initialData.appId, params); updateAppEvent(initialData.appId, params);
} }
}; };
@ -885,11 +886,21 @@ export const useFlowCallbacks = (
// 转换会原始数据类型 // 转换会原始数据类型
const revertedData = revertFlowData(nodes, edges); const revertedData = revertFlowData(nodes, edges);
console.log('revertedData(中断):', revertedData); const newRevertedData = reverseConvertFlowData(nodes, edges);
const { flowData, currentAppData } = store.getState().ideContainer;
// console.log('revertedData(中断):', revertedData);
// console.log('newRevertedData(中断):', newRevertedData);
const params = {
...flowData[currentAppData.id]?.main || {},
components: newRevertedData
};
// return; // return;
updateEvent(revertedData.nodeConfigs); updateEvent(revertedData.nodeConfigs);
const res: any = await setMainFlow(revertedData, initialData.appId); // 旧版数据结构
// const res: any = await setMainFlow(revertedData, initialData.appId);
// 新版数据结构
const res: any = await setMainFlowNew(params, initialData.appId);
if (res.code === 200) { if (res.code === 200) {
Message.success('保存成功'); Message.success('保存成功');
} }

@ -468,6 +468,121 @@ export const revertFlowData = (nodes: any[], edges: any[]) => {
return flowData; return flowData;
}; };
/**
* React Flow nodes edges convertFlowData
* @param nodes - React Flow
* @param edges - React Flow
* @returns convertFlowData
*/
export const reverseConvertFlowData = (nodes: any[], edges: any[]) => {
// 初始化返回的数据结构
const flowData: any = {};
// 转换节点数据
if (nodes && nodes.length > 0) {
nodes.forEach(node => {
const nodeId = node.id;
// 构造节点配置对象
const nodeConfig: any = {
id: nodeId,
componentName: node.data?.title || nodeId,
position: node.position || { x: 0, y: 0 }
};
// 处理 component 信息
if (node.data?.component) {
nodeConfig.component = { ...node.data.component };
}
else {
nodeConfig.component = null;
}
// 处理参数信息
const parameters = node.data?.parameters || {};
// 处理 apiIns输入API
if (parameters.apiIns && parameters.apiIns.length > 0) {
nodeConfig.apiIns = parameters.apiIns;
}
else {
nodeConfig.apiIns = [];
}
// 处理 apiOuts输出API
if (parameters.apiOuts && parameters.apiOuts.length > 0) {
nodeConfig.apiOuts = parameters.apiOuts;
}
else {
nodeConfig.apiOuts = [];
}
// 处理 dataIns输入数据
if (parameters.dataIns && parameters.dataIns.length > 0) {
nodeConfig.dataIns = parameters.dataIns;
}
else {
nodeConfig.dataIns = [];
}
// 处理 dataOuts输出数据
if (parameters.dataOuts && parameters.dataOuts.length > 0) {
nodeConfig.dataOuts = parameters.dataOuts;
}
else {
nodeConfig.dataOuts = [];
}
// 初始化连接数组
nodeConfig.apiDownstream = [];
nodeConfig.apiUpstream = [];
nodeConfig.dataDownstream = [];
nodeConfig.dataUpstream = [];
// 将节点配置添加到 flowData 对象中
flowData[nodeId] = nodeConfig;
});
}
// 处理连接关系
if (edges && edges.length > 0) {
// 分析边的连接关系
edges.forEach(edge => {
const sourceNode = edge.source;
const targetNode = edge.target;
const sourceHandle = edge.sourceHandle || 'done';
const targetHandle = edge.targetHandle || 'start';
// 确定连接类型API 还是 DATA
const sourceNodeData = nodes.find(n => n.id === sourceNode);
const targetNodeData = nodes.find(n => n.id === targetNode);
const isApiConnection =
(sourceNodeData?.data?.parameters?.apiOuts?.some((out: any) => out.name === sourceHandle)) ||
(targetNodeData?.data?.parameters?.apiIns?.some((inp: any) => inp.name === targetHandle)) ||
sourceHandle === 'start' || targetHandle === 'end' ||
sourceHandle === 'end' || targetHandle === 'start';
if (isApiConnection) {
// API 连接
// 添加下游连接
flowData[sourceNode].apiDownstream.push([`${targetNode}$$${targetHandle}`]);
// 添加上游连接
flowData[targetNode].apiUpstream.push([`${sourceNode}$$${sourceHandle}`]);
}
else {
// 数据连接
const dataConnection = [`${sourceNode}@@${sourceHandle}`, `${targetNode}@@${targetHandle}`];
flowData[sourceNode].dataDownstream.push(dataConnection);
flowData[targetNode].dataUpstream.push(dataConnection);
}
});
}
return flowData;
};
// 获取节点的API输入参数 // 获取节点的API输入参数
const getNodeApiIns = (nodeId: string, nodeConfig: any, currentProjectCompData: any[]) => { const getNodeApiIns = (nodeId: string, nodeConfig: any, currentProjectCompData: any[]) => {
// 对于特定类型的节点使用预定义值 // 对于特定类型的节点使用预定义值
@ -562,6 +677,9 @@ const getNodeApiOuts = (nodeId: string, nodeConfig: any, currentProjectCompData:
else if (nodeId === 'start') { else if (nodeId === 'start') {
return [{ name: 'start', desc: '', dataType: '', defaultValue: '' }]; return [{ name: 'start', desc: '', dataType: '', defaultValue: '' }];
} }
else if (nodeId === 'end') {
return [];
}
else { else {
const comp = currentProjectCompData.filter(item => item.id === nodeConfig?.component?.compId); const comp = currentProjectCompData.filter(item => item.id === nodeConfig?.component?.compId);
if (comp && comp.length > 0) { if (comp && comp.length > 0) {

Loading…
Cancel
Save