index.jsx 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328
  1. import React,{Component} from 'react';
  2. import style from './index.less';
  3. import config from "@config/index";
  4. import {filterArr,isIE,getPageCoordinate,filterDataArr} from '@utils/tools.js';
  5. import Notify from '../Notify/index.js';
  6. import classNames from 'classnames';
  7. import $ from 'jquery';
  8. /*****
  9. * author:zn@2018-12-10
  10. * 自由文本输入组件
  11. * 接收参数:
  12. * value:默认显示文字
  13. * handleChange:输入变化时触发函数,接收以下参数:
  14. * * boxMark:病例项标识
  15. * * i:标签index
  16. * * text:标签内文字
  17. *
  18. * ****/
  19. class EditableSpan extends Component{
  20. constructor(props){
  21. super(props);
  22. this.state={
  23. timer:null,
  24. clearTimer:null,
  25. oldText:props.value,
  26. labelVal:'', //存放标签原有的值--主诉字数限制用
  27. preVal:'',
  28. index:null,
  29. searchPre:'',
  30. };
  31. this.$span = React.createRef();
  32. this.handleFocus = this.handleFocus.bind(this);
  33. this.onChange = this.onChange.bind(this);
  34. this.handleBlur = this.handleBlur.bind(this);
  35. this.handleKeydown = this.handleKeydown.bind(this);
  36. this.handleKeyup = this.handleKeyup.bind(this);
  37. this.moveEnd = this.moveEnd.bind(this);
  38. }
  39. handleFocus(e){
  40. e.stopPropagation();
  41. const {mainSaveText,full,setFocusIndex,i,boxMark,value}= this.props;
  42. let mainText = filterDataArr(mainSaveText);//主诉字数
  43. if(+boxMark==3||+boxMark==4){ //主诉为空,且第一次聚焦其他史查体时提示且不可输入
  44. if(!mainText&&full&&(value===''||value===undefined)){
  45. Notify.error("无法操作,请先输入主诉");
  46. e.target.blur();
  47. return ;
  48. }
  49. }
  50. let text = e.target.innerText || e.target.innerHTML;
  51. setFocusIndex&&setFocusIndex({i,boxMark,dom:this.$span});
  52. this.setState({
  53. labelVal:text,
  54. index:i,
  55. searchPre:text
  56. });
  57. }
  58. onChange(e){
  59. e.stopPropagation();
  60. const {handleChange,boxMark,i,handleSearch,value,mainSaveText,mainIds,handleClear} = this.props;
  61. const {labelVal,searchPre} = this.state;
  62. const text1 = e.target.innerText || e.target.innerHTML;
  63. // e.newValue IE浏览器DOMCharacterDataModified监听
  64. // const text1 = e.target.innerText || e.target.innerHTML || e.newValue;
  65. let mainText = filterDataArr(mainSaveText);//主诉字数
  66. if(+boxMark==1){
  67. if(mainText.length >= config.limited){
  68. if(text1.length > labelVal.length){
  69. e.target.innerText = labelVal;
  70. Notify.info(config.limitText);
  71. return
  72. }else if(text1.length == labelVal.length){
  73. this.setState({
  74. labelVal:text1
  75. });
  76. }else{
  77. handleChange&&handleChange({text1,boxMark,i});
  78. }
  79. return
  80. }
  81. }
  82. this.setState({
  83. labelVal:text1
  84. });
  85. const that = this;
  86. handleChange&&handleChange({text1,boxMark,i});
  87. //延迟搜索
  88. clearTimeout(this.state.timer);
  89. const timer = setTimeout(function(){
  90. let newText = e.target.innerText || e.target.innerHTML;
  91. let temp = '',isEnd=false;
  92. let search='';
  93. clearTimeout(that.state.timer);
  94. temp = newText.replace(searchPre,'');
  95. isEnd = !(newText.indexOf(searchPre)>0);
  96. search = temp.replace(/[(^\s*)|(\s*$)|(^\,*)|(\,*$)]/g,'');
  97. // if(!search&&searchPre){
  98. if(!temp&&searchPre&&newText){
  99. search = searchPre;
  100. }
  101. //console.log(labelVal,'旧:',searchPre,'新:',newText,'搜索:',search);
  102. if(config.punctuationReg.test(search)){ //只有标点符号时不搜索
  103. handleSearch&&handleSearch({text:search,isEnd,boxMark,mainIds});
  104. }else{//只有标点符号时要清空搜索结果
  105. handleClear && handleClear({boxMark})
  106. }
  107. //搜索后保持现在的值,继续输入时要用于对比
  108. /*that.setState({
  109. searchPre:newText
  110. });*/
  111. },config.delayTime);
  112. this.setState({
  113. timer
  114. });
  115. }
  116. handleBlur(e){//为了阻止冒泡事件
  117. const {boxMark,handleClear,handleChange,i} = this.props;
  118. e.stopPropagation();
  119. // 延时清空搜索结果,不延时会影响选中
  120. clearTimeout(this.state.clearTimer);
  121. const clearTimer = setTimeout(function(){
  122. handleClear && handleClear({boxMark})
  123. },config.delayTime);
  124. this.setState({
  125. clearTimer
  126. });
  127. }
  128. moveEnd(obj) {
  129. if(window.getSelection){//ie11 10 9 ff safari
  130. obj.focus(); //解决ff不获取焦点无法定位问题
  131. var range = window.getSelection();//创建range
  132. range.selectAllChildren(obj);//range 选择obj下所有子内容
  133. range.collapseToEnd();//光标移至最后
  134. }
  135. else if (document.selection) {//ie10 9 8 7 6 5
  136. var range = document.selection.createRange();//创建选择对象
  137. range.moveToElementText(obj);//range定位到obj
  138. range.collapse(false);//光标移至最后
  139. range.select();
  140. }
  141. }
  142. handleKeydown(e){
  143. const ev = e||window.event;
  144. const {i} = this.props;
  145. const target = ev.target||ev.srcElement;
  146. let innerVal = target.innerText || target.innerHTML,ele,boxTop;
  147. //禁止回车事件
  148. if(ev.keyCode==13){return false;}
  149. //backspace事件 和delete
  150. if(ev.keyCode==8 || ev.keyCode==46){
  151. //用于对比backspace前后的值
  152. this.setState({
  153. preVal:innerVal
  154. })
  155. }
  156. let range = window.getSelection();
  157. let textIndex = range.focusOffset;
  158. let textLength = range.anchorNode.length;
  159. if(ev.keyCode==37&& i!=0){//向左
  160. let preObj = $(this.$span.current).prev();
  161. let obj = preObj[0]&&preObj[0].nodeName=="DIV"?preObj.prev():preObj;
  162. if(textIndex == 0){
  163. if(ev.preventDefault){//阻止默认事件
  164. ev.preventDefault();
  165. }else{
  166. ev.returnValue=false;
  167. }
  168. this.moveEnd(obj[0]);
  169. }
  170. }
  171. if(ev.keyCode==39){//向右
  172. let nextObj = $(this.$span.current).next();
  173. let obj = nextObj[0]&&nextObj[0].nodeName=="DIV"?nextObj.next():nextObj;
  174. if(textIndex == textLength || textLength==undefined){
  175. if(ev.preventDefault){//阻止默认事件
  176. ev.preventDefault();
  177. }else{
  178. ev.returnValue=false;
  179. }
  180. obj.focus();
  181. }
  182. }
  183. }
  184. handleKeyup(e){
  185. const {boxMark,handleKeydown,removeId,handleClear,removeSpan} = this.props;
  186. const {preVal,index} = this.state;
  187. const ev = e||window.event;
  188. const target = ev.target||ev.srcElement;
  189. let innerVal = target.innerText || target.innerHTML,ele,boxTop;
  190. // 可编辑div不支持oninput事件,用此事件替代
  191. /*if(isIE() && innerVal != preVal){
  192. this.onChange(ev);
  193. }*/
  194. if(ev.keyCode==46){//delete
  195. //判断nexObj
  196. // let nextObj = $(this.$span.current).next();
  197. let nextObj = $(this.$span.current);
  198. if(preVal.trim().length==1&& !innerVal){
  199. removeId && removeId({boxMark,i:index,text:"",flag:'del'});
  200. handleClear && handleClear({boxMark});//删除最后一个字时清空搜索结果,避免现病史搜索框不立即消失的情况
  201. //如果后一个不是标签,则光标移到最前
  202. if(nextObj && nextObj[0].nodeName !=="DIV"){
  203. nextObj.focus();
  204. }
  205. }
  206. //action里往后删除
  207. if(innerVal == preVal){
  208. let data = innerVal.trim();
  209. if(nextObj && !config.punctuationReg.test(data)){
  210. handleKeydown&&handleKeydown({boxMark,i:index,text:data,flag:'del'});
  211. // nextObj.focus();
  212. if(nextObj && nextObj[0] && nextObj[0].nodeName !=="DIV"){
  213. nextObj.focus();
  214. }
  215. /*this.setState({
  216. index: null
  217. })*/
  218. }
  219. }
  220. }
  221. if(ev.keyCode==8){
  222. // 主诉现病史去重:删除最后一个字的时候移除该数据(将name、id和value替换成空)并移除id
  223. // 前面是标签,内容为空时再删一次才移除标签;前面是文本,则直接移除;
  224. let preObj = $(this.$span.current).prev();
  225. if(index!==0&&preVal.trim().length==1&& !innerVal){
  226. removeId && removeId({boxMark,i:index,text:""});
  227. handleClear && handleClear({boxMark});//删除最后一个字时清空搜索结果,避免现病史搜索框不立即消失的情况
  228. if(preObj[0].nodeName !=="DIV"){
  229. this.moveEnd(preObj[0]);
  230. }
  231. }
  232. if(innerVal !== preVal){
  233. }
  234. else{
  235. // 中英文数字和下划线--单独删除标签
  236. /*const reg = new RegExp("([\u4E00-\uFA29]|[\uE7C7-\uE7F3]|[a-zA-Z0-9_])");
  237. if(index!==0 && reg.test(innerVal)){
  238. let obj = preObj[0].nodeName=="DIV"?preObj.prev():preObj;
  239. delSingleLable && delSingleLable({boxMark,i:index});
  240. this.moveEnd(obj[0]);
  241. this.setState({
  242. index: null
  243. })
  244. }*/
  245. let data = innerVal.trim();
  246. //判断是否为空、中英文:, 。、;,且不是第一位
  247. // let pattern = new RegExp(/^\,?$|^\,?$|^\.?$|^\。?$|^\、?$|^\;?$|^\;?$|^\:?$|^\:?$|\s/);
  248. // if(index!==0 && pattern.test(data)){
  249. if(index!==0 && !config.punctuationReg.test(data)){
  250. // let preObj = $(this.$span.current).prev();
  251. let obj = preObj[0].nodeName=="DIV"?preObj.prev():preObj;
  252. handleKeydown&&handleKeydown({boxMark,i:index,text:data,flag:'backsp'});
  253. this.moveEnd(obj[0]);
  254. this.setState({
  255. index: null
  256. })
  257. }
  258. }
  259. // 主诉使用模板删除最后一个空span时移除
  260. if(boxMark==1 && index==0 && !innerVal){
  261. removeSpan();
  262. }
  263. }
  264. }
  265. componentWillReceiveProps(next){
  266. const isRead = this.props.isRead;
  267. if(next.isRead != isRead){
  268. this.$span.current.innerText?(this.$span.current.innerText = next.value||''):(this.$span.current.innerHTML = next.value||'');
  269. }
  270. }
  271. componentDidMount(){
  272. const {value} = this.props;
  273. const that = this;
  274. if(value){
  275. this.$span.current.innerText?(this.$span.current.innerText = value||''):(this.$span.current.innerHTML = value||'');
  276. }
  277. if(isIE()){
  278. // 左右移动没问题,但是输入过程中会失焦,并且有时光标在但是无法输入
  279. // $(this.$span.current)[0].addEventListener('DOMCharacterDataModified', function(e){that.onChange(e);}, false);
  280. // 此方法会影响左右切换时光标消失
  281. /*$(this.$span.current).onIe8Input(function(e){
  282. this.onChange(e)
  283. },this);*/
  284. }
  285. }
  286. /*cancelSelect(e){//双击不选中
  287. if(document.selection&&document.selection.empty){
  288. document.selection.empty();
  289. }else if (window.getSelection) {
  290. var sel=window.getSelection();
  291. sel.removeAllRanges();
  292. }
  293. }*/
  294. getClass(){
  295. const {full,value,saveText,i} = this.props;
  296. const preSelected = saveText[i-1];
  297. const isFull = full?' '+style['full']:''; //是否宽度设为整行宽度
  298. //有标点符号之外的字符或者前一个标签有选中值时,显示为黑色,否则灰显
  299. const unselect = value.match(config.punctuationReg)||preSelected?'':style['unselect'];
  300. return classNames(style['editable-span'],isFull,unselect);
  301. }
  302. render() {
  303. return <span className={this.getClass()}
  304. contentEditable='true'
  305. ref={this.$span}
  306. onInput={this.onChange}
  307. onFocus={this.handleFocus}
  308. onBlur={this.handleBlur}
  309. onkeydown={this.handleKeydown}
  310. onkeyup={this.handleKeyup}></span>;
  311. }
  312. }
  313. export default EditableSpan;