实现价格折扣动态调整
This commit is contained in:
220
src/app/(root)/product/create.tsx
Normal file
220
src/app/(root)/product/create.tsx
Normal file
@@ -0,0 +1,220 @@
|
||||
import { zodResolver } from "@hookform/resolvers/zod"
|
||||
import { useEffect, useState } from "react"
|
||||
import { Controller, useForm } from "react-hook-form"
|
||||
import { toast } from "sonner"
|
||||
import z from "zod"
|
||||
import { createProductSku } from "@/actions/product"
|
||||
import { getAllProductDiscount } from "@/actions/product_discount"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import {
|
||||
Dialog,
|
||||
DialogClose,
|
||||
DialogContent,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/components/ui/dialog"
|
||||
import {
|
||||
Field,
|
||||
FieldError,
|
||||
FieldGroup,
|
||||
FieldLabel,
|
||||
} from "@/components/ui/field"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select"
|
||||
import type { ProductDiscount } from "@/models/product_discount"
|
||||
|
||||
const schema = z.object({
|
||||
code: z.string().min(1, "请输入套餐编码"),
|
||||
name: z.string().min(1, "请输入套餐名称"),
|
||||
price: z
|
||||
.string()
|
||||
.min(1, "请输入单价")
|
||||
.refine(
|
||||
v => !Number.isNaN(Number(v)) && Number(v) > 0,
|
||||
"请输入有效的正数单价",
|
||||
),
|
||||
discount_id: z.string().optional(),
|
||||
})
|
||||
|
||||
export function CreateProductSku(props: {
|
||||
productId: number
|
||||
onSuccess?: () => void
|
||||
}) {
|
||||
const [open, setOpen] = useState(false)
|
||||
const [discounts, setDiscounts] = useState<ProductDiscount[]>([])
|
||||
|
||||
const form = useForm({
|
||||
resolver: zodResolver(schema),
|
||||
defaultValues: {
|
||||
code: "",
|
||||
name: "",
|
||||
price: "",
|
||||
discount_id: "",
|
||||
},
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
getAllProductDiscount()
|
||||
.then(resp => {
|
||||
if (resp.success) {
|
||||
setDiscounts(resp.data)
|
||||
}
|
||||
})
|
||||
.catch(e => toast.error(e.message))
|
||||
}
|
||||
}, [open])
|
||||
|
||||
const onSubmit = async (data: z.infer<typeof schema>) => {
|
||||
try {
|
||||
const resp = await createProductSku({
|
||||
product_id: props.productId,
|
||||
code: data.code,
|
||||
name: data.name,
|
||||
price: data.price,
|
||||
discount_id:
|
||||
data.discount_id && data.discount_id !== ""
|
||||
? Number(data.discount_id)
|
||||
: undefined,
|
||||
})
|
||||
if (resp.success) {
|
||||
form.reset()
|
||||
toast.success("套餐创建成功")
|
||||
props.onSuccess?.()
|
||||
setOpen(false)
|
||||
} else {
|
||||
toast.error(resp.message)
|
||||
}
|
||||
} catch (error) {
|
||||
const message = error instanceof Error ? error.message : error
|
||||
toast.error(`接口请求错误: ${message}`)
|
||||
}
|
||||
}
|
||||
|
||||
const handleOpenChange = (value: boolean) => {
|
||||
if (!value) {
|
||||
form.reset()
|
||||
}
|
||||
setOpen(value)
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={handleOpenChange}>
|
||||
<DialogTrigger asChild>
|
||||
<Button disabled={!props.productId}>新建套餐</Button>
|
||||
</DialogTrigger>
|
||||
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>新建套餐</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<form id="sku-create" onSubmit={form.handleSubmit(onSubmit)}>
|
||||
<FieldGroup>
|
||||
<Controller
|
||||
control={form.control}
|
||||
name="code"
|
||||
render={({ field, fieldState }) => (
|
||||
<Field>
|
||||
<FieldLabel htmlFor="sku-create-code">套餐编码</FieldLabel>
|
||||
<Input
|
||||
id="sku-create-code"
|
||||
placeholder="请输入套餐编码"
|
||||
{...field}
|
||||
aria-invalid={fieldState.invalid}
|
||||
/>
|
||||
{fieldState.invalid && (
|
||||
<FieldError errors={[fieldState.error]} />
|
||||
)}
|
||||
</Field>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Controller
|
||||
control={form.control}
|
||||
name="name"
|
||||
render={({ field, fieldState }) => (
|
||||
<Field>
|
||||
<FieldLabel htmlFor="sku-create-name">套餐名称</FieldLabel>
|
||||
<Input
|
||||
id="sku-create-name"
|
||||
placeholder="请输入套餐名称"
|
||||
{...field}
|
||||
aria-invalid={fieldState.invalid}
|
||||
/>
|
||||
{fieldState.invalid && (
|
||||
<FieldError errors={[fieldState.error]} />
|
||||
)}
|
||||
</Field>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Controller
|
||||
control={form.control}
|
||||
name="price"
|
||||
render={({ field, fieldState }) => (
|
||||
<Field>
|
||||
<FieldLabel htmlFor="sku-create-price">单价</FieldLabel>
|
||||
<Input
|
||||
id="sku-create-price"
|
||||
placeholder="请输入单价"
|
||||
{...field}
|
||||
aria-invalid={fieldState.invalid}
|
||||
/>
|
||||
{fieldState.invalid && (
|
||||
<FieldError errors={[fieldState.error]} />
|
||||
)}
|
||||
</Field>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Controller
|
||||
control={form.control}
|
||||
name="discount_id"
|
||||
render={({ field, fieldState }) => (
|
||||
<Field>
|
||||
<FieldLabel>折扣</FieldLabel>
|
||||
<Select value={field.value} onValueChange={field.onChange}>
|
||||
<SelectTrigger
|
||||
className="w-full"
|
||||
aria-invalid={fieldState.invalid}
|
||||
>
|
||||
<SelectValue placeholder="选择折扣" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{discounts.map(d => (
|
||||
<SelectItem key={d.id} value={String(d.id)}>
|
||||
{d.name}（{d.discount}%）
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{fieldState.invalid && (
|
||||
<FieldError errors={[fieldState.error]} />
|
||||
)}
|
||||
</Field>
|
||||
)}
|
||||
/>
|
||||
</FieldGroup>
|
||||
</form>
|
||||
|
||||
<DialogFooter>
|
||||
<DialogClose asChild>
|
||||
<Button variant="ghost">取消</Button>
|
||||
</DialogClose>
|
||||
<Button type="submit" form="sku-create">
|
||||
创建
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user