feat(admin-v2): wire Accounts table search to API params

- Add searchParams state connected to useQuery queryKey/queryFn
- Enable role and status columns as searchable select dropdowns
- Map username search field to backend 'search' param
- Add onSubmit/onReset callbacks on ProTable
This commit is contained in:
iven
2026-03-31 16:29:30 +08:00
parent 4b9698034c
commit 721451f6a7

View File

@@ -40,10 +40,11 @@ export default function Accounts() {
const [form] = Form.useForm() const [form] = Form.useForm()
const [modalOpen, setModalOpen] = useState(false) const [modalOpen, setModalOpen] = useState(false)
const [editingId, setEditingId] = useState<string | null>(null) const [editingId, setEditingId] = useState<string | null>(null)
const [searchParams, setSearchParams] = useState<Record<string, string>>({})
const { data, isLoading } = useQuery({ const { data, isLoading } = useQuery({
queryKey: ['accounts'], queryKey: ['accounts', searchParams],
queryFn: ({ signal }) => accountService.list(signal), queryFn: ({ signal }) => accountService.list(searchParams, signal),
}) })
const updateMutation = useMutation({ const updateMutation = useMutation({
@@ -68,21 +69,31 @@ export default function Accounts() {
}) })
const columns: ProColumns<AccountPublic>[] = [ const columns: ProColumns<AccountPublic>[] = [
{ title: '用户名', dataIndex: 'username', width: 120 }, { title: '用户名', dataIndex: 'username', width: 120, tooltip: '搜索用户名、邮箱或显示名' },
{ title: '显示名', dataIndex: 'display_name', width: 120, hideInSearch: true }, { title: '显示名', dataIndex: 'display_name', width: 120, hideInSearch: true },
{ title: '邮箱', dataIndex: 'email', width: 180 }, { title: '邮箱', dataIndex: 'email', width: 180 },
{ {
title: '角色', title: '角色',
dataIndex: 'role', dataIndex: 'role',
width: 120, width: 120,
hideInSearch: true, valueType: 'select',
valueEnum: {
super_admin: { text: '超级管理员' },
admin: { text: '管理员' },
user: { text: '用户' },
},
render: (_, record) => <Tag color={roleColors[record.role]}>{roleLabels[record.role] || record.role}</Tag>, render: (_, record) => <Tag color={roleColors[record.role]}>{roleLabels[record.role] || record.role}</Tag>,
}, },
{ {
title: '状态', title: '状态',
dataIndex: 'status', dataIndex: 'status',
width: 100, width: 100,
hideInSearch: true, valueType: 'select',
valueEnum: {
active: { text: '正常', status: 'Success' },
disabled: { text: '已禁用', status: 'Default' },
suspended: { text: '已封禁', status: 'Error' },
},
render: (_, record) => <Tag color={statusColors[record.status]}>{statusLabels[record.status] || record.status}</Tag>, render: (_, record) => <Tag color={statusColors[record.status]}>{statusLabels[record.status] || record.status}</Tag>,
}, },
{ {
@@ -154,6 +165,21 @@ export default function Accounts() {
rowKey="id" rowKey="id"
search={{}} search={{}}
toolBarRender={() => []} toolBarRender={() => []}
onSubmit={(values) => {
const filtered: Record<string, string> = {}
for (const [k, v] of Object.entries(values)) {
if (v !== undefined && v !== null && v !== '') {
// Map 'username' search field to backend 'search' param
if (k === 'username') {
filtered.search = String(v)
} else {
filtered[k] = String(v)
}
}
}
setSearchParams(filtered)
}}
onReset={() => setSearchParams({})}
pagination={{ pagination={{
total: data?.total ?? 0, total: data?.total ?? 0,
pageSize: data?.page_size ?? 20, pageSize: data?.page_size ?? 20,