功能：优化账号分层与管理员初始化

2026-08-13 13:18:41 +08:00
parent ac44fda08b
commit 1f85add5e0
12 changed files with 270 additions and 25 deletions
@@ -53,6 +53,8 @@ export const userApi = {
    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),
  remove: (id: number) =>
    request.delete(`/users/${id}`).then((r) => r.data.data),
 }
@@ -176,6 +178,8 @@ export const deliveryApi = {
 }

 export const platformApi = {
+  members: (params?: Record<string, unknown>) =>
+    request.get('/platform/members', { params }).then((r) => r.data.data as PageResult<MerchantMember>),
  merchants: (params?: Record<string, unknown>) =>
    request.get('/platform/merchants', { params }).then((r) => r.data.data as PageResult<Merchant>),
  createMerchant: (data: {
@@ -1,64 +1,128 @@
-import { useCallback, useEffect, useState } from 'react'
-import { Button, Popconfirm, Table, Tag, Typography, message } from 'antd'
-import { DeleteOutlined, ReloadOutlined } from '@ant-design/icons'
+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 type { ColumnsType } from 'antd/es/table'
-import { userApi } from '../api'
+import { platformApi, userApi } from '../api'
 import { PageHeader } from '../components/PageHeader'
-import type { PageResult, User } from '../types'
+import type { MerchantMember, PageResult, User } from '../types'
 import { formatDateTime } from '../utils/time'
 import { useAuth } from '../store/auth'
+import { roleText } from './merchantCenterUtils'
+import { useNavigate } from 'react-router-dom'

 export default function PlatformUsers() {
  const { user: currentUser } = useAuth()
-  const [data, setData] = useState<PageResult<User>>({ list: [], total: 0, page: 1, size: 20 })
+  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<MerchantMember>>({ list: [], total: 0, page: 1, size: 20 })
  const [loading, setLoading] = useState(false)

-  const load = useCallback(async (page = data.page, size = data.size) => {
+  const loadAdmins = useCallback(async (page = admins.page, size = admins.size) => {
    setLoading(true)
    try {
-      setData(await userApi.list({ page, size }))
+      setAdmins(await userApi.list({ page, size, role: 'admin' }))
    } catch (e) {
      message.error(e instanceof Error ? e.message : '加载失败')
    } finally {
      setLoading(false)
    }
-  }, [data.page, data.size])
+  }, [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(() => {
-    void load()
-  }, [load])
+    if (tab === 'admins') void loadAdmins()
+    else void loadMembers()
+  }, [loadAdmins, loadMembers, tab])

  const remove = async (record: User) => {
    try {
      await userApi.remove(record.id)
      message.success('账号已删除')
-      load()
+      loadAdmins()
    } catch (e) {
      message.error(e instanceof Error ? e.message : '删除失败')
    }
  }

-  const columns: ColumnsType<User> = [
-    { title: '用户名', dataIndex: 'username', width: 220, render: (value) => <Typography.Text strong>{value}</Typography.Text> },
+  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: 'role', width: 140, render: (value) => <Tag color={value === 'admin' ? 'blue' : 'default'}>{value === 'admin' ? '平台管理员' : '商户账号'}</Tag> },
    { title: '状态', dataIndex: 'status', width: 100, render: (value) => value === 1 ? <Tag color="green">启用</Tag> : <Tag>停用</Tag> },
    { title: '创建时间', dataIndex: 'created_at', width: 180, render: formatDateTime },
    {
      title: '操作',
-      width: 120,
+      width: 130,
      render: (_, record) => record.id === currentUser?.id ? <Typography.Text type="secondary">当前账号</Typography.Text> : (
-        <Popconfirm title={`确认删除账号「${record.username}」？`} description="账号及其全部商户成员关系会被删除。" onConfirm={() => remove(record)} okButtonProps={{ danger: true }}>
+        <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: '商户', width: 240, 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: '员工账号', dataIndex: ['user', 'username'], width: 200, render: (_, record) => record.user?.username || `#${record.user_id}` },
+    { title: '昵称', dataIndex: ['user', 'nickname'], width: 160, render: (_, record) => record.user?.nickname || '-' },
+    { title: '商户角色', dataIndex: 'role', width: 130, 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" onClick={() => {
+            localStorage.setItem('merchant_id', String(record.merchant_id))
+            navigate('/merchant-members')
+          }}>管理商户成员</Button>
+        </Space>
+      ),
+    },
+  ]
+
+  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="id" loading={loading} columns={memberColumns} dataSource={members.list} 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={() => load()}>刷新</Button>} />
-      <Table rowKey="id" loading={loading} columns={columns} dataSource={data.list} pagination={{ current: data.page, pageSize: data.size, total: data.total, showSizeChanger: true, onChange: (page, size) => load(page, size) }} />
+      <PageHeader title="账号管理" subtitle="平台管理员管理全局业务；商户员工的角色与权限归属各自商户。" breadcrumbs={[{ title: '账号管理' }]} extra={<Button icon={<ReloadOutlined />} loading={loading} onClick={() => tab === 'admins' ? loadAdmins() : loadMembers()}>刷新</Button>} />
+      <Tabs activeKey={tab} onChange={setTab} items={items} />
    </div>
  )
 }