platform-bi-web/src/components/dataSourceDetail/content.jsx

import React from 'react'
import { connect } from 'dva'
import { Layout, Tabs } from 'antd'
import BaseConfig from './baseConfig'
import ColumnConfig from './columnConfig'
import AccessConfig from './accessConfig'
import './content.less'
const { Content } = Layout
const TabPane = Tabs.TabPane

class DataSourceDetailContent extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            mode: props.params.code && props.params.code==='create'?'create':'modify',
            type: props.params.type,
            code: props.params.code,
            tab: props.params.tab
        }
    }

    render() {
        const { dispatch } = this.props;
        const { type, code, tab, mode } = this.state;

        const tabs = [{
            tabName: 'base',
            title: '基本信息',
            content: <BaseConfig mode={mode} />,
        }, {
            tabName: 'column',
            title: '数据列配置',
            content: <ColumnConfig mode={mode} />,
        }, {
            tabName: 'access',
            title: '数据开放策略',
            content: <AccessConfig mode={mode} />,
        }];
        return (
            <Layout className='content-datasourcedetail'>
                <Content className='content'>
                    <Tabs activeKey={tab} type="card"
                        onChange={(key) => {
                            dispatch({ type: 'main/redirect', path: '/workshop/datasource/' + type + '/' + code + '/' + key })
                            this.setState({
                                tab: key,
                            })
                        }}
                    >
                        {tabs.map((item, index) => {
                            return <TabPane className='tab-datasource' key={item.tabName} tab={item.title}>
                                {item.content}
                            </TabPane>
                        })}
                    </Tabs>
                </Content>
            </Layout>
        )
    }
}

export default connect(({ present: { dataSourceDetail, dataConnect } }) => ({ dataSourceDetail, dataConnect }))(DataSourceDetailContent);