优化:平台管理员账号独立管理
This commit is contained in:
@@ -17,8 +17,7 @@ import type {
|
||||
LoginResult,
|
||||
LowBalanceAlertConfig,
|
||||
Merchant,
|
||||
MerchantMember,
|
||||
MerchantMemberGroup,
|
||||
MerchantMember,
|
||||
MerchantRole,
|
||||
MerchantProduct,
|
||||
PageResult,
|
||||
@@ -49,15 +48,13 @@ export const dashboardApi = {
|
||||
|
||||
export const userApi = {
|
||||
list: (params?: Record<string, unknown>) =>
|
||||
request.get('/users', { params }).then((r) => r.data.data as PageResult<User>),
|
||||
create: (data: { username: string; password: string; nickname?: string; role?: string }) =>
|
||||
request.post('/users', data).then((r) => r.data.data as User),
|
||||
updateStatus: (id: number, status: number) =>
|
||||
request.patch(`/users/${id}/status`, { status }).then((r) => r.data.data),
|
||||
updateRole: (id: number, role: User['role']) =>
|
||||
request.patch(`/users/${id}/role`, { role }).then((r) => r.data.data),
|
||||
request.get('/platform/admins', { params }).then((r) => r.data.data as PageResult<User>),
|
||||
create: (data: { username: string; password: string; nickname?: string }) =>
|
||||
request.post('/platform/admins', data).then((r) => r.data.data as User),
|
||||
update: (id: number, data: { username: string; nickname?: string; password?: string; status: number }) =>
|
||||
request.patch(`/platform/admins/${id}`, data).then((r) => r.data.data as User),
|
||||
remove: (id: number) =>
|
||||
request.delete(`/users/${id}`).then((r) => r.data.data),
|
||||
request.delete(`/platform/admins/${id}`).then((r) => r.data.data),
|
||||
}
|
||||
|
||||
export const merchantApi = {
|
||||
@@ -179,8 +176,6 @@ export const deliveryApi = {
|
||||
}
|
||||
|
||||
export const platformApi = {
|
||||
members: (params?: Record<string, unknown>) =>
|
||||
request.get('/platform/members', { params }).then((r) => r.data.data as PageResult<MerchantMemberGroup>),
|
||||
merchants: (params?: Record<string, unknown>) =>
|
||||
request.get('/platform/merchants', { params }).then((r) => r.data.data as PageResult<Merchant>),
|
||||
createMerchant: (data: {
|
||||
|
||||
@@ -1,27 +1,33 @@
|
||||
import { useCallback, useEffect, useMemo, useState } from 'react'
|
||||
import { Button, Popconfirm, Space, Table, Tabs, Tag, Typography, message } from 'antd'
|
||||
import { DeleteOutlined, ReloadOutlined, SafetyCertificateOutlined } from '@ant-design/icons'
|
||||
import { useCallback, useEffect, useState } from 'react'
|
||||
import { Button, Form, Input, Modal, Popconfirm, Space, Switch, Table, Tag, Typography, message } from 'antd'
|
||||
import { DeleteOutlined, EditOutlined, PlusOutlined, ReloadOutlined } from '@ant-design/icons'
|
||||
import type { ColumnsType } from 'antd/es/table'
|
||||
import { platformApi, userApi } from '../api'
|
||||
import { userApi } from '../api'
|
||||
import { PageHeader } from '../components/PageHeader'
|
||||
import type { MerchantMember, MerchantMemberGroup, PageResult, User } from '../types'
|
||||
import type { PageResult, User } from '../types'
|
||||
import { formatDateTime } from '../utils/time'
|
||||
import { useAuth } from '../store/auth'
|
||||
import { roleText } from './merchantCenterUtils'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
|
||||
type AdminFormValues = {
|
||||
username: string
|
||||
nickname?: string
|
||||
password?: string
|
||||
status: boolean
|
||||
}
|
||||
|
||||
export default function PlatformUsers() {
|
||||
const { user: currentUser } = useAuth()
|
||||
const navigate = useNavigate()
|
||||
const [tab, setTab] = useState('admins')
|
||||
const [admins, setAdmins] = useState<PageResult<User>>({ list: [], total: 0, page: 1, size: 20 })
|
||||
const [members, setMembers] = useState<PageResult<MerchantMemberGroup>>({ list: [], total: 0, page: 1, size: 20 })
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [submitting, setSubmitting] = useState(false)
|
||||
const [editingAdmin, setEditingAdmin] = useState<User | null>(null)
|
||||
const [modalOpen, setModalOpen] = useState(false)
|
||||
const [form] = Form.useForm<AdminFormValues>()
|
||||
|
||||
const loadAdmins = useCallback(async (page = admins.page, size = admins.size) => {
|
||||
setLoading(true)
|
||||
try {
|
||||
setAdmins(await userApi.list({ page, size, role: 'admin' }))
|
||||
setAdmins(await userApi.list({ page, size }))
|
||||
} catch (e) {
|
||||
message.error(e instanceof Error ? e.message : '加载失败')
|
||||
} finally {
|
||||
@@ -29,141 +35,114 @@ export default function PlatformUsers() {
|
||||
}
|
||||
}, [admins.page, admins.size])
|
||||
|
||||
const loadMembers = useCallback(async (page = members.page, size = members.size) => {
|
||||
setLoading(true)
|
||||
try {
|
||||
setMembers(await platformApi.members({ page, size }))
|
||||
} catch (e) {
|
||||
message.error(e instanceof Error ? e.message : '加载失败')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [members.page, members.size])
|
||||
|
||||
useEffect(() => {
|
||||
if (tab === 'admins') void loadAdmins()
|
||||
else void loadMembers()
|
||||
}, [loadAdmins, loadMembers, tab])
|
||||
void loadAdmins()
|
||||
}, [loadAdmins])
|
||||
|
||||
const openCreate = () => {
|
||||
setEditingAdmin(null)
|
||||
form.setFieldsValue({ username: '', nickname: '', password: '', status: true })
|
||||
setModalOpen(true)
|
||||
}
|
||||
|
||||
const openEdit = (record: User) => {
|
||||
setEditingAdmin(record)
|
||||
form.setFieldsValue({ username: record.username, nickname: record.nickname, password: '', status: record.status === 1 })
|
||||
setModalOpen(true)
|
||||
}
|
||||
|
||||
const submit = async () => {
|
||||
const values = await form.validateFields()
|
||||
setSubmitting(true)
|
||||
try {
|
||||
if (editingAdmin) {
|
||||
await userApi.update(editingAdmin.id, {
|
||||
username: values.username,
|
||||
nickname: values.nickname || '',
|
||||
password: values.password || undefined,
|
||||
status: values.status ? 1 : 0,
|
||||
})
|
||||
message.success('平台管理员已更新')
|
||||
} else {
|
||||
await userApi.create({ username: values.username, password: values.password || '', nickname: values.nickname || '' })
|
||||
message.success('平台管理员已创建')
|
||||
}
|
||||
setModalOpen(false)
|
||||
form.resetFields()
|
||||
void loadAdmins(editingAdmin ? admins.page : 1)
|
||||
} catch (e) {
|
||||
message.error(e instanceof Error ? e.message : editingAdmin ? '更新失败' : '创建失败')
|
||||
} finally {
|
||||
setSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
const remove = async (record: User) => {
|
||||
try {
|
||||
await userApi.remove(record.id)
|
||||
message.success('账号已删除')
|
||||
loadAdmins()
|
||||
message.success('平台管理员已删除')
|
||||
void loadAdmins()
|
||||
} catch (e) {
|
||||
message.error(e instanceof Error ? e.message : '删除失败')
|
||||
}
|
||||
}
|
||||
|
||||
const promote = async (record: MerchantMember) => {
|
||||
try {
|
||||
await userApi.updateRole(record.user_id, 'admin')
|
||||
message.success('已设为平台超级管理员;请使用该账号重新登录')
|
||||
loadMembers()
|
||||
} catch (e) {
|
||||
message.error(e instanceof Error ? e.message : '设置失败')
|
||||
}
|
||||
}
|
||||
|
||||
const adminColumns: ColumnsType<User> = [
|
||||
{ title: '用户名', dataIndex: 'username', width: 240, render: (value) => <Typography.Text strong>{value}</Typography.Text> },
|
||||
{ title: '昵称', dataIndex: 'nickname', width: 180, render: (value) => value || '-' },
|
||||
{ title: '状态', dataIndex: 'status', width: 100, render: (value) => value === 1 ? <Tag color="green">启用</Tag> : <Tag>停用</Tag> },
|
||||
{ title: '创建时间', dataIndex: 'created_at', width: 180, render: formatDateTime },
|
||||
const columns: ColumnsType<User> = [
|
||||
{ title: '用户名', dataIndex: 'username', width: 260, render: (value) => <Typography.Text strong>{value}</Typography.Text> },
|
||||
{ title: '昵称', dataIndex: 'nickname', width: 220, render: (value) => value || '-' },
|
||||
{ title: '状态', dataIndex: 'status', width: 120, render: (value) => value === 1 ? <Tag color="green">启用</Tag> : <Tag>停用</Tag> },
|
||||
{ title: '创建时间', dataIndex: 'created_at', width: 190, render: formatDateTime },
|
||||
{
|
||||
title: '操作',
|
||||
width: 130,
|
||||
width: 190,
|
||||
render: (_, record) => record.id === currentUser?.id ? <Typography.Text type="secondary">当前账号</Typography.Text> : (
|
||||
<Popconfirm title={`确认删除平台管理员「${record.username}」?`} description="删除后该账号及其全部商户成员关系都会被移除。" onConfirm={() => remove(record)} okButtonProps={{ danger: true }}>
|
||||
<Button type="link" danger size="small" icon={<DeleteOutlined />}>删除</Button>
|
||||
</Popconfirm>
|
||||
),
|
||||
},
|
||||
]
|
||||
|
||||
const memberColumns: ColumnsType<MerchantMember> = [
|
||||
{ title: '员工账号', dataIndex: ['user', 'username'], width: 220, render: (_, record) => <Typography.Text strong>{record.user?.username || `#${record.user_id}`}</Typography.Text> },
|
||||
{ title: '昵称', dataIndex: ['user', 'nickname'], width: 180, render: (_, record) => record.user?.nickname || '-' },
|
||||
{ title: '商户角色', dataIndex: 'role', width: 140, render: (role) => <Tag color="blue">{roleText(role)}</Tag> },
|
||||
{ title: '成员状态', dataIndex: 'status', width: 110, render: (status) => status === 1 ? <Tag color="green">启用</Tag> : <Tag>停用</Tag> },
|
||||
{
|
||||
title: '操作',
|
||||
width: 230,
|
||||
render: (_, record) => (
|
||||
<Space size={0}>
|
||||
{record.user?.role !== 'admin' && record.user_id !== currentUser?.id && (
|
||||
<Popconfirm title={`设「${record.user?.username}」为平台超级管理员?`} description="该账号将获得商户创建、平台商户管理等全局权限。" onConfirm={() => promote(record)}>
|
||||
<Button type="link" size="small" icon={<SafetyCertificateOutlined />}>设为平台管理员</Button>
|
||||
</Popconfirm>
|
||||
)}
|
||||
<Button type="link" size="small" icon={<EditOutlined />} onClick={() => openEdit(record)}>编辑</Button>
|
||||
<Popconfirm title={`确认删除平台管理员「${record.username}」?`} description="删除后无法登录平台,且不会影响任何商户员工。" onConfirm={() => remove(record)} okButtonProps={{ danger: true }}>
|
||||
<Button type="link" danger size="small" icon={<DeleteOutlined />}>删除</Button>
|
||||
</Popconfirm>
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
]
|
||||
|
||||
const merchantColumns: ColumnsType<MerchantMemberGroup> = [
|
||||
{
|
||||
title: '商户',
|
||||
width: 310,
|
||||
render: (_, record) => <Space direction="vertical" size={0}><Typography.Text strong>{record.merchant?.name || `商户#${record.merchant_id}`}</Typography.Text><Typography.Text type="secondary" style={{ fontSize: 12 }}>{record.merchant?.code || '-'}</Typography.Text></Space>,
|
||||
},
|
||||
{
|
||||
title: '员工',
|
||||
width: 120,
|
||||
render: (_, record) => <Typography.Text>{record.members.length} 人</Typography.Text>,
|
||||
},
|
||||
{
|
||||
title: '角色分布',
|
||||
render: (_, record) => {
|
||||
const roles = [...new Set(record.members.map((member) => member.role))]
|
||||
return <Space size={[4, 4]} wrap>{roles.map((role) => <Tag color="blue" key={role}>{roleText(role)}</Tag>)}</Space>
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
width: 150,
|
||||
render: (_, record) => {
|
||||
const enabled = record.members.filter((member) => member.status === 1).length
|
||||
return <><Tag color="green">启用 {enabled}</Tag>{enabled < record.members.length && <Tag>停用 {record.members.length - enabled}</Tag>}</>
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
width: 150,
|
||||
render: (_, record) => <Button type="link" size="small" onClick={() => {
|
||||
localStorage.setItem('merchant_id', String(record.merchant_id))
|
||||
navigate('/merchant-members')
|
||||
}}>管理该商户员工</Button>,
|
||||
},
|
||||
]
|
||||
|
||||
const items = useMemo(() => [
|
||||
{
|
||||
key: 'admins',
|
||||
label: `平台管理员 (${admins.total})`,
|
||||
children: <Table rowKey="id" loading={loading} columns={adminColumns} dataSource={admins.list} pagination={{ current: admins.page, pageSize: admins.size, total: admins.total, showSizeChanger: true, onChange: (page, size) => loadAdmins(page, size) }} />,
|
||||
},
|
||||
{
|
||||
key: 'members',
|
||||
label: `商户员工 (${members.total})`,
|
||||
children: <Table
|
||||
rowKey="merchant_id"
|
||||
loading={loading}
|
||||
columns={merchantColumns}
|
||||
dataSource={members.list}
|
||||
expandable={{
|
||||
expandedRowRender: (record) => <Table rowKey="id" size="small" columns={memberColumns} dataSource={record.members} pagination={false} />,
|
||||
rowExpandable: (record) => record.members.length > 0,
|
||||
}}
|
||||
pagination={{ current: members.page, pageSize: members.size, total: members.total, showSizeChanger: true, onChange: (page, size) => loadMembers(page, size) }}
|
||||
/>,
|
||||
},
|
||||
], [adminColumns, admins, loadAdmins, loadMembers, loading, memberColumns, members])
|
||||
|
||||
return (
|
||||
<div>
|
||||
<PageHeader title="账号管理" subtitle="平台管理员管理全局业务;商户员工的角色与权限归属各自商户。" breadcrumbs={[{ title: '账号管理' }]} extra={<Button icon={<ReloadOutlined />} loading={loading} onClick={() => tab === 'admins' ? loadAdmins() : loadMembers()}>刷新</Button>} />
|
||||
<Tabs activeKey={tab} onChange={setTab} items={items} />
|
||||
<PageHeader
|
||||
title="平台管理员"
|
||||
subtitle="仅管理平台系统账号,不关联商户、商户员工或商户角色。"
|
||||
breadcrumbs={[{ title: '账号管理' }]}
|
||||
extra={<Space><Button icon={<ReloadOutlined />} loading={loading} onClick={() => void loadAdmins()}>刷新</Button><Button type="primary" icon={<PlusOutlined />} onClick={openCreate}>新建平台管理员</Button></Space>}
|
||||
/>
|
||||
<Table
|
||||
rowKey="id"
|
||||
loading={loading}
|
||||
columns={columns}
|
||||
dataSource={admins.list}
|
||||
pagination={{ current: admins.page, pageSize: admins.size, total: admins.total, showSizeChanger: true, onChange: (page, size) => void loadAdmins(page, size) }}
|
||||
/>
|
||||
<Modal
|
||||
title={editingAdmin ? '编辑平台管理员' : '新建平台管理员'}
|
||||
open={modalOpen}
|
||||
onCancel={() => setModalOpen(false)}
|
||||
onOk={() => void submit()}
|
||||
confirmLoading={submitting}
|
||||
okText="保存"
|
||||
destroyOnHidden
|
||||
>
|
||||
<Form form={form} layout="vertical" preserve={false} initialValues={{ status: true }}>
|
||||
<Form.Item label="用户名" name="username" rules={[{ required: true, message: '请输入用户名' }, { max: 64, message: '用户名不能超过 64 个字符' }]}>
|
||||
<Input autoComplete="off" />
|
||||
</Form.Item>
|
||||
<Form.Item label="昵称" name="nickname" rules={[{ max: 64, message: '昵称不能超过 64 个字符' }]}>
|
||||
<Input autoComplete="off" />
|
||||
</Form.Item>
|
||||
<Form.Item label={editingAdmin ? '新密码' : '密码'} name="password" rules={editingAdmin ? [{ min: 6, message: '密码至少 6 位' }] : [{ required: true, message: '请输入密码' }, { min: 6, message: '密码至少 6 位' }]} extra={editingAdmin ? '留空表示不修改密码' : undefined}>
|
||||
<Input.Password autoComplete="new-password" />
|
||||
</Form.Item>
|
||||
{editingAdmin && <Form.Item label="账号状态" name="status" valuePropName="checked"><Switch checkedChildren="启用" unCheckedChildren="停用" /></Form.Item>}
|
||||
</Form>
|
||||
</Modal>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -33,12 +33,6 @@ export interface MerchantMember {
|
||||
created_at: string
|
||||
}
|
||||
|
||||
export interface MerchantMemberGroup {
|
||||
merchant_id: number
|
||||
merchant?: Merchant
|
||||
members: MerchantMember[]
|
||||
}
|
||||
|
||||
export interface MerchantRole {
|
||||
id: number
|
||||
merchant_id: number
|
||||
|
||||
Reference in New Issue
Block a user