|
|
@@ -1,780 +0,0 @@
|
|
|
-import React, { useState } from 'react';
|
|
|
-import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
|
|
-import { format } from 'date-fns';
|
|
|
-import { zhCN } from 'date-fns/locale';
|
|
|
-import { toast } from 'sonner';
|
|
|
-import { zodResolver } from '@hookform/resolvers/zod';
|
|
|
-import { useForm } from 'react-hook-form';
|
|
|
-import type { InferRequestType, InferResponseType } from 'hono/client';
|
|
|
-
|
|
|
-import { Button } from '@/client/components/ui/button';
|
|
|
-import { Input } from '@/client/components/ui/input';
|
|
|
-import { Label } from '@/client/components/ui/label';
|
|
|
-import { Badge } from '@/client/components/ui/badge';
|
|
|
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/client/components/ui/card';
|
|
|
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/client/components/ui/table';
|
|
|
-import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/client/components/ui/dialog';
|
|
|
-import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@/client/components/ui/form';
|
|
|
-import { Textarea } from '@/client/components/ui/textarea';
|
|
|
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/client/components/ui/select';
|
|
|
-
|
|
|
-import { goodsClient } from '@/client/api';
|
|
|
-import { AdminCreateGoodsDto, AdminUpdateGoodsDto } from '@d8d/goods-module/schemas';
|
|
|
-import { DataTablePagination } from '@/client/admin/components/DataTablePagination';
|
|
|
-import ImageSelector from '@/client/admin/components/ImageSelector';
|
|
|
-import GoodsCategorySelector from '@/client/admin/components/GoodsCategorySelector';
|
|
|
-import GoodsCategoryCascadeSelector from '@/client/admin/components/GoodsCategoryCascadeSelector';
|
|
|
-import SupplierSelector from '@/client/admin/components/SupplierSelector';
|
|
|
-import MerchantSelector from '@/client/admin/components/MerchantSelector';
|
|
|
-import { Search, Plus, Edit, Trash2, Package } from 'lucide-react';
|
|
|
-
|
|
|
-type CreateRequest = InferRequestType<typeof goodsClient.$post>['json'];
|
|
|
-type UpdateRequest = InferRequestType<typeof goodsClient[':id']['$put']>['json'];
|
|
|
-type GoodsResponse = InferResponseType<typeof goodsClient.$get, 200>['data'][0];
|
|
|
-
|
|
|
-const createFormSchema = AdminCreateGoodsDto;
|
|
|
-const updateFormSchema = AdminUpdateGoodsDto;
|
|
|
-
|
|
|
-export const GoodsPage = () => {
|
|
|
- const queryClient = useQueryClient();
|
|
|
- const [searchParams, setSearchParams] = useState({ page: 1, limit: 10, search: '' });
|
|
|
- const [isModalOpen, setIsModalOpen] = useState(false);
|
|
|
- const [editingGoods, setEditingGoods] = useState<GoodsResponse | null>(null);
|
|
|
- const [isCreateForm, setIsCreateForm] = useState(true);
|
|
|
- const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
|
|
|
- const [goodsToDelete, setGoodsToDelete] = useState<number | null>(null);
|
|
|
-
|
|
|
- // 创建表单
|
|
|
- const createForm = useForm<CreateRequest>({
|
|
|
- resolver: zodResolver(createFormSchema),
|
|
|
- defaultValues: {
|
|
|
- name: '',
|
|
|
- price: 0,
|
|
|
- costPrice: 0,
|
|
|
- categoryId1: 0,
|
|
|
- categoryId2: 0,
|
|
|
- categoryId3: 0,
|
|
|
- goodsType: 1,
|
|
|
- supplierId: null,
|
|
|
- merchantId: null,
|
|
|
- imageFileId: null,
|
|
|
- slideImageIds: [],
|
|
|
- detail: '',
|
|
|
- instructions: '',
|
|
|
- sort: 0,
|
|
|
- state: 1,
|
|
|
- stock: 0,
|
|
|
- lowestBuy: 1,
|
|
|
- },
|
|
|
- });
|
|
|
-
|
|
|
- // 更新表单
|
|
|
- const updateForm = useForm<UpdateRequest>({
|
|
|
- resolver: zodResolver(updateFormSchema),
|
|
|
- });
|
|
|
-
|
|
|
- // 获取商品列表
|
|
|
- const { data, isLoading, refetch } = useQuery({
|
|
|
- queryKey: ['goods', searchParams],
|
|
|
- queryFn: async () => {
|
|
|
- const res = await goodsClient.$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: CreateRequest) => {
|
|
|
- const res = await goodsClient.$post({ json: data });
|
|
|
- if (res.status !== 201) throw new Error('创建商品失败');
|
|
|
- return await res.json();
|
|
|
- },
|
|
|
- onSuccess: () => {
|
|
|
- toast.success('商品创建成功');
|
|
|
- setIsModalOpen(false);
|
|
|
- createForm.reset();
|
|
|
- refetch();
|
|
|
- },
|
|
|
- onError: (error) => {
|
|
|
- toast.error(error.message || '创建商品失败');
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- // 更新商品
|
|
|
- const updateMutation = useMutation({
|
|
|
- mutationFn: async ({ id, data }: { id: number; data: UpdateRequest }) => {
|
|
|
- const res = await goodsClient[':id']['$put']({
|
|
|
- param: { id: id.toString() },
|
|
|
- json: data
|
|
|
- });
|
|
|
- if (res.status !== 200) throw new Error('更新商品失败');
|
|
|
- return await res.json();
|
|
|
- },
|
|
|
- onSuccess: () => {
|
|
|
- toast.success('商品更新成功');
|
|
|
- setIsModalOpen(false);
|
|
|
- setEditingGoods(null);
|
|
|
- refetch();
|
|
|
- },
|
|
|
- onError: (error) => {
|
|
|
- toast.error(error.message || '更新商品失败');
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- // 删除商品
|
|
|
- const deleteMutation = useMutation({
|
|
|
- mutationFn: async (id: number) => {
|
|
|
- const res = await goodsClient[':id']['$delete']({
|
|
|
- param: { id: id.toString() }
|
|
|
- });
|
|
|
- if (res.status !== 204) throw new Error('删除商品失败');
|
|
|
- return id;
|
|
|
- },
|
|
|
- onSuccess: () => {
|
|
|
- toast.success('商品删除成功');
|
|
|
- setDeleteDialogOpen(false);
|
|
|
- setGoodsToDelete(null);
|
|
|
- refetch();
|
|
|
- },
|
|
|
- onError: (error) => {
|
|
|
- toast.error(error.message || '删除商品失败');
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- // 处理搜索
|
|
|
- const handleSearch = (e: React.FormEvent) => {
|
|
|
- e.preventDefault();
|
|
|
- setSearchParams(prev => ({ ...prev, page: 1 }));
|
|
|
- };
|
|
|
-
|
|
|
- // 处理创建
|
|
|
- const handleCreateGoods = () => {
|
|
|
- setIsCreateForm(true);
|
|
|
- setEditingGoods(null);
|
|
|
- createForm.reset();
|
|
|
- setIsModalOpen(true);
|
|
|
- };
|
|
|
-
|
|
|
- // 处理编辑
|
|
|
- const handleEditGoods = (goods: GoodsResponse) => {
|
|
|
- setIsCreateForm(false);
|
|
|
- setEditingGoods(goods);
|
|
|
-
|
|
|
- updateForm.reset({
|
|
|
- name: goods.name,
|
|
|
- price: goods.price,
|
|
|
- costPrice: goods.costPrice,
|
|
|
- categoryId1: goods.categoryId1,
|
|
|
- categoryId2: goods.categoryId2,
|
|
|
- categoryId3: goods.categoryId3,
|
|
|
- goodsType: goods.goodsType,
|
|
|
- supplierId: goods.supplierId,
|
|
|
- merchantId: goods.merchantId,
|
|
|
- imageFileId: goods.imageFileId,
|
|
|
- slideImageIds: goods.slideImages?.map(img => img.id) || [],
|
|
|
- detail: goods.detail || '',
|
|
|
- instructions: goods.instructions || '',
|
|
|
- sort: goods.sort,
|
|
|
- state: goods.state,
|
|
|
- stock: goods.stock,
|
|
|
- lowestBuy: goods.lowestBuy,
|
|
|
- });
|
|
|
-
|
|
|
- setIsModalOpen(true);
|
|
|
- };
|
|
|
-
|
|
|
- // 处理删除
|
|
|
- const handleDeleteGoods = (id: number) => {
|
|
|
- setGoodsToDelete(id);
|
|
|
- setDeleteDialogOpen(true);
|
|
|
- };
|
|
|
-
|
|
|
- // 确认删除
|
|
|
- const confirmDelete = () => {
|
|
|
- if (goodsToDelete) {
|
|
|
- deleteMutation.mutate(goodsToDelete);
|
|
|
- }
|
|
|
- };
|
|
|
-
|
|
|
- // 提交表单
|
|
|
- const handleSubmit = (data: CreateRequest | UpdateRequest) => {
|
|
|
- if (isCreateForm) {
|
|
|
- createMutation.mutate(data as CreateRequest);
|
|
|
- } else if (editingGoods) {
|
|
|
- updateMutation.mutate({ id: editingGoods.id, data: data as UpdateRequest });
|
|
|
- }
|
|
|
- };
|
|
|
-
|
|
|
- return (
|
|
|
- <div className="space-y-4">
|
|
|
- <div className="flex justify-between items-center">
|
|
|
- <h1 className="text-2xl font-bold">商品管理</h1>
|
|
|
- <Button onClick={handleCreateGoods}>
|
|
|
- <Plus className="mr-2 h-4 w-4" />
|
|
|
- 创建商品
|
|
|
- </Button>
|
|
|
- </div>
|
|
|
-
|
|
|
- <Card>
|
|
|
- <CardHeader>
|
|
|
- <CardTitle>商品列表</CardTitle>
|
|
|
- <CardDescription>管理您的商品信息</CardDescription>
|
|
|
- </CardHeader>
|
|
|
- <CardContent>
|
|
|
- <form onSubmit={handleSearch} className="mb-4">
|
|
|
- <div className="flex gap-2">
|
|
|
- <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">
|
|
|
- 搜索
|
|
|
- </Button>
|
|
|
- </div>
|
|
|
- </form>
|
|
|
-
|
|
|
- <div className="rounded-md border">
|
|
|
- <Table>
|
|
|
- <TableHeader>
|
|
|
- <TableRow>
|
|
|
- <TableHead>商品图片</TableHead>
|
|
|
- <TableHead>商品名称</TableHead>
|
|
|
- <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((goods) => (
|
|
|
- <TableRow key={goods.id}>
|
|
|
- <TableCell>
|
|
|
- {goods.imageFile?.fullUrl ? (
|
|
|
- <img
|
|
|
- src={goods.imageFile.fullUrl}
|
|
|
- alt={goods.name}
|
|
|
- className="w-12 h-12 object-cover rounded"
|
|
|
- />
|
|
|
- ) : (
|
|
|
- <div className="w-12 h-12 bg-gray-200 rounded flex items-center justify-center">
|
|
|
- <Package className="h-6 w-6 text-gray-400" />
|
|
|
- </div>
|
|
|
- )}
|
|
|
- </TableCell>
|
|
|
- <TableCell className="font-medium">{goods.name}</TableCell>
|
|
|
- <TableCell>¥{goods.price.toFixed(2)}</TableCell>
|
|
|
- <TableCell>{goods.stock}</TableCell>
|
|
|
- <TableCell>{goods.salesNum}</TableCell>
|
|
|
- <TableCell>{goods.supplier?.name || '-'}</TableCell>
|
|
|
- <TableCell>{goods.merchant?.name || goods.merchant?.username || '-'}</TableCell>
|
|
|
- <TableCell>
|
|
|
- <Badge variant={goods.state === 1 ? 'default' : 'secondary'}>
|
|
|
- {goods.state === 1 ? '可用' : '不可用'}
|
|
|
- </Badge>
|
|
|
- </TableCell>
|
|
|
- <TableCell>
|
|
|
- {format(new Date(goods.createdAt), 'yyyy-MM-dd', { locale: zhCN })}
|
|
|
- </TableCell>
|
|
|
- <TableCell className="text-right">
|
|
|
- <div className="flex justify-end gap-2">
|
|
|
- <Button
|
|
|
- variant="ghost"
|
|
|
- size="icon"
|
|
|
- onClick={() => handleEditGoods(goods)}
|
|
|
- >
|
|
|
- <Edit className="h-4 w-4" />
|
|
|
- </Button>
|
|
|
- <Button
|
|
|
- variant="ghost"
|
|
|
- size="icon"
|
|
|
- onClick={() => handleDeleteGoods(goods.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>
|
|
|
-
|
|
|
- <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-[700px] 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>商品名称 <span className="text-red-500">*</span></FormLabel>
|
|
|
- <FormControl>
|
|
|
- <Input placeholder="请输入商品名称" {...field} />
|
|
|
- </FormControl>
|
|
|
- <FormMessage />
|
|
|
- </FormItem>
|
|
|
- )}
|
|
|
- />
|
|
|
-
|
|
|
- <div className="grid grid-cols-2 gap-4">
|
|
|
- <FormField
|
|
|
- control={createForm.control}
|
|
|
- name="price"
|
|
|
- render={({ field }) => (
|
|
|
- <FormItem>
|
|
|
- <FormLabel>售卖价 <span className="text-red-500">*</span></FormLabel>
|
|
|
- <FormControl>
|
|
|
- <Input type="number" step="0.01" placeholder="0.00" {...field} />
|
|
|
- </FormControl>
|
|
|
- <FormMessage />
|
|
|
- </FormItem>
|
|
|
- )}
|
|
|
- />
|
|
|
-
|
|
|
- <FormField
|
|
|
- control={createForm.control}
|
|
|
- name="costPrice"
|
|
|
- render={({ field }) => (
|
|
|
- <FormItem>
|
|
|
- <FormLabel>成本价 <span className="text-red-500">*</span></FormLabel>
|
|
|
- <FormControl>
|
|
|
- <Input type="number" step="0.01" placeholder="0.00" {...field} />
|
|
|
- </FormControl>
|
|
|
- <FormMessage />
|
|
|
- </FormItem>
|
|
|
- )}
|
|
|
- />
|
|
|
- </div>
|
|
|
-
|
|
|
- <GoodsCategoryCascadeSelector required={true} />
|
|
|
-
|
|
|
- <div className="grid grid-cols-2 gap-4">
|
|
|
- <FormField
|
|
|
- control={createForm.control}
|
|
|
- name="supplierId"
|
|
|
- render={({ field }) => (
|
|
|
- <FormItem>
|
|
|
- <FormLabel>供应商</FormLabel>
|
|
|
- <FormControl>
|
|
|
- <SupplierSelector
|
|
|
- value={field.value || undefined}
|
|
|
- onChange={field.onChange}
|
|
|
- />
|
|
|
- </FormControl>
|
|
|
- <FormMessage />
|
|
|
- </FormItem>
|
|
|
- )}
|
|
|
- />
|
|
|
-
|
|
|
- <FormField
|
|
|
- control={createForm.control}
|
|
|
- name="merchantId"
|
|
|
- render={({ field }) => (
|
|
|
- <FormItem>
|
|
|
- <FormLabel>商户</FormLabel>
|
|
|
- <FormControl>
|
|
|
- <MerchantSelector
|
|
|
- value={field.value || undefined}
|
|
|
- onChange={field.onChange}
|
|
|
- />
|
|
|
- </FormControl>
|
|
|
- <FormMessage />
|
|
|
- </FormItem>
|
|
|
- )}
|
|
|
- />
|
|
|
- </div>
|
|
|
-
|
|
|
- <div className="grid grid-cols-2 gap-4">
|
|
|
- <FormField
|
|
|
- control={createForm.control}
|
|
|
- name="goodsType"
|
|
|
- render={({ field }) => (
|
|
|
- <FormItem>
|
|
|
- <FormLabel>商品类型</FormLabel>
|
|
|
- <Select
|
|
|
- value={field.value?.toString()}
|
|
|
- onValueChange={(value) => field.onChange(parseInt(value))}
|
|
|
- >
|
|
|
- <FormControl>
|
|
|
- <SelectTrigger>
|
|
|
- <SelectValue placeholder="选择商品类型" />
|
|
|
- </SelectTrigger>
|
|
|
- </FormControl>
|
|
|
- <SelectContent>
|
|
|
- <SelectItem value="1">实物产品</SelectItem>
|
|
|
- <SelectItem value="2">虚拟产品</SelectItem>
|
|
|
- </SelectContent>
|
|
|
- </Select>
|
|
|
- <FormMessage />
|
|
|
- </FormItem>
|
|
|
- )}
|
|
|
- />
|
|
|
-
|
|
|
- <FormField
|
|
|
- control={createForm.control}
|
|
|
- name="stock"
|
|
|
- render={({ field }) => (
|
|
|
- <FormItem>
|
|
|
- <FormLabel>库存 <span className="text-red-500">*</span></FormLabel>
|
|
|
- <FormControl>
|
|
|
- <Input type="number" placeholder="0" {...field} />
|
|
|
- </FormControl>
|
|
|
- <FormMessage />
|
|
|
- </FormItem>
|
|
|
- )}
|
|
|
- />
|
|
|
- </div>
|
|
|
-
|
|
|
- <FormField
|
|
|
- control={createForm.control}
|
|
|
- name="stock"
|
|
|
- render={({ field }) => (
|
|
|
- <FormItem>
|
|
|
- <FormLabel>库存 <span className="text-red-500">*</span></FormLabel>
|
|
|
- <FormControl>
|
|
|
- <Input type="number" placeholder="0" {...field} />
|
|
|
- </FormControl>
|
|
|
- <FormMessage />
|
|
|
- </FormItem>
|
|
|
- )}
|
|
|
- />
|
|
|
-
|
|
|
- <FormField
|
|
|
- control={createForm.control}
|
|
|
- name="imageFileId"
|
|
|
- render={({ field }) => (
|
|
|
- <FormItem>
|
|
|
- <FormLabel>商品主图</FormLabel>
|
|
|
- <FormControl>
|
|
|
- <ImageSelector
|
|
|
- value={field.value || undefined}
|
|
|
- onChange={field.onChange}
|
|
|
- maxSize={2}
|
|
|
- uploadPath="/goods"
|
|
|
- uploadButtonText="上传商品主图"
|
|
|
- previewSize="medium"
|
|
|
- placeholder="选择商品主图"
|
|
|
- />
|
|
|
- </FormControl>
|
|
|
- <FormDescription>推荐尺寸:800x800px</FormDescription>
|
|
|
- <FormMessage />
|
|
|
- </FormItem>
|
|
|
- )}
|
|
|
- />
|
|
|
-
|
|
|
- <FormField
|
|
|
- control={createForm.control}
|
|
|
- name="slideImageIds"
|
|
|
- render={({ field }) => (
|
|
|
- <FormItem>
|
|
|
- <FormLabel>商品轮播图</FormLabel>
|
|
|
- <FormControl>
|
|
|
- <ImageSelector
|
|
|
- value={field.value || []}
|
|
|
- onChange={field.onChange}
|
|
|
- allowMultiple={true}
|
|
|
- maxSize={5}
|
|
|
- uploadPath="/goods/slide"
|
|
|
- uploadButtonText="上传轮播图"
|
|
|
- previewSize="small"
|
|
|
- placeholder="选择商品轮播图"
|
|
|
- accept="image/*"
|
|
|
- />
|
|
|
- </FormControl>
|
|
|
- <FormDescription>最多上传5张轮播图,推荐尺寸:800x800px</FormDescription>
|
|
|
- <FormMessage />
|
|
|
- </FormItem>
|
|
|
- )}
|
|
|
- />
|
|
|
-
|
|
|
- <FormField
|
|
|
- control={createForm.control}
|
|
|
- name="instructions"
|
|
|
- render={({ field }) => (
|
|
|
- <FormItem>
|
|
|
- <FormLabel>商品简介</FormLabel>
|
|
|
- <FormControl>
|
|
|
- <Textarea
|
|
|
- placeholder="请输入商品简介"
|
|
|
- className="resize-none"
|
|
|
- {...field}
|
|
|
- />
|
|
|
- </FormControl>
|
|
|
- <FormMessage />
|
|
|
- </FormItem>
|
|
|
- )}
|
|
|
- />
|
|
|
-
|
|
|
- <DialogFooter>
|
|
|
- <Button
|
|
|
- type="button"
|
|
|
- variant="outline"
|
|
|
- onClick={() => setIsModalOpen(false)}
|
|
|
- >
|
|
|
- 取消
|
|
|
- </Button>
|
|
|
- <Button type="submit" disabled={createMutation.isPending}>
|
|
|
- {createMutation.isPending ? '创建中...' : '创建'}
|
|
|
- </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>商品名称 <span className="text-red-500">*</span></FormLabel>
|
|
|
- <FormControl>
|
|
|
- <Input placeholder="请输入商品名称" {...field} />
|
|
|
- </FormControl>
|
|
|
- <FormMessage />
|
|
|
- </FormItem>
|
|
|
- )}
|
|
|
- />
|
|
|
-
|
|
|
- <div className="grid grid-cols-2 gap-4">
|
|
|
- <FormField
|
|
|
- control={updateForm.control}
|
|
|
- name="price"
|
|
|
- render={({ field }) => (
|
|
|
- <FormItem>
|
|
|
- <FormLabel>售卖价</FormLabel>
|
|
|
- <FormControl>
|
|
|
- <Input type="number" step="0.01" {...field} />
|
|
|
- </FormControl>
|
|
|
- <FormMessage />
|
|
|
- </FormItem>
|
|
|
- )}
|
|
|
- />
|
|
|
-
|
|
|
- <FormField
|
|
|
- control={updateForm.control}
|
|
|
- name="costPrice"
|
|
|
- render={({ field }) => (
|
|
|
- <FormItem>
|
|
|
- <FormLabel>成本价</FormLabel>
|
|
|
- <FormControl>
|
|
|
- <Input type="number" step="0.01" {...field} />
|
|
|
- </FormControl>
|
|
|
- <FormMessage />
|
|
|
- </FormItem>
|
|
|
- )}
|
|
|
- />
|
|
|
- </div>
|
|
|
-
|
|
|
- <GoodsCategoryCascadeSelector />
|
|
|
-
|
|
|
- <div className="grid grid-cols-2 gap-4">
|
|
|
- <FormField
|
|
|
- control={updateForm.control}
|
|
|
- name="supplierId"
|
|
|
- render={({ field }) => (
|
|
|
- <FormItem>
|
|
|
- <FormLabel>供应商</FormLabel>
|
|
|
- <FormControl>
|
|
|
- <SupplierSelector
|
|
|
- value={field.value || undefined}
|
|
|
- onChange={field.onChange}
|
|
|
- />
|
|
|
- </FormControl>
|
|
|
- <FormMessage />
|
|
|
- </FormItem>
|
|
|
- )}
|
|
|
- />
|
|
|
-
|
|
|
- <FormField
|
|
|
- control={updateForm.control}
|
|
|
- name="merchantId"
|
|
|
- render={({ field }) => (
|
|
|
- <FormItem>
|
|
|
- <FormLabel>商户</FormLabel>
|
|
|
- <FormControl>
|
|
|
- <MerchantSelector
|
|
|
- value={field.value || undefined}
|
|
|
- onChange={field.onChange}
|
|
|
- />
|
|
|
- </FormControl>
|
|
|
- <FormMessage />
|
|
|
- </FormItem>
|
|
|
- )}
|
|
|
- />
|
|
|
- </div>
|
|
|
-
|
|
|
- <div className="grid grid-cols-2 gap-4">
|
|
|
- <FormField
|
|
|
- control={updateForm.control}
|
|
|
- name="stock"
|
|
|
- render={({ field }) => (
|
|
|
- <FormItem>
|
|
|
- <FormLabel>库存</FormLabel>
|
|
|
- <FormControl>
|
|
|
- <Input type="number" {...field} />
|
|
|
- </FormControl>
|
|
|
- <FormMessage />
|
|
|
- </FormItem>
|
|
|
- )}
|
|
|
- />
|
|
|
-
|
|
|
- <FormField
|
|
|
- control={updateForm.control}
|
|
|
- name="imageFileId"
|
|
|
- render={({ field }) => (
|
|
|
- <FormItem>
|
|
|
- <FormLabel>商品主图</FormLabel>
|
|
|
- <FormControl>
|
|
|
- <ImageSelector
|
|
|
- value={field.value || undefined}
|
|
|
- onChange={field.onChange}
|
|
|
- maxSize={2}
|
|
|
- uploadPath="/goods"
|
|
|
- uploadButtonText="上传商品主图"
|
|
|
- previewSize="medium"
|
|
|
- placeholder="选择商品主图"
|
|
|
- />
|
|
|
- </FormControl>
|
|
|
- <FormDescription>推荐尺寸:800x800px</FormDescription>
|
|
|
- <FormMessage />
|
|
|
- </FormItem>
|
|
|
- )}
|
|
|
- />
|
|
|
-
|
|
|
- <FormField
|
|
|
- control={updateForm.control}
|
|
|
- name="slideImageIds"
|
|
|
- render={({ field }) => (
|
|
|
- <FormItem>
|
|
|
- <FormLabel>商品轮播图</FormLabel>
|
|
|
- <FormControl>
|
|
|
- <ImageSelector
|
|
|
- value={field.value || []}
|
|
|
- onChange={field.onChange}
|
|
|
- allowMultiple={true}
|
|
|
- maxSize={5}
|
|
|
- uploadPath="/goods/slide"
|
|
|
- uploadButtonText="上传轮播图"
|
|
|
- previewSize="small"
|
|
|
- placeholder="选择商品轮播图"
|
|
|
- accept="image/*"
|
|
|
- />
|
|
|
- </FormControl>
|
|
|
- <FormDescription>最多上传5张轮播图,推荐尺寸:800x800px</FormDescription>
|
|
|
- <FormMessage />
|
|
|
- </FormItem>
|
|
|
- )}
|
|
|
- />
|
|
|
-
|
|
|
- <FormField
|
|
|
- control={updateForm.control}
|
|
|
- name="state"
|
|
|
- render={({ field }) => (
|
|
|
- <FormItem>
|
|
|
- <FormLabel>状态</FormLabel>
|
|
|
- <Select
|
|
|
- value={field.value?.toString()}
|
|
|
- onValueChange={(value) => field.onChange(parseInt(value))}
|
|
|
- >
|
|
|
- <FormControl>
|
|
|
- <SelectTrigger>
|
|
|
- <SelectValue />
|
|
|
- </SelectTrigger>
|
|
|
- </FormControl>
|
|
|
- <SelectContent>
|
|
|
- <SelectItem value="1">可用</SelectItem>
|
|
|
- <SelectItem value="2">不可用</SelectItem>
|
|
|
- </SelectContent>
|
|
|
- </Select>
|
|
|
- <FormMessage />
|
|
|
- </FormItem>
|
|
|
- )}
|
|
|
- />
|
|
|
- </div>
|
|
|
-
|
|
|
- <DialogFooter>
|
|
|
- <Button
|
|
|
- type="button"
|
|
|
- variant="outline"
|
|
|
- onClick={() => setIsModalOpen(false)}
|
|
|
- >
|
|
|
- 取消
|
|
|
- </Button>
|
|
|
- <Button type="submit" disabled={updateMutation.isPending}>
|
|
|
- {updateMutation.isPending ? '更新中...' : '更新'}
|
|
|
- </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}
|
|
|
- disabled={deleteMutation.isPending}
|
|
|
- >
|
|
|
- {deleteMutation.isPending ? '删除中...' : '删除'}
|
|
|
- </Button>
|
|
|
- </DialogFooter>
|
|
|
- </DialogContent>
|
|
|
- </Dialog>
|
|
|
- </div>
|
|
|
- );
|
|
|
-};
|