增加工具栏提示。

This commit is contained in:
dengqichen 2024-12-13 13:36:28 +08:00
parent 9e35ac490e
commit 9c15bc527f
2 changed files with 31 additions and 8 deletions

View File

@ -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 {

View File

@ -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