SpreadDrop中子组件拆开1

src/components/ListItem/index.jsx

@@ -0,0 +1,129 @@
+import classNames from "classnames";
+import {Component} from "react";
+import ScrollArea from 'react-scrollbar';
+import {getIds} from '@utils/tools.js';
+import style from './index.less';
+
+class ListItem extends Component{
+  constructor(props){
+    super(props);
+    this.getData = this.getData.bind(this);
+    this.getLis = this.getLis.bind(this);
+  }
+  handleClick(e,item,i){
+    e.stopPropagation();
+    // window.event? window.event.cancelBubble = true : e.stopPropagation();
+    const {handleClick,isExclu,isRadio,data,exists,noneIds,withs,joint,listIndex} = this.props;
+    const index=listIndex+''+i;
+    //列单选处理
+    if(isRadio){
+      let selected = exists.find((i)=>{
+        return i.questionId===item.questionId;
+      })||withs.find((i)=>{
+        return i.questionId===item.questionId;
+      })||noneIds.find((i)=>{
+        return i.id===item.questionId;
+      });
+      /*const selected = data.find((it)=>{console.log(exists)
+        return exists.findIndex((i)=>i.questionId===it.id)!==-1||noneIds.includes(it.id)||withs.findIndex((i)=>i.questionId===it.id)!==-1;
+      });*/
+      if(selected&&selected.id!=item.id){     //该列已有选中项，传回已选中的id,name取消选中
+        handleClick&&handleClick(item,isExclu,joint,index,{id:selected.id,name:selected.name,questionId:selected.questionId});
+      }else{
+        handleClick&&handleClick(item,isExclu,joint,index);
+      }
+      return;
+    }
+    handleClick&&handleClick(item,isExclu,joint,index);
+  }
+  getClass(id){     //无之后显示黑色，之前显示蓝色
+    const {exclusion,nones,noneIds,exists,withs,isExclu,ban} = this.props;
+    if(exclusion!=''){
+      if(+id===+exclusion){
+        return style['selected'];
+      }else{
+        return style['exclusion'];
+      }
+    }else{
+      if(isExclu&&([...noneIds,...exists,...withs].length>0||ban.id)){
+        return style['exclusion'];
+      }
+      if(noneIds.includes(id)){
+        return style['none-selected'];
+      }
+      let existsIds = getIds(exists);
+      let withsIds = getIds(withs);
+      // if(existsIds.includes(id)||withsIds.includes(id)){
+      if(existsIds.includes(id)||withsIds.includes(id)||ban.id && ban.id==id){
+        return style['selected'];
+      }
+
+      return '';
+    }
+  }
+  getLis(datas,isSpecialPos){
+    return datas&&datas.map((it,i)=>{
+      if(isSpecialPos){
+        return <li onClick={(e)=>this.handleClick(e,it,i)} className={this.getClass(it.id)}>{it.name}</li>
+      }
+      return <li onClick={(e)=>this.handleClick(e,it,i)} className={this.getClass(it.id)} title={it.name.length>8?it.name:''}>{it.name&&it.name.length>8?it.name.slice(0,8)+'...':it.name}</li>
+    })
+  }
+  getData(){
+    const {datas,isSpecialPos} = this.props;
+    const contStyle={
+      opacity:'0.4',
+      right:'0',
+      top:'1px',
+      zIndex:'15',
+      width:'6px',
+      background:'#f1f1f1'};
+    const barStyle={background:'#777',width:'100%'};
+    if(!datas||datas.length===0){
+      return <li className={style['no-push-data']}>暂无推送</li>
+    }
+    const liArr = this.getLis(datas,isSpecialPos);
+    if(datas&&datas.length>11){
+      //超过最多显示条数，添加自定义滚动条，不能全部添加，不需要滚动条时不能阻止外部滚动条滚动事件
+      return <ScrollArea speed={0.8}
+                         horizontal={false}
+                         stopScrollPropagation={true}
+                         style={{maxHeight:'330px'}}
+                         className={style["area"]}
+                         verticalContainerStyle={contStyle}
+                         verticalScrollbarStyle={barStyle}
+                         contentClassName="content">
+        {liArr}
+      </ScrollArea>;
+    }
+    return liArr;
+  }
+
+  getMainData(){//主诉添加症状-带搜索框
+    const {datas,isSpecialPos} = this.props;
+    if(!datas||datas.length===0){
+      return <li className={style['no-push-data']}>暂无推送数据，可通过搜索查找更多内容~ </li>
+    }
+    return datas&&datas.map((it,i)=>{
+      return <li onClick={(e)=>this.handleClick(e,it,i)}
+                 className={this.getClass(it.id)}
+                 title={it.name.length>4?it.name:''}
+                 style={{'width':'55px','display':'inline-block'}}>
+        {it.name&&it.name.length>4?it.name.slice(0,4)+'...':it.name}
+      </li>
+    });
+  }
+
+  render(){
+    const {datas,isSpecialPos,boxMark,tagType,listIndex,isSingle,pos} = this.props;
+    const posit = isSpecialPos?style['independent']:'';
+    const ifMainSear = boxMark==1 && tagType==11 && !pos?true:false;
+    // 单列直接设置宽度，多列则第二列设置(伴字ul不设置宽度)
+    const main = ifMainSear&&!isSingle&&listIndex==1?style['mainUl']:(ifMainSear&&isSingle?style['mainUl']:'');
+    return  <ul className={classNames(style['row'],posit,main)} onBlur={(e)=>e.stopPropagation()}>
+      {ifMainSear?this.getMainData():this.getData()}
+    </ul>
+  }
+}
+
+export default ListItem;

