@aliretail/react-materials-components/demo/DataExport/README.md

B 端物料组件库

---
title: DataExport-API
order: 3
category: UI
description: DataExport 组件描述
screenshot: https://gw.alicdn.com/imgextra/i2/O1CN01yW3hCD1M8CnqeKFlq_!!6000000001389-2-tps-90-90.png
---

## API

| 参数名 | 说明 | 必填 | 类型 | 默认值 | 备注 |
| ------ | ---- | ---- | ---- | ------ | ------ |
|  onExport  | 导出接口 | Y |    func  |        | `(query: Query) => Promise<ExportResponse>`  |
|  onFetchHistory  | 获取历史记录列表 | Y |    func  |     | `(currentPage: number, pageSize: number) => Promise<ExportResponse>`  |
|  onExportButtonClick  | 点击导出按钮的回调 | Y |    func  |     | `(event: React.MouseEvent) => Query`  |
|  translateQuery  | 翻译查询条件接口 | Y |    func  |     | `(query: Query) => QueryItem[]`  |

## 相关数据结构

```javascript
// 请求参数对象
export interface Query {
  [key: string]: any;
}

// 历史记录对象
export interface HistoryRecord {
  /**
   * 创建人
   */
  creator: string;
  /**
   * 已完成多少 0 ~ 100
   */
  finished: number;
  /**
   * 导出操作的时间戳
   */
  createdTime: number;
  /**
   * 导出完成的时间戳
   */
  finishedTime: number;
  /**
   * 导出的查询条件
   */
  exportQuery: Query;
  /**
   * 导出状态 process|finish|fail
   */
  status: 'process' | 'finish' | 'fail',
  downloadUrl: string;
}

// 请求Promise返回的结果数据
export interface ExportResponse {
  // 请求是否成功
  success: boolean;
  // 出错时的提示语
  message: string;
  data?: {
    // 请求历史记录时返回的总条数
    total: number;
    // 历史记录列表
    list: HistoryRecord[]
  }
}

// 查询条件翻译接口返回的单个查询条件翻译结果
export type QueryItem = {
  // 查询字段名
  label: string;
  // 查询条件翻译的文案
  value: string;
}

```

## 自定义按钮

如果默认的按钮样式不满足业务需求，可自定义，通过data-button-type来指定按钮类型(history-查看历史，export-导出)，用法如下

```javascript
<DataExport {...exportProps}>
  <Button data-button-type="history" type="secondary">查看历史</Button>
  <Button>其他无关的按钮</Button>
  <Button data-button-type="export" type="primary">导出</Button>
</DataExport>
```