导出组件
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 | 无 | 否 | 
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>
      );
    }
  }