antd pro 使用心得

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,
    });
};
...
<ProTable
   columns={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

<Button
    icon={<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>