import React,{Component} from 'react'; import style from './index.less'; import {Button,InlineTag,ItemBox,DropDown,DropList,Textarea,Notify} from '@commonComp'; import TailInlineTag from '@commonComp/TailInlineTag'; import SearchDrop from '@components/SearchDrop'; import CommonSymptom from '@components/CommonSymptom'; import chooseType from '@containers/eleType.js'; import config from "@config/index"; import {isIE,getPageCoordinate,windowEventHandler} from "@utils/tools.js" import $ from 'jquery'; class MainSuit extends Component{ constructor(props){ super(props); this.state = { boxEditable:true, show:false, showModule:false, inputData:"", boxLeft:null, boxTop:null, selecSearch:"", symptom:false, search:false, timer:null, blurTimer:null, inpText:'', clearTimer:null, overFlag:false, tmpScroll:0, tmpTop:0, }; this.toggleEditable = this.toggleEditable.bind(this); this.handleFocus = this.handleFocus.bind(this); this.handleSelect = this.handleSelect.bind(this); this.handleSearchSelect = this.handleSearchSelect.bind(this); this.handleChange = this.handleChange.bind(this); this.handleClick = this.handleClick.bind(this); this.handleBlur = this.handleBlur.bind(this); } toggleEditable(){ this.setState({ boxEditable:!this.state.boxEditable }) } getInlineTag(){ const {datas,showArr,handleTailClick,selecteds,saveText,addModuleName,mainIds} = this.props; const boxMark = '1'; let list = datas&&datas.map((item,i)=>{ if(item.flag && item.flag==3){ return {handleTailClick(obj,saveText)}}> }else { return chooseType({item,boxMark,i,hideTag:false,showArr,selecteds,saveText,mainIds}); } }) return list; } handleFocus(e){ e.stopPropagation(); const {getCommonSymptoms,datas} = this.props; let innerText = e.target.innerText; if(!isIE()){//IE会触发onfocus和onblur事件 if(!innerText.trim()){//有内容就走搜索接口 getCommonSymptoms && getCommonSymptoms(); this.setState({ symptom:true }) }else{ this.setState({ symptom:false, inpText:innerText }) } }else{ if(datas.length==0 && !innerText.trim()){ getCommonSymptoms && getCommonSymptoms(); this.setState({ symptom:true }) } } } /*handleShow(e,show){ e.stopPropagation(); if(e.target.tagName=="INPUT"){ return ; } }*/ handleSelect(item){//选中的常见症状 const {clearCommS,insertMain,getData} = this.props; // 获取主诉模板 getData && getData(); // 让模板出现 this.setState({ showModule:true, symptom: false, }) //选中后清空下拉结果 insertMain && insertMain(item); clearCommS && clearCommS(); } handleSearchSelect(item){ const {clearSearch,insertSearch,datas,span} = this.props; clearTimeout(this.state.timer); if(datas.length==0){//没有使用模板时点击搜索结构要展开模板 insertSearch &&insertSearch({item,span}); this.setState({ search: false, showModule:true, inpText:'' }) }else{ insertSearch &&insertSearch({item,span}); this.setState({ search: false, }) } // 清空搜索结果 clearSearch && clearSearch(); } handleClick(e){//让搜索框跟随鼠标点击移动 // e.stopPropagation(); //冒泡到最顶层关闭其他下拉 //若使用e.target,因为是onClick事件中,值可能是itembox的而不是span因此会有bug const ele = document.activeElement; // console.log(ele.toString()) if(ele.toString().indexOf('HTMLSpanElement') == -1){ //点击的不是span无法聚焦就不再设置位置 return; } const leftL = ele.offsetLeft; //用焦点元素的左边距替换鼠标点击的左边距,高度还是鼠标点击的位置 this.setState({ // boxLeft:getPageCoordinate(e).boxLeft, boxLeft:leftL+90, boxTop:getPageCoordinate(e).boxTop, tmpScroll: $("#addScrollEvent")[0].scrollTop, tmpTop:getPageCoordinate(e).boxTop }); windowEventHandler('scroll',()=>{ //弹窗跟随滚动条滚动或者关闭弹窗 let scrollYs = $("#addScrollEvent")[0].scrollTop; this.setState({ boxTop:this.state.tmpTop - scrollYs + this.state.tmpScroll }) },$("#addScrollEvent")[0]) } handleChange(e){ const ev = e || window.event; const data = ev.target.innerText; const {getSearchData,searchData,datas,pushMessage,reTotalHide} = this.props; const {overFlag,inpText} = this.state; reTotalHide && reTotalHide();//重置homePage中的控制项 const that = this; if(data&&data.length > config.limited){ Notify.info(config.limitText); if(overFlag){ ev.target.innerText = inpText; ev.target.blur(); return } ev.target.innerText = data.substr(0,config.limited); //输入法内输入多个字再按enter的情况 ev.target.blur(); this.setState({ inpText:data.substr(0,config.limited), overFlag:true }) return false; } this.setState({ inpText:data, overFlag:false }) if(datas && datas.length > 0){//使用模板 return false; } // 有输入内容或搜索结果时关闭,否则显示 if(data && data.trim()||searchData.length>0){ this.setState({ symptom:false }) }else{ this.setState({ symptom:true }) } clearTimeout(this.state.timer); const timer = setTimeout(function(){ pushMessage && pushMessage(data); //调搜索接口 使用模板走EditableSpan里的搜索方法 getSearchData && getSearchData({inpStr:data,boxMark:1}); },config.delayTime); this.setState({ timer }); } handleBlur(e){//隐藏常见症状下拉、存自由输入的值 const {freeText,saveText,datas} = this.props; const that = this; let data = this.state.inpText; if(!isIE()){ e.target.innerText=""; freeText && freeText(data.trim()); }else{ if(datas.length==0){ const ev = e || window.event; const data = ev.target.innerText; // freeText && freeText(data.trim()); freeText && freeText(data); } } // 延时关闭常见症状下拉,不延时会影响选中 clearTimeout(this.state.clearTimer); const clearTimer = setTimeout(function(){ that.setState({ symptom:false }) },config.delayTime-200); this.setState({ clearTimer }); } render(){ const {type,CommonSymptoms,searchData,fetchPushInfos,isRead,totalHide,handleInput,fuzhen,saveText,editClear,datas,commSymHide} = this.props; const {showModule,boxLeft,boxTop,show,symptom,search} = this.state; const symptomFlag = CommonSymptoms.length>0 ? true : false; const searchFlag = searchData.length>0 ? true : false; if(+type===1){ //文本模式 return