yylib-quick-mobile
Version:
yylib-quick-mobile
286 lines (275 loc) • 11.1 kB
JavaScript
import React from 'react';
import {List} from 'antd-mobile';
import YYInput from '../input/YYInput'
import YYIcon from '../icon/YYIcon'
import YYReferList from './YYReferList';
import YYReferTree from './YYReferTree';
import YYReferTreeList from './YYReferTreeList';
import YYReferLazyTree from './YYReferLazyTree';
import YYReferLazyTreeList from './YYReferLazyTreeList';
import classnames from 'classnames';
import {isFunction} from '../../utils/FunctionUtil';
const Item = List.Item;
class YYRefer extends React.Component {
state = {
value: this.props.value,
isNewState: false,
openRefer: false,
}
componentDidMount() {
if (this.props.values !== '') {
let fields = {}
fields[this.props.referName] = {
dirty: true,
errors: undefined,
name: this.props.referName,
touched: true,
validating: true,
value: this.props.values
}
this.props.form.setFields(fields);
}
}
onOk = (selected, refername) => {
let copyobj={...selected};
this.setState({
value: copyobj ? copyobj : null,
openRefer: false,
})
let fields = {}
fields[this.props.referName] = {
dirty: true,
errors: undefined,
name: this.props.referName,
touched: true,
validating: true,
value: copyobj ? copyobj : null
}
this.props.form.setFields(fields);
if(this.props.onOk){
this.props.onOk(copyobj, refername);
}
}
onClose = (refername) => {
this.setState({
openRefer: false
})
if (this.props.custom&&this.props.onClose) {
this.props.onClose(refername);
}
}
onClick = () => {
this.setState({
openRefer: true
})
}
validateCallBack = (rule, value, callback) => {
if (isFunction(this.props.validateCallBack)) {
this.props.validateCallBack(rule, value, callback);
callback();
} else {
callback();
}
}
getRefType(type){
switch (type){
case "grid":
return "list";
case "tree":
return "tree";
case "treegrid":
return "tree-list";
case "lazytree":
return "lazy-tree"
case "lazytreegrid":
return "lazy-tree-list"
}
return "list";
}
//获取条件
getCondition(condition){
if(!condition){
return {};
}
else if(typeof condition=="object"){
return JSON.stringify(condition);
}
return condition;
}
render() {
const {renderRow,labelNumber,
form, referlabel, referCode, multiMode, displayField, disabled, referName, open, modalHeight, referParams, condition, listCondition, custom,
arrow, align, error, multipleLine, wrap, activeStyle, platform, required, icon, iconColor,showIcon,errorMsg,trigger,visible,id,isSearch,
findUI, offline,parentType,uiorigin, RunInDesign, uititle, uitype, uikey, nid,control_event,...resprops
} = this.props;
let modalStyle;
let referStyle=this.getRefType(referCode?referCode.referStyle:"");//获取参照类型
let {getFieldProps} = this.props.form;
let referprops = {
referlabel: referlabel,
referName: referName,
referStyle: referStyle,
referCode: typeof(referCode)==='string'?referCode:referCode.refCode ,
modalHeight: modalHeight,
displayField: displayField,
referParams: referParams,
multiMode: multiMode,
disabled: disabled,
condition: this.getCondition(condition),
listCondition: this.getCondition(listCondition),
onOk: this.onOk,
onClose: this.onClose,
custom: custom,
id:id,
isSearch:isSearch,
renderRow:renderRow
}
let labelClassName = required?classnames('yy-label-required'):classnames('');
let itemClassName = classnames('referBottom',(!visible&&visible!==undefined&&'hidden'),this.props.className);
let displayValue = '';
let values;
if (custom) {
if (referStyle == 'list') {
modalStyle = <YYReferList {...referprops} open={open}/>
} else if (referStyle == 'tree') {
modalStyle = <YYReferTree {...referprops} open={open}/>
} else if (referStyle == 'tree-list') {
modalStyle = <YYReferTreeList {...referprops} open={open}/>
} else if (referStyle == 'lazy-tree') {
modalStyle = <YYReferLazyTree {...referprops} open={open}/>
} else if (referStyle == 'lazy-tree-list') {
modalStyle = <YYReferLazyTreeList {...referprops} open={open}/>
}
} else {
if (referStyle == 'list') {
modalStyle = <YYReferList {...referprops} open={this.state.openRefer}/>
} else if (referStyle == 'tree') {
modalStyle = <YYReferTree {...referprops} open={this.state.openRefer}/>
} else if (referStyle == 'tree-list') {
modalStyle = <YYReferTreeList {...referprops} open={this.state.openRefer}/>
} else if (referStyle == 'lazy-tree') {
modalStyle = <YYReferLazyTree {...referprops} open={this.state.openRefer}/>
} else if (referStyle == 'lazy-tree-list') {
modalStyle = <YYReferLazyTreeList {...referprops} open={this.state.openRefer}/>
}
if (form) {
let _value = form.getFieldValue(referName);
let newValue= getFieldProps(referName);
if (_value) {
values = _value
} else {
values = ''
}
if (!!values) {
if (!Array.isArray(values)) {
if (Object.getOwnPropertyNames(values).length > 0) {
displayValue = values[displayField];
} else {
values = null;
displayValue = disabled ? null : '请选择';
}
} else if (values.length > 0) {
displayValue = values.map(v => v[displayField]).join();
}
} else {
displayValue = disabled ? null : '请选择';
}
}
}
return (
<div>
{custom ?
<div style={{display: 'none'}}>
{modalStyle}
<YYInput form={form}
{...isFunction(getFieldProps) ? getFieldProps(referName, {
initialValue: null,
rules: [
{ required, message: errorMsg },
{ validator: this.validateCallBack },
],
trigger: trigger,
valuePropName: 'value',
}) : null}/>
</div> : <Item className={itemClassName}
ref="refer"
extra={displayValue}
arrow={disabled ? '' : arrow}
align={align}
error={error}
multipleLine={multipleLine}
wrap={wrap}
activeStyle={activeStyle}
platform={platform}
onClick={disabled ? null : this.onClick}
labelNumber={showIcon?labelNumber+1:labelNumber}
{...resprops}
>
<div style={{display: 'none'}}>
{modalStyle}
<YYInput form={form}
{...isFunction(getFieldProps) ? getFieldProps(referName, {
initialValue: null,
rules: [
{ required, message: errorMsg },
{ validator: this.validateCallBack },
],
trigger: trigger,
valuePropName: 'value',
}) : null}/>
</div>
{showIcon&&<div style={{top: '0.27rem', paddingRight:'8px',display: 'inline-block', position: 'relative'}}><YYIcon type={icon}
color={iconColor}/>
</div>}
<span style={{marginLeft: '0rem'}} className={labelClassName}>{referlabel}</span>
<span style={{display: required ? '' : 'none'}}><YYIcon type="asterisk" size="xs"/></span>
</Item>
}
</div>)
}
}
YYRefer.defaultProps = {
referlabel: '参照',
referCode: '00026',
modalHeight: 'all',
displayField: 'name',
referParams: {},
trigger: "onChange",
errorMsg: "请输入必填项!",
multiMode: false,
disabled: false,
open: false,
referName: 'key',
condition: {},
listCondition: {},
values: '',
custom: false,
arrow: 'horizontal', //箭头的方向
align: 'middle', //子元素垂直对齐
error: false,
multipleLine: false,
wrap: false,
required: false,
activeStyle: {}, //自定义active的样式
platform: 'cross',
showIcon: false,
icon: "wage",
iconColor: "red",
visible:true,
labelNumber: 7,
id:"id", //单选所对比的id
isSearch:false, //是否有搜索
renderRow:null, //渲染函数
//设计器需要的props,不添加会warning
findUI:'',
offline:false,
parentType:'',
uiorigin:'',
RunInDesign:false,
uititle:'',
uitype:'',
uikey:'',
nid:'',
control_event:{}
};
module.exports = YYRefer;