index.jsx 9.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289
  1. import React,{Component} from 'react';
  2. import style from './index.less';
  3. import {ItemBox,Textarea,Notify,TailInlineTag} from '@commonComp';
  4. import SearchDrop from '@components/SearchDrop';
  5. import CommonSymptom from '@components/CommonSymptom';
  6. import chooseType from '@containers/eleType.js';
  7. import config from "@config/index";
  8. import {isIE,getPageCoordinate,windowEventHandler,filterDataArr,getAllDataList,getAllDataStringList,ifOtherClear} from "@utils/tools.js";
  9. import store from '@store';
  10. import {getFeature} from '@store/async-actions/fetchModules';
  11. class MainSuit extends Component{
  12. constructor(props){
  13. super(props);
  14. this.state = {
  15. boxEditable:true,
  16. boxLeft:null,
  17. boxTop:null,
  18. symptom:false,
  19. timer:null,
  20. inpText:'',
  21. clearTimer:null,
  22. overFlag:false,
  23. };
  24. this.toggleEditable = this.toggleEditable.bind(this);
  25. this.handleFocus = this.handleFocus.bind(this);
  26. this.handleSelect = this.handleSelect.bind(this);
  27. this.handleSearchSelect = this.handleSearchSelect.bind(this);
  28. this.handleChange = this.handleChange.bind(this);
  29. this.handleClick = this.handleClick.bind(this);
  30. this.handleBlur = this.handleBlur.bind(this);
  31. }
  32. toggleEditable(){
  33. this.setState({
  34. boxEditable:!this.state.boxEditable
  35. })
  36. }
  37. getInlineTag(){
  38. const {datas,showArr,handleTailClick,selecteds,saveText,mainIds,allModules} = this.props;
  39. const boxMark = '1';
  40. let list = datas&&datas.map((item,i)=>{
  41. if(item.flag && item.flag==3){
  42. return <TailInlineTag {...item} showText={item.relationModuleName} handleTailClick={(obj)=>{handleTailClick(obj,saveText,allModules)}}></TailInlineTag>
  43. }else {
  44. return chooseType({item,boxMark,i,hideTag:false,showArr,selecteds,saveText,mainIds});
  45. }
  46. })
  47. return list;
  48. }
  49. handleFocus(e){
  50. e.stopPropagation();
  51. const {getCommonSymptoms,datas,clearDiagnose} = this.props;
  52. let innerText = e.target.innerText || e.target.innerHTML;//兼容火狐43
  53. clearDiagnose&&clearDiagnose();//清除复诊数据
  54. if(!isIE()){//IE会触发onfocus和onblur事件
  55. if(!innerText.trim()){//有内容就走搜索接口
  56. getCommonSymptoms && getCommonSymptoms();
  57. this.setState({
  58. symptom:true,
  59. inpText:innerText
  60. })
  61. }else{
  62. this.setState({
  63. symptom:false,
  64. inpText:innerText
  65. })
  66. }
  67. }else{
  68. if(datas.length==0 && !innerText.trim()){
  69. getCommonSymptoms && getCommonSymptoms();
  70. this.setState({
  71. symptom:true
  72. })
  73. }
  74. }
  75. }
  76. handleSelect(item){//选中的常见症状
  77. if(item.select.length>0){
  78. const {clearCommS,insertMain,getData} = this.props;
  79. // 获取主诉模板
  80. getData && getData();
  81. // 让模板出现
  82. this.setState({
  83. symptom: false,
  84. })
  85. //选中后清空下拉结果
  86. insertMain && insertMain(item);
  87. clearCommS && clearCommS();
  88. }else{//没有选中点确定-关闭
  89. this.setState({
  90. symptom: false
  91. })
  92. }
  93. }
  94. handleSearchSelect(item){
  95. const {clearSearch,insertSearch,datas,span,saveText} = this.props;
  96. let mainText = filterDataArr(saveText);//主诉字数
  97. const itemL = item.name.length;
  98. let lengths = mainText.length + itemL;
  99. if(lengths>config.limited){
  100. Notify.info(config.limitText);
  101. clearSearch && clearSearch();
  102. return
  103. }
  104. if(datas.length==0){//没有使用模板时点击搜索结构要展开模板
  105. insertSearch &&insertSearch({item,span});
  106. this.setState({
  107. search: false,
  108. inpText:''
  109. })
  110. }else{
  111. insertSearch &&insertSearch({item,span});
  112. this.setState({
  113. search: false,
  114. })
  115. }
  116. // 清空搜索结果
  117. clearSearch && clearSearch();
  118. }
  119. handleClick(e){
  120. // e.stopPropagation(); //冒泡到最顶层关闭其他下拉
  121. //搜索框位置
  122. const ele = document.activeElement;
  123. const height = ele.offsetHeight;
  124. let boxTop = (+(ele.offsetTop)+height);
  125. let boxLeft = ele.offsetLeft;
  126. this.setState({
  127. boxLeft:boxLeft,
  128. boxTop:boxTop
  129. });
  130. }
  131. handleChange(e){
  132. const ev = e || window.event;
  133. const data = ev.target.innerText || ev.target.innerHTML;
  134. const {getSearchData,searchData,datas,pushMessage,reTotalHide,saveText} = this.props;
  135. const {overFlag,inpText} = this.state;
  136. reTotalHide && reTotalHide();//重置homePage中的控制项
  137. const that = this;
  138. if(data&&data.length > config.limited){
  139. Notify.info(config.limitText);
  140. if(overFlag){
  141. ev.target.innerText?(ev.target.innerText = inpText) : (ev.target.innerHTML = inpText);
  142. ev.target.blur();
  143. return
  144. }
  145. ev.target.innerText?(ev.target.innerText = data.substr(0,config.limited)):(ev.target.innerHTML = data.substr(0,config.limited)); //输入法内输入多个字再按enter的情况
  146. ev.target.blur();
  147. this.setState({
  148. inpText:data.substr(0,config.limited),
  149. overFlag:true
  150. })
  151. return false;
  152. }
  153. this.setState({
  154. inpText:data,
  155. overFlag:false
  156. })
  157. if(datas && datas.length > 0){//使用模板
  158. return false;
  159. }
  160. // 有输入内容或搜索结果时关闭,否则显示
  161. if(data && data.trim()||searchData.length>0){
  162. this.setState({
  163. symptom:false
  164. })
  165. }else{
  166. this.setState({
  167. symptom:true
  168. })
  169. }
  170. clearTimeout(this.state.timer);
  171. const timer = setTimeout(function(){
  172. pushMessage && pushMessage(data);
  173. //调搜索接口 使用模板走EditableSpan里的搜索方法
  174. getSearchData && getSearchData({inpStr:data,boxMark:1,itemType:0});
  175. },config.delayTime);
  176. this.setState({
  177. timer
  178. });
  179. }
  180. //除主诉外 其他是否为空
  181. ifClear(){
  182. let baseList = store.getState();
  183. let jsonData = getAllDataList(baseList);
  184. let jsonStr = getAllDataStringList(baseList);
  185. let flg = ifOtherClear(jsonData,jsonStr,baseList);
  186. return flg;
  187. }
  188. handleBlur(e){//隐藏常见症状下拉、存自由输入的值
  189. const {freeText,saveText,datas,clearSearch,getSymptomFeature,currentData,saveChronic} = this.props;
  190. const that = this;
  191. let data = this.state.inpText;
  192. const inner = e.target.innerText;
  193. //分词-现病史没有模板的时候才去获取
  194. if(inner.trim() && currentData&&currentData.length==0){
  195. getFeature(inner).then((res)=>{
  196. if(res.data.code==0){
  197. const result = res.data.data;
  198. // 慢病
  199. if(result && result[0].chronicLabel==1){
  200. let flg = this.ifClear();
  201. if(!flg){
  202. saveChronic && saveChronic(result[0]);
  203. }
  204. }else{
  205. getSymptomFeature && getSymptomFeature(result);
  206. }
  207. }
  208. })
  209. }
  210. if(!isIE()){
  211. inner?(e.target.innerText=""):(e.target.innerHTML="")
  212. freeText && freeText(data.trim());
  213. // 慢病模板获取:精确匹配"糖尿病复诊",储存慢病字段
  214. /*let flg = this.ifClear();
  215. if((data.trim()=='糖尿病复诊'||data.trim()=='糖尿病(复诊)'||data.trim()=='糖尿病(复诊)') && !flg){
  216. saveChronic && saveChronic({name:'糖尿病',conceptId:21773});
  217. }*/
  218. }else{
  219. if(datas.length==0){
  220. const ev = e || window.event;
  221. const data = ev.target.innerText;
  222. // freeText && freeText(data.trim());
  223. freeText && freeText(data);
  224. }
  225. }
  226. // 延时关闭常见症状下拉、清空搜索结果,不延时会影响选中
  227. const clearTimer = setTimeout(function(){
  228. clearSearch && clearSearch();
  229. clearTimeout(clearTimer);
  230. },config.delayTime-200);
  231. }
  232. /*componentWillReceiveProps(nextProps){ //主诉高度变化不会出现滚动内容看不见的情况,因为已经是最顶部,所以可以不必更新滚动条
  233. const contHeightDiff = nextProps.data&&this.props.data&&nextProps.data.length!==this.props.data.length;
  234. const dataDiff = !!nextProps.data!==!!this.props.data;
  235. if(contHeightDiff||dataDiff){
  236. this.context.scrollArea.refresh();
  237. }
  238. }*/
  239. render(){
  240. const {saveChronic,readMode,type,CommonSymptoms,searchData,fetchPushInfos,isRead,totalHide,handleInput,fuzhen,saveText,editClear,datas,commSymHide} = this.props;
  241. const {symptom,boxLeft,boxTop} = this.state;
  242. const symptomFlag = CommonSymptoms.length>0 ? true : false;
  243. const searchFlag = searchData.length>0 ? true : false;
  244. const boxTop1 = datas.length>0?boxTop:45;
  245. const boxLeft1 = datas.length>0?boxLeft:85;
  246. const mode = readMode===null||readMode===-1?type:readMode;
  247. if(+mode===1){ //文本模式
  248. return <Textarea title='主诉' boxMark='1' saveChronic={saveChronic} isRead={isRead} value={saveText[0]} handlePush={fetchPushInfos} handleInput={handleInput} />;
  249. }
  250. return <div className={style['main-suit']}>
  251. <ItemBox
  252. fuzhen={fuzhen}
  253. title='主诉'
  254. editable={editClear||datas.length==0?true:false}
  255. boxLineHeight="24px"
  256. handleFocus={this.handleFocus}
  257. onchange={this.handleChange}
  258. handleClick={this.handleClick}
  259. handleBlur={this.handleBlur}
  260. data={datas}
  261. boxId="mainSuit">
  262. {datas.length>0?<div style={{display:'inline-block'}}>{this.getInlineTag()}</div>:(saveText[0]?saveText[0]:'')}
  263. </ItemBox>
  264. {/*没有推送结果就不显示*/}
  265. {symptomFlag && !searchFlag ? <CommonSymptom data={CommonSymptoms} show={!totalHide&&symptom} onSelect={this.handleSelect} /> : ( searchFlag ? <SearchDrop data={searchData} show={!commSymHide} onSelect={this.handleSearchSelect} left={boxLeft1} top={boxTop1} mainEmpty={datas.length==0?true:false}/>:"")}
  266. </div>
  267. }
  268. }
  269. /*MainSuit.contextTypes = {
  270. scrollArea: React.PropTypes.object
  271. };*/
  272. export default MainSuit;