功能：恢复商户账号分组查看

2026-08-13 13:39:37 +08:00
parent cfdc12cf94
commit 6dae7fafa8
7 changed files with 198 additions and 15 deletions
@@ -18,6 +18,7 @@ import type {
  LowBalanceAlertConfig,
  Merchant,
 	MerchantMember,
+	MerchantMemberGroup,
 	MerchantRole,
  MerchantProduct,
  PageResult,
@@ -176,6 +177,8 @@ export const deliveryApi = {
 }

 export const platformApi = {
+  merchantAccounts: (params?: Record<string, unknown>) =>
+    request.get('/platform/merchant-accounts', { 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,12 +1,14 @@
-import { useCallback, useEffect, useState } from 'react'
-import { Button, Form, Input, Modal, Popconfirm, Space, Switch, Table, Tag, Typography, message } from 'antd'
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import { Button, Form, Input, Modal, Popconfirm, Space, Switch, Table, Tabs, Tag, Typography, message } from 'antd'
 import { DeleteOutlined, EditOutlined, PlusOutlined, ReloadOutlined } 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, MerchantMemberGroup, 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
@@ -17,7 +19,10 @@ type AdminFormValues = {

 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 [merchantAccounts, setMerchantAccounts] = 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)
@@ -35,9 +40,21 @@ export default function PlatformUsers() {
    }
  }, [admins.page, admins.size])

+  const loadMerchantAccounts = useCallback(async (page = merchantAccounts.page, size = merchantAccounts.size) => {
+    setLoading(true)
+    try {
+      setMerchantAccounts(await platformApi.merchantAccounts({ page, size }))
+    } catch (e) {
+      message.error(e instanceof Error ? e.message : '加载失败')
+    } finally {
+      setLoading(false)
+    }
+  }, [merchantAccounts.page, merchantAccounts.size])
+
  useEffect(() => {
-    void loadAdmins()
-  }, [loadAdmins])
+    if (tab === 'admins') void loadAdmins()
+    else void loadMerchantAccounts()
+  }, [loadAdmins, loadMerchantAccounts, tab])

  const openCreate = () => {
    setEditingAdmin(null)
@@ -106,21 +123,75 @@ export default function PlatformUsers() {
    },
  ]

-  return (
-    <div>
-      <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
+  const memberColumns: ColumnsType<MerchantMember> = [
+    { title: '员工账号', dataIndex: ['user', 'username'], width: 260, render: (_, record) => <Typography.Text strong>{record.user?.username || `#${record.user_id}`}</Typography.Text> },
+    { title: '昵称', dataIndex: ['user', 'nickname'], width: 220, render: (_, record) => record.user?.nickname || '-' },
+    { title: '商户角色', dataIndex: 'role', width: 160, render: (role) => <Tag color="blue">{roleText(role)}</Tag> },
+    { title: '成员状态', dataIndex: 'status', width: 130, render: (status) => status === 1 ? <Tag color="green">启用</Tag> : <Tag>停用</Tag> },
+  ]
+
+  const merchantColumns: ColumnsType<MerchantMemberGroup> = [
+    {
+      title: '商户',
+      width: 320,
+      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: 130, render: (_, record) => `${record.members.length} 个` },
+    {
+      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: 160,
+      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={columns}
        dataSource={admins.list}
        pagination={{ current: admins.page, pageSize: admins.size, total: admins.total, showSizeChanger: true, onChange: (page, size) => void loadAdmins(page, size) }}
+      />,
+    },
+    {
+      key: 'merchant-accounts',
+      label: `商户账号 (${merchantAccounts.total})`,
+      children: <Table
+        rowKey="merchant_id"
+        loading={loading}
+        columns={merchantColumns}
+        dataSource={merchantAccounts.list}
+        expandable={{
+          expandedRowRender: (record) => <Table rowKey="id" size="small" columns={memberColumns} dataSource={record.members} pagination={false} />,
+          rowExpandable: (record) => record.members.length > 0,
+        }}
+        pagination={{ current: merchantAccounts.page, pageSize: merchantAccounts.size, total: merchantAccounts.total, showSizeChanger: true, onChange: (page, size) => void loadMerchantAccounts(page, size) }}
+      />,
+    },
+  ], [admins, columns, loadAdmins, loadMerchantAccounts, loading, memberColumns, merchantAccounts, merchantColumns])
+
+  return (
+    <div>
+      <PageHeader
+        title="账号管理"
+        subtitle="平台管理员独立管理；商户账号按所属商户展示，下游员工由各商户自行维护。"
+        breadcrumbs={[{ title: '账号管理' }]}
+        extra={<Space><Button icon={<ReloadOutlined />} loading={loading} onClick={() => tab === 'admins' ? void loadAdmins() : void loadMerchantAccounts()}>刷新</Button>{tab === 'admins' && <Button type="primary" icon={<PlusOutlined />} onClick={openCreate}>新建平台管理员</Button>}</Space>}
      />
+      <Tabs activeKey={tab} onChange={setTab} items={items} />
      <Modal
        title={editingAdmin ? '编辑平台管理员' : '新建平台管理员'}
        open={modalOpen}
@@ -33,6 +33,12 @@ export interface MerchantMember {
  created_at: string
 }

+export interface MerchantMemberGroup {
+  merchant_id: number
+  merchant?: Merchant
+  members: MerchantMember[]
+}
+
 export interface MerchantRole {
  id: number
  merchant_id: number