mars
1ba859196a
- 修复DashboardLayout中的退出登录函数，确保清除所有认证信息 - 恢复_app.tsx中的认证逻辑，确保仪表盘页面需要登录访问 - 完善退出登录流程：清除本地存储 -> 调用登出API -> 重定向到登录页面 - 添加错误边界组件提升用户体验 - 优化React水合错误处理 - 添加JWT令牌验证API - 完善各个仪表盘页面的功能和样式
1031 lines
41 KiB
TypeScript
1031 lines
41 KiB
TypeScript
import { useState, useEffect } from 'react';
|
||
import { useRouter } from 'next/router';
|
||
import Head from 'next/head';
|
||
import DashboardLayout from '../../components/Layout/DashboardLayout';
|
||
import { toast } from 'react-hot-toast';
|
||
import {
|
||
MagnifyingGlassIcon,
|
||
PlusIcon,
|
||
EyeIcon,
|
||
PencilIcon,
|
||
TrashIcon,
|
||
ClockIcon,
|
||
CheckCircleIcon,
|
||
XCircleIcon,
|
||
ExclamationTriangleIcon,
|
||
ArrowDownTrayIcon,
|
||
PhoneIcon,
|
||
VideoCameraIcon,
|
||
UserIcon,
|
||
LanguageIcon,
|
||
CalendarIcon,
|
||
CurrencyDollarIcon,
|
||
DocumentTextIcon,
|
||
PlayIcon,
|
||
PauseIcon,
|
||
StopIcon,
|
||
XMarkIcon
|
||
} from '@heroicons/react/24/outline';
|
||
import { getDemoData } from '../../lib/demo-data';
|
||
import { formatTime } from '../../lib/utils';
|
||
|
||
interface Order {
|
||
id: string;
|
||
order_number: string;
|
||
user_name: string;
|
||
user_email: string;
|
||
interpreter_name: string;
|
||
language_pair: string;
|
||
service_type: 'audio' | 'video' | 'onsite';
|
||
start_time: string;
|
||
end_time?: string;
|
||
duration?: number;
|
||
status: 'pending' | 'confirmed' | 'in_progress' | 'completed' | 'cancelled' | 'failed';
|
||
amount: number;
|
||
payment_status: 'pending' | 'paid' | 'failed' | 'refunded';
|
||
notes?: string;
|
||
created_at: string;
|
||
updated_at: string;
|
||
}
|
||
|
||
interface OrderFilters {
|
||
search: string;
|
||
status: string;
|
||
service_type: string;
|
||
payment_status: string;
|
||
date_range: string;
|
||
}
|
||
|
||
export default function Orders() {
|
||
const router = useRouter();
|
||
const [orders, setOrders] = useState<Order[]>([]);
|
||
const [loading, setLoading] = useState(true);
|
||
const [selectedOrders, setSelectedOrders] = useState<string[]>([]);
|
||
const [currentPage, setCurrentPage] = useState(1);
|
||
const [totalPages, setTotalPages] = useState(1);
|
||
const [totalCount, setTotalCount] = useState(0);
|
||
const [filters, setFilters] = useState<OrderFilters>({
|
||
search: '',
|
||
status: '',
|
||
service_type: '',
|
||
payment_status: '',
|
||
date_range: ''
|
||
});
|
||
|
||
// 添加模态框状态
|
||
const [showCreateOrderModal, setShowCreateOrderModal] = useState(false);
|
||
const [newOrder, setNewOrder] = useState({
|
||
user_name: '',
|
||
user_email: '',
|
||
interpreter_name: '',
|
||
language_pair: '',
|
||
service_type: 'audio' as 'audio' | 'video' | 'onsite',
|
||
start_time: '',
|
||
duration: 60,
|
||
amount: 0,
|
||
notes: ''
|
||
});
|
||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||
|
||
const pageSize = 10;
|
||
|
||
useEffect(() => {
|
||
fetchOrders();
|
||
}, [currentPage, filters]);
|
||
|
||
const fetchOrders = async () => {
|
||
try {
|
||
setLoading(true);
|
||
|
||
// 模拟加载延迟
|
||
await new Promise(resolve => setTimeout(resolve, 800));
|
||
|
||
// 使用演示数据
|
||
const mockOrders: Order[] = [
|
||
{
|
||
id: '1',
|
||
order_number: 'ORD-2024-001',
|
||
user_name: '张先生',
|
||
user_email: 'zhang@example.com',
|
||
interpreter_name: '王翻译',
|
||
language_pair: '中文 ↔ 英文',
|
||
service_type: 'video',
|
||
start_time: '2024-01-20T14:00:00Z',
|
||
end_time: '2024-01-20T15:30:00Z',
|
||
duration: 90,
|
||
status: 'completed',
|
||
amount: 450,
|
||
payment_status: 'paid',
|
||
notes: '商务会议翻译，需要专业术语支持',
|
||
created_at: '2024-01-19T10:00:00Z',
|
||
updated_at: '2024-01-20T15:30:00Z'
|
||
},
|
||
{
|
||
id: '2',
|
||
order_number: 'ORD-2024-002',
|
||
user_name: '李女士',
|
||
user_email: 'li@example.com',
|
||
interpreter_name: '陈口译',
|
||
language_pair: '中文 ↔ 日文',
|
||
service_type: 'audio',
|
||
start_time: '2024-01-21T09:00:00Z',
|
||
status: 'confirmed',
|
||
amount: 300,
|
||
payment_status: 'paid',
|
||
notes: '医疗咨询翻译',
|
||
created_at: '2024-01-20T08:00:00Z',
|
||
updated_at: '2024-01-20T08:30:00Z'
|
||
},
|
||
{
|
||
id: '3',
|
||
order_number: 'ORD-2024-003',
|
||
user_name: '王总',
|
||
user_email: 'wangzong@example.com',
|
||
interpreter_name: '刘同传',
|
||
language_pair: '中文 ↔ 英文',
|
||
service_type: 'onsite',
|
||
start_time: '2024-01-22T10:00:00Z',
|
||
end_time: '2024-01-22T16:00:00Z',
|
||
duration: 360,
|
||
status: 'in_progress',
|
||
amount: 1800,
|
||
payment_status: 'paid',
|
||
notes: '大型会议同声传译',
|
||
created_at: '2024-01-18T15:00:00Z',
|
||
updated_at: '2024-01-22T10:00:00Z'
|
||
},
|
||
{
|
||
id: '4',
|
||
order_number: 'ORD-2024-004',
|
||
user_name: '赵经理',
|
||
user_email: 'zhao@example.com',
|
||
interpreter_name: '李专家',
|
||
language_pair: '中文 ↔ 韩文',
|
||
service_type: 'video',
|
||
start_time: '2024-01-20T16:00:00Z',
|
||
status: 'cancelled',
|
||
amount: 200,
|
||
payment_status: 'refunded',
|
||
notes: '客户临时取消',
|
||
created_at: '2024-01-19T12:00:00Z',
|
||
updated_at: '2024-01-20T14:00:00Z'
|
||
},
|
||
{
|
||
id: '5',
|
||
order_number: 'ORD-2024-005',
|
||
user_name: '孙先生',
|
||
user_email: 'sun@example.com',
|
||
interpreter_name: '张语言',
|
||
language_pair: '中文 ↔ 德文',
|
||
service_type: 'audio',
|
||
start_time: '2024-01-23T13:00:00Z',
|
||
status: 'pending',
|
||
amount: 250,
|
||
payment_status: 'pending',
|
||
notes: '技术文档翻译咨询',
|
||
created_at: '2024-01-20T16:00:00Z',
|
||
updated_at: '2024-01-20T16:00:00Z'
|
||
},
|
||
{
|
||
id: '6',
|
||
order_number: 'ORD-2024-006',
|
||
user_name: '周女士',
|
||
user_email: 'zhou@example.com',
|
||
interpreter_name: '赵技术',
|
||
language_pair: '中文 ↔ 英文',
|
||
service_type: 'video',
|
||
start_time: '2024-01-19T11:00:00Z',
|
||
end_time: '2024-01-19T12:00:00Z',
|
||
duration: 60,
|
||
status: 'failed',
|
||
amount: 200,
|
||
payment_status: 'failed',
|
||
notes: '技术问题导致服务中断',
|
||
created_at: '2024-01-18T20:00:00Z',
|
||
updated_at: '2024-01-19T12:00:00Z'
|
||
}
|
||
];
|
||
|
||
// 应用过滤器
|
||
let filteredOrders = mockOrders;
|
||
|
||
if (filters.search) {
|
||
filteredOrders = filteredOrders.filter(order =>
|
||
order.order_number.toLowerCase().includes(filters.search.toLowerCase()) ||
|
||
order.user_name.toLowerCase().includes(filters.search.toLowerCase()) ||
|
||
order.user_email.toLowerCase().includes(filters.search.toLowerCase()) ||
|
||
order.interpreter_name.toLowerCase().includes(filters.search.toLowerCase()) ||
|
||
order.language_pair.toLowerCase().includes(filters.search.toLowerCase())
|
||
);
|
||
}
|
||
|
||
if (filters.status) {
|
||
filteredOrders = filteredOrders.filter(order => order.status === filters.status);
|
||
}
|
||
|
||
if (filters.service_type) {
|
||
filteredOrders = filteredOrders.filter(order => order.service_type === filters.service_type);
|
||
}
|
||
|
||
if (filters.payment_status) {
|
||
filteredOrders = filteredOrders.filter(order => order.payment_status === filters.payment_status);
|
||
}
|
||
|
||
// 分页
|
||
const startIndex = (currentPage - 1) * pageSize;
|
||
const endIndex = startIndex + pageSize;
|
||
const paginatedOrders = filteredOrders.slice(startIndex, endIndex);
|
||
|
||
setOrders(paginatedOrders);
|
||
setTotalCount(filteredOrders.length);
|
||
setTotalPages(Math.ceil(filteredOrders.length / pageSize));
|
||
|
||
} catch (error) {
|
||
console.error('Failed to fetch orders:', error);
|
||
toast.error('加载订单失败');
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
const handleSearch = (value: string) => {
|
||
setFilters(prev => ({ ...prev, search: value }));
|
||
setCurrentPage(1);
|
||
};
|
||
|
||
const handleFilterChange = (key: keyof OrderFilters, value: string) => {
|
||
setFilters(prev => ({ ...prev, [key]: value }));
|
||
setCurrentPage(1);
|
||
};
|
||
|
||
const handleSelectOrder = (orderId: string) => {
|
||
setSelectedOrders(prev =>
|
||
prev.includes(orderId)
|
||
? prev.filter(id => id !== orderId)
|
||
: [...prev, orderId]
|
||
);
|
||
};
|
||
|
||
const handleSelectAll = () => {
|
||
if (selectedOrders.length === orders.length) {
|
||
setSelectedOrders([]);
|
||
} else {
|
||
setSelectedOrders(orders.map(order => order.id));
|
||
}
|
||
};
|
||
|
||
const handleBulkAction = async (action: 'confirm' | 'cancel' | 'delete') => {
|
||
if (selectedOrders.length === 0) {
|
||
toast.error('请选择要操作的订单');
|
||
return;
|
||
}
|
||
|
||
try {
|
||
const actionText = action === 'confirm' ? '确认' : action === 'cancel' ? '取消' : '删除';
|
||
toast.loading(`正在${actionText}订单...`, { id: 'bulk-action' });
|
||
|
||
// 模拟操作延迟
|
||
await new Promise(resolve => setTimeout(resolve, 1500));
|
||
|
||
toast.success(`成功${actionText} ${selectedOrders.length} 个订单`, { id: 'bulk-action' });
|
||
setSelectedOrders([]);
|
||
fetchOrders();
|
||
} catch (error) {
|
||
toast.error('操作失败', { id: 'bulk-action' });
|
||
}
|
||
};
|
||
|
||
const handleExport = async () => {
|
||
try {
|
||
toast.loading('正在导出订单数据...', { id: 'export' });
|
||
|
||
// 模拟导出延迟
|
||
await new Promise(resolve => setTimeout(resolve, 2000));
|
||
|
||
toast.success('订单数据导出成功', { id: 'export' });
|
||
} catch (error) {
|
||
toast.error('导出失败', { id: 'export' });
|
||
}
|
||
};
|
||
|
||
const getStatusColor = (status: string) => {
|
||
switch (status) {
|
||
case 'completed':
|
||
return 'text-green-800 bg-green-100';
|
||
case 'confirmed':
|
||
return 'text-blue-800 bg-blue-100';
|
||
case 'in_progress':
|
||
return 'text-yellow-800 bg-yellow-100';
|
||
case 'pending':
|
||
return 'text-gray-800 bg-gray-100';
|
||
case 'cancelled':
|
||
return 'text-red-800 bg-red-100';
|
||
case 'failed':
|
||
return 'text-red-800 bg-red-100';
|
||
default:
|
||
return 'text-gray-800 bg-gray-100';
|
||
}
|
||
};
|
||
|
||
const getStatusText = (status: string) => {
|
||
switch (status) {
|
||
case 'completed':
|
||
return '已完成';
|
||
case 'confirmed':
|
||
return '已确认';
|
||
case 'in_progress':
|
||
return '进行中';
|
||
case 'pending':
|
||
return '待确认';
|
||
case 'cancelled':
|
||
return '已取消';
|
||
case 'failed':
|
||
return '失败';
|
||
default:
|
||
return status;
|
||
}
|
||
};
|
||
|
||
const getPaymentStatusColor = (status: string) => {
|
||
switch (status) {
|
||
case 'paid':
|
||
return 'text-green-800 bg-green-100';
|
||
case 'pending':
|
||
return 'text-yellow-800 bg-yellow-100';
|
||
case 'failed':
|
||
return 'text-red-800 bg-red-100';
|
||
case 'refunded':
|
||
return 'text-purple-800 bg-purple-100';
|
||
default:
|
||
return 'text-gray-800 bg-gray-100';
|
||
}
|
||
};
|
||
|
||
const getPaymentStatusText = (status: string) => {
|
||
switch (status) {
|
||
case 'paid':
|
||
return '已支付';
|
||
case 'pending':
|
||
return '待支付';
|
||
case 'failed':
|
||
return '支付失败';
|
||
case 'refunded':
|
||
return '已退款';
|
||
default:
|
||
return status;
|
||
}
|
||
};
|
||
|
||
const getServiceTypeIcon = (type: string) => {
|
||
switch (type) {
|
||
case 'audio':
|
||
return <PhoneIcon className="h-4 w-4 text-blue-500" />;
|
||
case 'video':
|
||
return <VideoCameraIcon className="h-4 w-4 text-green-500" />;
|
||
case 'onsite':
|
||
return <UserIcon className="h-4 w-4 text-purple-500" />;
|
||
default:
|
||
return <PhoneIcon className="h-4 w-4 text-gray-500" />;
|
||
}
|
||
};
|
||
|
||
const getServiceTypeText = (type: string) => {
|
||
switch (type) {
|
||
case 'audio':
|
||
return '语音通话';
|
||
case 'video':
|
||
return '视频通话';
|
||
case 'onsite':
|
||
return '现场翻译';
|
||
default:
|
||
return type;
|
||
}
|
||
};
|
||
|
||
const formatDuration = (minutes?: number) => {
|
||
if (!minutes) return '-';
|
||
const hours = Math.floor(minutes / 60);
|
||
const mins = minutes % 60;
|
||
if (hours > 0) {
|
||
return `${hours}小时${mins}分钟`;
|
||
}
|
||
return `${mins}分钟`;
|
||
};
|
||
|
||
// 创建订单提交函数
|
||
const handleCreateOrder = async (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
setIsSubmitting(true);
|
||
|
||
try {
|
||
// 模拟API调用
|
||
await new Promise(resolve => setTimeout(resolve, 1000));
|
||
|
||
// 创建新订单对象
|
||
const newOrderData: Order = {
|
||
id: Date.now().toString(),
|
||
order_number: `ORD-${Date.now()}`,
|
||
...newOrder,
|
||
status: 'pending',
|
||
payment_status: 'pending',
|
||
created_at: new Date().toISOString(),
|
||
updated_at: new Date().toISOString()
|
||
};
|
||
|
||
// 添加到订单列表
|
||
setOrders(prev => [newOrderData, ...prev]);
|
||
|
||
// 重置表单
|
||
setNewOrder({
|
||
user_name: '',
|
||
user_email: '',
|
||
interpreter_name: '',
|
||
language_pair: '',
|
||
service_type: 'audio',
|
||
start_time: '',
|
||
duration: 60,
|
||
amount: 0,
|
||
notes: ''
|
||
});
|
||
|
||
// 关闭模态框
|
||
setShowCreateOrderModal(false);
|
||
|
||
// 可以添加成功提示
|
||
alert('订单创建成功！');
|
||
|
||
} catch (error) {
|
||
console.error('创建订单失败:', error);
|
||
alert('创建订单失败，请重试');
|
||
} finally {
|
||
setIsSubmitting(false);
|
||
}
|
||
};
|
||
|
||
// 创建订单模态框组件
|
||
const CreateOrderModal = () => (
|
||
<div className={`fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50 ${showCreateOrderModal ? 'block' : 'hidden'}`}>
|
||
<div className="relative top-10 mx-auto p-5 border w-[600px] shadow-lg rounded-md bg-white">
|
||
<div className="flex justify-between items-center mb-4">
|
||
<h3 className="text-lg font-medium text-gray-900">创建新订单</h3>
|
||
<button
|
||
onClick={() => setShowCreateOrderModal(false)}
|
||
className="text-gray-400 hover:text-gray-600"
|
||
>
|
||
<XMarkIcon className="h-6 w-6" />
|
||
</button>
|
||
</div>
|
||
|
||
<form onSubmit={handleCreateOrder} className="space-y-4 max-h-[70vh] overflow-y-auto">
|
||
<div className="grid grid-cols-2 gap-4">
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||
用户姓名 <span className="text-red-500">*</span>
|
||
</label>
|
||
<input
|
||
type="text"
|
||
required
|
||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500"
|
||
value={newOrder.user_name}
|
||
onChange={(e) => setNewOrder({...newOrder, user_name: e.target.value})}
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||
用户邮箱 <span className="text-red-500">*</span>
|
||
</label>
|
||
<input
|
||
type="email"
|
||
required
|
||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500"
|
||
value={newOrder.user_email}
|
||
onChange={(e) => setNewOrder({...newOrder, user_email: e.target.value})}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-2 gap-4">
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||
翻译员姓名 <span className="text-red-500">*</span>
|
||
</label>
|
||
<input
|
||
type="text"
|
||
required
|
||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500"
|
||
value={newOrder.interpreter_name}
|
||
onChange={(e) => setNewOrder({...newOrder, interpreter_name: e.target.value})}
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||
语言对 <span className="text-red-500">*</span>
|
||
</label>
|
||
<input
|
||
type="text"
|
||
required
|
||
placeholder="例如：中文-英文"
|
||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500"
|
||
value={newOrder.language_pair}
|
||
onChange={(e) => setNewOrder({...newOrder, language_pair: e.target.value})}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-2 gap-4">
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||
服务类型 <span className="text-red-500">*</span>
|
||
</label>
|
||
<select
|
||
required
|
||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500"
|
||
value={newOrder.service_type}
|
||
onChange={(e) => setNewOrder({...newOrder, service_type: e.target.value as 'audio' | 'video' | 'onsite'})}
|
||
>
|
||
<option value="audio">语音通话</option>
|
||
<option value="video">视频通话</option>
|
||
<option value="onsite">现场翻译</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||
预计时长 (分钟) <span className="text-red-500">*</span>
|
||
</label>
|
||
<input
|
||
type="number"
|
||
required
|
||
min="15"
|
||
step="15"
|
||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500"
|
||
value={newOrder.duration}
|
||
onChange={(e) => setNewOrder({...newOrder, duration: parseInt(e.target.value) || 60})}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-2 gap-4">
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||
开始时间 <span className="text-red-500">*</span>
|
||
</label>
|
||
<input
|
||
type="datetime-local"
|
||
required
|
||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500"
|
||
value={newOrder.start_time}
|
||
onChange={(e) => setNewOrder({...newOrder, start_time: e.target.value})}
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||
预计费用 (¥) <span className="text-red-500">*</span>
|
||
</label>
|
||
<input
|
||
type="number"
|
||
required
|
||
min="0"
|
||
step="0.01"
|
||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500"
|
||
value={newOrder.amount}
|
||
onChange={(e) => setNewOrder({...newOrder, amount: parseFloat(e.target.value) || 0})}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||
备注信息
|
||
</label>
|
||
<textarea
|
||
rows={3}
|
||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500"
|
||
value={newOrder.notes}
|
||
onChange={(e) => setNewOrder({...newOrder, notes: e.target.value})}
|
||
placeholder="请输入订单相关的备注信息..."
|
||
/>
|
||
</div>
|
||
|
||
<div className="flex justify-end space-x-3 pt-4">
|
||
<button
|
||
type="button"
|
||
onClick={() => setShowCreateOrderModal(false)}
|
||
className="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50"
|
||
>
|
||
取消
|
||
</button>
|
||
<button
|
||
type="submit"
|
||
disabled={isSubmitting}
|
||
className="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 disabled:opacity-50"
|
||
>
|
||
{isSubmitting ? '创建中...' : '创建订单'}
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
);
|
||
|
||
return (
|
||
<>
|
||
<Head>
|
||
<title>订单管理 - 翻译服务管理系统</title>
|
||
</Head>
|
||
|
||
<DashboardLayout title="订单管理">
|
||
<div className="space-y-6">
|
||
{/* 页面标题和操作 */}
|
||
<div className="sm:flex sm:items-center sm:justify-between">
|
||
<div>
|
||
<h1 className="text-2xl font-bold text-gray-900">订单管理</h1>
|
||
<p className="mt-2 text-sm text-gray-700">
|
||
管理所有翻译服务订单，包括订单状态、支付状态和服务详情。
|
||
</p>
|
||
</div>
|
||
<div className="mt-4 sm:mt-0 sm:flex sm:space-x-3">
|
||
<button
|
||
onClick={handleExport}
|
||
className="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50"
|
||
>
|
||
<ArrowDownTrayIcon className="h-4 w-4 mr-2" />
|
||
导出数据
|
||
</button>
|
||
<button
|
||
onClick={() => setShowCreateOrderModal(true)}
|
||
className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700"
|
||
>
|
||
<PlusIcon className="h-4 w-4 mr-2" />
|
||
创建订单
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 搜索和过滤器 */}
|
||
<div className="bg-white shadow rounded-lg p-6">
|
||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-5">
|
||
<div>
|
||
<label htmlFor="search" className="block text-sm font-medium text-gray-700 mb-1">
|
||
搜索
|
||
</label>
|
||
<div className="relative">
|
||
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||
<MagnifyingGlassIcon className="h-5 w-5 text-gray-400" />
|
||
</div>
|
||
<input
|
||
type="text"
|
||
id="search"
|
||
className="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:ring-1 focus:ring-blue-500 focus:border-blue-500"
|
||
placeholder="搜索订单号、用户、翻译员..."
|
||
value={filters.search}
|
||
onChange={(e) => handleSearch(e.target.value)}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<label htmlFor="status" className="block text-sm font-medium text-gray-700 mb-1">
|
||
订单状态
|
||
</label>
|
||
<select
|
||
id="status"
|
||
className="block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
|
||
value={filters.status}
|
||
onChange={(e) => handleFilterChange('status', e.target.value)}
|
||
>
|
||
<option value="">全部状态</option>
|
||
<option value="pending">待确认</option>
|
||
<option value="confirmed">已确认</option>
|
||
<option value="in_progress">进行中</option>
|
||
<option value="completed">已完成</option>
|
||
<option value="cancelled">已取消</option>
|
||
<option value="failed">失败</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div>
|
||
<label htmlFor="service_type" className="block text-sm font-medium text-gray-700 mb-1">
|
||
服务类型
|
||
</label>
|
||
<select
|
||
id="service_type"
|
||
className="block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
|
||
value={filters.service_type}
|
||
onChange={(e) => handleFilterChange('service_type', e.target.value)}
|
||
>
|
||
<option value="">全部类型</option>
|
||
<option value="audio">语音通话</option>
|
||
<option value="video">视频通话</option>
|
||
<option value="onsite">现场翻译</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div>
|
||
<label htmlFor="payment_status" className="block text-sm font-medium text-gray-700 mb-1">
|
||
支付状态
|
||
</label>
|
||
<select
|
||
id="payment_status"
|
||
className="block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
|
||
value={filters.payment_status}
|
||
onChange={(e) => handleFilterChange('payment_status', e.target.value)}
|
||
>
|
||
<option value="">全部状态</option>
|
||
<option value="pending">待支付</option>
|
||
<option value="paid">已支付</option>
|
||
<option value="failed">支付失败</option>
|
||
<option value="refunded">已退款</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div>
|
||
<label htmlFor="date_range" className="block text-sm font-medium text-gray-700 mb-1">
|
||
时间范围
|
||
</label>
|
||
<select
|
||
id="date_range"
|
||
className="block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
|
||
value={filters.date_range}
|
||
onChange={(e) => handleFilterChange('date_range', e.target.value)}
|
||
>
|
||
<option value="">全部时间</option>
|
||
<option value="today">今天</option>
|
||
<option value="week">本周</option>
|
||
<option value="month">本月</option>
|
||
<option value="quarter">本季度</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 批量操作 */}
|
||
{selectedOrders.length > 0 && (
|
||
<div className="bg-white shadow rounded-lg p-4">
|
||
<div className="flex items-center justify-between">
|
||
<span className="text-sm text-gray-700">
|
||
已选择 {selectedOrders.length} 个订单
|
||
</span>
|
||
<div className="flex space-x-2">
|
||
<button
|
||
onClick={() => handleBulkAction('confirm')}
|
||
className="inline-flex items-center px-3 py-1 border border-transparent text-sm leading-4 font-medium rounded-md text-white bg-green-600 hover:bg-green-700"
|
||
>
|
||
确认订单
|
||
</button>
|
||
<button
|
||
onClick={() => handleBulkAction('cancel')}
|
||
className="inline-flex items-center px-3 py-1 border border-transparent text-sm leading-4 font-medium rounded-md text-white bg-yellow-600 hover:bg-yellow-700"
|
||
>
|
||
取消订单
|
||
</button>
|
||
<button
|
||
onClick={() => handleBulkAction('delete')}
|
||
className="inline-flex items-center px-3 py-1 border border-transparent text-sm leading-4 font-medium rounded-md text-white bg-red-600 hover:bg-red-700"
|
||
>
|
||
删除
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* 订单列表 */}
|
||
<div className="bg-white shadow rounded-lg overflow-hidden">
|
||
{loading ? (
|
||
<div className="flex items-center justify-center h-64">
|
||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
|
||
</div>
|
||
) : (
|
||
<>
|
||
<div className="overflow-x-auto">
|
||
<table className="min-w-full divide-y divide-gray-200">
|
||
<thead className="bg-gray-50">
|
||
<tr>
|
||
<th scope="col" className="relative px-6 py-3">
|
||
<input
|
||
type="checkbox"
|
||
className="absolute left-4 top-1/2 -mt-2 h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
|
||
checked={selectedOrders.length === orders.length && orders.length > 0}
|
||
onChange={handleSelectAll}
|
||
/>
|
||
</th>
|
||
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||
订单信息
|
||
</th>
|
||
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||
用户/翻译员
|
||
</th>
|
||
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||
服务详情
|
||
</th>
|
||
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||
时间/时长
|
||
</th>
|
||
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||
状态
|
||
</th>
|
||
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||
金额
|
||
</th>
|
||
<th scope="col" className="relative px-6 py-3">
|
||
<span className="sr-only">操作</span>
|
||
</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody className="bg-white divide-y divide-gray-200">
|
||
{orders.map((order) => (
|
||
<tr key={order.id} className="hover:bg-gray-50">
|
||
<td className="relative px-6 py-4">
|
||
<input
|
||
type="checkbox"
|
||
className="absolute left-4 top-1/2 -mt-2 h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
|
||
checked={selectedOrders.includes(order.id)}
|
||
onChange={() => handleSelectOrder(order.id)}
|
||
/>
|
||
</td>
|
||
<td className="px-6 py-4 whitespace-nowrap">
|
||
<div className="space-y-1">
|
||
<div className="text-sm font-medium text-gray-900">
|
||
{order.order_number}
|
||
</div>
|
||
<div className="text-sm text-gray-500">
|
||
创建于 {formatTime(order.created_at)}
|
||
</div>
|
||
{order.notes && (
|
||
<div className="text-sm text-gray-500 max-w-32 truncate" title={order.notes}>
|
||
备注: {order.notes}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</td>
|
||
<td className="px-6 py-4 whitespace-nowrap">
|
||
<div className="space-y-2">
|
||
<div>
|
||
<div className="text-sm font-medium text-gray-900">
|
||
用户: {order.user_name}
|
||
</div>
|
||
<div className="text-sm text-gray-500">
|
||
{order.user_email}
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div className="text-sm font-medium text-gray-900">
|
||
翻译员: {order.interpreter_name}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td className="px-6 py-4 whitespace-nowrap">
|
||
<div className="space-y-1">
|
||
<div className="flex items-center text-sm text-gray-900">
|
||
{getServiceTypeIcon(order.service_type)}
|
||
<span className="ml-1">{getServiceTypeText(order.service_type)}</span>
|
||
</div>
|
||
<div className="flex items-center text-sm text-gray-500">
|
||
<LanguageIcon className="h-4 w-4 mr-1 text-gray-400" />
|
||
{order.language_pair}
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td className="px-6 py-4 whitespace-nowrap">
|
||
<div className="space-y-1">
|
||
<div className="flex items-center text-sm text-gray-900">
|
||
<CalendarIcon className="h-4 w-4 mr-1 text-gray-400" />
|
||
{new Date(order.start_time).toLocaleString('zh-CN')}
|
||
</div>
|
||
<div className="flex items-center text-sm text-gray-500">
|
||
<ClockIcon className="h-4 w-4 mr-1 text-gray-400" />
|
||
{formatDuration(order.duration)}
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td className="px-6 py-4 whitespace-nowrap">
|
||
<div className="space-y-2">
|
||
<span className={`inline-flex px-2 py-1 text-xs font-semibold rounded-full ${getStatusColor(order.status)}`}>
|
||
{getStatusText(order.status)}
|
||
</span>
|
||
<div>
|
||
<span className={`inline-flex px-2 py-1 text-xs font-semibold rounded-full ${getPaymentStatusColor(order.payment_status)}`}>
|
||
{getPaymentStatusText(order.payment_status)}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td className="px-6 py-4 whitespace-nowrap">
|
||
<div className="flex items-center text-sm font-medium text-gray-900">
|
||
<CurrencyDollarIcon className="h-4 w-4 mr-1 text-gray-400" />
|
||
¥{order.amount}
|
||
</div>
|
||
</td>
|
||
<td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
||
<div className="flex items-center space-x-2">
|
||
<button
|
||
onClick={() => router.push(`/dashboard/orders/${order.id}`)}
|
||
className="text-blue-600 hover:text-blue-900"
|
||
title="查看详情"
|
||
>
|
||
<EyeIcon className="h-4 w-4" />
|
||
</button>
|
||
<button
|
||
onClick={() => router.push(`/dashboard/orders/${order.id}/edit`)}
|
||
className="text-green-600 hover:text-green-900"
|
||
title="编辑"
|
||
>
|
||
<PencilIcon className="h-4 w-4" />
|
||
</button>
|
||
<button
|
||
onClick={() => {
|
||
if (confirm('确定要删除这个订单吗？')) {
|
||
toast.success('订单删除成功');
|
||
fetchOrders();
|
||
}
|
||
}}
|
||
className="text-red-600 hover:text-red-900"
|
||
title="删除"
|
||
>
|
||
<TrashIcon className="h-4 w-4" />
|
||
</button>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
{/* 分页 */}
|
||
{totalPages > 1 && (
|
||
<div className="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
|
||
<div className="flex-1 flex justify-between sm:hidden">
|
||
<button
|
||
onClick={() => setCurrentPage(prev => Math.max(prev - 1, 1))}
|
||
disabled={currentPage === 1}
|
||
className="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
|
||
>
|
||
上一页
|
||
</button>
|
||
<button
|
||
onClick={() => setCurrentPage(prev => Math.min(prev + 1, totalPages))}
|
||
disabled={currentPage === totalPages}
|
||
className="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
|
||
>
|
||
下一页
|
||
</button>
|
||
</div>
|
||
<div className="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
|
||
<div>
|
||
<p className="text-sm text-gray-700">
|
||
显示第 <span className="font-medium">{(currentPage - 1) * pageSize + 1}</span> 到{' '}
|
||
<span className="font-medium">{Math.min(currentPage * pageSize, totalCount)}</span> 项，
|
||
共 <span className="font-medium">{totalCount}</span> 项
|
||
</p>
|
||
</div>
|
||
<div>
|
||
<nav className="relative z-0 inline-flex rounded-md shadow-sm -space-x-px">
|
||
<button
|
||
onClick={() => setCurrentPage(prev => Math.max(prev - 1, 1))}
|
||
disabled={currentPage === 1}
|
||
className="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
|
||
>
|
||
上一页
|
||
</button>
|
||
{Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
|
||
<button
|
||
key={page}
|
||
onClick={() => setCurrentPage(page)}
|
||
className={`relative inline-flex items-center px-4 py-2 border text-sm font-medium ${
|
||
page === currentPage
|
||
? 'z-10 bg-blue-50 border-blue-500 text-blue-600'
|
||
: 'bg-white border-gray-300 text-gray-500 hover:bg-gray-50'
|
||
}`}
|
||
>
|
||
{page}
|
||
</button>
|
||
))}
|
||
<button
|
||
onClick={() => setCurrentPage(prev => Math.min(prev + 1, totalPages))}
|
||
disabled={currentPage === totalPages}
|
||
className="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
|
||
>
|
||
下一页
|
||
</button>
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* 创建订单模态框 */}
|
||
<CreateOrderModal />
|
||
</DashboardLayout>
|
||
</>
|
||
);
|
||
}
|