1
This commit is contained in:
asp_ly
parent
bc0e595efa
commit
1e045bf030
@ -1,6 +1,6 @@
|
|||||||
import React, {useEffect, useState, useRef} from 'react';
|
import React, {useEffect, useState, useRef} from 'react';
|
||||||
import {useParams, useNavigate} from 'react-router-dom';
|
import {useParams, useNavigate} from 'react-router-dom';
|
||||||
import {Button, Space, Card, Row, Col, message, Modal, Collapse} from 'antd';
|
import {Button, Space, Card, Row, Col, message, Modal, Collapse, Tooltip} from 'antd';
|
||||||
import {
|
import {
|
||||||
ArrowLeftOutlined,
|
ArrowLeftOutlined,
|
||||||
SaveOutlined,
|
SaveOutlined,
|
||||||
@ -405,122 +405,97 @@ const WorkflowDesign: React.FC = () => {
|
|||||||
<div className="workflow-design">
|
<div className="workflow-design">
|
||||||
<div className="header">
|
<div className="header">
|
||||||
<Space>
|
<Space>
|
||||||
<Button
|
<Tooltip title="返回">
|
||||||
icon={<ArrowLeftOutlined />}
|
<Button
|
||||||
onClick={() => navigate('/workflow/definition')}
|
className="back-button"
|
||||||
className="back-button"
|
icon={<ArrowLeftOutlined />}
|
||||||
>
|
onClick={() => navigate('/workflow/definition')}
|
||||||
返回
|
/>
|
||||||
</Button>
|
</Tooltip>
|
||||||
<span>工作流设计器</span>
|
<span>{title}</span>
|
||||||
</Space>
|
</Space>
|
||||||
<div className="actions">
|
<div className="actions">
|
||||||
<Space>
|
<Space>
|
||||||
<Space.Compact>
|
<Space.Compact>
|
||||||
<Button
|
<Tooltip title="撤销">
|
||||||
icon={<SelectOutlined />}
|
<Button
|
||||||
onClick={() => {
|
icon={<UndoOutlined />}
|
||||||
if (!graph) return;
|
onClick={() => graph?.undo()}
|
||||||
const cells = graph.getCells();
|
/>
|
||||||
if (cells.length === 0) {
|
</Tooltip>
|
||||||
message.info('当前没有可选择的元素');
|
<Tooltip title="重做">
|
||||||
return;
|
<Button
|
||||||
}
|
icon={<RedoOutlined />}
|
||||||
graph.resetSelection();
|
onClick={() => graph?.redo()}
|
||||||
graph.select(cells);
|
/>
|
||||||
}}
|
</Tooltip>
|
||||||
title="全选"
|
|
||||||
/>
|
|
||||||
<Button
|
|
||||||
icon={<CopyOutlined />}
|
|
||||||
onClick={() => {
|
|
||||||
if (!graph) return;
|
|
||||||
const cells = graph.getSelectedCells();
|
|
||||||
if (cells.length === 0) {
|
|
||||||
message.info('请先选择要复制的元素');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
graph.copy(cells);
|
|
||||||
}}
|
|
||||||
title="复制"
|
|
||||||
/>
|
|
||||||
<Button
|
|
||||||
icon={<ScissorOutlined />}
|
|
||||||
onClick={() => {
|
|
||||||
if (!graph) return;
|
|
||||||
const cells = graph.getSelectedCells();
|
|
||||||
if (cells.length === 0) {
|
|
||||||
message.info('请先选择要剪切的元素');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
graph.cut(cells);
|
|
||||||
}}
|
|
||||||
title="剪切"
|
|
||||||
/>
|
|
||||||
<Button
|
|
||||||
icon={<SnippetsOutlined />}
|
|
||||||
onClick={() => {
|
|
||||||
if (!graph) return;
|
|
||||||
if (!graph.isClipboardEmpty()) {
|
|
||||||
const cells = graph.paste({ offset: 32 });
|
|
||||||
graph.cleanSelection();
|
|
||||||
graph.select(cells);
|
|
||||||
} else {
|
|
||||||
message.info('剪贴板为空');
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
title="粘贴"
|
|
||||||
/>
|
|
||||||
<Button
|
|
||||||
icon={<DeleteOutlined />}
|
|
||||||
onClick={() => {
|
|
||||||
if (!graph) return;
|
|
||||||
const cells = graph.getSelectedCells();
|
|
||||||
if (cells.length === 0) {
|
|
||||||
message.info('请先选择要删除的元素');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
Modal.confirm({
|
|
||||||
title: '确认删除',
|
|
||||||
content: '确定要删除选中的元素吗？',
|
|
||||||
onOk: () => {
|
|
||||||
graph.removeCells(cells);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
danger
|
|
||||||
title="删除"
|
|
||||||
/>
|
|
||||||
</Space.Compact>
|
</Space.Compact>
|
||||||
<Space.Compact>
|
<Space.Compact>
|
||||||
<Button
|
<Tooltip title="剪切">
|
||||||
icon={<UndoOutlined />}
|
<Button
|
||||||
onClick={() => {
|
icon={<ScissorOutlined />}
|
||||||
if (!graph) return;
|
onClick={() => graph?.cut()}
|
||||||
if (graph.canUndo()) {
|
/>
|
||||||
graph.undo();
|
</Tooltip>
|
||||||
} else {
|
<Tooltip title="复制">
|
||||||
message.info('没有可撤销的操作');
|
<Button
|
||||||
}
|
icon={<CopyOutlined />}
|
||||||
}}
|
onClick={() => graph?.copy()}
|
||||||
title="撤销"
|
/>
|
||||||
/>
|
</Tooltip>
|
||||||
<Button
|
<Tooltip title="粘贴">
|
||||||
icon={<RedoOutlined />}
|
<Button
|
||||||
onClick={() => {
|
icon={<SnippetsOutlined />}
|
||||||
if (!graph) return;
|
onClick={() => graph?.paste()}
|
||||||
if (graph.canRedo()) {
|
/>
|
||||||
graph.redo();
|
</Tooltip>
|
||||||
} else {
|
|
||||||
message.info('没有可重做的操作');
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
title="重做"
|
|
||||||
/>
|
|
||||||
</Space.Compact>
|
</Space.Compact>
|
||||||
<Button onClick={handleSaveWorkflow} type="primary" icon={<SaveOutlined />}>
|
<Space.Compact>
|
||||||
保存
|
<Tooltip title="选择">
|
||||||
</Button>
|
<Button
|
||||||
|
icon={<SelectOutlined />}
|
||||||
|
onClick={() => {
|
||||||
|
if (!graph) return;
|
||||||
|
const cells = graph.getCells();
|
||||||
|
if (cells.length === 0) {
|
||||||
|
message.info('当前没有可选择的元素');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
graph.resetSelection();
|
||||||
|
graph.select(cells);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Tooltip>
|
||||||
|
<Tooltip title="删除">
|
||||||
|
<Button
|
||||||
|
icon={<DeleteOutlined />}
|
||||||
|
onClick={() => {
|
||||||
|
if (!graph) return;
|
||||||
|
const cells = graph.getSelectedCells();
|
||||||
|
if (cells.length === 0) {
|
||||||
|
message.info('请先选择要删除的元素');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
Modal.confirm({
|
||||||
|
title: '确认删除',
|
||||||
|
content: '确定要删除选中的元素吗？',
|
||||||
|
onOk: () => {
|
||||||
|
graph.removeCells(cells);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Tooltip>
|
||||||
|
</Space.Compact>
|
||||||
|
<Tooltip title="保存">
|
||||||
|
<Button
|
||||||
|
type="primary"
|
||||||
|
icon={<SaveOutlined />}
|
||||||
|
onClick={handleSaveWorkflow}
|
||||||
|
>
|
||||||
|
保存
|
||||||
|
</Button>
|
||||||
|
</Tooltip>
|
||||||
</Space>
|
</Space>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user