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

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

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

    componentDidMount() {
        this.setScrollTableHeight();
    }

    /**
     * 根据视图设置表格高度以呈现滚动条
     */
    setScrollTableHeight() {
        const mainContent = document.getElementsByClassName('main-content')[0];
        const tabBar = mainContent.getElementsByClassName('ant-tabs-bar')[0];
        const tableHeader = mainContent.getElementsByClassName('ant-table-header')[0];
        const tableBody = mainContent.getElementsByClassName('ant-table-body')[0];

        tableBody.style.maxHeight=`${mainContent.offsetHeight - tabBar.offsetHeight - tableHeader.offsetHeight - 38}px`;
    }

    showCreateBox = () => {
        this.setState({
            visibleCreateBox: true
        });
    }

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

    hideDataConnectBox = () => {
        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, dataConnect, dispatch } = this.props;
        const { loading, activeTab, search, visibleBox, operation, selectedDataSourceCode, selectedDataConnectCode } = this.state;
        
        const moreOperatingMenu = (
            <Menu className='operationmenu'>
                <Menu.Item
                    onClick={(e) => {
                        let selectedModel = dataSource.list.find((i) => { return i.code == selectedDataSourceCode })
                        dispatch({type: 'main/redirect', path: {pathname: '/datasource/'+ selectedModel.type +'/' + selectedModel.code + '/base'}});
                    }}>
                    <Icon type="info-circle-o" />属性设置
                </Menu.Item>
                <Menu.Item onClick={() => {
                    let selectedModel = dataSource.list.find((i) => { return i.code == selectedDataSourceCode })
                    dispatch({type: 'main/redirect', path: {pathname: '/datasource/'+ selectedModel.type +'/' + selectedModel.code + '/column'}});
                }}>
                    <Icon type="table" />数据列设置
                </Menu.Item>
                <Menu.Item><Icon type="search" />预览数据</Menu.Item>
                <Menu.Item onClick={() => {
                    let selectedModel = dataSource.list.find((i) => { return i.code == selectedDataSourceCode })
                    dispatch({type: 'main/redirect', path: {pathname: '/datasource/'+ selectedModel.type +'/' + selectedModel.code + '/access'}});
                }}><Icon type="lock" />权限设置</Menu.Item>
                <Menu.Divider />
                <Menu.Item
                    onClick={(e) => {
                        dispatch({ type: 'dataSource/remoteDelete', code: selectedDataSourceCode });
                    }}
                ><Icon type="delete" />删除</Menu.Item>
            </Menu>
        );
        const dataSourceColumns = [{
            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 dataConnectColumns = [{
            title: '名称',
            dataIndex: 'name',
            key: 'name',
            width: 100,
            render: (text, record) => {
                return <div className='datasource-name'>
                    <div className={`datasource-type type-${record.type}`}></div>
                    <div>{text}</div>
                </div>
            }
        }, {
            title: '说明',
            dataIndex: 'description',
            key: 'description',
            width: 100
        }, {
            title: '操作',
            key: 'action',
            width: 300,
            render: (text, record) => (
                <div className='action-col'>
                    <div className='operation' onClick={() => {
                        let selectedModel = dataConnect.list.find((i) => { return i.code == record.code });
                        dispatch({ type: 'dataConnect/setNewModel', model: selectedModel });
                        this.showDataConnectBox('modify')
                    }}><Icon type="info-circle-o"/>属性</div>
                    <div className='operation'><Divider type="vertical" /></div>
                    <div className='operation' onClick={() => {
                         dispatch({ type: 'dataSource/resetNewModel' });
                         dispatch({ type: 'dataSource/setNewModelField', fields: [
                             { name: 'dbType', value: record.dbType },
                             { name: 'address', value: record.address },
                             { name: 'port', value: record.port },
                             { name: 'dbName', value: record.dbName },
                             { name: 'userName', value: record.userName },
                             { name: 'password', value: record.password }
                         ] });

                         dispatch({type: 'main/redirect', path: {pathname: '/datasource/database/create'}});
                    }}><Icon type="plus"/>创建数据源</div>
                    <div className='operation'><Divider type="vertical" /></div>
                    <div className='operation' onClick={() => {
                        dispatch({ type: 'dataConnect/remoteDelete', code: record.code });
                    }}><Icon type="delete"/>删除</div>
                </div>
            ),
            width: 80
        }];

        return (
            <Tabs
                className='datasource-tabs'
                type="card"
                defaultActiveKey="1"
                tabBarExtraContent={
                    <div className='datasource-tabs-tools'>
                        <Search
                            placeholder="请输入关键字"
                            onSearch={value => console.log(value)}
                        />
                        <Dropdown overlay={(
                            <Menu onClick={(item, key, keyPath) => {
                                const type = item.key;
                                dispatch({ type: 'dataSource/resetNewModel' });
                                dispatch({ type: 'dataSource/setNewModelField', name: 'type', value: type });
                                dispatch({type: 'main/redirect', path: {pathname: '/datasource/'+ type +'/create'}});
                            }}>
                                <Menu.Item key='database'>数据库</Menu.Item>
                                <Menu.Item key='file'>文件</Menu.Item>
                            </Menu>
                        )} trigger={['click']}>
                            <Button style={{ display: activeTab=='dataConnect'?'none':'inline-block' }}>
                                <Icon type="plus" />添加数据源
                            </Button>
                        </Dropdown>
                        <Button style={{ display: activeTab=='dataConnect'?'inline-block':'none' }} onClick={(e) => {
                            dispatch({ type: 'dataConnect/resetNewModel' });
                            this.showDataConnectBox('create')
                        }}>
                            <Icon type="plus" />添加数据连接
                        </Button>
                        <DataConnectBox operation={operation} visibleBox={visibleBox} hideBox={this.hideDataConnectBox} />
                    </div>
                }
                onChange={(key) => {
                    this.setState({
                        activeTab: key == '1' ? 'dataSource' : 'dataConnect'
                    });
                }}
            >
                <TabPane className='datasource-tab' tab="数据源" key="1" >
                    <Table
                        className='datasource-table datasource-table'
                        columns={dataSourceColumns}
                        dataSource={dataSource.list}
                        loading={loading}
                        size='small'
                        scroll={{x: false, y: 471}}
                        pagination={false}
                        onRow={(record) => {
                            return {
                                onClick: () => {this.setState({ selectedDataSourceCode:  record.code})}
                            }
                        }}
                    />
                </TabPane>
                <TabPane className='dataconnect-tab dataconnect' tab="数据库连接" key="2" >
                    <Table
                        className='dataconnect-table dataconnect-table'
                        columns={dataConnectColumns}
                        dataSource={dataConnect.list}
                        loading={loading}
                        size='small'
                        scroll={{x: false, y: 471}}
                        pagination={false}
                    />
                </TabPane>
            </Tabs>
        )


    }
}

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

export default connect(mapStateToProps)(DataSource)