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

import React from 'react';
import { Form, Icon, Input, Button, Select, Switch } from 'antd';
const FormItem = Form.Item;
const { Option } = Select;
import emitter from '../../../eventManger/ev'

function hasErrors(fieldsError) {
	return Object.keys(fieldsError).some(field => fieldsError[field]);
}

class baseConfigForm extends React.Component {

	constructor(props) {
		super(props);
		this.state = {
			config: props.config
		}
	}

	componentDidMount() {
		// To disabled submit button at the beginning.
		this.props.form.validateFields();
	}

	changeViewType(value, ele) {
		let viewType = {
			name: value,
			label: ele.props.children
		}
        emitter.emit('changeViewType', viewType);
    }

	render() {
		const { config } = this.state;
		const { viewType, note, currentDataSource, accessPermission, editPermission, showLegend, showTooltip, datazoom, toolbox } = config;
		
		const allDataSource = [
			{ id: 'd1', name: '数据源1' },
			{ id: 'd2', name: '数据源2' },
			{ id: 'd3', name: '数据源3' },
			{ id: 'd4', name: '数据源4' },
			{ id: 'd5', name: '数据源5' },
			{ id: 'd6', name: '数据源6' },
		];

		const allPermission = [
			{ value: 'owner', name: '创建人' },
			{ value: 'anyone', name: '所有人' }
		];
		
		const { getFieldDecorator, getFieldsError, getFieldError, isFieldTouched } = this.props.form;

		const formItemLayout = {
			labelCol: { span: 9 },
			wrapperCol: { span: 15 },
		};

		return (
			<Form hideRequiredMark={true}>
				<FormItem label='可视化模式' {...formItemLayout}>
					{getFieldDecorator('viewType', {
						rules: [{ required: true, message: '可视化模式不能为空' }],
						initialValue : viewType
					})(
						<Select onChange={this.changeViewType}>
							<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>
				<FormItem label='描述' {...formItemLayout}>
					{getFieldDecorator('note', {
						initialValue: note
					})(
						<Input placeholder="请输入" />
					)}
				</FormItem>
				<FormItem label='数据源' {...formItemLayout}>
					{getFieldDecorator('dataSource', {
						rules: [{ required: true, message: '数据源不能为空' }],
						initialValue: currentDataSource
					})(
						<Select>
							{allDataSource.map((dataSource, i)=>{
								return (<Option key={`dataSource-${i}`} value={dataSource.id}>{dataSource.name}</Option>)
							})}
						</Select>
					)}
				</FormItem>
				<FormItem label='访问权限' {...formItemLayout}>
					{getFieldDecorator('accessPermission', {
						rules: [{ required: true, message: '访问权限不能为空' }],
						initialValue: accessPermission
					})(
						<Select mode="multiple">
							{allPermission.map((accessPermission, i)=>{
								return (<Option key={`accessPermission-${i}`} value={accessPermission.value}>{accessPermission.name}</Option>)
							})}
						</Select>
					)}
				</FormItem>
				<FormItem label='修改权限' {...formItemLayout}>
					{getFieldDecorator('editPermission', {
						rules: [{ required: true, message: '修改权限不能为空' }],
						initialValue: editPermission
					})(
						<Select mode="multiple">
							{allPermission.map((editPermission, i)=>{
								return (<Option key={`editPermission-${i}`} value={editPermission.value}>{editPermission.name}</Option>)
							})}
						</Select>
					)}
				</FormItem>
				<FormItem label='图例' {...formItemLayout}>
					<Switch checkedChildren="开" unCheckedChildren="关" defaultChecked={showLegend} />
				</FormItem>
				<FormItem label='提示框' {...formItemLayout}>
					{getFieldDecorator('tooltip')(
						<Switch checkedChildren="开" unCheckedChildren="关" defaultChecked={showTooltip} />
					)}
				</FormItem>
				<FormItem label='缩放' {...formItemLayout}>
					{getFieldDecorator('datazoom')(
						<Switch checkedChildren="开" unCheckedChildren="关" defaultChecked={datazoom} />
					)}
				</FormItem>
				<FormItem label='工具箱' {...formItemLayout}>
					{getFieldDecorator('toolbox')(
						<Switch checkedChildren="开" unCheckedChildren="关" defaultChecked={toolbox} />
					)}
				</FormItem>
			</Form>
		);
	}
}

export default Form.create()(baseConfigForm);