ai-coding/deploy-ease-platform
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
dengqichen 2024-12-20 10:27:41 +08:00
parent e9dc5f1754
commit 10dda22a4b
4 changed files with 34 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
frontend/src/pages/Workflow/NodeDesign/Design.tsx
View File

@ -1,7 +1,7 @@
import React, {useState, useEffect} from 'react'; import React, {useState, useEffect} from 'react';
import {PageContainer} from '@ant-design/pro-layout'; import {PageContainer} from '@ant-design/pro-layout';
import {Button, Card, Form, Input, InputNumber, Select, Switch, Space, Menu, Tabs, Row, Col, message, ColorPicker} from 'antd'; import {Button, Card, Form, Input, InputNumber, Select, Switch, Space, Menu, Tabs, Row, Col, message, ColorPicker} from 'antd';
import type {NodeDesignData} from './types'; import type {NodeDesignDataResponse} from './types';
import * as service from './service'; import * as service from './service';
// Tab 配置 // Tab 配置
@ -223,21 +223,22 @@ const FormRenderer: React.FC<{
}; };
const NodeDesignForm: React.FC = () => { const NodeDesignForm: React.FC = () => {
const [nodeDefinitionsDefined, setNodeDefinitionsDefined] = useState<NodeDesignData[]>([]); const [nodeDefinitionsDefined, setNodeDefinitionsDefined] = useState<NodeDesignDataResponse[]>([]);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [selectedNode, setSelectedNode] = useState<NodeDesignData | null>(null); const [selectedNode, setSelectedNode] = useState<NodeDesignDataResponse | null>(null);
const [activeTab, setActiveTab] = useState<string>('panel'); const [activeTab, setActiveTab] = useState<string>('panel');
const [form] = Form.useForm(); const [form] = Form.useForm();
// 加载节点定义数据 // 加载节点定义数据
useEffect(() => { useEffect(() => {
const loadNodeDefinitionsDefined = async () => { const loadNodeDefinitions = async () => {
try { try {
setLoading(true); setLoading(true);
const data = await service.getNodeDefinitionsDefined(); const data = await service.getNodeDefinitionsDefined();
setNodeDefinitionsDefined(data); setNodeDefinitionsDefined(data);
if (data.length > 0) { // 自动选中第一个节点
setSelectedNode(data[0]); if (data && data.length > 0) {
handleNodeSelect(data[0]);
} }
} catch (error) { } catch (error) {
console.error('加载节点定义失败:', error); console.error('加载节点定义失败:', error);
@ -247,20 +248,20 @@ const NodeDesignForm: React.FC = () => {
} }
}; };
loadNodeDefinitionsDefined(); loadNodeDefinitions();
}, []); }, []);
// 获取当前节点可用的 Tab 列表 // 获取当前节点可用的 Tab 列表
const getAvailableTabs = (node: NodeDesignData | null) => { const getAvailableTabs = (node: NodeDesignDataResponse | null) => {
if (!node) return []; if (!node) return [];
return TAB_CONFIG.filter(tab => { return TAB_CONFIG.filter(tab => {
const value = node[tab.schemaKey as keyof NodeDesignData]; const value = node[tab.schemaKey as keyof NodeDesignDataResponse];
return value !== null && value !== undefined; return value !== null && value !== undefined;
}); });
}; };
// 处理节点选择 // 处理节点选择
const handleNodeSelect = (node: NodeDesignData) => { const handleNodeSelect = (node: NodeDesignDataResponse) => {
setSelectedNode(node); setSelectedNode(node);
// 更新表单数据 // 更新表单数据
form.setFieldsValue({ form.setFieldsValue({
@ -340,7 +341,7 @@ const NodeDesignForm: React.FC = () => {
if (!selectedNode) return null; if (!selectedNode) return null;
const currentTab = TAB_CONFIG.find(tab => tab.key === activeTab); const currentTab = TAB_CONFIG.find(tab => tab.key === activeTab);
if (!currentTab) return null; if (!currentTab) return null;
return selectedNode[currentTab.schemaKey as keyof NodeDesignData]; return selectedNode[currentTab.schemaKey as keyof NodeDesignDataResponse];
}; };
return ( return (

10
frontend/src/pages/Workflow/NodeDesign/index.tsx
View File

@ -4,7 +4,7 @@ import type { ProColumns } from '@ant-design/pro-components';
import { Tag, Space, Button, Modal } from 'antd'; import { Tag, Space, Button, Modal } from 'antd';
import { PlusOutlined } from '@ant-design/icons'; import { PlusOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import { NodeTypeEnum, type NodeDesignData } from './types'; import { NodeTypeEnum, type NodeDesignDataResponse } from './types';
import * as service from './service'; import * as service from './service';
// 节点类型标签颜色映射 // 节点类型标签颜色映射
@ -17,10 +17,10 @@ const nodeTypeColors = {
const NodeDesignList: React.FC = () => { const NodeDesignList: React.FC = () => {
const navigate = useNavigate(); const navigate = useNavigate();
const [detailVisible, setDetailVisible] = useState(false); const [detailVisible, setDetailVisible] = useState(false);
const [currentNode, setCurrentNode] = useState<NodeDesignData>(); const [currentNode, setCurrentNode] = useState<NodeDesignDataResponse>();
// 表格列定义 // 表格列定义
const columns: ProColumns<NodeDesignData>[] = [ const columns: ProColumns<NodeDesignDataResponse>[] = [
{ {
title: '节点编码', title: '节点编码',
dataIndex: 'nodeCode', dataIndex: 'nodeCode',
@ -92,11 +92,11 @@ const NodeDesignList: React.FC = () => {
return ( return (
<> <>
<ProTable<NodeDesignData> <ProTable<NodeDesignDataResponse>
columns={columns} columns={columns}
request={async (params) => { request={async (params) => {
const { current, pageSize, ...rest } = params; const { current, pageSize, ...rest } = params;
const response = await service.getNodeDesigns({ const response = await service.getNodeDefinitions({
current, current,
pageSize, pageSize,
...rest, ...rest,

17
frontend/src/pages/Workflow/NodeDesign/service.ts
View File

@ -1,26 +1,23 @@
// 节点设计相关服务 // 节点设计相关服务
import request from '@/utils/request'; import request from '@/utils/request';
import type { NodeDesignQuery, NodeDesignResponse, NodeDesignData, NodeDefinitionData } from './types'; import type { NodeDesignQuery, NodeDefinitionResponse, NodeDesignDataResponse } from './types';
const BASE_URL = '/api/v1/workflow/node-definition'; const BASE_URL = '/api/v1/workflow/node-definition';
// 获取节点设计列表 // 获取节点设计列表
export const getNodeDesigns = (params: NodeDesignQuery) => export const getNodeDefinitions = (params: NodeDesignQuery) =>
request.get<NodeDesignResponse>(`${BASE_URL}/page`, { params }); request.get<NodeDefinitionResponse>(`${BASE_URL}/page`, { params });
// 获取节点设计详情 // 获取节点设计详情
export const getNodeDesign = (nodeCode: string) => export const getNodeDefinition = (id: string) =>
request.get<NodeDesignData>(`${BASE_URL}/${nodeCode}`); request.get<NodeDefinitionResponse>(`${BASE_URL}/${id}`);
// 更新节点UI配置
export const updateNodeUIConfig = (nodeCode: string, uiVariables: any) =>
request.put(`${BASE_URL}/${nodeCode}/ui`, uiVariables);
// 获取已定义的节点类型配置 // 获取已定义的节点类型配置
export const getNodeDefinitionsDefined = () => export const getNodeDefinitionsDefined = () =>
request.get<NodeDefinitionData[]>(`${BASE_URL}/defined`); request.get<NodeDesignDataResponse[]>(`${BASE_URL}/defined`);
// 保存节点定义 // 保存节点定义
export const saveNodeDefinition = (data: NodeDefinitionData) => export const saveNodeDefinition = (data: NodeDesignDataResponse) =>
request.post<void>(`${BASE_URL}`, data); request.post<void>(`${BASE_URL}`, data);

12
frontend/src/pages/Workflow/NodeDesign/types.ts
View File

@ -71,7 +71,7 @@ export interface UIVariables extends BaseSchema {
} }
// 节点设计数据 // 节点设计数据
export interface NodeDesignData { export interface NodeDesignDataResponse extends BaseResponse{
nodeCode: string; nodeCode: string;
nodeName: string; nodeName: string;
category: string; category: string;
@ -95,6 +95,12 @@ export interface NodeDesignQuery extends BaseQuery{
} }
// 分页响应接口 // 分页响应接口
export interface NodeDesignResponse extends BaseResponse{ export interface NodeDefinitionResponse extends BaseResponse {
nodeCode: string;
nodeName: string;
nodeType: NodeTypeEnum;
panelVariablesSchema: NodeVariablesSchema | null;
uiVariables: UIVariables | null;
localVariablesSchema: NodeVariablesSchema | null;
formVariablesSchema: NodeVariablesSchema | null;
} }