From 9cf6dde2bd7074930bae6f333af2fecc4288ffbf Mon Sep 17 00:00:00 2001 From: dengqichen Date: Thu, 19 Dec 2024 18:27:16 +0800 Subject: [PATCH] 1 --- .../src/pages/Workflow/NodeDesign/Design.tsx | 48 ++++++++++--------- .../src/pages/Workflow/NodeDesign/index.tsx | 4 +- .../src/pages/Workflow/NodeDesign/service.ts | 13 +++-- .../src/pages/Workflow/NodeDesign/types.ts | 4 +- 4 files changed, 36 insertions(+), 33 deletions(-) diff --git a/frontend/src/pages/Workflow/NodeDesign/Design.tsx b/frontend/src/pages/Workflow/NodeDesign/Design.tsx index 8841bfd0..00ec367b 100644 --- a/frontend/src/pages/Workflow/NodeDesign/Design.tsx +++ b/frontend/src/pages/Workflow/NodeDesign/Design.tsx @@ -2,8 +2,9 @@ import React, { useEffect, useState, useRef } from 'react'; import { PageContainer } from '@ant-design/pro-components'; import { Row, Col, Menu, Tabs, Card, Button, message } from 'antd'; import { BetaSchemaForm, ProForm, ProFormGroup, ProFormText, ProFormTextArea } from '@ant-design/pro-form'; -import type { NodeDefinitionData } from './types'; +import type { NodeDesignData } from './types'; import * as service from './service'; +import { useParams, useLocation } from 'react-router-dom'; // Tab 配置 const TAB_CONFIG = [ @@ -15,49 +16,50 @@ const TAB_CONFIG = [ const NodeDesignForm: React.FC = () => { // 缓存节点定义数据 - const [nodeDefinitions, setNodeDefinitions] = useState([]); + const [nodeDesignData, setNodeDesignData] = useState([]); const [loading, setLoading] = useState(false); // 当前选中的节点 - const [selectedNode, setSelectedNode] = useState(null); + const [selectedNode, setSelectedNode] = useState(null); // 当前选中的 tab const [activeTab, setActiveTab] = useState('panel'); const formRef = useRef(); const uiFormRef = useRef(); // 添加 UI 配置表单的 ref + const { nodeCode } = useParams(); + const location = useLocation(); + const nodeData = location.state?.nodeData; + // 加载节点定义数据 useEffect(() => { - const loadNodeDefinitions = async () => { - try { - setLoading(true); - const data = await service.getNodeDefinitionsDefined(); - setNodeDefinitions(data); - // 默认选中第一个节点 - if (data.length > 0) { - setSelectedNode(data[0]); + const loadData = async () => { + if (nodeCode && !nodeData) { + try { + const data = await service.getNodeDesign(nodeCode); + setSelectedNode(data); + } catch (error) { + console.error('Failed to load node design:', error); + message.error('加载节点设计失败'); } - } catch (error) { - console.error('加载节点定义失败:', error); - } finally { - setLoading(false); + } else if (nodeData) { + setSelectedNode(nodeData); } }; - - loadNodeDefinitions(); - }, []); + loadData(); + }, [nodeCode, nodeData]); // 获取当前节点可用的 Tab 列表 - const getAvailableTabs = (node: NodeDefinitionData | null) => { + const getAvailableTabs = (node: NodeDesignData | null) => { if (!node) return []; return TAB_CONFIG.filter(tab => { - const value = node[tab.schemaKey as keyof NodeDefinitionData]; + const value = node[tab.schemaKey as keyof NodeDesignData]; return value !== null && value !== undefined; }); }; // 处理节点选择 const handleNodeSelect = (nodeCode: string) => { - const node = nodeDefinitions.find(n => n.nodeCode === nodeCode); + const node = nodeDesignData.find(n => n.nodeCode === nodeCode); if (node) { setSelectedNode(node); // 获取可用的 tab 列表 @@ -203,7 +205,7 @@ const NodeDesignForm: React.FC = () => { // 渲染 Tab 内容 const renderTabContent = (schemaKey: string) => { if (!selectedNode) return null; - const schema = selectedNode[schemaKey as keyof NodeDefinitionData]; + const schema = selectedNode[schemaKey as keyof NodeDesignData]; if (!schema) return null; return ( @@ -347,7 +349,7 @@ const NodeDesignForm: React.FC = () => { ({ + items={nodeDesignData.map(node => ({ key: node.nodeCode, label: `${node.nodeName}（${node.nodeCode}）`, }))} diff --git a/frontend/src/pages/Workflow/NodeDesign/index.tsx b/frontend/src/pages/Workflow/NodeDesign/index.tsx index 38bf427f..bfaa94b2 100644 --- a/frontend/src/pages/Workflow/NodeDesign/index.tsx +++ b/frontend/src/pages/Workflow/NodeDesign/index.tsx @@ -79,7 +79,9 @@ const NodeDesignList: React.FC = () => { diff --git a/frontend/src/pages/Workflow/NodeDesign/service.ts b/frontend/src/pages/Workflow/NodeDesign/service.ts index 42c1c431..8397e242 100644 --- a/frontend/src/pages/Workflow/NodeDesign/service.ts +++ b/frontend/src/pages/Workflow/NodeDesign/service.ts @@ -1,7 +1,7 @@ // 节点设计相关服务 import request from '@/utils/request'; -import type { NodeDesignQuery, NodeDesignResponse, NodeDesignData, NodeDefinitionData } from './types'; +import type { NodeDesignQuery, NodeDesignResponse, NodeDesignData } from './types'; const BASE_URL = '/api/v1/workflow/node-definition'; @@ -17,10 +17,9 @@ export const getNodeDesign = (nodeCode: string) => export const updateNodeUIConfig = (nodeCode: string, uiVariables: any) => request.put(`${BASE_URL}/${nodeCode}/ui`, uiVariables); -// 获取已定义的节点类型配置 -export const getNodeDefinitionsDefined = () => - request.get(`${BASE_URL}/defined`); - // 保存节点定义 -export const saveNodeDefinition = (data: NodeDefinitionData) => - request.post(`${BASE_URL}`, data); +export const saveNodeDefinition = (data: NodeDesignData) => + request.post(`${BASE_URL}`, data); + +export const getNodeDefinitionsDefined = () => + request.get(`${BASE_URL}/defined`); \ No newline at end of file diff --git a/frontend/src/pages/Workflow/NodeDesign/types.ts b/frontend/src/pages/Workflow/NodeDesign/types.ts index 69c98876..0041ba7a 100644 --- a/frontend/src/pages/Workflow/NodeDesign/types.ts +++ b/frontend/src/pages/Workflow/NodeDesign/types.ts @@ -1,7 +1,7 @@ // 节点设计相关类型定义 // 基础Schema接口 -import {BaseQuery, BaseResponse} from "@/types/base"; +import {BaseQuery, Page} from "@/types/base"; export interface BaseSchema { type: string; @@ -95,6 +95,6 @@ export interface NodeDesignQuery extends BaseQuery{ } // 分页响应接口 -export interface NodeDesignResponse extends BaseResponse{ +export interface NodeDesignResponse extends Page{ }