• 导出组件


    01. 说明

    通过导出组件可以将数据导出为 Excel 表格,需要后台开发相应的接口。

    点击导出按钮后,将会发起请求,获取可以选择的导出数据列,同时可以选择导出的配置:

    必须要选择一列进行导出,确认后将会发起请求下载 Excel。

    同时还可以根据需求,配置额外的导出条件。

    02. API

    参数 说明 类型 默认值 必输
    requestUrl 后台开发的请求接口,该接口将会被调用两次,第一次获取可以选择导出的列,第二次执行导出,下载 Excel string ''
    method 请求的类型 string GET
    queryParams 功能模块的查询参数 object
    queryFormItem 额外的导出条件,将会渲染在导出窗口中 React.element
    otherButtonProps 导出按钮的属性,支持Button的所有属性 object
    defaultConfig 默认配置属性,只支持同步导出,不会弹出弹窗 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>
          );
        }
      }
    
      // 默认配置示例
      <ExcelExport
      requestUrl={`${HZERO_PLATFORM}/v1/events/export`}
    `  defaultConfig={{
        fileName,   // 文件名
        fillerType, // 导出类型
        maxSheet,   // 最大sheet页
        singleSheet // 单sheet最大数量
        }}
    />