增加团队管理页面

This commit is contained in:
dengqichen 2025-10-29 12:17:00 +08:00
parent d7d555f1ee
commit cae9ce86c5
5 changed files with 177 additions and 63 deletions

View File

@ -8,7 +8,7 @@ const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
<input <input
type={type} type={type}
className={cn( className={cn(
"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:border-primary focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-primary/20 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
className className
)} )}
ref={ref} ref={ref}

View File

@ -162,9 +162,12 @@ const ApplicationModal: React.FC<ApplicationModalProps> = ({
const handleSubmit = async (values: ApplicationFormValues) => { const handleSubmit = async (values: ApplicationFormValues) => {
console.log('Form submitted with values:', values); console.log('Form submitted with values:', values);
try { try {
// 去掉 externalSystemId 字段,不传给后端
const { externalSystemId, ...submitData } = values;
if (isEdit) { if (isEdit) {
await updateApplication({ await updateApplication({
...values, ...submitData,
id: initialValues!.id, id: initialValues!.id,
} as any); } as any);
toast({ toast({
@ -173,7 +176,7 @@ const ApplicationModal: React.FC<ApplicationModalProps> = ({
duration: 3000, duration: 3000,
}); });
} else { } else {
await createApplication(values as any); await createApplication(submitData as any);
toast({ toast({
title: "创建成功", title: "创建成功",
description: `应用 ${values.appName} 已创建`, description: `应用 ${values.appName} 已创建`,

View File

@ -44,6 +44,7 @@ import { DataTablePagination } from '@/components/ui/pagination';
import { DEFAULT_PAGE_SIZE, DEFAULT_CURRENT } from '@/utils/page'; import { DEFAULT_PAGE_SIZE, DEFAULT_CURRENT } from '@/utils/page';
import { import {
Plus, Plus,
Edit,
Trash2, Trash2,
Search, Search,
Loader2, Loader2,
@ -54,6 +55,7 @@ import {
import { import {
getTeamMembers, getTeamMembers,
createTeamMember, createTeamMember,
updateTeamMember,
deleteTeamMember deleteTeamMember
} from '../../Member/service'; } from '../../Member/service';
import type { import type {
@ -67,6 +69,7 @@ interface MemberManageDialogProps {
open: boolean; open: boolean;
teamId: number; teamId: number;
teamName: string; teamName: string;
ownerId?: number;
users: UserResponse[]; users: UserResponse[];
onOpenChange: (open: boolean) => void; onOpenChange: (open: boolean) => void;
onSuccess?: () => void; onSuccess?: () => void;
@ -79,6 +82,7 @@ const MemberManageDialog: React.FC<MemberManageDialogProps> = ({
open, open,
teamId, teamId,
teamName, teamName,
ownerId,
users, users,
onOpenChange, onOpenChange,
onSuccess onSuccess
@ -92,6 +96,9 @@ const MemberManageDialog: React.FC<MemberManageDialogProps> = ({
const [selectedUserIds, setSelectedUserIds] = useState<number[]>([]); const [selectedUserIds, setSelectedUserIds] = useState<number[]>([]);
const [popoverOpen, setPopoverOpen] = useState(false); const [popoverOpen, setPopoverOpen] = useState(false);
const [adding, setAdding] = useState(false); const [adding, setAdding] = useState(false);
const [editDialogOpen, setEditDialogOpen] = useState(false);
const [editRecord, setEditRecord] = useState<TeamMemberResponse | null>(null);
const [editRole, setEditRole] = useState('');
// 分页状态 // 分页状态
const [pageNum, setPageNum] = useState(DEFAULT_CURRENT - 1); const [pageNum, setPageNum] = useState(DEFAULT_CURRENT - 1);
@ -192,6 +199,43 @@ const MemberManageDialog: React.FC<MemberManageDialogProps> = ({
} }
}; };
// 编辑成员角色
const handleEditClick = (record: TeamMemberResponse) => {
setEditRecord(record);
setEditRole(record.roleInTeam || '');
setEditDialogOpen(true);
};
// 保存角色编辑
const handleEditSave = async () => {
if (!editRecord) return;
try {
await updateTeamMember(editRecord.id, {
teamId,
userId: editRecord.userId,
userName: editRecord.userName || '',
roleInTeam: editRole,
});
toast({
title: "更新成功",
description: `成员 "${editRecord.userName}" 的角色已更新`,
});
setEditDialogOpen(false);
setEditRecord(null);
setEditRole('');
loadMembers();
onSuccess?.();
} catch (error) {
console.error('更新失败:', error);
toast({
variant: "destructive",
title: "更新失败",
description: error instanceof Error ? error.message : '未知错误',
});
}
};
// 删除成员(打开确认对话框) // 删除成员(打开确认对话框)
const handleDeleteClick = (record: TeamMemberResponse) => { const handleDeleteClick = (record: TeamMemberResponse) => {
setDeleteRecord(record); setDeleteRecord(record);
@ -222,9 +266,9 @@ const MemberManageDialog: React.FC<MemberManageDialogProps> = ({
} }
}; };
// 过滤出未加入的用户 // 过滤出未加入的用户(排除负责人和已加入的成员)
const availableUsers = users.filter(user => const availableUsers = users.filter(user =>
!data?.content?.some(member => member.userId === user.id) user.id !== ownerId && !data?.content?.some(member => member.userId === user.id)
); );
return ( return (
@ -331,7 +375,7 @@ const MemberManageDialog: React.FC<MemberManageDialogProps> = ({
<TableHead className="w-[150px]"></TableHead> <TableHead className="w-[150px]"></TableHead>
<TableHead className="w-[150px]"></TableHead> <TableHead className="w-[150px]"></TableHead>
<TableHead className="w-[160px]"></TableHead> <TableHead className="w-[160px]"></TableHead>
<TableHead className="w-[80px] text-right"></TableHead> <TableHead className="w-[120px] text-right"></TableHead>
</TableRow> </TableRow>
</TableHeader> </TableHeader>
<TableBody> <TableBody>
@ -361,6 +405,14 @@ const MemberManageDialog: React.FC<MemberManageDialogProps> = ({
</TableCell> </TableCell>
<TableCell className="text-right"> <TableCell className="text-right">
<div className="flex items-center justify-end gap-1"> <div className="flex items-center justify-end gap-1">
<Button
variant="ghost"
size="sm"
className="h-8 w-8 p-0"
onClick={() => handleEditClick(record)}
>
<Edit className="h-3.5 w-3.5" />
</Button>
<Button <Button
variant="ghost" variant="ghost"
size="sm" size="sm"
@ -404,6 +456,37 @@ const MemberManageDialog: React.FC<MemberManageDialogProps> = ({
</DialogContent> </DialogContent>
</Dialog> </Dialog>
{/* 编辑角色对话框 */}
<Dialog open={editDialogOpen} onOpenChange={setEditDialogOpen}>
<DialogContent className="max-w-md">
<DialogHeader>
<DialogTitle></DialogTitle>
</DialogHeader>
<div className="space-y-4 py-4">
<div className="space-y-2">
<label className="text-sm font-medium"></label>
<Input value={editRecord?.userName || ''} disabled />
</div>
<div className="space-y-2">
<label className="text-sm font-medium"></label>
<Input
placeholder="请输入团队角色,如:开发、测试、产品经理等"
value={editRole}
onChange={(e) => setEditRole(e.target.value)}
/>
</div>
</div>
<div className="flex justify-end gap-2">
<Button variant="outline" onClick={() => setEditDialogOpen(false)}>
</Button>
<Button onClick={handleEditSave}>
</Button>
</div>
</DialogContent>
</Dialog>
{/* 删除确认对话框 */} {/* 删除确认对话框 */}
<AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}> <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
<AlertDialogContent> <AlertDialogContent>

View File

@ -1,6 +1,8 @@
import React, { useEffect } from 'react'; import React, { useEffect, useState } from 'react';
import type { TeamResponse } from '../types'; import type { TeamResponse } from '../types';
import { createTeam, updateTeam } from '../service'; import { createTeam, updateTeam } from '../service';
import { getUserList } from '@/pages/System/User/service';
import type { UserResponse } from '@/pages/System/User/types';
import { import {
Dialog, Dialog,
DialogContent, DialogContent,
@ -17,6 +19,13 @@ import {
FormMessage, FormMessage,
} from "@/components/ui/form"; } from "@/components/ui/form";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { Switch } from "@/components/ui/switch"; import { Switch } from "@/components/ui/switch";
import { useToast } from "@/components/ui/use-toast"; import { useToast } from "@/components/ui/use-toast";
import { useForm } from "react-hook-form"; import { useForm } from "react-hook-form";
@ -39,6 +48,7 @@ const TeamModal: React.FC<TeamModalProps> = ({
}) => { }) => {
const { toast } = useToast(); const { toast } = useToast();
const isEdit = !!initialValues?.id; const isEdit = !!initialValues?.id;
const [users, setUsers] = useState<UserResponse[]>([]);
const form = useForm<TeamFormValues>({ const form = useForm<TeamFormValues>({
resolver: zodResolver(teamFormSchema), resolver: zodResolver(teamFormSchema),
@ -53,27 +63,42 @@ const TeamModal: React.FC<TeamModalProps> = ({
}, },
}); });
// 加载用户列表
const loadUsers = async () => {
try {
const response = await getUserList();
if (response) {
setUsers(response);
}
} catch (error) {
console.error('加载用户列表失败:', error);
}
};
useEffect(() => { useEffect(() => {
if (open && initialValues) { if (open) {
form.reset({ loadUsers();
teamCode: initialValues.teamCode, if (initialValues) {
teamName: initialValues.teamName, form.reset({
description: initialValues.description || "", teamCode: initialValues.teamCode,
ownerId: initialValues.ownerId, teamName: initialValues.teamName,
ownerName: initialValues.ownerName || "", description: initialValues.description || "",
enabled: initialValues.enabled, ownerId: initialValues.ownerId,
sort: initialValues.sort, ownerName: initialValues.ownerName || "",
}); enabled: initialValues.enabled,
} else if (open && !initialValues) { sort: initialValues.sort,
form.reset({ });
teamCode: "", } else {
teamName: "", form.reset({
description: "", teamCode: "",
ownerId: undefined, teamName: "",
ownerName: "", description: "",
enabled: true, ownerId: undefined,
sort: 0, ownerName: "",
}); enabled: true,
sort: 0,
});
}
} }
}, [open, initialValues, form]); }, [open, initialValues, form]);
@ -151,44 +176,46 @@ const TeamModal: React.FC<TeamModalProps> = ({
/> />
</div> </div>
<div className="grid grid-cols-2 gap-4"> <FormField
<FormField control={form.control}
control={form.control} name="ownerId"
name="ownerId" render={({ field }) => (
render={({ field }) => ( <FormItem>
<FormItem> <FormLabel></FormLabel>
<FormLabel>ID</FormLabel> <Select
onValueChange={(value) => {
if (value === 'none') {
field.onChange(undefined);
form.setValue('ownerName', '');
} else {
const userId = Number(value);
const selectedUser = users.find(u => u.id === userId);
field.onChange(userId);
if (selectedUser) {
form.setValue('ownerName', selectedUser.nickname || selectedUser.username);
}
}
}}
value={field.value?.toString() || 'none'}
>
<FormControl> <FormControl>
<Input <SelectTrigger>
type="number" <SelectValue placeholder="请选择负责人" />
placeholder="请输入负责人ID" </SelectTrigger>
{...field}
value={field.value || ''}
onChange={(e) => {
const value = e.target.value;
field.onChange(value ? Number(value) : undefined);
}}
/>
</FormControl> </FormControl>
<FormMessage /> <SelectContent>
</FormItem> <SelectItem value="none"></SelectItem>
)} {users.map((user) => (
/> <SelectItem key={user.id} value={user.id.toString()}>
{user.nickname || user.username} ({user.username})
<FormField </SelectItem>
control={form.control} ))}
name="ownerName" </SelectContent>
render={({ field }) => ( </Select>
<FormItem> <FormMessage />
<FormLabel></FormLabel> </FormItem>
<FormControl> )}
<Input placeholder="请输入负责人姓名" {...field} /> />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
<FormField <FormField
control={form.control} control={form.control}

View File

@ -445,6 +445,7 @@ const TeamList: React.FC = () => {
open={memberDialogOpen} open={memberDialogOpen}
teamId={currentTeam.id} teamId={currentTeam.id}
teamName={currentTeam.teamName} teamName={currentTeam.teamName}
ownerId={currentTeam.ownerId}
users={users} users={users}
onOpenChange={setMemberDialogOpen} onOpenChange={setMemberDialogOpen}
onSuccess={handleSuccess} onSuccess={handleSuccess}