platform-bi-web/src/components/common/dataPreview/dataPreview.jsx

import React from 'react'
import { Modal, Table } from 'antd'
import { connect } from 'dva'
import EllipsisTooltip from '../ellipsisTooltip/index'
import './dataPreview.less'

class DataPreview extends React.Component {
    
    constructor(props) {
        super(props);
        this.state = {
            boxW: 1, // 0 ~ 1
            boxH: 1, // 0 ~ 1
            columnWidth: 200,
            tableHeaderHeight: 60,
            screenWidth: document.documentElement.clientWidth || document.body.clientWidth,
            screenHeight: document.documentElement.clientHeight || document.body.clientHeight
        };
    }

    componentDidMount() {
        const { fetchFunction } = this.props;
        window.addEventListener('resize', this.onWindowResize);
        typeof fetchFunction === 'function' && fetchFunction();
    }

    componentWillUnmount() {
        const { dispatch } = this.props;
        window.removeEventListener('resize', this.onWindowResize);
        dispatch({ type: 'dataList/reset' });
    }

    onWindowResize = () => {
        const boxEl = document.getElementsByClassName('datapreview')[0];
        const tableHeaderEl = boxEl.getElementsByTagName('thead')[0];

        this.setState({
            screenWidth: document.documentElement.clientWidth || document.body.clientWidth, // 屏幕宽
            screenHeight: document.documentElement.clientHeight || document.body.clientHeight, // 屏幕高
            tableHeaderHeight: tableHeaderEl.offsetHeight + 2, // 表头高度（含边框）
        });
    }

    render() {
        const { fetchFunction, dataList, visibleBox, hideBox } = this.props;
        const { loading, columns, dataSource, pageSize, total } = dataList;
        const { screenWidth, screenHeight, boxW, boxH, columnWidth, tableHeaderHeight } = this.state;
        const tableBodyWidth = screenWidth * boxW - 10 - 10 - 18;
        const tableBodyHeight = screenHeight * boxH - 40 - 40 - tableHeaderHeight - 2;

        return <Modal
            className='datapreview'
            style={{ top: `${(1 - boxH) * 0.5 * 100}%` }}
            width={`${100 * boxW}%`}
            height={`${100 * boxH}%`}
            visible={visibleBox}
            footer={null}
            onCancel={hideBox}
            maskClosable={false}
        >
            <Table
                bordered
                columns={columns.map((c, i) => {
                    let obj = { ...c,
                        onCell: () => {
                            return {
                                style: {
                                    whiteSpace: 'nowrap',
                                    maxWidth: 150,
                                }
                            }
                        },
                        render: (text) => <EllipsisTooltip title={text}>{text}</EllipsisTooltip>,
                    };
                    if(i !== columns.length - 1) {
                        obj.width = columnWidth
                    }
                    return obj; 
                })}
                dataSource={dataSource.map((d, i) => ({
                    ...d,
                    key: i
                }))}
                size='small'
                loading={loading}
                pagination={{
                    pageSize,
                    total,
                    // simple: true,
                    showTotal: (total, range) => {
                        return `第${range[0]}到第${range[1]}条数据，共${total}条数据`;
                    },
                    onChange: (page, pageSize) => {
                        typeof fetchFunction === 'function' && fetchFunction(page, pageSize);
                    }
                }}
                scroll={{ x: columns ? columns.length * columnWidth : tableBodyWidth, y: tableBodyHeight }}
            />
        </Modal>
    }
}

export default connect(({ present: { dataList } }) => ({ dataList }))(DataPreview);