458 lines
17 KiB
TypeScript
458 lines
17 KiB
TypeScript
|
import { useState, useEffect, useCallback } from 'react'
|
|||
|
|
import { verificationsApi, type VerificationListItem, type VerificationDetail, type VerificationStatus } from '@/api'
|
|||
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
|
|||
|
|
import { Button } from '@/components/ui/button'
|
|||
|
|
import { Input } from '@/components/ui/input'
|
|||
|
|
import { Badge } from '@/components/ui/badge'
|
|||
|
|
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
|
|||
|
|
import { Textarea } from '@/components/ui/textarea'
|
|||
|
|
import {
|
|||
|
|
Table,
|
|||
|
|
TableBody,
|
|||
|
|
TableCell,
|
|||
|
|
TableHead,
|
|||
|
|
TableHeader,
|
|||
|
|
TableRow,
|
|||
|
|
} from '@/components/ui/table'
|
|||
|
|
import {
|
|||
|
|
Select,
|
|||
|
|
SelectContent,
|
|||
|
|
SelectItem,
|
|||
|
|
SelectTrigger,
|
|||
|
|
SelectValue,
|
|||
|
|
} from '@/components/ui/select'
|
|||
|
|
import {
|
|||
|
|
Dialog,
|
|||
|
|
DialogContent,
|
|||
|
|
DialogDescription,
|
|||
|
|
DialogFooter,
|
|||
|
|
DialogHeader,
|
|||
|
|
DialogTitle,
|
|||
|
|
} from '@/components/ui/dialog'
|
|||
|
|
import { PaginationNavigator } from '@/components/ui/pagination'
|
|||
|
|
import { Search, RefreshCw, Eye, CheckCircle, XCircle, Loader2 } from 'lucide-react'
|
|||
|
|
|
|||
|
|
const statusColors: Record<VerificationStatus, string> = {
|
|||
|
|
not_submitted: 'bg-gray-500',
|
|||
|
|
pending: 'bg-yellow-500',
|
|||
|
|
approved: 'bg-green-500',
|
|||
|
|
rejected: 'bg-red-500',
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const statusText: Record<VerificationStatus, string> = {
|
|||
|
|
not_submitted: '未提交',
|
|||
|
|
pending: '待审核',
|
|||
|
|
approved: '已通过',
|
|||
|
|
rejected: '已拒绝',
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const identityText: Record<string, string> = {
|
|||
|
|
student: '学生',
|
|||
|
|
teacher: '教师',
|
|||
|
|
staff: '职工',
|
|||
|
|
alumni: '校友',
|
|||
|
|
external: '外部人员',
|
|||
|
|
general: '普通用户',
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default function Verifications() {
|
|||
|
|
const [verifications, setVerifications] = useState<VerificationListItem[]>([])
|
|||
|
|
const [loading, setLoading] = useState(true)
|
|||
|
|
const [total, setTotal] = useState(0)
|
|||
|
|
const [page, setPage] = useState(1)
|
|||
|
|
const pageSize = 10
|
|||
|
|
const [keyword, setKeyword] = useState('')
|
|||
|
|
const [statusFilter, setStatusFilter] = useState<string>('all')
|
|||
|
|
|
|||
|
|
const [detailOpen, setDetailOpen] = useState(false)
|
|||
|
|
const [selectedVerification, setSelectedVerification] = useState<VerificationDetail | null>(null)
|
|||
|
|
const [detailLoading, setDetailLoading] = useState(false)
|
|||
|
|
|
|||
|
|
const [reviewDialogOpen, setReviewDialogOpen] = useState(false)
|
|||
|
|
const [reviewLoading, setReviewLoading] = useState(false)
|
|||
|
|
const [rejectReason, setRejectReason] = useState('')
|
|||
|
|
|
|||
|
|
const loadVerifications = useCallback(async () => {
|
|||
|
|
setLoading(true)
|
|||
|
|
try {
|
|||
|
|
const params = {
|
|||
|
|
page,
|
|||
|
|
page_size: pageSize,
|
|||
|
|
keyword: keyword || undefined,
|
|||
|
|
status: statusFilter !== 'all' ? statusFilter as VerificationStatus : undefined,
|
|||
|
|
}
|
|||
|
|
const response = await verificationsApi.getVerifications(params)
|
|||
|
|
setVerifications(response.data.data.list || [])
|
|||
|
|
setTotal(response.data.data.total || 0)
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('Failed to load verifications:', error)
|
|||
|
|
setVerifications([])
|
|||
|
|
setTotal(0)
|
|||
|
|
} finally {
|
|||
|
|
setLoading(false)
|
|||
|
|
}
|
|||
|
|
}, [page, keyword, statusFilter])
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
loadVerifications()
|
|||
|
|
}, [loadVerifications])
|
|||
|
|
|
|||
|
|
const handleViewDetail = async (verification: VerificationListItem) => {
|
|||
|
|
setDetailLoading(true)
|
|||
|
|
setDetailOpen(true)
|
|||
|
|
try {
|
|||
|
|
const response = await verificationsApi.getVerificationById(verification.id)
|
|||
|
|
setSelectedVerification(response.data.data)
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('Failed to load verification detail:', error)
|
|||
|
|
setSelectedVerification(null)
|
|||
|
|
} finally {
|
|||
|
|
setDetailLoading(false)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const handleOpenReviewDialog = () => {
|
|||
|
|
setRejectReason('')
|
|||
|
|
setReviewDialogOpen(true)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const handleReview = async (approve: boolean) => {
|
|||
|
|
if (!selectedVerification) return
|
|||
|
|
|
|||
|
|
if (!approve && !rejectReason.trim()) {
|
|||
|
|
alert('请填写拒绝原因')
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
setReviewLoading(true)
|
|||
|
|
try {
|
|||
|
|
await verificationsApi.reviewVerification(selectedVerification.id, {
|
|||
|
|
approve,
|
|||
|
|
reject_reason: approve ? undefined : rejectReason,
|
|||
|
|
})
|
|||
|
|
setReviewDialogOpen(false)
|
|||
|
|
setDetailOpen(false)
|
|||
|
|
loadVerifications()
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('Failed to review verification:', error)
|
|||
|
|
alert('审核失败')
|
|||
|
|
} finally {
|
|||
|
|
setReviewLoading(false)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const handleSearch = () => {
|
|||
|
|
setPage(1)
|
|||
|
|
loadVerifications()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const handleRefresh = () => {
|
|||
|
|
loadVerifications()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const handlePageChange = (newPage: number) => {
|
|||
|
|
setPage(newPage)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const totalPages = Math.ceil(total / pageSize)
|
|||
|
|
|
|||
|
|
const getInitials = (name: string) => {
|
|||
|
|
return name.slice(0, 2).toUpperCase()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const formatDate = (dateString: string) => {
|
|||
|
|
return new Date(dateString).toLocaleDateString('zh-CN', {
|
|||
|
|
year: 'numeric',
|
|||
|
|
month: '2-digit',
|
|||
|
|
day: '2-digit',
|
|||
|
|
hour: '2-digit',
|
|||
|
|
minute: '2-digit',
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="space-y-6">
|
|||
|
|
<div className="flex items-center justify-between">
|
|||
|
|
<div>
|
|||
|
|
<h1 className="text-3xl font-bold">身份认证管理</h1>
|
|||
|
|
<p className="text-muted-foreground">审核用户身份认证申请</p>
|
|||
|
|
</div>
|
|||
|
|
<Button onClick={handleRefresh} disabled={loading}>
|
|||
|
|
{loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <RefreshCw className="h-4 w-4" />}
|
|||
|
|
刷新
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<Card>
|
|||
|
|
<CardHeader>
|
|||
|
|
<CardTitle>筛选条件</CardTitle>
|
|||
|
|
<CardDescription>根据条件筛选认证申请</CardDescription>
|
|||
|
|
</CardHeader>
|
|||
|
|
<CardContent>
|
|||
|
|
<div className="flex flex-wrap gap-4">
|
|||
|
|
<div className="flex gap-2 flex-1 min-w-[300px]">
|
|||
|
|
<Input
|
|||
|
|
placeholder="搜索用户名、真实姓名..."
|
|||
|
|
value={keyword}
|
|||
|
|
onChange={(e) => setKeyword(e.target.value)}
|
|||
|
|
onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
|
|||
|
|
className="max-w-sm"
|
|||
|
|
/>
|
|||
|
|
<Button variant="outline" onClick={handleSearch}>
|
|||
|
|
<Search className="h-4 w-4 mr-2" />
|
|||
|
|
搜索
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
<Select value={statusFilter} onValueChange={setStatusFilter}>
|
|||
|
|
<SelectTrigger className="w-[150px]">
|
|||
|
|
<SelectValue placeholder="状态筛选" />
|
|||
|
|
</SelectTrigger>
|
|||
|
|
<SelectContent>
|
|||
|
|
<SelectItem value="all">全部状态</SelectItem>
|
|||
|
|
<SelectItem value="pending">待审核</SelectItem>
|
|||
|
|
<SelectItem value="approved">已通过</SelectItem>
|
|||
|
|
<SelectItem value="rejected">已拒绝</SelectItem>
|
|||
|
|
</SelectContent>
|
|||
|
|
</Select>
|
|||
|
|
</div>
|
|||
|
|
</CardContent>
|
|||
|
|
</Card>
|
|||
|
|
|
|||
|
|
<Card>
|
|||
|
|
<CardHeader>
|
|||
|
|
<CardTitle>认证申请列表</CardTitle>
|
|||
|
|
<CardDescription>共 {total} 条申请</CardDescription>
|
|||
|
|
</CardHeader>
|
|||
|
|
<CardContent>
|
|||
|
|
<Table>
|
|||
|
|
<TableHeader>
|
|||
|
|
<TableRow>
|
|||
|
|
<TableHead>用户</TableHead>
|
|||
|
|
<TableHead>身份类型</TableHead>
|
|||
|
|
<TableHead>真实姓名</TableHead>
|
|||
|
|
<TableHead>学号/工号</TableHead>
|
|||
|
|
<TableHead>部门</TableHead>
|
|||
|
|
<TableHead>状态</TableHead>
|
|||
|
|
<TableHead>提交时间</TableHead>
|
|||
|
|
<TableHead className="w-[100px]">操作</TableHead>
|
|||
|
|
</TableRow>
|
|||
|
|
</TableHeader>
|
|||
|
|
<TableBody>
|
|||
|
|
{loading ? (
|
|||
|
|
<TableRow>
|
|||
|
|
<TableCell colSpan={8} className="text-center py-8">
|
|||
|
|
<Loader2 className="h-6 w-6 animate-spin mx-auto text-muted-foreground" />
|
|||
|
|
<p className="text-muted-foreground mt-2">加载中...</p>
|
|||
|
|
</TableCell>
|
|||
|
|
</TableRow>
|
|||
|
|
) : verifications.length === 0 ? (
|
|||
|
|
<TableRow>
|
|||
|
|
<TableCell colSpan={8} className="text-center py-8 text-muted-foreground">
|
|||
|
|
暂无数据
|
|||
|
|
</TableCell>
|
|||
|
|
</TableRow>
|
|||
|
|
) : (
|
|||
|
|
verifications.map((verification) => (
|
|||
|
|
<TableRow
|
|||
|
|
key={verification.id}
|
|||
|
|
className="cursor-pointer hover:bg-muted/50"
|
|||
|
|
onClick={() => handleViewDetail(verification)}
|
|||
|
|
>
|
|||
|
|
<TableCell>
|
|||
|
|
<div className="flex items-center gap-2">
|
|||
|
|
<Avatar className="h-8 w-8">
|
|||
|
|
<AvatarImage src={verification.avatar} alt={verification.nickname} />
|
|||
|
|
<AvatarFallback>{getInitials(verification.nickname)}</AvatarFallback>
|
|||
|
|
</Avatar>
|
|||
|
|
<div>
|
|||
|
|
<p className="font-medium">{verification.nickname}</p>
|
|||
|
|
<p className="text-xs text-muted-foreground">@{verification.username}</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</TableCell>
|
|||
|
|
<TableCell>
|
|||
|
|
<Badge variant="outline">{identityText[verification.identity] || verification.identity}</Badge>
|
|||
|
|
</TableCell>
|
|||
|
|
<TableCell>{verification.real_name}</TableCell>
|
|||
|
|
<TableCell>{verification.student_id || verification.employee_id || '-'}</TableCell>
|
|||
|
|
<TableCell>{verification.department || '-'}</TableCell>
|
|||
|
|
<TableCell>
|
|||
|
|
<Badge className={statusColors[verification.status]}>
|
|||
|
|
{statusText[verification.status]}
|
|||
|
|
</Badge>
|
|||
|
|
</TableCell>
|
|||
|
|
<TableCell>{formatDate(verification.created_at)}</TableCell>
|
|||
|
|
<TableCell onClick={(e) => e.stopPropagation()}>
|
|||
|
|
<Button
|
|||
|
|
variant="ghost"
|
|||
|
|
size="sm"
|
|||
|
|
onClick={() => handleViewDetail(verification)}
|
|||
|
|
title="查看详情"
|
|||
|
|
>
|
|||
|
|
<Eye className="h-4 w-4" />
|
|||
|
|
</Button>
|
|||
|
|
</TableCell>
|
|||
|
|
</TableRow>
|
|||
|
|
))
|
|||
|
|
)}
|
|||
|
|
</TableBody>
|
|||
|
|
</Table>
|
|||
|
|
|
|||
|
|
{totalPages > 1 && (
|
|||
|
|
<div className="mt-4 flex justify-center">
|
|||
|
|
<PaginationNavigator
|
|||
|
|
currentPage={page}
|
|||
|
|
totalPages={totalPages}
|
|||
|
|
onPageChange={handlePageChange}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</CardContent>
|
|||
|
|
</Card>
|
|||
|
|
|
|||
|
|
{/* 详情对话框 */}
|
|||
|
|
<Dialog open={detailOpen} onOpenChange={setDetailOpen}>
|
|||
|
|
<DialogContent className="max-w-lg max-h-[90vh] overflow-y-auto">
|
|||
|
|
<DialogHeader>
|
|||
|
|
<DialogTitle>认证详情</DialogTitle>
|
|||
|
|
<DialogDescription>查看用户认证申请详情</DialogDescription>
|
|||
|
|
</DialogHeader>
|
|||
|
|
{detailLoading ? (
|
|||
|
|
<div className="flex items-center justify-center py-8">
|
|||
|
|
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
|
|||
|
|
</div>
|
|||
|
|
) : selectedVerification ? (
|
|||
|
|
<div className="space-y-4">
|
|||
|
|
<div className="flex items-center gap-3">
|
|||
|
|
<Avatar className="h-12 w-12">
|
|||
|
|
<AvatarImage src={selectedVerification.avatar} alt={selectedVerification.nickname} />
|
|||
|
|
<AvatarFallback>{getInitials(selectedVerification.nickname)}</AvatarFallback>
|
|||
|
|
</Avatar>
|
|||
|
|
<div>
|
|||
|
|
<p className="font-medium">{selectedVerification.nickname}</p>
|
|||
|
|
<p className="text-sm text-muted-foreground">@{selectedVerification.username}</p>
|
|||
|
|
</div>
|
|||
|
|
<Badge className={`ml-auto ${statusColors[selectedVerification.status]}`}>
|
|||
|
|
{statusText[selectedVerification.status]}
|
|||
|
|
</Badge>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="grid grid-cols-2 gap-4 text-sm">
|
|||
|
|
<div>
|
|||
|
|
<p className="text-muted-foreground">身份类型</p>
|
|||
|
|
<p className="font-medium">{identityText[selectedVerification.identity] || selectedVerification.identity}</p>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<p className="text-muted-foreground">真实姓名</p>
|
|||
|
|
<p className="font-medium">{selectedVerification.real_name}</p>
|
|||
|
|
</div>
|
|||
|
|
{selectedVerification.student_id && (
|
|||
|
|
<div>
|
|||
|
|
<p className="text-muted-foreground">学号</p>
|
|||
|
|
<p className="font-medium">{selectedVerification.student_id}</p>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
{selectedVerification.employee_id && (
|
|||
|
|
<div>
|
|||
|
|
<p className="text-muted-foreground">工号</p>
|
|||
|
|
<p className="font-medium">{selectedVerification.employee_id}</p>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
{selectedVerification.department && (
|
|||
|
|
<div className="col-span-2">
|
|||
|
|
<p className="text-muted-foreground">部门/院系</p>
|
|||
|
|
<p className="font-medium">{selectedVerification.department}</p>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
<div className="col-span-2">
|
|||
|
|
<p className="text-muted-foreground mb-2">证明材料</p>
|
|||
|
|
<div className="border rounded-lg p-2">
|
|||
|
|
<img
|
|||
|
|
src={selectedVerification.proof_materials}
|
|||
|
|
alt="证明材料"
|
|||
|
|
className="max-w-full h-auto rounded"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
{selectedVerification.reviewed_at && (
|
|||
|
|
<>
|
|||
|
|
<div>
|
|||
|
|
<p className="text-muted-foreground">审核时间</p>
|
|||
|
|
<p className="font-medium">{formatDate(selectedVerification.reviewed_at)}</p>
|
|||
|
|
</div>
|
|||
|
|
{selectedVerification.reviewer_name && (
|
|||
|
|
<div>
|
|||
|
|
<p className="text-muted-foreground">审核人</p>
|
|||
|
|
<p className="font-medium">{selectedVerification.reviewer_name}</p>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</>
|
|||
|
|
)}
|
|||
|
|
{selectedVerification.reject_reason && (
|
|||
|
|
<div className="col-span-2">
|
|||
|
|
<p className="text-muted-foreground">拒绝原因</p>
|
|||
|
|
<p className="font-medium text-red-600">{selectedVerification.reject_reason}</p>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{selectedVerification.status === 'pending' && (
|
|||
|
|
<div className="flex gap-2 pt-4">
|
|||
|
|
<Button
|
|||
|
|
className="flex-1"
|
|||
|
|
onClick={handleOpenReviewDialog}
|
|||
|
|
>
|
|||
|
|
<CheckCircle className="h-4 w-4 mr-2" />
|
|||
|
|
审核认证
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
) : (
|
|||
|
|
<p className="text-center text-muted-foreground py-8">加载失败</p>
|
|||
|
|
)}
|
|||
|
|
</DialogContent>
|
|||
|
|
</Dialog>
|
|||
|
|
|
|||
|
|
{/* 审核对话框 */}
|
|||
|
|
<Dialog open={reviewDialogOpen} onOpenChange={setReviewDialogOpen}>
|
|||
|
|
<DialogContent className="max-w-md">
|
|||
|
|
<DialogHeader>
|
|||
|
|
<DialogTitle>审核认证申请</DialogTitle>
|
|||
|
|
<DialogDescription>请选择通过或拒绝该认证申请</DialogDescription>
|
|||
|
|
</DialogHeader>
|
|||
|
|
<div className="space-y-4 py-4">
|
|||
|
|
<div>
|
|||
|
|
<p className="text-sm font-medium mb-2">拒绝原因（拒绝时必填）</p>
|
|||
|
|
<Textarea
|
|||
|
|
placeholder="请输入拒绝原因..."
|
|||
|
|
value={rejectReason}
|
|||
|
|
onChange={(e) => setRejectReason(e.target.value)}
|
|||
|
|
rows={3}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<DialogFooter className="gap-2">
|
|||
|
|
<Button
|
|||
|
|
variant="outline"
|
|||
|
|
onClick={() => handleReview(false)}
|
|||
|
|
disabled={reviewLoading}
|
|||
|
|
className="text-red-600 border-red-600 hover:bg-red-50"
|
|||
|
|
>
|
|||
|
|
{reviewLoading ? <Loader2 className="h-4 w-4 animate-spin mr-2" /> : <XCircle className="h-4 w-4 mr-2" />}
|
|||
|
|
拒绝
|
|||
|
|
</Button>
|
|||
|
|
<Button
|
|||
|
|
onClick={() => handleReview(true)}
|
|||
|
|
disabled={reviewLoading}
|
|||
|
|
>
|
|||
|
|
{reviewLoading ? <Loader2 className="h-4 w-4 animate-spin mr-2" /> : <CheckCircle className="h-4 w-4 mr-2" />}
|
|||
|
|
通过
|
|||
|
|
</Button>
|
|||
|
|
</DialogFooter>
|
|||
|
|
</DialogContent>
|
|||
|
|
</Dialog>
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|