主诉添加症状搜索，标签搜索下拉，用新子组件

src/common/components/DropList/index.jsx

@@ -42,7 +42,6 @@ class DropList extends Component{
           {data&&data.map((it)=>{
             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>
           })}

src/common/components/LiItem/index.jsx

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

src/common/components/LiItem/index.less

@@ -3,11 +3,11 @@
 .li-item{
   height:30px;
   line-height: 30px;
-  padding: 0 20px 0 25px;
+  padding: 0 18px 0 22px;
   border:1px #fff solid;
   text-align: left;
   white-space: nowrap;
-  max-width: 150px;
+  max-width: 100%;
   text-overflow: ellipsis;
   overflow: hidden;
   cursor: pointer;
@@ -25,6 +25,7 @@
   color: @disable-color;
 }
 .no-dot{
-  max-width:unset;
-  text-overflow: unset;
+  /*max-width:100%;
+  width: unset;
+  text-overflow: unset;*/
 }

src/common/components/SearchBox/index.jsx

@@ -4,7 +4,7 @@ import clear from './imgs/clear.png';
 import search from './imgs/search.png';
 import config from '@config/index';
 import classNames from 'classnames';
-import SearchDrop from '@components/SearchDrop';
+import LiItem from '@common/components/LiItem';
 import ScrollArea from 'react-scrollbar';
 /**
  * 主诉“添加症状”下拉中的：搜索框（含结果下拉）
@@ -25,7 +25,7 @@ class SearchBox extends React.Component {
         this.handleFocus = this.handleFocus.bind(this);
         this.handleBlur = this.handleBlur.bind(this);
         this.clickIcon = this.clickIcon.bind(this);
-        this.handleSearchSelect = this.handleSearchSelect.bind(this);
+        //this.handleSearchSelect = this.handleSearchSelect.bind(this);
         this.reset = this.reset.bind(this);
     }
     handleClearVal(){
@@ -37,7 +37,7 @@ class SearchBox extends React.Component {
         });
         clearSearch&&clearSearch();
     }
-    handleSearchSelect(e,item){
+    handleSearchSelect(item,e){
       e.stopPropagation();
       e.preventDefault();
       const {clearSearch,onSelect} = this.props;
@@ -149,7 +149,9 @@ class SearchBox extends React.Component {
                       <ul>
                         {mainSearchData&&mainSearchData.map((it)=>{
                           litext = it.showType==1?it.name:it.name+'（'+it.retrievalName+'）';
-                          return <li key={it.conceptId} onClick={(e)=>this.handleSearchSelect(e,it)} title={litext}>{litext}</li>
+                          return <LiItem key={it.conceptId}
+                                         handleClick={this.handleSearchSelect.bind(this,it)}
+                                         title={litext}>{litext}</LiItem>
                         })}
                       </ul>
                     </ScrollArea>

src/components/ListItem/index.jsx

@@ -48,6 +48,8 @@ class ListItem extends Component{
         //无殊部分，非无殊项有选中，则无殊项灰显（仍可点，选中非无殊项取消选中，反之亦然）
         selected = exclusion===it.id;
         return <LiItem handleClick={this.handleClick.bind(this,it,i)}
+                       key={it.id}
+                       noHover={true}
                        selected={selected}
                        noDot={true}
                        disabled={(exclusion&&!selected)||arrs.length>0}
@@ -58,7 +60,9 @@ class ListItem extends Component{
       type = noneIds.includes(it.id)?'noneCheck':'check';
       selected = arrs.includes(it.id);
       return <LiItem handleClick={this.handleClick.bind(this,it,i)}
+                     key={it.id}
                      type={type}
+                     noHover={true}
                      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>
@@ -102,17 +106,18 @@ class ListItem extends Component{
     const arrs = getIds([...exists,...withs,ban]);   //非无殊选中项id集合
     return datas&&datas.map((it,i)=>{
       return <LiItem handleClick={this.handleClick.bind(this,it,i)}
+                 key={it.id}
+                 noHover={true}
                  selected={arrs.includes(it.id)}
-                 noDot={true}
                  title={it.name.length>4?it.name:''}
-                 style={{'width':'55px','display':'inline-block'}}>
+                 style={{'width':'58px','display':'inline-block'}}>
         {it.name&&it.name.length>4?it.name.slice(0,4)+'...':it.name}
       </LiItem>
     });
   }
 
   render(){
-    const {datas,isSpecialPos,boxMark,tagType,listIndex,isSingle,pos} = this.props;
+    const {isSpecialPos,boxMark,tagType,listIndex,isSingle,pos} = this.props;
     const posit = isSpecialPos?style['independent']:'';
     const ifMainSear = boxMark==1 && tagType==11 && !pos?true:false;
     // 单列直接设置宽度，多列则第二列设置(伴字ul不设置宽度)

src/components/Multiple/SlideItem/index.jsx

@@ -83,7 +83,6 @@ class SlideItem extends react.Component{
         <ul>
           {data&&data.map((it)=>{
           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>
         })}

src/components/SearchDrop/index.jsx

@@ -1,5 +1,6 @@
 import React,{Component} from 'react';
 import classNames from 'classnames';
+import LiItem from '@common/components/LiItem';
 import ScrollArea from 'react-scrollbar';
 
 import style from "./index.less";
@@ -47,7 +48,7 @@ class SearchDrop extends Component{
       top:top?top+'px':''
     }
   }
-  handleSelect(e,item){
+  handleSelect(item,e){
     // onClick事件换成onmouseup--点击清除后谷歌下搜索结果点击不上去的情况
     e.stopPropagation();
     const {onSelect,onShow} = this.props;
@@ -70,7 +71,7 @@ class SearchDrop extends Component{
         <ScrollArea speed={0.8}
                     horizontal={false}
                     stopScrollPropagation={data.length>6?true:false}
-                    style={{maxHeight:'225px'}}
+                    style={{maxHeight:'180px'}}
                     className={style["area"]}
                     verticalContainerStyle={contStyle}
                     verticalScrollbarStyle={barStyle}
@@ -78,7 +79,7 @@ class SearchDrop extends Component{
           <ul>
             {data&&data.map((it)=>{
               litext = it.showType==1?it.name:it.name+'（'+it.retrievalName+'）';
-              return <li onClick={(e)=>this.handleSelect(e,it)} title={litext}>{litext}</li>
+              return <LiItem handleClick={this.handleSelect.bind(this,it)} title={litext}>{litext}</LiItem>
             })}
           </ul>
         </ScrollArea>
@@ -89,7 +90,7 @@ class SearchDrop extends Component{
         <ScrollArea speed={0.8}
                     horizontal={false}
                     stopScrollPropagation={data.length>6?true:false}
-                    style={{maxHeight:'225px'}}
+                    style={{maxHeight:'180px'}}
                     className={style["area"]}
                     verticalContainerStyle={contStyle}
                     verticalScrollbarStyle={barStyle}
@@ -97,7 +98,7 @@ class SearchDrop extends Component{
           <ul>
             {data&&data.map((it)=>{
               litext = it.showType==1?it.name:it.name+'（'+it.retrievalName+'）';
-              return <li onClick={(e)=>this.handleSelect(e,it)} title={litext}>{litext}</li>
+              return <LiItem handleClick={this.handleSelect.bind(this,it)} title={litext}>{litext}</LiItem>
             })}
           </ul>
         </ScrollArea>

src/components/SearchDrop/index.less

@@ -5,21 +5,4 @@
   overflow-x: hidden;
   .pop;
   padding: 0 0 10px;
-  li{
-    width: 200px;
-    line-height: 35px;
-    border:1px #fff solid;
-    padding: 0 20px 0 30px;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    cursor: pointer;
-  }
-  li:hover{
-    border-color:#3B9ED0;
-  }
 }
-/*
-.hide{
-  display: none;
-}*/