实现价格折扣动态调整

2026-03-24 17:14:50 +08:00
parent 8751ac19a6
commit 523d46874b
13 changed files with 1189 additions and 56 deletions
--- a/src/app/(root)/discount/page.tsx
+++ b/src/app/(root)/discount/page.tsx
@@ -0,0 +1,131 @@
+"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 {
+  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 (
+    <div className="flex flex-col gap-3">
+      {/* 操作栏 */}
+      <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"),
+            },
+            {
+              header: "操作",
+              cell: ({ row }) => (
+                <div className="flex gap-2">
+                  <UpdateDiscount
+                    discount={row.original}
+                    onSuccess={table.refresh}
+                  />
+                  <DeleteButton
+                    discount={row.original}
+                    onSuccess={table.refresh}
+                  />
+                </div>
+              ),
+            },
+          ]}
+        />
+      </Suspense>
+    </div>
+  )
+}
+
+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>
+  )
+}