src/components/ListItem/index.less

@@ -0,0 +1,62 @@
+@import "~@less/mixin.less";
+
+.row{
+  display: inline-block;
+  // width: 200px;
+  vertical-align: top;
+  margin-left: 8px;
+  max-height: 330px;
+  overflow-y: auto;
+  li{
+    padding-left: 20px;
+    cursor: pointer;
+    .mult-li;
+    height: 30px;
+    line-height: 30px;
+  }
+}
+.independent{
+  display: block;
+  width: 100%;
+  border-bottom: 1px @disable-border-color solid;
+}
+.mainUl{
+  width: 495px;
+  white-space: normal;
+  li{
+    width: 99px !important;
+  }
+  .no-push-data{
+    color:@disable-color;
+    width: auto !important;
+  }
+}
+.selected{
+  .select-li;
+}
+.none-selected{
+  .select-li;
+  background-image: url(../../common/images/then.png);
+}
+.no-push-data,.exclusion{
+  color:@disable-color;
+}
+.tag,.selected-tag{
+  cursor: pointer;
+  line-height: 20px;
+  &.ext{
+    color: @extBlue;
+  }
+}
+
+.selected-tag{
+  padding: 0;
+  color: @text-color;
+  border-bottom: 1px @border-color solid;
+  line-height: 22px;
+  word-break: break-all;
+}
+.orderTips{
+  color: #bfbfbf;
+  margin:0 0 0 28px;
+}

src/components/ListItems/index.jsx

@@ -0,0 +1,85 @@
+import React, {Component} from "react";
+import SearchBox from '@containers/SearchBox'
+import ListItem from '@components/ListItem';
+import style from './index.less';
+
+class ListItems extends Component{
+  constructor(props){
+    super(props);
+    this.$cont = React.createRef();
+    this.clickConfirm = this.clickConfirm.bind(this);
+  }
+  getLabels(){
+    const {data,handleSelect} = this.props;
+    let detail = [];
+    let isSpecialPos = false;       //是否特殊位置（单行在上面，如无殊）
+    let isExclu = false;      //是否与其他互斥
+    let isRadio;      //是否为单选列，默认多选列
+    let isSingle = data.length == 1?true:false; //是否为单列，无伴的情况
+    const list = data&&data.map((it,i)=>{
+      isSpecialPos = (+it.formPosition === 1);
+      isExclu = (+it.exclusionType===1);
+      isRadio = (+it.tagType ===1&&+it.controlType === 1);
+      if(+it.controlType===0){
+        detail = it.questionMapping;
+      }else{
+        detail = it.questionDetailList;
+      }
+      return <ListItem datas={detail}
+                       isRadio={isRadio}
+                       isSingle={isSingle}
+                       joint={it.joint}
+                       listIndex={i}
+                       isSpecialPos={isSpecialPos}
+                       isExclu={isExclu}
+                       handleClick={handleSelect}
+                       {...this.props}></ListItem>;
+    });
+    return list;
+  }
+  clickConfirm(){
+    const {handleConfirm} = this.props;
+    this.child&&this.child.reset();//重置搜索框中的数据
+    handleConfirm();
+  }
+  getStyle(){
+    const {show,left} = this.props;
+    return {
+      display:show?'block':'none',
+      left:left
+    }
+  }
+  searchSelect(item){
+    const {handleSelect,handleConfirm} = this.props;
+    //添加id字段，用于调尾巴
+    const it = Object.assign({id:item.questionId},item);
+    handleSelect&&handleSelect(it);     //添加到大数据推送一起选中
+    handleConfirm&&handleConfirm();       //确定事件
+  }
+  getPushItemIds(list){         //获取推送症状的id数组，去重用
+    return list&&list.map((it)=>{
+      return it.conceptId;
+    })||[];
+  }
+  render (){
+    const {handleClear,order,parDiv,boxMark,tagType,show,data,pos} = this.props;
+    const pushUl = data.find((it)=>it.controlType===99);
+    const pushList = pushUl&&pushUl.questionDetailList;
+    //推送标签没有推送结果时不显示顺序说明
+    const noPush = tagType===11&&(!pushList||pushList.length===0);
+    const noSearch = boxMark==1 && tagType==11 && !pos;       //非第一病程添加症状标签不显示搜索
+    return <div className={style["drop-list"]} ref={parDiv} style={this.getStyle()} contentEditable="false" onClick={(e)=>{e.stopPropagation();}}>
+      {noPush?'':<p className={style['orderTips']}>按{order?'从左到右从上到下':'点击'}顺序成文</p>}
+      {this.getLabels()}
+      {noSearch && <div className="search">
+        <SearchBox show={show} pushIds={this.getPushItemIds(pushList)} onSelect={this.searchSelect.bind(this)} onRef={(child)=>{this.child = child;}}/>
+      </div>}
+      <div className="oper clearfix">
+        <span className={style['clear']} onClick={handleClear}>清空选项</span>
+        <span className={style['confirm']} onClick={this.clickConfirm}>确定</span>
+      </div>
+    </div>
+  }
+}
+
+export default ListItems;

