314 lines
9.8 KiB
TypeScript
314 lines
9.8 KiB
TypeScript
|
"use client"
|
||
|
|
import { zodResolver } from "@hookform/resolvers/zod"
|
||
|
|
import { format } from "date-fns"
|
||
|
|
import { Suspense, useCallback, useEffect, useState } from "react"
|
||
|
|
import { Controller, useForm } from "react-hook-form"
|
||
|
|
import { toast } from "sonner"
|
||
|
|
import { z } from "zod"
|
||
|
|
import { getPageUser } from "@/actions/user"
|
||
|
|
import { DeductionDialog } from "@/app/(root)/cust/deduction"
|
||
|
|
import { DepositDialog } from "@/app/(root)/cust/deposit"
|
||
|
|
import { UpdateDialog } from "@/app/(root)/cust/update"
|
||
|
|
import { Auth } from "@/components/auth"
|
||
|
|
import { DataTable } 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 {
|
||
|
|
ScopeUserWriteBalance,
|
||
|
|
ScopeUserWriteBalanceDec,
|
||
|
|
ScopeUserWriteBalanceInc,
|
||
|
|
} from "@/lib/scopes"
|
||
|
|
import type { Cust } from "@/models/cust"
|
||
|
|
import type { User } from "@/models/user"
|
||
|
|
|
||
|
|
interface UserQueryParams {
|
||
|
|
account?: string
|
||
|
|
name?: string
|
||
|
|
}
|
||
|
|
|
||
|
|
const filterSchema = z.object({
|
||
|
|
account: z.string().optional(),
|
||
|
|
name: z.string().optional(),
|
||
|
|
})
|
||
|
|
|
||
|
|
type FormValues = z.infer<typeof filterSchema>
|
||
|
|
|
||
|
|
export default function UserQueryPage() {
|
||
|
|
const [userList, setUserList] = useState<User[]>([])
|
||
|
|
const [loading, setLoading] = useState(false)
|
||
|
|
const [depositDialog, setDepositDialog] = useState(false)
|
||
|
|
const [deposit, setDeposit] = useState<Cust | null>(null)
|
||
|
|
|
||
|
|
const [deductionDialog, setDeductionDialog] = useState(false)
|
||
|
|
const [deduction, setDeduction] = useState<Cust | null>(null)
|
||
|
|
const [isEditDialogOpen, setIsEditDialogOpen] = useState(false)
|
||
|
|
const [currentEditUser, setCurrentEditUser] = useState<Cust | null>(null)
|
||
|
|
const [currentFilters, setCurrentFilters] = useState<UserQueryParams>({})
|
||
|
|
|
||
|
|
const { control, handleSubmit, reset } = useForm<FormValues>({
|
||
|
|
resolver: zodResolver(filterSchema),
|
||
|
|
defaultValues: {
|
||
|
|
account: "",
|
||
|
|
name: "",
|
||
|
|
},
|
||
|
|
})
|
||
|
|
|
||
|
|
const fetchUsers = useCallback(async (filters: UserQueryParams = {}) => {
|
||
|
|
setLoading(true)
|
||
|
|
try {
|
||
|
|
const res = await getPageUser(filters)
|
||
|
|
console.log(res, "res")
|
||
|
|
|
||
|
|
if (res.success) {
|
||
|
|
const data = Array.isArray(res.data) ? res.data : [res.data]
|
||
|
|
setUserList(data)
|
||
|
|
} else {
|
||
|
|
toast.error(res.message || "获取用户失败")
|
||
|
|
setUserList([])
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
const message = error instanceof Error ? error.message : error
|
||
|
|
toast.error(`获取用户失败: ${message}`)
|
||
|
|
} finally {
|
||
|
|
setLoading(false)
|
||
|
|
}
|
||
|
|
}, [])
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
fetchUsers()
|
||
|
|
}, [fetchUsers])
|
||
|
|
|
||
|
|
const onFilter = handleSubmit((data: FormValues) => {
|
||
|
|
const params: UserQueryParams = {}
|
||
|
|
if (data.account?.trim()) params.account = data.account.trim()
|
||
|
|
if (data.name?.trim()) params.name = data.name.trim()
|
||
|
|
setCurrentFilters(params)
|
||
|
|
fetchUsers(params)
|
||
|
|
})
|
||
|
|
|
||
|
|
const refreshTable = useCallback(() => {
|
||
|
|
fetchUsers(currentFilters)
|
||
|
|
}, [fetchUsers, currentFilters])
|
||
|
|
|
||
|
|
const handleReset = () => {
|
||
|
|
reset()
|
||
|
|
setCurrentFilters({})
|
||
|
|
fetchUsers()
|
||
|
|
}
|
||
|
|
|
||
|
|
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>
|
||
|
|
)}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<FieldGroup className="flex-row justify-start mt-4 gap-2">
|
||
|
|
<Button type="submit">筛选</Button>
|
||
|
|
<Button type="button" variant="outline" onClick={handleReset}>
|
||
|
|
重置
|
||
|
|
</Button>
|
||
|
|
</FieldGroup>
|
||
|
|
</form>
|
||
|
|
|
||
|
|
<Suspense>
|
||
|
|
<DataTable<User>
|
||
|
|
data={userList || []}
|
||
|
|
status={loading ? "load" : "done"}
|
||
|
|
columns={[
|
||
|
|
{ header: "账号", accessorKey: "username" },
|
||
|
|
{ header: "手机", accessorKey: "phone" },
|
||
|
|
{ header: "邮箱", accessorKey: "email" },
|
||
|
|
{ header: "姓名", accessorKey: "name" },
|
||
|
|
{
|
||
|
|
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: "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: "id_no",
|
||
|
|
cell: ({ row }) => {
|
||
|
|
const idNo = row.original.id_no
|
||
|
|
return idNo ? `${idNo.slice(0, 6)}****${idNo.slice(-4)}` : ""
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{
|
||
|
|
header: "客户来源",
|
||
|
|
accessorKey: "source",
|
||
|
|
cell: ({ row }) => {
|
||
|
|
const sourceMap: Record<number, string> = {
|
||
|
|
0: "官网注册",
|
||
|
|
1: "管理员添加",
|
||
|
|
2: "代理商注册",
|
||
|
|
3: "代理商添加",
|
||
|
|
}
|
||
|
|
return sourceMap[row.original.source] ?? "未知"
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{
|
||
|
|
header: "账号状态",
|
||
|
|
accessorKey: "status",
|
||
|
|
cell: ({ row }) => (row.original.status === 1 ? "正常" : "禁用"),
|
||
|
|
},
|
||
|
|
{ header: "联系方式", accessorKey: "contact_wechat" },
|
||
|
|
{
|
||
|
|
header: "客户经理",
|
||
|
|
cell: ({ row }) => row.original.admin?.name || "",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
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: "created_at",
|
||
|
|
cell: ({ row }) =>
|
||
|
|
format(new Date(row.original.created_at), "yyyy-MM-dd HH:mm"),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: "action",
|
||
|
|
meta: { pin: "right" },
|
||
|
|
header: "操作",
|
||
|
|
cell: ({ row }) => {
|
||
|
|
return (
|
||
|
|
<div className="flex gap-2">
|
||
|
|
<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>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
},
|
||
|
|
},
|
||
|
|
]}
|
||
|
|
/>
|
||
|
|
</Suspense>
|
||
|
|
|
||
|
|
<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>
|
||
|
|
)
|
||
|
|
}
|