节点验证。
This commit is contained in:
parent
4cb2b0b685
commit
84012dd98d
@ -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>
|
||||
);
|
||||
|
||||
@ -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();
|
||||
|
||||
// 收集节点配置数据
|
||||
|
||||
Loading…
Reference in New Issue
Block a user