Merge branch 'optimize' of http://192.168.2.236:10080/zhouna/newICSS into optimize

src/common/components/InlineTag/index.jsx

@@ -10,8 +10,6 @@ import {handleEnter} from '@utils/tools.js';
  * value:输入的值
  * placeholder
  * suffix：后缀文字
- * canEditable: 切换父元素框（主诉同级框）的可编辑属性，
- *              PS：父元素框可编辑时子元素onBlur无法触发，因为此时focus的元素为父元素框
  *
  ***/
 class InlineTag extends Component {
@@ -19,9 +17,12 @@ class InlineTag extends Component {
     super(props);
     this.$box = React.createRef();
     this.$span = React.createRef();
+    this.$pre = React.createRef();
+    this.$suf = React.createRef();
     this.state = {
       editable:false,
-      value:props.value||''
+      value:props.value||'',
+      placeholder:props.placeholder||''
     };
     this.changeToEdit = this.changeToEdit.bind(this);
     this.changeToClick = this.changeToClick.bind(this);
@@ -29,7 +30,6 @@ class InlineTag extends Component {
     this.handleInput = this.handleInput.bind(this);
     this.handleFocus = this.handleFocus.bind(this);
     this.handleFixClick = this.handleFixClick.bind(this);
-    this.handleBoxInput = this.handleBoxInput.bind(this);
   }
   changeToEdit(e){
     const {handledbClick,id} = this.props;
@@ -44,45 +44,34 @@ class InlineTag extends Component {
     //埋点记录
     handledbClick&&handledbClick({id});
   }
-  handleBoxInput(e){
-    const {handleInput,ikey,prefix,suffix} = this.props;
-    const total = e.target.innerText;
-    const text = this.$span.current.innerText;
-    if(!total){
-      handleInput&&handleInput({text:total,ikey});
-    }
-  }
-  changeToClick(event){
-    event.returnValue = true;
-    const {canEditable} = this.props;
-    canEditable&&canEditable();
+  changeToClick(e){
+    e.stopPropagation();
+    const {saveEditText,ikey} = this.props;
     this.setState({
       editable:false
     });
+    saveEditText&&saveEditText({
+      changeVal:this.$span.current.innerText,
+      totalVal:this.$box.current.innerText,
+      prefix:this.$pre.current.innerText,
+      suffix:this.$suf.current.innerText,
+      ikey
+    });
   }
   handleInput(e){       //输入时保存临时值，在修改灰显为黑色时判断用
     e.stopPropagation();
-    const {handleInput,ikey,prefix,suffix} = this.props;
-    const text = e.target.innerText || e.target.innerHTML;
-    // 内容全部删除时，要把空值存到store，否则会遗留最后一个字且为灰色无法删除
-    if(!text){
-      this.$span.current.innerText?(this.$span.current.innerText=''):(this.$span.current.innerHTML='');      //修改生成文字变成输入的2倍bug
-      handleInput&&handleInput({text:text,ikey,prefix,suffix});
-      this.setState({
-        value:" "
-      });
-      return
-    }
-    this.setState({
-      value:text
-    });
-   // e.target.innerText = text;  
   }
   handleBlur(e){         //鼠标离开是保存值到store中
     e.stopPropagation(); //不阻止会触发外层div的失焦事件
-    const {value} = this.state;
-    const {handleInput,ikey,prefix,suffix} = this.props;
-    this.$span.current.innerText?(this.$span.current.innerText=''):(this.$span.current.innerHTML='');      //修改生成文字变成输入的2倍bug
+    const value = e.target.innerText;
+    const {handleInput,ikey,prefix,suffix,placeholder} = this.props;
+    if(!value.trim()){
+      this.setState({
+        placeholder:placeholder,
+        value:''
+      });
+    }
+    //this.$span.current.innerText?(this.$span.current.innerText=''):(this.$span.current.innerHTML='');      //修改生成文字变成输入的2倍bug
     handleInput&&handleInput({text:value.trim(),ikey,prefix,suffix});
     this.setState({
       value:value.trim()
@@ -92,20 +81,22 @@ class InlineTag extends Component {
     e.stopPropagation();
     const text = e.target.innerText || e.target.innerHTML;
     const {placeholder} = this.props;
-    if(text==placeholder){
-      e.target.innerText?(e.target.innerText = ''):(e.target.innerHTML='');
+    if(text.trim()==placeholder){
+      this.setState({
+        placeholder:''
+      });
     }
   }
   getStyle(){
-    const {value} = this.state;
-    const {hideTag} = this.props;
+    const {hideTag,placeholder} = this.props;
+    const value = this.$span.current&&this.$span.current.innerText.trim();
     if(hideTag){
       if(value){
         return classNames(style['selected-no-tag']);
       }
       return style['no-tag'];
     }
-    if(!value){
+    if(!value||value.trim()==placeholder){
       return classNames(style['gray']);
     }
     return style['selected-tag'];
@@ -133,27 +124,25 @@ class InlineTag extends Component {
     this.$span.current.style.minWidth=spanWidth;
   }
   render(){
-    const {placeholder,value,prefix,suffix} = this.props;
-    const {editable} = this.state;
-    const inp = this.state.value;
+    const {prefix,suffix} = this.props;
+    const {editable,placeholder,value} = this.state;
     return <div className={this.getStyle()}
                  onDoubleClick={this.changeToEdit}
-                  onClick={!editable?this.handleFixClick:''}
-                 onkeydown={handleEnter}
+                 /*onClick={!editable?this.handleFixClick:''}*/
+                 onKeyDown={handleEnter}
                  onBlur={this.changeToClick} 
                  ref={this.$box} 
-                 contentEditable={editable}
-                 onInput={this.handleBoxInput}>
-                {prefix}
+                 contentEditable={editable}>
+                <span ref={this.$pre}>&nbsp;{prefix}</span>
                 <span className={style['free-in']}
                       contentEditable={true}
                       onBlur={this.handleBlur}
                       onInput={this.handleInput}
                       onFocus={this.handleFocus}
-                      onClick={e=>e.stopPropagation()}
-                      onkeydown={handleEnter}
-                      ref={this.$span}>{value||(inp?'':placeholder)}</span>
-                {suffix}
+                      /*onClick={e=>e.stopPropagation()}*/
+                      onKeyDown={handleEnter}
+                      ref={this.$span}>&nbsp;{value||placeholder}</span>
+                <span ref={this.$suf}>&nbsp;{suffix}</span>
             </div>;
     }
 }

src/components/RadioInpDrop/index.jsx

@@ -161,7 +161,7 @@ class RadioInpDrop extends Component{
       }else{
         lengths = mainText.length + val.length;
       }
-      console.log("val:",val,"preVal:",preText,"mainText:",mainText,"lengths:",lengths,this.state.texts)
+      //console.log("val:",val,"preVal:",preText,"mainText:",mainText,"lengths:",lengths,this.state.texts)
       if(lengths >= config.limited){
         Notify.info(config.limitText);
         this.setState({
@@ -225,6 +225,7 @@ class RadioInpDrop extends Component{
 class InputComp extends Component{
   constructor(props){
     super(props);
+    this.$inp = React.createRef();
     this.handleBlur = this.handleBlur.bind(this);
   }
   handleBlur(e){
@@ -234,9 +235,19 @@ class InputComp extends Component{
     e.target.innerText = '';
     handleInp(index,text);
   }
+  componentWillReceiveProps(next){
+    if(next.over&&!this.props.over){
+      const inp = this.$inp.current;
+      const value = this.props.value;
+      setTimeout(function(){
+        inp.innerText = value;
+      })
+    }
+  }
   render(){
     const {editable,value} = this.props;
     return editable?<span contentEditable={true}
+                          ref={this.$inp}
                  className={style['inner-inp']}
                  onClick={(e)=>{e.stopPropagation()}}
                  onFocus={(e)=>{e.stopPropagation()}}

src/containers/InlineTag.js

@@ -2,11 +2,14 @@ import React from 'react';
 import {connect} from 'react-redux';
 import {SETRADIO,CLEARSELECTED,CONFIRMSELECTED,SETOTHERINPUT} from '@types/otherHistory';
 import {SETMAININPUT} from '@types/mainSuit';
-import {SETCURRENTINPUT} from '@types/currentIll';
+import {SETCURRENTINPUT,CURRENT_TEXT_LABEL} from '@types/currentIll';
 import {SETCHECKINPUT} from "@types/checkBody";
 import InlineTag from "../common/components/InlineTag";
 import {getLabelIndex} from '@utils/tools.js';
 import {CLICKCOUNT} from '@types/homePage.js';
+import {CHANGEOTHERTEXTLABEL} from "../store/types/otherHistory";
+import {CHANGECHECKTEXTLABEL} from "../store/types/checkBody";
+import {CHANGE_LABELVAL} from "../store/types/mainSuit";
 
 function mapStateToProps(state){
   return {}
@@ -19,6 +22,13 @@ const tagInpActions = {
   4:SETCHECKINPUT
 };
 
+const inpEditActions = {
+  1:CHANGE_LABELVAL,
+  2:CURRENT_TEXT_LABEL,
+  3:CHANGEOTHERTEXTLABEL,
+  4:CHANGECHECKTEXTLABEL
+};
+
 function mapDispatchToProps(dispatch,store){
   return {
     handleInput(params) {
@@ -42,6 +52,15 @@ function mapDispatchToProps(dispatch,store){
         clickType:'双击',
         num:1
       });
+    },
+    saveEditText(obj){
+      const i = getLabelIndex(obj.ikey);
+      const type = obj.ikey.substr(0,1);
+      obj.ikey = i;
+      dispatch({
+        type:inpEditActions[type],
+        data:obj
+      })
     }
   }
 }

src/store/actions/currentIll.js

@@ -571,9 +571,13 @@ export const changeLabelVal = (state,action)=>{
   let labText = totalVal?totalVal:newVal;
   let item = res.data[index];
   const next = res.data[+index+1];
-  const nextVal = next.value||next.name;
-  //标签后是不是标点符号标签,是的话删除本标签时一起删除
-  let nextIsDot = +next.tagType===8&&!nextVal.match(config.punctuationReg);
+  let nextVal='',nextIsDot=false;
+  if(next){
+    nextVal = next.value||next.name;
+    //标签后是不是标点符号标签,是的话删除本标签时一起删除
+    nextIsDot = +next.tagType===8&&!nextVal.match(config.punctuationReg);
+  }
+
   if(labText.trim()){
     if(item){
       item.value = newVal;