数字组件合理值提醒添加

src/common/components/NumberPan/index.jsx

@@ -55,7 +55,7 @@ class NumberPan extends Component{
       display:show?'table':'none'        //table onBlur阻止冒泡是为了修复multSpread中数字键盘点击触发最外层数字组件onBlur事件
     }
   }
-  render(){  
+  render(){
     const select = this.handleSelect.bind(this); 
     const domNode = document.getElementById('root');
     return ReactDom.createPortal(

src/components/MultSpread/index.jsx

@@ -100,6 +100,8 @@ class MultSpread extends Component{
           return <NumberDrop prefix={it.labelPrefix}
                              suffix={it.labelSuffix}
                              placeholder={it.name}
+                             min={it.minValue}
+                             max={it.maxValue}
                              show={show}
                              allClick={false}
                              ikey={inx}

src/components/NumberDrop/index.jsx

@@ -1,6 +1,6 @@
 import React,{Component} from 'react';
 import className from 'classnames';
-import {NumberPan} from '@commonComp';
+import {NumberPan,Notify} from '@commonComp';
 import style from './index.less';
 import $ from "jquery";
 import {handleEnter,getPageCoordinate} from '@utils/tools.js';
@@ -20,6 +20,7 @@ class NumberDrop extends Component{
     this.state={
       editable:false,      //标签是否可输入
       timer:null,
+      sltTimer:null,
       hasSelect:false,       //是否点过下拉键盘
       boxLeft:0,
       boxTop:0,
@@ -39,21 +40,50 @@ class NumberDrop extends Component{
     this.handleBlur = this.handleBlur.bind(this);
     this.changeToEdit = this.changeToEdit.bind(this);
     this.handleKeyDowm = this.handleKeyDowm.bind(this);
+    this.beyondArea = this.beyondArea.bind(this);
   }
   select(text){        //选中键盘上数字事件
-    const {handleSelect,ikey,suffix,prefix,mainSaveText} = this.props;
+    let timer = null;
+    clearTimeout(this.state.sltTimer);
+    const {handleSelect,ikey,suffix,prefix,mainSaveText,min,max} = this.props;
+    const needCompare=min!=undefined&&max!=undefined;
     if(!text){
       this.setState({
         placeholder:this.props.placeholder
       });
     }else{
+      //console.log(text,isNaN(+text),max<+text)
+      if(needCompare){
+        if(!isNaN(+text)&&max<+text){     //数值过大
+          this.beyondArea();
+          return;
+        }
+        const that = this;
+        timer = setTimeout(function(){
+          clearTimeout(that.state.sltTimer);
+          if(!that.props.show&&!isNaN(+text)&&min>+text){
+            that.beyondArea();
+            return;
+          }
+        },1500);
+      }
       this.setState({
-        hasSelect:true
+        hasSelect:true,
+        sltTimer:timer
       });
     }
 
     handleSelect&&handleSelect({ikey,text,suffix,prefix,mainSaveText});
   }
+  beyondArea(){
+    const {handleSelect,ikey,suffix,prefix,mainSaveText} = this.props;
+    Notify.info("数值在正常值范围内，请重新输入");
+    handleSelect&&handleSelect({ikey,text:'',suffix,prefix,mainSaveText});
+    this.setState({
+      placeholder:this.props.placeholder,
+      hasSelect:false
+    });
+  }
   handleNumFocus(e){       //数字框可编辑状态下聚集事件，处理是否显示下拉等
     const {placeholder} = this.state;
     const val = e.target.innerText.trim();
@@ -80,6 +110,10 @@ class NumberDrop extends Component{
       //双击时不显示下拉
       clearTimeout(that.state.timer);
       const timer = setTimeout(function(){
+        //只有弹窗关闭则点击数字键盘会清空当前数据
+        that.setState({
+          hasSelect:false
+        });
         handleShow&&handleShow({ikey,id:patId||id});
       },300);
       this.setState({
@@ -100,31 +134,37 @@ class NumberDrop extends Component{
   }
   numInpBlur(e){        //数字框失焦，保存值到store中
     e.stopPropagation();
-    if(this.props.show){      //修改清空后第一次点击键盘不触发click事件bug
+    const {handleSelect,ikey,suffix,prefix,mainSaveText,min,max,show} = this.props;
+    if(show){      //修改清空后第一次点击键盘不触发click事件bug
       return;
     }
-    const that = this;
-    //setTimeout(function(){      //第一次选中数字时placeholder闪一下优化
-      if(!e.target.innerText.trim()){
-        that.setState({
-          placeholder:that.props.placeholder
-        });
-      }
-    //},100);
+    const txt = e.target.innerText.replace(/^\s*/,'');
+    if(max!=undefined&&!isNaN(+txt)&&(min>+txt||max<+txt)){
+      this.beyondArea();
+      return;
+    }
+    //输入为空时显示placeholder
+    if(!e.target.innerText.trim()){
+      this.setState({
+        placeholder:this.props.placeholder
+      });
+    }
 
-    this.setState({
+    /*this.setState({
       hasSelect:false
-    });
+    });*/
     const val = e.target.innerText.replace(/^\s*/,'');
-    const {handleSelect,ikey,suffix,prefix,mainSaveText} = this.props;
     const {placeholder} = this.state;
-    const text = val===placeholder?'':val;
+    let text = val===placeholder?'':val.replace(/[\u4e00-\u9fa5]/g,'');
     e.target.innerText = '';      //避免出现重复输入值
     handleSelect&&handleSelect({ikey,text,suffix,prefix,mainSaveText});
   }
   handleSpanInp(e){   //数字框输入事件
     e.stopPropagation();
     const {handleHide} = this.props;
+    /*this.setState({     //再键盘点击数字要清空
+      hasSelect:false
+    });*/
     handleHide&&handleHide();
   }
   handleKeyDowm(e){
@@ -133,14 +173,15 @@ class NumberDrop extends Component{
     const key = e.key;
     const ctrlOn = e.ctrlKey;
     const isCopyPaste = ctrlOn&&(key=='v'||key=='c');
-    if(!/[0-9|.|～|\/]/.test(key)&&key.length==1&&!isCopyPaste){
+    if((!/[0-9|.|～|\/]/.test(key)&&key.length==1&&!isCopyPaste)){
       e.preventDefault();
       return false;
     }
   }
   getClasses(){         //整个标签是否有值的状态
     const {hideTag,placeholder,value} = this.props;
-    const val = this.$span.current&&this.$span.current.innerText.trim()||value;
+    const $span = this.$span.current;
+    const val = value;//$span&&$span.innerText.trim()||value;
     const blueBorder = this.state.editable?style['blue-border']:'';
     const isSelected = val&&val!=placeholder?style['selected']:style['container'];
     const noTag = hideTag?style['no-tag']:'';

src/containers/eleType.js

@@ -73,6 +73,8 @@ export function singleRadio(params){
     case 7:
       return <NumberDrop prefix={data.labelPrefix}
                          suffix={data.labelSuffix}
+                         min={data.minValue}
+                         max={data.maxValue}
                          placeholder={data.name}
                          boxMark={boxMark}
                          id={data.id}