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:
@@ -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,
|
||||||
|
|||||||
Reference in New Issue
Block a user