数字带单位弹窗问题

src/common/components/NumberUnitPan/index.jsx

@@ -2,6 +2,7 @@ import React,{Component} from 'react';
 import style from './index.less';
 import config from '@config/index.js';
 import Notify from '../Notify/index.js';
+import ReactDom from "react-dom";
 
 class NumberUnitPan extends Component{
   constructor(props){
@@ -55,6 +56,14 @@ class NumberUnitPan extends Component{
     });
     onSelect&&onSelect(text);
   }
+  getStyle(){
+    const {left,top,show} = this.props;
+    return {
+      left:left?left+'px':'0',
+      top:top?top+'px':'0',
+      display:show?'table':'none'        //table onBlur阻止冒泡是为了修复multSpread中数字键盘点击触发最外层数字组件onBlur事件
+    }
+  }
   componentWillReceiveProps(nextProps){
     //重新选择的值替换 不追加
      if(!nextProps.show){
@@ -65,46 +74,48 @@ class NumberUnitPan extends Component{
   }
   render(){
     // const select = this.handleSelect.bind(this);
-    const {show} = this.props;      //table onBlur阻止冒泡是为了修复multSpread中数字键盘点击触发最外层数字组件onBlur事件
-    return <div className={style['panBox']} onBlur={(e)=>e.stopPropagation()} style={{display:show?'table':'none'}}>
-      <table className={style['pan']} >
-      <tr>
-        <td><span onClick={this.handleSelect}>1</span></td>
-        <td><span onClick={this.handleSelect}>2</span></td>
-        <td><span onClick={this.handleSelect}>3</span></td>
-        <td><span onClick={this.handleSelect}>/</span></td>
-      </tr>
-      <tr>
-        <td><span onClick={this.handleSelect}>4</span></td>
-        <td><span onClick={this.handleSelect}>5</span></td>
-        <td><span onClick={this.handleSelect}>6</span></td>
-        <td><span onClick={this.handleBack.bind(this)}>回退</span></td>
-      </tr>
-      <tr>
-        <td><span onClick={this.handleSelect}>7</span></td>
-        <td><span onClick={this.handleSelect}>8</span></td>
-        <td><span onClick={this.handleSelect}>9</span></td>
-        <td><span onClick={this.handleClear.bind(this)}>清空</span></td>
-      </tr>
-      <tr>
-        <td><span onClick={this.handleSelect}>.</span></td>
-        <td><span onClick={this.handleSelect}>0</span></td>
-        <td><span onClick={this.handleSelect}>～</span></td>
-        <td><span onClick={this.handleClose.bind(this)}>确定</span></td>
-      </tr>
-      <tr>
-        <td><span onClick={this.handleSelect}>{config.timeUnit.minute}</span></td>
-        <td><span onClick={this.handleSelect}>{config.timeUnit.hour}</span></td>
-        <td><span onClick={this.handleSelect}>{config.timeUnit.day}</span></td>
-        <td><span onClick={this.handleSelect}>{config.timeUnit.age}</span></td>
-      </tr>
-      <tr>
-        <td><span onClick={this.handleSelect}>{config.timeUnit.week}</span></td>
-        <td><span onClick={this.handleSelect}>{config.timeUnit.month}</span></td>
-        <td><span onClick={this.handleSelect}>{config.timeUnit.year}</span></td>
-      </tr>
-    </table>
-    </div>
+    const domNode = document.getElementById('root');
+    return ReactDom.createPortal( 
+      <div className={style['panBox']} onBlur={(e)=>e.stopPropagation()} style={this.getStyle()}>
+        <table className={style['pan']} >
+        <tr>
+          <td><span onClick={this.handleSelect}>1</span></td>
+          <td><span onClick={this.handleSelect}>2</span></td>
+          <td><span onClick={this.handleSelect}>3</span></td>
+          <td><span onClick={this.handleSelect}>/</span></td>
+        </tr>
+        <tr>
+          <td><span onClick={this.handleSelect}>4</span></td>
+          <td><span onClick={this.handleSelect}>5</span></td>
+          <td><span onClick={this.handleSelect}>6</span></td>
+          <td><span onClick={this.handleBack.bind(this)}>回退</span></td>
+        </tr>
+        <tr>
+          <td><span onClick={this.handleSelect}>7</span></td>
+          <td><span onClick={this.handleSelect}>8</span></td>
+          <td><span onClick={this.handleSelect}>9</span></td>
+          <td><span onClick={this.handleClear.bind(this)}>清空</span></td>
+        </tr>
+        <tr>
+          <td><span onClick={this.handleSelect}>.</span></td>
+          <td><span onClick={this.handleSelect}>0</span></td>
+          <td><span onClick={this.handleSelect}>～</span></td>
+          <td><span onClick={this.handleClose.bind(this)}>确定</span></td>
+        </tr>
+        <tr>
+          <td><span onClick={this.handleSelect}>{config.timeUnit.minute}</span></td>
+          <td><span onClick={this.handleSelect}>{config.timeUnit.hour}</span></td>
+          <td><span onClick={this.handleSelect}>{config.timeUnit.day}</span></td>
+          <td><span onClick={this.handleSelect}>{config.timeUnit.age}</span></td>
+        </tr>
+        <tr>
+          <td><span onClick={this.handleSelect}>{config.timeUnit.week}</span></td>
+          <td><span onClick={this.handleSelect}>{config.timeUnit.month}</span></td>
+          <td><span onClick={this.handleSelect}>{config.timeUnit.year}</span></td>
+        </tr>
+      </table>
+      </div>
+    ,domNode)
   }
 }
 

src/components/NumberUnitDrop/index.jsx

@@ -3,7 +3,7 @@ import className from 'classnames';
 import {NumberUnitPan} from '@commonComp';
 import style from './index.less';
 import config from '@config/index.js';
-import {filterArr,handleEnter,isIE} from '@utils/tools.js';
+import {filterArr,handleEnter,isIE,getPageCoordinate} from '@utils/tools.js';
 import {Notify} from '@commonComp';
 import $ from 'jquery';
 /***
@@ -26,7 +26,11 @@ class NumberUnitDrop extends Component{
       isClosed:false,
       value:props.value,
       placeholderFlag:false,
-      labelVal:''
+      labelVal:'',
+      boxLeft:0,
+      boxTop:0,
+      tmpTop:0,
+      tmpScroll:0
     };
     this.$span = React.createRef();
     this.$cont = React.createRef();
@@ -63,9 +67,20 @@ class NumberUnitDrop extends Component{
       }
       handleShow&&handleShow({ikey,id:patId||id});
     },300);
+    
     this.setState({
-      timer
+      timer,
+      boxLeft:getPageCoordinate(e).boxLeft,
+      boxTop:getPageCoordinate(e).boxTop,
+      tmpScroll: $("#addScrollEvent")[0].scrollTop,
+      tmpTop:getPageCoordinate(e).boxTop
     });
+    $("#addScrollEvent").scroll(()=>{
+      let scrollYs = $("#addScrollEvent")[0].scrollTop;
+      this.setState({
+        boxTop:this.state.tmpTop - scrollYs + this.state.tmpScroll
+      })
+    })
     handleHide&&handleHide();
   }
   //数字框失焦，保存值到store中
@@ -151,7 +166,7 @@ class NumberUnitDrop extends Component{
 
   render(){
     const {placeholder,prefix,suffix,show,value,handleHide} = this.props;
-    const {numEditable,editable,hasSelect,placeholderFlag} = this.state;
+    const {numEditable,editable,hasSelect,placeholderFlag,boxLeft,boxTop} = this.state;
     return <div className={this.getClasses()} ref={this.$cont}>
       <span>{prefix}</span>
       <span onClick={this.handleNumClick}
@@ -165,6 +180,8 @@ class NumberUnitDrop extends Component{
       <span>{suffix}</span>
       <NumberUnitPan handleSelect={(text)=>this.select(text)}
                  onClose={handleHide}
+                 top={boxTop}
+                 left={boxLeft}
                  show={show} toClear={!hasSelect} value={value}/>
     </div>
   }