123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143 |
- import React, { Component } from "react";
- import style from "./index.less";
- import Notify from '../Notify';
- import config from '@config/index';
- import {isIE} from '@utils/tools.js';
- import $ from "jquery";
- class Textarea extends Component {
- constructor(props) {
- super(props);
- this.state = {
- timer:null,
- inpText:'',
- overFlag:false,
- editable:true,
- };
- this.$dom = React.createRef();
- this.handleInput = this.handleInput.bind(this);
- this.handleFocus = this.handleFocus.bind(this);
- //this.handleBlur = this.handleBlur.bind(this);
- this.handleKeydown = this.handleKeydown.bind(this);
- }
- handleFocus(e){ //初始显示props中的值,focus已经显示输入的值,避免值更新闪烁
- const {handleFocus,fuzhen,handleInput,isChronic,hasMain,boxMark} = this.props;
- const {inpText} = this.state;
- if(boxMark!='1'&&!hasMain&&!inpText){
- //现病史、其他史无主诉且本身无内容是聚焦提示无法操作
- this.setState({
- editable:false
- });
- e.target.blur();
- Notify.error("无法操作,请先输入主诉");
- return;
- }else{
- this.setState({
- editable:true
- });
- }
- handleFocus&&handleFocus(); //其他史、查体获取数据的方法
- if(fuzhen&& !isChronic&&!(this.$dom.current.innerText?this.$dom.current.innerText:this.$dom.current.innerHTML)){
- const text = config.currentText.replace("(**)",fuzhen.replace(";",''));
- this.$dom.current.innerText?(this.$dom.current.innerText = text):(this.$dom.current.innerHTML = text);
- handleInput&&handleInput({text});
- }
- }
- handleInput(e){
- const {handleInput,boxMark,handlePush} = this.props;
- const {inpText,overFlag,editable} = this.state;
- const text = e.target.innerText || e.target.innerHTML;
- const stimer = this.state.timer;
- if(!editable){
- e.target.innerText='';
- return ;
- }
- if(boxMark=='1'&&text.length>config.limited){ //主诉字符数限制
- e.target.innerText?(e.target.innerText = text.substr(0,config.limited)):(e.target.innerHTML = text.substr(0,config.limited));
- e.target.blur();
- Notify.error(config.limitText);
- if(overFlag){
- e.target.innerText?(e.target.innerText = inpText):(e.target.innerHTML = inpText);
- return
- }
- this.setState({
- inpText:text.substr(0,config.limited),
- overFlag:true
- })
- return;
- }
- /*if(boxMark=='3'&&!hasMain){
- e.target.innerText = '';
- return;
- }*/
- this.setState({
- inpText:text,
- overFlag:false
- })
- //存值到store
- handleInput&&handleInput({text});
- //右侧推送--延时推送
- clearTimeout(stimer);
- let timer = setTimeout(function(){
- handlePush&&handlePush();
- clearTimeout(stimer);
- },config.delayPushTime);
- this.setState({
- timer
- });
- }
- handleKeydown(e){
- const {boxMark} = this.props;
- const ev = e||window.event;
- if(+boxMark===1){
- //禁止回车事件
- if(ev.keyCode==13){return false;}
- }
- }
- shouldComponentUpdate(next){
- if(JSON.stringify(next) == JSON.stringify(this.props)){
- return false;
- }
- return true;
- }
- componentWillReceiveProps(next){
- const isRead = this.props.isRead;
- if(next.isRead != isRead||(next.value!=this.props.value&&next.value&&next.value.indexOf("复诊")!=-1)){ //value对比解决复诊不显示bug,复诊对比解决关标跳到前面bug
- this.$dom.current.innerText?(this.$dom.current.innerText = next.value||''):(this.$dom.current.innerHTML = next.value||'');
- this.setState({
- inpText:''
- });
- }
- }
- componentDidMount(){
- const {value} = this.props;
- if(value){
- this.$dom.current.innerText?(this.$dom.current.innerText = value||''):(this.$dom.current.innerText=value||'');
- }
- if(isIE()){
- $(this.$dom.current).onIe8Input(function(e){
- this.handleInput(e)
- },this);
- }
- }
- render() {
- const { title } = this.props;
- return (
- <div className={style["box"]}>
- <div className={style["title"]}>{title}</div>
- {/*{isRead?<div className={style["content"]+" "+'11'} contentEditable={true} onFocus={this.handleFocus}>{value}</div>:''}*/}
- <div className={style["content"]}
- onFocus={this.handleFocus}
- ref={this.$dom}
- contentEditable={true}
- onInput={this.handleInput}
- onKeyDown={this.handleKeydown}>
- </div>
- </div>
- );
- }
- }
- export default Textarea;
|