|
|
@@ -0,0 +1,685 @@
|
|
|
+import { useState } from 'react';
|
|
|
+import { useQuery } from '@tanstack/react-query';
|
|
|
+import { useForm } from 'react-hook-form';
|
|
|
+import { zodResolver } from '@hookform/resolvers/zod';
|
|
|
+import { format } from 'date-fns';
|
|
|
+import { toast } from 'sonner';
|
|
|
+import { Search, Edit, Eye } from 'lucide-react';
|
|
|
+
|
|
|
+// 使用共享UI组件包的具体路径导入
|
|
|
+import { Button } from '@d8d/shared-ui-components/components/ui/button';
|
|
|
+import { Input } from '@d8d/shared-ui-components/components/ui/input';
|
|
|
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@d8d/shared-ui-components/components/ui/card';
|
|
|
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@d8d/shared-ui-components/components/ui/table';
|
|
|
+import { Badge } from '@d8d/shared-ui-components/components/ui/badge';
|
|
|
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@d8d/shared-ui-components/components/ui/dialog';
|
|
|
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@d8d/shared-ui-components/components/ui/form';
|
|
|
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@d8d/shared-ui-components/components/ui/select';
|
|
|
+import { Textarea } from '@d8d/shared-ui-components/components/ui/textarea';
|
|
|
+import { Skeleton } from '@d8d/shared-ui-components/components/ui/skeleton';
|
|
|
+
|
|
|
+// 简单分页组件
|
|
|
+const DataTablePagination = ({
|
|
|
+ currentPage,
|
|
|
+ pageSize,
|
|
|
+ totalCount,
|
|
|
+ onPageChange
|
|
|
+}: {
|
|
|
+ currentPage: number;
|
|
|
+ pageSize: number;
|
|
|
+ totalCount: number;
|
|
|
+ onPageChange: (page: number, limit: number) => void;
|
|
|
+}) => {
|
|
|
+ const totalPages = Math.ceil(totalCount / pageSize);
|
|
|
+
|
|
|
+ return (
|
|
|
+ <div className="flex items-center justify-between px-2 py-4">
|
|
|
+ <div className="text-sm text-muted-foreground">
|
|
|
+ 共 {totalCount} 条记录
|
|
|
+ </div>
|
|
|
+ <div className="flex items-center space-x-2">
|
|
|
+ <Button
|
|
|
+ variant="outline"
|
|
|
+ size="sm"
|
|
|
+ onClick={() => onPageChange(Math.max(1, currentPage - 1), pageSize)}
|
|
|
+ disabled={currentPage <= 1}
|
|
|
+ >
|
|
|
+ 上一页
|
|
|
+ </Button>
|
|
|
+ <div className="text-sm">
|
|
|
+ 第 {currentPage} 页，共 {totalPages} 页
|
|
|
+ </div>
|
|
|
+ <Button
|
|
|
+ variant="outline"
|
|
|
+ size="sm"
|
|
|
+ onClick={() => onPageChange(Math.min(totalPages, currentPage + 1), pageSize)}
|
|
|
+ disabled={currentPage >= totalPages}
|
|
|
+ >
|
|
|
+ 下一页
|
|
|
+ </Button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+};
|
|
|
+import { adminOrderClient } from '../api';
|
|
|
+import type { InferRequestType, InferResponseType } from 'hono/client';
|
|
|
+import { UpdateOrderDto } from '@d8d/orders-module-mt/schemas';
|
|
|
+
|
|
|
+// 类型定义
|
|
|
+type OrderResponse = InferResponseType<typeof adminOrderClient.$get, 200>['data'][0];
|
|
|
+type UpdateRequest = InferRequestType<typeof adminOrderClient[':id']['$put']>['json'];
|
|
|
+
|
|
|
+// 状态映射
|
|
|
+const orderStatusMap = {
|
|
|
+ 0: { label: '未发货', color: 'warning' },
|
|
|
+ 1: { label: '已发货', color: 'info' },
|
|
|
+ 2: { label: '收货成功', color: 'success' },
|
|
|
+ 3: { label: '已退货', color: 'destructive' },
|
|
|
+} as const;
|
|
|
+
|
|
|
+const payStatusMap = {
|
|
|
+ 0: { label: '未支付', color: 'warning' },
|
|
|
+ 1: { label: '支付中', color: 'info' },
|
|
|
+ 2: { label: '支付成功', color: 'success' },
|
|
|
+ 3: { label: '已退款', color: 'secondary' },
|
|
|
+ 4: { label: '支付失败', color: 'destructive' },
|
|
|
+ 5: { label: '订单关闭', color: 'destructive' },
|
|
|
+} as const;
|
|
|
+
|
|
|
+const orderTypeMap = {
|
|
|
+ 1: { label: '实物订单', color: 'default' },
|
|
|
+ 2: { label: '虚拟订单', color: 'secondary' },
|
|
|
+} as const;
|
|
|
+
|
|
|
+export const OrderManagement = () => {
|
|
|
+ const [searchParams, setSearchParams] = useState({
|
|
|
+ page: 1,
|
|
|
+ limit: 10,
|
|
|
+ search: '',
|
|
|
+ status: 'all',
|
|
|
+ payStatus: 'all',
|
|
|
+ });
|
|
|
+ const [isModalOpen, setIsModalOpen] = useState(false);
|
|
|
+ const [editingOrder, setEditingOrder] = useState<OrderResponse | null>(null);
|
|
|
+ const [detailModalOpen, setDetailModalOpen] = useState(false);
|
|
|
+ const [selectedOrder, setSelectedOrder] = useState<OrderResponse | null>(null);
|
|
|
+
|
|
|
+ // 表单实例
|
|
|
+ const updateForm = useForm<UpdateRequest>({
|
|
|
+ resolver: zodResolver(UpdateOrderDto),
|
|
|
+ defaultValues: {},
|
|
|
+ });
|
|
|
+
|
|
|
+ // 数据查询
|
|
|
+ const { data, isLoading, refetch } = useQuery({
|
|
|
+ queryKey: ['orders', searchParams],
|
|
|
+ queryFn: async () => {
|
|
|
+ const filters: any = {};
|
|
|
+
|
|
|
+ if (searchParams.status !== 'all') {
|
|
|
+ filters.state = parseInt(searchParams.status);
|
|
|
+ }
|
|
|
+
|
|
|
+ if (searchParams.payStatus !== 'all') {
|
|
|
+ filters.payState = parseInt(searchParams.payStatus);
|
|
|
+ }
|
|
|
+
|
|
|
+ const res = await adminOrderClient.$get({
|
|
|
+ query: {
|
|
|
+ page: searchParams.page,
|
|
|
+ pageSize: searchParams.limit,
|
|
|
+ keyword: searchParams.search,
|
|
|
+ ...(Object.keys(filters).length > 0 && { filters: JSON.stringify(filters) }),
|
|
|
+ }
|
|
|
+ });
|
|
|
+ if (res.status !== 200) throw new Error('获取订单列表失败');
|
|
|
+ return await res.json();
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // 处理搜索
|
|
|
+ const handleSearch = () => {
|
|
|
+ setSearchParams(prev => ({ ...prev, page: 1 }));
|
|
|
+ };
|
|
|
+
|
|
|
+ // 处理编辑订单
|
|
|
+ const handleEditOrder = (order: OrderResponse) => {
|
|
|
+ setEditingOrder(order);
|
|
|
+ updateForm.reset({
|
|
|
+ state: order.state,
|
|
|
+ payState: order.payState,
|
|
|
+ remark: order.remark || '',
|
|
|
+ });
|
|
|
+ setIsModalOpen(true);
|
|
|
+ };
|
|
|
+
|
|
|
+ // 处理查看详情
|
|
|
+ const handleViewDetails = (order: OrderResponse) => {
|
|
|
+ setSelectedOrder(order);
|
|
|
+ setDetailModalOpen(true);
|
|
|
+ };
|
|
|
+
|
|
|
+ // 处理更新订单
|
|
|
+ const handleUpdateSubmit = async (data: UpdateRequest) => {
|
|
|
+ if (!editingOrder) return;
|
|
|
+
|
|
|
+ try {
|
|
|
+ const res = await adminOrderClient[':id']['$put']({
|
|
|
+ param: { id: editingOrder.id.toString() },
|
|
|
+ json: data,
|
|
|
+ });
|
|
|
+
|
|
|
+ if (res.status === 200) {
|
|
|
+ toast.success('订单更新成功');
|
|
|
+ setIsModalOpen(false);
|
|
|
+ refetch();
|
|
|
+ } else {
|
|
|
+ const error = await res.json();
|
|
|
+ toast.error(error.message || '更新失败');
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error('更新订单失败:', error);
|
|
|
+ toast.error('更新失败，请重试');
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ // 格式化金额
|
|
|
+ const formatAmount = (amount: number) => {
|
|
|
+ return `¥${amount.toFixed(2)}`;
|
|
|
+ };
|
|
|
+
|
|
|
+ // 获取状态颜色
|
|
|
+ const getStatusBadge = (status: number, type: 'order' | 'pay') => {
|
|
|
+ const map = type === 'order' ? orderStatusMap : payStatusMap;
|
|
|
+ const config = map[status as keyof typeof map] || { label: '未知', color: 'default' };
|
|
|
+
|
|
|
+ return <Badge variant={config.color as any}>{config.label}</Badge>;
|
|
|
+ };
|
|
|
+
|
|
|
+ // 骨架屏 - 只覆盖表格区域，搜索区域保持可用
|
|
|
+ if (isLoading) {
|
|
|
+ return (
|
|
|
+ <div className="space-y-4">
|
|
|
+ {/* 页面标题 */}
|
|
|
+ <div className="flex justify-between items-center">
|
|
|
+ <div>
|
|
|
+ <h1 className="text-2xl font-bold">订单管理</h1>
|
|
|
+ <p className="text-muted-foreground">管理所有订单信息</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {/* 搜索区域 - 保持可用 */}
|
|
|
+ <Card>
|
|
|
+ <CardHeader>
|
|
|
+ <CardTitle>订单列表</CardTitle>
|
|
|
+ <CardDescription>查看和管理所有订单</CardDescription>
|
|
|
+ </CardHeader>
|
|
|
+ <CardContent>
|
|
|
+ <div className="flex gap-4 mb-4">
|
|
|
+ <div className="relative flex-1 max-w-sm">
|
|
|
+ <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
|
|
|
+ <Input
|
|
|
+ placeholder="搜索订单号、手机号、收货人姓名..."
|
|
|
+ value={searchParams.search}
|
|
|
+ onChange={(e) => setSearchParams(prev => ({ ...prev, search: e.target.value }))}
|
|
|
+ className="pl-8"
|
|
|
+ data-testid="order-search-input"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <Select
|
|
|
+ value={searchParams.status}
|
|
|
+ onValueChange={(value) => setSearchParams(prev => ({ ...prev, status: value, page: 1 }))}
|
|
|
+ >
|
|
|
+ <SelectTrigger className="w-32" data-testid="order-status-select">
|
|
|
+ <SelectValue placeholder="订单状态" />
|
|
|
+ </SelectTrigger>
|
|
|
+ <SelectContent>
|
|
|
+ <SelectItem value="all">全部</SelectItem>
|
|
|
+ <SelectItem value="0">未发货</SelectItem>
|
|
|
+ <SelectItem value="1">已发货</SelectItem>
|
|
|
+ <SelectItem value="2">收货成功</SelectItem>
|
|
|
+ <SelectItem value="3">已退货</SelectItem>
|
|
|
+ </SelectContent>
|
|
|
+ </Select>
|
|
|
+ <Select
|
|
|
+ value={searchParams.payStatus}
|
|
|
+ onValueChange={(value) => setSearchParams(prev => ({ ...prev, payStatus: value, page: 1 }))}
|
|
|
+ >
|
|
|
+ <SelectTrigger className="w-32" data-testid="order-pay-status-select">
|
|
|
+ <SelectValue placeholder="支付状态" />
|
|
|
+ </SelectTrigger>
|
|
|
+ <SelectContent>
|
|
|
+ <SelectItem value="all">全部</SelectItem>
|
|
|
+ <SelectItem value="0">未支付</SelectItem>
|
|
|
+ <SelectItem value="1">支付中</SelectItem>
|
|
|
+ <SelectItem value="2">支付成功</SelectItem>
|
|
|
+ <SelectItem value="3">已退款</SelectItem>
|
|
|
+ <SelectItem value="4">支付失败</SelectItem>
|
|
|
+ <SelectItem value="5">订单关闭</SelectItem>
|
|
|
+ </SelectContent>
|
|
|
+ </Select>
|
|
|
+ <Button onClick={handleSearch} data-testid="order-search-button">
|
|
|
+ <Search className="h-4 w-4 mr-2" />
|
|
|
+ 搜索
|
|
|
+ </Button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {/* 表格骨架屏 */}
|
|
|
+ <div className="rounded-md border">
|
|
|
+ <Table>
|
|
|
+ <TableHeader>
|
|
|
+ <TableRow>
|
|
|
+ <TableHead>订单号</TableHead>
|
|
|
+ <TableHead>用户信息</TableHead>
|
|
|
+ <TableHead>收货人</TableHead>
|
|
|
+ <TableHead>金额</TableHead>
|
|
|
+ <TableHead>订单状态</TableHead>
|
|
|
+ <TableHead>支付状态</TableHead>
|
|
|
+ <TableHead>创建时间</TableHead>
|
|
|
+ <TableHead className="text-right">操作</TableHead>
|
|
|
+ </TableRow>
|
|
|
+ </TableHeader>
|
|
|
+ <TableBody>
|
|
|
+ {[...Array(5)].map((_, i) => (
|
|
|
+ <TableRow key={i}>
|
|
|
+ <TableCell>
|
|
|
+ <Skeleton className="h-4 w-32" />
|
|
|
+ </TableCell>
|
|
|
+ <TableCell>
|
|
|
+ <Skeleton className="h-4 w-24" />
|
|
|
+ </TableCell>
|
|
|
+ <TableCell>
|
|
|
+ <Skeleton className="h-4 w-20" />
|
|
|
+ </TableCell>
|
|
|
+ <TableCell>
|
|
|
+ <Skeleton className="h-4 w-16" />
|
|
|
+ </TableCell>
|
|
|
+ <TableCell>
|
|
|
+ <Skeleton className="h-6 w-16" />
|
|
|
+ </TableCell>
|
|
|
+ <TableCell>
|
|
|
+ <Skeleton className="h-6 w-16" />
|
|
|
+ </TableCell>
|
|
|
+ <TableCell>
|
|
|
+ <Skeleton className="h-4 w-24" />
|
|
|
+ </TableCell>
|
|
|
+ <TableCell className="text-right">
|
|
|
+ <div className="flex justify-end gap-2">
|
|
|
+ <Skeleton className="h-8 w-8" />
|
|
|
+ <Skeleton className="h-8 w-8" />
|
|
|
+ </div>
|
|
|
+ </TableCell>
|
|
|
+ </TableRow>
|
|
|
+ ))}
|
|
|
+ </TableBody>
|
|
|
+ </Table>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {/* 分页骨架屏 */}
|
|
|
+ <div className="flex items-center justify-between px-2 py-4">
|
|
|
+ <Skeleton className="h-4 w-32" />
|
|
|
+ <div className="flex items-center space-x-2">
|
|
|
+ <Skeleton className="h-8 w-16" />
|
|
|
+ <Skeleton className="h-4 w-24" />
|
|
|
+ <Skeleton className="h-8 w-16" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </CardContent>
|
|
|
+ </Card>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
+ return (
|
|
|
+ <div className="space-y-4">
|
|
|
+ {/* 页面标题 */}
|
|
|
+ <div className="flex justify-between items-center">
|
|
|
+ <div>
|
|
|
+ <h1 className="text-2xl font-bold">订单管理</h1>
|
|
|
+ <p className="text-muted-foreground">管理所有订单信息</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {/* 搜索区域 */}
|
|
|
+ <Card>
|
|
|
+ <CardHeader>
|
|
|
+ <CardTitle>订单列表</CardTitle>
|
|
|
+ <CardDescription>查看和管理所有订单</CardDescription>
|
|
|
+ </CardHeader>
|
|
|
+ <CardContent>
|
|
|
+ <div className="flex gap-4 mb-4">
|
|
|
+ <div className="relative flex-1 max-w-sm">
|
|
|
+ <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
|
|
|
+ <Input
|
|
|
+ placeholder="搜索订单号、手机号、收货人姓名..."
|
|
|
+ value={searchParams.search}
|
|
|
+ onChange={(e) => setSearchParams(prev => ({ ...prev, search: e.target.value }))}
|
|
|
+ className="pl-8"
|
|
|
+ data-testid="order-search-input"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <Select
|
|
|
+ value={searchParams.status}
|
|
|
+ onValueChange={(value) => setSearchParams(prev => ({ ...prev, status: value, page: 1 }))}
|
|
|
+ >
|
|
|
+ <SelectTrigger className="w-32" data-testid="order-status-select">
|
|
|
+ <SelectValue placeholder="订单状态" />
|
|
|
+ </SelectTrigger>
|
|
|
+ <SelectContent>
|
|
|
+ <SelectItem value="all">全部</SelectItem>
|
|
|
+ <SelectItem value="0">未发货</SelectItem>
|
|
|
+ <SelectItem value="1">已发货</SelectItem>
|
|
|
+ <SelectItem value="2">收货成功</SelectItem>
|
|
|
+ <SelectItem value="3">已退货</SelectItem>
|
|
|
+ </SelectContent>
|
|
|
+ </Select>
|
|
|
+ <Select
|
|
|
+ value={searchParams.payStatus}
|
|
|
+ onValueChange={(value) => setSearchParams(prev => ({ ...prev, payStatus: value, page: 1 }))}
|
|
|
+ >
|
|
|
+ <SelectTrigger className="w-32" data-testid="order-pay-status-select">
|
|
|
+ <SelectValue placeholder="支付状态" />
|
|
|
+ </SelectTrigger>
|
|
|
+ <SelectContent>
|
|
|
+ <SelectItem value="all">全部</SelectItem>
|
|
|
+ <SelectItem value="0">未支付</SelectItem>
|
|
|
+ <SelectItem value="1">支付中</SelectItem>
|
|
|
+ <SelectItem value="2">支付成功</SelectItem>
|
|
|
+ <SelectItem value="3">已退款</SelectItem>
|
|
|
+ <SelectItem value="4">支付失败</SelectItem>
|
|
|
+ <SelectItem value="5">订单关闭</SelectItem>
|
|
|
+ </SelectContent>
|
|
|
+ </Select>
|
|
|
+ <Button onClick={handleSearch} data-testid="order-search-button">
|
|
|
+ <Search className="h-4 w-4 mr-2" />
|
|
|
+ 搜索
|
|
|
+ </Button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {/* 数据表格 */}
|
|
|
+ <div className="rounded-md border">
|
|
|
+ <Table>
|
|
|
+ <TableHeader>
|
|
|
+ <TableRow>
|
|
|
+ <TableHead>订单号</TableHead>
|
|
|
+ <TableHead>用户信息</TableHead>
|
|
|
+ <TableHead>收货人</TableHead>
|
|
|
+ <TableHead>金额</TableHead>
|
|
|
+ <TableHead>订单状态</TableHead>
|
|
|
+ <TableHead>支付状态</TableHead>
|
|
|
+ <TableHead>创建时间</TableHead>
|
|
|
+ <TableHead className="text-right">操作</TableHead>
|
|
|
+ </TableRow>
|
|
|
+ </TableHeader>
|
|
|
+ <TableBody>
|
|
|
+ {data?.data.map((order) => (
|
|
|
+ <TableRow key={order.id}>
|
|
|
+ <TableCell>
|
|
|
+ <div>
|
|
|
+ <p className="font-medium">{order.orderNo}</p>
|
|
|
+ <p className="text-sm text-muted-foreground">
|
|
|
+ {orderTypeMap[order.orderType as keyof typeof orderTypeMap]?.label}
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </TableCell>
|
|
|
+ <TableCell>
|
|
|
+ <div>
|
|
|
+ <p>{order.user?.username || '-'}</p>
|
|
|
+ <p className="text-sm text-muted-foreground">{order.userPhone}</p>
|
|
|
+ </div>
|
|
|
+ </TableCell>
|
|
|
+ <TableCell>
|
|
|
+ <div>
|
|
|
+ <p>{order.recevierName || '-'}</p>
|
|
|
+ <p className="text-sm text-muted-foreground">{order.receiverMobile}</p>
|
|
|
+ </div>
|
|
|
+ </TableCell>
|
|
|
+ <TableCell>
|
|
|
+ <div>
|
|
|
+ <p className="font-medium">{formatAmount(order.payAmount)}</p>
|
|
|
+ <p className="text-sm text-muted-foreground">{formatAmount(order.amount)}</p>
|
|
|
+ </div>
|
|
|
+ </TableCell>
|
|
|
+ <TableCell>{getStatusBadge(order.state, 'order')}</TableCell>
|
|
|
+ <TableCell>{getStatusBadge(order.payState, 'pay')}</TableCell>
|
|
|
+ <TableCell>
|
|
|
+ {format(new Date(order.createdAt), 'yyyy-MM-dd HH:mm')}
|
|
|
+ </TableCell>
|
|
|
+ <TableCell className="text-right">
|
|
|
+ <div className="flex justify-end gap-2">
|
|
|
+ <Button
|
|
|
+ variant="ghost"
|
|
|
+ size="icon"
|
|
|
+ onClick={() => handleViewDetails(order)}
|
|
|
+ data-testid="order-view-button"
|
|
|
+ >
|
|
|
+ <Eye className="h-4 w-4" />
|
|
|
+ </Button>
|
|
|
+ <Button
|
|
|
+ variant="ghost"
|
|
|
+ size="icon"
|
|
|
+ onClick={() => handleEditOrder(order)}
|
|
|
+ data-testid="order-edit-button"
|
|
|
+ >
|
|
|
+ <Edit className="h-4 w-4" />
|
|
|
+ </Button>
|
|
|
+ </div>
|
|
|
+ </TableCell>
|
|
|
+ </TableRow>
|
|
|
+ ))}
|
|
|
+ </TableBody>
|
|
|
+ </Table>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {data?.data.length === 0 && !isLoading && (
|
|
|
+ <div className="text-center py-8">
|
|
|
+ <p className="text-muted-foreground">暂无订单数据</p>
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+
|
|
|
+ <DataTablePagination
|
|
|
+ currentPage={searchParams.page}
|
|
|
+ pageSize={searchParams.limit}
|
|
|
+ totalCount={data?.pagination.total || 0}
|
|
|
+ onPageChange={(page, limit) => setSearchParams(prev => ({ ...prev, page, limit }))}
|
|
|
+ />
|
|
|
+ </CardContent>
|
|
|
+ </Card>
|
|
|
+
|
|
|
+ {/* 编辑订单模态框 */}
|
|
|
+ <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
|
|
|
+ <DialogContent className="sm:max-w-[500px] max-h-[90vh] overflow-y-auto">
|
|
|
+ <DialogHeader>
|
|
|
+ <DialogTitle>编辑订单</DialogTitle>
|
|
|
+ <DialogDescription>更新订单状态和备注信息</DialogDescription>
|
|
|
+ </DialogHeader>
|
|
|
+
|
|
|
+ <Form {...updateForm}>
|
|
|
+ <form onSubmit={updateForm.handleSubmit(handleUpdateSubmit)} className="space-y-4">
|
|
|
+ <FormField
|
|
|
+ control={updateForm.control}
|
|
|
+ name="state"
|
|
|
+ render={({ field }) => (
|
|
|
+ <FormItem>
|
|
|
+ <FormLabel>订单状态</FormLabel>
|
|
|
+ <Select onValueChange={(value) => field.onChange(parseInt(value))} value={field.value?.toString()}>
|
|
|
+ <FormControl>
|
|
|
+ <SelectTrigger data-testid="edit-order-status-select">
|
|
|
+ <SelectValue placeholder="选择订单状态" />
|
|
|
+ </SelectTrigger>
|
|
|
+ </FormControl>
|
|
|
+ <SelectContent>
|
|
|
+ <SelectItem value="0">未发货</SelectItem>
|
|
|
+ <SelectItem value="1">已发货</SelectItem>
|
|
|
+ <SelectItem value="2">收货成功</SelectItem>
|
|
|
+ <SelectItem value="3">已退货</SelectItem>
|
|
|
+ </SelectContent>
|
|
|
+ </Select>
|
|
|
+ <FormMessage />
|
|
|
+ </FormItem>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+
|
|
|
+ <FormField
|
|
|
+ control={updateForm.control}
|
|
|
+ name="payState"
|
|
|
+ render={({ field }) => (
|
|
|
+ <FormItem>
|
|
|
+ <FormLabel>支付状态</FormLabel>
|
|
|
+ <Select onValueChange={(value) => field.onChange(parseInt(value))} value={field.value?.toString()}>
|
|
|
+ <FormControl>
|
|
|
+ <SelectTrigger data-testid="edit-pay-status-select">
|
|
|
+ <SelectValue placeholder="选择支付状态" />
|
|
|
+ </SelectTrigger>
|
|
|
+ </FormControl>
|
|
|
+ <SelectContent>
|
|
|
+ <SelectItem value="0">未支付</SelectItem>
|
|
|
+ <SelectItem value="1">支付中</SelectItem>
|
|
|
+ <SelectItem value="2">支付成功</SelectItem>
|
|
|
+ <SelectItem value="3">已退款</SelectItem>
|
|
|
+ <SelectItem value="4">支付失败</SelectItem>
|
|
|
+ <SelectItem value="5">订单关闭</SelectItem>
|
|
|
+ </SelectContent>
|
|
|
+ </Select>
|
|
|
+ <FormMessage />
|
|
|
+ </FormItem>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+
|
|
|
+ <FormField
|
|
|
+ control={updateForm.control}
|
|
|
+ name="remark"
|
|
|
+ render={({ field }) => (
|
|
|
+ <FormItem>
|
|
|
+ <FormLabel>管理员备注</FormLabel>
|
|
|
+ <FormControl>
|
|
|
+ <Textarea
|
|
|
+ placeholder="输入管理员备注信息..."
|
|
|
+ className="resize-none"
|
|
|
+ data-testid="edit-remark-textarea"
|
|
|
+ {...field}
|
|
|
+ />
|
|
|
+ </FormControl>
|
|
|
+ <FormMessage />
|
|
|
+ </FormItem>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+
|
|
|
+ <DialogFooter>
|
|
|
+ <Button type="button" variant="outline" onClick={() => setIsModalOpen(false)}>
|
|
|
+ 取消
|
|
|
+ </Button>
|
|
|
+ <Button type="submit" data-testid="order-save-button">保存</Button>
|
|
|
+ </DialogFooter>
|
|
|
+ </form>
|
|
|
+ </Form>
|
|
|
+ </DialogContent>
|
|
|
+ </Dialog>
|
|
|
+
|
|
|
+ {/* 订单详情模态框 */}
|
|
|
+ <Dialog open={detailModalOpen} onOpenChange={setDetailModalOpen}>
|
|
|
+ <DialogContent className="sm:max-w-[700px] max-h-[90vh] overflow-y-auto">
|
|
|
+ <DialogHeader>
|
|
|
+ <DialogTitle>订单详情</DialogTitle>
|
|
|
+ <DialogDescription>查看订单的详细信息</DialogDescription>
|
|
|
+ </DialogHeader>
|
|
|
+
|
|
|
+ {selectedOrder && (
|
|
|
+ <div className="space-y-4">
|
|
|
+ <div className="grid grid-cols-2 gap-4">
|
|
|
+ <div>
|
|
|
+ <h4 className="font-medium mb-2">订单信息</h4>
|
|
|
+ <div className="space-y-2 text-sm">
|
|
|
+ <div className="flex justify-between">
|
|
|
+ <span className="text-muted-foreground">订单号:</span>
|
|
|
+ <span>{selectedOrder.orderNo}</span>
|
|
|
+ </div>
|
|
|
+ <div className="flex justify-between">
|
|
|
+ <span className="text-muted-foreground">订单类型:</span>
|
|
|
+ <span>{orderTypeMap[selectedOrder.orderType as keyof typeof orderTypeMap]?.label}</span>
|
|
|
+ </div>
|
|
|
+ <div className="flex justify-between">
|
|
|
+ <span className="text-muted-foreground">订单金额:</span>
|
|
|
+ <span>{formatAmount(selectedOrder.amount)}</span>
|
|
|
+ </div>
|
|
|
+ <div className="flex justify-between">
|
|
|
+ <span className="text-muted-foreground">实付金额:</span>
|
|
|
+ <span>{formatAmount(selectedOrder.payAmount)}</span>
|
|
|
+ </div>
|
|
|
+ <div className="flex justify-between">
|
|
|
+ <span className="text-muted-foreground">运费:</span>
|
|
|
+ <span>{formatAmount(selectedOrder.freightAmount)}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div>
|
|
|
+ <h4 className="font-medium mb-2">状态信息</h4>
|
|
|
+ <div className="space-y-2 text-sm">
|
|
|
+ <div className="flex justify-between">
|
|
|
+ <span className="text-muted-foreground">订单状态:</span>
|
|
|
+ <span>{getStatusBadge(selectedOrder.state, 'order')}</span>
|
|
|
+ </div>
|
|
|
+ <div className="flex justify-between">
|
|
|
+ <span className="text-muted-foreground">支付状态:</span>
|
|
|
+ <span>{getStatusBadge(selectedOrder.payState, 'pay')}</span>
|
|
|
+ </div>
|
|
|
+ <div className="flex justify-between">
|
|
|
+ <span className="text-muted-foreground">支付方式:</span>
|
|
|
+ <span>{selectedOrder.payType === 1 ? '积分' : selectedOrder.payType === 2 ? '礼券' : '未选择'}</span>
|
|
|
+ </div>
|
|
|
+ <div className="flex justify-between">
|
|
|
+ <span className="text-muted-foreground">创建时间:</span>
|
|
|
+ <span>{format(new Date(selectedOrder.createdAt), 'yyyy-MM-dd HH:mm')}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div className="grid grid-cols-2 gap-4">
|
|
|
+ <div>
|
|
|
+ <h4 className="font-medium mb-2">用户信息</h4>
|
|
|
+ <div className="space-y-2 text-sm">
|
|
|
+ <div className="flex justify-between">
|
|
|
+ <span className="text-muted-foreground">用户名:</span>
|
|
|
+ <span>{selectedOrder.user?.username || '-'}</span>
|
|
|
+ </div>
|
|
|
+ <div className="flex justify-between">
|
|
|
+ <span className="text-muted-foreground">手机号:</span>
|
|
|
+ <span>{selectedOrder.userPhone || '-'}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div>
|
|
|
+ <h4 className="font-medium mb-2">收货信息</h4>
|
|
|
+ <div className="space-y-2 text-sm">
|
|
|
+ <div className="flex justify-between">
|
|
|
+ <span className="text-muted-foreground">收货人:</span>
|
|
|
+ <span>{selectedOrder.recevierName || '-'}</span>
|
|
|
+ </div>
|
|
|
+ <div className="flex justify-between">
|
|
|
+ <span className="text-muted-foreground">手机号:</span>
|
|
|
+ <span>{selectedOrder.receiverMobile || '-'}</span>
|
|
|
+ </div>
|
|
|
+ <div className="flex justify-between">
|
|
|
+ <span className="text-muted-foreground">地址:</span>
|
|
|
+ <span>{selectedOrder.address || '-'}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {selectedOrder.remark && (
|
|
|
+ <div>
|
|
|
+ <h4 className="font-medium mb-2">管理员备注</h4>
|
|
|
+ <p className="text-sm bg-muted p-3 rounded-md">{selectedOrder.remark}</p>
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+ </DialogContent>
|
|
|
+ </Dialog>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+};
|
yourname