SpreadDrop中子组件拆开2，单选多选,SpreadDrop用新子组件

src/common/components/DropList/index.jsx

@@ -1,4 +1,5 @@
 import React,{Component} from 'react';
+import LiItem from '@common/components/LiItem';
 import classNames from 'classnames';
 
 import style from "./index.less";
@@ -39,10 +40,13 @@ class DropList extends Component{
     return <div className={this.getClass()} contentEditable='false'>
         <ul>
           {data&&data.map((it)=>{
-            /*return <li onClick={(e)=>this.handleSelect(e,it)} className={it.selected||(it.selected!==false&&+it.defaultSelect===1)?style['selected']:''}>{it.labelPrefix}{it.questionDetailList&&it.questionDetailList.length>0?it.questionDetailList[0].name:it.name}{it.labelSuffix}</li>*/
-            return <li onClick={(e)=>this.handleSelect(e,it)} className={it.selected||(boxMark!=1&&!hideTag&&it.selected!==false&&+it.defaultSelect===1)?style['selected']:''}>{it.labelPrefix}{it.name}{it.labelSuffix}</li>
+            return <LiItem handleClick={(e)=>this.handleSelect(e,it)}
+                            type='radio'
+                            needHover={true}
+                            selected={it.selected||(boxMark!=1&&!hideTag&&it.selected!==false&&+it.defaultSelect===1)}
+                            >{it.labelPrefix}{it.name}{it.labelSuffix}</LiItem>
           })}
-          <li onClick={(e)=>this.handleClear(e)} className='red'>清空选项</li>
+          <li onClick={(e)=>this.handleClear(e)} className={style['mclear']}>清空选项</li>
         </ul>
       </div>;
   }

src/common/components/DropList/index.less

@@ -3,16 +3,26 @@
   .pop;
   padding: 0 0 10px;
   color: @text-color;
-  li{
+  /*li{
     line-height: 35px;
     border:1px #fff solid;
     padding: 0 15px;
     white-space: nowrap;
     cursor: pointer;
-  }
-  li:hover,.selected{
+  }*/
+  /*li:hover,.selected{
     border-color:#3B9ED0;
-  }
+  }*/
+}
+.mclear{
+  height: 32px;
+  line-height: 32px;
+  border:1px #fff solid;
+  padding: 0 20px;
+  white-space: nowrap;
+  text-align: center;
+  cursor: pointer;
+  color: @red;
 }
 .hide{
   display: none;

src/common/components/LiItem/index.jsx

@@ -0,0 +1,31 @@
+import classNames from 'classnames';
+import styles from './index.less';
+/**
+ * 单/多选列表的一行
+ * selected:是否被选中
+ * needHover:是否有hover状态
+ * noDot:无最大宽度缩略...样式
+ * disabled:灰色样式,与selected,needHover互斥
+ * handleClick:点击事件
+ * title,style：原生属性
+ * type: border边框选中样式,check蓝色对勾选中样式（默认）,noneCheck黑色对勾选中样式
+ *
+ * **/
+function LiItem(props){
+  const {children,handleClick,title,style,needHover,selected,disabled,noDot} = props;
+  const type = props.type||'check';     //选中样式默认多选选中样式
+  const dot = noDot?styles['no-dot']:'';
+  if(disabled){
+    return <li onClick={handleClick} className={classNames(styles["disabled"],dot,styles["li-item"])} title={title} style={style}>{children}</li>;
+  }
+  const typeMap = {
+    border:'border-selected',
+    check:'check-selected',
+    noneCheck:'black-selected',
+  };
+  const hover = needHover?styles['hoverable']:'';
+  const select = selected?styles[typeMap[type]]:'';
+  return <li onClick={handleClick} className={classNames(hover,select,dot,styles["li-item"])} title={title} style={style}>{children}</li>;
+};
+
+export default LiItem;

src/common/components/LiItem/index.less

@@ -0,0 +1,30 @@
+@import "~@less/mixin.less";
+
+.li-item{
+  height:30px;
+  line-height: 30px;
+  padding: 0 20px 0 25px;
+  border:1px #fff solid;
+  text-align: left;
+  white-space: nowrap;
+  max-width: 150px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  cursor: pointer;
+}
+.hoverable:hover,.border-selected{
+  border-color:#3B9ED0;
+}
+.check-selected,.black-selected{
+  .select-li;
+}
+.black-selected{
+  background-image:url('@common/images/then.png');
+}
+.disabled{
+  color: @disable-color;
+}
+.no-dot{
+  max-width:unset;
+  text-overflow: unset;
+}

src/common/less/variables.less

@@ -90,14 +90,10 @@
   width: 100%;
   font-size: 14px;
   text-align: left;
-  border: none;
   color:#000000;
-  /*padding-left: 40px;*/
+  border: 1px solid #fff;
   cursor: pointer;
-  background: rgba(59,158,208,0.1);
-  background-image: url(../images/first.png);
-  background-repeat: no-repeat;
-  background-position: 0px 10px;
+  background:url(../images/first.png) rgba(59,158,208,0.1) 5px 8px no-repeat;
 }
 .clear{
   width: 60px;

src/components/CommonSymptom/index.less

@@ -21,19 +21,17 @@
     text-indent: 15px;
   }
   li{
-    width: 85px;
+    width: 92px;
     line-height: 30px;
-    padding-left: 15px;
-    margin-right: 5px;
+    padding-left: 20px;
+    /*margin-right: 5px;*/
+    border:1px solid #fff;
     cursor: pointer;
     display: inline-block;
   }
