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

import React from 'react';
import { Form, Select, Icon, Tag, Cascader, Dropdown, Menu } from 'antd';
const FormItem = Form.Item;
const { Option } = Select;
const { SubMenu, MenuItemGroup } = Menu;
import { connect } from 'dva';
import chartDesigner from '../../../models/chartDesigner';
import './barConfigForm.less';

const barConfigForm = ({ chartDesigner, dispatch, formItemLayout }) => {
	
	
	const columns = chartDesigner.columns;

	const menu = <Menu>
		<Menu.Item>
		<a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">1st menu item</a>
		</Menu.Item>
		<Menu.Item>
		<a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">2nd menu item</a>
		</Menu.Item>
		<Menu.Item>
		<a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">3rd menu item</a>
		</Menu.Item>
	</Menu>

	return (
		<Form hideRequiredMark={true}>
			<FormItem label='横轴' {...formItemLayout}>
				<Select
					value={chartDesigner.barConfig.xAxis}
					allowClear={true}
					placeholder='请选择...'
					labelInValue={true}
					onChange={(value) => {
						dispatch({ type: 'chartDesigner/barConfig/setXAxis', xAxis: value});
					}}
				>
					{columns.map((c, i)=>{
						return (<Option key={i} value={c.name}>{c.label}</Option>)
					})}
				</Select>
			</FormItem>
			<FormItem label='纵轴' {...formItemLayout}>
				<Cascader
					className='barconfig-yxais'
					value={chartDesigner.barConfig.yAxis}
					allowClear={true}
					placeholder='请选择...'
					options={columns.map((c, i)=>{
						// return (<Option key={i} value={c.name}>{c.label}</Option>)
						return {
							value: c.name,
							label: c.label,
							children: [{
								value: 'sum',
								label: '累计'
							}, {
								value: 'avg',
								label: '平均值'
							}, {
								value: 'median',
								label: '中位数'
							}, {
								value: 'count',
								label: '计数'
							}, {
								value: 'distinctCount',
								label: '不重复计数'
							}, {
								value: 'max',
								label: '最大值'
							}, {
								value: 'min',
								label: '最小值'
							}]
						}
					})}
					onChange={(value) => {
						dispatch({ type: 'chartDesigner/barConfig/setYAxis', yAxis: value});
					}}
					displayRender={(label, selectedOptions) => {
						let menu = selectedOptions.length > 0 ? <Menu
							defaultSelectedKeys={['sum']}
							selectedKeys={['sum']}
							selectable={true}
						>
							{selectedOptions[0].children.map((c, i) => {
								return <Menu.Item  data-value={c.value} key={i} onClick={(e) => {
									let value = e.domEvent.target.getAttribute('data-value');
									dispatch({ type: 'chartDesigner/barConfig/setYAxis', yAxis: [chartDesigner.barConfig.yAxis[0], value] });
									e.domEvent.stopPropagation();
								}}>{c.label}</Menu.Item>
							})}
						</Menu>: [];
						let tag = selectedOptions.length > 0 ? <Dropdown
							trigger={['click']}
							overlay={menu}
						>
							<Tag size='small' onClick={(e) => {e.stopPropagation()}}>{label[1]}</Tag>
						</Dropdown>
						: null;

						return <div>
							{tag}
							<span>{label[0]}</span>
						</div>
					}}
				>
				</Cascader>
			</FormItem>
		</Form>
	);
}

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

export default connect(mapStateToProps)(barConfigForm);