platform-bi-web/app/components/chart/chooseDataSourceBox.jsx

import React from 'react'
import { Modal, Form, Row, Col, Input, InputNumber, Select, Icon, Menu, Dropdown, Table, Radio, Tag } from 'antd'
const FormItem = Form.Item
const SelectOption = Select.Option
const OptionGroup = Select.OptGroup
const InputGroup = Input.Group
const SubMenu = Menu.SubMenu
const MenuItem = Menu.Item
const MenuItemGroup = Menu.ItemGroup
import { connect } from 'dva'
import '../../models/dataSource'
import './chooseDataSourceBox.less'

class ChooseDataSourceBox extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedRecord: null
        }
    }

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

    okHandler = (model) => {
        const { selectedRecord } = this.state;
        const { dispatch } = this.props;
        if(selectedRecord) {
            dispatch({ type: 'chartDesigner/changeDataSource', value: {
                dataSource: { key: selectedRecord.code, label: selectedRecord.name}
            } });
            dispatch({ type: 'main/redirect', path: '/chart/create' });
        }else {
            this.props.hideBox()
        }
    }

    render() {
        const { selectedRecord } = this.state;
        const { operation, dispatch, dataSource, visibleBox, hideBox } = this.props
        const formItemLayout = {
            labelCol: { span: 4 },
            wrapperCol: { span: 20 },
        };

        const columns = [{
            title: '选择',
            key: 'selected',
            width: 50,
            render: (text, record) => {
                return <Radio checked={selectedRecord ? selectedRecord.code == record.code : false}/>
            }
        }, {
            title: '名称',
            dataIndex: 'name',
            key: 'name',
            width: 100,
            render: (text, record) => {
                return <div className='datasource-name'>
                    <div className={`datasource-type type-${record.type.key}`}></div>
                    <div>{text}</div>
                </div>
            }
        }, {
            title: '标签',
            dataIndex: 'tags',
            key: 'tag',
            width: 150,
            render: (text, record) => {
                text=text.join(',');
                let tags = text ? text.split(',').map((t, i) => {
                    return <Tag className='datasource-tag' key={i}>{t}</Tag>
                }) : '';
                return (<div>
                    {tags}
                </div>)
            }
        }, {
            title: '说明',
            dataIndex: 'description',
            key: 'description',
            width: 200
        }, {
            title: '图表',
            dataIndex: 'chartSum',
            key: 'chartSum',
            width: 80
        }];

        return (
            <Modal
                className='choosedatasource-box'
                title='选择数据源'
                visible={visibleBox}
                onOk={this.okHandler}
                onCancel={hideBox}
                maskClosable={false}
                destroyOnClose={true}
            >
                <Table
                    className='choosedatasource-table'
                    columns={columns}
                    dataSource={dataSource.list}
                    size='small'
                    scroll={{x: false, y: 471}}
                    pagination={false}
                    showHeader={false}
                    onRow={(record) => {
                        return {
                            onClick: () => {
                                this.changeSelected(record);
                            }
                        };
                    }}
                />
            </Modal>
        )
    }
}

function mapStateToProps({ present: { dataSource } }) {
    return { dataSource: dataSource };
}

export default connect(mapStateToProps)(ChooseDataSourceBox)