index.jsx 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406
  1. import React,{Component} from 'react';
  2. import classNames from 'classnames';
  3. import config from '@config/index.js';
  4. import style from './index.less';
  5. import {setPosition,deepClone,handleEnter,isIE,windowEventHandler,filterDataArr,getIds,getPageCoordinate} from '@utils/tools.js';
  6. import {Notify} from '@commonComp';
  7. import ListItems from '@components/ListItems';
  8. import $ from 'jquery';
  9. /****
  10. * 标签组合下拉,选中的项目展开
  11. * author:zn@2018-11-21
  12. * 接收参数:
  13. * data:下拉内容
  14. * value:选中成文
  15. * placeholder:灰显文字
  16. * ikey:当前标签的index
  17. * copyType:选中后是否复制本身(仅展开类型使用)
  18. * data.selecteds:选中选项(仅展开类型使用)
  19. * show:是否显示下拉
  20. * order:成文顺序,0点选顺序,1从上到下从左到右
  21. * isImports:是否高亮显示(仅查体中使用)
  22. * type:所在模块:现病史、查体等
  23. * tagType:标签类型
  24. * id:id
  25. * flag:仅主诉中使用
  26. * isExtBlue:是否为查体生命体征标签蓝色显示
  27. *
  28. * ***/
  29. class SpreadDrop extends Component{
  30. constructor(props){
  31. super(props);
  32. const {nones,noneOn,noneIds,withOn,exists,nowOn,withs,exclusion,excluName} = deepClone(props.selecteds||[]);
  33. const initEx = this.getInitExclu();
  34. this.state = {
  35. nones:nones||'', //无,字符串拼接
  36. exists:exists||[], //主症状id
  37. excluName:excluName||initEx.excName,
  38. withs:withs||[], //伴随 id
  39. noneIds:noneIds||[],
  40. noneOn:noneOn||false, //无是否选中
  41. withOn:withOn||false, //伴是否选中
  42. nowOn:nowOn||'', //最近选中“无”还是“伴”
  43. exclusion:exclusion||initEx.excluId, //选中互斥项id
  44. timer:null, //延时,区分单击双击
  45. ban:{}, //放'伴'字段
  46. editable:false, //双击编辑
  47. labelVal:'', //存放标签原有的值--主诉字数限制用
  48. left:'auto',
  49. tmpDom:null
  50. };
  51. this.$div = React.createRef();
  52. this.$list = React.createRef();
  53. this.handleSelect = this.handleSelect.bind(this);
  54. this.clearState = this.clearState.bind(this);
  55. this.handleClear = this.handleClear.bind(this);
  56. this.handleShow = this.handleShow.bind(this);
  57. this.handleConfirm = this.handleConfirm.bind(this);
  58. this.changeToEdit = this.changeToEdit.bind(this);
  59. this.handleBlur = this.handleBlur.bind(this);
  60. this.onChange = this.onChange.bind(this);
  61. /*是否点击确定按钮标记,处理点击其他等同于确定操作bug,
  62. 如不区分确定按钮提交和点击其他提交,确定按钮提交后会多更新一次状态导致数据重复*/
  63. this.btnClickFlag = false;
  64. }
  65. handleShow(e){//单击
  66. e&&e.stopPropagation();
  67. const {ikey,handleShow,placeholder,flag,id,value,tagType,type,data,windowWidth,setHighter} = this.props;
  68. let num = 0;//判断为五类切超出页面
  69. data && data.map((item)=>{
  70. if(item.formPosition != 1){
  71. ++num
  72. }
  73. });
  74. const listWidth = 30+$(this.$list.current).width();
  75. const wleft = getPageCoordinate(e).boxLeft;
  76. if(num >= 4 && windowWidth-wleft < listWidth){
  77. this.setState({
  78. left:windowWidth-wleft-listWidth-50
  79. })
  80. }else{
  81. this.setState({
  82. left:'auto'
  83. })
  84. }
  85. //高度超出时,增加左侧大容器padding
  86. setPosition(e,this.$list.current,setHighter);
  87. // window.event? window.event.cancelBubble = true : e.stopPropagation();
  88. this.setStateInit(); //恢复初始选中状态
  89. const that = this;
  90. this.btnClickFlag = false;
  91. clearTimeout(this.state.timer);
  92. this.state.timer = setTimeout(()=>{
  93. if (that.state.editable) {//如果处于编辑状态点击不显示下拉框
  94. return
  95. }else{
  96. document.activeElement.blur()//chrome41有效,但是失去焦点的span仍能编辑
  97. $(e.target).parent().prev().attr({"contentEditable":false})
  98. this.setState({
  99. tmpDom:e.target
  100. })
  101. handleShow&&handleShow({ikey,placeholder,flag,id,value,tagType,type});
  102. }
  103. },300)
  104. }
  105. changeToEdit(e){//双击
  106. window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
  107. const {value,id,placeholder,handleDbclick,handleHide} = this.props;
  108. let text = e.target.innerText || e.target.innerHTML;
  109. handleHide&&handleHide(); //展开情况下双击收起
  110. // clearTimeout(this.state.timer);//取消延时的单击事件
  111. e.stopPropagation();
  112. // e.preventDefault();
  113. if(value&&value.trim()){//有选中值的标签才能双击编辑
  114. this.setState({
  115. labelVal:text,
  116. editable:true
  117. });
  118. //失焦关闭编辑状态
  119. setTimeout(()=>{
  120. e.target.focus();
  121. })
  122. handleDbclick && handleDbclick({value,id,placeholder});
  123. }
  124. }
  125. onChange(e){
  126. const {mainSaveText,ikey,type,handleLabelChange} = this.props;
  127. const {labelVal,editable} = this.state;
  128. let mainText = filterDataArr(mainSaveText);//主诉字数
  129. if(editable){//避免IE中点击标签也会触发
  130. let val = e.target.innerText || e.target.innerHTML;
  131. if(+type==1){// 主诉字数达到上限时不允许输入
  132. if(mainText.length >= config.limited){
  133. if(val.length > labelVal.length){
  134. e.target.innerText?(e.target.innerText = labelVal):(e.target.innerHTML = labelVal);
  135. Notify.info(config.limitText);
  136. return
  137. }else if(val.length == labelVal.length){
  138. this.setState({
  139. labelVal:val
  140. });
  141. }else{
  142. handleLabelChange && handleLabelChange({ikey,changeVal:val,type});
  143. }
  144. }
  145. }
  146. }
  147. }
  148. handleBlur(e){
  149. e.stopPropagation();
  150. const {ikey,type,handleLabelChange} = this.props;
  151. const {editable} = this.state;
  152. const ev = e || window.event;
  153. if(editable){
  154. // 更改标签的value值
  155. let changeVal = ev.target.innerText || ev.target.innerHTML;
  156. if(!isIE()){
  157. e.target.innerText?(e.target.innerText = ''):(e.target.innerHTML = ''); //避免出现重复输入值
  158. }
  159. handleLabelChange && handleLabelChange({ikey,changeVal,type});
  160. }
  161. this.setState({
  162. editable:false
  163. });
  164. }
  165. getInitExclu(){
  166. const {defaulted,data,value} = this.props;
  167. let excluId = '',excName='';
  168. if(defaulted&&value===undefined){
  169. const it = data[0];
  170. excluId = it.exclusionType===1?it.questionDetailList[0].id:'';
  171. excName = it.exclusionType===1?it.questionDetailList[0].name:'';
  172. }
  173. return {
  174. excluId,
  175. excName
  176. }
  177. }
  178. setStateInit(){
  179. const {nones,noneOn,noneIds,withOn,exists,nowOn,withs,exclusion,excluName,ban} = deepClone(this.props.selecteds||[]);
  180. const initEx = this.getInitExclu();
  181. this.setState({
  182. nones:nones||'',
  183. exists:exists||[],
  184. excluName:excluName||initEx.excName,
  185. withs:withs||[],
  186. noneIds:noneIds||[],
  187. noneOn:noneOn||false,
  188. withOn:withOn||false,
  189. nowOn:nowOn||'',
  190. exclusion:exclusion||initEx.excluId,
  191. ban:ban||{},
  192. });
  193. }
  194. clearState(){
  195. this.setState({
  196. nones:'',
  197. exists:[],
  198. //existsName:{},
  199. //withsName:{},
  200. withs:[],
  201. noneIds:[],
  202. noneOn:false,
  203. withOn:false,
  204. nowOn:'',
  205. exclusion:'',
  206. excluName:'',
  207. ban:{}
  208. });
  209. this.btnClickFlag = false;
  210. }
  211. handleClear(e){
  212. e.stopPropagation();
  213. this.clearState();
  214. }
  215. handleConfirm(e){
  216. // e.stopPropagation();
  217. const {handleConfirm,ikey,type,tagType,order,mainSaveText,copyType,value,mainData} = this.props;
  218. const params = Object.assign({},this.state,{ikey,type,tagType,order,mainSaveText,copyType,value,mainData});
  219. delete params.tmpDom; //避免上面deepClone selecteds报错
  220. handleConfirm&&handleConfirm(params);
  221. this.btnClickFlag = true;
  222. //点确定后隐藏弹窗
  223. this.props.handleHide();
  224. }
  225. handleSelect(item,isExclu,joint,listIndex,selected){
  226. let {withOn,withs,noneOn,exclusion,exists,nowOn,nones,noneIds,ban} = this.state;
  227. const id = item.id;
  228. const linkStr = joint||'';
  229. const name = item.name+linkStr;
  230. if(isExclu){ //操作“互斥项”
  231. if([...noneIds,...exists,...withs].length>0){ //已选非互斥项,清空已选项,选中该互斥项
  232. this.clearState();
  233. this.setState({
  234. exclusion:id,
  235. excluName:name
  236. });
  237. return;
  238. }
  239. //未选中互斥项,直接选中该互斥项
  240. let temp = '';
  241. if(exclusion==''){
  242. temp = id;
  243. }else if(exclusion!=''&&exclusion!==id){
  244. temp = exclusion;
  245. }
  246. this.setState({
  247. exclusion:temp,
  248. excluName:temp ===''?'':name
  249. });
  250. return;
  251. }
  252. //操作单选项
  253. if(selected){
  254. const tIndex= exists.findIndex((it)=>it.questionId===item.questionId);
  255. const bIndex= withs.findIndex((it)=>it.questionId===item.questionId);
  256. if(tIndex!=-1){
  257. exists.splice(tIndex,1,Object.assign({},item,{name})); //修改单选列连接字符不显示bug
  258. this.setState({
  259. exists,
  260. })
  261. }
  262. if(bIndex!=-1){
  263. withs.splice(tIndex,1,item);
  264. this.setState({
  265. withs,
  266. })
  267. }
  268. return;
  269. }
  270. if(exclusion!==''){ //互斥项已选中,清空互斥项
  271. this.setState({
  272. exclusion:'',
  273. excluName:''
  274. });
  275. }
  276. if(+item.code===1){ //操作“伴”类型
  277. this.setState({
  278. withOn:!withOn,
  279. // withs:withOn?[]:[...withs,id], //取消“伴”选中,伴随症状全部取消选中
  280. // withs:withOn?[]:[...withs,{id:item.id,name:name}],
  281. withs:withOn?[]:withs,
  282. ban:withOn?{}:{id:id,name:name,value:name},
  283. //withsName:withOn?"":withsName+name, //取消“伴”选中,伴随症状全部取消选中
  284. nowOn:withOn?(noneOn?'none':''):'with'
  285. });
  286. return;
  287. }
  288. if(+item.code===2){ //操作“无”类型
  289. this.setState({
  290. noneOn:!noneOn,
  291. noneIds:noneOn?[]:[...noneIds,id],
  292. nones:noneOn?'':name,
  293. nowOn:noneOn?(withOn?'with':''):'none'
  294. });
  295. return;
  296. }
  297. //操作普通项
  298. let existsIds = exists.length>0? getIds(exists):[];
  299. let withsIds = withs.length>0? getIds(withs):[];
  300. if(existsIds.includes(id)){
  301. let existsData = exists;
  302. exists.forEach((it,i)=>{
  303. if(it.id==id){
  304. existsData.splice(i,1);
  305. }
  306. })
  307. exists = existsData;
  308. }else if(noneIds.includes(id)){
  309. nones = nones.replace(name+'、','');
  310. noneIds.splice(noneIds.indexOf(id),1);
  311. }else if(withsIds.includes(id)){
  312. let withsData = withs;
  313. withs.forEach((it,i)=>{
  314. if(it.id==id){
  315. withsData.splice(i,1);
  316. }
  317. })
  318. withs = withsData;
  319. }else{ //选中普通项
  320. if(nowOn=='none'){
  321. nones += name+'、';
  322. noneIds.push(id);
  323. }else if(nowOn=='with'){
  324. // withs.push({id:id,name:name,questionId:item.questionId});
  325. withs.push({id:id,name:name,questionId:item.questionId,conceptId:item.conceptId});
  326. }else{
  327. // exists.push({id:id,name:name,listIndex,questionId:item.questionId});
  328. exists.push({id:id,name:name,listIndex,questionId:item.questionId,conceptId:item.conceptId});
  329. }
  330. }
  331. this.setState({
  332. nones,
  333. noneIds,
  334. exists,
  335. withs,
  336. ban
  337. //existsName,
  338. //withsName,
  339. });
  340. }
  341. getClass(){
  342. const {isImports,show,value,isExtBlue} = this.props;
  343. const blueBorder = this.state.editable?style['blue-border']:'';
  344. const orgBorder = isImports&&!value?style['orange-border']:'';
  345. const ext = isExtBlue?style['ext']:'';
  346. if(show){
  347. $(this.$div.current).addClass(style['borderd']);
  348. }else{
  349. $(this.$div.current).removeClass(style['borderd']);
  350. }
  351. if(value){
  352. return classNames(style['selected-tag'],blueBorder);
  353. }
  354. return classNames(style['tag'],orgBorder,ext);
  355. }
  356. componentDidMount(){
  357. if(isIE()){
  358. $(this.$div.current).onIe8Input(function(e){
  359. this.onChange(e)
  360. },this);
  361. }
  362. }
  363. /*componentWillReceiveProps(nextProps){
  364. const {setHighter} = this.props;
  365. if(!nextProps.show){console.log(22)
  366. setHighter&&setHighter(48);
  367. }
  368. }*/
  369. render(){
  370. const {placeholder,value,show,data,order,type,tagType,ikey,pos,defaulted} = this.props;
  371. const {tmpDom,left} = this.state;
  372. const clickIndx = ikey.split('-')[1];//展开下拉的index
  373. if(!show&&tmpDom){
  374. $(tmpDom).parent().prev().attr({"contentEditable":true})
  375. }
  376. const {editable} = this.state;
  377. return <div className={style['container']}
  378. /*onFocus={(e)=>e.stopPropagation()}*/
  379. onBlur={(e)=>e.stopPropagation()}
  380. onInput={(e)=>e.stopPropagation()}>
  381. <div
  382. ref={this.$div}
  383. onClick={this.handleShow}
  384. className={this.getClass()}
  385. contentEditable={editable}
  386. onDoubleClick={this.changeToEdit}
  387. onBlur={this.handleBlur}
  388. onInput={this.onChange}
  389. onkeydown={handleEnter}
  390. >{value||placeholder}</div>
  391. <ListItems parDiv={this.$list} defaulted={defaulted} pos={pos} data={data} order={order} left={left} boxMark={type} tagType={tagType}
  392. show={show} handleSelect={this.handleSelect} handleConfirm={this.handleConfirm} handleClear={this.handleClear} {...this.state}></ListItems>
  393. </div>
  394. }
  395. }
  396. export default SpreadDrop;