查体展开收起

src/components/CheckBody/index.jsx

@@ -5,6 +5,9 @@ import chooseType from '@containers/eleType.js';
 import SearchDrop from '@components/SearchDrop';
 import {getPageCoordinate,windowEventHandler,isIE} from '@utils/tools';
 import $ from "jquery";
+import showImg from "../../common/images/show.png";
+import hideImg from "../../common/images/close.png";
+import config from '@config/index';
 
 class CheckBody extends Component{
   constructor(props){
@@ -15,18 +18,21 @@ class CheckBody extends Component{
       boxTop:0,
       tmpScroll:0,
       tmpTop:0,
+      showAll:false
     };
     this.handleClick = this.handleClick.bind(this);
     this.handleSearchSelect = this.handleSearchSelect.bind(this);
     this.getData = this.getData.bind(this);
+    this.showHide = this.showHide.bind(this);
     //this.handleInput = this.handleInput.bind(this);
   }
   getLabels(){
     const {data,showArr,saveText,selecteds} = this.props;
     let arr = [],list=[];
-    const {boxMark} = this.state;
-    if(data){
-      list = data;
+    const {boxMark,showAll} = this.state;
+    const showData = showAll?[...data]:[...data].splice(0,config.showCheckNum*2+1);
+    if(showData){
+      list = showData;
       arr = list.map((it,i)=>{
         return chooseType({item:it,boxMark,i,showArr,saveText,selecteds});
       });
@@ -53,9 +59,7 @@ class CheckBody extends Component{
       }
       leftL = ele.offsetLeft+90
     }
-    // console.log(leftL,getPageCoordinate(e).boxLeft)
     this.setState({
-      // boxLeft:getPageCoordinate(e).boxLeft,
       boxLeft:leftL,
       boxTop:getPageCoordinate(e).boxTop,
       tmpScroll: $("#addScrollEvent")[0].scrollTop,
@@ -83,12 +87,19 @@ class CheckBody extends Component{
       this.props.getInit();
     }
   }
+  showHide(){
+    this.setState({
+      showAll:!this.state.showAll
+    });
+  }
   render(){
     const {searchData,totalHide,data} = this.props;
-    const {boxLeft,boxTop,boxMark} = this.state;
+    const {boxLeft,boxTop,showAll} = this.state;
+    const more = showAll?<span className={style['more']} onClick={this.showHide}>收起<img src={hideImg} /></span>:<span className={style['more']} onClick={this.showHide}>展开<img src={showImg} /></span>
     return  <div className={style['container']}>
       <ItemBox title='查体' handleClick={this.handleClick}>
         {this.getLabels()}
+        {data.length>1?more:''}
         {searchData && searchData.length>0?<SearchDrop data={searchData} show={!totalHide} left={boxLeft} top={boxTop} onSelect={this.handleSearchSelect}></SearchDrop>:''}
       </ItemBox>
     </div>

src/components/CheckBody/index.less

@@ -0,0 +1,11 @@
+@import "~@less/variables.less";
+.more{
+  color:@blue;
+  font-size: 12px;
+  cursor: pointer;
+  white-space: nowrap;
+  img{
+    vertical-align: text-top;
+    width: 15px;
+  }
+}

src/config/index.js

@@ -42,5 +42,6 @@ export default {
       year:"年",
       age:"岁",
     },
+    showCheckNum:16,        //查体默认展开非自由文本标签的个数
     Params
 };