主诉IE兼容性处理

src/common/components/ItemBox/index.jsx

@@ -1,5 +1,7 @@
 import React,{Component} from 'react';
 import style from './index.less';
+import {isIE} from '@utils/tools.js';
+import $ from 'jquery';
 /***
  * author:zn@2018-11-13
  * 电子病历项内容框
@@ -16,7 +18,9 @@ import style from './index.less';
 class ItemBox extends Component {
   constructor(props){
     super(props);
+    this.$div = React.createRef();
     this.handleClick = this.handleClick.bind(this);
+    this.handleInput = this.handleInput.bind(this);
   }
   getBoxStyle(){
     const {boxHeight,boxWidth,boxLineHeight,marginTop,backgroundColor} = this.props;
@@ -27,13 +31,26 @@ class ItemBox extends Component {
     const {handleClick} = this.props;
     handleClick && handleClick(e);//为了获取鼠标位置，显示搜索结果框；
   }
+  handleInput(e){
+    const {onchange,data} = this.props;
+    if(data&&data.length==0){//避免结构化下触发onchange，导致下拉要点两下
+      onchange&&onchange(e)
+    }
+  }
+
+  componentDidMount(){
+    if(isIE()){
+      $(this.$div.current).onIe8Input(function(e){
+        this.handleInput(e)
+      },this);
+    }
+  }
 
   render(){
     const {title,children,editable,className,handleFocus,onchange,fuzhen,border,handleBlur,titleTop,backgroundColor} = this.props;
-    // console.log(title,editable)
     return <div className={style["box"]+" "+"clearfix"} >
       <div className={style["title"] + ' ' + className} style={{marginTop:titleTop?'22px':''}}>{title}</div>
-      <div className={`${style["content"]} ${border?style["border"]:''} ${backgroundColor?style["noBorder"]:''}`} contentEditable={editable} style={this.getBoxStyle()} onFocus={handleFocus} onInput={onchange} onClick={(e)=>{this.handleClick(e);}} onBlur={handleBlur}>
+      <div ref={this.$div} className={`${style["content"]} ${border?style["border"]:''} ${backgroundColor?style["noBorder"]:''}`} contentEditable={editable} style={this.getBoxStyle()} onFocus={handleFocus} onInput={this.handleInput} onClick={(e)=>{this.handleClick(e);}} onBlur={handleBlur}>
         {fuzhen?children||fuzhen:children}
       </div>
     </div>

src/components/CommonSymptom/index.jsx

@@ -35,7 +35,6 @@ class CommonSymptom extends Component{
     return classNames(style['list'],name,isHide);
   }
 
-
   handleSelect(e,item){
     e.stopPropagation();
     const {onSelect,onShow} = this.props;
@@ -43,9 +42,10 @@ class CommonSymptom extends Component{
     // onShow&&onShow(e,false);
   }
   render(){  
+    const {data} = this.props;
     return <div className={this.getClass()} contenteditable="false">
       <ul>
-        {this.props.data&&this.props.data.map((it)=>{
+        {data&&data.map((it)=>{
           return <li onClick={(e)=>this.handleSelect(e,it)}>{it.name}</li>
         })}
       </ul>

src/components/MainSuit/index.jsx

@@ -6,6 +6,7 @@ import SearchDrop from '@components/SearchDrop';
 import CommonSymptom from '@components/CommonSymptom';
 import chooseType from '@containers/eleType.js';
 import config from "@config/index";
+import {isIE} from "@utils/tools.js"
 
 class MainSuit extends Component{
   constructor(props){
@@ -34,7 +35,7 @@ class MainSuit extends Component{
     this.handleClick = this.handleClick.bind(this);
     this.handleBlur = this.handleBlur.bind(this);
   }
-  toggleEditable(){
+  toggleEditable(){console.log("切换编辑状态")
     this.setState({
       boxEditable:!this.state.boxEditable
     })
@@ -58,31 +59,41 @@ class MainSuit extends Component{
 
   handleFocus(e){
     e.stopPropagation();
-    const {getCommonSymptoms} = this.props;
-    let innerText = e.target.innerText;
-    if(!innerText.trim()){//有内容就走搜索接口
-      getCommonSymptoms && getCommonSymptoms();
-      this.setState({
-        symptom:true
-      })    
+    const {getCommonSymptoms,datas} = this.props;
+    let innerText = e.target.innerText;console.log("聚焦");
+    if(!isIE()){//IE会触发onfocus和onblur事件
+      if(!innerText.trim()){//有内容就走搜索接口
+        getCommonSymptoms && getCommonSymptoms();
+        this.setState({
+          symptom:true
+        })    
+      }else{
+        this.setState({
+          symptom:false,
+          inpText:innerText
+        }) 
+      }
     }else{
-      this.setState({
-        symptom:false,
-        inpText:innerText
-      }) 
+      if(datas.length==0){
+        getCommonSymptoms && getCommonSymptoms();
+        this.setState({
+          symptom:true
+        })  
+      }
     }
-
+    
   }
 
 
-  handleShow(e,show){
+  /*handleShow(e,show){
     e.stopPropagation();
     if(e.target.tagName=="INPUT"){
       return ;
     }
-  }
+  }*/
 
   handleSelect(item){//选中的常见症状
+    console.log("主诉选中下拉",item);
     const {clearCommS,insertMain,getData} = this.props;
     // 获取主诉模板
     getData && getData();
@@ -98,7 +109,7 @@ class MainSuit extends Component{
   }
 
 
-  handleSearchSelect(item){
+  handleSearchSelect(item){console.log("选中搜索");
     const {clearSearch,insertSearch,datas,span} = this.props;
     clearTimeout(this.state.timer);
     if(datas.length==0){//没有使用模板时点击搜索结构要展开模板
@@ -120,7 +131,7 @@ class MainSuit extends Component{
   }
 
 
-  handleClick(e){//让搜索框跟随鼠标点击移动
+  handleClick(e){console.log("主诉框点击事件");//让搜索框跟随鼠标点击移动
     // e.stopPropagation(); //冒泡到最顶层关闭其他下拉
     let boxLeft = e.pageX -32 + 'px';
     // let boxTop = e.pageY - 112 + 'px';
@@ -132,7 +143,7 @@ class MainSuit extends Component{
     })
   }
 
-  handleChange(e){
+  handleChange(e){console.log("主诉onchange");
     const data = e.target.innerText;
     const {getSearchData,searchData,datas,pushMessage,reTotalHide} = this.props;
     const {overFlag,inpText} = this.state;
@@ -185,19 +196,26 @@ class MainSuit extends Component{
   handleBlur(e){//隐藏常见症状下拉、存自由输入的值
     const {freeText,saveText,datas} = this.props;
     const that = this;
-    let data = this.state.inpText;
-    e.target.innerText="";
-    freeText && freeText(data.trim());
-    // 延时关闭常见症状下拉，不延时会影响选中
-    clearTimeout(this.state.clearTimer);
-    const clearTimer = setTimeout(function(){
-      that.setState({
-        symptom:false
-      })
-    },config.delayTime-200);
-    this.setState({
-      clearTimer
-    });
+    let data = this.state.inpText;console.log("主诉框失焦",data);
+    if(!isIE()){
+      e.target.innerText="";
+      freeText && freeText(data.trim());
+      // 延时关闭常见症状下拉，不延时会影响选中
+      clearTimeout(this.state.clearTimer);
+      const clearTimer = setTimeout(function(){
+        that.setState({
+          symptom:false
+        })
+      },config.delayTime-200);
+      this.setState({
+        clearTimer
+      });
+    }else{
+      if(datas.length==0){
+        freeText && freeText(data.trim());
+      }
+    }
+    
   }
 
 
@@ -206,7 +224,7 @@ class MainSuit extends Component{
     const {showModule,boxLeft,boxTop,show,symptom,search} = this.state;
     const symptomFlag = CommonSymptoms.length>0 ? true : false;
     const searchFlag = searchData.length>0 ? true : false;
-
+    
     if(+type===1){      //文本模式
       return <Textarea title='主诉' boxMark='1' isRead={isRead} value={saveText[0]} handlePush={fetchPushInfos} handleInput={handleInput} />;
     }
@@ -219,11 +237,12 @@ class MainSuit extends Component{
       handleFocus={this.handleFocus} 
       onchange={(e)=>{this.handleChange(e)}} 
       handleClick={this.handleClick} 
-      handleBlur={this.handleBlur}>
+      handleBlur={this.handleBlur}
+      data={datas}>
         {datas.length>0?<div style={{display:'inline-block'}}>{this.getInlineTag()}</div>:(saveText[0]?saveText[0]:'')}
       </ItemBox>
       {/*没有推送结果就不显示*/}
-      {symptomFlag && !searchFlag ? <CommonSymptom data={CommonSymptoms} show={!totalHide&&symptom} onShow={(e)=>this.handleShow(e)} onSelect={this.handleSelect} /> : ( searchFlag ? <SearchDrop data={searchData} show={!commSymHide} onShow={(e)=>this.handleShow(e)} onSelect={this.handleSearchSelect} left={boxLeft} top={boxTop} />:"")}
+      {symptomFlag && !searchFlag ? <CommonSymptom data={CommonSymptoms} show={!totalHide&&symptom} onSelect={this.handleSelect} /> : ( searchFlag ? <SearchDrop data={searchData} show={!commSymHide} onSelect={this.handleSearchSelect} left={boxLeft} top={boxTop} />:"")}
     </div>
   }
 }

src/components/SpreadDrop/index.jsx

@@ -2,9 +2,10 @@ import React,{Component} from 'react';
 import classNames from 'classnames';
 import config from '@config/index.js';
 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 {getIds} from '@common/js/func.js';
+import $ from 'jquery';
 /****
  * 标签组合下拉,选中的项目展开
  * author:zn@2018-11-21
@@ -35,6 +36,7 @@ class SpreadDrop extends Component{
       editable:false,      //双击编辑
       labelVal:'',  //存放标签原有的值--主诉字数限制用
     };
+    this.$div = React.createRef();
     this.handleSelect = this.handleSelect.bind(this);
     this.clearState = this.clearState.bind(this);
     this.handleClear = this.handleClear.bind(this);
@@ -50,7 +52,7 @@ class SpreadDrop extends Component{
   handleShow(e){//单击
     e&&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 that = this;
     this.btnClickFlag = false;
@@ -65,7 +67,7 @@ class SpreadDrop extends Component{
 
   }
 
-  changeToEdit(e){//双击
+  changeToEdit(e){console.log("标签双击");//双击
     const {value,id,placeholder,handleDbclick} = this.props;
     let text = e.target.innerText;
     // clearTimeout(this.state.timer);//取消延时的单击事件
@@ -81,7 +83,7 @@ class SpreadDrop extends Component{
     }
   }
 
-  onChange(e){  
+  onChange(e){  console.log("标签输入");
     const {mainSaveText,ikey,type,handleLabelChange} = this.props;
     const {labelVal} = this.state;
     let mainText = filterArr(mainSaveText);//主诉字数
@@ -104,14 +106,14 @@ class SpreadDrop extends Component{
   }
 
   handleBlur(e){
-    e.stopPropagation();
+    e.stopPropagation();console.log("标签失焦");
     const {ikey,type,handleLabelChange} = this.props;
     this.setState({
       editable:false
     });
     // 更改标签的value值
     let changeVal = e.target.innerText;
-    handleLabelChange && handleLabelChange({ikey,changeVal,type});
+    // handleLabelChange && handleLabelChange({ikey,changeVal,type});
 
   }
   setStateInit(){
@@ -146,11 +148,11 @@ class SpreadDrop extends Component{
     });
     this.btnClickFlag = false;
   }
-  handleClear(e){
+  handleClear(e){console.log("清空");
     e.stopPropagation();
     this.clearState();
   }
-  handleConfirm(e){
+  handleConfirm(e){console.log("确定");
     e.stopPropagation();
     const {handleConfirm,ikey,type,tagType,order,mainSaveText,copyType} = this.props;
     const params = Object.assign({},this.state,{ikey,type,tagType,order,mainSaveText,copyType});
@@ -159,7 +161,7 @@ class SpreadDrop extends Component{
     //点确定后隐藏弹窗
     this.props.handleHide();
   }
-  handleSelect(item,isExclu,joint,listIndex,selected){
+  handleSelect(item,isExclu,joint,listIndex,selected){console.log("选中");
     let {withOn,withs,noneOn,exclusion,exists,nowOn,nones,noneIds,ban} = this.state;
     /*if(this.props.selecteds)
     console.log(exists,this.props.selecteds.exists,exists===this.props.selecteds.exists)*/
@@ -293,18 +295,31 @@ class SpreadDrop extends Component{
     });
     return list;
   }
+  componentDidMount(){
+    if(isIE()){
+      $(this.$div.current).onIe8Input(function(e){
+        this.onChange(e)
+      },this);
+    }
+  }
+
   render(){
     const {placeholder,value,show} = this.props;
     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
+      ref={this.$div}
       onClick={this.handleShow}
       className={this.getClass()}
       contentEditable={editable}
       onDoubleClick={this.changeToEdit}
       onBlur={this.handleBlur}
       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();}}>
         {this.getLabels()}
         <div className="oper">
@@ -367,7 +382,7 @@ class ListItem extends Component{
   render(){
     const {data,isSpecialPos} = this.props;
     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)=>{
         return <li onClick={(e)=>this.handleClick(e,it,i)}
                    className={this.getClass(it.id)}>{it.labelPrefix}{it.name}{it.labelSuffix}</li>

src/containers/SpreadDrop.js

@@ -15,7 +15,7 @@ import {Notify} from '@commonComp';
 import {filterArr,didPushParamChange} from '@utils/tools.js';
 import config from '@config/index.js';
 
-function mapStateToProps(state) {
+function mapStateToProps(state) {//console.log(123,state);
   return {
     mainSaveText:state.mainSuit.saveText,
   }

src/store/actions/currentIll.js

@@ -263,7 +263,7 @@ export const setCheckBox = (state,action)=>{
   let arr = res.data;
   arr[labelInx].value = names;
   res.saveText[labelInx] = names;
-  res.selecteds[labelInx] = action.data;console.log(99,res,action);
+  res.selecteds[labelInx] = action.data;
   res.update=Math.random();
   return res;
 }

src/store/actions/mainSuit.js

@@ -92,24 +92,19 @@ export const handleTailClick = (state,action)=>{
 //将选择的常见症状插入
 export const insertMain = (state,action) => {
   const res = Object.assign({},state);
-  res.showDrop = !res.showDrop;//防止不更新
   const item = action.item.name;
   const id = action.item.questionId;
   // 将选中的id存起，现病史时获取模板
-  // let data = res.data;
   let data = JSON.parse(JSON.stringify(res.moduleData));
-  // const text = {id:id,name:item,tagType:config.tagType,controlType:3,exist:1};
   const text = {id:id,name:item,value:item,tagType:config.tagType,exist:1};
-  const emptySpan = JSON.parse(config.textLabel);
   let inserIndx = null;
   data.map((it,i)=>{
     if(it.flag == 1){//在此处插入主诉数据
       inserIndx = i;
     }
   })
-  // data.splice(inserIndx,0,text,emptySpan);
-  // data.splice(inserIndx,0,text);
-  data[inserIndx-1] = text;//替换空标签
+  data.splice(inserIndx-1,1,text);
+  // data[inserIndx-1] = text;//替换空标签
   res.data = data;
   res.saveText = [];//将手动输入的值清掉
   // res.saveText[inserIndx] = text.name;