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 '../../../models/chartDesigner'
import '../../../models/dataSource'
import CHART_TYPE from './chartType.json'
import './baseConfigForm.less'

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

		return (
			<Form hideRequiredMark={true}>
				<FormItem label='数据源' {...formItemLayout}>
					<Select
						value={props.chartDesigner.baseConfig.dataSource}
						labelInValue={true}
						onChange={(value) => {
							props.dispatch({ type: 'chartDesigner/setModel', name: 'baseConfig', value: {
								...props.chartDesigner.baseConfig, dataSource: value } });
						}}
					>
						{allDataSource.map((dataSource, i)=>{
							return (<Option key={`dataSource-${i}`} value={dataSource.code}>{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/setModel', name: 'baseConfig', value: { ...props.chartDesigner.baseConfig, viewType: { key: value, label: item.title } } });
						}}
					>
					{
						CHART_TYPE.map( c => (
							<Option key={c.type} value={c.type} title={c.label}>
								<div className='viewtype-box'>
									<div className='viewtype-icon'>
									</div>
									<div className='viewtype-text'>
										{c.label}
									</div>
								</div>
							</Option>
						))
					}
					</Select>
				</FormItem>
			</Form>
		);
	}
}

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

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