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

import React from 'react'
import { connect } from 'dva'
import { Layout, Steps, Button, message, Tabs } from 'antd'
const { Header, Content } = Layout
const Step = Steps.Step
const TabPane = Tabs.TabPane
import { Link } from 'react-router-dom'
import BaseConfig from './baseConfig'
import ConnectConfig from './connectConfig'
import ColumnConfig from './columnConfig'
import AccessConfig from './accessConfig'
import './dataSourceDetail.less'

class DataSourceDetail extends React.Component {

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

    componentDidMount() {
        this.props.dispatch({ type: 'dataSource/setNewModelField', name: 'type', value: this.props.match.params.type });
        this.props.dispatch({ type: 'dataSource/setNewModelField', name: 'code', value: this.props.match.params.code });
    }

    next() {
        const current = this.state.current + 1;
        this.setState({ current });
    }

    prev() {
        const current = this.state.current - 1;
        this.setState({ current });
    }

    render() {
        const { dispatch } = this.props;
        const { mode, current } = this.state;
        const steps = [{
            title: '属性配置',
            content: <BaseConfig/>
        }, {
            title: '数据列配置',
            content: <ColumnConfig />
        }, {
            title: '权限配置',
            content: <AccessConfig />
        }];
        return (
            <Layout className='layout-datasource-detail'>
                <Content className='content'>
                    {mode == 'create' ? (<div>
                        <Steps className='steps-body' current={current}>
                            {steps.map((item,index) => <Step key={'step-' + index} title={item.title} />)}
                        </Steps>
                        <div className="steps-content">
                            {steps[current].content}
                        </div>
                        <div className="steps-action">
                            {
                                current > 0 && (
                                <Button onClick={() => this.prev()}>
                                    上一步
                                </Button>)
                            }
                            {
                                current < steps.length - 1
                                && <Button type="primary" onClick={() => this.next()}>下一步</Button>
                            }
                            {
                                current === steps.length - 1
                                && <Button type="primary" onClick={() => {
                                    dispatch({ type: 'dataSource/add' })
                                    dispatch({ type: 'main/redirect', path: { pathname: '/dataSource' } });
                                }}>完成</Button>
                            }
                        </div>
                    </div>) : (
                        <Tabs defaultActiveKey="tab-0" type="card">
                            {steps.map((item, index) => {
                                return <TabPane className='tab-datasource' key={'tab-' + index} tab={item.title}>
                                    {item.content}
                                </TabPane>
                            })}
                        </Tabs>
                    )}
                </Content>
            </Layout>
        )
    }
}

export default connect()(DataSourceDetail);