选中删除

src/common/components/EditableSpan/index.jsx

@@ -39,6 +39,8 @@ class EditableSpan extends Component{
     this.handleKeyup = this.handleKeyup.bind(this);
     this.moveEnd = this.moveEnd.bind(this);
     this.handleClick = this.handleClick.bind(this);
+    this.selectStart = this.selectStart.bind(this);
+    this.selectEnd=this.selectEnd.bind(this);
   }
   handleFocus(e){
     e.stopPropagation();
@@ -205,7 +207,7 @@ class EditableSpan extends Component{
     }
   }
   handleKeyup(e){
-    const {boxMark,handleKeydown,removeId,handleClear,removeSpan,handleChange} = this.props;
+    const {boxMark,handleKeydown,removeId,handleClear,removeSpan,handleChange,select_end} = this.props;
     const {preVal,index} = this.state;
     const ev = e||window.event;
     const target = ev.target||ev.srcElement;
@@ -272,7 +274,7 @@ class EditableSpan extends Component{
       }
     }
 
-    if(ev.keyCode==8){
+    if(ev.keyCode==8&&!select_end){
       // 主诉现病史去重：删除最后一个字的时候移除该数据（将name、id和value替换成空）并移除id
       // 前面是标签，内容为空时再删一次才移除标签；前面是文本，则直接移除；
       let preObj = $(this.$span.current).prev();
@@ -359,8 +361,16 @@ class EditableSpan extends Component{
       this.$span.current.innerText?(this.$span.current.innerText = value||''):(this.$span.current.innerHTML = value||'');
     }
   }
+  selectStart(){
+    const {i,setSelectArea,boxMark}= this.props;
+    setSelectArea({i,boxMark,dir:'start'});
+  }
+  selectEnd(){
+    const {i,setSelectArea,boxMark}= this.props;
+    setSelectArea({i,boxMark,dir:'end'});
+  }
   getClass(){
-    const {full,value,saveText,i,preIsExt,afterIsExt} = this.props;
+    const {full,value,saveText,i,preIsExt,afterIsExt,mouseSelect} = this.props;
     const br = preIsExt&&!afterIsExt;       //最后一个体征标签
     const preSelected = saveText[i-1];
     const isFull = full?' '+style['full']:'';       //是否宽度设为整行宽度
@@ -368,11 +378,12 @@ class EditableSpan extends Component{
     const ext = preIsExt?style['ext']:style['unselect'];
     const unselect = value.match(config.punctuationReg)||preSelected?'':ext;
     const hasBr = br?style['editable-br']:'';       //最后一个体征标签换行
+    const selectedArea = mouseSelect?style['selected-area']:'';
     const $span = this.$span.current;
     if(br&&$span&&!$span.innerText){
       this.$span.current.innerHTML=' ';
     }
-    return classNames(style['editable-span'],isFull,unselect,hasBr,setFontColorSize(2,6));
+    return classNames(style['editable-span'],isFull,unselect,hasBr,setFontColorSize(2,6),selectedArea);
   }
 
   render() {
@@ -382,6 +393,8 @@ class EditableSpan extends Component{
                  onInput={this.onChange}
                  onFocus={this.handleFocus}
                  onBlur={this.handleBlur}
+                 onmousedown={this.selectStart}
+                 onmouseup={this.selectEnd}
                  onkeydown={this.handleKeydown}
                  onclick={this.handleClick}
                  onkeyup={this.handleKeyup}></span>;

src/common/components/EditableSpan/index.less

@@ -6,11 +6,16 @@
   min-width: 10px;
   // line-height: 2;
   min-height: 16px;//火狐需要
+  height: 25px;
   line-height: 22px;
   vertical-align: unset;
   text-align: left;
   padding-right: 1px;//火狐左右移动需要
   font-weight: bold;
+  &.selected-area{
+  background: #338fff;
+  color: #fff!important;
+}
 }
 .editable-br{
   .editable-span;

src/common/components/InlineTag/index.jsx

@@ -77,19 +77,20 @@ class InlineTag extends Component {
     }
   }
   getStyle(){
-    const {hideTag,placeholder,isExtBlue} = this.props;
+    const {hideTag,placeholder,isExtBlue,mouseSelect} = this.props;
     const value = this.state.value;
     const ext = isExtBlue?style['ext']:'';//是否为体征
+    const selectedArea = mouseSelect?style['selected-area']:'';
     if(hideTag){//是否是多标签组合
       if(value){
-        return classNames(style['selected-no-tag'], setFontColorSize());
+        return classNames(style['selected-no-tag'], setFontColorSize(),selectedArea);
       }
-      return classNames(style['no-tag'],ext, setFontColorSize(2),'prefixUnsetColor');
+      return classNames(style['no-tag'],ext, setFontColorSize(2),'prefixUnsetColor',selectedArea);
     }
     if(!value||value.trim()==placeholder){//灰色标签
-      return classNames(style['gray'],ext, setFontColorSize(2));
+      return classNames(style['gray'],ext, setFontColorSize(2),selectedArea);
     }
-    return classNames(style['selected-tag'],ext, setFontColorSize());
+    return classNames(style['selected-tag'],ext, setFontColorSize(),selectedArea);
   }
   moveEnd(obj) {
     if(window.getSelection){//ie11 10 9 ff safari
@@ -108,6 +109,12 @@ class InlineTag extends Component {
   handleFixClick(){
     this.moveEnd(this.$span.current);
   }
+  handleMouseUp(){
+    const {select_start,i,setSelectArea,boxMark}= this.props;
+    if(select_start!==undefined){
+      setSelectArea({i,boxMark,dir:'end'});
+    }
+  }
   componentDidMount(){
     //设置最小宽度避免输入后宽度跳动
     this.$span.current.innerHTML=this.props.placeholder;
@@ -117,7 +124,8 @@ class InlineTag extends Component {
   render(){
     const {prefix,suffix,isExtBlue} = this.props;
     return <div className={this.getStyle()}
-                onClick={this.handleFixClick}>
+                onClick={this.handleFixClick}
+                onMouseUp={this.handleMouseUp.bind(this)}>
                 <span className="prefixUnset">{prefix}</span>
                 <span className={`${style['free-in']}`}
                       contentEditable={true}

src/common/components/ItemBox/index.jsx

@@ -30,6 +30,7 @@ class ItemBox extends Component {
   }
 
   handleClick(e){
+    e.stopPropagation();
     const {handleClick} = this.props;
     handleClick && handleClick(e);//为了获取鼠标位置，显示搜索结果框；
   }

src/common/less/variables.less

@@ -143,6 +143,10 @@
     /*width: 8px;*/
     display: inline-block;
   }
+  &.selected-area{
+     background: #338fff;
+    color: #fff!important;
+   }
  }
 .selected-tag{
   position: relative;//发热
@@ -151,7 +155,11 @@
   font-weight: bold;
   /*padding: 0 3px 0;*/
   border-bottom: 1px @border-color solid;
+  &.selected-area{
+    background: #338fff;
+  }
 }
+
 .no-tag{
   display: inline-block;
   position: relative;

src/components/MultSpread/index.jsx

@@ -48,13 +48,14 @@ class MultSpread extends Component{
     this.setBMIstate = this.setBMIstate.bind(this);
   }
   getClass(){
-    const {saveText,ikey,showAdd,isExtBlue} = this.props;
+    const {saveText,ikey,showAdd,isExtBlue,mouseSelect} = this.props;
     const labelInx = tools.getLabelIndex(ikey);
     const text = saveText&&saveText[+labelInx];
     //const orgBorder = isImports&&!text?style['orange-border']:'';
     const isSelected = text?style['selected']:style['container'];
     const hasAdd = showAdd?style['add']:'';
-    return classNames(isSelected,hasAdd,setFontColorSize(isExtBlue?2:!!text?'':1));
+    const selectedArea = mouseSelect?style['selected-area']:'';
+    return classNames(isSelected,hasAdd,setFontColorSize(isExtBlue?2:!!text?'':1),selectedArea);
   }
   saveDoms(it){
     const doms = this.state.numDoms;

src/components/Multiple/index.jsx

@@ -37,10 +37,11 @@ class Multiple extends react.Component{
   }
 
   getClass(){
-    const {show,value,hideTag,isImports,isExtBlue} = this.props;
+    const {show,value,hideTag,isImports,isExtBlue,mouseSelect} = this.props;
     const orgBorder = isImports&&!value?style['orange-border']:'';
     const ext = isExtBlue?style['ext']:'';
     const editBorder = this.state.editable?style['blue-border']:'';
+    const selectedArea = mouseSelect?style['selected-area']:'';
     if(show){
       $(this.$div.current).addClass(style['borderd']);
     }else{
@@ -48,14 +49,14 @@ class Multiple extends react.Component{
     }
     if(value){
       if(hideTag){
-          return classNames(style['hide-tag'],orgBorder,setFontColorSize(isExtBlue?2:''))
+          return classNames(style['hide-tag'],orgBorder,setFontColorSize(isExtBlue?2:''),selectedArea)
         }
-      return classNames(style['selected-tag'],orgBorder,editBorder,setFontColorSize());
+      return classNames(style['selected-tag'],orgBorder,editBorder,setFontColorSize(),selectedArea);
     }else{
       if(hideTag){
         return isExtBlue?classNames(setFontColorSize(2)):classNames(setFontColorSize(2),'prefixUnsetColor')
       }
-      return classNames(style['tag'],orgBorder,ext,setFontColorSize(1));
+      return classNames(style['tag'],orgBorder,ext,setFontColorSize(1),selectedArea);
     }
     // if(value){
       //   return hideTag?classNames(style['hide-tag'],orgBorder,setFontColorSize(isExtBlue?2:'')):classNames(style['selected-tag'],orgBorder,editBorder,setFontColorSize());
@@ -160,6 +161,12 @@ class Multiple extends react.Component{
     handleConfirm&&handleConfirm(params);
     handleHide&&handleHide();
   }
+  handleMouseUp(){
+    const {select_start,i,setSelectArea,boxMark}= this.props;
+    if(select_start!==undefined){
+      setSelectArea({i,boxMark,dir:'end'});
+    }
+  }
 
   componentDidMount(){
     if(isIE()){
@@ -179,6 +186,7 @@ class Multiple extends react.Component{
       onBlur={this.handleBlur}
       onInput={this.onChange}
       onKeyDown={handleEnter}
+      onMouseUp={this.handleMouseUp.bind(this)}
       contentEditable={editable}>{value||placeholder}</div>
       <div className={this.getListClass()} contentEditable="false">
         <SlideItem

src/components/NumberDrop/index.jsx

@@ -198,13 +198,14 @@ class NumberDrop extends Component{
     handleHide&&handleHide();
   }
   getClasses(nospecial){         //整个标签是否有值的状态
-    const {hideTag,placeholder,isImports,isExtBlue,isSelectAll} = this.props;
+    const {hideTag,placeholder,isImports,isExtBlue,isSelectAll,mouseSelect} = this.props;
     const val = this.state.value;
     const isSelected = val&&val!=placeholder?style['selected']:style['container'];
     const orgBorder = isImports&&!(val&&val!=placeholder)?style['orange-border']:'';
     const ext = isExtBlue?style['ext']:'';
     const noTag = hideTag?style['no-tag']:'';
-    return className(isSelected,noTag,orgBorder,ext,setFontColorSize(isExtBlue?2:val?2:isSelectAll?2:1));
+    const selectedArea = mouseSelect?style['selected-area']:'';
+    return className(isSelected,noTag,orgBorder,ext,setFontColorSize(isExtBlue?2:val?2:isSelectAll?2:1),selectedArea);
   }
   getSpanClass(nospecial){       //将被替换的文字选中状态显示
     const {isSelectAll} = this.props;
@@ -214,6 +215,12 @@ class NumberDrop extends Component{
   stopBubble(e){
     e.stopPropagation();
   }
+  handleMouseUp(){
+    const {select_start,i,setSelectArea,boxMark}= this.props;
+    if(select_start!==undefined){
+      setSelectArea({i,boxMark,dir:'end'});
+    }
+  }
   componentDidMount(){
     //设置最小宽度避免输入后宽度跳动
     const spanWidth = window.getComputedStyle(this.$span.current).width;
@@ -250,7 +257,8 @@ class NumberDrop extends Component{
     const {placeholder,hasSelect} = this.state;
     return <div className={this.getClasses(nospecial)}
                 style={{position:'relative'}}
-                onClick={allClick?this.handleNumClick:null}>
+                onClick={allClick?this.handleNumClick:null}
+                onMouseUp={this.handleMouseUp.bind(this)}>
       <span className={`${setFontColorSize(val?'':isSelectAll?2:isExtBlue?2:1)}`}>{prefix}</span>
       <span onFocus={this.handleNumFocus}
             onClick={allClick?null:this.handleNumClick}

src/components/NumberDrop/index.less

@@ -4,6 +4,10 @@
   &.ext{
     color: @extBlue!important;
   }
+  &.selected-area{
+    background: #338fff;
+    color: #fff!important;
+  }
   line-height: 22px;
   .blued{
     background: @blue;

src/components/NumberUnitDrop/index.jsx

@@ -68,25 +68,32 @@ class NumberUnitDrop extends Component{
     handleHide&&handleHide();
   }
 
+  handleMouseUp(){
+    const {select_start,i,setSelectArea,boxMark}= this.props;
+    if(select_start!==undefined){
+      setSelectArea({i,boxMark,dir:'end'});
+    }
+  }
   getClasses(){         //整个标签是否有值的状态
-    const {value,hideTag,show,isImports,isExtBlue} = this.props;
+    const {value,hideTag,show,isImports,isExtBlue,mouseSelect} = this.props;
     const inpValue = this.state.value;
     const blueBorder = this.state.editable?style['blue-border']:'';
     const isSelected = value||inpValue?style['selected']:style['container'];
     const orgBorder = isImports&&!(value||inpValue)?style['orange-border']:'';
     const noTag = hideTag?style['no-tag']:'';
+    const selectedArea = mouseSelect?style['selected-area']:'';
     if(show){
       $(this.$cont.current).addClass(style['borderd']);
     }else{
       $(this.$cont.current).removeClass(style['borderd']);
     }
     if(value){
-      return className(isSelected,noTag,blueBorder,orgBorder,setFontColorSize(isExtBlue?2:''));
+      return className(isSelected,noTag,blueBorder,orgBorder,setFontColorSize(isExtBlue?2:''),selectedArea);
     }else{
       if(isExtBlue){
-        return classNames(isSelected,noTag,blueBorder,orgBorder, setFontColorSize(2),'prefixUnsetColor');
+        return classNames(isSelected,noTag,blueBorder,orgBorder, setFontColorSize(2),'prefixUnsetColor',selectedArea);
       }else{
-        return className(isSelected,noTag,blueBorder,orgBorder,setFontColorSize(1));
+        return className(isSelected,noTag,blueBorder,orgBorder,setFontColorSize(1),selectedArea);
       }
     }
   }
@@ -96,6 +103,7 @@ class NumberUnitDrop extends Component{
     const {editable,hasSelect} = this.state;
     return <div className={this.getClasses()}
                 ref={this.$cont}
+                onMouseUp={this.handleMouseUp.bind(this)}
                 onClick={this.handleNumClick}>
       <span ref = {this.$pre} className="prefixUnset">{prefix?prefix+' ':prefix}</span>
       <span ref = {this.$span}

src/components/RadioDrop/index.jsx

@@ -34,12 +34,13 @@ class RadioDrop extends Component{
     this.handleEditLabel = this.handleEditLabel.bind(this);
   }
   getClass(){
-    const {value,hideTag,show,isImports,isExtBlue} = this.props;
+    const {value,hideTag,show,isImports,isExtBlue,mouseSelect} = this.props;
     const ext = isExtBlue?style['ext']:'';
     const orgBorder = isImports?style['orange-border']:'';      //橙色框高亮
     const editBorder = this.state.editable?style['blue-border']:'';
+    const selectedArea = mouseSelect?style['selected-area']:'';
     if(show){
-      $(this.$cont.current).addClass(style['borderd']);
+      $(this.$cont.current).addClass(style['borderd'],);
     }else{
       $(this.$cont.current).removeClass(style['borderd']);
     }
@@ -48,14 +49,14 @@ class RadioDrop extends Component{
     // }
     if(value){
       if(hideTag){
-        return classNames(style['no-tag'],ext,setFontColorSize(isExtBlue?2:''));
+        return classNames(style['no-tag'],ext,setFontColorSize(isExtBlue?2:''),selectedArea);
       }
-      return classNames(style['selected-tag'],ext,editBorder,setFontColorSize());
+      return classNames(style['selected-tag'],ext,editBorder,setFontColorSize(),selectedArea);
     }else{
       if(hideTag){
-        return isExtBlue?classNames(setFontColorSize(2)):classNames(setFontColorSize(2),'prefixUnsetColor')
+        return isExtBlue?classNames(setFontColorSize(2)):classNames(setFontColorSize(2),'prefixUnsetColor',)
       }
-      return classNames(style['tag'],orgBorder,ext,setFontColorSize(1));
+      return classNames(style['tag'],orgBorder,ext,setFontColorSize(1),selectedArea);
     }
   }
   handleSelect(item){
@@ -148,6 +149,12 @@ class RadioDrop extends Component{
     })
     handleDbclick&&handleDbclick({id:patId||id});
   }
+  handleMouseUp(){
+    const {select_start,i,setSelectArea,boxMark}= this.props;
+    if(select_start!==undefined){
+      setSelectArea({i,boxMark,dir:'end'});
+    }
+  }
   render(){
     const {data,placeholder,show,value,hideTag,boxMark} = this.props;
     const {tmpDom} = this.state
@@ -161,6 +168,7 @@ class RadioDrop extends Component{
            onDoubleClick={hideTag?null:this.handledbClick}
            onFocus={(e)=>{e.stopPropagation()}}
            onClick={(e)=>this.handleShow(e,true)}
+           onMouseUp={this.handleMouseUp.bind(this)}
            onKeyDown={handleEnter}>
         {value||placeholder}
       </div>

src/components/RadioInpDrop/index.jsx

@@ -30,9 +30,10 @@ class RadioInpDrop extends Component{
     this.handleInnerBlur = this.handleInnerBlur.bind(this);
   }
   getClass(){
-    const {value,hideTag,show,isImports,isExtBlue} = this.props;
+    const {value,hideTag,show,isImports,isExtBlue,mouseSelect} = this.props;
     const orgBorder = isImports&&!value?style['orange-border']:'';    //查体，是否橙色框高亮
     const ext = isExtBlue?style['ext']:'';      //查体，是否是体征
+    const selectedArea = mouseSelect?style['selected-area']:'';
     if(show){
       $(this.$cont.current).addClass(style['borderd']);
     }else{
@@ -40,14 +41,14 @@ class RadioInpDrop extends Component{
     }
     if(value){
       if(hideTag){
-        return classNames(style['no-tag'],ext,setFontColorSize());
+        return classNames(style['no-tag'],ext,setFontColorSize(),selectedArea);
       }
-      return classNames(style['selected-tag'],setFontColorSize());
+      return classNames(style['selected-tag'],setFontColorSize(),selectedArea);
     }else{
       if(hideTag){
-        return classNames(style['no-tag'],ext,setFontColorSize(2));
+        return classNames(style['no-tag'],ext,setFontColorSize(2),selectedArea);
       }
-      return classNames(style['tag'],orgBorder,ext,setFontColorSize(2,6));
+      return classNames(style['tag'],orgBorder,ext,setFontColorSize(2,6),selectedArea);
     }
   }
   handleSelect(item){
@@ -95,6 +96,12 @@ class RadioInpDrop extends Component{
     });
     handleSaveInp({values:vals,ikey,boxMark,mainSaveText});
   }
+  handleMouseUp(){
+    const {select_start,i,setSelectArea,boxMark}= this.props;
+    if(select_start!==undefined){
+      setSelectArea({i,boxMark,dir:'end'});
+    }
+  }
   parseInputDom(){
     const {mainSaveText,ikey,boxMark} = this.props;
     const {texts} = this.state;
@@ -122,6 +129,7 @@ class RadioInpDrop extends Component{
     return <div className={style['container']} ref = {this.$cont}>
       <div className={this.getClass()}
            onClick={(e)=>this.handleShow(e)}
+           onMouseUp={this.handleMouseUp.bind(this)}
            onKeyDown={handleEnter}>
         {vals?this.parseInputDom():<span className='inheritStyle'>{placeholder}</span>}
       </div>

src/components/SpreadDrop/index.jsx

@@ -341,9 +341,10 @@ class SpreadDrop extends Component{
     });
   }
   getClass(){
-    const {isImports,show,value,isExtBlue,defaulted} = this.props;
+    const {isImports,show,value,isExtBlue,defaulted,mouseSelect} = this.props;
     const blueBorder = this.state.editable?style['blue-border']:'';
     const orgBorder = isImports&&!value?style['orange-border']:'';
+    const selectedArea = mouseSelect?style['selected-area']:'';
     const ext = isExtBlue?style['ext']:'';
     let showDefaulted = this.ifDefault();
     if(show){
@@ -352,18 +353,24 @@ class SpreadDrop extends Component{
       $(this.$div.current).removeClass(style['borderd']);
     }
     if(value||(showDefaulted&&value===undefined&&defaulted)){
-      return classNames(style['selected-tag'],blueBorder,setFontColorSize());
+      return classNames(style['selected-tag'],blueBorder,setFontColorSize(),selectedArea);
     }
     if(!value){
-      return classNames(style['tag'],orgBorder,ext,setFontColorSize(2,6));
+      return classNames(style['tag'],orgBorder,ext,setFontColorSize(2,6),selectedArea);
     }
-    return classNames(style['tag'],orgBorder,ext,setFontColorSize(1));
+    return classNames(style['tag'],orgBorder,ext,setFontColorSize(1),selectedArea);
   }
   ifDefault(){
     const {type,otherDefault,curDefault,showVal} = this.props;
     const showDefaulted = ((type=='2'&&curDefault)||(type=='3'&&otherDefault))&&showVal;
     return showDefaulted;
   }
+  handleMouseUp(){
+    const {select_start,i,setSelectArea,boxMark}= this.props;
+    if(select_start!==undefined){
+      setSelectArea({i,boxMark,dir:'end'});
+    }
+  }
   componentDidMount(){
     if(isIE()){
       $(this.$div.current).onIe8Input(function(e){
@@ -381,7 +388,6 @@ class SpreadDrop extends Component{
     }
     const {editable} = this.state;
     return  <div className={style['container']}
-              /*onFocus={(e)=>e.stopPropagation()}*/
               onBlur={(e)=>e.stopPropagation()}
               onInput={(e)=>e.stopPropagation()}>
         <div
@@ -393,6 +399,7 @@ class SpreadDrop extends Component{
         onBlur={this.handleBlur}
         onInput={this.onChange}
         onkeydown={handleEnter}
+        onMouseUp={this.handleMouseUp.bind(this)}
         >{showV||placeholder}</div>
           <ListItems parDiv={this.$list} defaulted={showDefaulted&&defaulted} pos={pos} data={data} order={order} left={left} boxMark={type} tagType={tagType}
              show={show} handleSelect={this.handleSelect} handleConfirm={this.handleConfirm} handleClear={this.handleClear} {...this.state}></ListItems>

src/containers/EditableSpan.js

@@ -14,7 +14,8 @@ function mapStateToProps(state){//console.log(state)
   return {
     mainSaveText:state.mainSuit.saveText,
     isRead:state.homePage.isRead,
-    data:state.currentIll.data
+    data:state.currentIll.data,
+    select_end:state.homePage.select_end,
   }
 }
 
@@ -292,6 +293,12 @@ function mapDispatchToProps(dispatch,state) {
       dispatch({
         type:MAIN_REMOVE_SPAN
       })
+    },
+    setSelectArea(data){
+      dispatch({
+        type:'SET_SELECTED_AREA',
+        data
+      })
     }
   }
 }

src/containers/InlineTag.js

@@ -6,10 +6,12 @@ import {SETCURRENTINPUT,CURRENT_TEXT_LABEL} from '@types/currentIll';
 import {SETCHECKINPUT} from "@types/checkBody";
 import InlineTag from "../common/components/InlineTag";
 import {getLabelIndex} from '@utils/tools.js';
+import {SET_SELECTED_AREA} from '@types/homePage';
 
 function mapStateToProps(state){
   return {
     mainSaveText:state.mainSuit.saveText,
+    select_start:state.homePage.select_start,
   }
 }
 
@@ -36,6 +38,12 @@ function mapDispatchToProps(dispatch,store){
         subIndex:inner
       })
     },
+    setSelectArea(data){
+    dispatch({
+      type:SET_SELECTED_AREA,
+      data
+    })
+  }
   }
 }
 

src/containers/Multiple.js

@@ -1,7 +1,7 @@
 // import React from "react";
 import {connect} from "react-redux";
 import Multiple from "@components/Multiple";
-import {RESET,SETDROPSHOW,HIDEDROP,CLICKCOUNT} from '@store/types/homePage.js';
+import {RESET,SETDROPSHOW,HIDEDROP,CLICKCOUNT,SET_SELECTED_AREA} from '@store/types/homePage.js';
 import {CURRENT_MUL,CURRENT_TEXT_LABEL} from '@types/currentIll';
 import {MAINSUIT_MUL,CHANGE_LABELVAL} from '@types/mainSuit';
 import {OTHERHIS_MUL,CHANGEOTHERTEXTLABEL} from '@types/otherHistory';
@@ -136,6 +136,7 @@ function handleLabel(dispatch,obj){
 function mapStateToProps(state){
   return{
     mainSaveText:state.mainSuit.saveText,
+    select_start:state.homePage.select_start,
   }
 }
 
@@ -181,6 +182,12 @@ function mapDispatchToProps(dispatch){
           dispatch(billing('',params.ikey.substr(0,1)));
         }
       },500);
+    },
+    setSelectArea(data){
+      dispatch({
+        type:SET_SELECTED_AREA,
+        data
+      })
     }
   }
 }

src/containers/NumberDrop.js

@@ -3,7 +3,7 @@ import {connect} from 'react-redux';
 import NumberDrop from "@components/NumberDrop";
 import {SETNUMBER,CHANGEOTHERTEXTLABEL} from '@types/otherHistory';
 import {SETNUMBER4} from '@types/checkBody';
-import {SETDROPSHOW,CLICKCOUNT,HIDE,RESET,HIDEDROP,ISREAD} from '@types/homePage';
+import {SETDROPSHOW,CLICKCOUNT,HIDE,RESET,HIDEDROP,ISREAD,SET_SELECTED_AREA} from '@types/homePage';
 import {NUMBER_SELECT} from '@store/types/mainSuit';
 import {CURRENT_NUMBER} from '@store/types/currentIll';
 import {billing} from '@store/async-actions/pushMessage';
@@ -14,6 +14,7 @@ import config from '@config/index';
 function mapStateToProps(state){
   return {
     mainSaveText:state.mainSuit.saveText,
+    select_start:state.homePage.select_start,
   }
 }
 //查体数字键盘选中
@@ -102,6 +103,12 @@ function mapDispatchToProps(dispatch,store){
         type: RESET
       });*/
     },
+    setSelectArea(data){
+      dispatch({
+        type:SET_SELECTED_AREA,
+        data
+      })
+    }
   }
 }
 

src/containers/NumberUnitDrop.js

@@ -3,7 +3,7 @@ import {connect} from 'react-redux';
 import NumberUnitDrop from "@components/NumberUnitDrop";
 import {SETNUMBER,CHANGEOTHERTEXTLABEL} from '@types/otherHistory';
 import {SETNUMBER4,CHANGECHECKTEXTLABEL} from '@types/checkBody.js';
-import {SETDROPSHOW,CLICKCOUNT,HIDE,RESET,HIDEDROP,ISREAD} from '@types/homePage.js';
+import {SETDROPSHOW,CLICKCOUNT,HIDE,RESET,HIDEDROP,ISREAD,SET_SELECTED_AREA} from '@types/homePage.js';
 import {NUMBER_SELECT,CHANGE_LABELVAL} from '@store/types/mainSuit.js';
 import {CURRENT_NUMBER,CURRENT_TEXT_LABEL} from '@store/types/currentIll.js';
 import {Notify} from '@commonComp';
@@ -15,6 +15,7 @@ function mapStateToProps(state){
   return {
     mainSaveText:state.mainSuit.saveText,
     mainData:state.mainSuit.data,
+    select_start:state.homePage.select_start,
   }
 }
 //查体数字键盘选中
@@ -195,6 +196,12 @@ function mapDispatchToProps(dispatch,store){
       dispatch({
         type: ISREAD
       });
+    },
+    setSelectArea(data){
+      dispatch({
+        type:SET_SELECTED_AREA,
+        data
+      })
     }
   }
 }

src/containers/RadioDrop.js

@@ -3,7 +3,7 @@ import {connect} from 'react-redux';
 import RadioDrop from "@components/RadioDrop";
 import {SETRADIO,CLEARSELECTED,CONFIRMSELECTED,CHANGEOTHERTEXTLABEL} from '@types/otherHistory';
 import {SETSELECTED4,CHANGECHECKTEXTLABEL} from '@types/checkBody';
-import {SETDROPSHOW,HIDE,RESET,HIDEDROP,CLICKCOUNT,ISREAD} from '@types/homePage.js';
+import {SETDROPSHOW,HIDE,RESET,HIDEDROP,CLICKCOUNT,ISREAD,SET_SELECTED_AREA} from '@types/homePage.js';
 import {RADIO_SELECT,CHANGE_LABELVAL} from '@store/types/mainSuit.js';
 import {CURRENT_RADIO,CURRENT_TEXT_LABEL} from '@store/types/currentIll.js';
 import {Notify} from '@commonComp';
@@ -16,7 +16,8 @@ function mapStateToProps(state){
   return {
     mainSaveText:state.mainSuit.saveText,
     readDefault:typeConfig.readConfig[1],
-    confDefault:typeConfig.typeConfig[1]
+    confDefault:typeConfig.typeConfig[1],
+    select_start:state.homePage.select_start,
   }
 }
 
@@ -151,6 +152,12 @@ function mapDispatchToProps(dispatch,store){
       dispatch({
         type: RESET
       });
+    },
+    setSelectArea(data){
+      dispatch({
+        type:SET_SELECTED_AREA,
+        data
+      })
     }
   }
 }

src/containers/RadioInpDrop.js

@@ -3,7 +3,7 @@ import {connect} from 'react-redux';
 import RadioInpDrop from "@components/RadioInpDrop";
 import {SETRADIO,CLEARSELECTED,CONFIRMSELECTED,SET_OT_RADIO_INPUT_VAL} from '@types/otherHistory';
 import {SETSELECTED4,SET_CK_RADIO_INPUT_VAL} from '@types/checkBody';
-import {SETDROPSHOW,HIDE,RESET,HIDEDROP,CLICKCOUNT,ISREAD} from '@types/homePage.js';
+import {SETDROPSHOW,HIDE,RESET,HIDEDROP,CLICKCOUNT,ISREAD,SET_SELECTED_AREA} from '@types/homePage.js';
 import {RADIO_SELECT,SET_MS_RADIO_INPUT_VAL} from '@store/types/mainSuit.js';
 import {CURRENT_RADIO,SET_RADIO_INPUT_VALUE} from '@store/types/currentIll.js';
 import {Notify} from '@commonComp';
@@ -14,6 +14,7 @@ import config from '@config/index.js';
 function mapStateToProps(state){
   return {
     mainSaveText:state.mainSuit.saveText,
+    select_start:state.homePage.select_start,
   }
 }
 
@@ -161,6 +162,12 @@ function mapDispatchToProps(dispatch,store){
       dispatch({
         type: RESET
       });
+    },
+    setSelectArea(data){
+      dispatch({
+        type:SET_SELECTED_AREA,
+        data
+      })
     }
   }
 }

src/containers/SpreadDrop.js

@@ -3,7 +3,7 @@ import {connect} from 'react-redux';
 
 import SpreadDrop from '@components/SpreadDrop';
 import {SETSELECTED,CLEARSELECTED,CONFIRMSELECTED,SETOTHERCHECKBOX,CHANGEOTHERTEXTLABEL} from '@types/otherHistory';
-import {RESET,SETDROPSHOW,HIDEDROP,CLICKCOUNT,ISREAD} from '@store/types/homePage.js';
+import {RESET,SETDROPSHOW,HIDEDROP,CLICKCOUNT,ISREAD,SET_SELECTED_AREA} from '@store/types/homePage.js';
 import {getModules as fetchModules} from '@store/async-actions/fetchModules.js';
 import {getCommSymptomPush} from '@store/async-actions/mainSuit.js'
 import {GET_BIGDATAPUSH,MIX_CONFIRM,COMM_CONFIRM,CHANGE_LABELVAL} from '@store/types/mainSuit';
@@ -26,6 +26,7 @@ function mapStateToProps(state) {//console.log(state);
     windowWidth:homePage.windowWidth,
     otherDefault:+curOtherMode===1,
     curDefault:+curMode===1,
+    select_start:homePage.select_start,
   }
 }
 
@@ -544,6 +545,12 @@ function mapDispatchToProps(dispatch,store){
     },
     handleLabelChange(obj){//标签内输入
       handleLabel(dispatch,obj);
+    },
+    setSelectArea(data){
+      dispatch({
+        type:SET_SELECTED_AREA,
+        data
+      })
     }
   }
 }

src/containers/eleType.js

@@ -9,6 +9,8 @@ import InlineTag from '@containers/InlineTag';
 import NumberUnitDrop from '@containers/NumberUnitDrop';
 import Multiple from '@containers/Multiple';
 
+import store from '@store';
+
 /******
  * 下拉类型分发
  * 先根据tagType分为几个大类填写单
@@ -31,6 +33,8 @@ export function singleRadio(params){
       const list = data.questionDetailList&&data.questionDetailList.length>0?data.questionDetailList:data.questionMapping;
       return <RadioDrop data={custom&&custom.length?[...custom,...list]:list}
                         placeholder={data.name}
+                        mouseSelect={params.mouseSelected}
+                        i={i}
                         isGeneray={+data.selFlag===1}
                         isExtBlue={+data.specFlag===4?true:false}
                         show={showArr&&showArr[showInx]}
@@ -44,6 +48,9 @@ export function singleRadio(params){
       const dataList = data.questionDetailList&&data.questionDetailList.length>0?data.questionDetailList:data.questionMapping;
       return <Multiple data={dataList}
                      ikey={showInx}
+                     mouseSelect={params.mouseSelected}
+                     i={i}
+                     boxMark={boxMark}
                      placeholder={data.name}
                      value={data.value}
                      copyType={data.copyType}
@@ -57,11 +64,13 @@ export function singleRadio(params){
                      textSuffix={data.labelSuffix}
                      id={data.id}></Multiple>
     case 3:
-      return <EditableSpan {...params} value={data.value||data.value==''?data.value:data.name} update={Math.random()}/>;
+      return <EditableSpan {...params} mouseSelect={params.mouseSelected} value={data.value||data.value==''?data.value:data.name} update={Math.random()}/>;
     case 5://带单位数字键盘
       return <NumberUnitDrop prefix={data.labelPrefix}
                          suffix={data.labelSuffix}
                          placeholder={data.name}
+                         mouseSelect={params.mouseSelected}
+                         i={i}
                          isExtBlue={data.specFlag===4?true:false}
                          formulaCode={data.formulaCode}
                          boxMark={boxMark}
@@ -75,6 +84,8 @@ export function singleRadio(params){
       return <InlineTag prefix={data.labelPrefix}
                         suffix={data.labelSuffix}
                         boxMark={boxMark}
+                        mouseSelect={params.mouseSelected}
+                        i={i}
                         placeholder={data.name}
                         isExtBlue={data.specFlag===4?true:false}
                         value={data.value}
@@ -89,6 +100,8 @@ export function singleRadio(params){
                          suffix={data.labelSuffix}
                          min={min}
                          max={max}
+                         mouseSelect={params.mouseSelected}
+                         i={i}
                          formulaCode={data.formulaCode}
                          isExtBlue={data.specFlag===4?true:false}
                          placeholder={data.name}
@@ -104,6 +117,8 @@ export function singleRadio(params){
       return <RadioInpDrop data={data.questionDetailList}
                            vals={data.vals}
                         placeholder={data.name}
+                        mouseSelect={params.mouseSelected}
+                        i={i}
                         isExtBlue={data.specFlag===4?true:false}
                         show={showArr&&showArr[showInx]}
                         value = {data.value}
@@ -125,6 +140,8 @@ function multLabels(params){
                      showAdd = {+data.showAdd===1}
                      copyId={data.id}
                      fullData = {data}
+                     mouseSelect={params.mouseSelected}
+                     i={i}
                      isExtBlue={data.specFlag===4?true:false}
                      showArr={showArr||{}}
                      update={Math.random()}
@@ -151,7 +168,10 @@ function multCheckLabels(params,tagType){
   }
   return <SpreadDrop data={data.questionMapping}
                      pos={data.pos}
+                     i={i}
+                     boxMark={boxMark}
                      ikey={showInx}
+                     mouseSelect={params.mouseSelected}
                      defaulted={defaulted}
                      showVal={showVal}
                      setHighter={setHighter}
@@ -170,7 +190,11 @@ function multCheckLabels(params,tagType){
 }
 
 export default function(params){
-  
+  const {homePage} = store.getState();
+  const {select_start,select_end,select_boxMark}=homePage;
+  const {i,boxMark}=params;
+  const isInArea = select_start!==undefined&&select_end!==undefined&&(select_start<i||select_start==i)&&(select_end>i||select_end==i);
+  params.mouseSelected = select_boxMark===boxMark&&isInArea;
   const data = params.item;
   switch (+data.tagType) {
     case 1:
@@ -194,7 +218,7 @@ export default function(params){
         }
       }
       // 删除后value为空，应展示空而不是name
-      return <EditableSpan {...params} noSearch={data.noSearch} value={data.value||data.value==''?data.value:data.name} full={data.full||isLast}/>;
+      return <EditableSpan {...params} mouseSelect={params.mouseSelected} noSearch={data.noSearch} value={data.value||data.value==''?data.value:data.name} full={data.full||isLast}/>;
     case 11://推送类型
       return multCheckLabels(params,data.tagType);
     default:

src/modules/HomePage/index.jsx

@@ -6,12 +6,12 @@ import BodyContainer from "@components/BodyContainer";
 import {ConfirmModal} from '@commonComp';
 import store from '@store';
 
-import {HIDEDROP,SETMINSCREEN,SETSYSTEMCONFIG,SETPRE,SETREADDITEMS} from '@store/types/homePage.js';
+import {HIDEDROP,SETMINSCREEN,SETSYSTEMCONFIG,SETPRE,SETREADDITEMS,RESET_SELECT_TAG} from '@store/types/homePage.js';
 import {billing} from '@store/async-actions/pushMessage';
 import {CLEAR_SEARCH} from '@types/mainSuit';
 import {CURRENT_CLEAR} from '@types/currentIll';
 import {OTHERHIS_CLEAR} from '@types/otherHistory';
-import {CHECKBODY_CLEAR} from '@types/checkBody';
+import {CHECKBODY_CLEAR,DELETE_CHECK_SELECTED_TAGS} from '@types/checkBody';
 import style from './index.less';
 import {getInitModules,getChronic,getSystemConfig} from '@store/async-actions/homePage.js';
 import {getPreMsg} from '@store/async-actions/patInfo.js';
@@ -55,13 +55,14 @@ class HomePage extends Component {
             } 
         })
     }
-    hidePops(e){
-        const {hideAllDrop,handleClear } = this.props;
-    if(!this.isBar){    //onMousrdown的目标为滚动条时，标签填写单不关闭
-      hideAllDrop();        //隐藏填写单
-      handleClear&&handleClear();       //清空搜索结果
-    }
-
+    hidePops(){
+        const {hideAllDrop,handleClear,resetSelect } = this.props;
+        //重置选中范围
+        resetSelect();
+        if(!this.isBar){    //onMousrdown的目标为滚动条时，标签填写单不关闭
+          hideAllDrop();        //隐藏填写单
+          handleClear&&handleClear();       //清空搜索结果
+        }
     }
   setElem(e){
       //onMousedown的目标为滚动条时，标签填写单不关闭
@@ -70,11 +71,18 @@ class HomePage extends Component {
     }else{
       this.isBar = false;
     }
+  }
+  handleKeyUp(e){
+      const {deleteLabels} = this.props;
+    //删除选中标签
+    if(e.keyCode==8){
+      deleteLabels();
+    }
   }
     render() {
         const {flag,showPre,noReferRecord,referRecord} = this.props;
         return <div className={style['home-page']}
-                    onClick={this.hidePops} onmousedown={this.setElem.bind(this)}>
+                    onClick={this.hidePops} onmousedown={this.setElem.bind(this)} onkeyup={this.handleKeyUp.bind(this)}>
             <BannerContainer />
             {/* <InfoTitle /> */}
             <BodyContainer></BodyContainer>
@@ -102,7 +110,9 @@ const mapDispatchToProps = function (dispatch) {
       })
     },
     referRecord(){
-        pushAllDataList(1,'push',store.getState().homePage.preData,'preIcss');
+        const state = store.getState();
+        const {homePage} = state;
+        pushAllDataList(1,'push',homePage.preData,'preIcss');
         dispatch(billing())
         dispatch({type:SETPRE,show:false});
       },
@@ -143,7 +153,31 @@ const mapDispatchToProps = function (dispatch) {
 
             }
           });
