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

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

class AggregateTableConfigForm extends React.Component {

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

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

	render() {
		const { config } = this.state;
        
        const columns = [
			{ value: 'c1', label: '列1' },
			{ value: 'c2', label: '列2' },
			{ value: 'c3', label: '列3' },
			{ value: 'c4', label: '列4' },
			{ value: 'c5', label: '列5' },
        ];

        let targetColumn = ['c3'];
        
        const statisticsOptions = [
            { value: 'count', label: '条数', checked: true }, 
            { value: 'max', label: '最大值', checked: true },
            { value: 'percentage', label: '百分比', checked: true },
            { value: '75th', label: '75th值', checked: true },
            { value: 'sum', label: '总和', checked: true },
            { value: 'median', label: '中位数', checked: false },
            { value: 'avg', label: '平均数', checked: true },
            { value: '25th', label: '25th值', checked: true },
            { value: 'std', label: '标准差', checked: true },
            { value: 'min', label: '最小值', checked: true }
        ];

        let filterFunc = function(option) {
            return option.checked == true;
        }
		
		const { getFieldDecorator, getFieldsError, getFieldError, isFieldTouched } = this.props.form;

		const formItemLayout = {
			labelCol: { span: 10 },
			wrapperCol: { span: 14 },
        };
        
		return (
			<Form layout='horizontal'>
				<FormItem label='分析目标' {...formItemLayout}>
					{getFieldDecorator('targetColumn', {
						rules: [{ required: true, message: '分析目标不能为空' }],
						initialValue : targetColumn
					})(
						<Select mode='multiple'>
							{columns.map((c, i)=>{
								return (<Option key={`c-${i}`} value={c.value}>{c.label}</Option>)
							})}
						</Select>
					)}
				</FormItem>
				<FormItem label='显示总体数据' {...formItemLayout}>
					{getFieldDecorator('statistics', {
						initialValue: statisticsOptions.filter(filterFunc).map((s)=>{return s.label})
					})(
						<CheckboxGroup options={statisticsOptions.map((s)=>{return s.label})} onChange={this.onChange} />
					)}
				</FormItem>
			</Form>
		);
	}
}

export default Form.create()(AggregateTableConfigForm);