93 lines
2.6 KiB
TypeScript
93 lines
2.6 KiB
TypeScript
import { Button, Popconfirm, Space, Table, Tag, Typography } from 'antd';
|
|
import type { ColumnsType } from 'antd/es/table';
|
|
import {
|
|
PARTNER_PERMISSION_LABELS,
|
|
PARTNER_STAFF_ROLE_LABELS,
|
|
type PartnerPermissionKey,
|
|
} from '@dukang/shared-types';
|
|
|
|
export type PartnerSubAccountRow = {
|
|
id: string;
|
|
phone: string;
|
|
name: string;
|
|
staffRole?: string;
|
|
permissions?: string[];
|
|
status: string;
|
|
};
|
|
|
|
function formatPermissions(permissions?: string[]) {
|
|
return permissions?.map((k) => PARTNER_PERMISSION_LABELS[k as PartnerPermissionKey] || k).join('、') || '—';
|
|
}
|
|
|
|
type Props = {
|
|
subs: PartnerSubAccountRow[];
|
|
onAdd: () => void;
|
|
onEdit: (sub: PartnerSubAccountRow) => void;
|
|
onDelete: (subId: string) => void;
|
|
};
|
|
|
|
export default function PartnerSubAccountList({ subs, onAdd, onEdit, onDelete }: Props) {
|
|
const columns: ColumnsType<PartnerSubAccountRow> = [
|
|
{ title: '姓名', dataIndex: 'name', width: 100 },
|
|
{ title: '手机', dataIndex: 'phone', width: 120 },
|
|
{
|
|
title: '角色',
|
|
dataIndex: 'staffRole',
|
|
width: 90,
|
|
render: (v) =>
|
|
v ? PARTNER_STAFF_ROLE_LABELS[v as keyof typeof PARTNER_STAFF_ROLE_LABELS] || v : '—',
|
|
},
|
|
{
|
|
title: '状态',
|
|
dataIndex: 'status',
|
|
width: 80,
|
|
render: (s) => (
|
|
<Tag color={s === 'ACTIVE' ? 'green' : 'default'}>{s === 'ACTIVE' ? '启用' : '停用'}</Tag>
|
|
),
|
|
},
|
|
{
|
|
title: '权限',
|
|
dataIndex: 'permissions',
|
|
ellipsis: true,
|
|
render: (p: string[] | undefined) => formatPermissions(p),
|
|
},
|
|
{
|
|
title: '操作',
|
|
width: 120,
|
|
render: (_, row) => (
|
|
<Space size={0}>
|
|
<Button type="link" size="small" onClick={() => onEdit(row)}>
|
|
编辑
|
|
</Button>
|
|
<Popconfirm title="确定删除该子账号？" onConfirm={() => onDelete(row.id)}>
|
|
<Button type="link" size="small" danger>
|
|
删除
|
|
</Button>
|
|
</Popconfirm>
|
|
</Space>
|
|
),
|
|
},
|
|
];
|
|
|
|
return (
|
|
<>
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
|
|
<Typography.Text type="secondary" style={{ fontSize: 12 }}>
|
|
子账号（{subs.length}）· 仅主账号可添加，不可多级
|
|
</Typography.Text>
|
|
<Button size="small" type="primary" onClick={onAdd}>
|
|
添加子账号
|
|
</Button>
|
|
</div>
|
|
<Table
|
|
size="small"
|
|
rowKey="id"
|
|
pagination={false}
|
|
columns={columns}
|
|
dataSource={subs}
|
|
locale={{ emptyText: '暂无子账号' }}
|
|
/>
|
|
</>
|
|
);
|
|
}
|