-        }
+        },
+      deleteLabels(){   //选中删除标签
+        const state = store.getState();
+        const {homePage} = state;
+        const start = homePage.select_start;
+        const end = homePage.select_end;
+        const boxMark = homePage.select_boxMark;
+        dispatch({
+          type:DELETE_CHECK_SELECTED_TAGS,
+          start,
+          end
+        });
+        //删除后清楚选中标记
+        //setTimeout(()=>{
+          dispatch({
+            type:RESET_SELECT_TAG
+          });
+        //})
+
+      },
+      resetSelect(){
+          dispatch({
+            type:RESET_SELECT_TAG
+          })
+      }
     }
 };
 

src/store/reducers/checkBody.js

@@ -1,11 +1,11 @@
 import {RECOVER_TAG_CHECK,SET,SETNUMBER4,SETSELECTED4,SETCHECKBOX,ADDLABELITEM,SETCHECKTEXT,SETSEARCHDATA,
   SELECTSEARCHDATA,CHANGECHECKTEXTLABEL,CLEARCHECKBODY,CHECK_FOCUS_INDEX,CHECKBODY_CLEAR,
   SETCHECKINPUT,DEL_CHECKBODY,CHECKCONFIRMSELECTED,
-  CHECKBODY_MUL,DEL_CHECKBODY_LABLE,SET_CK_RADIO_INPUT_VAL,SET_IMPORT_CHECKBODY_LABEL,PRESET} from '../types/checkBody.js';
+  CHECKBODY_MUL,DEL_CHECKBODY_LABLE,SET_CK_RADIO_INPUT_VAL,SET_IMPORT_CHECKBODY_LABEL,PRESET,DELETE_CHECK_SELECTED_TAGS} from '../types/checkBody.js';
 import {recoveTag,set,setCheckBoxValue,
   setSearchData,insertLabelData,changeLabelVal,clearCheckBody,backspaceText
   ,confirm,multipleComfirn,delSingleLable,setImportCheckbodyLabel,preSetCheckbody} from '../actions/checkBody.js';
