Merge remote-tracking branch 'origin/dev/byll' into dev/new1

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/common/less/reset.css

@@ -22,7 +22,8 @@ menu, nav, output, section, summary, audio, video {
 html, body {
     height: 100%;
 	/*overflow-x: hidden;*/
-	font-family: 'Microsoft YaHei', arial, tahoma, sans-serif;
+  font-family: 'Microsoft YaHei', arial, tahoma, sans-serif;
+  overflow: hidden;    /* 弹窗出现有可能出现滚动条*/
 }
 
 body {

src/components/AddInspect/index.jsx

@@ -196,7 +196,7 @@ class Inspect extends React.Component {
                     }else if(item.controlType == 6){
                         return (
                             <li className={`${styles.itemPart} ${fillActive.details.length>1?'':styles.itemPartOne}`}>
-                                <span className={styles.itemPartL}>{item.name}</span>
+                                <span className={styles.itemPartL} title={item.name}>{item.name}</span>
                                 <span className={styles.itemPartT}>
                                     <input type="text" 
                                         placeholder="(填写)"

src/components/AddInspect/index.less

@@ -133,6 +133,10 @@
     }
     .itemPartL {
         // width: 100px;
+        max-width: 180px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
         float: left;
     }
     .itemPartR {

src/components/CheckBody/index.jsx

@@ -3,7 +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,windowEventHandler} from '@utils/tools';
+import {getPageCoordinate,windowEventHandler,isIE} from '@utils/tools';
 import $ from "jquery";
 
 class CheckBody extends Component{
@@ -42,14 +42,21 @@ class CheckBody extends Component{
       return ;
     }
     //若使用e.target，因为是onClick事件中，值可能是itembox的而不是span因此会有bug
-    const ele = document.activeElement;
-    if(ele.toString().indexOf('HTMLSpanElement') == -1){     //点击的不是span无法聚焦就不再设置位置
-      return;
+    
+    let leftL=0;      //用焦点元素的左边距替换鼠标点击的左边距，高度还是鼠标点击的位置
+    if(isIE()){
+      leftL = getPageCoordinate(e).boxLeft
+    }else{
+      const ele = document.activeElement;
+      if(ele.toString().indexOf('HTMLSpanElement') == -1){     //点击的不是span无法聚焦就不再设置位置
+        return;
+      }
+      leftL = ele.offsetLeft+90
     }
-    const leftL = ele.offsetLeft;      //用焦点元素的左边距替换鼠标点击的左边距，高度还是鼠标点击的位置
+    // console.log(leftL,getPageCoordinate(e).boxLeft)
     this.setState({
       // boxLeft:getPageCoordinate(e).boxLeft,
-      boxLeft:leftL+90,
+      boxLeft:leftL,
       boxTop:getPageCoordinate(e).boxTop,
       tmpScroll: $("#addScrollEvent")[0].scrollTop,
       tmpTop:getPageCoordinate(e).boxTop

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>
   }