132 lines
5.3 KiB
TypeScript
132 lines
5.3 KiB
TypeScript
import React from 'react';
|
|
import { Table, Tag, Button, DialogPlugin, Space, Avatar } from 'tdesign-react';
|
|
import { UserIcon } from 'tdesign-icons-react';
|
|
|
|
export default function render() {
|
|
const { t } = this;
|
|
const { event } = this.props;
|
|
const { userArr = [], oakLoading, stateColor, pagination } = this.state;
|
|
const { pageSize, total, currentPage } = pagination || {};
|
|
|
|
return (
|
|
<div style={{ padding: 16 }}>
|
|
<Space>
|
|
<Button
|
|
size="medium"
|
|
theme="primary"
|
|
onClick={() => {
|
|
this.goNewUser();
|
|
}}
|
|
>
|
|
添加用户
|
|
</Button>
|
|
</Space>
|
|
|
|
<Table
|
|
loading={oakLoading}
|
|
data={userArr}
|
|
rowKey="id"
|
|
columns={[
|
|
{
|
|
colKey: 'id',
|
|
title: '序号',
|
|
},
|
|
{
|
|
width: 100,
|
|
colKey: 'avatar',
|
|
title: '头像',
|
|
cell: ({ row }) => {
|
|
if (!row.avatar) {
|
|
return <Avatar icon={<UserIcon />}></Avatar>;
|
|
}
|
|
return <Avatar image={row.avatar} shape="circle" />;
|
|
},
|
|
},
|
|
{
|
|
colKey: 'nickname',
|
|
title: '昵称',
|
|
},
|
|
{
|
|
colKey: 'name',
|
|
title: '姓名',
|
|
},
|
|
{
|
|
colKey: 'mobile',
|
|
title: '手机号',
|
|
},
|
|
{
|
|
colKey: 'userState',
|
|
title: '状态',
|
|
cell: ({ row, rowIndex }) => {
|
|
return (
|
|
<Tag theme={stateColor[row.userState]}>
|
|
{t(`user:v.userState.${row.userState}`)}
|
|
</Tag>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
colKey: 'op',
|
|
width: 200,
|
|
title: '操作',
|
|
align: 'center',
|
|
cell: ({ row }) => {
|
|
return (
|
|
<>
|
|
<Button
|
|
theme="primary"
|
|
variant="text"
|
|
onClick={() => {
|
|
this.onCellClicked(row.id, event);
|
|
}}
|
|
>
|
|
详情
|
|
</Button>
|
|
<Button
|
|
theme="primary"
|
|
variant="text"
|
|
onClick={() => {
|
|
const confirmDia =
|
|
DialogPlugin.confirm({
|
|
header: '确认删除该用户吗？',
|
|
body: '删除后，用户不可恢复',
|
|
confirmBtn: '确定',
|
|
cancelBtn: '取消',
|
|
onConfirm: async ({
|
|
e,
|
|
}) => {
|
|
await this.execute(
|
|
'remove'
|
|
);
|
|
confirmDia.hide();
|
|
},
|
|
onClose: ({
|
|
e,
|
|
trigger,
|
|
}) => {
|
|
confirmDia.hide();
|
|
},
|
|
});
|
|
}}
|
|
>
|
|
删除
|
|
</Button>
|
|
</>
|
|
);
|
|
},
|
|
fixed: 'right',
|
|
},
|
|
]}
|
|
pagination={{
|
|
total: total,
|
|
pageSize: pageSize,
|
|
current: currentPage,
|
|
onPageSizeChange: (pageSize: number) => {
|
|
this.setPageSize(pageSize);
|
|
},
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|