身高体重、BMI自动填

src/common/components/NumberPan/index.jsx

@@ -59,6 +59,7 @@ class NumberPan extends Component{
   }
   render(){
     const select = this.handleSelect;
+    const noString=this.props.noString;
     const domNode = document.getElementById('root');
     return <div className={style['panBox']}
                 style={this.getStyle()}
@@ -70,7 +71,7 @@ class NumberPan extends Component{
           <td><button onMouseUp={select}>1</button></td>
           <td><button onMouseUp={select}>2</button></td>
           <td><button onMouseUp={select}>3</button></td>
-          <td><button onMouseUp={select}>/</button></td>
+          <td><button className={noString?style['disabled']:''} onMouseUp={noString?null:select}>/</button></td>
         </tr>
         <tr>
           <td><button onMouseUp={select}>4</button></td>
@@ -87,7 +88,7 @@ class NumberPan extends Component{
         <tr>
           <td><button onMouseUp={select}>.</button></td>
           <td><button onMouseUp={select}>0</button></td>
-          <td><button onMouseUp={select}>～</button></td>
+          <td><button className={noString?style['disabled']:''} onMouseUp={noString?null:select}>～</button></td>
           <td><button onMouseUp={this.handleClose.bind(this)} className={style['confirm']}>确定</button></td>
         </tr>
       </table>

src/common/components/NumberPan/index.less

@@ -9,6 +9,13 @@
   td{
     width: 68px;
     height:44px;
+    .disabled{
+      opacity: .4;
+      cursor: not-allowed;
+    }
+    .disabled:hover{
+      border: none;
+    }
   }
   button{
     border:1px #fff solid;

src/components/MultSpread/index.jsx

@@ -33,8 +33,15 @@ class MultSpread extends Component{
   constructor(props){
     super(props);
     this.state = {
-      numDoms:[]
+      numDoms:[],
+      tall:0,       //升高
+      weight:0,     //体重
+      bmi:'',        //BMI
+      wrBmi:false,      //是否无效bmi值，是则要清空身高体重,不能用判断bmi是否为空来判断，因为初始就是为空
     };
+    this.setBMIParam = this.setBMIParam.bind(this);
+    this.setBMI = this.setBMI.bind(this);
+    this.isBMIUseable = this.isBMIUseable.bind(this);
   }
   getClass(){
     const {saveText,ikey,showAdd} = this.props;
@@ -70,8 +77,45 @@ class MultSpread extends Component{
     const doms = this.state.numDoms;
     doms[i+1]&&this.moveEnd(doms[i+1].current)
   }
+  isBMIUseable(name,val){
+    const {tall,weight} = this.state;
+    //身高不能为0，否则分母为0，身高体重任何一个为空，则BMI清空
+    if((name==='tall'&&(!val||!weight))||(name==='weight'&&(!tall||!val))){
+      return false;
+    }
+    return true;
+  }
+  setBMIParam(name,val){        //设置bmi相关数据，身高、体重
+    const {tall,weight} = this.state;
+    const useable = this.isBMIUseable(name,val);
+    this.setState({
+      [name]:val
+    });
+    if(useable){
+      const result = name==='tall'?weight/Math.pow(val/100,2):val/Math.pow(tall/100,2);
+      this.setState({
+        bmi:result.toFixed(1),
+        wrBmi:false
+      })
+    }else{
+      this.setState({
+        bmi:'',
+        wrBmi:false
+      })
+    }
+  }
+  setBMI(val){
+    //手动修改BMI赋值，且身高体重清空
+    this.setState({
+      bmi:val,
+      wrBmi:true,
+      tall:0,
+      weight:0
+    });
+  }
   getLabels(){
     const {data,ikey,showArr,copyId,selecteds,boxMark} = this.props;
+    const {wrBmi,bmi} = this.state;
     let show = false;
     let inx = '',count=0;
     const list = data.map((it,i)=>{
@@ -131,6 +175,11 @@ class MultSpread extends Component{
                              //inputRef = {this['$inp'+(count++)]}
                              saveDoms={this.saveDoms.bind(this)}
                              reFocus={this.setNextFocus.bind(this)}
+                             setBMI={this.setBMI}
+                             wrBmi={wrBmi}
+                             bmi={bmi}
+                             setBMIParam={this.setBMIParam}
+                             formulaCode={it.formulaCode}
                              num = {count++}
                              min={min}
                              max={max}
@@ -182,7 +231,7 @@ class MultSpread extends Component{
       <div className={this.getClass()}>
       {this.getLabels()}
       {textSuffix?<span>{textSuffix}</span>:''}
-      {showAdd?<img src={addIcon} alt="添加血压项"
+      {showAdd?<img src={addIcon} alt="复制该项"
                     className={style['add-icon']}
                     onClick={()=>addLabelItem({ikey,copyId})}/>:''}
     </div>

src/components/NumberDrop/index.jsx

@@ -31,6 +31,7 @@ class NumberDrop extends Component{
     this.handleNumFocus = this.handleNumFocus.bind(this);
     this.handleKeyDowm = this.handleKeyDowm.bind(this);
     this.beyondArea = this.beyondArea.bind(this);
+    this.emitBMIData = this.emitBMIData.bind(this);
   }
   select(text){        //选中键盘上数字事件
     //placeholder修改后，第一次点击键盘触发blur后onClick不触发，原因未知，改为onMouseup可触发
@@ -64,11 +65,30 @@ class NumberDrop extends Component{
     }
 
     handleSelect&&handleSelect({ikey,text,suffix,prefix,mainSaveText});
+    //BMI相关数据上传
+    this.emitBMIData(text);
+  }
+  emitBMIData(text){
+    //手动修改BMI相关值时数据上传
+    const {setBMIParam,formulaCode,setBMI} = this.props;
+    if(formulaCode==="BMI_RES"){
+      setBMI&&setBMI(text);
+    }
+    if(text!==0&&(formulaCode==="BMI_SG"||formulaCode==="BMI_TZ")){
+      const map={
+        BMI_SG:'tall',
+        BMI_TZ:'weight'
+      };
+      setTimeout(function(){
+        setBMIParam&&setBMIParam(map[formulaCode],text);
+      });
+    }
   }
   beyondArea(){
     const {handleSelect,ikey,suffix,prefix,mainSaveText} = this.props;
     Notify.info("输入数值不符合规范，请重新输入！");
     handleSelect&&handleSelect({ikey,text:'',suffix,prefix,mainSaveText});
+    this.emitBMIData('');
     this.setState({
       placeholder:this.props.placeholder,
       hasSelect:false
@@ -165,6 +185,7 @@ class NumberDrop extends Component{
     let text = val===placeholder?'':val;
     //e.target.innerText = '';      //避免出现重复输入值
     handleSelect&&handleSelect({ikey,text,suffix,prefix,mainSaveText});
+    this.emitBMIData(text);
   }
   handleSpanInp(e){   //数字框输入事件
     e.stopPropagation();
@@ -202,16 +223,27 @@ class NumberDrop extends Component{
     })
   }
   componentWillReceiveProps(nextProps){
+    //BMI存值
+    const {formulaCode,bmi,suffix,prefix,ikey,handleSelect,mainSaveText,wrBmi} = this.props;
+    if(formulaCode==="BMI_RES"&&nextProps.bmi!==bmi){
+      handleSelect&&handleSelect({ikey,text:nextProps.bmi,suffix,prefix,mainSaveText});
+    }
+    //手动修改BMI时身高体重清空
+    if(wrBmi!==nextProps.wrBmi&&(formulaCode==="BMI_SG"||formulaCode==="BMI_TZ")){
+      handleSelect&&handleSelect({ikey,text:'',suffix,prefix,mainSaveText});
+    }
+
     if((nextProps.placeholder == this.props.placeholder)&&(nextProps.value == this.props.value)){
       return
     }
     this.setState({
       placeholder:nextProps.placeholder,
       value:nextProps.value
-    })
+    });
   }
   render(){
-    const {prefix,suffix,show,value,handleHide,allClick} = this.props;
+    const {prefix,suffix,show,value,handleHide,allClick,bmi,formulaCode} = this.props;
+    const val = formulaCode==="BMI_RES"?(+bmi===Infinity||isNaN(bmi)?'':bmi):value;
     const {placeholder,hasSelect} = this.state;
     return <div className={this.getClasses()}
                 style={{position:'relative'}}
@@ -226,9 +258,10 @@ class NumberDrop extends Component{
             onBlur={this.numInpBlur}
             onInput={this.handleSpanInp}
             className={this.getSpanClass()}
-            >&nbsp;{value||placeholder}</span>
+            >&nbsp;{val||placeholder}</span>
       <span>{suffix}</span>
       <NumberPan handleSelect={this.select.bind(this)}
+                 noString={formulaCode?true:false}
                  onClose={handleHide}
                  show={show}
                  toClear={!hasSelect}/>

src/components/NumberDrop/index.less

@@ -9,7 +9,7 @@
   .nol,.blued{
     min-width:10px;
     height: 22px;
-    vertical-align: text-bottom;
+    vertical-align: bottom;
     display:inline-block;
     text-align:center;
     word-break:break-all;
@@ -33,6 +33,6 @@
     text-align:center;
     word-break:break-all;
     height: 22px;
-    vertical-align: text-bottom;
+    vertical-align: bottom;
   }
 }