Ver código fonte

化验辅捡诊断弹窗可滚动优化2168

zhouna 5 anos atrás
pai
commit
68e2eb861a

+ 19 - 3
src/components/AddAssistCheck/index.jsx

@@ -102,7 +102,23 @@ class AddAssistCheck extends React.Component {
 
   getSearchList(list) {      //搜索列表
     const { handleSign } = this.props;
-    return <ul className={styles.searchLiUl}>
+    const contStyle={
+      opacity:'0.4',
+      right:'0',
+      top:'1px',
+      zIndex:'15',
+      width:'14px',
+      background:'#f1f1f1'};
+    const barStyle={background:'#777',width:'100%'};
+    return <ScrollArea speed={0.8}
+                       horizontal={false}
+                       stopScrollPropagation={list.length>6?true:false}
+                       style={{height:'225px'}}
+                       className={styles["area"]}
+                       verticalContainerStyle={contStyle}
+                       verticalScrollbarStyle={barStyle}
+                       contentClassName="content">
+      <ul className={styles.searchLiUl}>
       {
         list && list.map((item, idx) => {
           return <li key={item.id}
@@ -117,7 +133,7 @@ class AddAssistCheck extends React.Component {
           </li>
         })
       }
-    </ul>
+      </ul></ScrollArea>;
   }
   getCommonList() {      //常用列表
     const { handleSign,assistList } = this.props;
@@ -256,7 +272,7 @@ class AddAssistCheck extends React.Component {
                 <p style={{padding:'5px 30px',color:'#bfbfbf'}}>常用辅检项</p>
                 <ScrollArea speed={0.8}
                             horizontal={false}
-                            stopScrollPropagation={true}
+                            stopScrollPropagation={assistList.length>6?true:false}
                             style={{height:'225px'}}
                             className={styles["area"]}
                             verticalContainerStyle={contStyle}

+ 5 - 3
src/components/AddInspect/SlideSelect/index.jsx

@@ -94,7 +94,7 @@ class SlideSelect extends Component {
     })*/
   }
   render() {
-    const {getInfomation,handleConfirm,changeActivePart,handleDelClick,getItemList,date,item,idx,handleFillShow,showDetails,showFill,changeShowFill,handlePush,dateTime,currentIdx,currentData,fillActive,handleShowDate,handleChangeDate,showToast} = this.props;
+    const {windowWidth,getInfomation,handleConfirm,changeActivePart,getItemList,date,item,idx,showDetails,showFill,changeShowFill,handlePush,dateTime,currentIdx,currentData,fillActive,handleShowDate,showToast} = this.props;
     const {show,activeInd,activeName} = this.state;
     let numPlus = 0,numPlus1 = 0;
     let staticTime = {}
@@ -118,6 +118,8 @@ class SlideSelect extends Component {
       width:'14px',
       background:'#f1f1f1'};
     const barStyle={background:'#777',width:'100%'};
+    const listLen = currentData.details&&currentData.details.length;
+    const stopScroll =(windowWidth<1300&&listLen>12)||(windowWidth>1299&&listLen>24);
     return (
       <li key={item.questionId} className={styles.slideLi}> 
         {
@@ -136,7 +138,7 @@ class SlideSelect extends Component {
                 </i>
             </p>
         }
-        
+
         {
           item.details && item.details.map((val)=>{
             if(val.value && val.value != ''){
@@ -233,7 +235,7 @@ class SlideSelect extends Component {
                             {/* 填写单内容显示 */}
                       <ScrollArea speed={0.8}
                                   horizontal={false}
-                                  stopScrollPropagation={true}
+                                  stopScrollPropagation={stopScroll}
                                   style={{maxHeight:'358px'}}
                                   className={styles["area"]}
                                   verticalContainerStyle={contStyle}

+ 20 - 4
src/components/AddInspect/index.jsx

@@ -248,7 +248,23 @@ class Inspect extends React.Component {
   }
   getSearchList(list) {//搜索列表
     const { handleSign } = this.props;
-    return <ul className={styles.searchLiUl}>
+    const contStyle={
+      opacity:'0.4',
+      right:'0',
+      top:'1px',
+      zIndex:'15',
+      width:'14px',
+      background:'#f1f1f1'};
+    const barStyle={background:'#777',width:'100%'};
+    return <ScrollArea speed={0.8}
+                       horizontal={false}
+                       stopScrollPropagation={list.length>6?true:false}
+                       style={{height:'225px'}}
+                       className={styles["area"]}
+                       verticalContainerStyle={contStyle}
+                       verticalScrollbarStyle={barStyle}
+                       contentClassName="content">
+      <ul className={styles.searchLiUl}>
       {
         list && list.map((item, idx) => {
           return <li key={idx}
@@ -263,7 +279,7 @@ class Inspect extends React.Component {
           </li>
         })
       }
-    </ul>
+      </ul></ScrollArea>;
   }
   getCommonList() {//常用列表
     const { handleSign, inspectList } = this.props;
@@ -323,7 +339,7 @@ class Inspect extends React.Component {
     }
   }
   render() {
-    const {setHighter,refreshScroller, getInfomation, handleChangeValue,inspectList, inspectVal, list, labelList, windowHeight, delPartItem, handleLabelSub, handleClear, handleConfirm, fillActive, getExcelDataList, handleCloseExcel, handlePush } = this.props;
+    const {setHighter,refreshScroller, getInfomation, handleChangeValue,inspectList, inspectVal, list, labelList, windowHeight, windowWidth,delPartItem, handleLabelSub, handleClear, handleConfirm, fillActive, getExcelDataList, handleCloseExcel, handlePush } = this.props;
     const { tmpId, tmpIdx, id, pageTop, impId } = this.state;
 
     const contStyle={
@@ -373,7 +389,7 @@ class Inspect extends React.Component {
                   item={item}
                   idx={idx}
                   listDom={this.$ul}
-                  windowHeight={windowHeight}
+                  windowWidth={windowWidth}
                   refreshScroller={refreshScroller}
                   showToast={idx == id ? true : false}
                   showFill={this.state.showFill}

+ 1 - 1
src/components/DiagResultSearch/index.jsx

@@ -66,7 +66,7 @@ class DiagResultSearch extends Component {
         <SearchOption handleChangeValue={handleChangeValue} refreshScroller={refreshScroller} pageTop={pageTop} windowHeight={windowHeight} height={180} visible={true}>
           <ScrollArea speed={0.8}
                       horizontal={false}
-                      stopScrollPropagation={true}
+                      stopScrollPropagation={searchResult.length>6?true:false}
                       style={{height:'225px'}}
                       className={style["area"]}
                       verticalContainerStyle={contStyle}

+ 2 - 1
src/components/Inspect/index.jsx

@@ -207,7 +207,7 @@ class Inspect extends React.Component {
 
   }
   render() {
-    const {setHighter, fetchPushInfos,getInfomation, hospitalMsg, inspectVal, windowHeight, handleCloseExcel, handleChangeValue, labelListActive, list, handleSign, labelList, handleLabelSub, handleClear, handleConfirm, fillActive, changeActivePart, getExcelDataList, delPartItem, inspectList } = this.props;
+    const {setHighter, fetchPushInfos,getInfomation, hospitalMsg, inspectVal, windowHeight, windowWidth, handleCloseExcel, handleChangeValue, labelListActive, list, handleSign, labelList, handleLabelSub, handleClear, handleConfirm, fillActive, changeActivePart, getExcelDataList, delPartItem, inspectList } = this.props;
     const { ieVersion, isIE, hide,importLis } = this.state;
     const { checkSystemIpt, onClose,handleBindFileApi,closeInIcss,showSlideImport } = this;
     if(JSON.stringify(hospitalMsg) != {} && document.getElementById("choose")){//动态绑定只绑定一次
@@ -284,6 +284,7 @@ class Inspect extends React.Component {
               getInfomation={getInfomation}
               inspectVal={inspectVal}
               windowHeight={windowHeight}
+              windowWidth={windowWidth}
             >
             </AddInspect>
           </div>

+ 1 - 0
src/containers/Inspect.js

@@ -30,6 +30,7 @@ function mapStateToProps(state) {//console.log(state)
     labelListActive: state.inspect.labelListActive,
     inspectList: state.homePage.inspectList,
     windowHeight: state.homePage.windowHeight,
+    windowWidth: state.homePage.windowWidth,
     inspectVal: state.inspect.inspectVal,
     message: state.patInfo.message,
     hospitalMsg: state.homePage.sysConfig || {},