-  li:hover{
-    border-color:#3B9ED0;
-  }
   .selected{
     .select-li;
-    width: 85px;
+    width: 92px;
   }
   .clear{
     .btnCom;

src/components/ListItem/index.jsx

@@ -2,6 +2,7 @@ import classNames from "classnames";
 import {Component} from "react";
 import ScrollArea from 'react-scrollbar';
 import {getIds} from '@utils/tools.js';
+import LiItem from '@common/components/LiItem';
 import style from './index.less';
 
 class ListItem extends Component{
@@ -10,7 +11,7 @@ class ListItem extends Component{
     this.getData = this.getData.bind(this);
     this.getLis = this.getLis.bind(this);
   }
-  handleClick(e,item,i){
+  handleClick(item,i,e){
     e.stopPropagation();
     // window.event? window.event.cancelBubble = true : e.stopPropagation();
     const {handleClick,isExclu,isRadio,data,exists,noneIds,withs,joint,listIndex} = this.props;
@@ -61,16 +62,35 @@ class ListItem extends Component{
       return '';
     }
   }
-  getLis(datas,isSpecialPos){
+  getLis(){
+    const {exclusion,noneIds,exists,withs,ban,isSpecialPos,datas} = this.props;
+    let type='';    //选中样式类型
+    let selected = false;  //是否选中
+    const list = Object.keys(ban).length>0?[...exists,...withs,ban]:[...exists,...withs];
+    const arrs = [...noneIds,...getIds(list)];   //非无殊选中项id集合
     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>
+        //无殊部分，非无殊项有选中，则无殊项灰显（仍可点，选中非无殊项取消选中，反之亦然）
+        selected = exclusion===it.id;
+        return <LiItem handleClick={this.handleClick.bind(this,it,i)}
+                       selected={selected}
+                       noDot={true}
+                       disabled={(exclusion&&!selected)||arrs.length>0}
+                       type='check'
+                       >{it.name}</LiItem>
       }
-      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>
+      //非无殊项，有无殊项被选中，则灰显，“无”选中黑√随后选中的项也黑√选中，
+      type = noneIds.includes(it.id)?'noneCheck':'check';
+      selected = arrs.includes(it.id);
+      return <LiItem handleClick={this.handleClick.bind(this,it,i)}
+                     type={type}
+                     selected={selected}
+                     disabled={exclusion}
+                     title={it.name.length>8?it.name:''}>{it.name&&it.name.length>8?it.name.slice(0,8)+'...':it.name}</LiItem>
     })
   }
   getData(){
-    const {datas,isSpecialPos} = this.props;
+    const {datas} = this.props;
     const contStyle={
       opacity:'0.4',
       right:'0',
@@ -82,7 +102,7 @@ class ListItem extends Component{
     if(!datas||datas.length===0){
       return <li className={style['no-push-data']}>暂无推送</li>
     }
-    const liArr = this.getLis(datas,isSpecialPos);
+    const liArr = this.getLis();
     if(datas&&datas.length>11){
       //超过最多显示条数，添加自定义滚动条，不能全部添加，不需要滚动条时不能阻止外部滚动条滚动事件
       return <ScrollArea speed={0.8}
@@ -100,17 +120,19 @@ class ListItem extends Component{
   }
 
   getMainData(){//主诉添加症状-带搜索框
-    const {datas,isSpecialPos} = this.props;
+    const {exists,withs,ban,datas} = this.props;
     if(!datas||datas.length===0){
       return <li className={style['no-push-data']}>暂无推送数据，可通过搜索查找更多内容~ </li>
     }
+    const arrs = getIds([...exists,...withs,ban]);   //非无殊选中项id集合
     return datas&&datas.map((it,i)=>{
-      return <li onClick={(e)=>this.handleClick(e,it,i)}
-                 className={this.getClass(it.id)}
+      return <LiItem handleClick={this.handleClick.bind(this,it,i)}
+                 selected={arrs.includes(it.id)}
+                 noDot={true}
                  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>
+      </LiItem>
     });
   }
 

src/components/ListItem/index.less

@@ -7,13 +7,13 @@
   margin-left: 8px;
   max-height: 330px;
   overflow-y: auto;
-  li{
+  /*li{
     padding-left: 20px;
     cursor: pointer;
     .mult-li;
     height: 30px;
     line-height: 30px;
-  }
+  }*/
 }
 .independent{
   display: block;
@@ -31,13 +31,13 @@
     width: auto !important;
   }
 }
-.selected{
+/*.selected{
   .select-li;
 }
 .none-selected{
   .select-li;
   background-image: url(../../common/images/then.png);
-}
+}*/
 .no-push-data,.exclusion{
   color:@disable-color;
 }

src/components/Multiple/SlideItem/index.jsx

@@ -2,6 +2,7 @@ import react from "react";
 import style from "./index.less";
 import classNames from 'classnames';
 import {deepClone} from '@utils/tools.js';
+import LiItem from '@common/components/LiItem';
 /**
   单列多选组件下拉 2019-2-20 By_liucf
   接收参数：
@@ -30,13 +31,13 @@ class SlideItem extends react.Component{
     return classNames(style['list'],isHide);
   }
 
-  getSeleStyle(id){
+  /*getSeleStyle(id){
     const {seleId} = this.state;
     if(seleId.includes(id)){
       return style['selected'];
     }
     return '';
-  }
+  }*/
 
   handleSelect(e,item){
     e&&e.stopPropagation();
@@ -77,10 +78,14 @@ class SlideItem extends react.Component{
   }
   render(){
     const {data} = this.props;
+    const {seleId} = this.state;
     return <div className={this.getListClass()} style={this.getStyle()} contentEditable="false">
         <ul>
           {data&&data.map((it)=>{
-          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>
+          return <LiItem handleClick={(e)=>this.handleSelect(e,it)}
+                         needHover={true}
+                         selected={seleId.includes(it.id)}
+                         title={it.name.length>8?it.name:''}>{it.name&&it.name.length>8?it.name.slice(0,8)+'...':it.name}</LiItem>
         })}
           <li onClick={this.handleClear} className={style['mClear']}>清空选项</li>
           <li onClick={this.handleClick} className={style['mConfirm']}>确定</li>

src/components/Multiple/SlideItem/index.less

@@ -1,23 +1,24 @@
 @import "~@less/mixin.less";
-.selected{
+/*.selected{
     .select-li;
-  }
+  }*/
 .list{
   .pop;
   padding: 0 0 10px;
   color: @text-color;
-  li{
+  .mClear,.mConfirm{
     height: 32px;
     line-height: 32px;
     border:1px #fff solid;
     padding: 0 20px;
     white-space: nowrap;
+    text-align: center;
     cursor: pointer;
   }
   // li:hover,.selected{
-  li:hover{
+  /*li:hover{
     border-color:#3B9ED0;
-  }
+  }*/
 }
 .hide{
   display: none;
@@ -28,7 +29,6 @@
 }
 .mConfirm{
   color: #3B9ED0;
-  text-align: center;
   border: 1px solid #3B9ED0;
 
 }

src/components/Multiple/index.jsx

@@ -166,13 +166,13 @@ class Multiple extends react.Component{
       onKeyDown={handleEnter}
       contentEditable={editable}>{value||placeholder}</div>
       <div className={this.getListClass()} contentEditable="false">
-        <SlideItem 
+        <SlideItem
           show={show}
           data={data} 
           seleData={seleData} 
           seleId={seleId} 
           handleConfirm={(obj)=>this.handleConfirm(obj)}
-          ></SlideItem>
+          ></SlideItem >
       </div>
     </div>
   }