数字键盘不可双击编辑

src/components/NumberDrop/index.jsx

@@ -3,7 +3,7 @@ import className from 'classnames';
 import {NumberPan,Notify} from '@commonComp';
 import style from './index.less';
 import $ from "jquery";
-import {handleEnter,getPageCoordinate} from '@utils/tools.js';
+import {getPageCoordinate} from '@utils/tools.js';
 /***
  * author:zn@2018-11-19
  * 接收参数：
@@ -18,7 +18,7 @@ class NumberDrop extends Component{
   constructor(props){
     super(props);
     this.state={
-      editable:false,      //标签是否可输入
+      /*editable:false,      //标签是否可输入*/
       timer:null,
       sltTimer:null,
       blurTimer:null,
@@ -30,16 +30,10 @@ class NumberDrop extends Component{
       placeholder:props.placeholder
     };
     this.$span = React.createRef();
-    this.$pre = React.createRef();
-    this.$suf = React.createRef();
-    this.$cont = React.createRef();
-    //this.select = this.select.bind(this);
     this.numInpBlur = this.numInpBlur.bind(this);
     this.handleSpanInp = this.handleSpanInp.bind(this);
     this.handleNumClick = this.handleNumClick.bind(this);
     this.handleNumFocus = this.handleNumFocus.bind(this);
-    this.handleBlur = this.handleBlur.bind(this);
-    this.changeToEdit = this.changeToEdit.bind(this);
     this.handleKeyDowm = this.handleKeyDowm.bind(this);
     this.beyondArea = this.beyondArea.bind(this);
   }
