315 lines
7.3 KiB
JavaScript
315 lines
7.3 KiB
JavaScript
import React from 'react';
|
||
import {
|
||
WeaFormItem,
|
||
WeaSearchGroup,
|
||
} from 'ecCom';
|
||
import {
|
||
WeaSwitch
|
||
} from 'comsMobx';
|
||
import {
|
||
toJS
|
||
} from 'mobx';
|
||
import {
|
||
Row,
|
||
Col,
|
||
} from 'antd';
|
||
|
||
class MagicForm extends React.Component {
|
||
constructor(props) {
|
||
super(props);
|
||
this.state = {
|
||
usedAsForceUpdate: new Date()
|
||
}
|
||
}
|
||
|
||
//监听表单元素事件的回调函数
|
||
handleFormChange = (cb) => {
|
||
const {
|
||
onFormElementsChange,
|
||
dynamicFields,
|
||
} = this.props;
|
||
|
||
dynamicFields && dynamicFields.map(field => {
|
||
const {
|
||
activeKey,
|
||
} = field;
|
||
|
||
if (Object.keys(cb)[0] === activeKey) {
|
||
this.forceUpdate();
|
||
}
|
||
});
|
||
//当父组件没有传onFormElementsChange属性时，不执行下面的回调函数。
|
||
if (!onFormElementsChange) return;
|
||
|
||
onFormElementsChange(cb);
|
||
}
|
||
|
||
//强制刷新组件
|
||
forceUpdate = () => {
|
||
this.setState({
|
||
usedAsForceUpdate: new Date()
|
||
});
|
||
}
|
||
|
||
//判断当前表单元素能否被渲染
|
||
canRender = (domkey) => {
|
||
const {
|
||
dynamicFields,
|
||
form
|
||
} = this.props;
|
||
|
||
//表单元素能否被渲染的标志：true -> 可以被渲染; false -> 不可以被渲染
|
||
let flag = true;
|
||
|
||
dynamicFields.map(field => {
|
||
const {
|
||
passiveKey,
|
||
activeKey,
|
||
showValue
|
||
} = field;
|
||
|
||
const showValueArray = showValue.split(',');
|
||
//判断是否为被联动的表单元素（被动）
|
||
if (domkey === passiveKey) {
|
||
const activeValue = form.getFormParams()[activeKey];
|
||
|
||
if (!showValueArray.includes(activeValue)) {
|
||
flag = false;
|
||
}
|
||
}
|
||
});
|
||
|
||
return flag;
|
||
}
|
||
|
||
getSubComponent = (params) => {
|
||
const {
|
||
dirtyKeys, //需要被特殊渲染的表单元素的domkey集合
|
||
dirtyComponent, //特殊组件
|
||
classNames,
|
||
} = this.props, {
|
||
domkey,
|
||
item,
|
||
form,
|
||
label
|
||
} = params;
|
||
|
||
if (dirtyKeys && dirtyKeys.includes(domkey)) {
|
||
return dirtyComponent(params)
|
||
} else {
|
||
return (
|
||
<div className={this.getClassName(domkey)}>
|
||
<WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@u3acq4`}
|
||
fieldConfig={item}
|
||
form={form}
|
||
formParams={form.getFormParams()}
|
||
onChange={this.handleFormChange}
|
||
/>
|
||
{this.getSiblingComponent(domkey, form)}
|
||
</div>
|
||
)
|
||
}
|
||
}
|
||
|
||
getClassName = (domkey) => {
|
||
const {
|
||
classNames
|
||
} = this.props;
|
||
|
||
return this.isObjectHasDomkey(classNames, domkey) ? classNames[domkey] : '';
|
||
}
|
||
|
||
//获取WeaSwitch组件的相邻组件
|
||
getSiblingComponent = (domkey, form) => {
|
||
const {
|
||
staticTips, //静态提示
|
||
dynamicTips, //动态提示
|
||
transverseSiblingComponents, //横向相邻组件
|
||
longitudinalSiblingComponents, //纵向相邻组件
|
||
customizations, //自定义组件
|
||
} = this.props;
|
||
|
||
let siblings = [];
|
||
//静态提示
|
||
if (this.isObjectHasDomkey(staticTips, domkey)) {
|
||
siblings.push(staticTips[domkey]);
|
||
}
|
||
//动态提示
|
||
if (this.isObjectHasDomkey(dynamicTips, domkey)) {
|
||
const index = parseInt(form.getFormParams()[domkey]) - 1;
|
||
const tipsLen = dynamicTips[domkey].length;
|
||
let _index;
|
||
if (index < 0) {
|
||
_index = (tipsLen - 1);
|
||
} else {
|
||
_index = index;
|
||
}
|
||
siblings.push(<p style={{padding: '5px 0'}}><i className='icon-coms-content-o' /><span style={{marginLeft: 5}}>{ dynamicTips[domkey].length > 0 && dynamicTips[domkey][_index] }</span></p>);
|
||
}
|
||
//横向相邻组件
|
||
if (this.isObjectHasDomkey(transverseSiblingComponents, domkey)) {
|
||
siblings.push(transverseSiblingComponents[domkey]);
|
||
}
|
||
//纵向相邻组件
|
||
if (this.isObjectHasDomkey(longitudinalSiblingComponents, domkey)) {
|
||
siblings.push(longitudinalSiblingComponents[domkey]);
|
||
}
|
||
//自定义组件
|
||
if (this.isObjectHasDomkey(customizations, domkey)) {
|
||
siblings.push(customizations[domkey]);
|
||
}
|
||
|
||
return siblings;
|
||
}
|
||
|
||
//判断domkey是否在容器中
|
||
isObjectHasDomkey = (obj, domkey) => {
|
||
return obj && Object.keys(obj).includes(domkey)
|
||
}
|
||
|
||
render() {
|
||
const {
|
||
conditions,
|
||
form,
|
||
isFormInit,
|
||
dynamicFields, //动态域
|
||
date, //刷新组件
|
||
dirtyKeys,
|
||
renderBlacklist, //不需要渲染的items，
|
||
labels,
|
||
wrapperStyle,
|
||
errors,
|
||
} = this.props, {
|
||
usedAsForceUpdate
|
||
} = this.state;
|
||
|
||
if (!isFormInit) return null;
|
||
|
||
//WeaFormItem组件的容器
|
||
const formItemContainer = [];
|
||
|
||
const translatedConditions = toJS(conditions);
|
||
//conditions数据类型：数组或者对象
|
||
const c = Array.isArray(translatedConditions) ? translatedConditions[0] : conditions;
|
||
|
||
c.items.map((item, index) => {
|
||
const {
|
||
domkey,
|
||
} = item;
|
||
|
||
//判断当前表单元素是否需要被渲染
|
||
if (dynamicFields && !this.canRender(domkey[0])) return
|
||
|
||
if (renderBlacklist && renderBlacklist.includes(domkey[0])) return
|
||
|
||
if (labels && Object.keys(labels).includes(domkey[0])) {
|
||
item.label = labels[domkey[0]];
|
||
}
|
||
|
||
const isDirty = dirtyKeys ? dirtyKeys.includes(domkey[0]) : false;
|
||
|
||
let error;
|
||
|
||
if (errors) {
|
||
error = errors[domkey[0]];
|
||
} else {
|
||
error = !isDirty && form.getError(item);
|
||
}
|
||
|
||
formItemContainer.push(
|
||
<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@yiwheh@${index}`}
|
||
label={!isDirty ? item.label : ''}
|
||
colon={!isDirty ? true : false}
|
||
labelCol={{span: 6}}
|
||
wrapperCol={{span: 18}}
|
||
error={error}
|
||
tipPosition='bottom'
|
||
className={isDirty ? 'hrm-special-form' : ''}
|
||
>
|
||
{this.getSubComponent({
|
||
domkey:domkey[0],
|
||
label:item.label,
|
||
item,
|
||
form,
|
||
})}
|
||
</WeaFormItem>
|
||
)
|
||
})
|
||
|
||
return <div className="wea-form-item-group" style={wrapperStyle ? wrapperStyle : {padding: '20px 15%'}} >{formItemContainer}</div>
|
||
}
|
||
}
|
||
|
||
//复合表单组件
|
||
class CompositeForm extends React.Component {
|
||
constructor(props) {
|
||
super(props);
|
||
}
|
||
|
||
render() {
|
||
const {
|
||
conditions
|
||
} = this.props;
|
||
|
||
return (<div>
|
||
{
|
||
conditions.map((c, i) => {
|
||
const {
|
||
title
|
||
} = c;
|
||
|
||
return (<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@hl7a8q@${i}`}
|
||
showGroup
|
||
title={title}
|
||
children={<MagicForm ecId={`${this && this.props && this.props.ecId || ''}_MagicForm@oms5v6@${i}`} {...this.props} conditions={c} />}
|
||
/>)
|
||
})
|
||
}
|
||
</div>)
|
||
}
|
||
}
|
||
|
||
//高级搜索表单
|
||
class SearchForm extends React.Component {
|
||
constructor(props) {
|
||
super(props);
|
||
}
|
||
|
||
render() {
|
||
const {
|
||
form,
|
||
conditions,
|
||
isFormInit
|
||
} = this.props;
|
||
|
||
if (!isFormInit) return null;
|
||
|
||
const formItemContainer = [];
|
||
|
||
conditions.map(c => {
|
||
c.items.map((item, index) => {
|
||
formItemContainer.push(
|
||
<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@n6vx9q@${index}`} span={10} offset={1}>
|
||
<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@ko04nf@${index}`}
|
||
label={`${item.label}`}
|
||
labelCol={{span: 6}}
|
||
wrapperCol={{span: 18}}
|
||
style={{paddingTop: 20}}>
|
||
{<WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@ehxll6@${index}`} fieldConfig={item} form={form} formParams={form.getFormParams()} />}
|
||
</WeaFormItem>
|
||
</Col>
|
||
)
|
||
})
|
||
})
|
||
|
||
return (
|
||
<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@ogy7zd`}>{formItemContainer}</Row>
|
||
)
|
||
}
|
||
}
|
||
|
||
export {
|
||
MagicForm,
|
||
CompositeForm,
|
||
SearchForm,
|
||
} |