273 lines
8.3 KiB
TypeScript
273 lines
8.3 KiB
TypeScript
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 { ProductCodeField } from "@/components/products"
|
||
import { Button } from "@/components/ui/button"
|
||
import {
|
||
Dialog,
|
||
DialogClose,
|
||
DialogContent,
|
||
DialogFooter,
|
||
DialogHeader,
|
||
DialogTitle,
|
||
DialogTrigger,
|
||
} from "@/components/ui/dialog"
|
||
import {
|
||
Field,
|
||
FieldError,
|
||
FieldGroup,
|
||
FieldLabel,
|
||
FieldSeparator,
|
||
} 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"
|
||
import type { SelectedProduct } from "./type"
|
||
|
||
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,
|
||
"请输入有效的正数单价",
|
||
)
|
||
.refine(val => /^\d+(\.\d{1,2})?$/.test(val), "价格最多只能保留两位小数"),
|
||
discount_id: z.string().optional(),
|
||
price_min: z
|
||
.string()
|
||
.min(1, "请输入最低价格")
|
||
.refine(
|
||
v => !Number.isNaN(Number(v)) && Number(v) > 0,
|
||
"请输入有效的正数价格",
|
||
)
|
||
.refine(val => /^\d+(\.\d{1,2})?$/.test(val), "价格最多只能保留两位小数"),
|
||
})
|
||
|
||
export function CreateProductSku(props: {
|
||
product?: SelectedProduct
|
||
onSuccess?: () => void
|
||
}) {
|
||
const [open, setOpen] = useState(false)
|
||
const [discounts, setDiscounts] = useState<ProductDiscount[]>([])
|
||
|
||
const form = useForm({
|
||
resolver: zodResolver(schema),
|
||
defaultValues: {
|
||
code: "",
|
||
name: "",
|
||
price: "",
|
||
discount_id: "",
|
||
price_min: "",
|
||
},
|
||
})
|
||
|
||
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>) => {
|
||
if (!props.product) return
|
||
|
||
try {
|
||
const resp = await createProductSku({
|
||
product_id: props.product.id,
|
||
code: data.code,
|
||
name: data.name,
|
||
price: data.price,
|
||
discount_id:
|
||
data.discount_id && data.discount_id !== ""
|
||
? Number(data.discount_id)
|
||
: undefined,
|
||
price_min: data.price_min,
|
||
})
|
||
|
||
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.product}>新建套餐</Button>
|
||
</DialogTrigger>
|
||
|
||
<DialogContent>
|
||
<DialogHeader>
|
||
<DialogTitle>新建套餐</DialogTitle>
|
||
</DialogHeader>
|
||
|
||
<form id="sku-create" onSubmit={form.handleSubmit(onSubmit)}>
|
||
<FieldGroup>
|
||
<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-update-price">单价</FieldLabel>
|
||
<Input
|
||
id="sku-update-price"
|
||
placeholder="请输入单价"
|
||
{...field}
|
||
aria-invalid={fieldState.invalid}
|
||
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
|
||
let value = e.target.value
|
||
value = value.replace(/[^\d.]/g, "")
|
||
const dotCount = (value.match(/\./g) || []).length
|
||
if (dotCount > 1) {
|
||
value = value.slice(0, value.lastIndexOf("."))
|
||
}
|
||
if (value.includes(".")) {
|
||
const [int, dec] = value.split(".")
|
||
value = `${int}.${dec.slice(0, 2)}`
|
||
}
|
||
field.onChange(value)
|
||
}}
|
||
/>
|
||
{fieldState.invalid && (
|
||
<FieldError errors={[fieldState.error]} />
|
||
)}
|
||
</Field>
|
||
)}
|
||
/>
|
||
<Controller
|
||
control={form.control}
|
||
name="price_min"
|
||
render={({ field, fieldState }) => (
|
||
<Field>
|
||
<FieldLabel htmlFor="sku-create-price">最低价格</FieldLabel>
|
||
<Input
|
||
id="sku-create-price"
|
||
placeholder="请输入最低价格"
|
||
{...field}
|
||
aria-invalid={fieldState.invalid}
|
||
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
|
||
let value = e.target.value
|
||
value = value.replace(/[^\d.]/g, "")
|
||
const dotCount = (value.match(/\./g) || []).length
|
||
if (dotCount > 1) {
|
||
value = value.slice(0, value.lastIndexOf("."))
|
||
}
|
||
if (value.includes(".")) {
|
||
const [int, dec] = value.split(".")
|
||
value = `${int}.${dec.slice(0, 2)}`
|
||
}
|
||
field.onChange(value)
|
||
}}
|
||
/>
|
||
{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>
|
||
)}
|
||
/>
|
||
|
||
<FieldSeparator />
|
||
|
||
{props.product && (
|
||
<ProductCodeField
|
||
control={form.control}
|
||
name="code"
|
||
code={props.product.code}
|
||
/>
|
||
)}
|
||
</FieldGroup>
|
||
</form>
|
||
|
||
<DialogFooter>
|
||
<DialogClose asChild>
|
||
<Button variant="ghost">取消</Button>
|
||
</DialogClose>
|
||
<Button type="submit" form="sku-create">
|
||
创建
|
||
</Button>
|
||
</DialogFooter>
|
||
</DialogContent>
|
||
</Dialog>
|
||
)
|
||
}
|