滚动条问题

src/common/components/NumberPan/index.jsx

@@ -1,5 +1,6 @@
 import React,{Component} from 'react';
 import style from './index.less';
+import ReactDom from "react-dom";
 
 class NumberPan extends Component{
   constructor(props){
@@ -46,39 +47,50 @@ class NumberPan extends Component{
     });
     onSelect&&onSelect(text);
   }
-  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'}}
+  getStyle(){
+    const {left,top,show} = this.props;
+    return {
+      left:left?left:'0',
+      top:top?top:'0',
+      display:show?'table':'none'        //table onBlur阻止冒泡是为了修复multSpread中数字键盘点击触发最外层数字组件onBlur事件
+    }
+  }
+  render(){  
+    const select = this.handleSelect.bind(this); 
+    const domNode = document.getElementById('root');
+    return ReactDom.createPortal(
+       <div className={style['panBox']} 
+                style={this.getStyle()}
+                onBlur={(e)=>e.stopPropagation()} 
                 onDoubleClick={(e)=>e.stopPropagation()}>
-    <table className={style['pan']} >
-      <tr>
-        <td><button onClick={select}>1</button></td>
-        <td><button onClick={select}>2</button></td>
-        <td><button onClick={select}>3</button></td>
-        <td><button onClick={select}>/</button></td>
-      </tr>
-      <tr>
-        <td><button onClick={select}>4</button></td>
-        <td><button onClick={select}>5</button></td>
-        <td><button onClick={select}>6</button></td>
-        <td><button onClick={this.handleBack.bind(this)}>回退</button></td>
-      </tr>
-      <tr>
-        <td><button onClick={select}>7</button></td>
-        <td><button onClick={select}>8</button></td>
-        <td><button onClick={select}>9</button></td>
-        <td><button onClick={this.handleClear.bind(this)}>清空</button></td>
-      </tr>
-      <tr>
-        <td><button onClick={select}>.</button></td>
-        <td><button onClick={select}>0</button></td>
-        <td><button onClick={select}>～</button></td>
-        <td><button onClick={this.handleClose.bind(this)}>确定</button></td>
-      </tr>
-    </table>
-    </div>
+      <table className={style['pan']} >
+        <tr>
+          <td><button onClick={select}>1</button></td>
+          <td><button onClick={select}>2</button></td>
+          <td><button onClick={select}>3</button></td>
+          <td><button onClick={select}>/</button></td>
+        </tr>
+        <tr>
+          <td><button onClick={select}>4</button></td>
+          <td><button onClick={select}>5</button></td>
+          <td><button onClick={select}>6</button></td>
+          <td><button onClick={this.handleBack.bind(this)}>回退</button></td>
+        </tr>
+        <tr>
+          <td><button onClick={select}>7</button></td>
+          <td><button onClick={select}>8</button></td>
+          <td><button onClick={select}>9</button></td>
+          <td><button onClick={this.handleClear.bind(this)}>清空</button></td>
+        </tr>
+        <tr>
+          <td><button onClick={select}>.</button></td>
+          <td><button onClick={select}>0</button></td>
+          <td><button onClick={select}>～</button></td>
+          <td><button onClick={this.handleClose.bind(this)}>确定</button></td>
+        </tr>
+      </table>
+      </div>
+    ,domNode)
   }
 }
 

src/common/components/NumberPan/index.less

@@ -1,6 +1,7 @@
 @import "~@less/variables.less";
 .panBox{
   .pop;
+  display: table;
 }
 .pan{
   width: 280px;

src/common/components/SearchOption/index.jsx

@@ -57,7 +57,8 @@ class SearchOption extends React.Component {
               show:true
           })
       }else{
-          this.handleClearVal('')            //这个要放开，输入为空清除列表
+          // this.handleClearVal('')            //这个要放开，输入为空清除列表ie8会有问题
+          handleChangeValue('');
           this.setState({
               show:false
           })

src/common/js/func.js

@@ -172,6 +172,10 @@ export const getWindowInnerHeight = ()=>{
     return Math.min(by.clientHeight,ele.clientHeight);
   }
 };
