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

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

class PreparingForm extends React.Component {

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

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

	render() {
		const { config } = this.state;
		const { groupBy } = config;
		
		const { getFieldDecorator, getFieldsError, getFieldError, isFieldTouched } = this.props.form;

		const formItemLayout = {
			labelCol: { span: 10 },
			wrapperCol: { span: 14 },
		};

		const columns = [
			{ value: 'c1', label: '列1' },
			{ value: 'c2', label: '列2' },
			{ value: 'c3', label: '列3' },
			{ value: 'c4', label: '列4' },
			{ value: 'c5', label: '列5' },
			{ value: 'c6', label: '列6' },
			{ value: 'c7', label: '列7' },
			{ value: 'c8', label: '列8' },
			{ value: 'c9', label: '列9' },
			{ value: 'c10', label: '列10' },
			{ value: 'c11', label: '列11' },
			{ value: 'c12', label: '列12' },
			{ value: 'c13', label: '列13' }
		];

		return (
			<Form layout='horizontal'>
				<FormItem label='分组' {...formItemLayout}>
					{getFieldDecorator('groupBy', {
						initialValue : groupBy
					})(
						<Select mode="multiple">
							{columns.map((c, i)=>{
								return (<Option key={`column-${i}`} value={c.value}>{c.label}</Option>)
							})}
						</Select>
					)}
				</FormItem>
				{/* <FormItem label='分段' {...formItemLayout}>
					{getFieldDecorator('bucketization', {
						initialValue : bucketization
					})(
						<Select mode="multiple">
							{bucketizations.map((b, i)=>{
								return (<Option key={`bucketization-${i}`} value={b.value}>{b.label}</Option>)
							})}
						</Select>
					)}
				</FormItem> */}
			</Form>
		);
	}
}

export default Form.create()(PreparingForm);