123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406 |
- import React,{Component} from 'react';
- import classNames from 'classnames';
- import config from '@config/index.js';
- import style from './index.less';
- import {setPosition,deepClone,handleEnter,isIE,windowEventHandler,filterDataArr,getIds,getPageCoordinate} from '@utils/tools.js';
- import {Notify} from '@commonComp';
- import ListItems from '@components/ListItems';
- import $ from 'jquery';
- /****
- * 标签组合下拉,选中的项目展开
- * author:zn@2018-11-21
- * 接收参数:
- * data:下拉内容
- * value:选中成文
- * placeholder:灰显文字
- * ikey:当前标签的index
- * copyType:选中后是否复制本身(仅展开类型使用)
- * data.selecteds:选中选项(仅展开类型使用)
- * show:是否显示下拉
- * order:成文顺序,0点选顺序,1从上到下从左到右
- * isImports:是否高亮显示(仅查体中使用)
- * type:所在模块:现病史、查体等
- * tagType:标签类型
- * id:id
- * flag:仅主诉中使用
- * isExtBlue:是否为查体生命体征标签蓝色显示
- *
- * ***/
- class SpreadDrop extends Component{
- constructor(props){
- super(props);
- const {nones,noneOn,noneIds,withOn,exists,nowOn,withs,exclusion,excluName} = deepClone(props.selecteds||[]);
- const initEx = this.getInitExclu();
- this.state = {
- nones:nones||'', //无,字符串拼接
- exists:exists||[], //主症状id
- excluName:excluName||initEx.excName,
- withs:withs||[], //伴随 id
- noneIds:noneIds||[],
- noneOn:noneOn||false, //无是否选中
- withOn:withOn||false, //伴是否选中
- nowOn:nowOn||'', //最近选中“无”还是“伴”
- exclusion:exclusion||initEx.excluId, //选中互斥项id
- timer:null, //延时,区分单击双击
- ban:{}, //放'伴'字段
- editable:false, //双击编辑
- labelVal:'', //存放标签原有的值--主诉字数限制用
- left:'auto',
- tmpDom:null
- };
- this.$div = React.createRef();
- this.$list = React.createRef();
- this.handleSelect = this.handleSelect.bind(this);
- this.clearState = this.clearState.bind(this);
- this.handleClear = this.handleClear.bind(this);
- this.handleShow = this.handleShow.bind(this);
- this.handleConfirm = this.handleConfirm.bind(this);
- this.changeToEdit = this.changeToEdit.bind(this);
- this.handleBlur = this.handleBlur.bind(this);
- this.onChange = this.onChange.bind(this);
- /*是否点击确定按钮标记,处理点击其他等同于确定操作bug,
- 如不区分确定按钮提交和点击其他提交,确定按钮提交后会多更新一次状态导致数据重复*/
- this.btnClickFlag = false;
- }
- handleShow(e){//单击
- e&&e.stopPropagation();
- const {ikey,handleShow,placeholder,flag,id,value,tagType,type,data,windowWidth,setHighter} = this.props;
- let num = 0;//判断为五类切超出页面
- data && data.map((item)=>{
- if(item.formPosition != 1){
- ++num
- }
- });
- const listWidth = 30+$(this.$list.current).width();
- const wleft = getPageCoordinate(e).boxLeft;
- if(num >= 4 && windowWidth-wleft < listWidth){
- this.setState({
- left:windowWidth-wleft-listWidth-50
- })
- }else{
- this.setState({
- left:'auto'
- })
- }
- //高度超出时,增加左侧大容器padding
- setPosition(e,this.$list.current,setHighter);
- // window.event? window.event.cancelBubble = true : e.stopPropagation();
- this.setStateInit(); //恢复初始选中状态
- const that = this;
- this.btnClickFlag = false;
- clearTimeout(this.state.timer);
- this.state.timer = setTimeout(()=>{
- if (that.state.editable) {//如果处于编辑状态点击不显示下拉框
- return
- }else{
- document.activeElement.blur()//chrome41有效,但是失去焦点的span仍能编辑
- $(e.target).parent().prev().attr({"contentEditable":false})
- this.setState({
- tmpDom:e.target
- })
- handleShow&&handleShow({ikey,placeholder,flag,id,value,tagType,type});
- }
- },300)
- }
- changeToEdit(e){//双击
- window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
- const {value,id,placeholder,handleDbclick,handleHide} = this.props;
- let text = e.target.innerText || e.target.innerHTML;
- handleHide&&handleHide(); //展开情况下双击收起
- // clearTimeout(this.state.timer);//取消延时的单击事件
- e.stopPropagation();
- // e.preventDefault();
- if(value&&value.trim()){//有选中值的标签才能双击编辑
- this.setState({
- labelVal:text,
- editable:true
- });
- //失焦关闭编辑状态
- setTimeout(()=>{
- e.target.focus();
- })
- handleDbclick && handleDbclick({value,id,placeholder});
- }
- }
- 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 || ev.target.innerHTML;
- if(!isIE()){
- e.target.innerText?(e.target.innerText = ''):(e.target.innerHTML = ''); //避免出现重复输入值
- }
- handleLabelChange && handleLabelChange({ikey,changeVal,type});
- }
- this.setState({
- editable:false
- });
- }
- getInitExclu(){
- const {defaulted,data,value} = this.props;
- let excluId = '',excName='';
- if(defaulted&&value===undefined){
- const it = data[0];
- excluId = it.exclusionType===1?it.questionDetailList[0].id:'';
- excName = it.exclusionType===1?it.questionDetailList[0].name:'';
- }
- return {
- excluId,
- excName
- }
- }
- setStateInit(){
- const {nones,noneOn,noneIds,withOn,exists,nowOn,withs,exclusion,excluName,ban} = deepClone(this.props.selecteds||[]);
- const initEx = this.getInitExclu();
- this.setState({
- nones:nones||'',
- exists:exists||[],
- excluName:excluName||initEx.excName,
- withs:withs||[],
- noneIds:noneIds||[],
- noneOn:noneOn||false,
- withOn:withOn||false,
- nowOn:nowOn||'',
- exclusion:exclusion||initEx.excluId,
- ban:ban||{},
- });
- }
- clearState(){
- this.setState({
- nones:'',
- exists:[],
- //existsName:{},
- //withsName:{},
- withs:[],
- noneIds:[],
- noneOn:false,
- withOn:false,
- nowOn:'',
- exclusion:'',
- excluName:'',
- ban:{}
- });
- this.btnClickFlag = false;
- }
- handleClear(e){
- e.stopPropagation();
- this.clearState();
- }
- handleConfirm(e){
- // e.stopPropagation();
- const {handleConfirm,ikey,type,tagType,order,mainSaveText,copyType,value,mainData} = this.props;
- const params = Object.assign({},this.state,{ikey,type,tagType,order,mainSaveText,copyType,value,mainData});
- delete params.tmpDom; //避免上面deepClone selecteds报错
- handleConfirm&&handleConfirm(params);
- this.btnClickFlag = true;
- //点确定后隐藏弹窗
- this.props.handleHide();
- }
- handleSelect(item,isExclu,joint,listIndex,selected){
- let {withOn,withs,noneOn,exclusion,exists,nowOn,nones,noneIds,ban} = this.state;
- const id = item.id;
- const linkStr = joint||'';
- const name = item.name+linkStr;
- if(isExclu){ //操作“互斥项”
- if([...noneIds,...exists,...withs].length>0){ //已选非互斥项,清空已选项,选中该互斥项
- this.clearState();
- this.setState({
- exclusion:id,
- excluName:name
- });
- return;
- }
- //未选中互斥项,直接选中该互斥项
- let temp = '';
- if(exclusion==''){
- temp = id;
- }else if(exclusion!=''&&exclusion!==id){
- temp = exclusion;
- }
- this.setState({
- exclusion:temp,
- excluName:temp ===''?'':name
- });
- return;
- }
- //操作单选项
- if(selected){
- const tIndex= exists.findIndex((it)=>it.questionId===item.questionId);
- const bIndex= withs.findIndex((it)=>it.questionId===item.questionId);
- if(tIndex!=-1){
- exists.splice(tIndex,1,Object.assign({},item,{name})); //修改单选列连接字符不显示bug
- this.setState({
- exists,
- })
- }
- if(bIndex!=-1){
- withs.splice(tIndex,1,item);
- this.setState({
- withs,
- })
- }
- return;
- }
- if(exclusion!==''){ //互斥项已选中,清空互斥项
- this.setState({
- exclusion:'',
- excluName:''
- });
- }
- if(+item.code===1){ //操作“伴”类型
- this.setState({
- withOn:!withOn,
- // withs:withOn?[]:[...withs,id], //取消“伴”选中,伴随症状全部取消选中
- // withs:withOn?[]:[...withs,{id:item.id,name:name}],
- withs:withOn?[]:withs,
- ban:withOn?{}:{id:id,name:name,value:name},
- //withsName:withOn?"":withsName+name, //取消“伴”选中,伴随症状全部取消选中
- nowOn:withOn?(noneOn?'none':''):'with'
- });
- return;
- }
- if(+item.code===2){ //操作“无”类型
- this.setState({
- noneOn:!noneOn,
- noneIds:noneOn?[]:[...noneIds,id],
- nones:noneOn?'':name,
- nowOn:noneOn?(withOn?'with':''):'none'
- });
- return;
- }
- //操作普通项
- let existsIds = exists.length>0? getIds(exists):[];
- let withsIds = withs.length>0? getIds(withs):[];
- if(existsIds.includes(id)){
- let existsData = exists;
- exists.forEach((it,i)=>{
- if(it.id==id){
- existsData.splice(i,1);
- }
- })
- exists = existsData;
- }else if(noneIds.includes(id)){
- nones = nones.replace(name+'、','');
- noneIds.splice(noneIds.indexOf(id),1);
- }else if(withsIds.includes(id)){
- let withsData = withs;
- withs.forEach((it,i)=>{
- if(it.id==id){
- withsData.splice(i,1);
- }
- })
- withs = withsData;
- }else{ //选中普通项
- if(nowOn=='none'){
- nones += name+'、';
- noneIds.push(id);
- }else if(nowOn=='with'){
- // withs.push({id:id,name:name,questionId:item.questionId});
- withs.push({id:id,name:name,questionId:item.questionId,conceptId:item.conceptId});
- }else{
- // exists.push({id:id,name:name,listIndex,questionId:item.questionId});
- exists.push({id:id,name:name,listIndex,questionId:item.questionId,conceptId:item.conceptId});
- }
- }
- this.setState({
- nones,
- noneIds,
- exists,
- withs,
- ban
- //existsName,
- //withsName,
- });
- }
- getClass(){
- const {isImports,show,value,isExtBlue} = this.props;
- const blueBorder = this.state.editable?style['blue-border']:'';
- const orgBorder = isImports&&!value?style['orange-border']:'';
- const ext = isExtBlue?style['ext']:'';
- if(show){
- $(this.$div.current).addClass(style['borderd']);
- }else{
- $(this.$div.current).removeClass(style['borderd']);
- }
- if(value){
- return classNames(style['selected-tag'],blueBorder);
- }
- return classNames(style['tag'],orgBorder,ext);
- }
- componentDidMount(){
- if(isIE()){
- $(this.$div.current).onIe8Input(function(e){
- this.onChange(e)
- },this);
- }
- }
- /*componentWillReceiveProps(nextProps){
- const {setHighter} = this.props;
- if(!nextProps.show){console.log(22)
- setHighter&&setHighter(48);
- }
- }*/
- render(){
- const {placeholder,value,show,data,order,type,tagType,ikey,pos,defaulted} = this.props;
- const {tmpDom,left} = this.state;
- const clickIndx = ikey.split('-')[1];//展开下拉的index
- if(!show&&tmpDom){
- $(tmpDom).parent().prev().attr({"contentEditable":true})
- }
- const {editable} = this.state;
- return <div className={style['container']}
- /*onFocus={(e)=>e.stopPropagation()}*/
- onBlur={(e)=>e.stopPropagation()}
- onInput={(e)=>e.stopPropagation()}>
- <div
- ref={this.$div}
- onClick={this.handleShow}
- className={this.getClass()}
- contentEditable={editable}
- onDoubleClick={this.changeToEdit}
- onBlur={this.handleBlur}
- onInput={this.onChange}
- onkeydown={handleEnter}
- >{value||placeholder}</div>
- <ListItems parDiv={this.$list} defaulted={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>
- </div>
- }
- }
- export default SpreadDrop;
|