platform-bi-web/src/components/chartDesigner/sections/lineConfigForm.jsx

import React from 'react'
import { Form, Select, Tag, Cascader, Dropdown, Menu } from 'antd'
import { connect } from 'dva'
import '../../../models/chartDesigner'
import GAUGE from './gauge.json'
const FormItem = Form.Item
const { Option } = Select

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

	return (
		<Form hideRequiredMark={true}>
			<FormItem label='横轴' {...formItemLayout}>
				<Cascader
					value={[chartDesigner.lineConfig.xAxis.column.value, chartDesigner.lineConfig.xAxis.granularity.value]}
					allowClear={true}
					options={columns.filter(c =>['time'].indexOf(c.type) !== -1).map((c, i)=>{
						return {
							type: c.type,
							value: c.name,
							label: c.label
						}
					})}
					onChange={(value, items) => {
						let column = {};
						let granularity = {};
						console.log('items', items)
						console.log('value', value)
						if(items.length > 0) {
							column = { type: items[0].type, value: items[0].value, label: items[0].label };
						}
						if(items.length > 1) {
							granularity = { value: items[1].value, label: items[1].label };
						}
						dispatch({ type: 'chartDesigner/changeField', name: 'lineConfig', value: { ...chartDesigner.lineConfig, xAxis: { column, granularity } } });
					}}
					displayRender={(label, selectedOptions) => {
						let text = '';
						let className = 'cascader-label';
						if(label.length > 0) {
							className += ' full-label';
							text += label[0];
							if(label.length > 1) {
								text += '(' + label[1] + ')';
							}
						}else {
							className += ' empty-label';
							text = '请选择...';
						}
						return <div className={className}>{text}</div>;
					}}
				>
				</Cascader>
			</FormItem>
			<FormItem label='纵轴' {...formItemLayout}>
				<Cascader
					className='gauge-item'
					value={[chartDesigner.lineConfig.yAxis.column.value, chartDesigner.lineConfig.yAxis.gauge.value]}
					allowClear={true}
					options={columns.map((c, i)=>{
						return {
							value: c.name,
							label: c.label,
							children: GAUGE[chartDesigner.baseConfig.viewType].map(g => {
                                if(g.columnType.indexOf(c.type) !== -1) {
                                    return g;
                                }else {
                                    return null;
                                }
                            }).filter( g => g!==null)
						}
					})}
					onChange={(value, items) => {
						let column = {};
						let gauge = {};
						if(value.length > 0) {
							column = { type: items[0].type, value: items[0].value, label: items[0].label };
							gauge = { value: items[1].value, label: items[1].label };
						}
						dispatch({ type: 'chartDesigner/changeField', name: 'lineConfig', value: { ...chartDesigner.lineConfig, yAxis: { column, gauge } } });
					}}
					displayRender={(label, selectedOptions) => {
						let menu = selectedOptions.length > 0 ? <Menu
							selectedKeys={[chartDesigner.lineConfig.yAxis.gauge.value]}
							selectable={true}
						>
							{selectedOptions[0].children.map((c, i) => {
								return <Menu.Item  data-value={c.value} data-label={c.label} key={c.value} onClick={(e) => {
									let value = e.domEvent.target.getAttribute('data-value');
									let label = e.domEvent.target.getAttribute('data-label');
									dispatch({ type: 'chartDesigner/changeField', name: 'lineConfig', value: { 
										...chartDesigner.lineConfig,
										yAxis: {
											column: chartDesigner.lineConfig.yAxis.column,
											gauge: { value, label }
										}
									}});
									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 className={`cascader-label ${tag?'full' : 'empty'}-label`}>
							{tag}
							<span>{label[0] || '请选择...'}</span>
						</div>
					}}
				>
				</Cascader>
			</FormItem>
			<FormItem label='分组' {...formItemLayout}>
				<Select
					maxTagCount={1}
					labelInValue={true}
					allowClear={true}
					placeholder='请选择...'
					onChange={(value) => {
						// value = value.splice(-1);
						dispatch({ type: 'chartDesigner/changeField', name: 'lineConfig', value: { ...chartDesigner.lineConfig, groupBy: value } });
					}}
					value={chartDesigner.lineConfig.groupBy}
				>
					{columns.filter(c => c.type === 'categorical').map((c, i)=>{
						return (<Option key={i} value={c.name}>{c.label}</Option>)
					})}
				</Select>
			</FormItem>
		</Form>
	);
}

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

export default connect(mapStateToProps)(LineConfigForm);