|
@@ -2,9 +2,10 @@ import React,{Component} from 'react';
|
|
import classNames from 'classnames';
|
|
import classNames from 'classnames';
|
|
import config from '@config/index.js';
|
|
import config from '@config/index.js';
|
|
import style from './index.less';
|
|
import style from './index.less';
|
|
-import {deepClone,filterArr,handleEnter} from '@utils/tools.js';
|
|
|
|
|
|
+import {deepClone,filterArr,handleEnter,isIE} from '@utils/tools.js';
|
|
import {Notify} from '@commonComp';
|
|
import {Notify} from '@commonComp';
|
|
import {getIds} from '@common/js/func.js';
|
|
import {getIds} from '@common/js/func.js';
|
|
|
|
+import $ from 'jquery';
|
|
/****
|
|
/****
|
|
* 标签组合下拉,选中的项目展开
|
|
* 标签组合下拉,选中的项目展开
|
|
* author:zn@2018-11-21
|
|
* author:zn@2018-11-21
|
|
@@ -35,6 +36,7 @@ class SpreadDrop extends Component{
|
|
editable:false, //双击编辑
|
|
editable:false, //双击编辑
|
|
labelVal:'', //存放标签原有的值--主诉字数限制用
|
|
labelVal:'', //存放标签原有的值--主诉字数限制用
|
|
};
|
|
};
|
|
|
|
+ this.$div = React.createRef();
|
|
this.handleSelect = this.handleSelect.bind(this);
|
|
this.handleSelect = this.handleSelect.bind(this);
|
|
this.clearState = this.clearState.bind(this);
|
|
this.clearState = this.clearState.bind(this);
|
|
this.handleClear = this.handleClear.bind(this);
|
|
this.handleClear = this.handleClear.bind(this);
|
|
@@ -50,7 +52,7 @@ class SpreadDrop extends Component{
|
|
handleShow(e){//单击
|
|
handleShow(e){//单击
|
|
e&&e.stopPropagation();
|
|
e&&e.stopPropagation();
|
|
// window.event? window.event.cancelBubble = true : e.stopPropagation();
|
|
// window.event? window.event.cancelBubble = true : e.stopPropagation();
|
|
- this.setStateInit(); //恢复初始选中状态
|
|
|
|
|
|
+ // this.setStateInit(); //恢复初始选中状态
|
|
const {ikey,handleShow,placeholder,flag,id,value,tagType,type} = this.props;
|
|
const {ikey,handleShow,placeholder,flag,id,value,tagType,type} = this.props;
|
|
const that = this;
|
|
const that = this;
|
|
this.btnClickFlag = false;
|
|
this.btnClickFlag = false;
|
|
@@ -70,7 +72,6 @@ class SpreadDrop extends Component{
|
|
let text = e.target.innerText;
|
|
let text = e.target.innerText;
|
|
// clearTimeout(this.state.timer);//取消延时的单击事件
|
|
// clearTimeout(this.state.timer);//取消延时的单击事件
|
|
e.stopPropagation();
|
|
e.stopPropagation();
|
|
- // e.preventDefault();
|
|
|
|
if(value&&value.trim()){//有选中值的标签才能双击编辑
|
|
if(value&&value.trim()){//有选中值的标签才能双击编辑
|
|
this.setState({
|
|
this.setState({
|
|
labelVal:text,
|
|
labelVal:text,
|
|
@@ -83,21 +84,23 @@ class SpreadDrop extends Component{
|
|
|
|
|
|
onChange(e){
|
|
onChange(e){
|
|
const {mainSaveText,ikey,type,handleLabelChange} = this.props;
|
|
const {mainSaveText,ikey,type,handleLabelChange} = this.props;
|
|
- const {labelVal} = this.state;
|
|
|
|
|
|
+ const {labelVal,editable} = this.state;
|
|
let mainText = filterArr(mainSaveText);//主诉字数
|
|
let mainText = filterArr(mainSaveText);//主诉字数
|
|
- let val = e.target.innerText;
|
|
|
|
- if(+type==1){// 主诉字数达到上限时不允许输入
|
|
|
|
- if(mainText.length >= config.limited){
|
|
|
|
- if(val.length > labelVal.length){
|
|
|
|
- e.target.innerText = labelVal;
|
|
|
|
- Notify.info(config.limitText);
|
|
|
|
- return
|
|
|
|
- }else if(val.length == labelVal.length){
|
|
|
|
- this.setState({
|
|
|
|
- labelVal:val
|
|
|
|
- });
|
|
|
|
- }else{
|
|
|
|
- handleLabelChange && handleLabelChange({ikey,changeVal:val,type});
|
|
|
|
|
|
+ if(editable){//避免IE中点击标签也会触发
|
|
|
|
+ let val = e.target.innerText;
|
|
|
|
+ if(+type==1){// 主诉字数达到上限时不允许输入
|
|
|
|
+ if(mainText.length >= config.limited){
|
|
|
|
+ if(val.length > labelVal.length){
|
|
|
|
+ e.target.innerText = labelVal;
|
|
|
|
+ Notify.info(config.limitText);
|
|
|
|
+ return
|
|
|
|
+ }else if(val.length == labelVal.length){
|
|
|
|
+ this.setState({
|
|
|
|
+ labelVal:val
|
|
|
|
+ });
|
|
|
|
+ }else{
|
|
|
|
+ handleLabelChange && handleLabelChange({ikey,changeVal:val,type});
|
|
|
|
+ }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@@ -106,12 +109,16 @@ class SpreadDrop extends Component{
|
|
handleBlur(e){
|
|
handleBlur(e){
|
|
e.stopPropagation();
|
|
e.stopPropagation();
|
|
const {ikey,type,handleLabelChange} = this.props;
|
|
const {ikey,type,handleLabelChange} = this.props;
|
|
|
|
+ const {editable} = this.state;
|
|
|
|
+ if(editable){
|
|
|
|
+ // 更改标签的value值
|
|
|
|
+ let changeVal = e.target.innerText;
|
|
|
|
+ handleLabelChange && handleLabelChange({ikey,changeVal,type});
|
|
|
|
+ }
|
|
this.setState({
|
|
this.setState({
|
|
editable:false
|
|
editable:false
|
|
});
|
|
});
|
|
- // 更改标签的value值
|
|
|
|
- let changeVal = e.target.innerText;
|
|
|
|
- handleLabelChange && handleLabelChange({ikey,changeVal,type});
|
|
|
|
|
|
+
|
|
|
|
|
|
}
|
|
}
|
|
setStateInit(){
|
|
setStateInit(){
|
|
@@ -293,18 +300,31 @@ class SpreadDrop extends Component{
|
|
});
|
|
});
|
|
return list;
|
|
return list;
|
|
}
|
|
}
|
|
|
|
+ componentDidMount(){
|
|
|
|
+ if(isIE()){
|
|
|
|
+ $(this.$div.current).onIe8Input(function(e){
|
|
|
|
+ this.onChange(e)
|
|
|
|
+ },this);
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
render(){
|
|
render(){
|
|
const {placeholder,value,show} = this.props;
|
|
const {placeholder,value,show} = this.props;
|
|
const {editable} = this.state;
|
|
const {editable} = this.state;
|
|
- return <div className={style['container']}>
|
|
|
|
|
|
+ return <div className={style['container']}
|
|
|
|
+ onFocus={(e)=>e.stopPropagation()}
|
|
|
|
+ onBlur={(e)=>e.stopPropagation()}
|
|
|
|
+ onInput={(e)=>e.stopPropagation()}>
|
|
<div
|
|
<div
|
|
|
|
+ ref={this.$div}
|
|
onClick={this.handleShow}
|
|
onClick={this.handleShow}
|
|
className={this.getClass()}
|
|
className={this.getClass()}
|
|
contentEditable={editable}
|
|
contentEditable={editable}
|
|
onDoubleClick={this.changeToEdit}
|
|
onDoubleClick={this.changeToEdit}
|
|
onBlur={this.handleBlur}
|
|
onBlur={this.handleBlur}
|
|
onInput={this.onChange}
|
|
onInput={this.onChange}
|
|
- onkeydown={handleEnter}>{value||placeholder}</div>
|
|
|
|
|
|
+ onkeydown={handleEnter}
|
|
|
|
+ >{value||placeholder}</div>
|
|
<div className={style["drop-list"]} style={{display:show?'block':'none'}} contentEditable="false" onClick={(e)=>{e.stopPropagation();}}>
|
|
<div className={style["drop-list"]} style={{display:show?'block':'none'}} contentEditable="false" onClick={(e)=>{e.stopPropagation();}}>
|
|
{this.getLabels()}
|
|
{this.getLabels()}
|
|
<div className="oper">
|
|
<div className="oper">
|
|
@@ -367,7 +387,7 @@ class ListItem extends Component{
|
|
render(){
|
|
render(){
|
|
const {data,isSpecialPos} = this.props;
|
|
const {data,isSpecialPos} = this.props;
|
|
const pos = isSpecialPos?style['independent']:'';
|
|
const pos = isSpecialPos?style['independent']:'';
|
|
- return <ul className={classNames(style['row'],pos)}>
|
|
|
|
|
|
+ return <ul className={classNames(style['row'],pos)} onBlur={(e)=>e.stopPropagation()}>
|
|
{data&&data.map((it,i)=>{
|
|
{data&&data.map((it,i)=>{
|
|
return <li onClick={(e)=>this.handleClick(e,it,i)}
|
|
return <li onClick={(e)=>this.handleClick(e,it,i)}
|
|
className={this.getClass(it.id)}>{it.labelPrefix}{it.name}{it.labelSuffix}</li>
|
|
className={this.getClass(it.id)}>{it.labelPrefix}{it.name}{it.labelSuffix}</li>
|