頁面自動計算滾動位置

src/common/components/InspectCommon/index.less

@@ -25,11 +25,13 @@
         float: right;
         color: @blue;
         font-weight: bold;
+        cursor: pointer;
     }
     .clear {
         float: left;
         // font-weight: bold;
         bottom: 0;
+        cursor: pointer;
     }
 }
 

src/common/components/SearchOption/index.jsx

@@ -4,6 +4,7 @@ import clear from './imgs/clear.png';
 import search from './imgs/search.png';
 import PropTypes from "prop-types";
 import config from '@config/index';
+import $ from 'jquery';
 /**
  * 前提条件父元素有定位
  * visible  搜索显示隐藏
@@ -39,6 +40,10 @@ class SearchOption extends React.Component {
     componentDidMount(){
       this.props.handleChangeValue('');
       this.textInput.current.focus();
+      const {windowHeight,pageTop,height} = this.props;
+      if(windowHeight - pageTop < height){
+        $("#searchOption")[0].scrollIntoView(false);
+      }
     }
     handleClearVal(){
         const { handleChangeValue } = this.props;

src/common/components/SearchOption/index.less

@@ -5,10 +5,10 @@
     padding: 8px;
     box-sizing: border-box;
     position: absolute;
-    top: 40px;
+    top: 30px;
     z-index: 99;
     background-color: #fff;
-    margin-bottom: 80px;
+    // margin-bottom: 80px;
     .llStyle;
     .autoList {
         // max-height: 225px;

src/common/less/variables.less

@@ -200,7 +200,6 @@
   text-align: left;
   padding-left: 5px;
   cursor: default;
-  display: inline-block;
   width: 99px;
   height: 26px;
   line-height: 26px;
@@ -218,7 +217,6 @@
   text-align: left;
   padding-left: 5px;
   cursor: default;
-  display: inline-block;
   width: 99px;
   height: 26px;
   line-height: 26px;

src/components/AddAssistCheck/index.jsx

@@ -3,6 +3,7 @@ import { SearchOption, Calendar, ConfirmModal, Notify, Add } from '@commonComp';
 import styles from './index.less';
 import $ from 'jquery';
 import Textarea from './Textarea';
+import { getPageCoordinate } from '@utils/tools';
 import close from './img/close.png';
 
 class AddAssistCheck extends React.Component {
@@ -14,6 +15,7 @@ class AddAssistCheck extends React.Component {
       dateTime: "",
       active: '',
       visible: false,
+      pageTop:'',
       id: null
     }
     this.handleShowDate = this.handleShowDate.bind(this)
@@ -66,7 +68,7 @@ class AddAssistCheck extends React.Component {
   }
   handleSearchShow(e) {
     let tmpShow = this.state.show;
-    this.setState({ show: !tmpShow })
+    this.setState({ show: !tmpShow,pageTop:getPageCoordinate(e).boxTop })
     // e.stopPropagation();
   }
   handleShowDate(idx) {
@@ -151,14 +153,14 @@ class AddAssistCheck extends React.Component {
     </ul>
   }
   render() {
-    const { handleChangeValue, list,assistVal } = this.props;
-    const { visible } = this.state;
+    const { handleChangeValue, list,assistVal,windowHeight } = this.props;
+    const { visible,pageTop } = this.state;
     return (
       <div className={styles.wrapper}>
         {this.getAssistLabel()}
         <div id="searchWrapAssist" style={{ position: "relative", clear: 'both' }}>
           <Add showText="添加辅检项" handleClick={(e) => this.handleSearchShow(e)} id="assistCheck" />
-          {this.state.show ? <SearchOption handleChangeValue={handleChangeValue} visible={true}>
+          {this.state.show ? <SearchOption windowHeight={windowHeight} pageTop={pageTop} height={280} handleChangeValue={handleChangeValue} visible={true}>
             {list && list.length>0?this.getSearchList(list):(assistVal == ''?'':<p style={{padding:'5px 30px',color:'#bfbfbf'}}>暂无筛选项</p>)}
             {
               list && list.length>0 || (assistVal != '')?'':<div>

src/components/AddInspect/index.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { SearchOption, InspectCommon, Calendar ,Notify,ConfirmModal,Add} from '@commonComp';
 import SlideExcel from './SlideExcel';
 import SlideSelect from './SlideSelect';
-import { deepClone } from '@utils/tools';
+import { deepClone,getPageCoordinate } from '@utils/tools';
 import styles from './index.less';
 import date1 from './img/date1.png';
 import close from './img/close.png';
@@ -27,6 +27,7 @@ class Inspect extends React.Component {
       type: null,
       id: null,
       tmpIds: [],      //内层外层
+      pageTop:'',
     }
     this.handleChangeDate = this.handleChangeDate.bind(this)
     this.handleShowDate = this.handleShowDate.bind(this)
@@ -114,7 +115,7 @@ class Inspect extends React.Component {
   }
   handleSearchShow(e) {
     let tmpShow = this.state.show;
-    this.setState({ show: !tmpShow })
+    this.setState({ show: !tmpShow,pageTop:getPageCoordinate(e).boxTop })
     // e.stopPropagation();
   }
   handleFillShow(e, idx) {
@@ -284,8 +285,8 @@ class Inspect extends React.Component {
     }
   }
   render() {
-    const { getInfomation,handleChangeValue,inspectVal, list, labelList, delPartItem, handleLabelSub, handleClear, handleConfirm, fillActive, getExcelDataList, handleCloseExcel, handlePush } = this.props;
-    const { toastText, visible, tmpId, tmpIdx } = this.state;
+    const { getInfomation,handleChangeValue,inspectVal, list, labelList,windowHeight, delPartItem, handleLabelSub, handleClear, handleConfirm, fillActive, getExcelDataList, handleCloseExcel, handlePush } = this.props;
+    const { toastText, visible, tmpId, tmpIdx,pageTop } = this.state;
 
     return (
       <div className={styles.wrapper}>
@@ -343,7 +344,7 @@ class Inspect extends React.Component {
         </div>
         <div style={{ position: "relative", clear: "both" }}>
           <Add showText="添加化验项" handleClick={(e) => this.handleSearchShow(e)} id="searchWrap" />
-          {this.state.show ? <SearchOption handleChangeValue={handleChangeValue} visible={true}>
+          {this.state.show ? <SearchOption windowHeight={windowHeight} height={280} pageTop={pageTop} handleChangeValue={handleChangeValue} visible={true}>
             {list && list.length>0?this.getSearchList(list):(inspectVal == ''?'':<p style={{padding:'5px 30px',color:'#bfbfbf'}}>暂无筛选项</p>)}
             {
               list && list.length>0 || (inspectVal != '')?'':<div>

src/components/AssistCheck/index.jsx

@@ -10,7 +10,7 @@ class AssistCheck extends React.Component {
     }
 
     render(){
-        const {list,getInfomation,assistLabel,assistVal,handleChangeValue,handleSign,fetchPushInfos,handleDelAssist,handleChangeAssistValue,handleChangeDate,isRead,winWidth,assistList} = this.props;
+        const {list,getInfomation,windowHeight,assistLabel,assistVal,handleChangeValue,handleSign,fetchPushInfos,handleDelAssist,handleChangeAssistValue,handleChangeDate,isRead,winWidth,assistList} = this.props;
         return (
             <div className={styles.wrapper}>
                 <div className={styles.top}>
@@ -39,6 +39,7 @@ class AssistCheck extends React.Component {
                             getInfomation={getInfomation}
                             assistList={assistList}
                             assistVal={assistVal}
+                            windowHeight={windowHeight}
                         >
 
                         </AddAssistCheck>

src/components/DiagResultSearch/index.jsx

@@ -3,67 +3,67 @@ import style from './index.less';
 import close from './img/close.png'
 import search from './img/search.png'
 import DiagnosticItem from '@containers/DiagnosticItem'
-import { SearchOption} from '@commonComp';
+import { SearchOption } from '@commonComp';
 import config from '@config/index';
 import $ from 'jquery';
 class DiagResultSearch extends Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-           
-        };
-      
-        this.getSearchList =  this.getSearchList.bind(this)
+  constructor(props) {
+    super(props);
+    this.state = {
 
-    }
-    componentWillReceiveProps(nextProps){
-    }
-    componentDidMount () {
-        const that = this
-        $(document).click(function (e) {
-            var diagSearch=$('#diagSearch')[0];
-            var addDiag = $('#addDiag')[0];
-            var confirm = $('#confirm')[0];
-            if(diagSearch) {
-                if(confirm) {
-                    
-                } else {
-                    if (e.target!= diagSearch && e.target!= addDiag && e.target.parentNode!= addDiag && !$.contains(diagSearch, e.target) ) {
-                        that.props.hideSearch();
-                    }
+    };
 
+    this.getSearchList = this.getSearchList.bind(this)
+
+  }
+  componentWillReceiveProps(nextProps) {
+  }
+  componentDidMount() {
+    const that = this
+    $(document).click(function (e) {
+      var diagSearch = $('#diagSearch')[0];
+      var addDiag = $('#addDiag')[0];
+      var confirm = $('#confirm')[0];
+      if (diagSearch) {
+        if (confirm) {
+
+        } else {
+          if (e.target != diagSearch && e.target != addDiag && e.target.parentNode != addDiag && !$.contains(diagSearch, e.target)) {
+            that.props.hideSearch();
+          }
 
-                }
-                
-            }
-            
-        })
-    }
 
-    getSearchList(searchResult) {
-        return <div className={style['search-result']}>
-                    
-        {
-            searchResult && searchResult.map((item) => {
-                return(<div  key={item.id} className={style['search-result-item']}><DiagnosticItem title={true} item={item} clearInput={this.clearInput}/></div>)
-            })
         }
+
+      }
+
+    })
+  }
+
+  getSearchList(searchResult) {
+    return <div className={style['search-result']}>
+
+      {
+        searchResult && searchResult.map((item) => {
+          return (<div key={item.id} className={style['search-result-item']}><DiagnosticItem title={true} item={item} clearInput={this.clearInput} /></div>)
+        })
+      }
     </div>
-    }
-   
-    render(){
-        const  { show, searchResult, getSearchResult, handleChangeValue } = this.props
-       
-        return(
-            show&&<div id='diagSearch' className={style['search-box']}>
-                <SearchOption handleChangeValue={handleChangeValue} visible={true}>
-                    {this.getSearchList(searchResult)}
-                </SearchOption>
-            </div>
-        )
-       
-       
-    }
+  }
+
+  render() {
+    const { show, searchResult, getSearchResult, handleChangeValue,pageTop,windowHeight } = this.props
+
+    return (
+      show && <div id='diagSearch' className={style['search-box']}>
+        <SearchOption handleChangeValue={handleChangeValue} pageTop={pageTop} windowHeight={windowHeight} height={180} visible={true}>
+          {this.getSearchList(searchResult)}
+        </SearchOption>
+      </div>
+    )
+
+
+  }
 }
 
 export default DiagResultSearch;

src/components/Diagnosis/index.jsx

@@ -1,60 +1,63 @@
 import React, { Component } from 'react';
 import style from './index.less';
-import {Button, ItemBox, ConfirmModal, Loading, Message,Add} from '@commonComp';
+import { Button, ItemBox, ConfirmModal, Loading, Message, Add } from '@commonComp';
 import DiagnosticList from '@containers/DiagnosticList.js';
 // import TreatDrug from '@containers/TreatDrug.js'
+import { getPageCoordinate } from '@utils/tools';
 import DiagResultSearch from '@containers/DiagResultSearch'
 import $ from 'jquery';
 
 class Diagnosis extends Component {
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            diagType: 0,
-            showSearch: props.show,
-        }
-        this.showSearch = this.showSearch.bind(this);
-        this.hideSearch = this.hideSearch.bind(this);
-        this.handleshowSearch = this.handleshowSearch.bind(this);
-        
-    }
-    componentWillReceiveProps() {
-        this.setState({
-            showSearch: this.props.show
-        })
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      diagType: 0,
+      showSearch: props.show,
+      pageTop: ''
     }
+    this.showSearch = this.showSearch.bind(this);
+    this.hideSearch = this.hideSearch.bind(this);
+    this.handleshowSearch = this.handleshowSearch.bind(this);
 
+  }
+  componentWillReceiveProps() {
+    this.setState({
+      showSearch: this.props.show
+    })
+  }
 
-    showSearch() {
-        const { showSearch } = this.props
-        showSearch && showSearch()
-    }
-    hideSearch() {
-        const { hideSearch } = this.props
-        hideSearch && hideSearch()
-    }
-    handleshowSearch() {
-        this.props.show ? this.hideSearch() : this.showSearch()
-    }
 
-    render() {
-        
-        
-        return (<div id="diagnosisResult">
-            <ItemBox  id="diagnosis" title='诊断'  boxHeight='auto' titleTop='22px' marginTop='9px' backgroundColor='#EAF7FD'>
-                <DiagnosticList></DiagnosticList>
-                <div style={{marginLeft:'10px', position:'relative'}}>
-                    <Add showText="添加诊断结果" handleClick={this.handleshowSearch} id="addDiag" height="50px"/>
-                    <DiagResultSearch></DiagResultSearch>
-                </div>
-               
-                
-            </ItemBox>
-            {/* <TreatDrug></TreatDrug> */}
-            <Message></Message>
-        </div>)
-    }
+  showSearch() {
+    const { showSearch } = this.props
+    showSearch && showSearch()
+  }
+  hideSearch() {
+    const { hideSearch } = this.props
+    hideSearch && hideSearch()
+  }
+  handleshowSearch(e) {
+    this.props.show ? this.hideSearch() : this.showSearch()
+    this.setState({ pageTop:getPageCoordinate(e).boxTop })
+  }
+
+  render() {
+
+
+    return (<div id="diagnosisResult">
+      <ItemBox id="diagnosis" title='诊断' boxHeight='auto' titleTop='22px' marginTop='9px' backgroundColor='#EAF7FD'>
+        <DiagnosticList></DiagnosticList>
+        <div style={{ marginLeft: '10px', position: 'relative' }}>
+          <Add showText="添加诊断结果" handleClick={this.handleshowSearch} id="addDiag" height="50px" />
+          <DiagResultSearch windowHeight={this.props.windowHeight} pageTop={this.state.pageTop} height={150}></DiagResultSearch>
+        </div>
+
+
+      </ItemBox>
+      {/* <TreatDrug></TreatDrug> */}
+      <Message></Message>
+    </div>)
+  }
 }
 
 export default Diagnosis;

