weaver_trunk_cli/pc4mobx/hrm/public/components/Form.js

import {
	WeaFormItem,
	WeaSearchGroup,
} from 'ecCom';
import {
	WeaSwitch
} from 'comsMobx';
import {
	isObject
} from 'lodash';
import {
	observer,
} from 'mobx-react';

@observer
export default class Form extends React.Component {
	/**
	 * @DateTime 2019-05-21
	 * 概述：是否渲染当前condition
	 * @param    {Number}   index condition的索引值
	 * @return   {Boolean} 
	 */
	isRenderCondition = (index) => {
		const {
			groupConfig,
			form
		} = this.props;
		//groupConfig不存在
		if (!groupConfig) {
			return true;
		}
		//groupConfig类型不正确
		if (!isObject(groupConfig)) {
			console && console.error && console.error('check groupConfig type!');
			return false；
		}

		//获取动态表单组的索引值
		const activeIndexs = Object.keys(groupConfig).map(key => parseInt(key));


		if (activeIndexs.includes(index)) {
			const key = index.toString();
			const config = groupConfig[key];
			const {
				activeKey,
				activeValue
			} = config;
			//所有表单元素的值
			const formFieldsParams = form.getFormParams();
			//activeKey对应表单元素的值
			const currentValue = formFieldsParams[activeKey];
			return activeValue.includes(currentValue);
		} else {
			return true;
		}
	}

	isRenderItem = (key) => {
		const {
			itemConfig
		} = this.props;

		//itemConfig不存在
		if (!itemConfig) {
			return true;
		}
		//itemConfig类型错误
		if (!isObject(itemConfig)) {
			console && console.error && console.error('check itemConfig type!');
		}

		//动态表单元素的domkey集合
		const activeKeys = Object.keys(itemConfig);

		if (activeKeys.includes(key)) {
			const config = itemConfig[key];
			const {
				activeKey,
				activeValue
			} = config;
			//所有表单元素的值
			const formFieldsParams = form.getFormParams();
			//activeKey对应表单元素的值
			const currentValue = formFieldsParams[activeKey];
			return activeValue.includes(currentValue);
		} else {
			return true;
		}

	}

	/**
	 * @DateTime 2019-05-21
	 * 概述：一行是否显示多个表单元素
	 * @return   {Boolean}  
	 */
	isRenderMultiItems = () => {
		const {
			multiConfig
		} = this.props;

		if (!multiConfig) {
			return false;
		}
		if (!isObject(multiConfig)) {
			console && console.error && console.error('check multiConfig type');
			return false;
		}

		return true;

	}

	//渲染一个表单元素
	renderItem = (item) => {
		this.renderRow(item);
	}

	//渲染多个表单元素
	renderMultiItems = (item) => {
		this.renderRow(item, true);
	}

	//渲染一行中包含的表单元素
	renderRow = (item, isMulti) => {
		const {
			form,
			multiConfig
		} = this.props;

		return (
			<WeaFormItem
	           {...item}
	           labelCol={{span: 6}}
	           wrapperCol={{span: 18}}
	           error={form.getError(item)}
	        >
	        	<WeaSwitch 
	        		fieldConfig={item} 
	        		form={form} 
	        		formParams={form.getFormParams()} 
	        		onChange={(res,obj) => handleFormChange && handleFormChange(res,obj)}
	        		onBlur={(value, res, obj)=>handleFormBlur && handleFormBlur(value, res, obj)}
	        	/>
	        	{
	        		isMulti  && multiConfig.map(item=>
						const {
							domkey
						} = item;
						const isRender = this.isRenderItem(domkey[0]);
						if (!isRender) {
							return null;
						}
	        			return (<WeaFormItem
				        		   {...item}
				        		   hideLabel={true}
				        		   wrapperCol={{span: 24}}
				        		   error={form.getError(item)}
				        		>
				        			<WeaSwitch 
				        				fieldConfig={item} 
				        				form={form} 
				        				formParams={form.getFormParams()} 
				        				onChange={(res,obj) => handleFormChange && handleFormChange(res,obj)}
				        				onBlur={(value, res, obj)=>handleFormBlur && handleFormBlur(value, res, obj)}
				        			/>
				        		</WeaFormItem>)
	        		)
	        	}
	        </WeaFormItem>
		)
	}

	render() {
		const {
			conditions,
			form
		} = this.props, {
			isFormInit
		} = form;

		//表单未初始化完成
		if (!isFormInit) {
			return null;
		}

		conditions && conditions.map((condition, index) => {
			//是否渲染当前condition
			const isRender = this.isRenderCondition(index);

			if (isRender) {
				condition.map(c => {
					return c.items.map(item => {
						const {
							domkey
						} = item;
						//是否渲染当前item
						const isRender = this.isRenderItem(domkey[0]);

						if (isRender) {
							//是否渲染多个item
							const isRenderMulti = this.isRenderMultiItems();
							if (isRenderMulti) {
								this.renderMultiItems(item);
							} else {
								this.renderItem(item);
							}
						} else {
							return null;
						}
					});
				});
			} else {
				return null;
			}
		});
	}
}