@@ -109,23 +103,12 @@ class NumberDrop extends Component{
       handleHide && handleHide();
       return;
     }else{
-      const {editable} = this.state;
-      if(editable){
-        return;
-      }
-      const that = this;
-      //双击时不显示下拉
-      clearTimeout(that.state.timer);
-      const timer = setTimeout(function(){
-        //只有弹窗关闭则点击数字键盘会清空当前数据
-        that.$span.current.focus();
-        that.setState({
-          hasSelect:false
-        });
-        handleShow&&handleShow({ikey,id:patId||id});
-      },300);
+      this.$span.current.focus();
+      this.setState({
+        hasSelect:false
+      });
+      handleShow&&handleShow({ikey,id:patId||id});
       this.setState({
-        timer,
         boxLeft:getPageCoordinate(e).boxLeft,
         boxTop:getPageCoordinate(e).boxTop,
         tmpScroll: $("#addScrollEvent")[0].scrollTop,
@@ -207,42 +190,10 @@ class NumberDrop extends Component{
   getClasses(){         //整个标签是否有值的状态
     const {hideTag,placeholder,value,isImports} = this.props;
     const val = value;
-    const blueBorder = this.state.editable?style['blue-border']:'';
     const isSelected = val&&val!=placeholder?style['selected']:style['container'];
     const orgBorder = isImports&&!(val&&val!=placeholder)?style['orange-border']:'';
     const noTag = hideTag?style['no-tag']:'';
-    return className(isSelected,noTag,blueBorder,orgBorder);
-  }
-  changeToEdit(e){        //整个标签双击编辑状态
-    window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
-    const {value,id,handleDbclick,patId,handleHide,show} = this.props;
-    clearTimeout(this.state.timer);//取消延时的单击事件
-    e.preventDefault();
-    if(show){
-      handleHide&&handleHide();
-    }
-    if(value&&value.trim()) {//有选中值的标签才能双击编辑
-      this.setState({
-        editable: true
-      });
-      setTimeout(()=>{
-        this.$cont.current.focus();
-      })
-      //双击埋点记录
-      handleDbclick && handleDbclick({id:patId||id});
-    }
-  }
-  handleBlur(e){     //双击编辑blur
-    const {handleLabelChange,ikey,boxMark,value} = this.props;
-    this.setState({
-      editable: false
-    });
-    let totalVal = e.target.innerText.trim();
-    let changeVal = this.$span.current.innerText.trim();//数字框值-修改后;去掉前空格避免多空格叠加
-    let prefix = this.$pre.current.innerText.trim(); //前缀值-修改后
-    let suffix = this.$suf.current.innerText.trim(); //后缀值-修改后
-    // console.log('数字框：'+changeVal,";全部："+totalVal,";前缀："+prefix+";后缀："+suffix);
-    handleLabelChange && handleLabelChange({ikey,changeVal,type:boxMark,totalVal,prefix,suffix});
+    return className(isSelected,noTag,orgBorder);
   }
   getSpanClass(){       //将被替换的文字选中状态显示
     const cls = this.props.show?style['blued']:'';
@@ -264,17 +215,10 @@ class NumberDrop extends Component{
   }
   render(){
     const {prefix,suffix,show,value,handleHide,allClick} = this.props;
-    const {placeholder,editable,hasSelect,boxTop,boxLeft} = this.state;
-    //console.log(prefix,value,placeholder+'1',this.props.placeholder)
+    const {placeholder,hasSelect,boxTop,boxLeft} = this.state;
     return <div className={this.getClasses()}
-                ref={this.$cont}
-                onDblClick ={this.changeToEdit}
-                onClick={allClick?this.handleNumClick:null}
-                contentEditable={editable}
-                onBlur={this.handleBlur}
-                onKeyDown={handleEnter}
-                onFocus={this.stopBubble.bind(this)}>
-      <span ref = {this.$pre}>&nbsp;{prefix}</span>
+                onClick={allClick?this.handleNumClick:null}>
+      <span>{prefix}</span>
       <span onFocus={this.handleNumFocus}
             onClick={allClick?null:this.handleNumClick}
             contentEditable={true}
@@ -285,7 +229,7 @@ class NumberDrop extends Component{
             onInput={this.handleSpanInp}
             className={this.getSpanClass()}
             >&nbsp;{value||placeholder}</span>
-      <span ref = {this.$suf}>&nbsp;{suffix}</span>
+      <span>{suffix}</span>
       <NumberPan handleSelect={this.select.bind(this)}
                  onClose={handleHide}
                  show={show}

src/containers/NumberDrop.js

@@ -1,15 +1,15 @@
 import React from 'react';
 import {connect} from 'react-redux';
 import NumberDrop from "@components/NumberDrop";
-import {SETNUMBER,CHANGEOTHERTEXTLABEL,CHANGEOTHERTEXTLABEL_NUMBER} from '@types/otherHistory';
-import {SETNUMBER4,CHANGECHECKTEXTLABEL,CHANGECHECKTEXTLABEL_NUMBER} from '@types/checkBody.js';
-import {SETDROPSHOW,CLICKCOUNT,HIDE,RESET,HIDEDROP,ISREAD} from '@types/homePage.js';
-import {NUMBER_SELECT,CHANGE_LABELVAL,CHANGE_LABELVAL_NUMBER} from '@store/types/mainSuit.js';
-import {CURRENT_NUMBER,CURRENT_TEXT_LABEL,CURRENT_TEXT_LABEL_NUMBER} from '@store/types/currentIll.js';
+import {SETNUMBER,CHANGEOTHERTEXTLABEL} from '@types/otherHistory';
+import {SETNUMBER4} from '@types/checkBody';
+import {SETDROPSHOW,CLICKCOUNT,HIDE,RESET,HIDEDROP,ISREAD} from '@types/homePage';
+import {NUMBER_SELECT} from '@store/types/mainSuit';
+import {CURRENT_NUMBER} from '@store/types/currentIll';
 import {billing} from '@store/async-actions/pushMessage';
 import {Notify} from '@commonComp';
-import {filterArr,didPushParamChange,filterDataArr,getLabelIndex} from '@utils/tools.js';
-import config from '@config/index.js';
+import {filterArr,didPushParamChange,filterDataArr} from '@utils/tools';
+import config from '@config/index';
 
 function mapStateToProps(state){
   return {
@@ -69,55 +69,7 @@ function handleModuleDiff(dispatch,params){
     default:
   }
 }
-/**************************双击标签输入*********************************/
-// 主诉
-function mainSuitLabel(dispatch,params){
-  const index = params.ikey;
-  let ikey = getLabelIndex(index);
-  const {changeVal,totalVal} = params;
-  dispatch({
-    // type:CHANGE_LABELVAL,
-    type:CHANGE_LABELVAL_NUMBER,
-    data:Object.assign({},params,{ikey})
-  })
-}
-// 现病史
-function currentLabel(dispatch,params){
-  const index = params.ikey;
-  let ikey = getLabelIndex(index);
-  dispatch({
-    // type:CURRENT_TEXT_LABEL,
-    type:CURRENT_TEXT_LABEL_NUMBER,
-    data:Object.assign({},params,{ikey})
-  });
-  dispatch({
-    type:ISREAD
-  })
-}
-
-//其他史
-function otherHisLabelEdit(dispatch,params){
-  const index = params.ikey;
-  //const {changeVal,totalVal} = params;
-  let ikey = getLabelIndex(index);
-  dispatch({
-    // type:CHANGEOTHERTEXTLABEL,
-    type:CHANGEOTHERTEXTLABEL_NUMBER,
-    data:Object.assign({},params,{ikey})
-  })
-}
 
-//查体
-function checkBodyLabelEdit(dispatch,params){
-  const index = params.ikey;
-  let ikey = getLabelIndex(index);
-  //const {changeVal,totalVal} = params;
-  dispatch({
-    // type:CHANGECHECKTEXTLABEL,
-    type:CHANGECHECKTEXTLABEL_NUMBER,
-    data:Object.assign({},params,{ikey})
-  })
-}
 function mapDispatchToProps(dispatch,store){
   return {
     handleSelect(params){
@@ -130,14 +82,6 @@ function mapDispatchToProps(dispatch,store){
         }
       },config.delayPushTime);
     },
-    handleDbclick(obj){
-      dispatch({
-        type:CLICKCOUNT,
-        data:obj,
-        clickType:'双击',
-        num:1
-      });
-    },
     handleHide(){
       dispatch({
         type:HIDEDROP
@@ -158,24 +102,6 @@ function mapDispatchToProps(dispatch,store){
         type: RESET
       });*/
     },
-    handleLabelChange(params){
-      const {type} = params;
-      switch (+type){
-        case 1:
-          mainSuitLabel(dispatch,params);
-          break;
-        case 2:
-          currentLabel(dispatch,params);
-          break;
-        case 3:
-          otherHisLabelEdit(dispatch,params);
-          break;
-        case 4:
-          checkBodyLabelEdit(dispatch,params);
-          break;
-        default:
-      }
-    }
   }
 }