src/components/Inspect/index.jsx

@@ -147,7 +147,7 @@ class Inspect extends React.Component {
         </ul>
     }
     render() {
-        const {fetchPushInfos,getInfomation,inspectVal, handleCloseExcel, handleChangeValue, labelListActive, list, handleSign, labelList, handleLabelSub, handleClear, handleConfirm, fillActive, changeActivePart, getExcelDataList,delPartItem,inspectList } = this.props;
+        const {fetchPushInfos,getInfomation,inspectVal,windowHeight, handleCloseExcel, handleChangeValue, labelListActive, list, handleSign, labelList, handleLabelSub, handleClear, handleConfirm, fillActive, changeActivePart, getExcelDataList,delPartItem,inspectList } = this.props;
         const {ieVersion,isIE} = this.state;
         return (
             <div className={styles.wrapper} >
@@ -186,6 +186,7 @@ class Inspect extends React.Component {
                             inspectList={inspectList}
                             getInfomation={getInfomation}
                             inspectVal={inspectVal}
+                            windowHeight={windowHeight}
                         >
                         </AddInspect>
                     </div>

src/components/SpreadDrop/index.jsx

@@ -56,6 +56,7 @@ class SpreadDrop extends Component{
   }
   handleShow(e){//单击
     e&&e.stopPropagation();
+    const {ikey,handleShow,placeholder,flag,id,value,tagType,type,data,windowWidth} = this.props;
     // let boxLeft = e.pageX -175 + 'px';
     // let offsetTop = e.target.offsetTop;
     // const ht = e.target.offsetHeight;   //如杂音选中文字有多行时，写死会遮挡
@@ -64,8 +65,19 @@ class SpreadDrop extends Component{
     //   boxLeft:boxLeft,
     //   boxTop:boxTop
     // })
+    let num = 0,leftLen;//判断为五类切超出页面
+    data && data.map((item)=>{
+      if(item.formPosition != 1){
+        ++num
+      }
+    })
+    if(num >= 5 && windowWidth-getPageCoordinate(e).boxLeft < 760){
+      leftLen = windowWidth-780
+    }else{
+      leftLen = getPageCoordinate(e).boxLeft
+    }
     this.setState({
-      boxLeft:getPageCoordinate(e).boxLeft,
+      boxLeft:leftLen,
       boxTop:getPageCoordinate(e).boxTop,
       tmpScroll: $("#addScrollEvent")[0].scrollTop,
       tmpTop:getPageCoordinate(e).boxTop
@@ -78,7 +90,6 @@ class SpreadDrop extends Component{
     },$("#addScrollEvent")[0])
     // window.event? window.event.cancelBubble = true : e.stopPropagation();
      this.setStateInit();      //恢复初始选中状态
-    const {ikey,handleShow,placeholder,flag,id,value,tagType,type} = this.props;
     const that = this;
     this.btnClickFlag = false;
     clearTimeout(this.state.timer);

src/containers/AssistCheck.js

@@ -16,6 +16,7 @@ function mapStateToProps(state) {
         winWidth:state.homePage.windowWidth,
         assistList:state.homePage.assistList,
         assistVal:state.assistCheck.assistVal,
+        windowHeight:state.homePage.windowHeight
     }
 }
 

src/containers/Diagnosis.js

@@ -6,6 +6,7 @@ import { SHOW_SEARCH,  HIDE_SEARCH } from '@store/types/diagnosticSearch';
 function mapStateToProps(state) {
     return {
         show: state.diagnosticSearch.show,
+        windowHeight:state.homePage.windowHeight
     }
 }
 

src/containers/Inspect.js

@@ -12,6 +12,7 @@ function mapStateToProps(state) {//console.log(state)
         getExcelDataList:state.inspect.getExcelDataList,
         labelListActive:state.inspect.labelListActive,
         inspectList:state.homePage.inspectList,
+        windowHeight:state.homePage.windowHeight,
         inspectVal:state.inspect.inspectVal
     }
 }

src/containers/SpreadDrop.js

@@ -19,6 +19,7 @@ function mapStateToProps(state) {//console.log(state);
   return {
     mainSaveText:state.mainSuit.saveText,
     mainData:state.mainSuit.data,
+    windowWidth:state.homePage.windowWidth
   }
 }