3 changed files with 815 additions and 2 deletions
@ -0,0 +1,796 @@ |
|||
import { useState, useEffect, useCallback } from 'react' |
|||
import { Plus, Search, Edit2, Trash2, Users, ChevronRight, ChevronDown } from 'lucide-react' |
|||
import { Button } from '@/components/ui/Button' |
|||
import { Input } from '@/components/ui/Input' |
|||
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/Card' |
|||
import { Modal } from '@/components/ui/Modal' |
|||
import { |
|||
Table, |
|||
TableHeader, |
|||
TableBody, |
|||
TableRow, |
|||
TableHead, |
|||
TableCell, |
|||
} from '@/components/ui/Table' |
|||
import type { OrgInfo, CreateOrgRequest, UpdateOrgRequest, OrgMember, RoleInfo } from '@/types' |
|||
import { apiClient } from '@/services/api' |
|||
|
|||
// ---------------------------------------------------------------------------
|
|||
// Helpers
|
|||
// ---------------------------------------------------------------------------
|
|||
|
|||
type FlatOrg = OrgInfo & { depth: number } |
|||
|
|||
function flattenOrgTree(items: OrgInfo[], depth = 0): FlatOrg[] { |
|||
const result: FlatOrg[] = [] |
|||
for (const item of items) { |
|||
result.push({ ...item, depth }) |
|||
if (item.children && item.children.length > 0) { |
|||
result.push(...flattenOrgTree(item.children, depth + 1)) |
|||
} |
|||
} |
|||
return result |
|||
} |
|||
|
|||
function collectOrgOptions(items: OrgInfo[], depth = 0): { id: number; name: string; depth: number }[] { |
|||
const result: { id: number; name: string; depth: number }[] = [] |
|||
for (const item of items) { |
|||
result.push({ id: item.id, name: item.name, depth }) |
|||
if (item.children && item.children.length > 0) { |
|||
result.push(...collectOrgOptions(item.children, depth + 1)) |
|||
} |
|||
} |
|||
return result |
|||
} |
|||
|
|||
const STATUS_LABELS: Record<number, { text: string; className: string }> = { |
|||
1: { text: '正常', className: 'bg-green-500/20 text-green-400 border border-green-500/30' }, |
|||
0: { text: '停用', className: 'bg-red-500/20 text-red-400 border border-red-500/30' }, |
|||
} |
|||
|
|||
// ---------------------------------------------------------------------------
|
|||
// Component
|
|||
// ---------------------------------------------------------------------------
|
|||
|
|||
export function OrganizationManagementPage() { |
|||
// --- Org tree state ---
|
|||
const [orgTree, setOrgTree] = useState<OrgInfo[]>([]) |
|||
const [isLoading, setIsLoading] = useState(true) |
|||
const [error, setError] = useState<string | null>(null) |
|||
const [searchQuery, setSearchQuery] = useState('') |
|||
const [expandedIds, setExpandedIds] = useState<Set<number>>(new Set()) |
|||
|
|||
// --- Create / Edit modal ---
|
|||
const [isModalOpen, setIsModalOpen] = useState(false) |
|||
const [editingOrg, setEditingOrg] = useState<OrgInfo | null>(null) |
|||
const [formData, setFormData] = useState<Partial<CreateOrgRequest>>({ |
|||
parentId: 0, |
|||
name: '', |
|||
code: '', |
|||
leader: '', |
|||
phone: '', |
|||
email: '', |
|||
sortOrder: 0, |
|||
}) |
|||
|
|||
// --- Delete confirmation ---
|
|||
const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false) |
|||
const [orgToDelete, setOrgToDelete] = useState<FlatOrg | null>(null) |
|||
const [isDeleting, setIsDeleting] = useState(false) |
|||
const [deleteError, setDeleteError] = useState<string | null>(null) |
|||
|
|||
// --- Member management modal ---
|
|||
const [memberModalOpen, setMemberModalOpen] = useState(false) |
|||
const [memberOrg, setMemberOrg] = useState<FlatOrg | null>(null) |
|||
const [members, setMembers] = useState<OrgMember[]>([]) |
|||
const [isMembersLoading, setIsMembersLoading] = useState(false) |
|||
const [roles, setRoles] = useState<RoleInfo[]>([]) |
|||
const [newMemberUserId, setNewMemberUserId] = useState('') |
|||
const [newMemberRoleId, setNewMemberRoleId] = useState<number>(0) |
|||
const [editingMemberUserId, setEditingMemberUserId] = useState<number | null>(null) |
|||
const [editingMemberRoleId, setEditingMemberRoleId] = useState<number>(0) |
|||
|
|||
// ---------------------------------------------------------------------------
|
|||
// Data fetching
|
|||
// ---------------------------------------------------------------------------
|
|||
|
|||
const fetchOrganizations = useCallback(async () => { |
|||
try { |
|||
setIsLoading(true) |
|||
setError(null) |
|||
const response = await apiClient.getOrganizations() |
|||
setOrgTree(response.list || []) |
|||
// Expand all by default on first load
|
|||
const allIds = flattenOrgTree(response.list || []).map((o) => o.id) |
|||
setExpandedIds(new Set(allIds)) |
|||
} catch (err) { |
|||
console.error('Failed to fetch organizations:', err) |
|||
setError('获取组织列表失败，请稍后重试') |
|||
setOrgTree([]) |
|||
} finally { |
|||
setIsLoading(false) |
|||
} |
|||
}, []) |
|||
|
|||
useEffect(() => { |
|||
fetchOrganizations() |
|||
}, [fetchOrganizations]) |
|||
|
|||
const fetchMembers = async (orgId: number) => { |
|||
try { |
|||
setIsMembersLoading(true) |
|||
const response = await apiClient.getOrgMembers(orgId) |
|||
setMembers(response.list || []) |
|||
} catch (err) { |
|||
console.error('Failed to fetch members:', err) |
|||
setMembers([]) |
|||
} finally { |
|||
setIsMembersLoading(false) |
|||
} |
|||
} |
|||
|
|||
const fetchRoles = async () => { |
|||
try { |
|||
const response = await apiClient.getRoles() |
|||
setRoles(response.list || []) |
|||
} catch (err) { |
|||
console.error('Failed to fetch roles:', err) |
|||
setRoles([]) |
|||
} |
|||
} |
|||
|
|||
// ---------------------------------------------------------------------------
|
|||
// Org CRUD handlers
|
|||
// ---------------------------------------------------------------------------
|
|||
|
|||
const resetForm = () => { |
|||
setFormData({ parentId: 0, name: '', code: '', leader: '', phone: '', email: '', sortOrder: 0 }) |
|||
setEditingOrg(null) |
|||
} |
|||
|
|||
const openModal = (org?: FlatOrg) => { |
|||
if (org) { |
|||
setEditingOrg(org) |
|||
setFormData({ |
|||
parentId: org.parentId, |
|||
name: org.name, |
|||
code: org.code, |
|||
leader: org.leader, |
|||
phone: org.phone, |
|||
email: org.email, |
|||
sortOrder: org.sortOrder, |
|||
}) |
|||
} else { |
|||
resetForm() |
|||
} |
|||
setIsModalOpen(true) |
|||
} |
|||
|
|||
const handleCreateOrg = async () => { |
|||
try { |
|||
await apiClient.createOrganization(formData as CreateOrgRequest) |
|||
await fetchOrganizations() |
|||
setIsModalOpen(false) |
|||
resetForm() |
|||
} catch (err) { |
|||
console.error('Failed to create organization:', err) |
|||
alert('创建组织失败') |
|||
} |
|||
} |
|||
|
|||
const handleUpdateOrg = async () => { |
|||
if (!editingOrg) return |
|||
try { |
|||
const data: UpdateOrgRequest = { ...formData } |
|||
await apiClient.updateOrganization(editingOrg.id, data) |
|||
await fetchOrganizations() |
|||
setIsModalOpen(false) |
|||
resetForm() |
|||
} catch (err) { |
|||
console.error('Failed to update organization:', err) |
|||
alert('更新组织失败') |
|||
} |
|||
} |
|||
|
|||
const openDeleteConfirm = (org: FlatOrg) => { |
|||
setDeleteError(null) |
|||
|
|||
// Reject if has children
|
|||
if (org.children && org.children.length > 0) { |
|||
setDeleteError('该组织包含子组织，无法删除。请先删除或转移子组织。') |
|||
setOrgToDelete(org) |
|||
setDeleteConfirmOpen(true) |
|||
return |
|||
} |
|||
|
|||
// Reject if has members
|
|||
if (org.memberCount > 0) { |
|||
setDeleteError('该组织包含成员，无法删除。请先移除所有成员。') |
|||
setOrgToDelete(org) |
|||
setDeleteConfirmOpen(true) |
|||
return |
|||
} |
|||
|
|||
setOrgToDelete(org) |
|||
setDeleteConfirmOpen(true) |
|||
} |
|||
|
|||
const handleDeleteOrg = async () => { |
|||
if (!orgToDelete || deleteError) return |
|||
try { |
|||
setIsDeleting(true) |
|||
await apiClient.deleteOrganization(orgToDelete.id) |
|||
setDeleteConfirmOpen(false) |
|||
setOrgToDelete(null) |
|||
await fetchOrganizations() |
|||
} catch (err) { |
|||
console.error('Failed to delete organization:', err) |
|||
alert('删除组织失败') |
|||
} finally { |
|||
setIsDeleting(false) |
|||
} |
|||
} |
|||
|
|||
// ---------------------------------------------------------------------------
|
|||
// Member management handlers
|
|||
// ---------------------------------------------------------------------------
|
|||
|
|||
const openMemberModal = async (org: FlatOrg) => { |
|||
setMemberOrg(org) |
|||
setMemberModalOpen(true) |
|||
setNewMemberUserId('') |
|||
setNewMemberRoleId(0) |
|||
setEditingMemberUserId(null) |
|||
await Promise.all([fetchMembers(org.id), fetchRoles()]) |
|||
} |
|||
|
|||
const handleAddMember = async () => { |
|||
if (!memberOrg || !newMemberUserId || !newMemberRoleId) return |
|||
try { |
|||
await apiClient.addOrgMember(memberOrg.id, Number(newMemberUserId), newMemberRoleId) |
|||
setNewMemberUserId('') |
|||
setNewMemberRoleId(0) |
|||
await fetchMembers(memberOrg.id) |
|||
await fetchOrganizations() |
|||
} catch (err) { |
|||
console.error('Failed to add member:', err) |
|||
alert('添加成员失败') |
|||
} |
|||
} |
|||
|
|||
const handleUpdateMemberRole = async (userId: number) => { |
|||
if (!memberOrg || !editingMemberRoleId) return |
|||
try { |
|||
await apiClient.updateOrgMember(memberOrg.id, userId, editingMemberRoleId) |
|||
setEditingMemberUserId(null) |
|||
await fetchMembers(memberOrg.id) |
|||
} catch (err) { |
|||
console.error('Failed to update member role:', err) |
|||
alert('更新成员角色失败') |
|||
} |
|||
} |
|||
|
|||
const handleRemoveMember = async (userId: number) => { |
|||
if (!memberOrg) return |
|||
try { |
|||
await apiClient.removeOrgMember(memberOrg.id, userId) |
|||
await fetchMembers(memberOrg.id) |
|||
await fetchOrganizations() |
|||
} catch (err) { |
|||
console.error('Failed to remove member:', err) |
|||
alert('移除成员失败') |
|||
} |
|||
} |
|||
|
|||
// ---------------------------------------------------------------------------
|
|||
// Tree expand / collapse
|
|||
// ---------------------------------------------------------------------------
|
|||
|
|||
const toggleExpand = (id: number) => { |
|||
setExpandedIds((prev) => { |
|||
const next = new Set(prev) |
|||
if (next.has(id)) { |
|||
next.delete(id) |
|||
} else { |
|||
next.add(id) |
|||
} |
|||
return next |
|||
}) |
|||
} |
|||
|
|||
// ---------------------------------------------------------------------------
|
|||
// Derived data
|
|||
// ---------------------------------------------------------------------------
|
|||
|
|||
const flatOrgs = flattenOrgTree(orgTree) |
|||
const orgOptions = collectOrgOptions(orgTree) |
|||
|
|||
// Filter: show rows whose name or code matches, plus their ancestors
|
|||
const filteredOrgs = searchQuery |
|||
? flatOrgs.filter( |
|||
(o) => |
|||
o.name.toLowerCase().includes(searchQuery.toLowerCase()) || |
|||
o.code.toLowerCase().includes(searchQuery.toLowerCase()) || |
|||
o.leader.toLowerCase().includes(searchQuery.toLowerCase()) |
|||
) |
|||
: flatOrgs.filter((_) => { |
|||
return true |
|||
}) |
|||
|
|||
// For collapse filtering: determine visible rows considering expanded state
|
|||
const visibleOrgs = (() => { |
|||
if (searchQuery) return filteredOrgs |
|||
|
|||
const visible: FlatOrg[] = [] |
|||
const depthStack: number[] = [] // tracks the depth of hidden subtrees
|
|||
|
|||
for (const org of flatOrgs) { |
|||
// If this org is at a depth deeper than a collapsed parent, skip it
|
|||
if (depthStack.length > 0 && org.depth > depthStack[depthStack.length - 1]) { |
|||
continue |
|||
} |
|||
|
|||
// Clean up the depth stack
|
|||
while (depthStack.length > 0 && org.depth <= depthStack[depthStack.length - 1]) { |
|||
depthStack.pop() |
|||
} |
|||
|
|||
visible.push(org) |
|||
|
|||
// If this org has children and is not expanded, push its depth to mark subtree as hidden
|
|||
if (org.children && org.children.length > 0 && !expandedIds.has(org.id)) { |
|||
depthStack.push(org.depth) |
|||
} |
|||
} |
|||
|
|||
return visible |
|||
})() |
|||
|
|||
// ---------------------------------------------------------------------------
|
|||
// Render helpers
|
|||
// ---------------------------------------------------------------------------
|
|||
|
|||
const renderStatusBadge = (status: number) => { |
|||
const config = STATUS_LABELS[status] || { text: '未知', className: 'bg-gray-500/20 text-gray-400' } |
|||
return ( |
|||
<span className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${config.className}`}> |
|||
{config.text} |
|||
</span> |
|||
) |
|||
} |
|||
|
|||
// ---------------------------------------------------------------------------
|
|||
// JSX
|
|||
// ---------------------------------------------------------------------------
|
|||
|
|||
return ( |
|||
<div className="space-y-6 animate-fade-in"> |
|||
{/* Header */} |
|||
<Card> |
|||
<CardContent className="p-6"> |
|||
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4"> |
|||
<div className="flex-1 w-full sm:max-w-md"> |
|||
<Input |
|||
placeholder="搜索组织名称、编码、负责人..." |
|||
value={searchQuery} |
|||
onChange={(e) => setSearchQuery(e.target.value)} |
|||
leftIcon={<Search className="h-4 w-4" />} |
|||
/> |
|||
</div> |
|||
<Button onClick={() => openModal()} className="whitespace-nowrap"> |
|||
<Plus className="h-4 w-4" /> |
|||
新增组织 |
|||
</Button> |
|||
</div> |
|||
</CardContent> |
|||
</Card> |
|||
|
|||
{/* Error */} |
|||
{error && ( |
|||
<div className="p-4 bg-red-500/10 text-red-400 rounded-lg flex justify-between items-center"> |
|||
<span>{error}</span> |
|||
<button onClick={fetchOrganizations} className="underline hover:text-red-300"> |
|||
重试 |
|||
</button> |
|||
</div> |
|||
)} |
|||
|
|||
{/* Organizations Table */} |
|||
<Card> |
|||
<CardHeader> |
|||
<CardTitle>组织列表 ({flatOrgs.length})</CardTitle> |
|||
</CardHeader> |
|||
<CardContent> |
|||
<div className="overflow-x-auto"> |
|||
<Table> |
|||
<TableHeader> |
|||
<TableRow> |
|||
<TableHead>名称</TableHead> |
|||
<TableHead>编码</TableHead> |
|||
<TableHead>负责人</TableHead> |
|||
<TableHead>联系电话</TableHead> |
|||
<TableHead>成员数</TableHead> |
|||
<TableHead>状态</TableHead> |
|||
<TableHead className="text-right">操作</TableHead> |
|||
</TableRow> |
|||
</TableHeader> |
|||
<TableBody> |
|||
{isLoading ? ( |
|||
<TableRow> |
|||
<TableCell>加载中...</TableCell> |
|||
</TableRow> |
|||
) : visibleOrgs.length === 0 ? ( |
|||
<TableRow> |
|||
<TableCell>暂无数据</TableCell> |
|||
</TableRow> |
|||
) : ( |
|||
visibleOrgs.map((org) => { |
|||
const hasChildren = org.children && org.children.length > 0 |
|||
const isExpanded = expandedIds.has(org.id) |
|||
|
|||
return ( |
|||
<TableRow key={org.id}> |
|||
<TableCell> |
|||
<div className="flex items-center" style={{ paddingLeft: `${org.depth * 24}px` }}> |
|||
{hasChildren ? ( |
|||
<button |
|||
onClick={() => toggleExpand(org.id)} |
|||
className="mr-2 p-0.5 rounded hover:bg-gray-700/50 text-gray-400 hover:text-gray-200 transition-colors" |
|||
> |
|||
{isExpanded ? ( |
|||
<ChevronDown className="h-4 w-4" /> |
|||
) : ( |
|||
<ChevronRight className="h-4 w-4" /> |
|||
)} |
|||
</button> |
|||
) : ( |
|||
<span className="mr-2 w-5 inline-block" /> |
|||
)} |
|||
<span className="font-medium text-white">{org.name}</span> |
|||
</div> |
|||
</TableCell> |
|||
<TableCell className="text-gray-400">{org.code}</TableCell> |
|||
<TableCell className="text-gray-300">{org.leader || '-'}</TableCell> |
|||
<TableCell className="text-gray-400">{org.phone || '-'}</TableCell> |
|||
<TableCell> |
|||
<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-sky-500/20 text-sky-400 border border-sky-500/30"> |
|||
{org.memberCount} |
|||
</span> |
|||
</TableCell> |
|||
<TableCell>{renderStatusBadge(org.status)}</TableCell> |
|||
<TableCell className="text-right"> |
|||
<div className="flex items-center justify-end gap-1"> |
|||
<Button |
|||
variant="ghost" |
|||
size="sm" |
|||
onClick={() => openMemberModal(org)} |
|||
title="成员管理" |
|||
> |
|||
<Users className="h-4 w-4" /> |
|||
</Button> |
|||
<Button |
|||
variant="ghost" |
|||
size="sm" |
|||
onClick={() => openModal(org)} |
|||
title="编辑" |
|||
> |
|||
<Edit2 className="h-4 w-4" /> |
|||
</Button> |
|||
<Button |
|||
variant="ghost" |
|||
size="sm" |
|||
onClick={() => openDeleteConfirm(org)} |
|||
className="text-red-400 hover:text-red-300" |
|||
title="删除" |
|||
> |
|||
<Trash2 className="h-4 w-4" /> |
|||
</Button> |
|||
</div> |
|||
</TableCell> |
|||
</TableRow> |
|||
) |
|||
}) |
|||
)} |
|||
</TableBody> |
|||
</Table> |
|||
</div> |
|||
</CardContent> |
|||
</Card> |
|||
|
|||
{/* Create / Edit Modal */} |
|||
<Modal |
|||
isOpen={isModalOpen} |
|||
onClose={() => { |
|||
setIsModalOpen(false) |
|||
resetForm() |
|||
}} |
|||
title={editingOrg ? '编辑组织' : '新增组织'} |
|||
size="md" |
|||
footer={ |
|||
<> |
|||
<Button |
|||
variant="outline" |
|||
onClick={() => { |
|||
setIsModalOpen(false) |
|||
resetForm() |
|||
}} |
|||
> |
|||
取消 |
|||
</Button> |
|||
<Button onClick={editingOrg ? handleUpdateOrg : handleCreateOrg}> |
|||
{editingOrg ? '保存' : '创建'} |
|||
</Button> |
|||
</> |
|||
} |
|||
> |
|||
<div className="space-y-4"> |
|||
{/* Parent Org */} |
|||
<div> |
|||
<label className="block text-sm font-medium text-gray-300 mb-1.5">上级组织</label> |
|||
<select |
|||
className="w-full rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-sm text-white focus:outline-none focus:ring-2 focus:ring-sky-500/50" |
|||
value={formData.parentId || 0} |
|||
onChange={(e) => setFormData({ ...formData, parentId: Number(e.target.value) })} |
|||
> |
|||
<option value={0} className="bg-gray-800">无（顶级组织）</option> |
|||
{orgOptions |
|||
.filter((o) => !editingOrg || o.id !== editingOrg.id) |
|||
.map((o) => ( |
|||
<option key={o.id} value={o.id} className="bg-gray-800"> |
|||
{' '.repeat(o.depth)}{o.name} |
|||
</option> |
|||
))} |
|||
</select> |
|||
</div> |
|||
|
|||
<Input |
|||
label="组织名称" |
|||
placeholder="请输入组织名称" |
|||
value={formData.name || ''} |
|||
onChange={(e) => setFormData({ ...formData, name: e.target.value })} |
|||
/> |
|||
<Input |
|||
label="组织编码" |
|||
placeholder="请输入组织编码" |
|||
value={formData.code || ''} |
|||
onChange={(e) => setFormData({ ...formData, code: e.target.value })} |
|||
/> |
|||
<Input |
|||
label="负责人" |
|||
placeholder="请输入负责人" |
|||
value={formData.leader || ''} |
|||
onChange={(e) => setFormData({ ...formData, leader: e.target.value })} |
|||
/> |
|||
<Input |
|||
label="联系电话" |
|||
placeholder="请输入联系电话" |
|||
value={formData.phone || ''} |
|||
onChange={(e) => setFormData({ ...formData, phone: e.target.value })} |
|||
/> |
|||
<Input |
|||
label="邮箱" |
|||
type="email" |
|||
placeholder="请输入邮箱" |
|||
value={formData.email || ''} |
|||
onChange={(e) => setFormData({ ...formData, email: e.target.value })} |
|||
/> |
|||
<Input |
|||
label="排序" |
|||
type="number" |
|||
placeholder="排序号（数字越小越靠前）" |
|||
value={formData.sortOrder?.toString() || '0'} |
|||
onChange={(e) => setFormData({ ...formData, sortOrder: Number(e.target.value) })} |
|||
/> |
|||
</div> |
|||
</Modal> |
|||
|
|||
{/* Delete Confirmation Modal */} |
|||
<Modal |
|||
isOpen={deleteConfirmOpen} |
|||
onClose={() => { |
|||
setDeleteConfirmOpen(false) |
|||
setOrgToDelete(null) |
|||
setDeleteError(null) |
|||
}} |
|||
title="确认删除" |
|||
size="sm" |
|||
footer={ |
|||
<> |
|||
<Button |
|||
variant="outline" |
|||
onClick={() => { |
|||
setDeleteConfirmOpen(false) |
|||
setOrgToDelete(null) |
|||
setDeleteError(null) |
|||
}} |
|||
disabled={isDeleting} |
|||
> |
|||
取消 |
|||
</Button> |
|||
{!deleteError && ( |
|||
<Button |
|||
variant="destructive" |
|||
onClick={handleDeleteOrg} |
|||
disabled={isDeleting} |
|||
> |
|||
{isDeleting ? '删除中...' : '确认删除'} |
|||
</Button> |
|||
)} |
|||
</> |
|||
} |
|||
> |
|||
<div className="py-4"> |
|||
{deleteError ? ( |
|||
<div className="p-3 bg-red-500/10 border border-red-500/30 rounded-lg"> |
|||
<p className="text-red-400 text-sm">{deleteError}</p> |
|||
</div> |
|||
) : ( |
|||
<> |
|||
<p className="text-gray-300"> |
|||
确定要删除组织 <span className="font-medium text-white">{orgToDelete?.name}</span> 吗？ |
|||
</p> |
|||
<p className="text-sm text-gray-500 mt-2">此操作不可恢复，请谨慎操作。</p> |
|||
</> |
|||
)} |
|||
</div> |
|||
</Modal> |
|||
|
|||
{/* Member Management Modal */} |
|||
<Modal |
|||
isOpen={memberModalOpen} |
|||
onClose={() => { |
|||
setMemberModalOpen(false) |
|||
setMemberOrg(null) |
|||
setMembers([]) |
|||
setEditingMemberUserId(null) |
|||
}} |
|||
title={`成员管理 — ${memberOrg?.name || ''}`} |
|||
size="lg" |
|||
> |
|||
<div className="space-y-6"> |
|||
{/* Add Member Section */} |
|||
<div className="p-4 rounded-lg border border-gray-800 bg-gray-800/30"> |
|||
<h4 className="text-sm font-medium text-gray-300 mb-3">添加成员</h4> |
|||
<div className="flex items-end gap-3"> |
|||
<div className="flex-1"> |
|||
<Input |
|||
label="用户 ID" |
|||
placeholder="请输入用户 ID" |
|||
value={newMemberUserId} |
|||
onChange={(e) => setNewMemberUserId(e.target.value)} |
|||
/> |
|||
</div> |
|||
<div className="flex-1"> |
|||
<label className="block text-sm font-medium text-gray-300 mb-1.5">角色</label> |
|||
<select |
|||
className="w-full h-11 rounded-lg border border-white/10 bg-gray-900/80 px-3 py-2 text-sm text-white focus:outline-none focus:ring-2 focus:ring-sky-500/50" |
|||
value={newMemberRoleId} |
|||
onChange={(e) => setNewMemberRoleId(Number(e.target.value))} |
|||
> |
|||
<option value={0} className="bg-gray-800">请选择角色</option> |
|||
{roles.map((role) => ( |
|||
<option key={role.id} value={role.id} className="bg-gray-800"> |
|||
{role.name} |
|||
</option> |
|||
))} |
|||
</select> |
|||
</div> |
|||
<Button |
|||
onClick={handleAddMember} |
|||
disabled={!newMemberUserId || !newMemberRoleId} |
|||
className="shrink-0" |
|||
> |
|||
<Plus className="h-4 w-4" /> |
|||
添加 |
|||
</Button> |
|||
</div> |
|||
</div> |
|||
|
|||
{/* Members List */} |
|||
<div> |
|||
<h4 className="text-sm font-medium text-gray-300 mb-3"> |
|||
当前成员 ({members.length}) |
|||
</h4> |
|||
<div className="overflow-x-auto"> |
|||
<Table> |
|||
<TableHeader> |
|||
<TableRow> |
|||
<TableHead>用户名</TableHead> |
|||
<TableHead>角色</TableHead> |
|||
<TableHead>加入时间</TableHead> |
|||
<TableHead className="text-right">操作</TableHead> |
|||
</TableRow> |
|||
</TableHeader> |
|||
<TableBody> |
|||
{isMembersLoading ? ( |
|||
<TableRow> |
|||
<TableCell>加载中...</TableCell> |
|||
</TableRow> |
|||
) : members.length === 0 ? ( |
|||
<TableRow> |
|||
<TableCell>暂无成员</TableCell> |
|||
</TableRow> |
|||
) : ( |
|||
members.map((member) => ( |
|||
<TableRow key={member.userId}> |
|||
<TableCell className="font-medium text-white">{member.username}</TableCell> |
|||
<TableCell> |
|||
{editingMemberUserId === member.userId ? ( |
|||
<select |
|||
className="rounded-lg border border-white/10 bg-white/5 px-2 py-1 text-sm text-white focus:outline-none focus:ring-2 focus:ring-sky-500/50" |
|||
value={editingMemberRoleId} |
|||
onChange={(e) => setEditingMemberRoleId(Number(e.target.value))} |
|||
> |
|||
{roles.map((role) => ( |
|||
<option key={role.id} value={role.id} className="bg-gray-800"> |
|||
{role.name} |
|||
</option> |
|||
))} |
|||
</select> |
|||
) : ( |
|||
<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-500/20 text-blue-400 border border-blue-500/30"> |
|||
{member.roleName} |
|||
</span> |
|||
)} |
|||
</TableCell> |
|||
<TableCell className="text-gray-400"> |
|||
{new Date(member.createdAt).toLocaleDateString('zh-CN')} |
|||
</TableCell> |
|||
<TableCell className="text-right"> |
|||
<div className="flex items-center justify-end gap-2"> |
|||
{editingMemberUserId === member.userId ? ( |
|||
<> |
|||
<Button |
|||
variant="ghost" |
|||
size="sm" |
|||
onClick={() => handleUpdateMemberRole(member.userId)} |
|||
className="text-green-400 hover:text-green-300" |
|||
> |
|||
保存 |
|||
</Button> |
|||
<Button |
|||
variant="ghost" |
|||
size="sm" |
|||
onClick={() => setEditingMemberUserId(null)} |
|||
> |
|||
取消 |
|||
</Button> |
|||
</> |
|||
) : ( |
|||
<> |
|||
<Button |
|||
variant="ghost" |
|||
size="sm" |
|||
onClick={() => { |
|||
setEditingMemberUserId(member.userId) |
|||
setEditingMemberRoleId(member.roleId) |
|||
}} |
|||
title="修改角色" |
|||
> |
|||
<Edit2 className="h-4 w-4" /> |
|||
</Button> |
|||
<Button |
|||
variant="ghost" |
|||
size="sm" |
|||
onClick={() => handleRemoveMember(member.userId)} |
|||
className="text-red-400 hover:text-red-300" |
|||
title="移除成员" |
|||
> |
|||
<Trash2 className="h-4 w-4" /> |
|||
</Button> |
|||
</> |
|||
)} |
|||
</div> |
|||
</TableCell> |
|||
</TableRow> |
|||
)) |
|||
)} |
|||
</TableBody> |
|||
</Table> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</Modal> |
|||
</div> |
|||
) |
|||
} |
|||
Loading…
Reference in new issue