antd pro 使用心得

antd pro 使用心得

• ProTable
• • moment.js 汉化
  • 日期组件汉化
  • 自定义请求参数
  • Table 保留查询数据
• umi-request
• • 文件流下载

ProTable

moment.js 汉化

import 'moment/locale/zh-cn';

日期组件汉化

import locale from 'antd/es/date-picker/locale/zh_CN';
const columns = [...{title: '创建时间',dataIndex: 'created_at',valueType: 'dateTimeRange',formItemProps: { locale },}]

自定义请求参数

<ProTable
...request={async (params) => {let draft = { ...params };draft.page = params.current;draft.perPage = params.pageSize;draft.enterprise_user_id = enterpriseUser;if (draft.created_at) {[draft.createdAtStart, draft.createdAtEnd] = [...draft.created_at];}draft = Omit(draft, ['current', 'pageSize', 'created_at']);const data = await query(draft);return {data: data.data.data,page: params.current,total: data.data.total,success: data.code === 200,};}}
...
/>

Table 保留查询数据

model.js

const CompanyModel = {namespace: 'company',state: {queryParams: {},},reducers: {updateQueryParams(_, { payload }) {return {queryParams: payload,};},},
};
export default CompanyModel;

Component.jsx

const updateQueryParams = (params) => {dispatch({type: 'company/updateQueryParams',payload: params,});
};
...
<ProTablecolumns={columns}rowKey="id"request={async (params) => {let draft = { ...params };[draft.page, draft.perPage] =queryParams.goBack === true? [queryParams.page, queryParams.perPage]: [params.current, params.pageSize];
...draft = { ...queryParams, ...draft };draft = Omit(draft, ['current', 'pageSize', 'goBack']);updateQueryParams(draft);const data = await query(draft);return {data: data.data.data,page: params.current,total: data.data.total,success: data.code === 200,};}}onReset={() => {updateQueryParams({});}}pagination={{current: queryParams.page,pageSize: queryParams.perPage,}}
...
/>

umi-request

文件流下载

request.js

request.interceptors.response.use(async (response, options) => {if (['application/vnd.openxmlformats-officedocument.spreadsheetml.sheet','application/octet-stream',].includes(response.headers.get('Content-Type'))) {options.responseType = 'blob';}return response;
});

Component.jsx

<Buttonicon={<PlusOutlined />}type="primary"onClick={() =>query({export: 'certs',}).then((resp) => {const filename = '公司证书.xlsx';if (window.navigator.msSaveOrOpenBlob) {// IE10+下载window.navigator.msSaveOrOpenBlob(resp, filename);} else {const blobUrl = window.URL.createObjectURL(resp);const a = document.createElement('a');a.download = filename;a.href = blobUrl;a.click();window.URL.revokeObjectURL(blobUrl);}})}
>导出
</Button>

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！