weaver_trunk_cli/pc4mobx/hrm/public/ConfigurableForm.js

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

@observer
export default class ConfigurableForm extends React.Component {
	constructor(props) {
		super(props);
	}

	//渲染表单元素
	renderForm = () => {
		const {
			form,
			conditions,
			onFormChange,
		} = this.props;

		return conditions && conditions.map((c, index) => {
			const isRenderCurrentCondition = this.isRenderCurrentCondition(index);

			if (!isRenderCurrentCondition) {
				return null;
			}

			const {
				title,
				defaultshow
			} = c;

			const coms = c.items.map(item => {
				const {
					label,
					domkey,
					viewAttr,
					hasBorder,
					otherParams,
				} = item;

				const key = domkey[0];

				//是否渲染当前表单元素
				if (!this.isRenderFormItem(key)) {
					return null;
				}

				let com = [];

				//是否只渲染当前表单元素
				if (this.isOnlyRenderCurrentFormElement(key)) {
					//当前表单元素是否有前缀
					if (this.hasPrefix(key)) {
						com.push(this.renderPrefix(key));
					}

					//渲染当前元素
					//当前元素为被联动元素，且不显示时，返回null
					if (this.isLinked(key) && !this.isLinkedElementShow(key)) {
						com.push(null);
					} else {
						com.push(<div className={key}>
							<WeaSwitch fieldConfig={item} form={form} formParams={form.getFormParams()} onChange={datas => onFormChange && onFormChange(datas)}/>
						</div>);
					}

					//当前表单元素是否有后缀
					if (this.hasSuffix(key)) {
						com.push(this.renderSuffix(key));
					}
				} else {
					const ele = this.renderMultiFormElement(key, item);
					com = [...ele];
				}

				if (!this.isContainerHasComponent(com)) {
					return null;
				}

				const hasUnderline = () => {
					let b;
					if (viewAttr === 1) {
						if (hasBorder) {
							b = false;
						} else {
							if (otherParams) {
								if (otherParams.hasBorder) {
									b = false;
								} else {
									b = true;
								}
							} else {
								return true;
							}
						}
					} else {
						b = false;
					}
					return b;
				}

				return (
					<WeaFormItem
			           label={label}
			           labelCol={{span: 6}}
			           wrapperCol={{span: 18}}
			           error={this.getError(key,item)}
			           tipPosition='bottom'
			           underline={hasUnderline()}
			        >
			        	{com}
			        </WeaFormItem>
				)
			});
			if (conditions.length > 1) {
				return <WeaSearchGroup center title={title} showGroup={defaultshow} children={coms} />
			} else {
				return coms;
			}
		});
	}

	isRenderFormItem = (key) => {
		const {
			blackList = []
		} = this.props;

		return isArray(blackList) && !blackList.includes(key)
	}


	isOnlyRenderCurrentFormElement = (key) => {
		const {
			togetherElements = {}
		} = this.props;

		return !togetherElements[key];
	}


	renderMultiFormElement = (key, item) => {
		const {
			form,
			togetherElements = {},
		} = this.props;

		const items = togetherElements[key];

		const clone = [...items];

		clone.unshift(item);

		const ele = clone.map((item, index) => {
			const {

				domkey
			} = item;

			return (
				<div className={domkey[0]}>
					<WeaFormItem
					   hideLabel
			           labelCol={{span: 0}}
			           wrapperCol={{span: 24}}
			           error={form.getError(item)}
			           tipPosition='bottom'
			        >
						<WeaSwitch fieldConfig={item} form={form} formParams={form.getFormParams()} />
					</WeaFormItem>
				</div>
			)
		})

		return ele;
	}

	hasPrefix = (key) => {
		const {
			prefix
		} = this.props;

		return prefix && prefix[key];
	}

	renderPrefix = (key) => {
		const {
			prefix
		} = this.props;

		return prefix[key];
	}

	hasSuffix = (key) => {
		const {
			suffix
		} = this.props;

		return suffix && suffix[key];
	}

	renderSuffix = (key) => {
		const {
			suffix,
			form
		} = this.props;

		const info = suffix[key];

		if (isArray(info)) {
			const val = form.getFormParams()[key];
			return info[val];
		} else {
			return suffix[key];
		}
	}

	isLinked = (key) => {
		const {
			linkage
		} = this.props;

		return linkage && linkage[key];
	}

	isLinkedElementShow = (key) => {
		const {
			linkage,
			form
		} = this.props;

		const {
			activeKey,
			activeValue
		} = linkage[key];

		return activeValue.split(',').includes(form.getFormParams()[activeKey]);
	}

	getError = (key, item) => {
		const {
			form
		} = this.props;

		if (this.isOnlyRenderCurrentFormElement(key)) {
			return form.getError(item)
		}
	}

	isContainerHasComponent = (coms) => {
		return !coms.every(com => com === null);
	}

	//是否渲染当前condition
	isRenderCurrentCondition = (index) => {
		const {
			groupLinkage,
			form
		} = this.props;

		//表单组之间不需要做联动
		if (!groupLinkage) {
			return true
		}

		//获取datas所有key值
		const getKeys = (datas) => {
			return Object.keys(datas)
		}

		//获取datas所有value值
		const getValues = (datas) => {
			return Object.values(datas)
		}

		//获取value值的activeKey
		const getActivekeys = (datas) => {
			const activeKeys = [];
			datas.forEach(data => {
				const {
					activeKey
				} = data;
				activeKeys.push(activeKey);
			})
			return activeKeys;
		}

		//判断key值中是否包含当前condition的索引值(keys为部分condition索引值的集合)
		const hasIndex = (keys, index) => {
			if (keys.includes(index.toString())) {
				return true;
			} else {
				return false;
			}
		}

		//获取当前condition索引值在key值中的位置
		const getIndex = (keys, index) => {
			return keys.findIndex(key => key === index.toString());
		}

		const keys = getKeys(groupLinkage);

		const values = getValues(groupLinkage);

		const formParams = form.getFormParams();

		//判断是否需要隐藏当前索引值的condition
		if (!hasIndex(keys, index)) {
			return true
		}

		//index值在keys中的索引值
		const keyIndex = getIndex(keys, index);

		const {
			activeKey,
			activeValue
		} = values[keyIndex];

		const targetFieldValue = formParams[activeKey];

		const isShow = activeValue.split(',').includes(targetFieldValue);

		return isShow;

	}

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

		return (
			<div>{isFormInit && this.renderForm()}</div>
		);
	}
}