导出组件
01. 说明
通过导出组件可以将数据导出为 Excel
表格,需要后台开发相应的接口。
点击导出按钮后,将会发起请求,获取可以选择的导出数据列,同时可以选择导出的配置:
- 导出类型:单 sheet 导出、多 sheet 导出
- 异步:是否异步导出。若选择异步导出需要从Excel异步导出页面获取导出文件,同步则即时下载。
- 最大sheet页:单个EXCEL内最大sheet页
- 单sheet最大数量:单个sheet页最大数据量
必须要选择一列进行导出,确认后将会发起请求下载 Excel。
同时还可以根据需求,配置额外的导出条件。
02. API
参数 | 说明 | 类型 | 默认值 | 必输 |
---|---|---|---|---|
requestUrl | 后台开发的请求接口,该接口将会被调用两次,第一次获取可以选择导出的列,第二次执行导出,下载 Excel | string | '' | 是 |
method | 请求的类型 | string | GET | 是 |
queryParams | 功能模块的查询参数 | object | 无 | 是 |
queryFormItem | 额外的导出条件,将会渲染在导出窗口中 | React.element | 无 | 否 |
otherButtonProps | 导出按钮的属性,支持Button的所有属性 | object | 无 | 否 |
defaultConfig | 默认配置属性,只支持同步导出,不会弹出弹窗 | object | 无 | 否 |
defaultSelectAll | 默认勾选所有列 | boolean | false | 否 |
exportAsync | 是否有异步导出(租户层才会生效) | boolean | false | 否 |
title | 模态框标题 | string | 导出Excel | 否 |
buttonText | 按钮文本 | string | 导出 | 否 |
03. 使用示例
// 1. 引入导出组件
import ExcelExport from 'components/ExcelExport';
// 2. 引用,配置props
import { HZERO_PLATFORM } from 'utils/config'; // 引入具体的服务,配置requestUrl
<ExcelExport
requestUrl={`${HZERO_PLATFORM}/v1/events/export`}
queryParams={this.props.form.getFieldsValue()} // 此处为页面的查询表单
queryFormItem={this.renderExportTree()}
/>
// 额外的导出条件,非必填,此处为示例
renderExportTree() {
const { platform: { code: { authorityType = [] } = {} } } = this.props;
const { expandedKeys, checkedKeys } = this.state;
if (isEmpty(authorityType)) {
return null;
} else {
return (
<Tree
checkable
onExpand={this.handleExpand}
expandedKeys={expandedKeys}
defaultExpandedKeys={['authorityType']}
onCheck={this.handleSelect}
checkedKeys={checkedKeys}
>
<TreeNode
title={intl.get('hiam.subAccount.model.user.authorityType').d('权限维度')}
key="authorityType"
>
{map(authorityType, item => {
return <TreeNode title={item.meaning} key={item.value} />;
})}
</TreeNode>
</Tree>
);
}
}
// 默认配置示例
<ExcelExport
requestUrl={`${HZERO_PLATFORM}/v1/events/export`}
` defaultConfig={{
fileName, // 文件名
fillerType, // 导出类型
maxSheet, // 最大sheet页
singleSheet // 单sheet最大数量
}}
/>