From 2d3cd8db920da99226c05fd8f7bd4f547f05ed02 Mon Sep 17 00:00:00 2001 From: dengqichen Date: Mon, 16 Dec 2024 11:15:09 +0800 Subject: [PATCH] 1 --- .../Definition/components/EditModal.tsx | 107 +++++++++++-- .../src/pages/Workflow/Definition/index.tsx | 142 +++++++++++------- .../src/pages/Workflow/Definition/service.ts | 18 ++- .../src/pages/Workflow/Definition/types.ts | 29 +++- 4 files changed, 224 insertions(+), 72 deletions(-) diff --git a/frontend/src/pages/Workflow/Definition/components/EditModal.tsx b/frontend/src/pages/Workflow/Definition/components/EditModal.tsx index 793e4466..df4d144a 100644 --- a/frontend/src/pages/Workflow/Definition/components/EditModal.tsx +++ b/frontend/src/pages/Workflow/Definition/components/EditModal.tsx @@ -1,7 +1,7 @@ -import React, {useEffect} from 'react'; -import {Modal, Form, Input, message} from 'antd'; -import type {WorkflowDefinition} from '../types'; -import {saveDefinition, updateDefinition} from '../service'; +import React, {useEffect, useState} from 'react'; +import {Modal, Form, Input, message, Select} from 'antd'; +import type {WorkflowDefinition, WorkflowCategory} from '../types'; +import {saveDefinition, updateDefinition, getWorkflowCategories} from '../service'; interface EditModalProps { visible: boolean; @@ -13,27 +13,74 @@ interface EditModalProps { const EditModal: React.FC = ({visible, onClose, onSuccess, record}) => { const [form] = Form.useForm(); const isEdit = !!record; + const [categories, setCategories] = useState([]); + const [selectedCategory, setSelectedCategory] = useState(); + + useEffect(() => { + if (visible) { + loadCategories(); + } + }, [visible]); useEffect(() => { if (visible && record) { - form.setFieldsValue(record); + // 找到当前分类 + const category = categories.find(c => c.code === record.category); + setSelectedCategory(category); + + // 设置表单值，使用lable显示 + form.setFieldsValue({ + ...record, + // 分类显示lable + category: { + label: category?.lable, + value: record.category + }, + // 触发器显示lable + triggers: record.triggers?.map(triggerCode => ({ + label: category?.supportedTriggers.find(t => t.code === triggerCode)?.lable, + value: triggerCode + })) || [] + }); } - }, [visible, record]); + }, [visible, record, categories]); + + const loadCategories = async () => { + try { + const data = await getWorkflowCategories(); + setCategories(data); + } catch (error) { + console.error('加载工作流分类失败:', error); + message.error('加载工作流分类失败'); + } + }; + + const handleCategoryChange = (selected: { value: string, label: string }) => { + const category = categories.find(c => c.code === selected.value); + setSelectedCategory(category); + // 当切换分类时，清空触发器选择 + form.setFieldValue('triggers', []); + }; const handleOk = async () => { try { const values = await form.validateFields(); + const submitData = { + ...values, + // 提取code值提交给后端 + category: values.category.value, + triggers: values.triggers.map((t: {value: string}) => t.value), + flowVersion: isEdit ? record.flowVersion : 1, + status: isEdit ? record.status : 'DRAFT' + }; + if (isEdit) { await updateDefinition(record.id, { ...record, - ...values, + ...submitData, }); } else { - await saveDefinition({ - ...values, - flowVersion: 1, - status: 'DRAFT' - } as WorkflowDefinition); + await saveDefinition(submitData as WorkflowDefinition); } message.success(isEdit ? '更新成功' : '保存成功'); onSuccess?.(); @@ -62,6 +109,42 @@ const EditModal: React.FC = ({visible, onClose, onSuccess, recor layout="vertical" preserve={false} > + + + + + + { } | null>(null); const [modalVisible, setModalVisible] = useState(false); const [currentRecord, setCurrentRecord] = useState(); + const [categories, setCategories] = useState([]); const [query, setQuery] = useState({ pageNum: DEFAULT_CURRENT - 1, pageSize: DEFAULT_PAGE_SIZE @@ -39,8 +40,19 @@ const WorkflowDefinitionList: React.FC = () => { } }; + const loadCategories = async () => { + try { + const data = await service.getWorkflowCategories(); + setCategories(data); + } catch (error) { + console.error('加载工作流分类失败:', error); + message.error('加载工作流分类失败'); + } + }; + useEffect(() => { loadData(query); + loadCategories(); }, [query]); const handleCreateFlow = () => { @@ -62,20 +74,80 @@ const WorkflowDefinitionList: React.FC = () => { setCurrentRecord(undefined); }; + const handleDeploy = async (id: number) => { + confirm({ + title: '确认发布', + icon: , + content: '确定要发布该流程定义吗？发布后将不能修改。', + onOk: async () => { + try { + await service.publishDefinition(id); + message.success('发布成功'); + loadData(query); + } catch (error) { + if (error instanceof Error) { + message.error(error.message); + } + } + }, + }); + }; + + const handleDelete = async (id: number) => { + confirm({ + title: '确认删除', + icon: , + content: '确定要删除该流程定义吗？删除后不可恢复。', + onOk: async () => { + try { + await service.deleteDefinition(id); + message.success('删除成功'); + loadData(query); + } catch (error) { + if (error instanceof Error) { + message.error(error.message); + } + } + }, + }); + }; + const columns = [ { title: '流程名称', dataIndex: 'name', key: 'name', - render: (text: string, record: WorkflowDefinition) => ( - navigate(`/workflow-definitions/${record.id}`)}>{text} - ), }, { title: '流程标识', dataIndex: 'key', key: 'key', }, + { + title: '流程分类', + dataIndex: 'category', + key: 'category', + render: (category: string) => { + const categoryInfo = categories.find(c => c.code === category); + return categoryInfo?.lable || category; + } + }, + { + title: '触发方式', + dataIndex: 'triggers', + key: 'triggers', + render: (triggers: string[], record: WorkflowDefinition) => { + const categoryInfo = categories.find(c => c.code === record.category); + return (triggers || [])?.map(triggerCode => { + const triggerInfo = categoryInfo?.supportedTriggers?.find(t => t.code === triggerCode); + return ( + + {triggerInfo?.lable || triggerCode} + + ); + }); + } + }, { title: '版本', dataIndex: 'flowVersion', @@ -117,70 +189,30 @@ const WorkflowDefinitionList: React.FC = () => { }, ]; - const handleDeploy = async (id: number) => { - confirm({ - title: '确认发布', - icon: , - content: '确定要发布该流程定义吗？发布后将不能修改。', - onOk: async () => { - try { - await service.publishDefinition(id); - message.success('发布成功'); - loadData(query); - } catch (error) { - if (error instanceof Error) { - message.error(error.message); - } - } - }, - }); - }; - - const handleDelete = async (id: number) => { - confirm({ - title: '确认删除', - icon: , - content: '确定要删除该流程定义吗？删除后不可恢复。', - onOk: async () => { - try { - await service.deleteDefinition(id); - message.success('删除成功'); - loadData(query); - } catch (error) { - if (error instanceof Error) { - message.error(error.message); - } - } - }, - }); - }; - return ( } - onClick={handleCreateFlow} - > + } > { - setQuery({...query, pageNum: page - 1, pageSize}); - }, + setQuery({ + ...query, + pageNum: page - 1, + pageSize + }); + } }} /> * @returns Promise */ export const publishDefinition = (id: number) => - request.post(`${DEFINITION_URL}/${id}/published`); \ No newline at end of file + request.post(`${DEFINITION_URL}/${id}/published`); + +/** + * 获取工作流分类列表 + * @returns Promise 工作流分类列表 + */ +export const getWorkflowCategories = () => + request.get(`${DEFINITION_URL}/categories`); + +/** + * 获取工作流分类 + * @param id 工作流分类ID + * @returns Promise 工作流分类 + */ +export const getWorkflowCategory = (id: number) => + request.get(`${DEFINITION_URL}/categories/${id}`); \ No newline at end of file diff --git a/frontend/src/pages/Workflow/Definition/types.ts b/frontend/src/pages/Workflow/Definition/types.ts index f589a8e5..30e28174 100644 --- a/frontend/src/pages/Workflow/Definition/types.ts +++ b/frontend/src/pages/Workflow/Definition/types.ts @@ -1,11 +1,14 @@ import { BaseResponse, BaseQuery } from '@/types/base'; export interface WorkflowDefinition extends BaseResponse { + id: number; name: string; key: string; - flowVersion: number; - status: string; - description: string; + description?: string; + flowVersion?: number; + status?: string; + category: string; + triggers: string[]; graph: { nodes: any[]; edges: any[]; @@ -19,4 +22,22 @@ export interface WorkflowDefinitionQuery extends BaseQuery { name?: string; key?: string; status?: string; -} \ No newline at end of file +} + +/** + * 工作流触发器类型 + */ +export interface WorkflowTrigger { + code: string; + label: string; +} + +/** + * 工作流分类 + */ +export interface WorkflowCategory { + code: string; + label: string; + description: string; + supportedTriggers: WorkflowTrigger[]; +}