src/components/ListItems/index.less

@@ -0,0 +1,22 @@
+@import "~@less/mixin.less";
+.drop-list{
+  .pop;
+  padding:8px 20px 25px 0;
+}
+.orderTips{
+  color: #bfbfbf;
+  margin:0 0 0 28px;
+}
+.clear{
+  .btnCom;
+  .clear;
+  height: auto;
+  line-height: unset;
+}
+.confirm{
+  .btnCom;
+  .confirm;
+  height: auto;
+  line-height: unset;
+  width: 60px;
+}

src/components/SpreadDrop/index.jsx

@@ -2,10 +2,9 @@ import React,{Component} from 'react';
 import classNames from 'classnames';
 import config from '@config/index.js';
 import style from './index.less';
-import {setPosition,deepClone,filterArr,handleEnter,isIE,windowEventHandler,filterDataArr,getIds,getPageCoordinate} from '@utils/tools.js';
+import {setPosition,deepClone,handleEnter,isIE,windowEventHandler,filterDataArr,getIds,getPageCoordinate} from '@utils/tools.js';
 import {Notify} from '@commonComp';
-import ScrollArea from 'react-scrollbar';
-import SearchBox from '@containers/SearchBox'
+import ListItems from '@components/ListItems';
 import $ from 'jquery';
 /****
  * 标签组合下拉,选中的项目展开
@@ -387,203 +386,4 @@ class SpreadDrop extends Component{
   }
 }
 
-class ListItems extends Component{
-  constructor(props){
-    super(props);
-    this.$cont = React.createRef();
-    this.clickConfirm = this.clickConfirm.bind(this);
-  }
-  getLabels(){
-    const {data,handleSelect} = this.props;
-    let detail = [];
-    let isSpecialPos = false;       //是否特殊位置（单行在上面，如无殊）
-    let isExclu = false;      //是否与其他互斥
-    let isRadio;      //是否为单选列，默认多选列
-    let isSingle = data.length == 1?true:false; //是否为单列，无伴的情况
-    const list = data&&data.map((it,i)=>{
-      isSpecialPos = (+it.formPosition === 1);
-      isExclu = (+it.exclusionType===1);
-      isRadio = (+it.tagType ===1&&+it.controlType === 1);
-      if(+it.controlType===0){
-        detail = it.questionMapping;
-      }else{
-        detail = it.questionDetailList;
-      }
-      return <ListItem datas={detail}
-                       isRadio={isRadio}
-                       isSingle={isSingle}
-                       joint={it.joint}
-                       listIndex={i}
-                       isSpecialPos={isSpecialPos}
-                       isExclu={isExclu}
-                       handleClick={handleSelect}
-                       {...this.props}></ListItem>;
-    });
-    return list;
-  }
-  clickConfirm(){
-    const {handleConfirm} = this.props;
-    this.child&&this.child.reset();//重置搜索框中的数据
-    handleConfirm();   
-  }
-  getStyle(){
-    const {show,left} = this.props;
-    return {
-      display:show?'block':'none',
-      left:left
-    }
-  }
-  searchSelect(item){
-    const {handleSelect,handleConfirm} = this.props;
-    //添加id字段，用于调尾巴
-    const it = Object.assign({id:item.questionId},item);
-    handleSelect&&handleSelect(it);     //添加到大数据推送一起选中
-    handleConfirm&&handleConfirm();       //确定事件
-  }
-  getPushItemIds(list){         //获取推送症状的id数组，去重用
-    return list&&list.map((it)=>{
-      return it.conceptId;
-    })||[];
-  }
-  render (){
-    const {handleClear,order,parDiv,boxMark,tagType,show,data,pos} = this.props;
-    const pushUl = data.find((it)=>it.controlType===99);
-    const pushList = pushUl&&pushUl.questionDetailList;
-    //推送标签没有推送结果时不显示顺序说明
-    const noPush = tagType===11&&(!pushList||pushList.length===0);
-    const noSearch = boxMark==1 && tagType==11 && !pos;       //非第一病程添加症状标签不显示搜索
-    return <div className={style["drop-list"]} ref={parDiv} style={this.getStyle()} contentEditable="false" onClick={(e)=>{e.stopPropagation();}}>
-      {noPush?'':<p className={style['orderTips']}>按{order?'从左到右从上到下':'点击'}顺序成文</p>}
-        {this.getLabels()}
-        {noSearch && <div className="search">
-          <SearchBox show={show} pushIds={this.getPushItemIds(pushList)} onSelect={this.searchSelect.bind(this)} onRef={(child)=>{this.child = child;}}/>
-        </div>}
-        <div className="oper clearfix">
-          <span className={style['clear']} onClick={handleClear}>清空选项</span>
-          <span className={style['confirm']} onClick={this.clickConfirm}>确定</span>
-        </div>
-      </div>
-  }
-}
-
-class ListItem extends Component{
-  constructor(props){
-    super(props);
-    this.getData = this.getData.bind(this);
-  }
-  handleClick(e,item,i){
-    e.stopPropagation();
-    // window.event? window.event.cancelBubble = true : e.stopPropagation();
-    const {handleClick,isExclu,isRadio,data,exists,noneIds,withs,joint,listIndex} = this.props;
-    const index=listIndex+''+i;
-    //列单选处理
-    if(isRadio){
-      let selected = exists.find((i)=>{
-        return i.questionId===item.questionId;
-      })||withs.find((i)=>{
-        return i.questionId===item.questionId;
-      })||noneIds.find((i)=>{
-        return i.id===item.questionId;
-      });
-      /*const selected = data.find((it)=>{console.log(exists)
-        return exists.findIndex((i)=>i.questionId===it.id)!==-1||noneIds.includes(it.id)||withs.findIndex((i)=>i.questionId===it.id)!==-1;
-      });*/
-      if(selected&&selected.id!=item.id){     //该列已有选中项，传回已选中的id,name取消选中
-        handleClick&&handleClick(item,isExclu,joint,index,{id:selected.id,name:selected.name,questionId:selected.questionId});
-      }else{
-        handleClick&&handleClick(item,isExclu,joint,index);
-      }
-      return;
-    }
-    handleClick&&handleClick(item,isExclu,joint,index);
-  }
-  getClass(id){     //无之后显示黑色，之前显示蓝色
-    const {exclusion,nones,noneIds,exists,withs,isExclu,ban} = this.props;
-    if(exclusion!=''){
-      if(+id===+exclusion){
-        return style['selected'];
-      }else{
-        return style['exclusion'];
-      }
-    }else{
-      if(isExclu&&([...noneIds,...exists,...withs].length>0||ban.id)){
-        return style['exclusion'];
-      }
-      if(noneIds.includes(id)){
-        return style['none-selected'];
-      }
-      let existsIds = getIds(exists);
-      let withsIds = getIds(withs);
-      // if(existsIds.includes(id)||withsIds.includes(id)){
-      if(existsIds.includes(id)||withsIds.includes(id)||ban.id && ban.id==id){
-        return style['selected'];
-      }
-
-      return '';
-    }
-  }
-  getData(){
-    const {datas,isSpecialPos} = this.props;
-    const contStyle={
-      opacity:'0.4',
-      right:'0',
-      top:'1px',
-      zIndex:'15',
-      width:'6px',
-      background:'#f1f1f1'};
-    const barStyle={background:'#777',width:'100%'};
-    if(!datas||datas.length===0){
-      return <li className={style['no-push-data']}>暂无推送</li>
-    }
-    if(datas&&datas.length>11){
-      return <ScrollArea speed={0.8}
-                    horizontal={false}
-                    stopScrollPropagation={true}
-                    style={{maxHeight:'330px'}}
-                    className={style["area"]}
-                    verticalContainerStyle={contStyle}
-                    verticalScrollbarStyle={barStyle}
-                    contentClassName="content">
-          {datas&&datas.map((it,i)=>{
-            if(isSpecialPos){
-              return <li onClick={(e)=>this.handleClick(e,it,i)} className={this.getClass(it.id)}>{it.name}</li>
-            }
-            return <li onClick={(e)=>this.handleClick(e,it,i)} className={this.getClass(it.id)} title={it.name.length>8?it.name:''}>{it.name&&it.name.length>8?it.name.slice(0,8)+'...':it.name}</li>
-          })}
-        </ScrollArea>;
-    }
-    return datas&&datas.map((it,i)=>{
-      if(isSpecialPos){
-        return <li onClick={(e)=>this.handleClick(e,it,i)} className={this.getClass(it.id)}>{it.name}</li>
-      }
-      return <li onClick={(e)=>this.handleClick(e,it,i)} className={this.getClass(it.id)} title={it.name.length>8?it.name:''}>{it.name&&it.name.length>8?it.name.slice(0,8)+'...':it.name}</li>
-    });
-  }
-
-  getMainData(){//主诉添加症状-带搜索框
-    const {datas,isSpecialPos} = this.props;
-    if(!datas||datas.length===0){
-      return <li className={style['no-push-data']}>暂无推送数据，可通过搜索查找更多内容~ </li>
-    }
-    return datas&&datas.map((it,i)=>{
-      return <li onClick={(e)=>this.handleClick(e,it,i)} 
-            className={this.getClass(it.id)} 
-            title={it.name.length>4?it.name:''}
-            style={{'width':'55px','display':'inline-block'}}>
-            {it.name&&it.name.length>4?it.name.slice(0,4)+'...':it.name}
-          </li>
-    });
-  }
-
-  render(){
-    const {datas,isSpecialPos,boxMark,tagType,listIndex,isSingle,pos} = this.props;
-    const posit = isSpecialPos?style['independent']:'';
-    const ifMainSear = boxMark==1 && tagType==11 && !pos?true:false;
-    // 单列直接设置宽度，多列则第二列设置(伴字ul不设置宽度)
-    const main = ifMainSear&&!isSingle&&listIndex==1?style['mainUl']:(ifMainSear&&isSingle?style['mainUl']:'');
-    return  <ul className={classNames(style['row'],posit,main)} onBlur={(e)=>e.stopPropagation()}>
-      {ifMainSear?this.getMainData():this.getData()}
-    </ul>
-  }
-}
 export default SpreadDrop;

