Преглед изворни кода

Merge branch 'ChronicMag' of http://192.168.2.236:10080/zhouna/newICSS into ChronicMag

Luolei пре 6 година
родитељ
комит
64c9d572c0

+ 44 - 0
src/common/components/DelToast/index.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import style from './index.less';
+/**
+* 化验辅检删除弹窗 @Liucf 2019-5-22
+* 接收参数:
+* show:展示组件
+* name:删除项的名称
+* confirm:删除事件处理函数
+* cancel:取消事件处理函数
+*/
+
+class DelToast extends React.PureComponent{
+  constructor(props){
+    super(props);
+    this.handleDel = this.handleDel.bind(this);
+    this.handleCancel = this.handleCancel.bind(this);
+  }
+  handleDel(){
+    const {confirm} = this.props;
+    confirm&&confirm();
+  }
+  handleCancel(){
+    const {cancel} = this.props;
+    cancel&&cancel();
+  }
+  render(){
+    const {show,name} = this.props;
+    if(show){
+      return <div className={style['del-box']} id="delBox">
+        <div className={style['del-con']}>
+          <div className={style['del-tri']}></div>
+          <div className={style['del-title']}>删除 {name} ?</div>
+          <div className={style['del-foot']}>
+            <span className={`${style['del-btn']} ${style['del-del']}`} onClick={this.handleDel}>删除</span>
+            <span className={`${style['del-btn']} ${style['del-cancel']}`} onClick={this.handleCancel}>取消</span>
+          </div>
+        </div>
+      </div>
+    }
+    return ''
+  }
+}
+
+export default DelToast;

+ 51 - 0
src/common/components/DelToast/index.less

