503 lines
16 KiB
TypeScript
503 lines
16 KiB
TypeScript
"use client"
|
||
|
||
import { zodResolver } from "@hookform/resolvers/zod"
|
||
import { format } from "date-fns"
|
||
import { useRouter } from "next/navigation"
|
||
import { Suspense, useCallback, useState } from "react"
|
||
import { Controller, useForm } from "react-hook-form"
|
||
import { z } from "zod"
|
||
import { getPageCusts } from "@/actions/cust"
|
||
import { Auth } from "@/components/auth"
|
||
import { DataTable, useDataTable } from "@/components/data-table"
|
||
import { Badge } from "@/components/ui/badge"
|
||
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 {
|
||
ScopeBalanceActivityReadOfUser,
|
||
ScopeBatchReadOfUser,
|
||
ScopeBillReadOfUser,
|
||
ScopeChannelReadOfUser,
|
||
ScopeResourceRead,
|
||
ScopeTradeReadOfUser,
|
||
ScopeUserWrite,
|
||
ScopeUserWriteBalance,
|
||
ScopeUserWriteBalanceDec,
|
||
ScopeUserWriteBalanceInc,
|
||
} from "@/lib/scopes"
|
||
import type { User } from "@/models/user"
|
||
import { AddUserDialog } from "./create"
|
||
import { DeductionDialog } from "./deduction"
|
||
import { DepositDialog } from "./deposit"
|
||
import { UpdateDialog } from "./update"
|
||
|
||
type FilterValues = {
|
||
account?: string
|
||
name?: string
|
||
identified?: boolean
|
||
enabled?: boolean
|
||
created_at_start?: Date
|
||
created_at_end?: Date
|
||
}
|
||
|
||
const filterSchema = z
|
||
.object({
|
||
account: z.string().optional(),
|
||
name: z.string().optional(),
|
||
identified: z.string().optional(),
|
||
enabled: 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 FormValues = z.infer<typeof filterSchema>
|
||
|
||
export default function CustPage() {
|
||
const [filters, setFilters] = useState<FilterValues>({})
|
||
const [isAddDialogOpen, setIsAddDialogOpen] = useState(false)
|
||
const [isEditDialogOpen, setIsEditDialogOpen] = useState(false)
|
||
const [currentEditUser, setCurrentEditUser] = useState<User | null>(null)
|
||
const [depositDialog, setDepositDialog] = useState(false)
|
||
const [deposit, setDeposit] = useState<User | null>(null)
|
||
const router = useRouter()
|
||
const [deductionDialog, setDeductionDialog] = useState(false)
|
||
const [deduction, setDeduction] = useState<User | null>(null)
|
||
const { control, handleSubmit, reset } = useForm<FormValues>({
|
||
resolver: zodResolver(filterSchema),
|
||
defaultValues: {
|
||
account: "",
|
||
name: "",
|
||
identified: "all",
|
||
enabled: "all",
|
||
created_at_start: "",
|
||
created_at_end: "",
|
||
},
|
||
})
|
||
|
||
const fetchUsers = useCallback(
|
||
(page: number, size: number) => getPageCusts({ page, size, ...filters }),
|
||
[filters],
|
||
)
|
||
|
||
const table = useDataTable<User>(fetchUsers)
|
||
|
||
const onFilter = handleSubmit(data => {
|
||
const result: FilterValues = {}
|
||
if (data.account) result.account = data.account
|
||
if (data.name) result.name = data.name
|
||
if (data.identified && data.identified !== "all")
|
||
result.identified = data.identified === "1"
|
||
if (data.enabled && data.enabled !== "all")
|
||
result.enabled = data.enabled === "1"
|
||
setFilters(result)
|
||
table.pagination.onPageChange(1)
|
||
})
|
||
|
||
const refreshTable = useCallback(() => {
|
||
table.refresh()
|
||
}, [table])
|
||
|
||
return (
|
||
<div className="space-y-3">
|
||
<form onSubmit={onFilter} className="bg-white p-4">
|
||
<div className="flex flex-wrap items-end gap-4">
|
||
<Controller
|
||
name="account"
|
||
control={control}
|
||
render={({ field, fieldState }) => (
|
||
<Field
|
||
data-invalid={fieldState.invalid}
|
||
className="w-80 flex-none"
|
||
>
|
||
<FieldLabel>账号/手机号/邮箱</FieldLabel>
|
||
<Input {...field} placeholder="请输入账号/手机号/邮箱" />
|
||
<FieldError>{fieldState.error?.message}</FieldError>
|
||
</Field>
|
||
)}
|
||
/>
|
||
|
||
<Controller
|
||
name="name"
|
||
control={control}
|
||
render={({ field, fieldState }) => (
|
||
<Field
|
||
data-invalid={fieldState.invalid}
|
||
className="w-40 flex-none"
|
||
>
|
||
<FieldLabel>姓名</FieldLabel>
|
||
<Input {...field} placeholder="请输入姓名" />
|
||
<FieldError>{fieldState.error?.message}</FieldError>
|
||
</Field>
|
||
)}
|
||
/>
|
||
|
||
<Controller
|
||
name="identified"
|
||
control={control}
|
||
render={({ field, fieldState }) => (
|
||
<Field data-invalid={fieldState.invalid} className="w-24">
|
||
<FieldLabel>实名状态</FieldLabel>
|
||
<Select value={field.value} onValueChange={field.onChange}>
|
||
<SelectTrigger className="w-24">
|
||
<SelectValue placeholder="全部" />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="all">全部</SelectItem>
|
||
<SelectItem value="1">已认证</SelectItem>
|
||
<SelectItem value="0">未认证</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
<FieldError>{fieldState.error?.message}</FieldError>
|
||
</Field>
|
||
)}
|
||
/>
|
||
|
||
<Controller
|
||
name="enabled"
|
||
control={control}
|
||
render={({ field, fieldState }) => (
|
||
<Field data-invalid={fieldState.invalid} className="w-24">
|
||
<FieldLabel>账号状态</FieldLabel>
|
||
<Select value={field.value} onValueChange={field.onChange}>
|
||
<SelectTrigger>
|
||
<SelectValue placeholder="全部" />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="all">全部</SelectItem>
|
||
<SelectItem value="1">正常</SelectItem>
|
||
<SelectItem value="0">禁用</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">
|
||
<Auth scope={ScopeUserWrite}>
|
||
<Button type="button" onClick={() => setIsAddDialogOpen(true)}>
|
||
添加用户
|
||
</Button>
|
||
</Auth>
|
||
<Button
|
||
type="button"
|
||
variant="outline"
|
||
onClick={() => {
|
||
reset()
|
||
setFilters({})
|
||
table.pagination.onPageChange(1)
|
||
}}
|
||
>
|
||
重置
|
||
</Button>
|
||
<Button type="submit">筛选</Button>
|
||
</FieldGroup>
|
||
</form>
|
||
|
||
<Suspense>
|
||
<DataTable<User>
|
||
{...table}
|
||
columns={[
|
||
{ header: "手机", accessorKey: "phone" },
|
||
{
|
||
header: "创建时间",
|
||
accessorKey: "created_at",
|
||
cell: ({ row }) =>
|
||
format(new Date(row.original.created_at), "yyyy-MM-dd HH:mm"),
|
||
},
|
||
// { header: "邮箱", accessorKey: "email" },
|
||
{
|
||
header: "客户来源",
|
||
accessorKey: "source",
|
||
cell: ({ row }) => {
|
||
const sourceMap: Record<number, string> = {
|
||
0: "官网注册",
|
||
1: "管理员添加",
|
||
2: "代理商注册",
|
||
3: "代理商添加",
|
||
}
|
||
return sourceMap[row.original.source] ?? "官网注册"
|
||
},
|
||
},
|
||
{
|
||
header: "余额",
|
||
accessorKey: "balance",
|
||
cell: ({ row }) => {
|
||
const balance = Number(row.original.balance) || 0
|
||
return (
|
||
<span
|
||
className={
|
||
balance > 0 ? "text-green-500" : "text-orange-500"
|
||
}
|
||
>
|
||
￥{balance.toFixed(2)}
|
||
</span>
|
||
)
|
||
},
|
||
},
|
||
{ header: "账号", accessorKey: "username" },
|
||
{
|
||
header: "账号状态",
|
||
accessorKey: "status",
|
||
cell: ({ row }) => (row.original.status === 1 ? "正常" : "禁用"),
|
||
},
|
||
{ header: "客户经理", accessorKey: "admin.name" },
|
||
{ header: "姓名", accessorKey: "name" },
|
||
{
|
||
header: "身份证号",
|
||
accessorKey: "id_no",
|
||
cell: ({ row }) => {
|
||
const idNo = row.original.id_no
|
||
return idNo ? `${idNo.slice(0, 6)}****${idNo.slice(-4)}` : ""
|
||
},
|
||
},
|
||
{
|
||
header: "实名状态",
|
||
accessorKey: "id_type",
|
||
cell: ({ row }) => (
|
||
<Badge
|
||
variant={row.original.id_type === 1 ? "default" : "secondary"}
|
||
className={
|
||
row.original.id_type === 1
|
||
? "bg-green-100 text-green-800"
|
||
: "bg-gray-100 text-gray-800"
|
||
}
|
||
>
|
||
{row.original.id_type === 1 ? "已认证" : "未认证"}
|
||
</Badge>
|
||
),
|
||
},
|
||
{
|
||
header: "最后登录时间",
|
||
accessorKey: "last_login",
|
||
cell: ({ row }) =>
|
||
row.original.last_login
|
||
? format(
|
||
new Date(row.original.last_login),
|
||
"yyyy-MM-dd HH:mm",
|
||
)
|
||
: "",
|
||
},
|
||
{
|
||
header: "最后登录IP",
|
||
accessorKey: "last_login_ip",
|
||
cell: ({ row }) => row.original.last_login_ip || "",
|
||
},
|
||
{ header: "折扣", accessorKey: "discount.name" },
|
||
{
|
||
header: "联系方式",
|
||
cell: ({ row }) => {
|
||
const qq = row.original.contact_qq || ""
|
||
const wechat = row.original.contact_wechat || ""
|
||
const hasQQ = qq.trim() !== ""
|
||
const hasWechat = wechat.trim() !== ""
|
||
if (!hasQQ && !hasWechat) return null
|
||
return (
|
||
<div className="space-y-1">
|
||
{hasWechat && <div>微信：{wechat}</div>}
|
||
{hasQQ && <div>QQ：{qq}</div>}
|
||
</div>
|
||
)
|
||
},
|
||
},
|
||
{
|
||
id: "action",
|
||
meta: { pin: "right" },
|
||
header: "操作",
|
||
cell: ({ row }) => {
|
||
return (
|
||
<div className="flex flex-wrap gap-2 w-75">
|
||
<Auth scope={ScopeUserWriteBalanceInc}>
|
||
<Button
|
||
size="sm"
|
||
onClick={() => {
|
||
setDeposit(row.original)
|
||
setDepositDialog(true)
|
||
}}
|
||
>
|
||
充值
|
||
</Button>
|
||
</Auth>
|
||
<Auth scope={ScopeUserWriteBalanceDec}>
|
||
<Button
|
||
size="sm"
|
||
onClick={() => {
|
||
setDeduction(row.original)
|
||
setDeductionDialog(true)
|
||
}}
|
||
>
|
||
扣款
|
||
</Button>
|
||
</Auth>
|
||
<Auth scope={ScopeUserWriteBalance}>
|
||
<Button
|
||
size="sm"
|
||
onClick={() => {
|
||
setCurrentEditUser(row.original)
|
||
setIsEditDialogOpen(true)
|
||
}}
|
||
>
|
||
修改
|
||
</Button>
|
||
</Auth>
|
||
<Auth scope={ScopeTradeReadOfUser}>
|
||
<Button
|
||
size="sm"
|
||
onClick={() => {
|
||
router.push(`/client/trade?userId=${row.original.id}`)
|
||
}}
|
||
>
|
||
交易明细
|
||
</Button>
|
||
</Auth>
|
||
<Auth scope={ScopeBillReadOfUser}>
|
||
<Button
|
||
size="sm"
|
||
onClick={() => {
|
||
router.push(
|
||
`/client/billing?userId=${row.original.id}`,
|
||
)
|
||
}}
|
||
>
|
||
账单详情
|
||
</Button>
|
||
</Auth>
|
||
<Auth scope={ScopeResourceRead}>
|
||
<Button
|
||
size="sm"
|
||
onClick={() => {
|
||
router.push(
|
||
`/client/resources?userId=${row.original.id}`,
|
||
)
|
||
}}
|
||
>
|
||
套餐管理
|
||
</Button>
|
||
</Auth>
|
||
<Auth scope={ScopeBatchReadOfUser}>
|
||
<Button
|
||
size="sm"
|
||
onClick={() => {
|
||
router.push(`/client/batch?userId=${row.original.id}`)
|
||
}}
|
||
>
|
||
提取记录
|
||
</Button>
|
||
</Auth>
|
||
<Auth scope={ScopeChannelReadOfUser}>
|
||
<Button
|
||
size="sm"
|
||
onClick={() => {
|
||
router.push(
|
||
`/client/channel?userId=${row.original.id}`,
|
||
)
|
||
}}
|
||
>
|
||
IP管理
|
||
</Button>
|
||
</Auth>
|
||
<Auth scope={ScopeBalanceActivityReadOfUser}>
|
||
<Button
|
||
size="sm"
|
||
onClick={() => {
|
||
router.push(
|
||
`/client/balance?userId=${row.original.id}&phone=${row.original.phone}`,
|
||
)
|
||
}}
|
||
>
|
||
余额操作
|
||
</Button>
|
||
</Auth>
|
||
</div>
|
||
)
|
||
},
|
||
},
|
||
]}
|
||
/>
|
||
</Suspense>
|
||
|
||
<AddUserDialog
|
||
open={isAddDialogOpen}
|
||
onOpenChange={setIsAddDialogOpen}
|
||
onSuccess={refreshTable}
|
||
/>
|
||
|
||
<UpdateDialog
|
||
open={isEditDialogOpen}
|
||
onOpenChange={setIsEditDialogOpen}
|
||
currentUser={currentEditUser}
|
||
onSuccess={refreshTable}
|
||
/>
|
||
|
||
<DepositDialog
|
||
open={depositDialog}
|
||
onOpenChange={setDepositDialog}
|
||
currentUser={deposit}
|
||
onSuccess={refreshTable}
|
||
/>
|
||
<DeductionDialog
|
||
open={deductionDialog}
|
||
onOpenChange={setDeductionDialog}
|
||
currentUser={deduction}
|
||
onSuccess={refreshTable}
|
||
/>
|
||
</div>
|
||
)
|
||
}
|