第三种模式

src/common/components/BlockInp/index.jsx

@@ -0,0 +1,159 @@
+import React, { Component } from "react";
+import style from "./index.less";
+import Notify from '../Notify';
+import config from '@config/index';
+import {isIE,moveEnd} from '@utils/tools.js';
+import {getFeature} from '@store/async-actions/fetchModules';
+import {getAllDataList,getAllDataStringList,ifOtherClear} from "@utils/tools.js";
+import store from '@store';
+import $ from "jquery";
+import {SET_CURRENT_MODULE} from '@types/homePage';
+import {getMRAnalyse} from '@store/async-actions/pushMessage';
+
+class BlockInp extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      timer:null,
+      inpText:'',
+      overFlag:false,
+    };
+    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);
+    this.handleBlur = this.handleBlur.bind(this);
+  }
+  handleFocus(e){            //初始显示props中的值，focus已经显示输入的值，避免值更新闪烁
+    const {handleFocus,fuzhen,handleInput,isChronic,hasMain,boxMark,title} = this.props;
+    const state = store.getState()
+    const moduleName = state.homePage.moduleName
+    //黏贴时去掉html格式
+    const that = this;
+    let txt = '';
+    $(this.$dom.current).on("paste",function(e){
+      setTimeout(function(){
+        txt = that.$dom.current.innerText||that.$dom.current.innerHTML;
+        that.$dom.current.innerHTML = txt;
+        moveEnd($(that.$dom.current)[0]);     //光标落到最后去
+      });
+    });
+    //const {inpText} = this.state;console.log(inpText,boxMark,hasMain)
+    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});
+    }*/
+    if(moduleName != title) {
+      store.dispatch({
+        type: SET_CURRENT_MODULE,
+        moduleName:title
+      })
+      store.dispatch(getMRAnalyse())
+    }
+
+
+  }
+  handleInput(e){
+    const {handleInput,boxMark,handlePush,value} = this.props;
+    const {inpText,overFlag} = this.state;
+    const text = e.target.innerText || e.target.innerHTML.replace(/&nbsp;+/g,' ').replace(/<br>$/,'');
+    const stimer = this.state.timer;//console.log(e.target,text)
+    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
+      });
+      handleInput&&handleInput({text:text.substr(0,config.limited).replace('<br>','')});
+      return;
+    }
+    /*if(boxMark=='3'&&!hasMain){
+      e.target.innerText = '';
+      return;
+    }*/
+    this.setState({
+      inpText:text,
+      overFlag:false
+    })
+
+    //存值到store  FF26 会有一个<br>
+    handleInput&&handleInput({text:text.replace('<br>','')});
+    //右侧推送--延时推送
+    clearTimeout(stimer);
+    let timer = setTimeout(function(){
+      handlePush&&handlePush();
+      clearTimeout(stimer);
+    },config.delayPushTime);
+    this.setState({
+      timer
+    });
+  }
+  //除主诉外 其他是否为空
+  ifClear(){
+    let baseList = store.getState();
+    let jsonData = getAllDataList(baseList);
+    let jsonStr = getAllDataStringList(baseList);
+    let flg = ifOtherClear(jsonData,jsonStr,baseList);
+    return flg;
+  }
+  handleBlur(e){
+    //解除绑定事件
+    $(this.$dom.current).off("paste");
+  }
+  handleKeydown(e){
+    const {boxMark} = this.props;
+    const ev = e||window.event;
+    if(+boxMark===1){
+      //禁止回车事件
+      if(ev.keyCode==13){return false;}
+    }
+  }
+  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.innerHTML = next.value||'';   //ff26下不支持innerText，但ref会自动加上innerText属性，所以上面的判断不为空
+      this.setState({
+        inpText:''
+      });
+    }
+  }
+  componentDidMount(){
+    const {value} = this.props;
+    if(value){
+      //this.$dom.current.innerText?(this.$dom.current.innerText = value||''):(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,boxMark } = this.props;
+    return (
+      <div className={style["box"]}>
+        <div className={style["title"]}>{title}</div>
+        <div className={style["content"]}
+             onFocus={this.handleFocus}
+             ref={this.$dom}
+             contentEditable={true}
+             onInput={this.handleInput}
+             onkeydown={this.handleKeydown}
+             onBlur={+boxMark===1?this.handleBlur:null}>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default BlockInp;

src/common/components/BlockInp/index.less

@@ -0,0 +1,33 @@
+@import "~@less/variables.less";
+
+.box{
+  margin: 2px 20px;
+  .title{
+    width: 65px;
+    float: left;
+    text-align: right;
+    padding-right: 5px;
+    margin-top: 10px;
+    font-size: 14px;
+    font-weight: bold;
+  }
+  .title:after{
+    content: "：";
+  }
+  .content{
+    // height:120px;
+    min-height: 38px;
+    line-height: 24px;
+    margin-left: 60px;
+    position: relative;
+    padding:5px;
+    outline: none;
+    border-bottom:1px @part-border-color dashed;
+    margin-right: 470px;
+    word-break: break-all;
+    font-weight: bold;
+    textarea{
+      width: 100%;
+    }
+  }
+}

src/components/BlockEmrCont/index.jsx

@@ -0,0 +1,74 @@
+import React, { Component } from 'react';
+import Diagnosis from '@containers/Diagnosis';
+import Inspect from '@containers/Inspect';
+import AssistCheck from '@containers/AssistCheck';
+import OperationContainer from '../../containers/OperationContainer'
+import style from './index.less';
+import AdviceContainer from '../../containers/AdviceContainer';
+import InfoTitle from '@components/InfoTitle'
+import ScrollArea from 'react-scrollbar';
+import BlockInp from '@common/components/BlockInp';
+import {getWindowInnerHeight,getWindowInnerWidth,windowEventHandler} from '@utils/tools';
+
+class BlockEMRCont extends Component {
+  constructor(props){
+    super(props);
+    this.$cont = React.createRef();
+    this.$div = React.createRef();
+    this.setHighter = this.setHighter.bind(this);
+  }
+  componentDidMount(){
+    const height = getWindowInnerHeight() - 175;
+    const width = getWindowInnerWidth() - 20;
+    this.$cont.current.style.height = height+"px";
+    this.$cont.current.style.minWidth = width + "px";
+    windowEventHandler('resize', ()=>{
+      const height = getWindowInnerHeight() - 175;
+      const width = getWindowInnerWidth() - 20;
+      if(this.$cont.current){
+        this.$cont.current.style.height = height + "px";
+        this.$cont.current.style.minWidth = width + "px";
+      }
+    });
+  }
+
+  setHighter(ht){
+    // console.log(this.$div.current.scrollHeight);
+    if(this.$div.current){
+      this.$div.current.style.paddingBottom = ht+'px';
+    }
+  }
+  render() {
+    const contStyle={
+      opacity:'0.4',
+      top:'1px',
+      right:'458px',
+      zIndex:'15',
+      width:'14px',
+      background:'#f1f1f1'};
+    const barStyle={background:'#777',width:'100%',marginLeft:'0'};
+    return <div className={style['EMR-container']}
+                ref={this.$cont} id="addScrollEvent">
+      <InfoTitle hideHistory={true}></InfoTitle>
+      <ScrollArea speed={1}
+                  horizontal={false}
+                  className={style["area"]}
+                  verticalContainerStyle={contStyle}
+                  verticalScrollbarStyle={barStyle}
+                  contentClassName="content">
+        <div className={style['inner']} id="EmrContainer" ref={this.$div}>
+          <BlockInp title='主诉' boxMark='1'></BlockInp>
+          <BlockInp title='现病史' boxMark='2'></BlockInp>
+          <BlockInp title='其他史' boxMark='3'></BlockInp>
+          <BlockInp title='查体' boxMark='4'></BlockInp>
+          <Inspect setHighter={this.setHighter}></Inspect>
+          <AssistCheck setHighter={this.setHighter}></AssistCheck>
+          <Diagnosis setHighter={this.setHighter} hideChronic={true}></Diagnosis>
+          <AdviceContainer></AdviceContainer>
+        </div>
+      </ScrollArea>
+      <OperationContainer hideLabel={true}></OperationContainer>
+    </div>
+  }
+}
+export default BlockEMRCont;

src/components/BlockEmrCont/index.less

@@ -0,0 +1,47 @@
+@import "~@less/variables.less";
+.area{
+  height: 100%;
+  min-width: 1006px;
+}
+.EMR-container{
+  background: #fff;
+  margin:60px 20px 0 0;
+  // margin-right:@push-width + 10px;
+  /*padding: 0px 0 10px 0 ;*/
+  box-sizing: border-box;
+  position: absolute;
+  // min-width: 700px;
+  min-width: 548px;
+  float: left;
+  overflow-y:auto;
+  overflow-x: hidden;
+}
+.inner{
+  padding-top:20px;
+  padding-bottom: 48px;
+}
+.keep {
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+.box {
+  padding-top: 10px;
+  box-sizing: border-box;
+  height: 80px;
+}
+.ipt {
+  font-size: 16px;
+  width: 112px;
+  height: 20px;
+  line-height: 18px;
+  display: block;
+  margin: 0 auto;
+  text-align: left;
+}
+.line {
+  width: 182px;
+  height: 1px;
+  margin: 8px auto 0 auto;
+  background: #D8D8D8;
+}