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>