platform-bi-web/app/components/chartDesigner/sections/baseConfigForm.jsx

import React from 'react';
import { Form, Select, Input, Icon, Dropdown, Menu, Row, Col, Card } from 'antd';
const FormItem = Form.Item;
const { Option } = Select;
const { Search } = Input;
import { connect } from 'dva';
import chartDesigner from '../../../models/chartDesigner';
import './baseConfigForm.less';

class baseConfigForm extends React.Component {
	render() {
		const props = this.props;
		const allDataSource = props.chartDesigner.allDataSource;
		const { formItemLayout } = props

		const menu = (
			<Menu>
				<Menu.Item key="1">1st menu item</Menu.Item>
				<Menu.Item key="2">2nd memu item</Menu.Item>
				<Menu.Item key="3">3rd menu item</Menu.Item>
			</Menu>
		);

		return (
			<Form hideRequiredMark={true}>
				<FormItem label='数据源' {...formItemLayout}>
					<Select
						value={props.chartDesigner.baseConfig.dataSource}
						labelInValue={true}
						onChange={(value) => {
							props.dispatch({ type: 'chartDesigner/baseConfig/setDataSource', dataSource: value});
						}}
					>
						{allDataSource.map((dataSource, i)=>{
							return (<Option key={`dataSource-${i}`} value={dataSource.id}>{dataSource.name}</Option>)
						})}
					</Select>
				</FormItem>
				<FormItem label='可视化模式' {...formItemLayout}>
					<Select
						dropdownClassName='baseconfig-viewtype'
						value={props.chartDesigner.baseConfig.viewType.key}
						dropdownMatchSelectWidth={false}
						onChange={(value, item) => {
							props.dispatch({ type: 'chartDesigner/baseConfig/setViewType', viewType: {key: value, label: item.title}});
						}}
					>
						<Option value="aggregateTable" title='总体统计数据表'>
							<div className='viewtype-box'>
								<div className='viewtype-icon viewtype-icon-agg'>
								</div>
								<div className='viewtype-text'>
									总体统计数据表
								</div>
							</div>
						</Option>
						<Option value="dataView" title='个体统计数据表'>
							<div className='viewtype-box'>
								<div className='viewtype-icon'>
								</div>
								<div className='viewtype-text'>
									个体统计数据表
								</div>
							</div>
						</Option>
						<Option value="line" title='折线图'>
							<div className='viewtype-box'>
								<div className='viewtype-icon'>
								</div>
								<div className='viewtype-text'>
									折线图
								</div>
							</div>
						</Option>
						<Option value="bar" title='柱状图'>
							<div className='viewtype-box'>
								<div className='viewtype-icon'>
								</div>
								<div className='viewtype-text'>
									柱状图
								</div>
							</div>
						</Option>
						<Option value="pie" title='饼状图'>
							<div className='viewtype-box'>
								<div className='viewtype-icon'>
								</div>
								<div className='viewtype-text'>
									饼状图
								</div>
							</div>
						</Option>
						<Option value="scatter" title='散点图'>
							<div className='viewtype-box'>
								<div className='viewtype-icon'>
								</div>
								<div className='viewtype-text'>
									散点图
								</div>
							</div>
						</Option>
					</Select>
					{/* <Select 
						value={props.chartDesigner.baseConfig.viewType}
						labelInValue={true}
						onChange={(value) => {
							props.dispatch({ type: 'chartDesigner/baseConfig/setViewType', viewType: value});
						}}
					>
						<Option value='aggregateTable'>总体统计数据表</Option>
						<Option value='dataView'>个体统计数据表</Option>
						<Option value='line'>折线图</Option>
						<Option value='bar'>柱状图</Option>
						<Option value='pie'>饼状图</Option>
						<Option value='scatter'>散点图</Option>
					</Select> */}
				</FormItem>
			</Form>
		);
	}
}

function mapStateToProps({ present: { chartDesigner } }) {
    return { chartDesigner: chartDesigner }
}

export default Form.create()(connect(mapStateToProps)(baseConfigForm));