增加工具栏提示。
This commit is contained in:
parent
9e35ac490e
commit
9c15bc527f
@ -31,7 +31,7 @@ const NodeConfigDrawer: React.FC<NodeConfigDrawerProps> = ({
|
|||||||
const [form] = Form.useForm();
|
const [form] = Form.useForm();
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (visible && node) {
|
if (visible && node && nodeDefinition) {
|
||||||
// 获取节点当前的配置
|
// 获取节点当前的配置
|
||||||
const currentConfig = {
|
const currentConfig = {
|
||||||
code: node.getProp('code'),
|
code: node.getProp('code'),
|
||||||
@ -42,7 +42,7 @@ const NodeConfigDrawer: React.FC<NodeConfigDrawerProps> = ({
|
|||||||
|
|
||||||
form.setFieldsValue(currentConfig);
|
form.setFieldsValue(currentConfig);
|
||||||
}
|
}
|
||||||
}, [visible, node, form]);
|
}, [visible, node, nodeDefinition, form]);
|
||||||
|
|
||||||
const handleOk = async () => {
|
const handleOk = async () => {
|
||||||
try {
|
try {
|
||||||
|
|||||||
@ -4,6 +4,7 @@ import { Button, Space, Card, Row, Col, message } from 'antd';
|
|||||||
import { ArrowLeftOutlined, SaveOutlined, PlayCircleOutlined } from '@ant-design/icons';
|
import { ArrowLeftOutlined, SaveOutlined, PlayCircleOutlined } from '@ant-design/icons';
|
||||||
import { Graph, Cell } from '@antv/x6';
|
import { Graph, Cell } from '@antv/x6';
|
||||||
import { getDefinitionDetail, saveDefinition } from '../service';
|
import { getDefinitionDetail, saveDefinition } from '../service';
|
||||||
|
import { getNodeDefinitionList } from './service';
|
||||||
import NodePanel from './components/NodePanel';
|
import NodePanel from './components/NodePanel';
|
||||||
import NodeConfigDrawer from './components/NodeConfigModal';
|
import NodeConfigDrawer from './components/NodeConfigModal';
|
||||||
import { NodeDefinition } from './types';
|
import { NodeDefinition } from './types';
|
||||||
@ -27,6 +28,21 @@ const WorkflowDesign: React.FC = () => {
|
|||||||
const [selectedNodeDefinition, setSelectedNodeDefinition] = useState<NodeDefinition | null>(null);
|
const [selectedNodeDefinition, setSelectedNodeDefinition] = useState<NodeDefinition | null>(null);
|
||||||
const [configModalVisible, setConfigModalVisible] = useState(false);
|
const [configModalVisible, setConfigModalVisible] = useState(false);
|
||||||
const [definitionData, setDefinitionData] = useState<any>(null);
|
const [definitionData, setDefinitionData] = useState<any>(null);
|
||||||
|
const [nodeDefinitions, setNodeDefinitions] = useState<NodeDefinition[]>([]);
|
||||||
|
|
||||||
|
// 加载节点定义列表
|
||||||
|
useEffect(() => {
|
||||||
|
const loadNodeDefinitions = async () => {
|
||||||
|
try {
|
||||||
|
const data = await getNodeDefinitionList();
|
||||||
|
setNodeDefinitions(data);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('加载节点定义失败:', error);
|
||||||
|
message.error('加载节点定义失败');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
loadNodeDefinitions();
|
||||||
|
}, []);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (graphContainerRef.current) {
|
if (graphContainerRef.current) {
|
||||||
@ -74,10 +90,14 @@ const WorkflowDesign: React.FC = () => {
|
|||||||
|
|
||||||
// 节点双击事件
|
// 节点双击事件
|
||||||
graph.on('node:dblclick', ({ node }) => {
|
graph.on('node:dblclick', ({ node }) => {
|
||||||
const nodeDefinition = node.getProp('nodeDefinition');
|
const nodeType = node.getProp('type');
|
||||||
|
// 从节点定义列表中找到对应的定义
|
||||||
|
const definition = nodeDefinitions.find(def => def.type === nodeType);
|
||||||
|
if (definition) {
|
||||||
setSelectedNode(node);
|
setSelectedNode(node);
|
||||||
setSelectedNodeDefinition(nodeDefinition);
|
setSelectedNodeDefinition(definition);
|
||||||
setConfigModalVisible(true);
|
setConfigModalVisible(true);
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
setGraph(graph);
|
setGraph(graph);
|
||||||
@ -91,7 +111,7 @@ const WorkflowDesign: React.FC = () => {
|
|||||||
graph.dispose();
|
graph.dispose();
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
}, [graphContainerRef, id]);
|
}, [graphContainerRef, id, nodeDefinitions]);
|
||||||
|
|
||||||
const loadDefinitionDetail = async (graphInstance: Graph, definitionId: number) => {
|
const loadDefinitionDetail = async (graphInstance: Graph, definitionId: number) => {
|
||||||
try {
|
try {
|
||||||
@ -266,7 +286,10 @@ const WorkflowDesign: React.FC = () => {
|
|||||||
>
|
>
|
||||||
<Row gutter={16}>
|
<Row gutter={16}>
|
||||||
<Col span={6}>
|
<Col span={6}>
|
||||||
<NodePanel onNodeDragStart={handleNodeDragStart} />
|
<NodePanel
|
||||||
|
nodeDefinitions={nodeDefinitions}
|
||||||
|
onNodeDragStart={handleNodeDragStart}
|
||||||
|
/>
|
||||||
</Col>
|
</Col>
|
||||||
<Col span={18}>
|
<Col span={18}>
|
||||||
<Card
|
<Card
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user