-import {setRadioInputValue,setRadioValue,setNumberValue,setCheckText,addLabelItem,setInputLabel} from '@utils/utils';
+import {setRadioInputValue,setRadioValue,setNumberValue,setCheckText,addLabelItem,setInputLabel,deleteSelectedLabels} from '@utils/utils';
 import config from '@config/index.js';
 
 const block = Object.assign(JSON.parse(config.textLabel),{full:true});//空白时保留一个自由文本标签
@@ -67,6 +67,8 @@ export default function(state=initState,action){
       return setImportCheckbodyLabel(state,action);
     case RECOVER_TAG_CHECK:
       return recoveTag(state,action);
+    case DELETE_CHECK_SELECTED_TAGS:
+      return deleteSelectedLabels(state,action);
     default:
       return res;
   }

src/store/reducers/homePage.js

@@ -1,5 +1,6 @@
 import {HIDE,RESET,SETINITDATA,SETDROPSHOW,SETADDITEMINIT,SETT0EDIT,SETREADDITEMS,SETPREDATA,
-  HIDEDROP,CLICKCOUNT,ISREAD,SETOTHERHISTORY,SETMINSCREEN,MODI_LOADING,GET_INSPECT_LIST,GET_ASSIST_LIST,SETALLMODULES,SETSYSTEMCONFIG,SETPRE} from '../types/homePage.js';
+  HIDEDROP,CLICKCOUNT,ISREAD,SETOTHERHISTORY,SETMINSCREEN,MODI_LOADING,GET_INSPECT_LIST,GET_ASSIST_LIST,
+  SETALLMODULES,SETSYSTEMCONFIG,SETPRE,RESET_SELECT_TAG,SET_SELECTED_AREA} from '../types/homePage.js';
 import {showDrop,setAddItemInit,setLabelToEdit,confirmHide,clickNum,getInspectList,getAssistList} from '../actions/homePage.js';
 
 const initState = {
@@ -79,6 +80,19 @@ export default function (state=initState,action) {
       res.showPre = action.show;
     case SETPREDATA:
       res.preData = action.preData;
+    case SET_SELECTED_AREA:
+      const {i,dir,boxMark} = action.data;
+      if(dir==='start'){      //重新开始选取区域，结束位置清空
+        delete res['select_end'];
+      }
+      res['select_'+dir]=i;
+      res.select_boxMark=boxMark;
+      return res;
+    case RESET_SELECT_TAG:
+      delete res.select_boxMark;
+      delete res.select_start;
+      delete res.select_end;
+      return res;
     default:
       return res;
   }

src/store/types/checkBody.js

@@ -19,4 +19,5 @@ export const DEL_CHECKBODY_LABLE = 'DEL_CHECKBODY_LABLE';
 export const SET_CK_RADIO_INPUT_VAL = 'SET_CK_RADIO_INPUT_VAL';
 export const SET_IMPORT_CHECKBODY_LABEL='SET_IMPORT_CHECKBODY_LABEL';
 export const PRESET = 'PRESET_CHECKBODY_DATA';
-export const RECOVER_TAG_CHECK = 'RECOVER_TAG_CHECK';     //恢复已删除标签
+export const RECOVER_TAG_CHECK = 'RECOVER_TAG_CHECK';     //恢复已删除标签
+export const DELETE_CHECK_SELECTED_TAGS='DELETE_CHECK_SELECTED_TAGS';

src/store/types/homePage.js

@@ -18,3 +18,5 @@ export const SETALLMODULES = 'SETALLMODULES';    //储存所有模板数据
 export const SETSYSTEMCONFIG = 'SETSYSTEMCONFIG';   //设置配置数据
 export const SETPRE = 'SETPRE';   //设置预问诊引用弹窗
 export const SETPREDATA = 'SETPREDATA';   //设置预问诊数据暂存
+export const RESET_SELECT_TAG='RESET_SELECT_TAG';   //重置选中标签的各标记
+export const SET_SELECTED_AREA='SET_SELECTED_AREA';

src/utils/utils.js

@@ -234,4 +234,13 @@ export async function getBigPush(type,symData,save){
     storageLocal.set('emrParam',savePm);      //推送数据存储，用作推送前对比是否有变，有变才推送
   }
   return json(api.push,params);
+}
+
+//删除选中标签
+export function deleteSelectedLabels(state,action){
+  let res = Object.assign({}, state);
+  const {start,end} = action;
+  res.data.splice(start,end-start);
+  res.update = Math.random();
+  return res;
 }