325 lines
10 KiB
TypeScript
325 lines
10 KiB
TypeScript
"use client"
|
|
import { zodResolver } from "@hookform/resolvers/zod"
|
|
import { format } from "date-fns"
|
|
import Link from "next/link"
|
|
import { useRouter, useSearchParams } from "next/navigation"
|
|
import { Suspense } from "react"
|
|
import { Controller, useForm } from "react-hook-form"
|
|
import { z } from "zod"
|
|
import { getPageBatch } from "@/actions/batch"
|
|
import { DataTable, useDataTable } from "@/components/data-table"
|
|
import { Page } from "@/components/page"
|
|
import { Button } from "@/components/ui/button"
|
|
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 { Batch } from "@/models/batch"
|
|
|
|
type APIFilterParams = {
|
|
user_phone?: string
|
|
batch_no?: string
|
|
resource_no?: string
|
|
prov?: string
|
|
city?: string
|
|
isp?: string
|
|
created_at_start?: Date
|
|
created_at_end?: Date
|
|
}
|
|
|
|
const filterSchema = z
|
|
.object({
|
|
user_phone: z.string().optional(),
|
|
resource_no: z.string().optional(),
|
|
batch_no: z.string().optional(),
|
|
prov: z.string().optional(),
|
|
city: z.string().optional(),
|
|
isp: z.string().optional(),
|
|
created_at_start: z.string().optional(),
|
|
created_at_end: z.string().optional(),
|
|
})
|
|
.superRefine((data, ctx) => {
|
|
if (data.created_at_start && data.created_at_end) {
|
|
const start = new Date(data.created_at_start)
|
|
const end = new Date(data.created_at_end)
|
|
|
|
if (end < start) {
|
|
ctx.addIssue({
|
|
code: z.ZodIssueCode.custom,
|
|
message: "结束时间不能早于开始时间",
|
|
path: ["created_at_end"],
|
|
})
|
|
}
|
|
}
|
|
})
|
|
|
|
type FilterSchema = z.infer<typeof filterSchema>
|
|
|
|
export default function BatchPage() {
|
|
const searchParams = useSearchParams()
|
|
const resourceNo = searchParams.get("resource_no")
|
|
const batchNo = searchParams.get("batch_no")
|
|
const router = useRouter()
|
|
const { control, handleSubmit, reset, getValues } = useForm<FilterSchema>({
|
|
resolver: zodResolver(filterSchema),
|
|
defaultValues: {
|
|
user_phone: "",
|
|
batch_no: batchNo || "",
|
|
prov: "",
|
|
resource_no: resourceNo || "",
|
|
city: "",
|
|
isp: "all",
|
|
created_at_start: "",
|
|
created_at_end: "",
|
|
},
|
|
})
|
|
|
|
const table = useDataTable<Batch>((page, size) => {
|
|
const result: APIFilterParams = {}
|
|
const filters = getValues()
|
|
if (filters.user_phone?.trim())
|
|
result.user_phone = filters.user_phone.trim()
|
|
if (filters.batch_no?.trim()) result.batch_no = filters.batch_no.trim()
|
|
if (filters.resource_no?.trim())
|
|
result.resource_no = filters.resource_no.trim()
|
|
if (filters.prov?.trim()) result.prov = filters.prov.trim()
|
|
if (filters.city?.trim()) result.city = filters.city.trim()
|
|
if (filters.isp && filters.isp !== "all") result.isp = filters.isp
|
|
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 getPageBatch({ page, size, ...result })
|
|
})
|
|
|
|
const onFilter = handleSubmit(() => {
|
|
table.pagination.onPageChange(1)
|
|
})
|
|
|
|
return (
|
|
<Page>
|
|
{/* 搜索表单 */}
|
|
<form onSubmit={onFilter} className="bg-card p-4 rounded-lg">
|
|
<div className="flex flex-wrap items-end gap-4">
|
|
<Controller
|
|
name="batch_no"
|
|
control={control}
|
|
render={({ field, fieldState }) => (
|
|
<Field
|
|
data-invalid={fieldState.invalid}
|
|
className="w-40 flex-none"
|
|
>
|
|
<FieldLabel>提取编号</FieldLabel>
|
|
<Input {...field} placeholder="请输入提取编号" clearable />
|
|
<FieldError>{fieldState.error?.message}</FieldError>
|
|
</Field>
|
|
)}
|
|
/>
|
|
<Controller
|
|
name="resource_no"
|
|
control={control}
|
|
render={({ field, fieldState }) => (
|
|
<Field
|
|
data-invalid={fieldState.invalid}
|
|
className="w-40 flex-none"
|
|
>
|
|
<FieldLabel>套餐号</FieldLabel>
|
|
<Input {...field} placeholder="请输入套餐号" clearable />
|
|
<FieldError>{fieldState.error?.message}</FieldError>
|
|
</Field>
|
|
)}
|
|
/>
|
|
<Controller
|
|
name="user_phone"
|
|
control={control}
|
|
render={({ field, fieldState }) => (
|
|
<Field
|
|
data-invalid={fieldState.invalid}
|
|
className="w-40 flex-none"
|
|
>
|
|
<FieldLabel>会员号</FieldLabel>
|
|
<Input {...field} placeholder="请输入会员号" clearable />
|
|
<FieldError>{fieldState.error?.message}</FieldError>
|
|
</Field>
|
|
)}
|
|
/>
|
|
|
|
<Controller
|
|
name="prov"
|
|
control={control}
|
|
render={({ field, fieldState }) => (
|
|
<Field
|
|
data-invalid={fieldState.invalid}
|
|
className="w-32 flex-none"
|
|
>
|
|
<FieldLabel>省份</FieldLabel>
|
|
<Input {...field} placeholder="请输入省份" clearable />
|
|
<FieldError>{fieldState.error?.message}</FieldError>
|
|
</Field>
|
|
)}
|
|
/>
|
|
|
|
<Controller
|
|
name="city"
|
|
control={control}
|
|
render={({ field, fieldState }) => (
|
|
<Field
|
|
data-invalid={fieldState.invalid}
|
|
className="w-32 flex-none"
|
|
>
|
|
<FieldLabel>城市</FieldLabel>
|
|
<Input {...field} placeholder="请输入城市" clearable />
|
|
<FieldError>{fieldState.error?.message}</FieldError>
|
|
</Field>
|
|
)}
|
|
/>
|
|
|
|
<Controller
|
|
name="isp"
|
|
control={control}
|
|
render={({ field, fieldState }) => (
|
|
<Field data-invalid={fieldState.invalid} className="w-32">
|
|
<FieldLabel>运营商</FieldLabel>
|
|
<Select value={field.value} onValueChange={field.onChange}>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="全部" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="all">全部</SelectItem>
|
|
<SelectItem value="1">电信</SelectItem>
|
|
<SelectItem value="2">联通</SelectItem>
|
|
<SelectItem value="3">移动</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
<FieldError>{fieldState.error?.message}</FieldError>
|
|
</Field>
|
|
)}
|
|
/>
|
|
|
|
<Controller
|
|
name="created_at_start"
|
|
control={control}
|
|
render={({ field, fieldState }) => (
|
|
<Field
|
|
data-invalid={fieldState.invalid}
|
|
className="w-40 flex-none"
|
|
>
|
|
<FieldLabel>开始时间</FieldLabel>
|
|
<Input type="date" {...field} />
|
|
<FieldError>{fieldState.error?.message}</FieldError>
|
|
</Field>
|
|
)}
|
|
/>
|
|
|
|
<Controller
|
|
name="created_at_end"
|
|
control={control}
|
|
render={({ field, fieldState }) => (
|
|
<Field
|
|
data-invalid={fieldState.invalid}
|
|
className="w-40 flex-none"
|
|
>
|
|
<FieldLabel>结束时间</FieldLabel>
|
|
<Input type="date" {...field} />
|
|
<FieldError>{fieldState.error?.message}</FieldError>
|
|
</Field>
|
|
)}
|
|
/>
|
|
</div>
|
|
|
|
<FieldGroup className="flex-row justify-start mt-4 gap-2">
|
|
<Button type="submit">搜索</Button>
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
onClick={() => {
|
|
reset({
|
|
user_phone: "",
|
|
batch_no: "",
|
|
prov: "",
|
|
resource_no: "",
|
|
city: "",
|
|
isp: "all",
|
|
created_at_start: "",
|
|
created_at_end: "",
|
|
})
|
|
router.replace("./batch")
|
|
table.pagination.onPageChange(1)
|
|
}}
|
|
>
|
|
重置
|
|
</Button>
|
|
</FieldGroup>
|
|
</form>
|
|
|
|
<Suspense fallback={<div>Loading...</div>}>
|
|
<DataTable<Batch>
|
|
{...table}
|
|
columns={[
|
|
{
|
|
header: "会员号",
|
|
accessorFn: row => row.user?.phone || "",
|
|
},
|
|
{
|
|
header: "套餐号",
|
|
accessorKey: "resource.resource_no",
|
|
cell: ({ row }) => {
|
|
const resourceNo = row.original.resource?.resource_no
|
|
const type = row.original.resource?.type
|
|
return (
|
|
<Link
|
|
href={`/resources?resource_no=${resourceNo}&type=${type}`}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-blue-600"
|
|
>
|
|
{resourceNo}
|
|
</Link>
|
|
)
|
|
},
|
|
},
|
|
{
|
|
header: "提取编号",
|
|
accessorKey: "batch_no",
|
|
cell: ({ row }) => {
|
|
const batch_no = row.original.batch_no
|
|
return (
|
|
<Link
|
|
href={`./channel?batch_no=${batch_no}`}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-blue-600"
|
|
>
|
|
{batch_no}
|
|
</Link>
|
|
)
|
|
},
|
|
},
|
|
{ header: "省份", accessorKey: "prov" },
|
|
{ header: "城市", accessorKey: "city" },
|
|
{ header: "用户IP", accessorKey: "ip" },
|
|
{ header: "运营商", accessorKey: "isp" },
|
|
{ header: "提取数量", accessorKey: "count" },
|
|
{
|
|
header: "提取时间",
|
|
accessorKey: "time",
|
|
cell: ({ row }) =>
|
|
format(new Date(row.original.time), "yyyy-MM-dd HH:mm:ss"),
|
|
},
|
|
]}
|
|
/>
|
|
</Suspense>
|
|
</Page>
|
|
)
|
|
}
|