platform-bi-web/app/components/chartDesigner/content.jsx

import React from 'react';
import { Layout,  Collapse, Form, Select, Input, Tabs } from 'antd';
const { Header, Sider, Content } = Layout;
const CollapsePanel = Collapse.Panel;
const { TabPane } = Tabs;
const { FormItem } = Form;
const { Option } = Select;
import BaseConfigForm from './sections/baseConfigForm';
import PreparingForm from './sections/preparingForm';
import AggregateTableConfigForm from './sections/aggregateTableConfigForm';
import DataViewConfigForm from './sections/dataViewConfigForm';
import BarConfigForm from './sections/barConfigForm';
import LineConfigForm from './sections/lineConfigForm';
import TableView from './charts/table';
import EchartsView from './charts/echartsView';
import StyleEditor from './sections/styleEditor';
import ToolBar from './sections/toolBar';
import './content.less';
import { connect } from 'dva';
import chartDesigner from '../../models/chartDesigner';
import chartOption from '../../data/charts/option/bar.json';

class ChartDesignerContent extends React.Component {
    render() {
        const { baseConfig } = this.props.chartDesigner;
        const { viewType } = baseConfig;
        const formItemLayout = {
            labelCol: { span: 8 },
			wrapperCol: { span: 16 },
        };

        let configForm, chartView;

        if(viewType.key == 'aggregateTable') {
            configForm = (<AggregateTableConfigForm formItemLayout={formItemLayout}/>);
            chartView = (<TableView />);
        }else if(viewType.key == 'dataView') {
            configForm = (<DataViewConfigForm formItemLayout={formItemLayout}/>);
            chartView = (<TableView />);
        }else if(viewType.key == 'line') {
            // configForm = (<DataViewConfigForm formItemLayout={formItemLayout}/>);
            // chartView = (<EchartsView option={chartOption}/>);
        }else if(viewType.key == 'bar') {
            configForm = (<BarConfigForm formItemLayout={formItemLayout}/>);
            chartView = (<EchartsView />);
        }else if(viewType.key == 'pie') {
            // configForm = (<LineConfigForm formItemLayout={formItemLayout}/>);
            // chartView = (<EchartsView option={chartOption}/>);
        }

        return (
            <Layout>
                <Sider className='sider-left' width={300}>
                    <Tabs calssName='content-tabs'>
                        <TabPane className='chartconfig' tab='图表设置' key='1'>
                            <BaseConfigForm formItemLayout={formItemLayout}/>
                            { configForm }
                            <PreparingForm formItemLayout={formItemLayout}/>
                        </TabPane>
                        <TabPane className='otherconfig' tab='其他设置' key='2'>
                            <StyleEditor formItemLayout={formItemLayout}/>
                        </TabPane>
                    </Tabs> 
                </Sider>
                <Content>
                    <Layout>
                        <Header className='content-header'>
                            <ToolBar className='header-toolbar'/>
                        </Header>
                        <Content>
                            { chartView }
                        </Content>
                    </Layout>
                </Content>
            </Layout>
        )
    }
}
function mapStateToProps({ present: { chartDesigner } }) {
    return { chartDesigner: chartDesigner }
}
export default connect(mapStateToProps)(ChartDesignerContent);