节点验证。

This commit is contained in:
dengqichen 2024-12-06 17:15:06 +08:00
parent 4cb2b0b685
commit 84012dd98d
2 changed files with 55 additions and 21 deletions

View File

@ -1,5 +1,5 @@
import React, { useEffect } from 'react';
import { Space, Button, Tooltip, Divider } from 'antd';
import { Space, Button, Tooltip, Divider, message } from 'antd';
import {
ZoomInOutlined,
ZoomOutOutlined,
@ -11,6 +11,7 @@ import {
RedoOutlined,
CopyOutlined,
SnippetsOutlined,
CheckCircleOutlined,
} from '@ant-design/icons';
import { Graph, Cell } from '@antv/x6';
import { Selection } from '@antv/x6-plugin-selection';
@ -18,6 +19,7 @@ import { History } from '@antv/x6-plugin-history';
import { Clipboard } from '@antv/x6-plugin-clipboard';
import { Transform } from '@antv/x6-plugin-transform';
import { Keyboard } from '@antv/x6-plugin-keyboard';
import { validateFlow, hasCycle } from '../../validate';
import './index.less';
interface ToolbarProps {
@ -232,6 +234,26 @@ const Toolbar: React.FC<ToolbarProps> = ({ graph }) => {
return !clipboard?.isEmpty();
};
// 验证流程
const validateWorkflow = () => {
if (!graph) return;
const result = validateFlow(graph);
const hasCycleResult = hasCycle(graph);
if (hasCycleResult) {
message.error('流程图中存在循环,请检查');
return;
}
if (!result.valid) {
message.error(result.errors.join('\n'));
return;
}
message.success('流程验证通过');
};
return (
<div className="workflow-toolbar">
<Space split={<Divider type="vertical" />}>
@ -249,47 +271,35 @@ const Toolbar: React.FC<ToolbarProps> = ({ graph }) => {
<Button icon={<OneToOneOutlined />} onClick={resetZoom} />
</Tooltip>
</Space>
<Space>
<Tooltip title="全选 (Ctrl + A)">
<Tooltip title="全选">
<Button icon={<SelectOutlined />} onClick={selectAll} />
</Tooltip>
<Tooltip title="删除 (Delete)">
<Tooltip title="删除">
<Button
icon={<DeleteOutlined />}
onClick={deleteSelected}
disabled={!hasSelection()}
danger
/>
</Tooltip>
</Space>
<Space>
<Tooltip title="撤销 (Ctrl + Z)">
<Button
icon={<UndoOutlined />}
onClick={undo}
disabled={!graph?.getPlugin<History>('history')?.canUndo()}
/>
<Tooltip title="撤销">
<Button icon={<UndoOutlined />} onClick={undo} />
</Tooltip>
<Tooltip title="重做 (Ctrl + Shift + Z)">
<Button
icon={<RedoOutlined />}
onClick={redo}
disabled={!graph?.getPlugin<History>('history')?.canRedo()}
/>
<Tooltip title="重做">
<Button icon={<RedoOutlined />} onClick={redo} />
</Tooltip>
</Space>
<Space>
<Tooltip title="复制 (Ctrl + C)">
<Tooltip title="复制">
<Button
icon={<CopyOutlined />}
onClick={copy}
disabled={!hasSelection()}
/>
</Tooltip>
<Tooltip title="粘贴 (Ctrl + V)">
<Tooltip title="粘贴">
<Button
icon={<SnippetsOutlined />}
onClick={paste}
@ -297,6 +307,15 @@ const Toolbar: React.FC<ToolbarProps> = ({ graph }) => {
/>
</Tooltip>
</Space>
<Space>
<Tooltip title="验证流程">
<Button
icon={<CheckCircleOutlined />}
onClick={validateWorkflow}
type="primary"
/>
</Tooltip>
</Space>
</Space>
</div>
);

View File

@ -20,6 +20,7 @@ import Toolbar from './components/Toolbar';
import {NodeType, getNodeTypes} from './service';
import {DeleteOutlined, CopyOutlined, SettingOutlined, ClearOutlined, FullscreenOutlined} from '@ant-design/icons';
import EdgeConfig from './components/EdgeConfig';
import { validateFlow, hasCycle } from './validate';
const {Sider, Content} = Layout;
@ -681,6 +682,20 @@ const FlowDesigner: React.FC = () => {
if (!id || !detail || !graphRef.current || detail.status !== WorkflowStatus.DRAFT) return;
try {
// 验证流程
const result = validateFlow(graphRef.current);
const hasCycleResult = hasCycle(graphRef.current);
if (hasCycleResult) {
message.error('流程图中存在循环,请检查');
return;
}
if (!result.valid) {
message.error(result.errors.join('\n'));
return;
}
const graphData = graphRef.current.toJSON();
// 收集节点配置数据