|
@@ -1,47 +1,35 @@
|
|
|
import react from "react";
|
|
|
import style from "./index.less";
|
|
|
-import $ from 'jquery';
|
|
|
import classNames from 'classnames';
|
|
|
-import {handleEnter,isIE,filterArr,deepClone,filterDataArr} from '@utils/tools.js';
|
|
|
-import {Notify} from '@commonComp';
|
|
|
+import {deepClone} from '@utils/tools.js';
|
|
|
import ReactDom from "react-dom";
|
|
|
-import config from '@config/index.js';
|
|
|
/**
|
|
|
- 单列多选组件(tagtype=1,controlType=2)
|
|
|
- 2019-2-20 By_liucf
|
|
|
- 参数:
|
|
|
- placeholder:标签名
|
|
|
- value:标签选中的值
|
|
|
+ 单列多选组件下拉 2019-2-20 By_liucf
|
|
|
+ 接收参数:
|
|
|
show:是否展示下拉
|
|
|
data:下拉数据
|
|
|
- type:标识哪一项数据(1-主诉,2-现病史,3-其他史,4-查体)
|
|
|
+ handleConfirm: 确定事件
|
|
|
+ left、top: 下拉框的位置,
|
|
|
+ seleData、seleId:选中的数据和id,回读标识选中状态用
|
|
|
**/
|
|
|
|
|
|
-class Multiple extends react.Component{
|
|
|
+class SlideItem extends react.Component{
|
|
|
constructor(props){
|
|
|
super(props);
|
|
|
- const {seleData,seleId} = deepClone(props.selecteds||[]);
|
|
|
+ const seleData = deepClone(props.seleData||[]);
|
|
|
+ const seleId = deepClone(props.seleId||[]);
|
|
|
this.state={
|
|
|
- editable:false,
|
|
|
- timer:null,
|
|
|
- labelVal:"",
|
|
|
seleData:seleData||"",
|
|
|
- seleId:seleId||[],
|
|
|
- boxLeft:null,
|
|
|
- boxTop:null
|
|
|
+ seleId:seleId||[]
|
|
|
}
|
|
|
- this.$div = React.createRef();
|
|
|
this.handleSelect = this.handleSelect.bind(this);
|
|
|
- this.onChange = this.onChange.bind(this);
|
|
|
- this.handleBlur = this.handleBlur.bind(this);
|
|
|
this.handleClear = this.handleClear.bind(this);
|
|
|
- this.handleComfirn = this.handleComfirn.bind(this);
|
|
|
+ this.handleClick = this.handleClick.bind(this);
|
|
|
}
|
|
|
|
|
|
getListClass(){
|
|
|
- let name = style['text-list'];
|
|
|
let isHide = this.props.show?'':style['hide'];
|
|
|
- return classNames(style['list'],name,isHide);
|
|
|
+ return classNames(style['list'],isHide);
|
|
|
}
|
|
|
|
|
|
getSeleStyle(id){
|
|
@@ -69,48 +57,6 @@ class Multiple extends react.Component{
|
|
|
})
|
|
|
}
|
|
|
|
|
|
- onChange(e){
|
|
|
- const {mainSaveText,ikey,type,handleLabelChange} = this.props;
|
|
|
- const {labelVal,editable} = this.state;
|
|
|
- let mainText = filterDataArr(mainSaveText);//主诉字数
|
|
|
- if(editable){//避免IE中点击标签也会触发
|
|
|
- let val = e.target.innerText || e.target.innerHTML;
|
|
|
- if(+type==1){// 主诉字数达到上限时不允许输入
|
|
|
- if(mainText.length >= config.limited){
|
|
|
- if(val.length > labelVal.length){
|
|
|
- e.target.innerText?(e.target.innerText = labelVal):(e.target.innerHTML = labelVal);
|
|
|
- Notify.info(config.limitText);
|
|
|
- return
|
|
|
- }else if(val.length == labelVal.length){
|
|
|
- this.setState({
|
|
|
- labelVal:val
|
|
|
- });
|
|
|
- }else{
|
|
|
- handleLabelChange && handleLabelChange({ikey,changeVal:val,type});
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- handleBlur(e){//修改存值
|
|
|
- e.stopPropagation();
|
|
|
- const {ikey,type,handleLabelChange} = this.props;
|
|
|
- const {editable} = this.state;
|
|
|
- const ev = e || window.event;
|
|
|
- if(editable){
|
|
|
- // 更改标签的value值
|
|
|
- let changeVal = ev.target.innerText || e.target.innerHTML;
|
|
|
- if(!isIE()){
|
|
|
- e.target.innerText?(e.target.innerText = ''):(e.target.innerHTML=''); //避免出现重复输入值
|
|
|
- }
|
|
|
- handleLabelChange && handleLabelChange({ikey,changeVal,type});
|
|
|
- }
|
|
|
- this.setState({
|
|
|
- editable:false
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
handleClear(e){
|
|
|
e&&e.stopPropagation();
|
|
|
this.setState({
|
|
@@ -119,32 +65,22 @@ class Multiple extends react.Component{
|
|
|
})
|
|
|
}
|
|
|
|
|
|
- handleComfirn(e){
|
|
|
- e&&e.stopPropagation();
|
|
|
- const {handleConfirm,ikey,order,mainSaveText,value,handleHide,type} = this.props;
|
|
|
- const params = Object.assign({},this.state,{ikey,order,mainSaveText,value,type});
|
|
|
- handleConfirm&&handleConfirm(params);
|
|
|
- handleHide&&handleHide();
|
|
|
- }
|
|
|
-
|
|
|
- componentDidMount(){
|
|
|
- if(isIE()){
|
|
|
- $(this.$div.current).onIe8Input(function(e){
|
|
|
- this.onChange(e)
|
|
|
- },this);
|
|
|
- }
|
|
|
- }
|
|
|
getStyle(){
|
|
|
const {left,top,show} = this.props;
|
|
|
return {
|
|
|
left:left?left+'px':'0',
|
|
|
top:top?top+'px':'0',
|
|
|
- display:show?'table':'none' //table onBlur阻止冒泡是为了修复multSpread中数字键盘点击触发最外层数字组件onBlur事件
|
|
|
+ display:show?'table':'none'
|
|
|
}
|
|
|
}
|
|
|
+ handleClick(e){//确定
|
|
|
+ e&&e.stopPropagation();
|
|
|
+ const {handleConfirm} = this.props;
|
|
|
+ const params = this.state;
|
|
|
+ handleConfirm&&handleConfirm(params);
|
|
|
+ }
|
|
|
render(){
|
|
|
- const {placeholder,value,show,data} = this.props;
|
|
|
- const {editable,boxTop,boxLeft} = this.state;
|
|
|
+ const {data} = this.props;
|
|
|
const domNode = document.getElementById('root');
|
|
|
return ReactDom.createPortal(
|
|
|
<div className={this.getListClass()} style={this.getStyle()} contentEditable="false">
|
|
@@ -153,10 +89,10 @@ class Multiple extends react.Component{
|
|
|
return <li onClick={(e)=>this.handleSelect(e,it)} className={this.getSeleStyle(it.id)} title={it.name.length>8?it.name:''}>{it.name&&it.name.length>8?it.name.slice(0,8)+'...':it.name}</li>
|
|
|
})}
|
|
|
<li onClick={this.handleClear} className={style['mClear']}>清空选项</li>
|
|
|
- <li onClick={this.handleComfirn} className={style['mConfirm']}>确定</li>
|
|
|
+ <li onClick={this.handleClick} className={style['mConfirm']}>确定</li>
|
|
|
</ul>
|
|
|
</div>,domNode)
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-export default Multiple;
|
|
|
+export default SlideItem;
|