/**
|
* @author 韩天尊
|
* @time 2024-01-15
|
* @version 1.0.0
|
* @description 管理端积分审核详情页面，显示单个审核记录的详细信息并提供审核操作
|
*/
|
import React, { useState, useEffect } from 'react';
|
import { useNavigate, useParams } from 'react-router-dom';
|
import { useAppContext } from '../context/AppContext';
|
import PageHeader from '../components/PageHeader';
|
import { adminAPI } from '../services/api';
|
|
// 审核详情接口定义
|
interface ReviewDetail {
|
id: number;
|
userName: string;
|
categoryDesc: string;
|
points: number;
|
isPositive: number; // 是否正向积分(0:负向,1:正向)
|
secondary: string;
|
createTime: string;
|
status: string; // 审核状态 0-待审核，1-审核通过，2-审核拒绝
|
reviewTime?: string;
|
reviewReason?: string;
|
}
|
|
const AdminReviewDetailPage: React.FC = () => {
|
const navigate = useNavigate();
|
const { id } = useParams<{ id: string }>();
|
const { state } = useAppContext();
|
const [reviewDetail, setReviewDetail] = useState<ReviewDetail | null>(null);
|
const [loading, setLoading] = useState(true);
|
|
|
// 加载审核详情
|
useEffect(() => {
|
const loadReviewDetail = async () => {
|
setLoading(true);
|
const recordId = parseInt(id || '0');
|
|
try {
|
const response = await adminAPI.getPointsReviewDetail(recordId);
|
if (response.code === 0) {
|
setReviewDetail(response.data);
|
} else {
|
alert(response.msg || '获取审核详情失败');
|
navigate('/admin-points-review');
|
}
|
} catch (error) {
|
console.error('获取审核详情失败:', error);
|
alert('获取审核详情失败，请稍后重试');
|
navigate('/admin-points-review');
|
} finally {
|
setLoading(false);
|
}
|
};
|
|
if (id) {
|
loadReviewDetail();
|
}
|
}, [id, navigate]);
|
|
// 审核操作处理
|
const handleReview = async (action: 'approve' | 'reject', reason?: string) => {
|
if (!reviewDetail) return;
|
|
try {
|
const response = await adminAPI.singleReviewPointsDeclaration({
|
declarationId: reviewDetail.id,
|
action: action === 'approve' ? '1' : '2',
|
comment: reason || (action === 'approve' ? '符合审核要求' : '不符合审核要求')
|
});
|
|
if (response.code === 0) {
|
const newStatus = action === 'approve' ? '1' : '2';
|
const reviewTime = new Date().toLocaleString('zh-CN', {
|
year: 'numeric',
|
month: '2-digit',
|
day: '2-digit',
|
hour: '2-digit',
|
minute: '2-digit'
|
});
|
|
setReviewDetail(prev => prev ? {
|
...prev,
|
status: newStatus,
|
reviewTime,
|
reviewReason: reason || (action === 'approve' ? '符合审核要求' : '不符合审核要求')
|
} : null);
|
|
alert(`审核${action === 'approve' ? '通过' : '拒绝'}成功`);
|
} else {
|
alert(response.msg || `审核${action === 'approve' ? '通过' : '拒绝'}失败`);
|
}
|
} catch (error) {
|
console.error('审核操作失败:', error);
|
alert(`审核${action === 'approve' ? '通过' : '拒绝'}失败，请稍后重试`);
|
}
|
};
|
|
// 通过审核
|
const handleApprove = () => {
|
if (window.confirm('确认通过此积分申报吗？')) {
|
handleReview('approve');
|
}
|
};
|
|
// 拒绝审核
|
const handleReject = () => {
|
const reason = prompt('请输入拒绝原因（可选）：');
|
if (reason !== null) { // 用户没有取消
|
handleReview('reject', reason || '不符合审核要求');
|
}
|
};
|
|
// 获取状态文本
|
const getStatusText = (status: string) => {
|
const statusMap: { [key: string]: string } = {
|
'0': '待审核',
|
'1': '已通过',
|
'2': '已拒绝',
|
'pending': '待审核',
|
'approved': '已通过',
|
'rejected': '已拒绝'
|
};
|
return statusMap[status] || status;
|
};
|
|
// 获取状态样式类名
|
const getStatusClass = (status: string) => {
|
const classMap: { [key: string]: string } = {
|
'0': 'pending',
|
'1': 'approved',
|
'2': 'rejected',
|
'pending': 'pending',
|
'approved': 'approved',
|
'rejected': 'rejected'
|
};
|
return classMap[status] || status;
|
};
|
|
// 格式化时间
|
const formatTime = (timeStr: string) => {
|
if (!timeStr) return '';
|
try {
|
const date = new Date(timeStr);
|
const year = date.getFullYear();
|
const month = String(date.getMonth() + 1).padStart(2, '0');
|
const day = String(date.getDate()).padStart(2, '0');
|
const hours = String(date.getHours()).padStart(2, '0');
|
const minutes = String(date.getMinutes()).padStart(2, '0');
|
return `${year}-${month}-${day} ${hours}:${minutes}`;
|
} catch (error) {
|
return timeStr;
|
}
|
};
|
|
if (loading) {
|
return (
|
<div className="page admin-review-detail-page">
|
<PageHeader title="审核详情" showBack={true} />
|
<div className="loading-state">
|
<i className="fas fa-spinner fa-spin"></i>
|
<p>加载中...</p>
|
</div>
|
</div>
|
);
|
}
|
|
if (!reviewDetail) {
|
return (
|
<div className="page admin-review-detail-page">
|
<PageHeader title="审核详情" showBack={true} />
|
<div className="empty-state">
|
<i className="fas fa-exclamation-triangle"></i>
|
<p>未找到审核记录</p>
|
</div>
|
</div>
|
);
|
}
|
|
return (
|
<div className="page admin-review-detail-page">
|
<PageHeader title="审核详情" showBack={true} />
|
|
<div className="review-detail-content">
|
{/* 申报信息 */}
|
<div className="detail-section">
|
<h3 className="section-title">申报信息</h3>
|
<div className="detail-info">
|
<div className="detail-item">
|
<label>申报人</label>
|
<span>{reviewDetail.userName}</span>
|
</div>
|
<div className="detail-item">
|
<label>活动分类</label>
|
<span>{reviewDetail.categoryDesc}</span>
|
</div>
|
<div className="detail-item">
|
<label>申报积分</label>
|
<span className="points-value">
|
{reviewDetail.isPositive === 1 ? '+' : '-'}{reviewDetail.points} 积分
|
</span>
|
</div>
|
<div className="detail-item">
|
<label>申报内容</label>
|
<p className="content-text">{reviewDetail.secondary}</p>
|
</div>
|
<div className="detail-item">
|
<label>提交时间</label>
|
<span>{formatTime(reviewDetail.createTime)}</span>
|
</div>
|
<div className="detail-item">
|
<label>审核状态</label>
|
<span className={`status-badge ${getStatusClass(reviewDetail.status)}`}>
|
{getStatusText(reviewDetail.status)}
|
</span>
|
</div>
|
{reviewDetail.reviewTime && (
|
<div className="detail-item">
|
<label>审核时间</label>
|
<span>{reviewDetail.reviewTime}</span>
|
</div>
|
)}
|
{reviewDetail.reviewReason && (
|
<div className="detail-item">
|
<label>审核说明</label>
|
<p className="content-text">{reviewDetail.reviewReason}</p>
|
</div>
|
)}
|
</div>
|
</div>
|
|
{/* 审核操作 */}
|
{reviewDetail.status === '0' && (
|
<div className="detail-section">
|
<h3 className="section-title">审核操作</h3>
|
<div className="review-actions">
|
<button
|
className="review-btn approve"
|
onClick={handleApprove}
|
>
|
<i className="fas fa-check"></i>
|
<span>通过</span>
|
</button>
|
<button
|
className="review-btn reject"
|
onClick={handleReject}
|
>
|
<i className="fas fa-times"></i>
|
<span>拒绝</span>
|
</button>
|
</div>
|
</div>
|
)}
|
</div>
|
</div>
|
);
|
};
|
|
export default AdminReviewDetailPage;
|
