index.jsx 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
  1. import React, { Component } from "react";
  2. import style from "./index.less";
  3. import Notify from '../Notify';
  4. import config from '@config/index';
  5. import {isIE} from '@utils/tools.js';
  6. import $ from "jquery";
  7. class Textarea extends Component {
  8. constructor(props) {
  9. super(props);
  10. this.state = {
  11. timer:null,
  12. inpText:'',
  13. overFlag:false,
  14. editable:true,
  15. };
  16. this.$dom = React.createRef();
  17. this.handleInput = this.handleInput.bind(this);
  18. this.handleFocus = this.handleFocus.bind(this);
  19. //this.handleBlur = this.handleBlur.bind(this);
  20. this.handleKeydown = this.handleKeydown.bind(this);
  21. }
  22. handleFocus(e){ //初始显示props中的值,focus已经显示输入的值,避免值更新闪烁
  23. const {handleFocus,fuzhen,handleInput,isChronic,hasMain,boxMark} = this.props;
  24. const {inpText} = this.state;
  25. if(boxMark!='1'&&!hasMain&&!inpText){
  26. //现病史、其他史无主诉且本身无内容是聚焦提示无法操作
  27. this.setState({
  28. editable:false
  29. });
  30. e.target.blur();
  31. Notify.error("无法操作,请先输入主诉");
  32. return;
  33. }else{
  34. this.setState({
  35. editable:true
  36. });
  37. }
  38. handleFocus&&handleFocus(); //其他史、查体获取数据的方法
  39. if(fuzhen&& !isChronic&&!(this.$dom.current.innerText?this.$dom.current.innerText:this.$dom.current.innerHTML)){
  40. const text = config.currentText.replace("(**)",fuzhen.replace(";",''));
  41. this.$dom.current.innerText?(this.$dom.current.innerText = text):(this.$dom.current.innerHTML = text);
  42. handleInput&&handleInput({text});
  43. }
  44. }
  45. handleInput(e){
  46. const {handleInput,boxMark,handlePush} = this.props;
  47. const {inpText,overFlag,editable} = this.state;
  48. const text = e.target.innerText || e.target.innerHTML;
  49. const stimer = this.state.timer;
  50. if(!editable){
  51. e.target.innerText='';
  52. return ;
  53. }
  54. if(boxMark=='1'&&text.length>config.limited){ //主诉字符数限制
  55. e.target.innerText?(e.target.innerText = text.substr(0,config.limited)):(e.target.innerHTML = text.substr(0,config.limited));
  56. e.target.blur();
  57. Notify.error(config.limitText);
  58. if(overFlag){
  59. e.target.innerText?(e.target.innerText = inpText):(e.target.innerHTML = inpText);
  60. return
  61. }
  62. this.setState({
  63. inpText:text.substr(0,config.limited),
  64. overFlag:true
  65. })
  66. return;
  67. }
  68. /*if(boxMark=='3'&&!hasMain){
  69. e.target.innerText = '';
  70. return;
  71. }*/
  72. this.setState({
  73. inpText:text,
  74. overFlag:false
  75. })
  76. //存值到store
  77. handleInput&&handleInput({text});
  78. //右侧推送--延时推送
  79. clearTimeout(stimer);
  80. let timer = setTimeout(function(){
  81. handlePush&&handlePush();
  82. clearTimeout(stimer);
  83. },config.delayPushTime);
  84. this.setState({
  85. timer
  86. });
  87. }
  88. handleKeydown(e){
  89. const {boxMark} = this.props;
  90. const ev = e||window.event;
  91. if(+boxMark===1){
  92. //禁止回车事件
  93. if(ev.keyCode==13){return false;}
  94. }
  95. }
  96. shouldComponentUpdate(next){
  97. if(JSON.stringify(next) == JSON.stringify(this.props)){
  98. return false;
  99. }
  100. return true;
  101. }
  102. componentWillReceiveProps(next){
  103. const isRead = this.props.isRead;
  104. if(next.isRead != isRead||(next.value!=this.props.value&&next.value&&next.value.indexOf("复诊")!=-1)){ //value对比解决复诊不显示bug,复诊对比解决关标跳到前面bug
  105. this.$dom.current.innerText?(this.$dom.current.innerText = next.value||''):(this.$dom.current.innerHTML = next.value||'');
  106. this.setState({
  107. inpText:''
  108. });
  109. }
  110. }
  111. componentDidMount(){
  112. const {value} = this.props;
  113. if(value){
  114. this.$dom.current.innerText?(this.$dom.current.innerText = value||''):(this.$dom.current.innerText=value||'');
  115. }
  116. if(isIE()){
  117. $(this.$dom.current).onIe8Input(function(e){
  118. this.handleInput(e)
  119. },this);
  120. }
  121. }
  122. render() {
  123. const { title } = this.props;
  124. return (
  125. <div className={style["box"]}>
  126. <div className={style["title"]}>{title}</div>
  127. {/*{isRead?<div className={style["content"]+" "+'11'} contentEditable={true} onFocus={this.handleFocus}>{value}</div>:''}*/}
  128. <div className={style["content"]}
  129. onFocus={this.handleFocus}
  130. ref={this.$dom}
  131. contentEditable={true}
  132. onInput={this.handleInput}
  133. onKeyDown={this.handleKeydown}>
  134. </div>
  135. </div>
  136. );
  137. }
  138. }
  139. export default Textarea;