From 6d8afea80776f6e85807f56cef89dcfb4ad020e5 Mon Sep 17 00:00:00 2001 From: dengqichen Date: Fri, 24 Oct 2025 14:28:25 +0800 Subject: [PATCH] =?UTF-8?q?=E8=A1=A8=E5=8D=95CRUD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/pages/Form/Definition/Designer.tsx | 218 +------ .../Definition/components/CreateModal.tsx | 283 +++++++++ .../components/EditBasicInfoModal.tsx | 229 +++++++ frontend/src/pages/Form/Definition/index.tsx | 50 +- .../Definition/components/EditModal.tsx | 392 +++++++----- .../src/pages/Workflow/Definition/index.tsx | 589 +++++++++++++----- .../src/pages/Workflow/Definition/service.ts | 65 +- .../src/pages/Workflow/Definition/types.ts | 43 +- .../Instance/components/DetailModal.tsx | 12 +- .../Instance/components/HistoryModal.tsx | 2 +- frontend/src/router/index.tsx | 2 +- 11 files changed, 1361 insertions(+), 524 deletions(-) create mode 100644 frontend/src/pages/Form/Definition/components/CreateModal.tsx create mode 100644 frontend/src/pages/Form/Definition/components/EditBasicInfoModal.tsx diff --git a/frontend/src/pages/Form/Definition/Designer.tsx b/frontend/src/pages/Form/Definition/Designer.tsx index 2ea229b3..1835e590 100644 --- a/frontend/src/pages/Form/Definition/Designer.tsx +++ b/frontend/src/pages/Form/Definition/Designer.tsx @@ -1,19 +1,12 @@ import React, { useState, useEffect } from 'react'; import { useNavigate, useParams } from 'react-router-dom'; -import { Card, CardHeader, CardTitle, CardContent, CardDescription } from '@/components/ui/card'; +import { Card, CardContent } from '@/components/ui/card'; import { Button } from '@/components/ui/button'; -import { Input } from '@/components/ui/input'; -import { Label } from '@/components/ui/label'; -import { Textarea } from '@/components/ui/textarea'; -import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { FormDesigner } from '@/components/FormDesigner'; import type { FormSchema } from '@/components/FormDesigner'; -import { ArrowLeft, FileText, Tag, Folder, AlignLeft, Info } from 'lucide-react'; -import { Separator } from '@/components/ui/separator'; -import { getDefinitionById, createDefinition, updateDefinition } from './service'; -import { getEnabledCategories } from '../Category/service'; +import { ArrowLeft, Workflow } from 'lucide-react'; +import { getDefinitionById, updateDefinition } from './service'; import type { FormDefinitionRequest } from './types'; -import type { FormCategoryResponse } from '../Category/types'; /** * 表单设计器页面 @@ -21,79 +14,49 @@ import type { FormCategoryResponse } from '../Category/types'; const FormDesignerPage: React.FC = () => { const navigate = useNavigate(); const { id } = useParams<{ id: string }>(); - const isEdit = !!id; - - const [categories, setCategories] = useState([]); - const [formMeta, setFormMeta] = useState({ - name: '', - key: '', - categoryId: undefined as number | undefined, - description: '', - }); const [formSchema, setFormSchema] = useState(null); - - // 加载分类列表 - const loadCategories = async () => { - try { - const result = await getEnabledCategories(); - setCategories(result || []); - } catch (error) { - console.error('加载分类失败:', error); - } - }; + const [formDefinition, setFormDefinition] = useState(null); // 加载表单定义 useEffect(() => { - loadCategories(); - if (isEdit && id) { + if (id) { loadFormDefinition(Number(id)); } - }, [id, isEdit]); + }, [id]); const loadFormDefinition = async (definitionId: number) => { try { const result = await getDefinitionById(definitionId); - setFormMeta({ - name: result.name, - key: result.key, - categoryId: result.categoryId, - description: result.description || '', - }); + setFormDefinition(result); setFormSchema(result.schema); } catch (error) { console.error('加载表单定义失败:', error); } }; - // 保存表单 + // 保存表单（只更新 schema，不修改基本信息） const handleSave = async (schema: FormSchema) => { - if (!formMeta.name.trim()) { - alert('请输入表单名称'); - return; - } - if (!formMeta.key.trim()) { - alert('请输入表单标识'); + if (!id || !formDefinition) { + alert('表单信息加载失败'); return; } const request: FormDefinitionRequest = { - name: formMeta.name, - key: formMeta.key, - categoryId: formMeta.categoryId, - description: formMeta.description, + name: formDefinition.name, + key: formDefinition.key, + categoryId: formDefinition.categoryId, + description: formDefinition.description, + isTemplate: formDefinition.isTemplate, schema, - status: 'PUBLISHED', + status: formDefinition.status || 'DRAFT', }; try { - if (isEdit && id) { - await updateDefinition(Number(id), request); - } else { - await createDefinition(request); - } - navigate('/form/definitions'); + await updateDefinition(Number(id), request); + alert('保存成功'); } catch (error) { console.error('保存表单失败:', error); + alert('保存失败'); } }; @@ -106,13 +69,18 @@ const FormDesignerPage: React.FC = () => {
{/* 页面标题 */}
-
-

- {isEdit ? '编辑表单定义' : '创建表单定义'} -

-

- {isEdit ? '修改表单的基本信息和字段配置' : '设计您的自定义表单，添加字段并配置验证规则'} -

+
+
+ +
+
+

+ {formDefinition?.name || '表单设计'} +

+

+ {formDefinition?.description || '拖拽左侧组件到画布，配置字段属性和验证规则'} +

+
- {/* 基本信息卡片 */} - - -
-
- -
-
- 基本信息 - - 设置表单的名称、标识和分类信息 - -
-
- - - -
- {/* 第一行：表单名称 + 表单标识 */} -
-
- - setFormMeta(prev => ({ ...prev, name: e.target.value }))} - className="h-10" - /> -

- 将显示在表单列表和表单顶部 -

-
- -
- - setFormMeta(prev => ({ ...prev, key: e.target.value }))} - disabled={isEdit} - className="h-10 font-mono" - /> -

- 英文字母、数字和中划线，用于 API 调用 -

-
-
- - {/* 第二行：分类 */} -
- - -

- 帮助用户快速找到相关表单 -

-
- - {/* 第三行：描述（跨整行） */} -
- -