|
@@ -0,0 +1,226 @@
|
|
|
+import react from "react";
|
|
|
+import style from "./index.less";
|
|
|
+import $ from 'jquery';
|
|
|
+import classNames from 'classnames';
|
|
|
+import {handleEnter,isIE,filterArr,deepClone} from '@utils/tools.js';
|
|
|
+import {Notify} from '@commonComp';
|
|
|
+import config from '@config/index.js';
|
|
|
+/**
|
|
|
+ 单列多选组件(tagtype=1,controlType=2)
|
|
|
+ 2019-2-20 By_liucf
|
|
|
+ 参数:
|
|
|
+ placeholder:标签名
|
|
|
+ value:标签选中的值
|
|
|
+ show:是否展示下拉
|
|
|
+ data:下拉数据
|
|
|
+ type:标识哪一项数据(1-主诉,2-现病史,3-其他史,4-查体)
|
|
|
+**/
|
|
|
+
|
|
|
+class Multiple extends react.Component{
|
|
|
+ constructor(props){
|
|
|
+ super(props);
|
|
|
+ const {seleData,seleId} = deepClone(props.selecteds||[]);
|
|
|
+ this.state={
|
|
|
+ editable:false,
|
|
|
+ timer:null,
|
|
|
+ labelVal:"",
|
|
|
+ seleData:seleData||"",
|
|
|
+ seleId:seleId||[],
|
|
|
+ boxLeft:null,
|
|
|
+ boxTop:null
|
|
|
+ }
|
|
|
+ this.$div = React.createRef();
|
|
|
+ this.handleShow = this.handleShow.bind(this);
|
|
|
+ this.changeToEdit = this.changeToEdit.bind(this);
|
|
|
+ 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);
|
|
|
+ }
|
|
|
+
|
|
|
+ getClass(){
|
|
|
+ if(this.props.show){
|
|
|
+ $(this.$div.current).addClass(style['borderd']);
|
|
|
+ }else{
|
|
|
+ $(this.$div.current).removeClass(style['borderd']);
|
|
|
+ }
|
|
|
+ if(this.props.value){
|
|
|
+ return style['selected-tag'];
|
|
|
+ }
|
|
|
+ return style['tag'];
|
|
|
+ }
|
|
|
+
|
|
|
+ getListClass(){
|
|
|
+ let name = style['text-list'];
|
|
|
+ let isHide = this.props.show?'':style['hide'];
|
|
|
+ return classNames(style['list'],name,isHide);
|
|
|
+ }
|
|
|
+
|
|
|
+ getSeleStyle(id){
|
|
|
+ const {seleId} = this.state;
|
|
|
+ if(seleId.includes(id)){
|
|
|
+ return style['selected'];
|
|
|
+ }
|
|
|
+ return '';
|
|
|
+ }
|
|
|
+
|
|
|
+ handleShow(e){//单击
|
|
|
+ e&&e.stopPropagation();
|
|
|
+ let boxLeft = e.pageX -133 + 'px';
|
|
|
+ let offsetTop = e.target.offsetTop;
|
|
|
+ const ht = e.target.offsetHeight; //如杂音选中文字有多行时,写死会遮挡
|
|
|
+ let boxTop = offsetTop + ht +2 + 'px';
|
|
|
+ this.setState({
|
|
|
+ boxLeft:boxLeft,
|
|
|
+ boxTop:boxTop
|
|
|
+ })
|
|
|
+ this.setStateInit();
|
|
|
+ const {ikey,handleShow,placeholder,flag,id,value,tagType,type} = this.props;
|
|
|
+ const that = this;
|
|
|
+ clearTimeout(this.state.timer);
|
|
|
+ this.state.timer = setTimeout(function(){
|
|
|
+ if (that.state.editable) {//如果处于编辑状态点击不显示下拉框
|
|
|
+ return
|
|
|
+ }else{
|
|
|
+ handleShow&&handleShow({ikey,placeholder,flag,id,value,tagType,type});
|
|
|
+ }
|
|
|
+ },300)
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ setStateInit(){//恢复初始选中状态
|
|
|
+ const {seleData,seleId} = deepClone(this.props.selecteds||[]);
|
|
|
+ this.setState({
|
|
|
+ seleData:seleData||"",
|
|
|
+ seleId:seleId||[],
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ changeToEdit(e){//双击
|
|
|
+ const {value,id,placeholder,handleDbclick,handleHide} = this.props;
|
|
|
+ let text = e.target.innerText;
|
|
|
+ handleHide&&handleHide(); //展开情况下双击收起
|
|
|
+ // clearTimeout(this.state.timer);//取消延时的单击事件
|
|
|
+ e.stopPropagation();
|
|
|
+ if(value&&value.trim()){//有选中值的标签才能双击编辑
|
|
|
+ this.setState({
|
|
|
+ labelVal:text,
|
|
|
+ editable:true
|
|
|
+ });
|
|
|
+ e.target.focus();
|
|
|
+ handleDbclick && handleDbclick({value,id,placeholder});
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ handleSelect(e,item){
|
|
|
+ e&&e.stopPropagation();
|
|
|
+ let {seleData,seleId} = this.state;
|
|
|
+ const {name,id} = item;
|
|
|
+ if(seleId.includes(id)){
|
|
|
+ seleId.splice(seleId.indexOf(id),1);
|
|
|
+ seleData = seleData.replace(name,'');
|
|
|
+ }else{
|
|
|
+ seleId.push(id);
|
|
|
+ seleData += name;
|
|
|
+ }
|
|
|
+ this.setState({
|
|
|
+ seleData,
|
|
|
+ seleId
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ onChange(e){
|
|
|
+ const {mainSaveText,ikey,type,handleLabelChange} = this.props;
|
|
|
+ const {labelVal,editable} = this.state;
|
|
|
+ let mainText = filterArr(mainSaveText);//主诉字数
|
|
|
+ if(editable){//避免IE中点击标签也会触发
|
|
|
+ let val = e.target.innerText;
|
|
|
+ if(+type==1){// 主诉字数达到上限时不允许输入
|
|
|
+ if(mainText.length >= config.limited){
|
|
|
+ if(val.length > labelVal.length){
|
|
|
+ e.target.innerText = 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;
|
|
|
+ if(!isIE()){
|
|
|
+ e.target.innerText = ''; //避免出现重复输入值
|
|
|
+ }
|
|
|
+ handleLabelChange && handleLabelChange({ikey,changeVal,type});
|
|
|
+ }
|
|
|
+ this.setState({
|
|
|
+ editable:false
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ handleClear(e){
|
|
|
+ e&&e.stopPropagation();
|
|
|
+ this.setState({
|
|
|
+ seleData:"",
|
|
|
+ seleId:[]
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ 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);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ render(){
|
|
|
+ const {placeholder,value,show,data} = this.props;
|
|
|
+ const {editable,boxTop,boxLeft} = this.state;
|
|
|
+ return <div className={style["container"]}>
|
|
|
+ <div className={this.getClass()}
|
|
|
+ ref={this.$div}
|
|
|
+ onClick={this.handleShow}
|
|
|
+ onDoubleClick={this.changeToEdit}
|
|
|
+ onBlur={this.handleBlur}
|
|
|
+ onInput={this.onChange}
|
|
|
+ onkeydown={handleEnter}
|
|
|
+ contentEditable={editable}>{value||placeholder}</div>
|
|
|
+ <div className={this.getListClass()} style={{top:boxTop,left:boxLeft}} contentEditable="false">
|
|
|
+ <ul>
|
|
|
+ {data&&data.map((it)=>{
|
|
|
+ return <li onClick={(e)=>this.handleSelect(e,it)} className={this.getSeleStyle(it.id)}>{it.labelPrefix}{it.name}{it.labelSuffix}</li>
|
|
|
+ })}
|
|
|
+ <li onClick={this.handleClear} className={style['mClear']}>清空选项</li>
|
|
|
+ <li onClick={this.handleComfirn} className={style['mConfirm']}>确定</li>
|
|
|
+ </ul>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+export default Multiple;
|