• 导出组件


    01. 说明

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

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

    必须要选择一列进行导出,确认后将会发起请求下载 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>
          );
        }
      }