135 lines
3.7 KiB
TypeScript
135 lines
3.7 KiB
TypeScript
"use client"
|
||
import { format } from "date-fns"
|
||
import { Suspense, useState } from "react"
|
||
import { toast } from "sonner"
|
||
import {
|
||
deleteProductDiscount,
|
||
getPageProductDiscount,
|
||
} from "@/actions/product_discount"
|
||
import { DataTable, useDataTable } from "@/components/data-table"
|
||
import { Page } from "@/components/page"
|
||
import {
|
||
AlertDialog,
|
||
AlertDialogAction,
|
||
AlertDialogCancel,
|
||
AlertDialogContent,
|
||
AlertDialogDescription,
|
||
AlertDialogFooter,
|
||
AlertDialogHeader,
|
||
AlertDialogTitle,
|
||
AlertDialogTrigger,
|
||
} from "@/components/ui/alert-dialog"
|
||
import { Button } from "@/components/ui/button"
|
||
import type { ProductDiscount } from "@/models/product_discount"
|
||
import { CreateDiscount } from "./create"
|
||
import { UpdateDiscount } from "./update"
|
||
|
||
export default function DiscountPage() {
|
||
const table = useDataTable((page, size) =>
|
||
getPageProductDiscount({ page, size }),
|
||
)
|
||
|
||
return (
|
||
<Page>
|
||
{/* 操作栏 */}
|
||
<div className="flex justify-between items-stretch">
|
||
<div className="flex gap-3">
|
||
<CreateDiscount onSuccess={table.refresh} />
|
||
</div>
|
||
</div>
|
||
|
||
{/* 数据表 */}
|
||
<Suspense>
|
||
<DataTable<ProductDiscount>
|
||
{...table}
|
||
columns={[
|
||
{ header: "名称", accessorKey: "name" },
|
||
{ header: "折扣", accessorKey: "discount" },
|
||
{
|
||
header: "创建时间",
|
||
accessorKey: "created_at",
|
||
cell: ({ row }) =>
|
||
format(new Date(row.original.created_at), "yyyy-MM-dd HH:mm"),
|
||
},
|
||
{
|
||
header: "更新时间",
|
||
accessorKey: "updated_at",
|
||
cell: ({ row }) =>
|
||
format(new Date(row.original.updated_at), "yyyy-MM-dd HH:mm"),
|
||
},
|
||
{
|
||
id: "action",
|
||
meta: { pin: "right" },
|
||
header: "操作",
|
||
cell: ({ row }) => (
|
||
<div className="flex gap-2">
|
||
<UpdateDiscount
|
||
discount={row.original}
|
||
onSuccess={table.refresh}
|
||
/>
|
||
<DeleteButton
|
||
discount={row.original}
|
||
onSuccess={table.refresh}
|
||
/>
|
||
</div>
|
||
),
|
||
},
|
||
]}
|
||
/>
|
||
</Suspense>
|
||
</Page>
|
||
)
|
||
}
|
||
|
||
function DeleteButton({
|
||
discount,
|
||
onSuccess,
|
||
}: {
|
||
discount: ProductDiscount
|
||
onSuccess?: () => void
|
||
}) {
|
||
const [loading, setLoading] = useState(false)
|
||
|
||
const handleConfirm = async () => {
|
||
setLoading(true)
|
||
try {
|
||
const resp = await deleteProductDiscount(discount.id)
|
||
if (resp.success) {
|
||
toast.success("删除成功")
|
||
onSuccess?.()
|
||
} else {
|
||
toast.error(resp.message ?? "删除失败")
|
||
}
|
||
} catch (error) {
|
||
const message = error instanceof Error ? error.message : error
|
||
toast.error(`接口请求错误: ${message}`)
|
||
} finally {
|
||
setLoading(false)
|
||
}
|
||
}
|
||
|
||
return (
|
||
<AlertDialog>
|
||
<AlertDialogTrigger asChild>
|
||
<Button size="sm" variant="destructive" disabled={loading}>
|
||
删除
|
||
</Button>
|
||
</AlertDialogTrigger>
|
||
<AlertDialogContent size="sm">
|
||
<AlertDialogHeader>
|
||
<AlertDialogTitle>确认删除</AlertDialogTitle>
|
||
<AlertDialogDescription>
|
||
确定要删除折扣「{discount.name}」吗？此操作不可撤销。
|
||
</AlertDialogDescription>
|
||
</AlertDialogHeader>
|
||
<AlertDialogFooter>
|
||
<AlertDialogCancel>取消</AlertDialogCancel>
|
||
<AlertDialogAction variant="destructive" onClick={handleConfirm}>
|
||
删除
|
||
</AlertDialogAction>
|
||
</AlertDialogFooter>
|
||
</AlertDialogContent>
|
||
</AlertDialog>
|
||
)
|
||
}
|