newICSS/src/components/CheckBody/index.jsx

import React,{Component} from 'react';
import style from './index.less';
import {Button,InlineTag,ItemBox,EditableSpan,Notify} from '@commonComp';
import chooseType from '@containers/eleType.js';
import SearchDrop from '@components/SearchDrop';

class CheckBody extends Component{
  constructor(props){
    super(props);
    this.state={
      boxMark:'4',
      boxLeft:'0px',
      boxTop:'0px'
    };
    this.handleClick = this.handleClick.bind(this);
    this.handleSearchSelect = this.handleSearchSelect.bind(this);
    this.getData = this.getData.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;
      arr = list.map((it,i)=>{
        return chooseType({item:it,boxMark,i,showArr,saveText,selecteds});
      });
    }

    return arr;
  }
  handleClick(e){//让搜索框跟随鼠标点击移动
    //e.stopPropagation();
    const {fetchPushInfos,totalHide} = this.props;
    //fetchPushInfos&&fetchPushInfos();
    this.getData();
    if(totalHide){
      return ;
    }
    let boxLeft = e.pageX -102 + 'px';
    let boxTop =  (+e.target.offsetTop+22)+'px';
    this.setState({
      boxLeft:boxLeft,
      boxTop:boxTop
    });
  }
  handleSearchSelect(obj){
   const {questionId,name} = obj;
   const {fetchModules,focusTextIndex,span} = this.props;//console.log(focusTextIndex)
    fetchModules&&fetchModules({id:questionId,index:focusTextIndex,name,span});
  }
  getData(){
    //第一次聚焦查体时，主诉有数据则调接口，主诉无数据则显示提示；其他时间查体模板数据不调接口
    const {hasMain,saveText,data,fetchPushInfos} = this.props;
    const hasData = saveText.join("")||data.length>0;

    if(hasData){
      return ;
    }
    if(hasMain){
      this.props.getInit();
    }else{
      Notify.error("无法操作，请先输入主诉");
    }

  }
  handleInput(e){  //主诉未填无法输入
    if(!this.props.hasMain){
      e.target.innerText='';
    }
  }
  render(){
    const {searchData,totalHide,data} = this.props;
    const {boxLeft,boxTop,boxMark} = this.state;
    return  <div className={style['container']}>
      <ItemBox title='查体' editable={!data.length}  handleClick={this.handleClick} onchange={this.handleInput}>
        {this.getLabels()}
        {searchData && searchData.length>0?<SearchDrop data={searchData} show={!totalHide} left={boxLeft} top={boxTop} onSelect={this.handleSearchSelect}></SearchDrop>:''}
      </ItemBox>
    </div>
  }
}

export default CheckBody;