139 lines
3.2 KiB
TypeScript
139 lines
3.2 KiB
TypeScript
import { listUserByPageUsingPOST } from '@/services/answerbi/userController';
|
||
import type { ActionType, ProColumns } from '@ant-design/pro-components';
|
||
import { ProTable, TableDropdown } from '@ant-design/pro-components';
|
||
import { useRef } from 'react';
|
||
export const waitTimePromise = async (time: number = 100) => {
|
||
return new Promise((resolve) => {
|
||
setTimeout(() => {
|
||
resolve(true);
|
||
}, time);
|
||
});
|
||
};
|
||
|
||
export const waitTime = async (time: number = 100) => {
|
||
await waitTimePromise(time);
|
||
};
|
||
|
||
const columns: ProColumns<API.User>[] = [
|
||
{
|
||
dataIndex: 'id',
|
||
valueType: 'indexBorder',
|
||
width: 48,
|
||
},
|
||
{
|
||
title: '昵称',
|
||
dataIndex: 'userName',
|
||
copyable: true,
|
||
},
|
||
{
|
||
title: '用户账号',
|
||
dataIndex: 'userAccount',
|
||
copyable: true,
|
||
},
|
||
{
|
||
title: '头像',
|
||
dataIndex: 'userAvatar',
|
||
search: false,
|
||
render: (_, record) => (
|
||
<div>
|
||
<img src={record.userAvatar} width={100} />
|
||
</div>
|
||
)
|
||
},
|
||
{
|
||
title: '角色',
|
||
dataIndex: 'userRole',
|
||
valueType: 'select',
|
||
valueEnum :{
|
||
'user': {text : '普通用户',status : 'Default'},
|
||
'admin': {text:'管理员', status : 'Success'},
|
||
'ban': {text:'违规被封',status:'Error'},
|
||
}
|
||
},
|
||
{
|
||
title: '创建时间',
|
||
key: 'createdTime',
|
||
dataIndex: 'createdTime',
|
||
valueType: 'dateTime',
|
||
sorter : true,
|
||
search : false,
|
||
},
|
||
{
|
||
title: '操作',
|
||
valueType: 'option',
|
||
key: 'option',
|
||
render: (text, record, _, action) => [
|
||
<a
|
||
key="editable"
|
||
onClick={() => {
|
||
action?.startEditable?.(record.id);
|
||
}}
|
||
>
|
||
编辑
|
||
</a>,
|
||
<TableDropdown
|
||
key="actionGroup"
|
||
onSelect={() => action?.reload()}
|
||
menus={[
|
||
{ key: 'copy', name: '复制' },
|
||
{ key: 'delete', name: '删除' },
|
||
]}
|
||
/>,
|
||
],
|
||
},
|
||
];
|
||
|
||
export default () => {
|
||
const actionRef = useRef<ActionType>();
|
||
return (
|
||
<ProTable<API.User>
|
||
columns={columns}
|
||
actionRef={actionRef}
|
||
cardBordered
|
||
request={async (params = {}, sort, filter) => {
|
||
console.log(sort, filter);
|
||
const userList = await listUserByPageUsingPOST(params);
|
||
return {
|
||
data: userList.data?.records
|
||
};
|
||
}}
|
||
editable={{
|
||
type: 'multiple',
|
||
}}
|
||
columnsState={{
|
||
persistenceKey: 'pro-table-singe-demos',
|
||
persistenceType: 'localStorage',
|
||
onChange(value) {
|
||
console.log('value: ', value);
|
||
},
|
||
}}
|
||
rowKey="id"
|
||
search={{
|
||
labelWidth: 'auto',
|
||
}}
|
||
options={{
|
||
setting: {
|
||
listsHeight: 400,
|
||
},
|
||
}}
|
||
form={{
|
||
// 由于配置了 transform，提交的参与与定义的不同这里需要转化一下
|
||
syncToUrl: (values, type) => {
|
||
if (type === 'get') {
|
||
return {
|
||
...values,
|
||
created_at: [values.startTime, values.endTime],
|
||
};
|
||
}
|
||
return values;
|
||
},
|
||
}}
|
||
pagination={{
|
||
pageSize: 10,
|
||
onChange: (page) => console.log(page),
|
||
}}
|
||
dateFormatter="string"
|
||
headerTitle="用户列表"
|
||
/>
|
||
);
|
||
}; |