|
@@ -3,7 +3,7 @@ import className from 'classnames';
|
|
|
import {NumberPan,Notify} from '@commonComp';
|
|
|
import style from './index.less';
|
|
|
import $ from "jquery";
|
|
|
-import {handleEnter,getPageCoordinate} from '@utils/tools.js';
|
|
|
+import {getPageCoordinate} from '@utils/tools.js';
|
|
|
/***
|
|
|
* author:zn@2018-11-19
|
|
|
* 接收参数:
|
|
@@ -18,7 +18,7 @@ class NumberDrop extends Component{
|
|
|
constructor(props){
|
|
|
super(props);
|
|
|
this.state={
|
|
|
- editable:false, //标签是否可输入
|
|
|
+ /*editable:false, //标签是否可输入*/
|
|
|
timer:null,
|
|
|
sltTimer:null,
|
|
|
blurTimer:null,
|
|
@@ -30,16 +30,10 @@ class NumberDrop extends Component{
|
|
|
placeholder:props.placeholder
|
|
|
};
|
|
|
this.$span = React.createRef();
|
|
|
- this.$pre = React.createRef();
|
|
|
- this.$suf = React.createRef();
|
|
|
- this.$cont = React.createRef();
|
|
|
- //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.beyondArea = this.beyondArea.bind(this);
|
|
|
}
|
|
@@ -109,23 +103,12 @@ class NumberDrop extends Component{
|
|
|
handleHide && handleHide();
|
|
|
return;
|
|
|
}else{
|
|
|
- const {editable} = this.state;
|
|
|
- if(editable){
|
|
|
- return;
|
|
|
- }
|
|
|
- const that = this;
|
|
|
- //双击时不显示下拉
|
|
|
- clearTimeout(that.state.timer);
|
|
|
- const timer = setTimeout(function(){
|
|
|
- //只有弹窗关闭则点击数字键盘会清空当前数据
|
|
|
- that.$span.current.focus();
|
|
|
- that.setState({
|
|
|
- hasSelect:false
|
|
|
- });
|
|
|
- handleShow&&handleShow({ikey,id:patId||id});
|
|
|
- },300);
|
|
|
+ this.$span.current.focus();
|
|
|
+ this.setState({
|
|
|
+ hasSelect:false
|
|
|
+ });
|
|
|
+ handleShow&&handleShow({ikey,id:patId||id});
|
|
|
this.setState({
|
|
|
- timer,
|
|
|
boxLeft:getPageCoordinate(e).boxLeft,
|
|
|
boxTop:getPageCoordinate(e).boxTop,
|
|
|
tmpScroll: $("#addScrollEvent")[0].scrollTop,
|
|
@@ -207,42 +190,10 @@ class NumberDrop extends Component{
|
|
|
getClasses(){ //整个标签是否有值的状态
|
|
|
const {hideTag,placeholder,value,isImports} = this.props;
|
|
|
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']:'';
|
|
|
const noTag = hideTag?style['no-tag']:'';
|
|
|
- return className(isSelected,noTag,blueBorder,orgBorder);
|
|
|
- }
|
|
|
- changeToEdit(e){ //整个标签双击编辑状态
|
|
|
- window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
|
|
|
- const {value,id,handleDbclick,patId,handleHide,show} = this.props;
|
|
|
- clearTimeout(this.state.timer);//取消延时的单击事件
|
|
|
- e.preventDefault();
|
|
|
- if(show){
|
|
|
- handleHide&&handleHide();
|
|
|
- }
|
|
|
- if(value&&value.trim()) {//有选中值的标签才能双击编辑
|
|
|
- this.setState({
|
|
|
- editable: true
|
|
|
- });
|
|
|
- setTimeout(()=>{
|
|
|
- this.$cont.current.focus();
|
|
|
- })
|
|
|
- //双击埋点记录
|
|
|
- handleDbclick && handleDbclick({id:patId||id});
|
|
|
- }
|
|
|
- }
|
|
|
- handleBlur(e){ //双击编辑blur
|
|
|
- const {handleLabelChange,ikey,boxMark,value} = this.props;
|
|
|
- this.setState({
|
|
|
- editable: false
|
|
|
- });
|
|
|
- let totalVal = e.target.innerText.trim();
|
|
|
- let changeVal = this.$span.current.innerText.trim();//数字框值-修改后;去掉前空格避免多空格叠加
|
|
|
- let prefix = this.$pre.current.innerText.trim(); //前缀值-修改后
|
|
|
- let suffix = this.$suf.current.innerText.trim(); //后缀值-修改后
|
|
|
- // console.log('数字框:'+changeVal,";全部:"+totalVal,";前缀:"+prefix+";后缀:"+suffix);
|
|
|
- handleLabelChange && handleLabelChange({ikey,changeVal,type:boxMark,totalVal,prefix,suffix});
|
|
|
+ return className(isSelected,noTag,orgBorder);
|
|
|
}
|
|
|
getSpanClass(){ //将被替换的文字选中状态显示
|
|
|
const cls = this.props.show?style['blued']:'';
|
|
@@ -264,17 +215,10 @@ class NumberDrop extends Component{
|
|
|
}
|
|
|
render(){
|
|
|
const {prefix,suffix,show,value,handleHide,allClick} = this.props;
|
|
|
- const {placeholder,editable,hasSelect,boxTop,boxLeft} = this.state;
|
|
|
- //console.log(prefix,value,placeholder+'1',this.props.placeholder)
|
|
|
+ const {placeholder,hasSelect,boxTop,boxLeft} = this.state;
|
|
|
return <div className={this.getClasses()}
|
|
|
- ref={this.$cont}
|
|
|
- onDblClick ={this.changeToEdit}
|
|
|
- onClick={allClick?this.handleNumClick:null}
|
|
|
- contentEditable={editable}
|
|
|
- onBlur={this.handleBlur}
|
|
|
- onKeyDown={handleEnter}
|
|
|
- onFocus={this.stopBubble.bind(this)}>
|
|
|
- <span ref = {this.$pre}> {prefix}</span>
|
|
|
+ onClick={allClick?this.handleNumClick:null}>
|
|
|
+ <span>{prefix}</span>
|
|
|
<span onFocus={this.handleNumFocus}
|
|
|
onClick={allClick?null:this.handleNumClick}
|
|
|
contentEditable={true}
|
|
@@ -285,7 +229,7 @@ class NumberDrop extends Component{
|
|
|
onInput={this.handleSpanInp}
|
|
|
className={this.getSpanClass()}
|
|
|
> {value||placeholder}</span>
|
|
|
- <span ref = {this.$suf}> {suffix}</span>
|
|
|
+ <span>{suffix}</span>
|
|
|
<NumberPan handleSelect={this.select.bind(this)}
|
|
|
onClose={handleHide}
|
|
|
show={show}
|