From f66524bac6665f2b3f12099432080932370f3af7 Mon Sep 17 00:00:00 2001 From: dengqichen Date: Fri, 28 Nov 2025 17:37:42 +0800 Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E6=9E=84=E6=B6=88=E6=81=AF=E9=80=9A?= =?UTF-8?q?=E7=9F=A5=E5=BC=B9=E7=AA=97?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/ui/confirm-dialog.tsx | 1 + .../TeamApplicationManageDialog.tsx | 222 +++++++++--------- 2 files changed, 111 insertions(+), 112 deletions(-) diff --git a/frontend/src/components/ui/confirm-dialog.tsx b/frontend/src/components/ui/confirm-dialog.tsx index eb2cfae6..a64954c4 100644 --- a/frontend/src/components/ui/confirm-dialog.tsx +++ b/frontend/src/components/ui/confirm-dialog.tsx @@ -174,6 +174,7 @@ export function ConfirmDialog({ const handleCancel = () => { onCancel?.(); + onOpenChange(false); }; // 按钮样式映射 diff --git a/frontend/src/pages/Deploy/Team/List/components/TeamApplicationManageDialog.tsx b/frontend/src/pages/Deploy/Team/List/components/TeamApplicationManageDialog.tsx index 9fbb5656..efb66578 100644 --- a/frontend/src/pages/Deploy/Team/List/components/TeamApplicationManageDialog.tsx +++ b/frontend/src/pages/Deploy/Team/List/components/TeamApplicationManageDialog.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react'; +import React, { useEffect, useState, useMemo, useRef } from 'react'; import { Dialog, DialogContent, @@ -7,23 +7,16 @@ import { DialogFooter, DialogBody, } from '@/components/ui/dialog'; -import { - Table, - TableBody, - TableCell, - TableHead, - TableHeader, - TableRow, -} from '@/components/ui/table'; import { ConfirmDialog } from '@/components/ui/confirm-dialog'; import { Button } from '@/components/ui/button'; import { useToast } from '@/components/ui/use-toast'; -import { Plus, Edit, Trash2, Loader2 } from 'lucide-react'; +import { PaginatedTable, type ColumnDef, type PaginatedTableRef } from '@/components/ui/paginated-table'; +import { Plus, Edit, Trash2 } from 'lucide-react'; import type { Environment } from '@/pages/Deploy/Environment/List/types'; import type { TeamApplication, Application } from '../types'; import type { WorkflowDefinition } from '@/pages/Workflow/Definition/List/types'; import { - getTeamApplications, + getTeamApplicationsPage, deleteTeamApplication, getApplicationList, getJenkinsSystems, @@ -48,7 +41,7 @@ export const TeamApplicationManageDialog: React.FC< TeamApplicationManageDialogProps > = ({ open, onOpenChange, teamId, environmentId, environments, onSuccess }) => { const { toast } = useToast(); - const [loading, setLoading] = useState(false); + const tableRef = useRef>(null); const [teamApplications, setTeamApplications] = useState([]); // 如果从环境管理进入，只显示该环境的应用；否则显示所有应用 const selectedEnvironmentId = environmentId || null; @@ -68,13 +61,12 @@ export const TeamApplicationManageDialog: React.FC< const [deleteDialogOpen, setDeleteDialogOpen] = useState(false); const [deletingApp, setDeletingApp] = useState(null); - // 加载基础数据和应用列表 + // 加载基础数据 useEffect(() => { if (open) { - loadTeamApplications(); loadBaseData(); } - }, [open, teamId, selectedEnvironmentId]); + }, [open]); const loadBaseData = async () => { try { @@ -95,23 +87,15 @@ export const TeamApplicationManageDialog: React.FC< } }; - // 后端已经根据 selectedEnvironmentId 筛选了数据，前端不需要再次筛选 - - const loadTeamApplications = async () => { - setLoading(true); - try { - // 如果指定了环境ID，只加载该环境的应用；否则加载所有 - const data = await getTeamApplications(teamId, selectedEnvironmentId || undefined); - setTeamApplications(data); - } catch (error: any) { - toast({ - title: '加载失败', - description: error.message || '无法加载应用列表', - variant: 'destructive', - }); - } finally { - setLoading(false); - } + // 包装 fetchFn + const fetchData = async (query: any) => { + const result = await getTeamApplicationsPage({ + ...query, + teamId, + environmentId: selectedEnvironmentId || undefined, + }); + setTeamApplications(result.content || []); + return result; }; const handleOpenAddAppDialog = () => { @@ -166,7 +150,7 @@ export const TeamApplicationManageDialog: React.FC< } // 刷新应用列表 - await loadTeamApplications(); + tableRef.current?.refresh(); }; const handleLoadBranches = async (_appId: number, app: Application) => { @@ -202,6 +186,90 @@ export const TeamApplicationManageDialog: React.FC< ); }; + // 列定义 + const columns: ColumnDef[] = useMemo(() => [ + { + key: 'applicationName', + title: '应用名称', + width: '200px', + render: (_, app) => ( + + {app.applicationName && app.applicationCode + ? `${app.applicationName}（${app.applicationCode}）` + : app.applicationName || app.applicationCode || `应用 ${app.applicationId}`} + + ), + }, + { + key: 'environmentId', + title: '环境', + width: '100px', + render: (_, app) => getEnvironmentName(app.environmentId), + }, + { + key: 'buildType', + title: '构建类型', + width: '120px', + render: (_, app) => + app.buildType === 'JENKINS' ? 'Jenkins构建' : app.buildType === 'NATIVE' ? '脚本部署' : '-', + }, + { + key: 'branch', + title: '分支', + dataIndex: 'branch', + width: '100px', + render: (value) => value || '-', + }, + { + key: 'deploySystemName', + title: 'Jenkins系统', + width: '150px', + render: (_, app) => + app.buildType === 'JENKINS' + ? (app.deploySystemName || (app.deploySystemId ? `系统 ${app.deploySystemId}` : '-')) + : '-', + }, + { + key: 'deployJob', + title: 'Jenkins Job', + width: '150px', + render: (_, app) => (app.buildType === 'JENKINS' ? (app.deployJob || '-') : '-'), + }, + { + key: 'workflowDefinitionName', + title: '工作流', + dataIndex: 'workflowDefinitionName', + width: '180px', + render: (value) => value || '-', + }, + { + key: 'actions', + title: '操作', + width: '100px', + sticky: true, + render: (_, app) => ( +
+ + +
+ ), + }, + ], [environments]); + return ( <> @@ -221,84 +289,14 @@ export const TeamApplicationManageDialog: React.FC< {/* 应用列表表格 */}
- {loading ? ( -
- -
- ) : teamApplications.length === 0 ? ( -
-

暂无应用配置

- -
- ) : ( - - - - 应用名称 - 环境 - 构建类型 - 分支 - Jenkins系统 - Jenkins Job - 工作流 - 操作 - - - - {teamApplications.map((app) => ( - - - {app.applicationName && app.applicationCode - ? `${app.applicationName}（${app.applicationCode}）` - : app.applicationName || app.applicationCode || `应用 ${app.applicationId}`} - - - {getEnvironmentName(app.environmentId)} - - - {app.buildType === 'JENKINS' ? 'Jenkins构建' : app.buildType === 'NATIVE' ? '脚本部署' : '-'} - - {app.branch || '-'} - - {app.buildType === 'JENKINS' - ? (app.deploySystemName || (app.deploySystemId ? `系统 ${app.deploySystemId}` : '-')) - : '-'} - - - {app.buildType === 'JENKINS' ? (app.deployJob || '-') : '-'} - - - {app.workflowDefinitionName || '-'} - - -
- - -
- - - ))} - -
- )} + + ref={tableRef} + fetchFn={fetchData} + columns={columns} + rowKey="id" + minWidth="1000px" + pageSize={10} + />
@@ -353,7 +351,7 @@ export const TeamApplicationManageDialog: React.FC< description: '应用配置已删除', }); setDeletingApp(null); - loadTeamApplications(); + tableRef.current?.refresh(); onSuccess?.(); }} variant="destructive"