+export const getWindowInnerWidth = ()=>{
+  let width = document.body.clientWidth || document.documentElement.clientWidth 
+  return width
+};
 
 export const getIds = (data)=>{
   let ids = [];

src/common/less/variables.less

@@ -54,7 +54,7 @@
 .pop{
   position: absolute;
   // top:40px;
-  top:30px;
+  // top:30px;
   background: #fff;
   box-shadow: 0 10px 20px 0 #989DA3;
   // filter:progid:DXImageTransform.Microsoft.Shadow(color='#989DA3',Direction=125,Strength=6);

src/components/BodyContainer/index.jsx

@@ -15,8 +15,8 @@ class BodyContainer extends Component {
         const { saveDateAll } = this.props;
         //console.log(saveDateAll)
         return <div className={style['container'] + ' clearfix'}>
-            <PushContainer></PushContainer>
             <SaveDataAll saveDateAll={saveDateAll}></SaveDataAll>
+            <PushContainer></PushContainer>
         </div>;
     }
 }

src/components/CheckBody/index.jsx

@@ -3,6 +3,7 @@ import style from './index.less';
 import {Button,InlineTag,ItemBox,EditableSpan,Notify} from '@commonComp';
 import chooseType from '@containers/eleType.js';
 import SearchDrop from '@components/SearchDrop';
+import {getPageCoordinate} from '@utils/tools';
 
 class CheckBody extends Component{
   constructor(props){
@@ -17,17 +18,16 @@ class CheckBody extends Component{
     this.getData = this.getData.bind(this);
     //this.handleInput = this.handleInput.bind(this);
   }
-  getLabels(){
+  getLabels(boxLeft,boxTop){
     const {data,showArr,saveText,selecteds} = this.props;
     let arr = [],list=[];
     const {boxMark} = this.state;
     if(data){
       list = data;
       arr = list.map((it,i)=>{
-        return chooseType({item:it,boxMark,i,showArr,saveText,selecteds});
+        return chooseType({item:it,boxMark,i,showArr,saveText,selecteds,boxLeft,boxTop});
       });
     }
-
     return arr;
   }
   handleClick(e){//让搜索框跟随鼠标点击移动
@@ -41,11 +41,10 @@ class CheckBody extends Component{
     //若使用e.target，因为是onClick事件中，值可能是itembox的而不是span因此会有bug
     const ele = document.activeElement;
     const height = ele.offsetHeight;
-    let boxTop = (+(ele.offsetTop)+height)+'px';
-    let boxLeft = ele.offsetLeft + 'px';
+
     this.setState({
-      boxLeft:boxLeft,
-      boxTop:boxTop
+      boxLeft:getPageCoordinate(e).boxLeft,
+      boxTop:getPageCoordinate(e).boxTop
     });
   }
   handleSearchSelect(obj){
@@ -63,7 +62,7 @@ class CheckBody extends Component{
       return ;
     }
     //有主诉时且本身无数据，第一次点击获取数据，(不论获取成功与否)再点击不获取（直到刷新成空白页或清空）
-    if(hasMain&&isEmpty!=false){
+    if(hasMain&&isEmpty){
       this.props.getInit();
     }
   }
@@ -72,7 +71,7 @@ class CheckBody extends Component{
     const {boxLeft,boxTop,boxMark} = this.state;
     return  <div className={style['container']}>
       <ItemBox title='查体' handleClick={this.handleClick}>
-        {this.getLabels()}
+        {this.getLabels(boxLeft,boxTop)}
         {searchData && searchData.length>0?<SearchDrop data={searchData} show={!totalHide} left={boxLeft} top={boxTop} onSelect={this.handleSearchSelect}></SearchDrop>:''}
       </ItemBox>
     </div>

src/components/EMRContainer/index.jsx

@@ -11,7 +11,8 @@ import OperationContainer from '../../containers/OperationContainer'
 import style from './index.less';
 import AdviceContainer from '../../containers/AdviceContainer';
 import InfoTitle from '@components/InfoTitle'
-import {getWindowInnerHeight} from '@common/js/func';
+import {windowEventHandler} from '@utils/tools'
+import {getWindowInnerHeight,getWindowInnerWidth} from '@common/js/func';
 
 class EMRContainer extends Component {
     constructor(props){
@@ -21,8 +22,16 @@ class EMRContainer extends Component {
     componentDidMount(){
         // const {initHospital} = this.props;
         // initHospital()
-        // const height = getWindowInnerHeight()-115;
-        // this.$cont.current.style.height = height+"px";
+        const height = getWindowInnerHeight() - 115;
+        const width = getWindowInnerWidth() - 480;
+        this.$cont.current.style.height = height+"px";
+        this.$cont.current.style.width = width + "px";
+        windowEventHandler('resize', ()=>{
+          const height = getWindowInnerHeight() - 200;
+          const width = getWindowInnerWidth() - 480;
+          this.$cont.current.style.height = height + "px";
+          this.$cont.current.style.width = width + "px";
+        });
         // const {initHistoryLastest} = this.props;
         // let timer = setInterval(()=>{
         //     let baseDate = store.getState().patInfo.message;
@@ -34,9 +43,9 @@ class EMRContainer extends Component {
 
     }
     render() {
-        return <div className={style['EMR-container']}>
-            <div className={style['inner']} ref={this.$cont}>
-                <InfoTitle></InfoTitle>
+        return <div className={style['EMR-container']} ref={this.$cont}>
+            <InfoTitle></InfoTitle>
+            <div className={style['inner']}>
                 <MainSuit></MainSuit>
                 <CurrentIll></CurrentIll>
                 <OtherHistory></OtherHistory>

src/components/EMRContainer/index.less

@@ -2,11 +2,14 @@
 .EMR-container{
   background: #fff;
 //   margin-top: 10px;
-  margin-right:@push-width + 10px;
+  // margin-right:@push-width + 10px;
   padding: 0px 0 10px 0 ;
   box-sizing: border-box;
   position: relative;
   min-width: 700px;
+  float: left;
+  overflow-y:auto;
+  overflow-x: hidden;
 }
 .inner{
 //   overflow-y: auto;

src/components/InfoTitle/index.less

@@ -8,7 +8,7 @@
   position: fixed;
   left: 10px;
   top: 50px;
-  right: 480px;
+  right: 470px;
   z-index: 204;
 }
 .operations, .health{

src/components/NumberDrop/index.jsx

@@ -2,7 +2,7 @@ import React,{Component} from 'react';
 import className from 'classnames';
 import {NumberPan} from '@commonComp';
 import style from './index.less';
-import {handleEnter} from '@utils/tools.js';
+import {handleEnter,getPageCoordinate} from '@utils/tools.js';
 /***
  * author:zn@2018-11-19
  * 接收参数：
@@ -20,7 +20,9 @@ class NumberDrop extends Component{
       numEditable:true,      //数字框是否可输入
       timer:null,
       hasSelect:false,       //是否点过下拉键盘
-      isClosed:false
+      isClosed:false,
+      boxLeft:'0',
+      boxTop:'0'
     };
     this.$span = React.createRef();
     this.$pre = React.createRef();
@@ -61,6 +63,10 @@ class NumberDrop extends Component{
     });
   }
   handleNumClick(e){      //数字框不可编辑的状态时点击事件，点击将数字框变为可输入且下拉不再显示直到失焦后再次聚集
+    this.setState({
+      boxLeft:getPageCoordinate(e).boxLeft,
+      boxTop:getPageCoordinate(e).boxTop
+    });
     e.stopPropagation();
     const {show,handleShow,ikey,id,patId,handleHide,value} = this.props;
     const {hasSelect} = this.state;
@@ -132,7 +138,7 @@ class NumberDrop extends Component{
   }
   render(){
     const {placeholder,prefix,suffix,show,value,handleHide} = this.props;
-    const {numEditable,editable,hasSelect} = this.state;
+    const {numEditable,editable,hasSelect,boxTop,boxLeft} = this.state;
     return <div className={this.getClasses()}
                 onDoubleClick={this.changeToEdit}
                 contentEditable={editable}
@@ -151,7 +157,10 @@ class NumberDrop extends Component{
       <span ref = {this.$suf}>&nbsp;{suffix}</span>
       <NumberPan handleSelect={(text)=>this.select(text)}
                  onClose={handleHide}
-                 show={show} toClear={!hasSelect}/>
+                 show={show} 
+                 toClear={!hasSelect}
+                 left={boxLeft}
+                 top={boxTop}/>
     </div>
   }
 }

src/components/PushContainer/index.less

@@ -5,14 +5,12 @@
   width: @push-width;
   float: right;
   padding-top: 20px;
-  position: absolute;
-  right: 10px;
   z-index: 200;
 
-  position: fixed;
-  top: 50px;
-  bottom: 10px;
-  right: 10px;
+  // position: fixed;     
+  // top: 50px;
+  // bottom: 10px;
+  // right: 10px;
   padding-bottom:50px;
 }
 .title{

src/components/SearchDrop/index.jsx

@@ -1,5 +1,6 @@
 import React,{Component} from 'react';
 import classNames from 'classnames';
+import ReactDom from "react-dom";
 
 import style from "./index.less";
 /****
@@ -53,14 +54,17 @@ class SearchDrop extends Component{
   }
   render(){
     let litext = '';
-    return <div className={this.getClass()} contenteditable="false" id="searchBox" style={this.getStyle()}>
-      <ul>
-        {this.props.data&&this.props.data.map((it)=>{
-          litext = it.showType==1?it.name:it.name+'（'+it.retrievalName+'）';
-          return <li onClick={(e)=>this.handleSelect(e,it)} title={litext}>{litext}</li>
-        })}
-      </ul>
-    </div>
+    const domNode = document.getElementById('root');
+    return ReactDom.createPortal(
+      <div className={this.getClass()} contenteditable="false" id="searchBox" style={this.getStyle()}>
+        <ul>
+          {this.props.data&&this.props.data.map((it)=>{
+            litext = it.showType==1?it.name:it.name+'（'+it.retrievalName+'）';
+            return <li onClick={(e)=>this.handleSelect(e,it)} title={litext}>{litext}</li>
+          })}
+        </ul>
+      </div>
+    ,domNode)
   }
 }
 

src/containers/MainSuit.js

@@ -11,7 +11,7 @@ import {filterArr,didPushParamChange} from '@utils/tools.js';
 import config from '@config/index.js';
 import {Notify} from '@commonComp';
 
-function mapStateToProps(state) {      //console.log(state)
+function mapStateToProps(state) {
   return {
     showDrop:state.mainSuit.showDrop,//用于更新
     update:state.mainSuit.update,

src/utils/tools.js

@@ -615,6 +615,18 @@ function normalVal(min,max){
       return null;
   }
 }
+function getPageCoordinate(event){
+    let e = event || window.event;
+    var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
+    var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
+    var x = e.pageX || (e.clientX + scrollX);
+    var y = (e.pageY+25) || (e.clientY + scrollY + 25);
+    let obj = {
+      boxLeft : x + 'px',
+      boxTop : y +'px'
+    }
+    return obj;
+}
 module.exports = {
     checkType: Type.checkType,
     regexp,
@@ -638,5 +650,6 @@ module.exports = {
     getEMRParams,
     windowEventHandler,
     isAllClear,
-    normalVal
+    normalVal,
+    getPageCoordinate
 };