src/components/SpreadDrop/index.less

@@ -3,81 +3,4 @@
 .container{
   /*position: relative;*/
   display: inline-block;
-}
-.drop-list{
-  .pop;
-  padding:8px 20px 25px 0;
-  .row{
-    display: inline-block;
-    // width: 200px;
-    vertical-align: top;
-    margin-left: 8px;
-    max-height: 330px;
-    overflow-y: auto;
-  }
-  .independent{
-    display: block;
-    width: 100%;
-    border-bottom: 1px @disable-border-color solid;
-  }
-  .mainUl{
-    width: 495px;
-    white-space: normal;
-    li{
-      width: 99px !important;
-    }
-    .no-push-data{
-      color:@disable-color;
-      width: auto !important;
-    }
-  }
-  li{
-    padding-left: 20px;
-    cursor: pointer;
-    .mult-li;
-    height: 30px;
-    line-height: 30px;
-  }
-  .selected{
-    .select-li;
-  }
-  .none-selected{
-    .select-li;
-    background-image: url(../../common/images/then.png);
-  }
-  .no-push-data,.exclusion{
-    color:@disable-color;
-  }
-}
-.tag,.selected-tag{
-  cursor: pointer;
-  line-height: 20px;
-  &.ext{
-    color: @extBlue;
-  }
-}
-
-.selected-tag{
-  padding: 0;
-  color: @text-color;
-  border-bottom: 1px @border-color solid;
-  line-height: 22px;
-  word-break: break-all;
-}
-.orderTips{
-  color: #bfbfbf;
-  margin:0 0 0 28px;
-}
-.clear{
-  .btnCom;
-  .clear;
-  height: auto;
-  line-height: unset;
-}
-.confirm{
-  .btnCom;
-  .confirm;
-  height: auto;
-  line-height: unset;
-  width: 60px;
 }