增加团队管理页面
This commit is contained in:
dengqichen
parent
d7d555f1ee
commit
cae9ce86c5
@ -8,7 +8,7 @@ const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
|
||||
<input
|
||||
type={type}
|
||||
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
|
||||
)}
|
||||
ref={ref}
|
||||
|
||||
@ -162,9 +162,12 @@ const ApplicationModal: React.FC<ApplicationModalProps> = ({
|
||||
const handleSubmit = async (values: ApplicationFormValues) => {
|
||||
console.log('Form submitted with values:', values);
|
||||
try {
|
||||
// 去掉 externalSystemId 字段，不传给后端
|
||||
const { externalSystemId, ...submitData } = values;
|
||||
|
||||
if (isEdit) {
|
||||
await updateApplication({
|
||||
...values,
|
||||
...submitData,
|
||||
id: initialValues!.id,
|
||||
} as any);
|
||||
toast({
|
||||
@ -173,7 +176,7 @@ const ApplicationModal: React.FC<ApplicationModalProps> = ({
|
||||
duration: 3000,
|
||||
});
|
||||
} else {
|
||||
await createApplication(values as any);
|
||||
await createApplication(submitData as any);
|
||||
toast({
|
||||
title: "创建成功",
|
||||
description: `应用 ${values.appName} 已创建`,
|
||||
|
||||
@ -44,6 +44,7 @@ import { DataTablePagination } from '@/components/ui/pagination';
|
||||
import { DEFAULT_PAGE_SIZE, DEFAULT_CURRENT } from '@/utils/page';
|
||||
import {
|
||||
Plus,
|
||||
Edit,
|
||||
Trash2,
|
||||
Search,
|
||||
Loader2,
|
||||
@ -54,6 +55,7 @@ import {
|
||||
import {
|
||||
getTeamMembers,
|
||||
createTeamMember,
|
||||
updateTeamMember,
|
||||
deleteTeamMember
|
||||
} from '../../Member/service';
|
||||
import type {
|
||||
@ -67,6 +69,7 @@ interface MemberManageDialogProps {
|
||||
open: boolean;
|
||||
teamId: number;
|
||||
teamName: string;
|
||||
ownerId?: number;
|
||||
users: UserResponse[];
|
||||
onOpenChange: (open: boolean) => void;
|
||||
onSuccess?: () => void;
|
||||
@ -79,6 +82,7 @@ const MemberManageDialog: React.FC<MemberManageDialogProps> = ({
|
||||
open,
|
||||
teamId,
|
||||
teamName,
|
||||
ownerId,
|
||||
users,
|
||||
onOpenChange,
|
||||
onSuccess
|
||||
@ -92,6 +96,9 @@ const MemberManageDialog: React.FC<MemberManageDialogProps> = ({
|
||||
const [selectedUserIds, setSelectedUserIds] = useState<number[]>([]);
|
||||
const [popoverOpen, setPopoverOpen] = 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);
|
||||
@ -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) => {
|
||||
setDeleteRecord(record);
|
||||
@ -222,9 +266,9 @@ const MemberManageDialog: React.FC<MemberManageDialogProps> = ({
|
||||
}
|
||||
};
|
||||
|
||||
// 过滤出未加入的用户
|
||||
// 过滤出未加入的用户（排除负责人和已加入的成员）
|
||||
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 (
|
||||
@ -331,7 +375,7 @@ const MemberManageDialog: React.FC<MemberManageDialogProps> = ({
|
||||
<TableHead className="w-[150px]">用户名</TableHead>
|
||||
<TableHead className="w-[150px]">团队角色</TableHead>
|
||||
<TableHead className="w-[160px]">加入时间</TableHead>
|
||||
<TableHead className="w-[80px] text-right">操作</TableHead>
|
||||
<TableHead className="w-[120px] text-right">操作</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
@ -361,6 +405,14 @@ const MemberManageDialog: React.FC<MemberManageDialogProps> = ({
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<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
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
@ -404,6 +456,37 @@ const MemberManageDialog: React.FC<MemberManageDialogProps> = ({
|
||||
</DialogContent>
|
||||
</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}>
|
||||
<AlertDialogContent>
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import type { TeamResponse } from '../types';
|
||||
import { createTeam, updateTeam } from '../service';
|
||||
import { getUserList } from '@/pages/System/User/service';
|
||||
import type { UserResponse } from '@/pages/System/User/types';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
@ -17,6 +19,13 @@ import {
|
||||
FormMessage,
|
||||
} from "@/components/ui/form";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import { useToast } from "@/components/ui/use-toast";
|
||||
import { useForm } from "react-hook-form";
|
||||
@ -39,6 +48,7 @@ const TeamModal: React.FC<TeamModalProps> = ({
|
||||
}) => {
|
||||
const { toast } = useToast();
|
||||
const isEdit = !!initialValues?.id;
|
||||
const [users, setUsers] = useState<UserResponse[]>([]);
|
||||
|
||||
const form = useForm<TeamFormValues>({
|
||||
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(() => {
|
||||
if (open && initialValues) {
|
||||
form.reset({
|
||||
teamCode: initialValues.teamCode,
|
||||
teamName: initialValues.teamName,
|
||||
description: initialValues.description || "",
|
||||
ownerId: initialValues.ownerId,
|
||||
ownerName: initialValues.ownerName || "",
|
||||
enabled: initialValues.enabled,
|
||||
sort: initialValues.sort,
|
||||
});
|
||||
} else if (open && !initialValues) {
|
||||
form.reset({
|
||||
teamCode: "",
|
||||
teamName: "",
|
||||
description: "",
|
||||
ownerId: undefined,
|
||||
ownerName: "",
|
||||
enabled: true,
|
||||
sort: 0,
|
||||
});
|
||||
if (open) {
|
||||
loadUsers();
|
||||
if (initialValues) {
|
||||
form.reset({
|
||||
teamCode: initialValues.teamCode,
|
||||
teamName: initialValues.teamName,
|
||||
description: initialValues.description || "",
|
||||
ownerId: initialValues.ownerId,
|
||||
ownerName: initialValues.ownerName || "",
|
||||
enabled: initialValues.enabled,
|
||||
sort: initialValues.sort,
|
||||
});
|
||||
} else {
|
||||
form.reset({
|
||||
teamCode: "",
|
||||
teamName: "",
|
||||
description: "",
|
||||
ownerId: undefined,
|
||||
ownerName: "",
|
||||
enabled: true,
|
||||
sort: 0,
|
||||
});
|
||||
}
|
||||
}
|
||||
}, [open, initialValues, form]);
|
||||
|
||||
@ -151,44 +176,46 @@ const TeamModal: React.FC<TeamModalProps> = ({
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="ownerId"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>负责人ID</FormLabel>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="ownerId"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>团队负责人</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>
|
||||
<Input
|
||||
type="number"
|
||||
placeholder="请输入负责人ID"
|
||||
{...field}
|
||||
value={field.value || ''}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value;
|
||||
field.onChange(value ? Number(value) : undefined);
|
||||
}}
|
||||
/>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="请选择负责人" />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="ownerName"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>负责人姓名</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="请输入负责人姓名" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<SelectContent>
|
||||
<SelectItem value="none">不选择负责人</SelectItem>
|
||||
{users.map((user) => (
|
||||
<SelectItem key={user.id} value={user.id.toString()}>
|
||||
{user.nickname || user.username} ({user.username})
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
|
||||
@ -445,6 +445,7 @@ const TeamList: React.FC = () => {
|
||||
open={memberDialogOpen}
|
||||
teamId={currentTeam.id}
|
||||
teamName={currentTeam.teamName}
|
||||
ownerId={currentTeam.ownerId}
|
||||
users={users}
|
||||
onOpenChange={setMemberDialogOpen}
|
||||
onSuccess={handleSuccess}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user