1052 lines
32 KiB
TypeScript
1052 lines
32 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
||
import { useParams, useNavigate } from 'react-router-dom';
|
||
import {
|
||
Card,
|
||
Descriptions,
|
||
Button,
|
||
Tag,
|
||
Typography,
|
||
Space,
|
||
Modal,
|
||
Input,
|
||
message,
|
||
Spin,
|
||
Progress,
|
||
Tabs,
|
||
Image,
|
||
Select,
|
||
Form,
|
||
Alert,
|
||
Divider,
|
||
Upload,
|
||
Rate,
|
||
Timeline,
|
||
Statistic,
|
||
Row,
|
||
Col,
|
||
Avatar,
|
||
} from 'antd';
|
||
import {
|
||
ArrowLeftOutlined,
|
||
FileTextOutlined,
|
||
DownloadOutlined,
|
||
EyeOutlined,
|
||
EditOutlined,
|
||
CheckCircleOutlined,
|
||
ClockCircleOutlined,
|
||
ExclamationCircleOutlined,
|
||
FileOutlined,
|
||
TranslationOutlined,
|
||
UserOutlined,
|
||
CalendarOutlined,
|
||
DollarOutlined,
|
||
StarOutlined,
|
||
SettingOutlined,
|
||
MessageOutlined,
|
||
ReloadOutlined,
|
||
DeleteOutlined,
|
||
AuditOutlined,
|
||
UploadOutlined,
|
||
SwapOutlined,
|
||
} from '@ant-design/icons';
|
||
import { DocumentTranslation } from '../../types';
|
||
import { database } from '../../utils/database';
|
||
import { api } from '../../utils/api';
|
||
|
||
const { Title, Text, Paragraph } = Typography;
|
||
const { TextArea } = Input;
|
||
const { TabPane } = Tabs;
|
||
const { Option } = Select;
|
||
|
||
interface DocumentDetailProps {}
|
||
|
||
const DocumentDetail: React.FC<DocumentDetailProps> = () => {
|
||
const { id } = useParams<{ id: string }>();
|
||
const navigate = useNavigate();
|
||
|
||
const [document, setDocument] = useState<DocumentTranslation | null>(null);
|
||
const [loading, setLoading] = useState(true);
|
||
const [editModalVisible, setEditModalVisible] = useState(false);
|
||
const [statusModalVisible, setStatusModalVisible] = useState(false);
|
||
const [reassignModalVisible, setReassignModalVisible] = useState(false);
|
||
const [refundModalVisible, setRefundModalVisible] = useState(false);
|
||
const [adminNoteModalVisible, setAdminNoteModalVisible] = useState(false);
|
||
const [retranslateModalVisible, setRetranslateModalVisible] = useState(false);
|
||
const [form] = Form.useForm();
|
||
const [statusForm] = Form.useForm();
|
||
const [reassignForm] = Form.useForm();
|
||
const [refundForm] = Form.useForm();
|
||
const [noteForm] = Form.useForm();
|
||
const [retranslateForm] = Form.useForm();
|
||
|
||
useEffect(() => {
|
||
if (id) {
|
||
loadDocumentDetails();
|
||
}
|
||
}, [id]);
|
||
|
||
const loadDocumentDetails = async () => {
|
||
try {
|
||
setLoading(true);
|
||
await database.connect();
|
||
|
||
// 模拟获取文档详情（管理员视角）
|
||
const mockDocument: DocumentTranslation = {
|
||
id: id!,
|
||
userId: 'user_1',
|
||
fileName: 'business_contract.pdf',
|
||
originalSize: 2048576,
|
||
fileUrl: '/documents/business_contract.pdf',
|
||
translatedFileUrl: '/documents/business_contract_translated.pdf',
|
||
sourceLanguage: 'zh-CN',
|
||
targetLanguage: 'en-US',
|
||
status: 'completed',
|
||
progress: 100,
|
||
quality: 'professional',
|
||
urgency: 'normal',
|
||
estimatedTime: 120,
|
||
actualTime: 105,
|
||
cost: 128.50,
|
||
translatorId: 'translator_2',
|
||
translatorName: '王译员',
|
||
rating: 4,
|
||
feedback: '翻译质量很好，术语准确，但有个别地方可以更流畅。',
|
||
createdAt: '2024-01-15T09:00:00Z',
|
||
completedAt: '2024-01-15T10:45:00Z',
|
||
// 管理员相关字段
|
||
adminNotes: '客户对翻译质量满意，已完成交付',
|
||
paymentStatus: 'paid',
|
||
refundAmount: 0,
|
||
qualityScore: 92,
|
||
issues: [],
|
||
retranslationCount: 0,
|
||
clientName: '李先生',
|
||
clientEmail: 'li@example.com',
|
||
clientPhone: '+86 138 0013 8000',
|
||
};
|
||
|
||
setDocument(mockDocument);
|
||
|
||
// 填充表单数据
|
||
form.setFieldsValue({
|
||
fileName: mockDocument.fileName,
|
||
quality: mockDocument.quality,
|
||
urgency: mockDocument.urgency,
|
||
cost: mockDocument.cost,
|
||
translatorName: mockDocument.translatorName,
|
||
});
|
||
|
||
statusForm.setFieldsValue({
|
||
status: mockDocument.status,
|
||
});
|
||
|
||
} catch (error) {
|
||
console.error('加载文档详情失败:', error);
|
||
message.error('加载文档详情失败');
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
const handleEdit = async (values: any) => {
|
||
if (!document) return;
|
||
|
||
try {
|
||
const updatedDocument = {
|
||
...document,
|
||
...values,
|
||
updatedAt: new Date().toISOString(),
|
||
};
|
||
|
||
setDocument(updatedDocument);
|
||
setEditModalVisible(false);
|
||
message.success('文档信息更新成功');
|
||
} catch (error) {
|
||
message.error('更新文档信息失败');
|
||
}
|
||
};
|
||
|
||
const handleStatusChange = async (values: any) => {
|
||
if (!document) return;
|
||
|
||
try {
|
||
const updatedDocument = {
|
||
...document,
|
||
status: values.status,
|
||
updatedAt: new Date().toISOString(),
|
||
};
|
||
|
||
setDocument(updatedDocument);
|
||
setStatusModalVisible(false);
|
||
message.success('状态更新成功');
|
||
} catch (error) {
|
||
message.error('更新状态失败');
|
||
}
|
||
};
|
||
|
||
const handleReassign = async (values: any) => {
|
||
if (!document) return;
|
||
|
||
try {
|
||
const updatedDocument = {
|
||
...document,
|
||
translatorId: values.translatorId,
|
||
translatorName: values.translatorName,
|
||
status: 'in_progress' as const,
|
||
updatedAt: new Date().toISOString(),
|
||
};
|
||
|
||
setDocument(updatedDocument);
|
||
setReassignModalVisible(false);
|
||
message.success('译员重新分配成功');
|
||
} catch (error) {
|
||
message.error('重新分配译员失败');
|
||
}
|
||
};
|
||
|
||
const handleRefund = async (values: any) => {
|
||
if (!document) return;
|
||
|
||
try {
|
||
const refundAmount = values.amount || document.cost;
|
||
|
||
// 模拟退款API调用
|
||
await api.refundPayment(`payment_${document.id}`, refundAmount);
|
||
|
||
const updatedDocument = {
|
||
...document,
|
||
refundAmount: refundAmount,
|
||
paymentStatus: 'refunded' as const,
|
||
updatedAt: new Date().toISOString(),
|
||
};
|
||
|
||
setDocument(updatedDocument);
|
||
setRefundModalVisible(false);
|
||
message.success('退款处理成功');
|
||
} catch (error) {
|
||
message.error('退款处理失败');
|
||
}
|
||
};
|
||
|
||
const handleAddAdminNote = async (values: any) => {
|
||
if (!document) return;
|
||
|
||
try {
|
||
const updatedDocument = {
|
||
...document,
|
||
adminNotes: values.note,
|
||
updatedAt: new Date().toISOString(),
|
||
};
|
||
|
||
setDocument(updatedDocument);
|
||
setAdminNoteModalVisible(false);
|
||
message.success('管理员备注添加成功');
|
||
} catch (error) {
|
||
message.error('添加备注失败');
|
||
}
|
||
};
|
||
|
||
const handleRetranslate = async (values: any) => {
|
||
if (!document) return;
|
||
|
||
try {
|
||
const updatedDocument = {
|
||
...document,
|
||
retranslationCount: (document.retranslationCount || 0) + 1,
|
||
status: 'in_progress' as const,
|
||
progress: 0,
|
||
adminNotes: `${document.adminNotes || ''}\n重新翻译原因: ${values.reason}`,
|
||
updatedAt: new Date().toISOString(),
|
||
};
|
||
|
||
setDocument(updatedDocument);
|
||
setRetranslateModalVisible(false);
|
||
message.success('重新翻译任务已创建');
|
||
} catch (error) {
|
||
message.error('创建重新翻译任务失败');
|
||
}
|
||
};
|
||
|
||
const getStatusColor = (status: string) => {
|
||
const colors = {
|
||
pending: 'orange',
|
||
in_progress: 'blue',
|
||
completed: 'green',
|
||
cancelled: 'red',
|
||
failed: 'red',
|
||
};
|
||
return colors[status as keyof typeof colors] || 'default';
|
||
};
|
||
|
||
const getStatusText = (status: string) => {
|
||
const texts = {
|
||
pending: '等待处理',
|
||
in_progress: '翻译中',
|
||
completed: '已完成',
|
||
cancelled: '已取消',
|
||
failed: '翻译失败',
|
||
};
|
||
return texts[status as keyof typeof texts] || status;
|
||
};
|
||
|
||
const getPaymentStatusColor = (status: string) => {
|
||
const colors = {
|
||
pending: 'orange',
|
||
paid: 'green',
|
||
refunded: 'purple',
|
||
failed: 'red',
|
||
};
|
||
return colors[status as keyof typeof colors] || 'default';
|
||
};
|
||
|
||
const getPaymentStatusText = (status: string) => {
|
||
const texts = {
|
||
pending: '待支付',
|
||
paid: '已支付',
|
||
refunded: '已退款',
|
||
failed: '支付失败',
|
||
};
|
||
return texts[status as keyof typeof texts] || status;
|
||
};
|
||
|
||
const getQualityText = (quality: string) => {
|
||
const texts = {
|
||
basic: '基础版',
|
||
professional: '专业版',
|
||
premium: '高级版',
|
||
};
|
||
return texts[quality as keyof typeof texts] || quality;
|
||
};
|
||
|
||
const getUrgencyText = (urgency: string) => {
|
||
const texts = {
|
||
normal: '普通',
|
||
urgent: '加急',
|
||
emergency: '特急',
|
||
};
|
||
return texts[urgency as keyof typeof texts] || urgency;
|
||
};
|
||
|
||
const formatFileSize = (bytes: number) => {
|
||
if (bytes === 0) return '0 Bytes';
|
||
const k = 1024;
|
||
const sizes = ['Bytes', 'KB', 'MB', 'GB'];
|
||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
|
||
};
|
||
|
||
if (loading) {
|
||
return (
|
||
<div style={{ textAlign: 'center', padding: '50px' }}>
|
||
<Spin size="large" />
|
||
<div style={{ marginTop: '16px' }}>加载文档详情...</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
if (!document) {
|
||
return (
|
||
<div style={{ textAlign: 'center', padding: '50px' }}>
|
||
<div>文档记录不存在</div>
|
||
<Button type="primary" onClick={() => navigate('/documents')} style={{ marginTop: '16px' }}>
|
||
返回文档列表
|
||
</Button>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div style={{ padding: '24px' }}>
|
||
{/* 头部导航 */}
|
||
<div style={{ marginBottom: '24px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||
<div>
|
||
<Button
|
||
icon={<ArrowLeftOutlined />}
|
||
onClick={() => navigate('/documents')}
|
||
style={{ marginRight: '16px' }}
|
||
>
|
||
返回
|
||
</Button>
|
||
<Title level={2} style={{ display: 'inline-block', margin: 0 }}>
|
||
文档详情 #{document.id}
|
||
</Title>
|
||
</div>
|
||
|
||
{/* 管理员操作按钮 */}
|
||
<Space>
|
||
<Button
|
||
icon={<EditOutlined />}
|
||
onClick={() => setEditModalVisible(true)}
|
||
>
|
||
编辑信息
|
||
</Button>
|
||
<Button
|
||
icon={<SettingOutlined />}
|
||
onClick={() => setStatusModalVisible(true)}
|
||
>
|
||
更改状态
|
||
</Button>
|
||
<Button
|
||
icon={<UserOutlined />}
|
||
onClick={() => setReassignModalVisible(true)}
|
||
disabled={document.status === 'completed'}
|
||
>
|
||
重新分配
|
||
</Button>
|
||
<Button
|
||
icon={<ReloadOutlined />}
|
||
onClick={() => setRetranslateModalVisible(true)}
|
||
disabled={document.status !== 'completed'}
|
||
>
|
||
重新翻译
|
||
</Button>
|
||
<Button
|
||
icon={<DollarOutlined />}
|
||
onClick={() => setRefundModalVisible(true)}
|
||
disabled={document.paymentStatus !== 'paid'}
|
||
>
|
||
处理退款
|
||
</Button>
|
||
<Button
|
||
icon={<MessageOutlined />}
|
||
onClick={() => setAdminNoteModalVisible(true)}
|
||
>
|
||
添加备注
|
||
</Button>
|
||
</Space>
|
||
</div>
|
||
|
||
{/* 系统状态提醒 */}
|
||
{document.issues && document.issues.length > 0 && (
|
||
<Alert
|
||
message="系统检测到问题"
|
||
description={document.issues.join(', ')}
|
||
type="warning"
|
||
showIcon
|
||
style={{ marginBottom: '24px' }}
|
||
/>
|
||
)}
|
||
|
||
{/* 基本信息卡片 */}
|
||
<Card title="文档信息" style={{ marginBottom: '24px' }}>
|
||
<Descriptions column={3} bordered>
|
||
<Descriptions.Item label="文件名" span={2}>
|
||
<Space>
|
||
<FileOutlined />
|
||
{document.fileName}
|
||
</Space>
|
||
</Descriptions.Item>
|
||
<Descriptions.Item label="文件大小" span={1}>
|
||
{formatFileSize(document.originalSize)}
|
||
</Descriptions.Item>
|
||
<Descriptions.Item label="状态" span={1}>
|
||
<Tag color={getStatusColor(document.status)}>
|
||
{getStatusText(document.status)}
|
||
</Tag>
|
||
</Descriptions.Item>
|
||
<Descriptions.Item label="支付状态" span={1}>
|
||
<Tag color={getPaymentStatusColor(document.paymentStatus)}>
|
||
{getPaymentStatusText(document.paymentStatus)}
|
||
</Tag>
|
||
</Descriptions.Item>
|
||
<Descriptions.Item label="翻译进度" span={1}>
|
||
<Progress percent={document.progress} size="small" />
|
||
</Descriptions.Item>
|
||
<Descriptions.Item label="客户姓名" span={1}>
|
||
<Space>
|
||
<UserOutlined />
|
||
{document.clientName}
|
||
</Space>
|
||
</Descriptions.Item>
|
||
<Descriptions.Item label="客户邮箱" span={1}>
|
||
{document.clientEmail}
|
||
</Descriptions.Item>
|
||
<Descriptions.Item label="客户电话" span={1}>
|
||
{document.clientPhone}
|
||
</Descriptions.Item>
|
||
<Descriptions.Item label="源语言" span={1}>
|
||
{document.sourceLanguage}
|
||
</Descriptions.Item>
|
||
<Descriptions.Item label="目标语言" span={1}>
|
||
{document.targetLanguage}
|
||
</Descriptions.Item>
|
||
<Descriptions.Item label="翻译质量" span={1}>
|
||
{getQualityText(document.quality)}
|
||
</Descriptions.Item>
|
||
<Descriptions.Item label="紧急程度" span={1}>
|
||
{getUrgencyText(document.urgency)}
|
||
</Descriptions.Item>
|
||
<Descriptions.Item label="译员" span={1}>
|
||
<Space>
|
||
<UserOutlined />
|
||
{document.translatorName}
|
||
</Space>
|
||
</Descriptions.Item>
|
||
<Descriptions.Item label="重译次数" span={1}>
|
||
<Text type={(document.retranslationCount || 0) > 0 ? 'warning' : 'secondary'}>
|
||
{document.retranslationCount || 0} 次
|
||
</Text>
|
||
</Descriptions.Item>
|
||
<Descriptions.Item label="创建时间" span={1}>
|
||
<Space>
|
||
<CalendarOutlined />
|
||
{new Date(document.createdAt).toLocaleString()}
|
||
</Space>
|
||
</Descriptions.Item>
|
||
<Descriptions.Item label="完成时间" span={1}>
|
||
<Space>
|
||
<CalendarOutlined />
|
||
{document.completedAt ? new Date(document.completedAt).toLocaleString() : '-'}
|
||
</Space>
|
||
</Descriptions.Item>
|
||
<Descriptions.Item label="预计时间" span={1}>
|
||
{document.estimatedTime} 分钟
|
||
</Descriptions.Item>
|
||
<Descriptions.Item label="实际时间" span={1}>
|
||
{document.actualTime || '-'} 分钟
|
||
</Descriptions.Item>
|
||
<Descriptions.Item label="费用" span={1}>
|
||
<Space>
|
||
<DollarOutlined />
|
||
<Text strong>¥{document.cost.toFixed(2)}</Text>
|
||
</Space>
|
||
</Descriptions.Item>
|
||
<Descriptions.Item label="退款金额" span={1}>
|
||
<Space>
|
||
<DollarOutlined />
|
||
<Text type={document.refundAmount > 0 ? 'danger' : 'secondary'}>
|
||
¥{document.refundAmount.toFixed(2)}
|
||
</Text>
|
||
</Space>
|
||
</Descriptions.Item>
|
||
<Descriptions.Item label="质量评分" span={1}>
|
||
<Space>
|
||
<AuditOutlined />
|
||
<Text strong style={{ color: document.qualityScore >= 90 ? '#52c41a' : document.qualityScore >= 70 ? '#faad14' : '#ff4d4f' }}>
|
||
{document.qualityScore}/100
|
||
</Text>
|
||
</Space>
|
||
</Descriptions.Item>
|
||
</Descriptions>
|
||
|
||
{document.adminNotes && (
|
||
<div style={{ marginTop: '16px' }}>
|
||
<Text strong>管理员备注：</Text>
|
||
<Paragraph style={{ marginTop: '8px', background: '#f6f6f6', padding: '12px', borderRadius: '6px' }}>
|
||
{document.adminNotes}
|
||
</Paragraph>
|
||
</div>
|
||
)}
|
||
</Card>
|
||
|
||
{/* 文件操作卡片 */}
|
||
<Card
|
||
title={
|
||
<Space>
|
||
<FileTextOutlined />
|
||
文件管理
|
||
</Space>
|
||
}
|
||
style={{ marginBottom: '24px' }}
|
||
>
|
||
<div style={{ display: 'flex', justifyContent: 'space-around', textAlign: 'center', padding: '20px' }}>
|
||
<div>
|
||
<Button
|
||
type="primary"
|
||
size="large"
|
||
icon={<EyeOutlined />}
|
||
onClick={() => message.success('预览原文件...')}
|
||
style={{ marginBottom: '8px' }}
|
||
>
|
||
预览原文件
|
||
</Button>
|
||
<div>
|
||
<Text type="secondary">原始文档</Text>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<Button
|
||
size="large"
|
||
icon={<DownloadOutlined />}
|
||
onClick={() => message.success('下载原文件中...')}
|
||
style={{ marginBottom: '8px' }}
|
||
>
|
||
下载原文件
|
||
</Button>
|
||
<div>
|
||
<Text type="secondary">{formatFileSize(document.originalSize)}</Text>
|
||
</div>
|
||
</div>
|
||
|
||
{document.translatedFileUrl && (
|
||
<>
|
||
<div>
|
||
<Button
|
||
type="primary"
|
||
size="large"
|
||
icon={<EyeOutlined />}
|
||
onClick={() => message.success('预览译文...')}
|
||
style={{ marginBottom: '8px' }}
|
||
>
|
||
预览译文
|
||
</Button>
|
||
<div>
|
||
<Text type="secondary">翻译文档</Text>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<Button
|
||
size="large"
|
||
icon={<DownloadOutlined />}
|
||
onClick={() => message.success('下载译文中...')}
|
||
style={{ marginBottom: '8px' }}
|
||
>
|
||
下载译文
|
||
</Button>
|
||
<div>
|
||
<Text type="secondary">已完成</Text>
|
||
</div>
|
||
</div>
|
||
</>
|
||
)}
|
||
</div>
|
||
</Card>
|
||
|
||
{/* 详细内容标签页 */}
|
||
<Card>
|
||
<Tabs defaultActiveKey="progress">
|
||
<TabPane
|
||
tab={
|
||
<Space>
|
||
<ClockCircleOutlined />
|
||
进度追踪
|
||
</Space>
|
||
}
|
||
key="progress"
|
||
>
|
||
<div style={{ padding: '20px' }}>
|
||
<Timeline>
|
||
<Timeline.Item color="green">
|
||
<div>
|
||
<Text strong>文档上传</Text>
|
||
<div style={{ color: '#999', fontSize: '12px' }}>
|
||
{new Date(document.createdAt).toLocaleString()}
|
||
</div>
|
||
</div>
|
||
</Timeline.Item>
|
||
<Timeline.Item color="blue">
|
||
<div>
|
||
<Text strong>分配译员</Text>
|
||
<div style={{ color: '#999', fontSize: '12px' }}>
|
||
译员：{document.translatorName}
|
||
</div>
|
||
</div>
|
||
</Timeline.Item>
|
||
<Timeline.Item color={document.status === 'completed' ? 'green' : 'blue'}>
|
||
<div>
|
||
<Text strong>翻译进行中</Text>
|
||
<div style={{ color: '#999', fontSize: '12px' }}>
|
||
进度：{document.progress}%
|
||
</div>
|
||
</div>
|
||
</Timeline.Item>
|
||
{document.status === 'completed' && (
|
||
<Timeline.Item color="green">
|
||
<div>
|
||
<Text strong>翻译完成</Text>
|
||
<div style={{ color: '#999', fontSize: '12px' }}>
|
||
{document.completedAt && new Date(document.completedAt).toLocaleString()}
|
||
</div>
|
||
</div>
|
||
</Timeline.Item>
|
||
)}
|
||
</Timeline>
|
||
</div>
|
||
</TabPane>
|
||
|
||
<TabPane
|
||
tab={
|
||
<Space>
|
||
<StarOutlined />
|
||
用户评价
|
||
</Space>
|
||
}
|
||
key="rating"
|
||
>
|
||
<div style={{ padding: '20px' }}>
|
||
{document.rating ? (
|
||
<>
|
||
<div style={{ marginBottom: '20px' }}>
|
||
<Text strong>服务评分：</Text>
|
||
<Rate disabled value={document.rating} style={{ marginLeft: '8px' }} />
|
||
<Text style={{ marginLeft: '8px' }}>
|
||
({document.rating}/5 分)
|
||
</Text>
|
||
</div>
|
||
|
||
{document.feedback && (
|
||
<div>
|
||
<Text strong>用户反馈：</Text>
|
||
<Paragraph style={{ marginTop: '8px' }}>
|
||
{document.feedback}
|
||
</Paragraph>
|
||
</div>
|
||
)}
|
||
</>
|
||
) : (
|
||
<div style={{ textAlign: 'center', color: '#999', padding: '50px' }}>
|
||
暂无用户评价
|
||
</div>
|
||
)}
|
||
</div>
|
||
</TabPane>
|
||
|
||
<TabPane
|
||
tab={
|
||
<Space>
|
||
<AuditOutlined />
|
||
质量分析
|
||
</Space>
|
||
}
|
||
key="quality"
|
||
>
|
||
<div style={{ padding: '20px' }}>
|
||
<Descriptions column={2}>
|
||
<Descriptions.Item label="质量评分">
|
||
<Progress
|
||
type="circle"
|
||
percent={document.qualityScore}
|
||
width={80}
|
||
strokeColor={document.qualityScore >= 90 ? '#52c41a' : document.qualityScore >= 70 ? '#faad14' : '#ff4d4f'}
|
||
/>
|
||
</Descriptions.Item>
|
||
<Descriptions.Item label="系统检测">
|
||
{document.issues && document.issues.length > 0 ? (
|
||
<div>
|
||
{document.issues.map((issue, index) => (
|
||
<Tag key={index} color="red" style={{ marginBottom: '4px' }}>
|
||
{issue}
|
||
</Tag>
|
||
))}
|
||
</div>
|
||
) : (
|
||
<Tag color="green">无异常</Tag>
|
||
)}
|
||
</Descriptions.Item>
|
||
<Descriptions.Item label="时间效率">
|
||
<Statistic
|
||
title="实际用时/预计用时"
|
||
value={document.actualTime ? (document.actualTime / document.estimatedTime) * 100 : 0}
|
||
precision={1}
|
||
suffix="%"
|
||
valueStyle={{ color: (document.actualTime || 0) <= document.estimatedTime ? '#3f8600' : '#cf1322' }}
|
||
/>
|
||
</Descriptions.Item>
|
||
<Descriptions.Item label="重译情况">
|
||
<Text type={(document.retranslationCount || 0) > 0 ? 'warning' : 'secondary'}>
|
||
{document.retranslationCount || 0} 次重译
|
||
</Text>
|
||
</Descriptions.Item>
|
||
</Descriptions>
|
||
</div>
|
||
</TabPane>
|
||
</Tabs>
|
||
</Card>
|
||
|
||
{/* 编辑信息弹窗 */}
|
||
<Modal
|
||
title="编辑文档信息"
|
||
visible={editModalVisible}
|
||
onCancel={() => setEditModalVisible(false)}
|
||
footer={null}
|
||
width={600}
|
||
>
|
||
<Form
|
||
form={form}
|
||
layout="vertical"
|
||
onFinish={handleEdit}
|
||
>
|
||
<Form.Item
|
||
name="fileName"
|
||
label="文件名"
|
||
rules={[{ required: true, message: '请输入文件名' }]}
|
||
>
|
||
<Input />
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
name="quality"
|
||
label="翻译质量"
|
||
rules={[{ required: true, message: '请选择翻译质量' }]}
|
||
>
|
||
<Select>
|
||
<Option value="basic">基础版</Option>
|
||
<Option value="professional">专业版</Option>
|
||
<Option value="premium">高级版</Option>
|
||
</Select>
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
name="urgency"
|
||
label="紧急程度"
|
||
rules={[{ required: true, message: '请选择紧急程度' }]}
|
||
>
|
||
<Select>
|
||
<Option value="normal">普通</Option>
|
||
<Option value="urgent">加急</Option>
|
||
<Option value="emergency">特急</Option>
|
||
</Select>
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
name="cost"
|
||
label="费用"
|
||
rules={[{ required: true, message: '请输入费用' }]}
|
||
>
|
||
<Input type="number" addonAfter="元" />
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
name="translatorName"
|
||
label="译员姓名"
|
||
>
|
||
<Input />
|
||
</Form.Item>
|
||
|
||
<Form.Item style={{ marginBottom: 0, textAlign: 'right' }}>
|
||
<Space>
|
||
<Button onClick={() => setEditModalVisible(false)}>
|
||
取消
|
||
</Button>
|
||
<Button type="primary" htmlType="submit">
|
||
保存
|
||
</Button>
|
||
</Space>
|
||
</Form.Item>
|
||
</Form>
|
||
</Modal>
|
||
|
||
{/* 更改状态弹窗 */}
|
||
<Modal
|
||
title="更改文档状态"
|
||
visible={statusModalVisible}
|
||
onCancel={() => setStatusModalVisible(false)}
|
||
footer={null}
|
||
>
|
||
<Form
|
||
form={statusForm}
|
||
layout="vertical"
|
||
onFinish={handleStatusChange}
|
||
>
|
||
<Form.Item
|
||
name="status"
|
||
label="新状态"
|
||
rules={[{ required: true, message: '请选择状态' }]}
|
||
>
|
||
<Select>
|
||
<Option value="pending">等待处理</Option>
|
||
<Option value="in_progress">翻译中</Option>
|
||
<Option value="completed">已完成</Option>
|
||
<Option value="cancelled">已取消</Option>
|
||
<Option value="failed">翻译失败</Option>
|
||
</Select>
|
||
</Form.Item>
|
||
|
||
<Form.Item style={{ marginBottom: 0, textAlign: 'right' }}>
|
||
<Space>
|
||
<Button onClick={() => setStatusModalVisible(false)}>
|
||
取消
|
||
</Button>
|
||
<Button type="primary" htmlType="submit">
|
||
更新状态
|
||
</Button>
|
||
</Space>
|
||
</Form.Item>
|
||
</Form>
|
||
</Modal>
|
||
|
||
{/* 重新分配译员弹窗 */}
|
||
<Modal
|
||
title="重新分配译员"
|
||
visible={reassignModalVisible}
|
||
onCancel={() => setReassignModalVisible(false)}
|
||
footer={null}
|
||
>
|
||
<Form
|
||
form={reassignForm}
|
||
layout="vertical"
|
||
onFinish={handleReassign}
|
||
>
|
||
<Form.Item
|
||
name="translatorId"
|
||
label="选择译员"
|
||
rules={[{ required: true, message: '请选择译员' }]}
|
||
>
|
||
<Select>
|
||
<Option value="translator_1">李翻译 - 商务专家</Option>
|
||
<Option value="translator_2">王译员 - 技术专家</Option>
|
||
<Option value="translator_3">张翻译 - 法律专家</Option>
|
||
</Select>
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
name="translatorName"
|
||
label="译员姓名"
|
||
rules={[{ required: true, message: '请输入译员姓名' }]}
|
||
>
|
||
<Input />
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
name="reason"
|
||
label="重新分配原因"
|
||
rules={[{ required: true, message: '请输入原因' }]}
|
||
>
|
||
<TextArea rows={3} placeholder="请输入重新分配原因..." />
|
||
</Form.Item>
|
||
|
||
<Form.Item style={{ marginBottom: 0, textAlign: 'right' }}>
|
||
<Space>
|
||
<Button onClick={() => setReassignModalVisible(false)}>
|
||
取消
|
||
</Button>
|
||
<Button type="primary" htmlType="submit">
|
||
确认分配
|
||
</Button>
|
||
</Space>
|
||
</Form.Item>
|
||
</Form>
|
||
</Modal>
|
||
|
||
{/* 重新翻译弹窗 */}
|
||
<Modal
|
||
title="重新翻译"
|
||
visible={retranslateModalVisible}
|
||
onCancel={() => setRetranslateModalVisible(false)}
|
||
footer={null}
|
||
>
|
||
<Form
|
||
form={retranslateForm}
|
||
layout="vertical"
|
||
onFinish={handleRetranslate}
|
||
>
|
||
<Alert
|
||
message="重新翻译提醒"
|
||
description="重新翻译将重置翻译进度，请确认操作"
|
||
type="warning"
|
||
style={{ marginBottom: '16px' }}
|
||
/>
|
||
|
||
<Form.Item
|
||
name="reason"
|
||
label="重新翻译原因"
|
||
rules={[{ required: true, message: '请输入重新翻译原因' }]}
|
||
>
|
||
<TextArea rows={3} placeholder="请输入重新翻译原因..." />
|
||
</Form.Item>
|
||
|
||
<Form.Item style={{ marginBottom: 0, textAlign: 'right' }}>
|
||
<Space>
|
||
<Button onClick={() => setRetranslateModalVisible(false)}>
|
||
取消
|
||
</Button>
|
||
<Button type="primary" danger htmlType="submit">
|
||
确认重新翻译
|
||
</Button>
|
||
</Space>
|
||
</Form.Item>
|
||
</Form>
|
||
</Modal>
|
||
|
||
{/* 退款处理弹窗 */}
|
||
<Modal
|
||
title="处理退款"
|
||
visible={refundModalVisible}
|
||
onCancel={() => setRefundModalVisible(false)}
|
||
footer={null}
|
||
>
|
||
<Form
|
||
form={refundForm}
|
||
layout="vertical"
|
||
onFinish={handleRefund}
|
||
initialValues={{ amount: document.cost }}
|
||
>
|
||
<Alert
|
||
message="退款提醒"
|
||
description={`原支付金额：¥${document.cost.toFixed(2)}`}
|
||
type="info"
|
||
style={{ marginBottom: '16px' }}
|
||
/>
|
||
|
||
<Form.Item
|
||
name="amount"
|
||
label="退款金额"
|
||
rules={[
|
||
{ required: true, message: '请输入退款金额' },
|
||
{ type: 'number', min: 0, max: document.cost, message: `退款金额不能超过¥${document.cost.toFixed(2)}` }
|
||
]}
|
||
>
|
||
<Input type="number" addonAfter="元" />
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
name="reason"
|
||
label="退款原因"
|
||
rules={[{ required: true, message: '请输入退款原因' }]}
|
||
>
|
||
<TextArea rows={3} placeholder="请输入退款原因..." />
|
||
</Form.Item>
|
||
|
||
<Form.Item style={{ marginBottom: 0, textAlign: 'right' }}>
|
||
<Space>
|
||
<Button onClick={() => setRefundModalVisible(false)}>
|
||
取消
|
||
</Button>
|
||
<Button type="primary" danger htmlType="submit">
|
||
确认退款
|
||
</Button>
|
||
</Space>
|
||
</Form.Item>
|
||
</Form>
|
||
</Modal>
|
||
|
||
{/* 添加管理员备注弹窗 */}
|
||
<Modal
|
||
title="添加管理员备注"
|
||
visible={adminNoteModalVisible}
|
||
onCancel={() => setAdminNoteModalVisible(false)}
|
||
footer={null}
|
||
>
|
||
<Form
|
||
form={noteForm}
|
||
layout="vertical"
|
||
onFinish={handleAddAdminNote}
|
||
initialValues={{ note: document.adminNotes }}
|
||
>
|
||
<Form.Item
|
||
name="note"
|
||
label="备注内容"
|
||
rules={[{ required: true, message: '请输入备注内容' }]}
|
||
>
|
||
<TextArea rows={4} placeholder="请输入管理员备注..." />
|
||
</Form.Item>
|
||
|
||
<Form.Item style={{ marginBottom: 0, textAlign: 'right' }}>
|
||
<Space>
|
||
<Button onClick={() => setAdminNoteModalVisible(false)}>
|
||
取消
|
||
</Button>
|
||
<Button type="primary" htmlType="submit">
|
||
保存备注
|
||
</Button>
|
||
</Space>
|
||
</Form.Item>
|
||
</Form>
|
||
</Modal>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default DocumentDetail;
|