Umi3结合@ant-design/pro-table实现一个ProTable页面
作者:互联网
先看看效果如下
实现方式
首先我们先写两个接口,创建一个data.d.ts文件
export interface SingleUserType {
id: number;
name: string;
email: string;
create_time: string;
update_time: string;
status: number;
}
export interface FormValues {
[name: string]: any;
}
然后再写一个网络请求的接口,因为数据是从后台返回的嘛,创建一个service.ts
import { extend } from 'umi-request';
import { message } from 'antd';
import { FormValues } from './data.d';
const errorHandler = function(error: any) {
if (error.response) {
if (error.response.status > 400) {
message.error(error.data.message ? error.data.message : error.data);
}
} else {
// The request was made but no response was received or error occurs when setting up the request.
// console.log(error.message);
message.error('Network Error.');
}
throw error; // If throw. The error will continue to be thrown.
// return {some: 'data'}; If return, return the value as a return. If you don't write it is equivalent to return undefined, you can judge whether the response has a value when processing the result.
// return {some: 'data'};
};
const extendRequest = extend({ errorHandler });
//获取列表
export const getRemoteList = async ({
page,
per_page,
}: {
page: number;
per_page: number;
}) => {
return extendRequest(
`http://public-api-v1.aspirantzhang.com/users?page=${page}&per_page=${per_page}`,
{
method: 'get',
},
)
.then(function(response) {
return response;
})
.catch(function(error) {
return false;
});
};
由于我们的数据都是通过dva来进行管理的,dva就相当于react的redux,vue的vuex,创建一个model.ts
特别说一下,我们这个页面是在users文件夹下面,不明白的可以参考一下Umi文档,为什么要这样写
import { Reducer, Effect, Subscription } from 'umi';
import { getRemoteList } from './service';
import { SingleUserType } from './data.d';
export interface UserState {
data: SingleUserType[];
meta: {
total: number;
per_page: number;
page: number;
};
}
interface UserModelType {
namespace: 'users';
state: UserState;
reducers: {
getList: Reducer<UserState>;
};
effects: {
getRemote: Effect;
};
subscriptions: {
setup: Subscription;
};
}
const UserModel: UserModelType = {
namespace: 'users',
state: {
data: [],
meta: {
total: 0,
per_page: 5,
page: 1,
},
},
reducers: {
getList(state, { payload }) {
return payload;
},
},
effects: {
*getRemote({ payload: { page, per_page } }, { put, call }) {
const data = yield call(getRemoteList, { page, per_page });
if (data) {
yield put({
type: 'getList',
payload: data,
});
}
},
},
subscriptions: {
setup({ dispatch, history }) {
history.listen(({ pathname }) => {
if (pathname === '/users') {
dispatch({
type: 'getRemote',
payload: {
page: 1,
per_page: 5,
},
});
}
});
},
},
};
export default UserModel;
好了,可以开始页面渲染了
import { FC } from 'react';
import {
Button,
Pagination
} from 'antd'
import ProTable, { ProColumns } from '@ant-design/pro-table';
import { connect, Dispatch, Loading, UserState } from 'umi';
import { SingleUserType } from './data.d';
interface UserPageProps {
users: UserState;
dispatch: Dispatch;
userListLoading: boolean;
}
const UserListPage: FC<UserPageProps> = ({
users,
dispatch,
userListLoading,
}) => {
const columns: ProColumns<SingleUserType>[] = [
{
title: 'ID',
dataIndex: 'id',
valueType: 'digit',
key: 'id',
},
{
title: 'Name',
dataIndex: 'name',
key: 'name',
valueType: 'text',
render: (text: any) => <a>{text}</a>,
},
{
title: 'Create Time',
dataIndex: 'create_time',
valueType: 'dateTime',
key: 'create_time',
},
{
title: 'Action',
key: 'action',
valueType: 'option',
render: (text: any, record: SingleUserType) => [
<a>
Edit
</a>,
<a>Delete</a>
],
},
];
const resetHandler = () => {
dispatch({
type: 'users/getRemote',
payload: {
page: users.meta.page,
per_page: users.meta.per_page,
},
});
};
const paginationHandler = (page: number, pageSize?: number) => {
dispatch({
type: 'users/getRemote',
payload: {
page,
per_page: pageSize ? pageSize : users.meta.per_page,
},
});
};
const pageSizeHandler = (current: number, size: number) => {
dispatch({
type: 'users/getRemote',
payload: {
page: current,
per_page: size,
},
});
};
return (
<div className="list-table">
<ProTable
columns={columns}
dataSource={users.data}
rowKey="id"
loading={userListLoading}
search={false}
pagination={false}
options={{
density: true,
fullScreen: true,
reload: () => {
resetHandler();
},
setting: true,
}}
headerTitle="User List"
toolBarRender={() => [
<Button type="primary">
Add
</Button>,
<Button onClick={resetHandler}>Reload</Button>,
]}
/>
<Pagination
className="list-page"
total={users.meta.total}
onChange={paginationHandler}
onShowSizeChange={pageSizeHandler}
current={users.meta.page}
pageSize={users.meta.per_page}
showSizeChanger
showQuickJumper
showTotal={total => `Total ${total} items`}
/>
</div>
);
};
const mapStateToProps = ({
users,
loading,
}: {
users: UserState;
loading: Loading;
}) => {
return {
users,
userListLoading: loading.models.users,
};
};
export default connect(mapStateToProps)(UserListPage);
详细项目可以去github,上面增删改查功能都完备
https://github.com/lsh555/Umi-demo
标签:return,users,Umi3,per,ant,design,error,data,page 来源: https://blog.csdn.net/weixin_45389051/article/details/115441445