platform-bi-web/src/components/dashboardDesigner/chooseChartBox.jsx

import React from 'react'
import '../../models/dashboardDesigner'
import { Modal, Radio, Row, Col, Table, Input, Select, message, DatePicker } from 'antd'
import { connect } from 'dva'
import moment from 'moment'
import 'braft-editor/dist/braft.css'
import './chooseChartBox.less'
const { Search } = Input
const { RangePicker } = DatePicker

class ChooseChartBox extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            filterLabel: '',
            selectedRecord: -1,
            screenWidth: document.documentElement.clientWidth || document.body.clientWidth,
            screenHeight: document.documentElement.clientHeight || document.body.clientHeight
        };
    }

    componentDidMount() {
        const { dispatch } = this.props;
        dispatch({ type: 'chart/fetchList' });
        window.addEventListener('resize', this.onWindowResize);
    }

    componentWillUnmount() {
        window.removeEventListener('resize', this.onWindowResize);
    }

    onWindowResize = () => {
        this.setState({
            screenWidth: document.documentElement.clientWidth || document.body.clientWidth,
            screenHeight: document.documentElement.clientHeight || document.body.clientHeight
        });
    }

    changeSelected = (record) => {
        this.setState({
            selectedRecord: record
        });
    }

    okHandler = (model) => {
        const { selectedRecord } = this.state;
        const { dispatch, hideBox } = this.props;
        if(selectedRecord) {
            dispatch({ type: 'dashboardDesigner/addChart', chart: selectedRecord });
            hideBox();
        }else {
            message.warning('未选中图表');
        }
    }

    generateFilterItems = () => {
        const { filterItems } = this.props.chart;
        return filterItems.map(t => <Select.Option key={t.name}  value={t.name}>{t.label}</Select.Option>);
    }

    render() {
        const { main, visibleBox, hideBox, dashboardDesigner, chart, dispatch } = this.props;
        const { selectedRecord, screenWidth, screenHeight } = this.state;
        const tableBodyWidth = screenWidth * 0.8 - 10 - 10 - 18;
        const tableBodyHeight = screenHeight * 0.8 - 65 - 53 - 38 - 130;
        const tableRowHeight = 38;
        const { filterItem } = dashboardDesigner;
        const reg = new RegExp('([+ \\- & | ! ( ) { } \\[ \\] ^ \" ~ * ? : ( ) \/])', 'g'); // 需要转义的字符
        let filterLabel = this.state.filterLabel.replace(new RegExp('(\\\\)', 'g'), '\\$1').replace(reg, '\\$1'); // 添加转义符号
        const columns = [{
            title: '选择',
            key: 'selected',
            width: 50,
            render: (text, record) => {
                // return <Checkbox checked={dashboardDesigner.items.findIndex(i => i.chartCode===record.code)!==-1 || selectedRecord.findIndex(s => s.code === record.code) !== -1 } disabled={dashboardDesigner.items.findIndex(i => i.chartCode===record.code)!==-1}/>
                return <Radio
                    checked={dashboardDesigner.items.findIndex(i => i.chartCode===record.code)!==-1 || selectedRecord.code === record.code }
                    disabled={dashboardDesigner.items.findIndex(i => i.chartCode===record.code)!==-1}
                />
            }
        }, {
            title: '名称',
            dataIndex: 'name',
            key: 'name',
            width: 100,
            render: (text, record) => {
                return <div>
                    <div>
                        <span>
                            { filterLabel && filterItem.name === 'name' ?
                                (text.split(new RegExp(`(${filterLabel})`, 'i')).map((fragment, i) => {
                                    return (
                                        fragment.toLowerCase().replace(new RegExp('(\\\\)', 'g'), '\\$1').replace(reg, '\\$1') === filterLabel.toLowerCase() ?
                                        <span key={i} style={{fontWeight: 'bold', color: 'red'}} className="highlight">{fragment}</span> :
                                        fragment
                                    )
                                }
                                )) : text
                            }
                        </span>
                    </div>
                </div>
            }
        }, {
            title: '创建人',
            dataIndex: 'creatorName',
            key: 'creatorName',
            width: 100,
            render: (text, record) => {
                return <div>
                    <div>
                        <span>
                            { filterLabel && filterItem.name === 'creatorName' ?
                                (text.split(new RegExp(`(${filterLabel})`, 'i')).map((fragment, i) => {
                                    return (
                                        fragment.toLowerCase().replace(new RegExp('(\\\\)', 'g'), '\\$1').replace(reg, '\\$1') === filterLabel.toLowerCase() ?
                                        <span key={i} style={{fontWeight: 'bold', color: 'red'}} className="highlight">{fragment}</span> :
                                        fragment
                                    )
                                }
                                )) : text
                            }
                        </span>
                    </div>
                </div>
            }
        }, {
            title: '创建时间',
            dataIndex: 'createTime',
            key: 'createTime',
            width: 120,
            render: (text) => moment(text).format('YYYY-MM-DD')
        }, {
            title: '说明',
            dataIndex: 'description',
            key: 'description',
            width: 200,
            render: (text, record) => {
                return (
                    <span>
                        { filterLabel && filterItem.name === 'description' ?
                            ((text || '').split(new RegExp(`(${filterLabel})`, 'i')).map((fragment, i) => {
                                return (
                                    fragment.toLowerCase().replace(new RegExp('(\\\\)', 'g'), '\\$1').replace(reg, '\\$1') === filterLabel.toLowerCase() ?
                                    <span key={i} style={{fontWeight: 'bold', color: 'red'}} className="highlight">{fragment}</span> :
                                    fragment
                                )
                            }
                            )) : text
                        }
                    </span>
                )
            }
        }]
        return (
            <Modal
                className='choosechart-box'
                width='80%'
                height='80%'
                title={
                    <Row>
                        <Row>
                            <Col >选择图表</Col>
                        </Row>
                        <Row type='flex' justify='end'>
                            <Col style={{ padding: '0 1px', margin: '0 -5px' }}>
                                <Select 
                                    value={filterItem.name}
                                    style={{ width: 120 }}
                                    onChange={value => {
                                        let item = chart.filterItems.find(i => i.name === value);
                                        dispatch({ type: 'dashboardDesigner/setFilterItem', item });
                                    }}
                                >
                                    {this.generateFilterItems()}
                                </Select>
                            </Col>
                            <Col style={{ padding: '0 5px' }}>
                                {filterItem.type === 'date' ? 
                                    <RangePicker  
                                        ranges={{
                                            '今天': [moment().startOf('day'), moment().endOf('day')], 
                                            '昨天': [moment().startOf('day').add(-1,'days'), moment().endOf('day')],
                                            '近七天': [moment().startOf('day'),moment().endOf('day').add(6,'days')],
                                            '本月': [moment().startOf('month'), moment().endOf('month')],
                                            '本年': [moment().startOf('year'), moment().endOf('year')] 
                                        }}
                                        showTime={{ format: 'HH:mm' }}
                                        format="YYYY-MM-DD HH:mm:ss"
                                        onChange={e => {
                                            //清空时间时
                                            if(e.length === 0){
                                                this.setState({
                                                    filterLabel: ''
                                                });
                                            }
                                        }}
                                        onOk={e => {
                                            //解析时间格式
                                            let start = e[0]
                                            let end = e[1]
                                            let time = start._d.getTime() + "#" + end._d.getTime()
                                            this.setState({
                                                filterLabel: time
                                            });
                                        }}
                                    >
                                    </RangePicker> 
                                    : 
                                    <Search
                                        placeholder="请输入关键字"
                                        value={this.state.filterLabel}
                                        onChange={e => {
                                            this.setState({
                                                filterLabel: e.target.value
                                            });
                                        }}
                                    />
                                }
                            </Col>
                        </Row>
                    </Row>
                }
                visible={visibleBox}
                onOk={() => {this.setState({ filterLabel: '', selectedRecord: -1 });this.okHandler()}}
                onCancel={() => {this.setState({ filterLabel: '', selectedRecord: -1 });hideBox()}}
                maskClosable={false}
                destroyOnClose={true}
            >
                <Table
                    className='choosechart-table'
                    columns={columns.map(c => ({
                        ...c,
                        width: 100
                    }))}
                    dataSource={chart.list.map((l, i) => {
                        let o = Object.assign({}, l);
                        if(filterItem.type === 'date') {
                            if(filterLabel===""){
                                return { ...o, key: i };
                            }else if(filterLabel.indexOf('#')>-1){
                                let start = filterLabel.split('#')[0]
                                let end = filterLabel.split('#')[1]
                                let nowTime = new Date(o[filterItem.name]).getTime();
                                if(nowTime>=start && nowTime<=end){
                                    return { ...o, key: i};
                                }
                                return null 
                            }else{
                                return null 
                            }
                        }else {
                            return ((o[filterItem.name] + '').search(new RegExp('(' + filterLabel + '){1}', 'ig')) > -1) ? { ...o, key: i } : null
                        }
                    }).filter(a => a!==null && a.creatorCode === main.currentUser.code)}
                    size='small'
                    scroll={{ x: columns ? columns.length * 100 : tableBodyWidth, y: tableBodyHeight }}
                    pagination={{ defaultPageSize: Math.floor(tableBodyHeight/tableRowHeight) || 10 }}
                    onRow={(record) => {
                        return {
                            onClick: () => {
                                if(dashboardDesigner.items.findIndex(i => i.chartCode===record.code)===-1) {
                                    this.changeSelected(record);
                                }
                            }
                        };
                    }}
                />
            </Modal>
        )
    } 
}



    




function mapStateToProps({ present: { main, dashboardDesigner, chart } }) {
    return { main, dashboardDesigner, chart };
}

export default connect(mapStateToProps)(ChooseChartBox)