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

import React from 'react'
import { Form, Select, Cascader } from 'antd'
import { connect } from 'dva'
const FormItem = Form.Item
const { Option } = Select

class DataViewConfigForm extends React.Component {
	render() {
		const { dispatch, chartDesigner, formItemLayout } = this.props;
		const columns = chartDesigner.columns;
        
		return (
            <Form layout='horizontal'>
				<FormItem label="展示列" {...formItemLayout}>
					<Select
						mode='multiple'
						allowClear
						value={chartDesigner.dataViewConfig.viewColumns}
						onChange={(value) => {
							dispatch({ type: 'chartDesigner/changeField', name: 'dataViewConfig', value: { ...chartDesigner.dataViewConfig, viewColumns: value }});
						}}
					>
						{columns.map((c, i)=>{
							return <Option key={i} value={c.name}>{c.label}</Option>
						})}
					</Select>
				</FormItem>
				<FormItem label='排序列' {...formItemLayout}>
					<Cascader
						// value={[chartDesigner.dataViewConfig.sortColumn.name, chartDesigner.dataViewConfig.sortColumn.sortType]}
						allowClear={true}
						options={columns.filter(c =>['ordinal', 'categorical', '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 = {};
							// 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: 'sortColumn', value: { ...chartDesigner.dataViewConfig, sortColumn: { 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>
			</Form>
        );
	}
}

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

export default Form.create()(connect(mapStateToProps)(DataViewConfigForm));