|
|
@@ -0,0 +1,605 @@
|
|
|
+import { useState } from 'react';
|
|
|
+import { useQuery } from '@tanstack/react-query';
|
|
|
+import { useForm } from 'react-hook-form';
|
|
|
+import { zodResolver } from '@hookform/resolvers/zod';
|
|
|
+import { Plus, Search, Edit, Trash2, Folder } from 'lucide-react';
|
|
|
+import { toast } from 'sonner';
|
|
|
+
|
|
|
+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 { 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 { Badge } from '@d8d/shared-ui-components/components/ui/badge';
|
|
|
+import { FileSelector } from '@d8d/file-management-ui';
|
|
|
+import { goodsCategoryClient, goodsCategoryClientManager } from '../api/goodsCategoryClient';
|
|
|
+import { CreateGoodsCategoryDto, UpdateGoodsCategoryDto } from '@d8d/goods-module/schemas';
|
|
|
+
|
|
|
+import type { InferRequestType, InferResponseType } from 'hono/client';
|
|
|
+
|
|
|
+// 类型定义 - 使用实际的客户端实例
|
|
|
+const client = goodsCategoryClientManager.get();
|
|
|
+type CreateRequest = InferRequestType<typeof client.index.$post>['json'];
|
|
|
+type UpdateRequest = InferRequestType<typeof client[':id']['$put']>['json'];
|
|
|
+type GoodsCategoryResponse = InferResponseType<typeof client.index.$get, 200>['data'][0];
|
|
|
+
|
|
|
+// 表单Schema直接使用后端定义
|
|
|
+const createFormSchema = CreateGoodsCategoryDto;
|
|
|
+const updateFormSchema = UpdateGoodsCategoryDto;
|
|
|
+
|
|
|
+export const GoodsCategoryManagement = () => {
|
|
|
+ // 状态管理
|
|
|
+ const [searchParams, setSearchParams] = useState({ page: 1, limit: 10, search: '' });
|
|
|
+ const [isModalOpen, setIsModalOpen] = useState(false);
|
|
|
+ const [editingCategory, setEditingCategory] = useState<GoodsCategoryResponse | null>(null);
|
|
|
+ const [isCreateForm, setIsCreateForm] = useState(true);
|
|
|
+ const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
|
|
|
+ const [categoryToDelete, setCategoryToDelete] = useState<number | null>(null);
|
|
|
+
|
|
|
+ // 表单实例
|
|
|
+ const createForm = useForm<CreateRequest>({
|
|
|
+ resolver: zodResolver(createFormSchema),
|
|
|
+ defaultValues: {
|
|
|
+ name: '',
|
|
|
+ parentId: 0,
|
|
|
+ imageFileId: null,
|
|
|
+ level: 0,
|
|
|
+ state: 1,
|
|
|
+ },
|
|
|
+ });
|
|
|
+
|
|
|
+ const updateForm = useForm<UpdateRequest>({
|
|
|
+ resolver: zodResolver(updateFormSchema),
|
|
|
+ });
|
|
|
+
|
|
|
+ // 数据查询
|
|
|
+ const { data, isLoading, refetch } = useQuery({
|
|
|
+ queryKey: ['goods-categories', searchParams],
|
|
|
+ queryFn: async () => {
|
|
|
+ const res = await goodsCategoryClientManager.get().index.$get({
|
|
|
+ query: {
|
|
|
+ page: searchParams.page,
|
|
|
+ pageSize: searchParams.limit,
|
|
|
+ keyword: searchParams.search,
|
|
|
+ filters: JSON.stringify({state:[1,2]})
|
|
|
+ },
|
|
|
+ });
|
|
|
+ if (res.status !== 200) throw new Error('获取商品分类列表失败');
|
|
|
+ return await res.json();
|
|
|
+ },
|
|
|
+ });
|
|
|
+
|
|
|
+ // 处理搜索
|
|
|
+ const handleSearch = (e: React.FormEvent) => {
|
|
|
+ e.preventDefault();
|
|
|
+ setSearchParams(prev => ({ ...prev, page: 1 }));
|
|
|
+ };
|
|
|
+
|
|
|
+ // 处理创建商品分类
|
|
|
+ const handleCreateCategory = () => {
|
|
|
+ setIsCreateForm(true);
|
|
|
+ setEditingCategory(null);
|
|
|
+ createForm.reset({
|
|
|
+ name: '',
|
|
|
+ parentId: 0,
|
|
|
+ imageFileId: null,
|
|
|
+ level: 0,
|
|
|
+ state: 1,
|
|
|
+ });
|
|
|
+ setIsModalOpen(true);
|
|
|
+ };
|
|
|
+
|
|
|
+ // 处理编辑商品分类
|
|
|
+ const handleEditCategory = (category: GoodsCategoryResponse) => {
|
|
|
+ setIsCreateForm(false);
|
|
|
+ setEditingCategory(category);
|
|
|
+ updateForm.reset({
|
|
|
+ name: category.name,
|
|
|
+ parentId: category.parentId,
|
|
|
+ imageFileId: category.imageFileId,
|
|
|
+ level: category.level,
|
|
|
+ state: category.state,
|
|
|
+ });
|
|
|
+ setIsModalOpen(true);
|
|
|
+ };
|
|
|
+
|
|
|
+ // 处理删除商品分类
|
|
|
+ const handleDeleteCategory = (id: number) => {
|
|
|
+ setCategoryToDelete(id);
|
|
|
+ setDeleteDialogOpen(true);
|
|
|
+ };
|
|
|
+
|
|
|
+ // 确认删除
|
|
|
+ const confirmDelete = async () => {
|
|
|
+ if (!categoryToDelete) return;
|
|
|
+
|
|
|
+ try {
|
|
|
+ const res = await goodsCategoryClientManager.get()[':id']['$delete']({
|
|
|
+ param: { id: categoryToDelete },
|
|
|
+ });
|
|
|
+
|
|
|
+ if (res.status === 204) {
|
|
|
+ toast.success('删除成功');
|
|
|
+ setDeleteDialogOpen(false);
|
|
|
+ refetch();
|
|
|
+ } else {
|
|
|
+ throw new Error('删除失败');
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ toast.error('删除失败，请重试');
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ // 处理表单提交
|
|
|
+ const handleCreateSubmit = async (data: CreateRequest) => {
|
|
|
+ try {
|
|
|
+ const res = await goodsCategoryClientManager.get().index.$post({ json: data });
|
|
|
+ if (res.status !== 201) throw new Error('创建失败');
|
|
|
+ toast.success('创建成功');
|
|
|
+ setIsModalOpen(false);
|
|
|
+ refetch();
|
|
|
+ } catch (error) {
|
|
|
+ toast.error('创建失败，请重试');
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ const handleUpdateSubmit = async (data: UpdateRequest) => {
|
|
|
+ if (!editingCategory) return;
|
|
|
+
|
|
|
+ try {
|
|
|
+ const res = await goodsCategoryClientManager.get()[':id']['$put']({
|
|
|
+ param: { id: editingCategory.id },
|
|
|
+ json: data,
|
|
|
+ });
|
|
|
+ if (res.status !== 200) throw new Error('更新失败');
|
|
|
+ toast.success('更新成功');
|
|
|
+ setIsModalOpen(false);
|
|
|
+ refetch();
|
|
|
+ } catch (error) {
|
|
|
+ toast.error('更新失败，请重试');
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ // 获取状态显示文本
|
|
|
+ const getStateText = (state: number) => {
|
|
|
+ return state === 1 ? '可用' : '不可用';
|
|
|
+ };
|
|
|
+
|
|
|
+ const getStateBadgeVariant = (state: number) => {
|
|
|
+ return state === 1 ? 'default' : 'secondary';
|
|
|
+ };
|
|
|
+
|
|
|
+ // 格式化日期
|
|
|
+ const formatDate = (dateString: string) => {
|
|
|
+ return new Date(dateString).toLocaleDateString('zh-CN');
|
|
|
+ };
|
|
|
+
|
|
|
+ // 渲染骨架屏 - 只覆盖表格区域
|
|
|
+ const renderTableSkeleton = () => (
|
|
|
+ <div className="space-y-2">
|
|
|
+ {Array.from({ length: 5 }).map((_, index) => (
|
|
|
+ <div key={index} className="flex space-x-4">
|
|
|
+ <div className="h-4 flex-1 bg-gray-200 rounded animate-pulse" />
|
|
|
+ <div className="h-4 flex-1 bg-gray-200 rounded animate-pulse" />
|
|
|
+ <div className="h-4 flex-1 bg-gray-200 rounded animate-pulse" />
|
|
|
+ <div className="h-4 flex-1 bg-gray-200 rounded animate-pulse" />
|
|
|
+ <div className="h-4 flex-1 bg-gray-200 rounded animate-pulse" />
|
|
|
+ <div className="h-4 flex-1 bg-gray-200 rounded animate-pulse" />
|
|
|
+ <div className="h-4 flex-1 bg-gray-200 rounded animate-pulse" />
|
|
|
+ <div className="h-4 w-16 bg-gray-200 rounded animate-pulse" />
|
|
|
+ </div>
|
|
|
+ ))}
|
|
|
+ </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>
|
|
|
+ <Button onClick={handleCreateCategory} data-testid="create-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"
|
|
|
+ data-testid="search-input"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <Button type="submit" variant="outline">
|
|
|
+ 搜索
|
|
|
+ </Button>
|
|
|
+ </form>
|
|
|
+
|
|
|
+ {/* 数据表格 */}
|
|
|
+ <div className="rounded-md border">
|
|
|
+ <Table>
|
|
|
+ <TableHeader>
|
|
|
+ <TableRow>
|
|
|
+ <TableHead>ID</TableHead>
|
|
|
+ <TableHead>分类名称</TableHead>
|
|
|
+ <TableHead>上级ID</TableHead>
|
|
|
+ <TableHead>层级</TableHead>
|
|
|
+ <TableHead>状态</TableHead>
|
|
|
+ <TableHead>图片</TableHead>
|
|
|
+ <TableHead>创建时间</TableHead>
|
|
|
+ <TableHead className="text-right">操作</TableHead>
|
|
|
+ </TableRow>
|
|
|
+ </TableHeader>
|
|
|
+ <TableBody>
|
|
|
+ {isLoading ? (
|
|
|
+ // 显示表格骨架屏
|
|
|
+ <TableRow>
|
|
|
+ <TableCell colSpan={8} className="p-4">
|
|
|
+ {renderTableSkeleton()}
|
|
|
+ </TableCell>
|
|
|
+ </TableRow>
|
|
|
+ ) : (
|
|
|
+ // 显示实际数据
|
|
|
+ data?.data.map((category) => (
|
|
|
+ <TableRow key={category.id}>
|
|
|
+ <TableCell className="font-medium">{category.id}</TableCell>
|
|
|
+ <TableCell>
|
|
|
+ <div className="flex items-center gap-2">
|
|
|
+ <Folder className="h-4 w-4 text-muted-foreground" />
|
|
|
+ <span>{category.name}</span>
|
|
|
+ </div>
|
|
|
+ </TableCell>
|
|
|
+ <TableCell>{category.parentId}</TableCell>
|
|
|
+ <TableCell>{category.level}</TableCell>
|
|
|
+ <TableCell>
|
|
|
+ <Badge variant={getStateBadgeVariant(category.state)}>
|
|
|
+ {getStateText(category.state)}
|
|
|
+ </Badge>
|
|
|
+ </TableCell>
|
|
|
+ <TableCell>
|
|
|
+ {category.imageFile?.fullUrl ? (
|
|
|
+ <img
|
|
|
+ src={category.imageFile.fullUrl}
|
|
|
+ alt={category.name}
|
|
|
+ className="w-10 h-10 object-cover rounded"
|
|
|
+ onError={(e) => {
|
|
|
+ e.currentTarget.src = '/placeholder.png';
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ ) : (
|
|
|
+ <span className="text-muted-foreground text-xs">无图片</span>
|
|
|
+ )}
|
|
|
+ </TableCell>
|
|
|
+ <TableCell>{formatDate(category.createdAt)}</TableCell>
|
|
|
+ <TableCell className="text-right">
|
|
|
+ <div className="flex justify-end gap-2">
|
|
|
+ <Button
|
|
|
+ variant="ghost"
|
|
|
+ size="icon"
|
|
|
+ onClick={() => handleEditCategory(category)}
|
|
|
+ data-testid={`edit-button-${category.id}`}
|
|
|
+ >
|
|
|
+ <Edit className="h-4 w-4" />
|
|
|
+ </Button>
|
|
|
+ <Button
|
|
|
+ variant="ghost"
|
|
|
+ size="icon"
|
|
|
+ onClick={() => handleDeleteCategory(category.id)}
|
|
|
+ data-testid={`delete-button-${category.id}`}
|
|
|
+ >
|
|
|
+ <Trash2 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>
|
|
|
+ )}
|
|
|
+
|
|
|
+ {/* 分页 */}
|
|
|
+ <div className="mt-4 flex items-center justify-between">
|
|
|
+ <div className="text-sm text-muted-foreground">
|
|
|
+ 第 {searchParams.page} 页，共 {Math.ceil((data?.pagination.total || 0) / searchParams.limit)} 页
|
|
|
+ </div>
|
|
|
+ <div className="flex gap-2">
|
|
|
+ <Button
|
|
|
+ variant="outline"
|
|
|
+ size="sm"
|
|
|
+ disabled={searchParams.page <= 1}
|
|
|
+ onClick={() => setSearchParams(prev => ({ ...prev, page: prev.page - 1 }))}
|
|
|
+ >
|
|
|
+ 上一页
|
|
|
+ </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 }))}
|
|
|
+ >
|
|
|
+ 下一页
|
|
|
+ </Button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </CardContent>
|
|
|
+ </Card>
|
|
|
+
|
|
|
+ {/* 创建/编辑模态框 */}
|
|
|
+ <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
|
|
|
+ <DialogContent className="sm:max-w-[500px] max-h-[90vh] overflow-y-auto">
|
|
|
+ <DialogHeader>
|
|
|
+ <DialogTitle>{isCreateForm ? '创建商品分类' : '编辑商品分类'}</DialogTitle>
|
|
|
+ <DialogDescription>
|
|
|
+ {isCreateForm ? '创建一个新的商品分类' : '编辑现有商品分类信息'}
|
|
|
+ </DialogDescription>
|
|
|
+ </DialogHeader>
|
|
|
+
|
|
|
+ {isCreateForm ? (
|
|
|
+ <Form {...createForm}>
|
|
|
+ <form onSubmit={createForm.handleSubmit(handleCreateSubmit)} className="space-y-4">
|
|
|
+ <FormField
|
|
|
+ control={createForm.control}
|
|
|
+ name="name"
|
|
|
+ render={({ field }) => (
|
|
|
+ <FormItem>
|
|
|
+ <FormLabel className="flex items-center">
|
|
|
+ 分类名称 <span className="text-red-500 ml-1">*</span>
|
|
|
+ </FormLabel>
|
|
|
+ <FormControl>
|
|
|
+ <Input placeholder="请输入分类名称" {...field} />
|
|
|
+ </FormControl>
|
|
|
+ <FormMessage />
|
|
|
+ </FormItem>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+
|
|
|
+ <FormField
|
|
|
+ control={createForm.control}
|
|
|
+ name="parentId"
|
|
|
+ render={({ field }) => (
|
|
|
+ <FormItem>
|
|
|
+ <FormLabel>上级分类ID</FormLabel>
|
|
|
+ <FormControl>
|
|
|
+ <Input
|
|
|
+ type="number"
|
|
|
+ placeholder="请输入上级分类ID，0表示顶级分类"
|
|
|
+ {...field}
|
|
|
+ onChange={(e) => field.onChange(parseInt(e.target.value) || 0)}
|
|
|
+ />
|
|
|
+ </FormControl>
|
|
|
+ <FormDescription>顶级分类请填0</FormDescription>
|
|
|
+ <FormMessage />
|
|
|
+ </FormItem>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+
|
|
|
+ <FormField
|
|
|
+ control={createForm.control}
|
|
|
+ name="level"
|
|
|
+ render={({ field }) => (
|
|
|
+ <FormItem>
|
|
|
+ <FormLabel>层级</FormLabel>
|
|
|
+ <FormControl>
|
|
|
+ <Input
|
|
|
+ type="number"
|
|
|
+ placeholder="请输入层级"
|
|
|
+ {...field}
|
|
|
+ onChange={(e) => field.onChange(parseInt(e.target.value) || 0)}
|
|
|
+ />
|
|
|
+ </FormControl>
|
|
|
+ <FormDescription>顶级分类为0，依次递增</FormDescription>
|
|
|
+ <FormMessage />
|
|
|
+ </FormItem>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+
|
|
|
+ <FormField
|
|
|
+ control={createForm.control}
|
|
|
+ name="state"
|
|
|
+ render={({ field }) => (
|
|
|
+ <FormItem>
|
|
|
+ <FormLabel>状态</FormLabel>
|
|
|
+ <FormControl>
|
|
|
+ <select
|
|
|
+ className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
|
+ {...field}
|
|
|
+ onChange={(e) => field.onChange(parseInt(e.target.value))}
|
|
|
+ >
|
|
|
+ <option value={1}>可用</option>
|
|
|
+ <option value={2}>不可用</option>
|
|
|
+ </select>
|
|
|
+ </FormControl>
|
|
|
+ <FormMessage />
|
|
|
+ </FormItem>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+
|
|
|
+ <FormField
|
|
|
+ control={createForm.control}
|
|
|
+ name="imageFileId"
|
|
|
+ render={({ field }) => (
|
|
|
+ <FormItem>
|
|
|
+ <FormLabel>分类图片</FormLabel>
|
|
|
+ <FormControl>
|
|
|
+ <FileSelector
|
|
|
+ value={field.value || undefined}
|
|
|
+ onChange={(value) => field.onChange(value)}
|
|
|
+ maxSize={2}
|
|
|
+ uploadPath="/goods-categories"
|
|
|
+ previewSize="medium"
|
|
|
+ placeholder="选择分类图片"
|
|
|
+ filterType="image"
|
|
|
+ />
|
|
|
+ </FormControl>
|
|
|
+ <FormMessage />
|
|
|
+ </FormItem>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+
|
|
|
+ <DialogFooter>
|
|
|
+ <Button type="button" variant="outline" onClick={() => setIsModalOpen(false)}>
|
|
|
+ 取消
|
|
|
+ </Button>
|
|
|
+ <Button type="submit">创建</Button>
|
|
|
+ </DialogFooter>
|
|
|
+ </form>
|
|
|
+ </Form>
|
|
|
+ ) : (
|
|
|
+ <Form {...updateForm}>
|
|
|
+ <form onSubmit={updateForm.handleSubmit(handleUpdateSubmit)} className="space-y-4">
|
|
|
+ <FormField
|
|
|
+ control={updateForm.control}
|
|
|
+ name="name"
|
|
|
+ render={({ field }) => (
|
|
|
+ <FormItem>
|
|
|
+ <FormLabel className="flex items-center">
|
|
|
+ 分类名称 <span className="text-red-500 ml-1">*</span>
|
|
|
+ </FormLabel>
|
|
|
+ <FormControl>
|
|
|
+ <Input placeholder="请输入分类名称" {...field} />
|
|
|
+ </FormControl>
|
|
|
+ <FormMessage />
|
|
|
+ </FormItem>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+
|
|
|
+ <FormField
|
|
|
+ control={updateForm.control}
|
|
|
+ name="parentId"
|
|
|
+ render={({ field }) => (
|
|
|
+ <FormItem>
|
|
|
+ <FormLabel>上级分类ID</FormLabel>
|
|
|
+ <FormControl>
|
|
|
+ <Input
|
|
|
+ type="number"
|
|
|
+ placeholder="请输入上级分类ID，0表示顶级分类"
|
|
|
+ {...field}
|
|
|
+ onChange={(e) => field.onChange(parseInt(e.target.value) || 0)}
|
|
|
+ />
|
|
|
+ </FormControl>
|
|
|
+ <FormDescription>顶级分类请填0</FormDescription>
|
|
|
+ <FormMessage />
|
|
|
+ </FormItem>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+
|
|
|
+ <FormField
|
|
|
+ control={updateForm.control}
|
|
|
+ name="level"
|
|
|
+ render={({ field }) => (
|
|
|
+ <FormItem>
|
|
|
+ <FormLabel>层级</FormLabel>
|
|
|
+ <FormControl>
|
|
|
+ <Input
|
|
|
+ type="number"
|
|
|
+ placeholder="请输入层级"
|
|
|
+ {...field}
|
|
|
+ onChange={(e) => field.onChange(parseInt(e.target.value) || 0)}
|
|
|
+ value={field.value ?? ''}
|
|
|
+ />
|
|
|
+ </FormControl>
|
|
|
+ <FormDescription>顶级分类为0，依次递增</FormDescription>
|
|
|
+ <FormMessage />
|
|
|
+ </FormItem>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+
|
|
|
+ <FormField
|
|
|
+ control={updateForm.control}
|
|
|
+ name="state"
|
|
|
+ render={({ field }) => (
|
|
|
+ <FormItem>
|
|
|
+ <FormLabel>状态</FormLabel>
|
|
|
+ <FormControl>
|
|
|
+ <select
|
|
|
+ className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
|
+ value={field.value ?? 1}
|
|
|
+ onChange={(e) => field.onChange(parseInt(e.target.value))}
|
|
|
+ >
|
|
|
+ <option value={1}>可用</option>
|
|
|
+ <option value={2}>不可用</option>
|
|
|
+ </select>
|
|
|
+ </FormControl>
|
|
|
+ <FormMessage />
|
|
|
+ </FormItem>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+
|
|
|
+ <FormField
|
|
|
+ control={updateForm.control}
|
|
|
+ name="imageFileId"
|
|
|
+ render={({ field }) => (
|
|
|
+ <FormItem>
|
|
|
+ <FormLabel>分类图片</FormLabel>
|
|
|
+ <FormControl>
|
|
|
+ <FileSelector
|
|
|
+ value={field.value || undefined}
|
|
|
+ onChange={(value) => field.onChange(value)}
|
|
|
+ maxSize={2}
|
|
|
+ uploadPath="/goods-categories"
|
|
|
+ previewSize="medium"
|
|
|
+ placeholder="选择分类图片"
|
|
|
+ filterType="image"
|
|
|
+ />
|
|
|
+ </FormControl>
|
|
|
+ <FormMessage />
|
|
|
+ </FormItem>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+
|
|
|
+ <DialogFooter>
|
|
|
+ <Button type="button" variant="outline" onClick={() => setIsModalOpen(false)}>
|
|
|
+ 取消
|
|
|
+ </Button>
|
|
|
+ <Button type="submit">更新</Button>
|
|
|
+ </DialogFooter>
|
|
|
+ </form>
|
|
|
+ </Form>
|
|
|
+ )}
|
|
|
+ </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}>
|
|
|
+ 删除
|
|
|
+ </Button>
|
|
|
+ </DialogFooter>
|
|
|
+ </DialogContent>
|
|
|
+ </Dialog>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+};
|
yourname