时间显示到秒 & 表格之间的跳转页面

src/app/(root)/billing/page.tsx

@@ -2,6 +2,8 @@
 import { zodResolver } from "@hookform/resolvers/zod"
 import { format } from "date-fns"
 import { CreditCard, Wallet } from "lucide-react"
+import Link from "next/link"
+import { useRouter, useSearchParams } from "next/navigation"
 import { Suspense, useEffect, useState } from "react"
 import { Controller, useForm } from "react-hook-form"
 import { toast } from "sonner"
@@ -77,17 +79,21 @@ const filterSchema = z
 type FilterSchema = z.infer<typeof filterSchema>
 
 export default function BillingPage() {
-  const [filters, setFilters] = useState<FilterValues>({})
+  const searchParams = useSearchParams()
+  const innerNo = searchParams.get("inner_no")
+  console.log(innerNo, "innerNo")
   const [skuOptions, setSkuOptions] = useState<SkuOption[]>([])
   const [loading, setLoading] = useState(true)
   const [skuProductCode, setSkuProductCode] = useState<ProductCode>(
     ProductCode.All,
   )
-  const { control, handleSubmit, reset } = useForm<FilterSchema>({
+  const router = useRouter()
+
+  const { control, handleSubmit, reset, getValues } = useForm<FilterSchema>({
     resolver: zodResolver(filterSchema),
     defaultValues: {
       bill_no: "",
-      inner_no: "",
+      inner_no: innerNo || "",
       created_at_start: "",
       created_at_end: "",
       phone: "",
@@ -125,31 +131,58 @@ export default function BillingPage() {
       })
   }, [skuProductCode])
 
-  const table = useDataTable<Billing>((page, size) =>
-    getPageBill({ page, size, ...filters }),
-  )
-
-  const onFilter = handleSubmit(data => {
+  const loadData = (page: number, size: number) => {
     const result: FilterValues = {}
-    if (data.phone?.trim()) result.user_phone = data.phone.trim()
-    if (data.inner_no?.trim()) result.trade_inner_no = data.inner_no.trim()
-    if (data.bill_no?.trim()) result.bill_no = data.bill_no.trim()
-    if (data.resource_no?.trim()) result.resource_no = data.resource_no.trim()
-    if (data.product_code && data.product_code !== ProductCode.All) {
-      result.product_code = data.product_code
-    }
-    if (data.sku_code && data.sku_code !== "all") {
-      result.sku_code = data.sku_code
-    }
-    if (data.created_at_start)
-      result.created_at_start = new Date(data.created_at_start)
-    if (data.created_at_end)
-      result.created_at_end = new Date(data.created_at_end)
 
-    setFilters(result)
+    if (innerNo) {
+      result.trade_inner_no = innerNo
+    } else {
+      const filters = getValues()
+      if (filters.phone?.trim()) result.user_phone = filters.phone.trim()
+      if (filters.inner_no?.trim())
+        result.trade_inner_no = filters.inner_no.trim()
+      if (filters.bill_no?.trim()) result.bill_no = filters.bill_no.trim()
+      if (filters.resource_no?.trim())
+        result.resource_no = filters.resource_no.trim()
+      if (filters.product_code && filters.product_code !== ProductCode.All) {
+        result.product_code = filters.product_code
+      }
+      if (filters.sku_code && filters.sku_code !== "all") {
+        result.sku_code = filters.sku_code
+      }
+      if (filters.created_at_start)
+        result.created_at_start = new Date(filters.created_at_start)
+      if (filters.created_at_end)
+        result.created_at_end = new Date(filters.created_at_end)
+    }
+    return getPageBill({
+      page,
+      size,
+      ...result,
+    })
+  }
+
+  const clearFilter = () => {
+    router.replace("/billing")
+    reset({
+      bill_no: "",
+      inner_no: "",
+      created_at_start: "",
+      created_at_end: "",
+      phone: "",
+      resource_no: "",
+      sku_code: "all",
+      product_code: "",
+    })
+    setSkuProductCode(ProductCode.All)
+    table.pagination.onPageChange(1)
+  }
+
+  const table = useDataTable<Billing>(loadData)
+
+  const onFilter = handleSubmit(() => {
     table.pagination.onPageChange(1)
   })
-
   return (
     <Page>
       <form onSubmit={onFilter} className="bg-card p-4 rounded-lg">
@@ -310,16 +343,7 @@ export default function BillingPage() {
 
         <FieldGroup className="flex-row justify-start mt-4 gap-2">
           <Button type="submit">搜索</Button>
-          <Button
-            type="button"
-            variant="outline"
-            onClick={() => {
-              reset()
-              setSkuProductCode(ProductCode.All)
-              setFilters({})
-              table.pagination.onPageChange(1)
-            }}
-          >
+          <Button type="button" variant="outline" onClick={clearFilter}>
             重置
           </Button>
         </FieldGroup>
@@ -333,9 +357,31 @@ export default function BillingPage() {
               header: "创建时间",
               accessorKey: "created_at",
               cell: ({ row }) =>
-                format(new Date(row.original.created_at), "yyyy-MM-dd HH:mm"),
+                format(
+                  new Date(row.original.created_at),
+                  "yyyy-MM-dd HH:mm:ss",
+                ),
+            },
+            {
+              header: "套餐号",
+              accessorKey: "resource.resource_no",
+
+              cell: ({ row }) => {
+                const resource_no = row.original.resource?.resource_no
+                return resource_no ? (
+                  <Link
+                    href={`/resources?resource_no=${resource_no}`}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-blue-600 hover:underline cursor-pointer"
+                  >
+                    {resource_no}
+                  </Link>
+                ) : (
+                  <span></span>
+                )
+              },
             },
-            { header: "套餐号", accessorKey: "resource.resource_no" },
             { header: "会员号", accessorFn: row => row.user?.phone || "" },
             {
               header: "账单详情",
@@ -412,7 +458,23 @@ export default function BillingPage() {
                 )
               },
             },
-            { header: "账单号", accessorKey: "bill_no" },
+            {
+              header: "账单号",
+              accessorKey: "bill_no",
+              cell: ({ row }) => {
+                const billNo = row.original.bill_no
+                return (
+                  <Link
+                    href={`./balance?bill_no=${billNo}`}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-blue-600 hover:underline cursor-pointer"
+                  >
+                    {billNo}
+                  </Link>
+                )
+              },
+            },
             {
               header: "订单号",
               accessorKey: "trade.inner_no",