@@ -0,0 +1,51 @@
+// @import "~@less/mixin.less";
+.del-box{
+  position: absolute;
+  width: 206px;
+  height: 106px;
+  box-shadow: 2px 2px 5px rgba(0,0,0,.4);
+  background: #fff;
+  z-index: 66;
+  text-align: center;
+  padding: 20px;
+  right: -30px;
+  top: 40px;
+}
+.del-con{
+  position: relative;
+  .del-tri{
+    width: 0; 
+    height: 0;
+    border-width: 10px;
+    border-style: solid;
+    border-color: transparent transparent #fff transparent;
+    position: absolute;
+    top: -40px;
+    right: 10px;
+  }
+  .del-title{
+    margin-bottom: 19px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+  .del-foot{
+    .del-btn{
+      display: inline-block;
+      width: 63px;
+      height: 26px;
+      line-height: 26px;
+      text-align: center;
+      cursor: pointer;
+    }
+    .del-del{
+      color: #fff;
+      background: #EC3E3E;
+      margin: 0 20px 0 10px;
+    }
+    .del-cancel{
+      color:#000;
+      background: #E5E5E5;
+    }
+  }
+}

+ 2 - 1
src/common/components/NumberPan/index.jsx

@@ -9,6 +9,7 @@ class NumberPan extends Component{
     this.state = {
       value:''
     }
+    this.handleSelect = this.handleSelect.bind(this);
   }
   handleSelect(e){
     e.stopPropagation();
@@ -57,7 +58,7 @@ class NumberPan extends Component{
     }
   }
   render(){
-    const select = this.handleSelect.bind(this); 
+    const select = this.handleSelect;
     const domNode = document.getElementById('root');
     return ReactDom.createPortal(
        <div className={style['panBox']} 

+ 3 - 1
src/common/components/index.js

@@ -23,6 +23,7 @@ import NumberUnitPan from "./NumberUnitPan";
 import Add from "./Add";
 import ComplexModal from "./ComplexModal";
 import MiniToast from "./MiniToast";
+import DelToast from "./DelToast";
 
 module.exports = {
     Banner,
@@ -49,5 +50,6 @@ module.exports = {
     NumberUnitPan,
     Add,
     ComplexModal,
-    MiniToast
+    MiniToast,
+    DelToast
 };

BIN
src/common/images/del_hor.png


BIN
src/common/images/del_nor.png


BIN
src/common/images/info-move.png


BIN
src/common/images/info-show.png


+ 2 - 0
src/common/less/variables.less

@@ -45,6 +45,8 @@
 @dropdwon-height:200px;
 @selected-bg:#fff;
 @import-color:#ffad5f;
+@closeIcon:url(../images/del_nor.png);
+@closeHor:url(../images/del_hor.png);
 
 /*********推送内容容器宽度*************/
 @push-width: 450px;

+ 30 - 10
src/components/AddAssistCheck/index.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SearchOption, Calendar, ConfirmModal, Notify, Add } from '@commonComp';
+import { SearchOption, Calendar, ConfirmModal, Notify, Add ,DelToast} from '@commonComp';
 import styles from './index.less';
 import $ from 'jquery';
 import Textarea from './Textarea';
@@ -16,7 +16,8 @@ class AddAssistCheck extends React.Component {
       active: '',
       visible: false,
       pageTop:'',
-      id: null
+      id: null,
+      activeName:''
     }
     this.handleShowDate = this.handleShowDate.bind(this)
     this.getCurrentDate = this.getCurrentDate.bind(this)
@@ -27,10 +28,11 @@ class AddAssistCheck extends React.Component {
     this.handleCancel = this.handleCancel.bind(this)
   }
 
-  handleDelClick(id) {
+  handleDelClick(id,item) {
     this.setState({
       visible: true,
-      id: id
+      id: id,
+      activeName:item.name
     })
   }
 
@@ -41,7 +43,8 @@ class AddAssistCheck extends React.Component {
     handlePush && handlePush();           //右侧推送
     this.setState({
       visible: false,
-      id: null
+      id: null,
+      activeName:''
     })
     Notify.success("删除成功");
   }
@@ -49,7 +52,8 @@ class AddAssistCheck extends React.Component {
   handleCancel() {
     this.setState({
       visible: false,
-      id: null
+      id: null,
+      activeName:''
     })
   }
 
@@ -57,12 +61,22 @@ class AddAssistCheck extends React.Component {
     $(document).click((event) => {
       let _con = $('#searchWrapAssist');   // 设置目标区域
       let _cons = $('#datePick');   // 设置目标区域
+      let _del = $('#delBox')[0];   // 删除弹窗
+      let _close = $('#assiClose')[0];   // 删除icon
+      // console.log(111,event.target,_del,_close)
       if (_con && searchWrapAssist != event.target && !_con.is(event.target) && _con.has(event.target).length === 0) { // Mark 1
         this.setState({ show: false });
       }
       if (!_cons.is(event.target) && _cons.has(event.target).length === 0) { // Mark 1
         this.setState({ date: false });
       }
+      if(event.target != _close && event.target != _del && event.target.parentNode != _del){
+          this.setState({
+            visible: false,
+            id: null,
+            activeName:''
+          })
+      }
     });
     this.getCurrentDate();
   }
@@ -126,10 +140,11 @@ class AddAssistCheck extends React.Component {
   }
   getAssistLabel() {
     const { assistLabel, handleChangeAssistValue, handleChangeDate, isRead, handlePush, winWidth,getInfomation } = this.props;
+    const { visible,activeName,id } = this.state;
     return <ul className={styles.labelWrap} id="datePick">
       {
         assistLabel.map((item, idx) => {
-          return (<li key={item.id} className={styles.assistLists}>
+          return (<li key={item.questionId} className={styles.assistLists}>
             <span className={styles.assistName} style={{ width: winWidth < 1200 ? '120px' : 'auto' }}>
               <span className={styles.tagSpan}>
                 {item.name}:
@@ -142,11 +157,16 @@ class AddAssistCheck extends React.Component {
             <div className={styles.pointerFinger}>
               <p onClick={() => this.handleShowDate(idx)}>报告日期:<span>{item.time || this.state.dateTime}</span></p>
               <i onClick={() => this.handleShowDate(idx)}></i>
-              <a href="javascript:void(0);" onClick={() => { this.handleDelClick(idx) }}><img src={close} alt="" /></a>
+              {/*<a href="javascript:void(0);" onClick={() => { this.handleDelClick(idx,item) }}><img src={close} alt="" /></a>*/}
+              <span className={styles.closeIcon} id="assiClose" onClick={() => { this.handleDelClick(idx,item) }}></span>
               <div style={{ display: this.state.date && idx == this.state.active ? "block" : "none", position: "relative" }}>
                 <Calendar isShow={true} handleChange={(info) => { handleChangeDate(info, idx); this.setState({ date: false }) }}></Calendar>
               </div>
             </div>
+          <DelToast show={idx==id?visible:false}
+                    name={activeName} 
+                    cancel={this.handleCancel}
+                    confirm={this.delConfirm}/>
           </li>)
         })
       }
@@ -172,7 +192,7 @@ class AddAssistCheck extends React.Component {
             }
           </SearchOption> : ''}
         </div>
-        <ConfirmModal
+        {/*<ConfirmModal
           visible={visible}
           confirm={this.delConfirm}
           close={this.handleCancel}
@@ -184,7 +204,7 @@ class AddAssistCheck extends React.Component {
           oKBg={'#3B9ED0'}
         >
           <p className={styles['center']}>是否删除该辅检项?</p>
-        </ConfirmModal>
+        </ConfirmModal>*/}
       </div>
     )
   }

+ 22 - 3
src/components/AddAssistCheck/index.less

@@ -1,5 +1,4 @@
 @import "~@less/variables.less";
-
 .staticTag {
     cursor: pointer;
     color: @blue;
@@ -38,6 +37,7 @@
         box-sizing: border-box;
         position: relative;
         clear: both;
+        border-radius: 4px;
         .pointerFinger {
             width: 222px;
             position: absolute;
@@ -50,7 +50,7 @@
                 cursor: pointer;
                 background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAAH6ji2bAAAABGdBTUEAALGPC/xhBQAAANtJREFUOBHFU90RwiAMDj3H8FV3KQ4AxwAO5QQwgbvoY90DQ+/gUpogXj3bF/L75ctXANj7c85pY0zMPKy1U7bLmQqG4hFjwPIL8UEp9aI+UOxFotcRZ3MALEmu8I+xWoGk2VpiQqhoWneSmoXZvfWehaubsVgBoGxdxb93EekhdbVyKjWh5iNSvcUYjxJIK57WxN5rCOE+13E/scWCy2WMzLC81haTTzlkOONtf6I4KTM8SFPTWqjLicujZk/v/ZnLdV9ZrpmLiQwlBhwIjWVAjStOG6+NpsA/s99BMkpktdAgdAAAAABJRU5ErkJggg==') no-repeat;
             }
-            a {
+            /* a {
                 img {
                   width: 13px;
                   height: 13px;
@@ -58,9 +58,21 @@
                   cursor: pointer;
                   display: inline-block;
                   position: absolute;
-                  right: -4px;
+                  // right: -4px;
+                  right: 3px;
                   top: 2px;
                 }
+            } */
+            .closeIcon{
+              display: inline-block;
+              width: 15px;
+              height: 15px;
+              cursor: pointer;
+              position: absolute;
+              right: 3px;
+              top: 2px;
+              background: @closeIcon;
+              background-size: 100% 100%;
             }
             p{
                 display: inline-block;
@@ -85,6 +97,13 @@
           width: 100%;
         }
     }
+    .assistLists:hover{
+      background:#F2F2F2;
+      .closeIcon{
+        background: @closeHor;
+        background-size: 100% 100%;
+      }
+    }
 }
 .center {
     text-align: center;

+ 35 - 3
src/components/AddInspect/SlideSelect/index.jsx

@@ -1,7 +1,7 @@
 import React, { Component } from "react";
 import styles from "./index.less";
 import { normalVal,timestampToTime } from '@utils/tools';
-import { InspectCommon, Calendar} from '@commonComp';
+import { InspectCommon, Calendar,DelToast} from '@commonComp';
 import slideUp from "@common/images/slide-up.png";
 import slideDown from "@common/images/slide-down.png";
 import date1 from '../img/date1.png';
@@ -12,9 +12,14 @@ class SlideSelect extends Component {
     super(props);
     this.state = {
       show:false,
+      activeInd:false,
+      activeName:''
     };
     this.toTime = this.toTime.bind(this)
     this.handleSlide = this.handleSlide.bind(this)
+    this.handleDel = this.handleDel.bind(this)
+    this.handleCancel = this.handleCancel.bind(this)
+    this.delConfirm = this.delConfirm.bind(this)
   }
   toTime(time){
     let tmpTim = time.split(',').join('')-0
@@ -34,9 +39,31 @@ class SlideSelect extends Component {
       show:!tmpShow
     })
   }
+  handleDel(){
+    const {handleDelClick,idx,item} = this.props;
+    this.setState({
+      activeInd:true,
+      activeName:item.name
+    })
+    handleDelClick&&handleDelClick(1,idx);
+  }
+  handleCancel(){
+    this.setState({
+      activeInd:false,
+      activeName:''
+    })
+  }
+  delConfirm(){
+    const {handleDelConfirm} = this.props;
+    handleDelConfirm&&handleDelConfirm();
+    this.setState({
+      activeInd:false,
+      activeName:''
+    })
+  }
   render() {
     const {getInfomation,handleConfirm,changeActivePart,handleDelClick,getItemList,date,item,idx,handleFillShow,showDetails,handleLabelSub,showFill,changeShowFill,handlePush,dateTime,currentIdx,currentData,fillActive,handleShowDate,handleChangeDate} = this.props;
-    const {show} = this.state;
+    const {show,activeInd,activeName} = this.state;
     let numPlus = 0,numPlus1 = 0;
     return (
       <li key={item.questionId} className={styles.slideLi}> 
@@ -153,7 +180,12 @@ class SlideSelect extends Component {
                 : null
             }
         </div>
-        <img className={styles.partDel} src={close} alt="删除项" onClick={()=>{handleDelClick(1,idx)}}/>
+        {/*<img className={styles.partDel} src={close} alt="删除项" onClick={()=>{handleDelClick(1,idx)}}/>*/}
+        <span className={styles.partDel} onClick={this.handleDel}></span>
+        <DelToast show={activeInd?true:false}
+                    name={activeName} 
+                    cancel={this.handleCancel}
+                    confirm={this.delConfirm}/>
     </li>
     );
   }

+ 16 - 7
src/components/AddInspect/SlideSelect/index.less

@@ -3,8 +3,7 @@
     // cursor: pointer;
     color: #767676;
     position: relative;
-    padding-top: 10px;
-    padding-bottom: 10px;
+    padding: 10px 10px 10px 0;
     border-bottom:1px dashed #989DA3;
     i {
         font-style: normal;
@@ -26,17 +25,27 @@
         vertical-align: top;
     } 
     .partDel {
-        width: 13px;
-        height: 13px;
+        width: 15px;
+        height: 15px;
         margin-bottom: 11px;
         cursor: pointer;
         display: inline-block;
         position: absolute;
-        right: 0;
-        top: 12px;
-        background-color: #fff;
+        right: 3px;
+        top: 13px;
+        // background-color: #fff;
+        background: @closeIcon;
+        background-size: 100% 100%;
     }
 }
+.slideLi:hover{
+    background:#F2F2F2;
+    border-radius: 4px;
+       .partDel{
+        background: @closeHor;
+        background-size: 100% 100%;
+      } 
+}
 .staticTagActive {
     cursor: pointer;
     color: #333;

+ 17 - 30
src/components/AddInspect/index.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SearchOption, InspectCommon, Calendar ,Notify,ConfirmModal,Add} from '@commonComp';
+import { SearchOption, InspectCommon, Calendar ,Notify,ConfirmModal,Add,DelToast} from '@commonComp';
 import SlideExcel from './SlideExcel';
 import SlideSelect from './SlideSelect';
 import { deepClone,getPageCoordinate } from '@utils/tools';
@@ -22,12 +22,11 @@ class Inspect extends React.Component {
       currentData: {},
       numPlus: 0,     //判断是否所有的填写单都是空
       num: 0,            //暂存数据,获取一次,不能每次都是新的数据
-      toastText: '',
-      visible: false,
       type: null,
       id: null,
-      tmpIds: [],      //内层外层
       pageTop:'',
+      // tmpIds: [],      //内层外层
+      importFlag:false   //导入数据删除标识
     }
     this.handleChangeDate = this.handleChangeDate.bind(this)
     this.handleShowDate = this.handleShowDate.bind(this)
@@ -53,9 +52,9 @@ class Inspect extends React.Component {
       handleCloseExcel(id)
     }
     this.setState({
-      visible: false,
       type: null,
       id: null,
+      importFlag:false
     })
     Notify.success("删除成功");
     handlePush && handlePush();       //右侧推送
@@ -63,24 +62,19 @@ class Inspect extends React.Component {
   handleDelClick(type, idx) {
     this.setState({
       type: type,
-      id: idx,
-      visible: true
+      id: idx
     })
-    if (type == 1) {//单项
+    if (type == 2){
       this.setState({
-        toastText: '是否删除该化验项?'
-      })
-    } else if (type == 2) {//导入项
-      this.setState({
-        toastText: '是否删除导入项?'
+        importFlag: true
       })
     }
   }
   handleCancel() {
     this.setState({
-      visible: false,
       type: null,
       id: null,
+      importFlag:false
     })
   }
   componentDidMount() {
@@ -286,17 +280,22 @@ class Inspect extends React.Component {
   }
   render() {
     const { getInfomation,handleChangeValue,inspectVal, list, labelList,windowHeight, delPartItem, handleLabelSub, handleClear, handleConfirm, fillActive, getExcelDataList, handleCloseExcel, handlePush } = this.props;
-    const { toastText, visible, tmpId, tmpIdx,pageTop } = this.state;
+    const { tmpId, tmpIdx,id ,importFlag,pageTop} = this.state;
 
     return (
       <div className={styles.wrapper}>
         <div className={styles.check}>
           {
-            getExcelDataList.length > 0 && getExcelDataList.map((items, id) => {
+            getExcelDataList.length > 0 && getExcelDataList.map((items, ind) => {
               return <div style={{ marginTop: '10px' }}>
                 {
                   items && items.lisExcelRes.length > 0 ? <ul className={styles.excelDataLists}>
-                    <img className={styles.close} src={close} alt="关闭导入excel数据" onClick={() => { this.handleDelClick(2, id) }} />
+                    {/*<img className={styles.close} src={close} alt="关闭导入excel数据" onClick={() => { this.handleDelClick(2, id) }} />*/}
+                    <span className={styles.close} onClick={() => { this.handleDelClick(2, ind) }}></span>
+                    <DelToast show={id==ind && importFlag?true:false}
+                    name="该导入项" 
+                    cancel={this.handleCancel}
+                    confirm={this.delConfirm}/>
                     {
                       items.lisExcelRes.map((item, idx) => {
                         return <SlideExcel
@@ -335,6 +334,7 @@ class Inspect extends React.Component {
                   getItemList={this.getItemList}
                   changeActivePart={this.changeActivePart}
                   handleDelClick={this.handleDelClick}
+                  handleDelConfirm={this.delConfirm}
                   handleConfirm={handleConfirm}
                   getInfomation={getInfomation}
                 ></SlideSelect>
@@ -356,19 +356,6 @@ class Inspect extends React.Component {
             }
           </SearchOption> : ''}
         </div>
-        <ConfirmModal
-          visible={visible}
-          confirm={this.delConfirm}
-          close={this.handleCancel}
-          cancel={this.handleCancel}
-          okText="删除"
-          cancelText='取消'
-          okBorderColor={'#3B9ED0'}
-          okColor={'#fff'}
-          oKBg={'#3B9ED0'}
-        >
-          <p className={styles['center']}>{toastText}</p>
-        </ConfirmModal>
       </div>
     )
   }

+ 16 - 5
src/components/AddInspect/index.less

@@ -174,14 +174,17 @@
     background-color: rgba(237,237,237,0.4);
     border: 1px solid #ccc;
     .close {
-        width: 13px;
-        height: 13px;
+        display: inline-block;
+        width: 15px;
+        height: 15px;
         position: absolute;
-        top: -5px;
-        right: -5px;
+        top: -10px;
+        right: -6px;
         z-index: 30;
-        background-color: #fff;
         border-radius: 50%;
+        background: @closeIcon;
+        background-size: 100% 100%;
+        background-color: #fff;
     }
     .excelDataLis {
         padding: 2px 0px;
@@ -211,6 +214,14 @@
         }
     }
 }
+.excelDataLists:hover{
+    .close{
+        background: @closeHor;
+        background-size: 100% 100%;
+        background-color: #fff;
+        cursor: pointer;
+    }   
+}
 .center {
     text-align: center;
     font-size: 16px;

+ 42 - 3
src/components/ChronicInfo/index.jsx

@@ -9,6 +9,8 @@ import allTableIcon from '@common/images/all-table.png';
 import add from '@common/images/add-result.png';
 import added from '@common/images/first.png';
 import checkIcon from '@common/images/check.png';
+import infoShow from '@common/images/info-show.png';
+import infoMove from '@common/images/info-move.png';
 import {ComplexModal,ConfirmModal,MiniToast, Radio,CheckBtn} from '@commonComp';
 import ScaleTable from '@containers/ScaleTable';
 import Notify from '@commonComp/Notify';
@@ -40,6 +42,8 @@ class ChronicInfo extends React.Component{
       formulaParam: {}, //量表计算公式计算入参
       isCalculated:false,     //是否刚计算过,关闭时值与结果对应
       calcuValues:deepClone(props.calcuValues),       //计算公式填的值
+      hasEnterImg: false, //是否移入info
+      currentIndex: -1 //当前index
     };
 
     this.showInfo = this.showInfo.bind(this);
@@ -305,14 +309,49 @@ class ChronicInfo extends React.Component{
 
     return btn;
   }
+  handleMouseEnterDrug(index) {
+    this.setState({
+        currentIndex: index,
+    })
+  }
+  handleMouseLeaveDrug() {
+    this.setState({
+        currentIndex: -1, 
+    })
+  }
+  handleMouseEnterImg() {
+    this.setState({
+      hasEnterImg: true
+    })
+  }
+  handleMouseLeaveImg() {
+    this.setState({
+      hasEnterImg: false
+    })
+  }
   getDetail(){
     const {data,formulaResult,calcuResult} = this.props;
-    const {formulaId,optionId,possible,radioVal,calcuValues} = this.state;
+    const {formulaId,optionId,possible,radioVal,calcuValues,currentIndex,hasEnterImg} = this.state;
     let list = data&&data.map((v,i)=>{
                     return <div className={style["list"]}>
                       {v.name?<p>
-                                <span>{'患者可能有'+v.name}</span>
-                                <img src={infoPic} className={style["infoPic"]} onClick={this.showInfo.bind(this,v.id)}/>
+                                <span>患者可能有</span>
+                                <span
+                                  className={style['dis-name']}
+                                  onMouseEnter={this.handleMouseEnterDrug.bind(this, i)}
+                                  onMouseLeave = {this.handleMouseLeaveDrug.bind(this)}
+                                >
+                                  {v.name}
+                                  {<img className={style['info-img']}  
+                                    style ={currentIndex === i  ? {display: "inline-block"} : {display: "none"}}
+                                    src={currentIndex === i ?(hasEnterImg ? infoMove : infoShow ): infoShow} 
+                                    onMouseEnter={this.handleMouseEnterImg.bind(this)}
+                                    onMouseLeave = {this.handleMouseLeaveImg.bind(this)}
+                                    onClick={this.showInfo.bind(this,v.id)}/>}
+                                
+                                </span>
+                                {/* <img src={infoShow} className={style["infoPic"]} onClick={this.showInfo.bind(this,v.id)}/> */}
+                                
                               </p>:''}
                       {v.details&&v.details.map((it,j)=>{

+ 13 - 1
src/components/ChronicInfo/index.less

@@ -263,4 +263,16 @@
   }
   .recomand{
     color:#3B9ED0;
-  }
+  }
+  .dis-name {
+    position: relative;
+    cursor: pointer;
+  }
+  .info-img {
+    position: absolute;
+    width: 15px;
+    top: -14px;
+    left: 50%;
+    margin-left: -7px;
+    cursor: pointer;
+}

+ 17 - 1
src/components/MultSpread/index.jsx

@@ -27,6 +27,7 @@ class MultSpread extends Component{
     super(props);
     this.state = {
       editable: false,
+      numDoms:[]
     };
     this.$cont = React.createRef();
     this.changeToEdit = this.changeToEdit.bind(this);
@@ -41,11 +42,22 @@ class MultSpread extends Component{
     const hasAdd = showAdd?style['add']:'';
     return classNames(isSelected,hasAdd,orgBorder);
   }
+  saveDoms(it){
+    const doms = this.state.numDoms;
+    doms.push(it);
+    this.setState({
+      numDoms:doms
+    });
+  }
+  setNextFocus(i){
+    const doms = this.state.numDoms;
+    doms[i+1]&&doms[i+1].current.focus();
+  }
   getLabels(){
     const {data,ikey,showArr,copyId,selecteds,boxMark} = this.props;
     const {editable}= this.state;
     let show = false;
-    let inx = '';
+    let inx = '',count=0;
     const list = data.map((it,i)=>{
       inx=ikey+''+i;
       show = editable?false:showArr&&showArr[inx];
@@ -104,6 +116,10 @@ class MultSpread extends Component{
           return <NumberDrop prefix={it.labelPrefix}
                              suffix={it.labelSuffix}
                              placeholder={it.name}
+                             //inputRef = {this['$inp'+(count++)]}
+                             saveDoms={this.saveDoms.bind(this)}
+                             reFocus={this.setNextFocus.bind(this)}
+                             num = {count++}
                              min={min}
                              max={max}
                              show={show}

+ 17 - 16
src/components/NumberDrop/index.jsx

@@ -32,14 +32,14 @@ class NumberDrop extends Component{
     this.$pre = React.createRef();
     this.$suf = React.createRef();
     this.$cont = React.createRef();
-    this.select = this.select.bind(this);
+    //this.select = this.select.bind(this);
     this.numInpBlur = this.numInpBlur.bind(this);
     this.handleSpanInp = this.handleSpanInp.bind(this);
     this.handleNumClick = this.handleNumClick.bind(this);
     this.handleNumFocus = this.handleNumFocus.bind(this);
     this.handleBlur = this.handleBlur.bind(this);
     this.changeToEdit = this.changeToEdit.bind(this);
-    // this.handleKeyDowm = this.handleKeyDowm.bind(this);
+    this.handleKeyDowm = this.handleKeyDowm.bind(this);
     this.beyondArea = this.beyondArea.bind(this);
   }
   select(text){        //选中键盘上数字事件
@@ -93,6 +93,13 @@ class NumberDrop extends Component{
     }
     e.stopPropagation();
   }
+  handleKeyDowm(e){
+    if(e.keyCode==13){
+      const {reFocus,num,handleHide} = this.props;
+      reFocus&&reFocus(num);
+      handleHide && handleHide();
+    }
+  }
   handleNumClick(e){     //数字框不可编辑的状态时点击事件,点击将数字框变为可输入且下拉不再显示直到失焦后再次聚集
     const {show,handleShow,ikey,id,patId,handleHide,value} = this.props;
     if(show) {
@@ -191,21 +198,9 @@ class NumberDrop extends Component{
     const {handleHide} = this.props;
     handleHide&&handleHide();
   }
-  // handleKeyDowm(e){
-    // handleEnter();
-    //只能输入数字
-    /*const key = e.key;
-    const ctrlOn = e.ctrlKey;
-    const isCopyPaste = ctrlOn&&(key=='v'||key=='c');
-    if((!/[0-9|.|~|\/]/.test(key)&&key.length==1&&!isCopyPaste)){
-      e.preventDefault();
-      return false;
-    }*/
-  // }
   getClasses(){         //整个标签是否有值的状态
     const {hideTag,placeholder,value,isImports} = this.props;
-    const $span = this.$span.current;
-    const val = value;//$span&&$span.innerText.trim()||value;
+    const val = value;
     const blueBorder = this.state.editable?style['blue-border']:'';
     const isSelected = val&&val!=placeholder?style['selected']:style['container'];
     const orgBorder = isImports&&!(val&&val!=placeholder)?style['orange-border']:'';
@@ -252,6 +247,11 @@ class NumberDrop extends Component{
     //设置最小宽度避免输入后宽度跳动
     const spanWidth = window.getComputedStyle(this.$span.current).width;
     this.$span.current.style.minWidth=spanWidth;
+    //保存输入框dom以便聚焦
+    const {saveDoms,num} = this.props;
+    //console.log(num);
+    saveDoms&&saveDoms(this.$span);
+    //console.log(this.props.inputRef)
   }
   render(){
     const {prefix,suffix,show,value,handleHide,allClick} = this.props;
@@ -270,12 +270,13 @@ class NumberDrop extends Component{
             contentEditable={true}
             style={{minWidth:'10px',display:'inline-block',textAlign:'center'}}
             ref = {this.$span}
+            onkeydown={this.handleKeyDowm}
             onBlur={this.numInpBlur}
             onInput={this.handleSpanInp}
             className={this.getSpanClass()}
             >&nbsp;{value||placeholder}</span>
       <span ref = {this.$suf}>&nbsp;{suffix}</span>
-      <NumberPan handleSelect={(text)=>this.select(text)}
+      <NumberPan handleSelect={this.select.bind(this)}
                  onClose={handleHide}
                  show={show} 
                  toClear={!hasSelect}

+ 1 - 0
src/components/Treat/AdverseReactions/index.less

@@ -38,6 +38,7 @@
     top: -15px;
     left: 50%;
     margin-left: -8px;
+    cursor: pointer;
 }
 .last-treat-big-name-box {
     display: inline-block;

+ 2 - 1
src/components/Treat/DrugHistory/LastDrug/index.less

@@ -11,7 +11,7 @@
 }
 .last-common-warpper {
     position: relative;
-    margin: 0 20px 0 0;
+    margin: 0 4px 0 0;
     display: inline-block;
 }
 .info-img {
@@ -20,4 +20,5 @@
     top: -8px;
     left: 50%;
     margin-left: -7px;
+    cursor: pointer;
 }

+ 1 - 0
src/components/Treat/DrugTreat/index.less

@@ -37,6 +37,7 @@
     top: -15px;
     left: 50%;
     margin-left: -7px;
+    cursor: pointer;
 }
 .info-flag {
     display: inline-block;

+ 1 - 0
src/components/TreatDesc/index.less

@@ -65,6 +65,7 @@
     top: -15px;
     left: 50%;
     margin-left: -7px;
+    cursor: pointer;
 }
 .info-flag {
     display: inline-block;