快速构建报表UI

本章节以日报表数据展示为例，介绍了 Marketing UI 中报表模块的安装、使用方法及步骤。其他报表数据使用方式类似。

支持的报表类型

表格 (ReportTable) ## 使用步骤

step 1. 加载 Marketing UI 组件包

请参考 如何安装组件包。

step 2. 加载组件

为方便调试，我们为您准备了一份该接口返回数据示例，可将其保存为 daily_reports_get.js，点此获取。 注意，实际使用组件时，请使用 MKT API 报表相关接口实时拉取。

import React, { Component } from 'react';
import { render } from 'react-dom';
import { Report } from '@tencent/mktui';
const { ReportTable } = Report;

// 注意，实际使用组件时，请使用相关报表接口实时拉取
import dailyReportsMockData from './daily_reports_get';
const {
    dailyReport1,                    // 未排序第一页数据 （pageSize = 5）
    dailyReport1SortedByClickAsc,    // 按click字段升序排序的第一页数据
    dailyReport1SortedByClickDesc,   // 按click字段降序排序的第一页数据
    dailyReport2,                    // 未排序第二页数据
    dailyReport2SortedByClickAsc,    // 按click字段升序排序的第二页数据
    dailyReport2SortedByClickDesc,   // 按click字段降序排序的第二页数据 
    dailyReportPageSize10            // pageSize = 10 的数据
} = dailyReportsMockData;

step 3. 初始化表格组件

在Demo代码中初始化ReportTable组件，并传入必须的属性，包括data, page, onPageChange, pageSize 等等, 具体可参考 ReportTable 组件文档。

// 自定义不同字段的表头名、表头描述、是否可以该字段排序
const keyNameMap = {
    click: {
        label: '点击量',
        sortable: true // 是否可作为排序字段，默认false
    }
}

class  Example extends Component {
    constructor(props) {
        super(props);

        this.state = {
            data: dailyReport1.data.list,
            page: 1,
            pageSize: 5,
            totalNumber: dailyReport1.data.page_info.total_number,
            sortName: '',
            sortOrder: '',
            loading: false
        };

        this.handlePageSizeChange = this.handlePageSizeChange.bind(this)
        this.handlePageChange = this.handlePageChange.bind(this)
        this.handleSort = this.handleSort.bind(this)
    }

     // 修改每页展示数据条数后的回调
     handlePageSizeChange(pageSize) {
        // 模拟loading效果
        this.setState({
            loading: true
        })

        const newState = {
            pageSize,
            page: 1
        };

        // 更新表格数据
        if (pageSize === 10) {
            newState.data = dailyReportPageSize10.data.list
        } else if (pageSize === 5) {
            newState.data = dailyReport1.data.list
        }
        this.setState(newState);

        // 结束loading效果
        setTimeout(() => {
            this.setState({
                loading: false
            })
        }, 2000)
    }

    // 修改当前页码后的回调
    handlePageChange(event, page) {
        const { sortName, sortOrder } = this.state
        let data = ''
        if (sortName === 'click') {

            data = sortOrder === 'desc' ? dailyReport1SortedByClickDesc.data.list : dailyReport1SortedByClickAsc.data.list
            if (page === 2) {
                data = sortOrder === 'desc' ? dailyReport2SortedByClickDesc.data.list : dailyReport2SortedByClickAsc.data.list
            }
        } else {
            data = dailyReport1.data.list
            if (page === 2) {
                data = dailyReport2.data.list
            }
        }

        this.setState({
            data,
            page
        });
    }

    // 点击排序之后的回调
    handleSort(event, sortName, sortOrder) {
        const newState = {
            sortName,
            sortOrder,
            page: 1
        }

        // 这里需要根据返回的排序字段名和排序规则重新请求数据
        if (sortName === 'click') {
            newState.data = sortOrder === 'desc' ? dailyReport1SortedByClickDesc.data.list : dailyReport1SortedByClickAsc.data.list
        }

        this.setState(newState);
    }

    render() {
        const { page, pageSize, data, sortName, sortOrder, totalNumber, loading } = this.state
        return (
            <div>
                <ReportTable
                    data={data}
                    keyNameMap={keyNameMap}
                    onPageChange={this.handlePageChange}
                    onPageSizeChange={this.handlePageSizeChange}
                    page={page}
                    pageSize={pageSize}
                    totalNumber={totalNumber}
                    pageSizeList={[5, 10]}
                    sortName={sortName}
                    sortOrder={sortOrder}
                    onSort={this.handleSort}
                    emptyText={'抱歉，暂时没有相关数据'}
                    loading={loading}
                />
            </div>
        );
    }
}

render(<Example/>, document.getElementById('test'));