|
|
@@ -0,0 +1,728 @@
|
|
|
+import { useState } from 'react'
|
|
|
+import { useQuery, useMutation } from '@tanstack/react-query'
|
|
|
+import { useForm } from 'react-hook-form'
|
|
|
+import { zodResolver } from '@hookform/resolvers/zod'
|
|
|
+import { format } from 'date-fns'
|
|
|
+import { zhCN } from 'date-fns/locale'
|
|
|
+import { toast } from 'sonner'
|
|
|
+import type { InferRequestType, InferResponseType } from 'hono/client'
|
|
|
+import { Plus, Search, Edit, Trash2, Eye } from 'lucide-react'
|
|
|
+
|
|
|
+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, FormDescription, 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 { Skeleton } from '@d8d/shared-ui-components/components/ui/skeleton'
|
|
|
+
|
|
|
+import { merchantClient, merchantClientManager } from '../api/merchantClient'
|
|
|
+import { AdminCreateMerchantDto, AdminUpdateMerchantDto } from '@d8d/merchant-module/schemas'
|
|
|
+
|
|
|
+// 使用RPC方式提取类型
|
|
|
+type CreateMerchantRequest = InferRequestType<typeof merchantClient.index.$post>['json']
|
|
|
+type UpdateMerchantRequest = InferRequestType<typeof merchantClient[':id']['$put']>['json']
|
|
|
+type MerchantResponse = InferResponseType<typeof merchantClient.index.$get, 200>['data'][0]
|
|
|
+
|
|
|
+// 直接使用后端定义的 schema
|
|
|
+const createFormSchema = AdminCreateMerchantDto
|
|
|
+const updateFormSchema = AdminUpdateMerchantDto
|
|
|
+
|
|
|
+
|
|
|
+// 商户状态类型
|
|
|
+export enum MerchantState {
|
|
|
+ ENABLED = 1,
|
|
|
+ DISABLED = 2
|
|
|
+}
|
|
|
+
|
|
|
+// 商户状态映射
|
|
|
+export const MerchantStateMap = {
|
|
|
+ [MerchantState.ENABLED]: '启用',
|
|
|
+ [MerchantState.DISABLED]: '禁用'
|
|
|
+} as const
|
|
|
+
|
|
|
+// 商户状态徽章变体映射
|
|
|
+export const MerchantStateBadgeVariantMap = {
|
|
|
+ [MerchantState.ENABLED]: 'default' as const,
|
|
|
+ [MerchantState.DISABLED]: 'secondary' as const
|
|
|
+} as const
|
|
|
+
|
|
|
+// 搜索参数类型
|
|
|
+interface MerchantSearchParams {
|
|
|
+ page: number
|
|
|
+ limit: number
|
|
|
+ search: string
|
|
|
+}
|
|
|
+
|
|
|
+export const MerchantManagement = () => {
|
|
|
+
|
|
|
+ const [searchParams, setSearchParams] = useState<MerchantSearchParams>({
|
|
|
+ page: 1,
|
|
|
+ limit: 10,
|
|
|
+ search: '',
|
|
|
+ })
|
|
|
+
|
|
|
+ const [isModalOpen, setIsModalOpen] = useState(false)
|
|
|
+ const [editingMerchant, setEditingMerchant] = useState<MerchantResponse | null>(null)
|
|
|
+ const [isCreateForm, setIsCreateForm] = useState(true)
|
|
|
+ const [deleteDialogOpen, setDeleteDialogOpen] = useState(false)
|
|
|
+ const [merchantToDelete, setMerchantToDelete] = useState<number | null>(null)
|
|
|
+ const [detailDialogOpen, setDetailDialogOpen] = useState(false)
|
|
|
+ const [detailMerchant, setDetailMerchant] = useState<MerchantResponse | null>(null)
|
|
|
+
|
|
|
+ // 创建表单
|
|
|
+ const createForm = useForm<CreateMerchantRequest>({
|
|
|
+ resolver: zodResolver(createFormSchema),
|
|
|
+ defaultValues: {
|
|
|
+ name: '',
|
|
|
+ username: '',
|
|
|
+ password: '',
|
|
|
+ phone: '',
|
|
|
+ realname: '',
|
|
|
+ state: 2,
|
|
|
+ rsaPublicKey: '',
|
|
|
+ aesKey: '',
|
|
|
+ },
|
|
|
+ })
|
|
|
+
|
|
|
+ // 更新表单
|
|
|
+ const updateForm = useForm<UpdateMerchantRequest>({
|
|
|
+ resolver: zodResolver(updateFormSchema),
|
|
|
+ })
|
|
|
+
|
|
|
+ // 获取商户列表
|
|
|
+ const { data, isLoading, refetch } = useQuery({
|
|
|
+ queryKey: ['merchants', searchParams],
|
|
|
+ queryFn: async () => {
|
|
|
+ const res = await merchantClientManager.get().index.$get({
|
|
|
+ query: {
|
|
|
+ page: searchParams.page,
|
|
|
+ pageSize: searchParams.limit,
|
|
|
+ keyword: searchParams.search,
|
|
|
+ }
|
|
|
+ })
|
|
|
+ if (res.status !== 200) throw new Error('获取商户列表失败')
|
|
|
+ return await res.json()
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ // 创建商户
|
|
|
+ const createMutation = useMutation({
|
|
|
+ mutationFn: async (data: CreateMerchantRequest) => {
|
|
|
+ const res = await merchantClientManager.get().index.$post({ json: data })
|
|
|
+ if (res.status !== 201) throw new Error('创建商户失败')
|
|
|
+ return await res.json()
|
|
|
+ },
|
|
|
+ onSuccess: () => {
|
|
|
+ toast.success('商户创建成功')
|
|
|
+ setIsModalOpen(false)
|
|
|
+ createForm.reset()
|
|
|
+ refetch()
|
|
|
+ },
|
|
|
+ onError: (error: Error) => {
|
|
|
+ toast.error(error.message || '创建失败')
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ // 更新商户
|
|
|
+ const updateMutation = useMutation({
|
|
|
+ mutationFn: async ({ id, data }: { id: number; data: UpdateMerchantRequest }) => {
|
|
|
+ const res = await merchantClientManager.get()[':id']['$put']({
|
|
|
+ param: { id },
|
|
|
+ json: data
|
|
|
+ })
|
|
|
+ if (res.status !== 200) throw new Error('更新商户失败')
|
|
|
+ return await res.json()
|
|
|
+ },
|
|
|
+ onSuccess: () => {
|
|
|
+ toast.success('商户更新成功')
|
|
|
+ setIsModalOpen(false)
|
|
|
+ setEditingMerchant(null)
|
|
|
+ refetch()
|
|
|
+ },
|
|
|
+ onError: (error: Error) => {
|
|
|
+ toast.error(error.message || '更新失败')
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ // 删除商户
|
|
|
+ const deleteMutation = useMutation({
|
|
|
+ mutationFn: async (id: number) => {
|
|
|
+ const res = await merchantClientManager.get()[':id']['$delete']({
|
|
|
+ param: { id }
|
|
|
+ })
|
|
|
+ if (res.status !== 204) throw new Error('删除商户失败')
|
|
|
+ return res
|
|
|
+ },
|
|
|
+ onSuccess: () => {
|
|
|
+ toast.success('商户删除成功')
|
|
|
+ setDeleteDialogOpen(false)
|
|
|
+ setMerchantToDelete(null)
|
|
|
+ refetch()
|
|
|
+ },
|
|
|
+ onError: (error: Error) => {
|
|
|
+ toast.error(error.message || '删除失败')
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ // 搜索处理
|
|
|
+ const handleSearch = (e?: React.FormEvent) => {
|
|
|
+ e?.preventDefault()
|
|
|
+ setSearchParams(prev => ({ ...prev, page: 1 }))
|
|
|
+ }
|
|
|
+
|
|
|
+ // 创建商户
|
|
|
+ const handleCreateMerchant = () => {
|
|
|
+ setIsCreateForm(true)
|
|
|
+ setEditingMerchant(null)
|
|
|
+ createForm.reset()
|
|
|
+ setIsModalOpen(true)
|
|
|
+ }
|
|
|
+
|
|
|
+ // 编辑商户
|
|
|
+ const handleEditMerchant = (merchant: MerchantResponse) => {
|
|
|
+ setIsCreateForm(false)
|
|
|
+ setEditingMerchant(merchant)
|
|
|
+ updateForm.reset({
|
|
|
+ name: merchant.name || '',
|
|
|
+ username: merchant.username,
|
|
|
+ phone: merchant.phone || '',
|
|
|
+ realname: merchant.realname || '',
|
|
|
+ state: merchant.state,
|
|
|
+ rsaPublicKey: merchant.rsaPublicKey || '',
|
|
|
+ aesKey: merchant.aesKey || '',
|
|
|
+ })
|
|
|
+ setIsModalOpen(true)
|
|
|
+ }
|
|
|
+
|
|
|
+ // 查看详情
|
|
|
+ const handleViewDetail = (merchant: MerchantResponse) => {
|
|
|
+ setDetailMerchant(merchant)
|
|
|
+ setDetailDialogOpen(true)
|
|
|
+ }
|
|
|
+
|
|
|
+ // 删除商户
|
|
|
+ const handleDeleteMerchant = (id: number) => {
|
|
|
+ setMerchantToDelete(id)
|
|
|
+ setDeleteDialogOpen(true)
|
|
|
+ }
|
|
|
+
|
|
|
+ // 确认删除
|
|
|
+ const confirmDelete = () => {
|
|
|
+ if (merchantToDelete) {
|
|
|
+ deleteMutation.mutate(merchantToDelete)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 提交表单
|
|
|
+ const handleSubmit = (data: CreateMerchantRequest | UpdateMerchantRequest) => {
|
|
|
+ if (isCreateForm) {
|
|
|
+ createMutation.mutate(data as CreateMerchantRequest)
|
|
|
+ } else if (editingMerchant) {
|
|
|
+ updateMutation.mutate({ id: editingMerchant.id, data: data as UpdateMerchantRequest })
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 状态文本
|
|
|
+ const getStateText = (state: number) => {
|
|
|
+ return MerchantStateMap[state as MerchantState] || '未知'
|
|
|
+ }
|
|
|
+
|
|
|
+ const getStateBadgeVariant = (state: number) => {
|
|
|
+ return MerchantStateBadgeVariantMap[state as MerchantState] || 'secondary'
|
|
|
+ }
|
|
|
+
|
|
|
+ // 渲染加载骨架
|
|
|
+ if (isLoading) {
|
|
|
+ return (
|
|
|
+ <div className="space-y-4">
|
|
|
+ <div className="flex justify-between items-center">
|
|
|
+ <Skeleton className="h-8 w-48" />
|
|
|
+ <Skeleton className="h-10 w-32" />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <Card>
|
|
|
+ <CardContent className="pt-6">
|
|
|
+ <div className="space-y-3">
|
|
|
+ {[...Array(5)].map((_, i) => (
|
|
|
+ <div key={i} className="flex gap-4">
|
|
|
+ <Skeleton className="h-10 flex-1" />
|
|
|
+ <Skeleton className="h-10 flex-1" />
|
|
|
+ <Skeleton className="h-10 flex-1" />
|
|
|
+ <Skeleton className="h-10 w-20" />
|
|
|
+ </div>
|
|
|
+ ))}
|
|
|
+ </div>
|
|
|
+ </CardContent>
|
|
|
+ </Card>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ }
|
|
|
+
|
|
|
+ return (
|
|
|
+ <div className="space-y-4">
|
|
|
+ {/* 页面标题 */}
|
|
|
+ <div className="flex justify-between items-center">
|
|
|
+ <h1 className="text-2xl font-bold">商户管理</h1>
|
|
|
+ <Button onClick={handleCreateMerchant} data-testid="create-merchant-button">
|
|
|
+ <Plus className="mr-2 h-4 w-4" />
|
|
|
+ 创建商户
|
|
|
+ </Button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {/* 搜索区域 */}
|
|
|
+ <Card>
|
|
|
+ <CardHeader>
|
|
|
+ <CardTitle>商户列表</CardTitle>
|
|
|
+ <CardDescription>管理所有商户账户信息</CardDescription>
|
|
|
+ </CardHeader>
|
|
|
+ <CardContent>
|
|
|
+ <form onSubmit={handleSearch} className="flex gap-2 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"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <Button type="submit" variant="outline" data-testid="search-button">
|
|
|
+ 搜索
|
|
|
+ </Button>
|
|
|
+ </form>
|
|
|
+
|
|
|
+ {/* 数据表格 */}
|
|
|
+ <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((merchant) => (
|
|
|
+ <TableRow key={merchant.id}>
|
|
|
+ <TableCell>{merchant.name || '-'}</TableCell>
|
|
|
+ <TableCell>{merchant.username}</TableCell>
|
|
|
+ <TableCell>{merchant.realname || '-'}</TableCell>
|
|
|
+ <TableCell>{merchant.phone || '-'}</TableCell>
|
|
|
+ <TableCell>
|
|
|
+ <Badge variant={getStateBadgeVariant(merchant.state)}>
|
|
|
+ {getStateText(merchant.state)}
|
|
|
+ </Badge>
|
|
|
+ </TableCell>
|
|
|
+ <TableCell>{merchant.loginNum}</TableCell>
|
|
|
+ <TableCell>
|
|
|
+ {format(new Date(merchant.createdAt), 'yyyy-MM-dd HH:mm', { locale: zhCN })}
|
|
|
+ </TableCell>
|
|
|
+ <TableCell className="text-right">
|
|
|
+ <div className="flex justify-end gap-2">
|
|
|
+ <Button
|
|
|
+ variant="ghost"
|
|
|
+ size="icon"
|
|
|
+ onClick={() => handleViewDetail(merchant)}
|
|
|
+ title="查看详情"
|
|
|
+ data-testid={`view-detail-button-${merchant.id}`}
|
|
|
+ >
|
|
|
+ <Eye className="h-4 w-4" />
|
|
|
+ </Button>
|
|
|
+ <Button
|
|
|
+ variant="ghost"
|
|
|
+ size="icon"
|
|
|
+ onClick={() => handleEditMerchant(merchant)}
|
|
|
+ title="编辑"
|
|
|
+ data-testid={`edit-button-${merchant.id}`}
|
|
|
+ >
|
|
|
+ <Edit className="h-4 w-4" />
|
|
|
+ </Button>
|
|
|
+ <Button
|
|
|
+ variant="ghost"
|
|
|
+ size="icon"
|
|
|
+ onClick={() => handleDeleteMerchant(merchant.id)}
|
|
|
+ title="删除"
|
|
|
+ className="text-destructive hover:text-destructive"
|
|
|
+ data-testid={`delete-button-${merchant.id}`}
|
|
|
+ >
|
|
|
+ <Trash2 className="h-4 w-4" />
|
|
|
+ </Button>
|
|
|
+ </div>
|
|
|
+ </TableCell>
|
|
|
+ </TableRow>
|
|
|
+ ))}
|
|
|
+ </TableBody>
|
|
|
+ </Table>
|
|
|
+
|
|
|
+ {data?.data.length === 0 && !isLoading && (
|
|
|
+ <div className="text-center py-8">
|
|
|
+ <p className="text-muted-foreground">暂无数据</p>
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {/* 简单分页 */}
|
|
|
+ <div className="flex items-center justify-between mt-4">
|
|
|
+ <div className="text-sm text-muted-foreground">
|
|
|
+ 共 {data?.pagination.total || 0} 条记录
|
|
|
+ </div>
|
|
|
+ <div className="flex gap-2">
|
|
|
+ <Button
|
|
|
+ variant="outline"
|
|
|
+ size="sm"
|
|
|
+ disabled={searchParams.page <= 1}
|
|
|
+ onClick={() => setSearchParams(prev => ({ ...prev, page: prev.page - 1 }))}
|
|
|
+ data-testid="prev-page-button"
|
|
|
+ >
|
|
|
+ 上一页
|
|
|
+ </Button>
|
|
|
+ <Button
|
|
|
+ variant="outline"
|
|
|
+ size="sm"
|
|
|
+ disabled={searchParams.page >= Math.ceil((data?.pagination.total || 0) / searchParams.limit)}
|
|
|
+ onClick={() => setSearchParams(prev => ({ ...prev, page: prev.page + 1 }))}
|
|
|
+ data-testid="next-page-button"
|
|
|
+ >
|
|
|
+ 下一页
|
|
|
+ </Button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </CardContent>
|
|
|
+ </Card>
|
|
|
+
|
|
|
+ {/* 创建/编辑对话框 */}
|
|
|
+ <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
|
|
|
+ <DialogContent className="sm:max-w-[600px] max-h-[90vh] overflow-y-auto">
|
|
|
+ <DialogHeader>
|
|
|
+ <DialogTitle>{isCreateForm ? '创建商户' : '编辑商户'}</DialogTitle>
|
|
|
+ <DialogDescription>
|
|
|
+ {isCreateForm ? '创建一个新的商户账户' : '编辑现有商户信息'}
|
|
|
+ </DialogDescription>
|
|
|
+ </DialogHeader>
|
|
|
+
|
|
|
+ {isCreateForm ? (
|
|
|
+ <Form {...createForm}>
|
|
|
+ <form onSubmit={createForm.handleSubmit(handleSubmit)} className="space-y-4">
|
|
|
+ <FormField
|
|
|
+ control={createForm.control}
|
|
|
+ name="name"
|
|
|
+ render={({ field }) => (
|
|
|
+ <FormItem>
|
|
|
+ <FormLabel>商户名称</FormLabel>
|
|
|
+ <FormControl>
|
|
|
+ <Input placeholder="请输入商户名称" {...field} />
|
|
|
+ </FormControl>
|
|
|
+ <FormMessage />
|
|
|
+ </FormItem>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+
|
|
|
+ <FormField
|
|
|
+ control={createForm.control}
|
|
|
+ name="username"
|
|
|
+ render={({ field }) => (
|
|
|
+ <FormItem>
|
|
|
+ <FormLabel>用户名 <span className="text-red-500">*</span></FormLabel>
|
|
|
+ <FormControl>
|
|
|
+ <Input placeholder="请输入用户名" {...field} />
|
|
|
+ </FormControl>
|
|
|
+ <FormMessage />
|
|
|
+ </FormItem>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+
|
|
|
+ <FormField
|
|
|
+ control={createForm.control}
|
|
|
+ name="password"
|
|
|
+ render={({ field }) => (
|
|
|
+ <FormItem>
|
|
|
+ <FormLabel>密码 <span className="text-red-500">*</span></FormLabel>
|
|
|
+ <FormControl>
|
|
|
+ <Input type="password" placeholder="请输入密码" {...field} />
|
|
|
+ </FormControl>
|
|
|
+ <FormMessage />
|
|
|
+ </FormItem>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+
|
|
|
+ <FormField
|
|
|
+ control={createForm.control}
|
|
|
+ name="phone"
|
|
|
+ render={({ field }) => (
|
|
|
+ <FormItem>
|
|
|
+ <FormLabel>手机号</FormLabel>
|
|
|
+ <FormControl>
|
|
|
+ <Input placeholder="请输入手机号" {...field} />
|
|
|
+ </FormControl>
|
|
|
+ <FormMessage />
|
|
|
+ </FormItem>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+
|
|
|
+ <FormField
|
|
|
+ control={createForm.control}
|
|
|
+ name="realname"
|
|
|
+ render={({ field }) => (
|
|
|
+ <FormItem>
|
|
|
+ <FormLabel>姓名</FormLabel>
|
|
|
+ <FormControl>
|
|
|
+ <Input placeholder="请输入姓名" {...field} />
|
|
|
+ </FormControl>
|
|
|
+ <FormMessage />
|
|
|
+ </FormItem>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+
|
|
|
+ <FormField
|
|
|
+ control={createForm.control}
|
|
|
+ name="state"
|
|
|
+ render={({ field }) => (
|
|
|
+ <FormItem>
|
|
|
+ <FormLabel>状态</FormLabel>
|
|
|
+ <Select onValueChange={(value) => field.onChange(parseInt(value))} defaultValue={field.value?.toString()}>
|
|
|
+ <FormControl>
|
|
|
+ <SelectTrigger>
|
|
|
+ <SelectValue placeholder="请选择状态" />
|
|
|
+ </SelectTrigger>
|
|
|
+ </FormControl>
|
|
|
+ <SelectContent>
|
|
|
+ <SelectItem value="1">启用</SelectItem>
|
|
|
+ <SelectItem value="2">禁用</SelectItem>
|
|
|
+ </SelectContent>
|
|
|
+ </Select>
|
|
|
+ <FormMessage />
|
|
|
+ </FormItem>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+
|
|
|
+ <DialogFooter>
|
|
|
+ <Button type="button" variant="outline" onClick={() => setIsModalOpen(false)}>
|
|
|
+ 取消
|
|
|
+ </Button>
|
|
|
+ <Button type="submit" disabled={createMutation.isPending} data-testid="create-submit-button">
|
|
|
+ 创建
|
|
|
+ </Button>
|
|
|
+ </DialogFooter>
|
|
|
+ </form>
|
|
|
+ </Form>
|
|
|
+ ) : (
|
|
|
+ <Form {...updateForm}>
|
|
|
+ <form onSubmit={updateForm.handleSubmit(handleSubmit)} className="space-y-4">
|
|
|
+ <FormField
|
|
|
+ control={updateForm.control}
|
|
|
+ name="name"
|
|
|
+ render={({ field }) => (
|
|
|
+ <FormItem>
|
|
|
+ <FormLabel>商户名称</FormLabel>
|
|
|
+ <FormControl>
|
|
|
+ <Input placeholder="请输入商户名称" {...field} />
|
|
|
+ </FormControl>
|
|
|
+ <FormMessage />
|
|
|
+ </FormItem>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+
|
|
|
+ <FormField
|
|
|
+ control={updateForm.control}
|
|
|
+ name="username"
|
|
|
+ render={({ field }) => (
|
|
|
+ <FormItem>
|
|
|
+ <FormLabel>用户名</FormLabel>
|
|
|
+ <FormControl>
|
|
|
+ <Input placeholder="请输入用户名" {...field} />
|
|
|
+ </FormControl>
|
|
|
+ <FormMessage />
|
|
|
+ </FormItem>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+
|
|
|
+ <FormField
|
|
|
+ control={updateForm.control}
|
|
|
+ name="phone"
|
|
|
+ render={({ field }) => (
|
|
|
+ <FormItem>
|
|
|
+ <FormLabel>手机号</FormLabel>
|
|
|
+ <FormControl>
|
|
|
+ <Input placeholder="请输入手机号" {...field} />
|
|
|
+ </FormControl>
|
|
|
+ <FormMessage />
|
|
|
+ </FormItem>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+
|
|
|
+ <FormField
|
|
|
+ control={updateForm.control}
|
|
|
+ name="realname"
|
|
|
+ render={({ field }) => (
|
|
|
+ <FormItem>
|
|
|
+ <FormLabel>姓名</FormLabel>
|
|
|
+ <FormControl>
|
|
|
+ <Input placeholder="请输入姓名" {...field} />
|
|
|
+ </FormControl>
|
|
|
+ <FormMessage />
|
|
|
+ </FormItem>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+
|
|
|
+ <FormField
|
|
|
+ control={updateForm.control}
|
|
|
+ name="password"
|
|
|
+ render={({ field }) => (
|
|
|
+ <FormItem>
|
|
|
+ <FormLabel>密码（留空则不修改）</FormLabel>
|
|
|
+ <FormControl>
|
|
|
+ <Input type="password" placeholder="请输入新密码" {...field} />
|
|
|
+ </FormControl>
|
|
|
+ <FormDescription>如果不修改密码，请留空</FormDescription>
|
|
|
+ <FormMessage />
|
|
|
+ </FormItem>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+
|
|
|
+ <FormField
|
|
|
+ control={updateForm.control}
|
|
|
+ name="state"
|
|
|
+ render={({ field }) => (
|
|
|
+ <FormItem>
|
|
|
+ <FormLabel>状态</FormLabel>
|
|
|
+ <Select onValueChange={(value) => field.onChange(parseInt(value))} value={field.value?.toString()}>
|
|
|
+ <FormControl>
|
|
|
+ <SelectTrigger>
|
|
|
+ <SelectValue placeholder="请选择状态" />
|
|
|
+ </SelectTrigger>
|
|
|
+ </FormControl>
|
|
|
+ <SelectContent>
|
|
|
+ <SelectItem value="1">启用</SelectItem>
|
|
|
+ <SelectItem value="2">禁用</SelectItem>
|
|
|
+ </SelectContent>
|
|
|
+ </Select>
|
|
|
+ <FormMessage />
|
|
|
+ </FormItem>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+
|
|
|
+ <DialogFooter>
|
|
|
+ <Button type="button" variant="outline" onClick={() => setIsModalOpen(false)}>
|
|
|
+ 取消
|
|
|
+ </Button>
|
|
|
+ <Button type="submit" disabled={updateMutation.isPending} data-testid="update-submit-button">
|
|
|
+ 更新
|
|
|
+ </Button>
|
|
|
+ </DialogFooter>
|
|
|
+ </form>
|
|
|
+ </Form>
|
|
|
+ )}
|
|
|
+ </DialogContent>
|
|
|
+ </Dialog>
|
|
|
+
|
|
|
+ {/* 详情对话框 */}
|
|
|
+ <Dialog open={detailDialogOpen} onOpenChange={setDetailDialogOpen}>
|
|
|
+ <DialogContent className="sm:max-w-[500px]">
|
|
|
+ <DialogHeader>
|
|
|
+ <DialogTitle>商户详情</DialogTitle>
|
|
|
+ <DialogDescription>查看商户详细信息</DialogDescription>
|
|
|
+ </DialogHeader>
|
|
|
+
|
|
|
+ {detailMerchant && (
|
|
|
+ <div className="space-y-4">
|
|
|
+ <div className="grid grid-cols-2 gap-4">
|
|
|
+ <div>
|
|
|
+ <label className="text-sm font-medium">商户名称</label>
|
|
|
+ <p className="text-sm text-muted-foreground">{detailMerchant.name || '-'}</p>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <label className="text-sm font-medium">用户名</label>
|
|
|
+ <p className="text-sm text-muted-foreground">{detailMerchant.username}</p>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <label className="text-sm font-medium">姓名</label>
|
|
|
+ <p className="text-sm text-muted-foreground">{detailMerchant.realname || '-'}</p>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <label className="text-sm font-medium">手机号</label>
|
|
|
+ <p className="text-sm text-muted-foreground">{detailMerchant.phone || '-'}</p>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <label className="text-sm font-medium">状态</label>
|
|
|
+ <p className="text-sm">
|
|
|
+ <Badge variant={getStateBadgeVariant(detailMerchant.state)}>
|
|
|
+ {getStateText(detailMerchant.state)}
|
|
|
+ </Badge>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <label className="text-sm font-medium">登录次数</label>
|
|
|
+ <p className="text-sm text-muted-foreground">{detailMerchant.loginNum}</p>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <label className="text-sm font-medium">创建时间</label>
|
|
|
+ <p className="text-sm text-muted-foreground">
|
|
|
+ {format(new Date(detailMerchant.createdAt), 'yyyy-MM-dd HH:mm', { locale: zhCN })}
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <label className="text-sm font-medium">更新时间</label>
|
|
|
+ <p className="text-sm text-muted-foreground">
|
|
|
+ {format(new Date(detailMerchant.updatedAt), 'yyyy-MM-dd HH:mm', { locale: zhCN })}
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {detailMerchant.lastLoginTime > 0 && (
|
|
|
+ <div>
|
|
|
+ <label className="text-sm font-medium">最后登录时间</label>
|
|
|
+ <p className="text-sm text-muted-foreground">
|
|
|
+ {format(new Date(detailMerchant.lastLoginTime * 1000), 'yyyy-MM-dd HH:mm', { locale: zhCN })}
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+
|
|
|
+ {detailMerchant.lastLoginIp && (
|
|
|
+ <div>
|
|
|
+ <label className="text-sm font-medium">最后登录IP</label>
|
|
|
+ <p className="text-sm text-muted-foreground">{detailMerchant.lastLoginIp}</p>
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+
|
|
|
+ <DialogFooter>
|
|
|
+ <Button onClick={() => setDetailDialogOpen(false)}>关闭</Button>
|
|
|
+ </DialogFooter>
|
|
|
+ </DialogContent>
|
|
|
+ </Dialog>
|
|
|
+
|
|
|
+ {/* 删除确认对话框 */}
|
|
|
+ <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
|
|
|
+ <DialogContent>
|
|
|
+ <DialogHeader>
|
|
|
+ <DialogTitle>确认删除</DialogTitle>
|
|
|
+ <DialogDescription>
|
|
|
+ 确定要删除这个商户吗？此操作无法撤销。
|
|
|
+ </DialogDescription>
|
|
|
+ </DialogHeader>
|
|
|
+ <DialogFooter>
|
|
|
+ <Button variant="outline" onClick={() => setDeleteDialogOpen(false)}>
|
|
|
+ 取消
|
|
|
+ </Button>
|
|
|
+ <Button
|
|
|
+ variant="destructive"
|
|
|
+ onClick={confirmDelete}
|
|
|
+ disabled={deleteMutation.isPending}
|
|
|
+ >
|
|
|
+ 删除
|
|
|
+ </Button>
|
|
|
+ </DialogFooter>
|
|
|
+ </DialogContent>
|
|
|
+ </Dialog>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+}
|
yourname