platform-bi-web/app/components/datasource/datasource.jsx

import React from 'react'
import { Tabs, Input, Button, Table, Icon, Tag, Menu, Dropdown } from 'antd'
const { TabPane } = Tabs
const { Search } = Input
import { connect } from 'dva'
import { Link } from 'react-router-dom'
import DataSourceBox from './dataSourceBox'
import dataSource from '../../models/dataSource'
import './dataSource.less'

class DataSource extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            operation: 'create', // 打开数据编辑界面的类型
            visibleBox: false, // 数据编辑界面显示标识
            selectedCode: -1, // 当前选中的table行code
            filterDropdownVisible: false,
            search: {} // 搜索条件
        }
    };

    showDataSourceBox = (o) => {
        this.setState({
            operation: o,
            visibleBox: true
        });
    }

    hideBox = () => {
        this.setState({
            visibleBox: false
        });
    }

    onInputChange = (name, value) => {
        const { search } = this.state;
        let newSearch = Object.assign({}, search );
        newSearch[name] = value;
        this.setState({ search: newSearch });
    }

    onSearch = () => {
        const { search } = this.state;
        const reg = new RegExp(search.name, 'gi');
        this.setState({
          filterDropdownVisible: false
        });
      }

    render() {
        
        const { dataSource, dispatch } = this.props;
        const { search, visibleBox, operation, selectedCode } = this.state;
        
        console.log(dataSource.list);
        const moreOperatingMenu = (
            <Menu className='operationmenu'>
                <Menu.Item
                    onClick={(e) => {
                        let selectedModel = dataSource.list.find((i) => { return i.code == selectedCode })
                        dispatch({ type: 'dataSource/setNewModel', model: selectedModel });
                        this.showDataSourceBox('edit');
                    }}>
                    <Icon type="info-circle-o" />属性设置
                </Menu.Item>
                <Menu.Item>
                    {/* <Link to='/dataSource/1111'> */}
                        <Icon type="home" /><Icon type="table" />数据列设置
                    {/* </Link> */}
                </Menu.Item>
                <Menu.Item><Icon type="search" />预览数据</Menu.Item>
                <Menu.Item><Icon type="lock" />权限设置</Menu.Item>
                <Menu.Divider />
                <Menu.Item
                    onClick={(e) => {
                        let selectedModel = dataSource.list.find((i) => { return i.code == selectedCode })
                        dispatch({ type: 'dataSource/delete', model: selectedModel });
                    }}
                ><Icon type="delete" />删除</Menu.Item>
            </Menu>
        );
        const columns = [{
            title: '名称',
            dataIndex: 'name',
            key: 'name',
            width: 100,
            sorter: (a, b) => a.name.localeCompare(b.name, 'zh-Hans-CN', {sensitivity: 'accent'}),
            filterDropdown: (
                <div className="custom-filter-dropdown">
                    <Input
                        ref={ele => this.searchInput = ele}
                        placeholder="Search name"
                        value={this.state.search.name}
                        onChange={(e) => { this.onInputChange('name', e.target.value) }}
                        onPressEnter={this.onSearch}
                    />
                    <Button type="primary" onClick={this.onSearch}>Search</Button>
                </div>
            ),
            className: `column-${this.state.search.name?'filtered':'nofiltered'}`,
            filterIcon: <Icon type="smile-o"/>,
            filterDropdownVisible: this.state.filterDropdownVisible,
            onFilterDropdownVisibleChange: (visible) => {
                this.setState({
                    filterDropdownVisible: visible,
                }, () => this.searchInput && this.searchInput.focus());
            },
            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: 'creator',
            key: 'creator',
            width: 100
        }, {
            title: '创建时间',
            dataIndex: 'createTime',
            key: 'createTime',
            render: (text, record) => text.format('yyyy-MM-dd hh:mm:ss'),
            width: 100
        }, {
            title: '图表',
            dataIndex: 'chartSum',
            key: 'chartSum',
            width: 80
        }, {
            title: '操作',
            key: 'action',
            render: (text, record, index) => (
                <Dropdown code={record.code} overlay={moreOperatingMenu} trigger={['click']} >
                    <Icon type="setting" />
                </Dropdown>
            ),
            width: 80
        }];
        const data = [{
            key: '1',
            name: '销售数据',
            type: 'oracle',
            tag: '销售,常常常常文本',
            description: '这是一个测试数据',
            creator: 'zhuth',
            createTime: new Date('2018-07-01 08:33:18').format('yyyy-MM-dd hh:mm:ss'),
            chartSum: 9
        }, {
            key: '2',
            name: '采购数据',
            type: 'sqlserver',
            tag: '采购',
            description: '这是一个测试数据',
            creator: 'zhuth',
            createTime: new Date('2018-07-04 10:38:29').format('yyyy-MM-dd hh:mm:ss'),
            chartSum: 7
        }];

        return (
            <Tabs
                className='datasource-tabs'
                type="card"
                defaultActiveKey="1"
                tabBarExtraContent={
                    <div className='datasource-tabs-tools'>
                        <Button onClick={()=>{
                            dispatch({type: 'dataSource/testData'});
                        }}>测试数据</Button>
                        <Search
                            placeholder="请输入关键字"
                            onSearch={value => console.log(value)}
                        />
                        <Button onClick={() => {
                            dispatch({ type: 'dataSource/resetNewModel' });
                            this.showDataSourceBox('create')}
                        }>
                            {/* <Link to='./'> */}
                                <Icon type="plus" />添加数据源
                            {/* </Link> */}
                        </Button>
                        <DataSourceBox operation={operation} visibleBox={visibleBox} hideBox={this.hideBox} />
                    </div>
                }
            >
                <TabPane className='datasource-tab public-datasource' tab="公共数据源" key="1" >
                    <Table
                        className='datasource-table public-datasource-table'
                        columns={columns}
                        dataSource={dataSource.list}
                        loading={false}
                        size='small'
                        scroll={{x: false, y: 471}} // TODO 需要计算
                        pagination={false}
                        onRow={(record) => {
                            return {
                                onClick: () => {this.setState({ selectedCode:  record.code})}
                            }
                        }}
                    />
                </TabPane>
                <TabPane className='datasource-tab my-datasource' tab="我的数据源" key="2" >
                    <Table
                        className='datasource-table my-datasource-table'
                        columns={columns}
                        dataSource={dataSource.my}
                        loading={false}
                        size='small'
                    />
                </TabPane>
            </Tabs>
        )


    }
}

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

export default connect(mapStateToProps)(DataSource)