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

import React from 'react'
import { Tabs, Input, Button, Table, Icon, Divider } from 'antd'
const { TabPane } = Tabs
const { Search } = Input
import './dataSource.less'

class DataSource extends React.Component {
    constructor(props) {
        super(props);
        this.state = {

        }
    };
    render() {
        const columns = [{
            title: '名称',
            dataIndex: 'name',
            key: 'name'
        }, {
            title: '标签',
            dataIndex: 'tag',
            key: 'tag',
        }, {
            title: '说明',
            dataIndex: 'description',
            key: 'description',
        }, {
            title: '创建人',
            dataIndex: 'creator',
            key: 'creator'
        }, {
            title: '创建时间',
            dataIndex: 'createTime',
            key: 'createTime'
        }, {
            title: '操作',
            key: 'action',
            render: (text, record) => (
                <span>
                    <a href="javascript:;">Action 一 {record.name}</a>
                    <Divider type="vertical" />
                    <a href="javascript:;">Delete</a>
                    <Divider type="vertical" />
                    <a href="javascript:;" className="ant-dropdown-link">
                        More actions <Icon type="down" />
                    </a>
                </span>
            ),
        }];
        return (
            <Tabs
                className='datasource-tabs'
                type="card"
                defaultActiveKey="1"
                tabBarExtraContent={
                    <div className='datasource-tabs-tools'>
                        <Search
                            placeholder="input search text"
                            onSearch={value => console.log(value)}
                        />
                        <Button><Icon type="plus" />添加数据源</Button>
                    </div>
                }
            >
                <TabPane tab="公共数据源" key="1" >
                    <Table columns={columns} dataSource={[]} />
                </TabPane>
                <TabPane tab="我的数据源" key="2" >
                    {/* CSV/XLS组件 */}
                </TabPane>
            </Tabs>
        )


    }
}

export default DataSource