修改药品说明展示方式

src/components/Treat/DrugTreat/index.jsx

@@ -2,6 +2,8 @@ import React, { Component } from 'react';
 import style from './index.less';
 import info from './../img/info.png';
 import info1 from './../img/info1.png';
+import info2 from './../img/info2.png';
+import info3 from './../img/info3.png';
 import drugIcon from './../img/drug.png';
 import more from '@common/images/addItem1.png';
 import $ from "jquery";
@@ -16,24 +18,39 @@ class DrugTreat extends Component {
         this.setOtherRecommend = this.setOtherRecommend.bind(this);
         this.setDrugInfo = this.setDrugInfo.bind(this);
         this.showTreatDesc = this.showTreatDesc.bind(this);
+        this.handleMouseLeaveDrug = this.handleMouseLeaveDrug.bind(this);
         this.handleMouseLeaveImg = this.handleMouseLeaveImg.bind(this);
+        this.getImg = this.getImg.bind(this);
     }
 
     handleSelect(index,ii) {
         const { selectDrug } = this.props;
         selectDrug && selectDrug(index,ii);
     }
-    handleMouseEnterImg(ii, index) {
+    handleMouseEnterDrug(ii, index, it) {
+        const drugNameWidth = parseInt($('#'+it.medicitionName)[0].offsetWidth)
+        const imgLeft = drugNameWidth/2-10
+        $('#'+it.medicitionName).find('img').css('left', imgLeft)
         this.setState({
             currentIndex: index,
             currentImg: ii
         })
     }
-    handleMouseLeaveImg() {
+    handleMouseLeaveDrug() {
         this.setState({
             currentIndex: -1,
         })
     }
+    handleMouseEnterImg() {
+        this.setState({
+            hasEnterImg: true
+        })
+    }
+    handleMouseLeaveImg() {
+        this.setState({
+            hasEnterImg: false
+        })
+    }
     setOtherRecommend(item, index) {
         this.showTreatDesc();
         const { setOtherRecommend } = this.props;
@@ -43,6 +60,8 @@ class DrugTreat extends Component {
         const { setDrugInfo } = this.props;
         setDrugInfo && setDrugInfo(item);
     }
+    getImg() {
+    }
     //搜索药品说明书（查看数据用）
     handleInputDrug(e) {
         this.setState({
@@ -68,7 +87,7 @@ class DrugTreat extends Component {
 
     render(){
         const { treatment,showDrugInfo } = this.props
-        const { currentImg, currentIndex } = this.state
+        const { currentImg, currentIndex, hasEnterImg } = this.state
         return(
             treatment && treatment.length > 0 && <div className={style['drug-box']}>
                 <h3 className={style['drug-title']}><img className={style['drug-icon']} src={drugIcon}/> 常用药物治疗</h3>
@@ -81,18 +100,27 @@ class DrugTreat extends Component {
                             {item.medicitionsList.map((it, ii) => {
                                 return ((it.isShow == 1 || it.selected) && <span >
                                         {ii === 0 ? '' : ', '}
-                                        <span className={style['drug-name']}  
-                                            // onDoubleClick={() =>{this.setDrugInfo(it);showDrugInfo();}}  //药品说明双击显示（现在为点击图标显示）
-                                            onClick={()=>{it.forbidden === '2' ? '' : this.handleSelect(index,ii)}} 
-                                            style={it.forbidden === '2' ? {opacity: '0.3', filter:'alpha(opacity=30)',filter:'progid:DXImageTransform.Microsoft.Alpha(opacity=30)'} : it.selected ? {color: '#3B9ED0', borderBottom: '1px solid #3B9ED0'}:''}
-                                            >
-                                            {it.medicitionName}
-                                        </span>
-                                        {<img className={style['info-img']}    
-                                              src={currentIndex === index ? (ii === currentImg ? info1 : info) : info} 
+                                        <span onMouseEnter={this.handleMouseEnterDrug.bind(this, ii , index, it)}
+                                              onMouseLeave = {this.handleMouseLeaveDrug}
+                                              id={it.medicitionName}
+                                              className={style['drug-name-wrapper']} 
+                                        >
+                                            <span className={style['drug-name']}  
+                                                // onDoubleClick={() =>{this.setDrugInfo(it);showDrugInfo();}}  //药品说明双击显示（现在为点击图标显示）
+                                                onClick={()=>{it.forbidden === '2' ? '' : this.handleSelect(index,ii)}} 
+                                                style={it.forbidden === '2' ? {opacity: '0.3', filter:'alpha(opacity=30)',filter:'progid:DXImageTransform.Microsoft.Alpha(opacity=30)'} : it.selected ? {color: '#3B9ED0', borderBottom: '1px solid #3B9ED0'}:''}
+                                                >
+                                                {it.medicitionName}
+                                            </span>
+                                            {<img className={style['info-img']}  
+                                              style ={currentIndex === index ? (ii === currentImg ? {display: "inline-block"} : {display: "none"}) : {display: "none"}}
+                                              src={currentIndex === index ? (ii === currentImg ? (hasEnterImg ? info3 : info2) : info2): info2} 
                                               onMouseEnter={this.handleMouseEnterImg.bind(this, ii, index)}
                                               onMouseLeave = {this.handleMouseLeaveImg}
                                               onClick={() =>{this.setDrugInfo(it);showDrugInfo();}}/>}
+                                        </span>
+                                        
+                                        
                                         {it.forbidden === '1' ? <span className={style['info-flag']} style={{border: '1px solid #F4C051', background: '#F4C051',marginLeft: '5px'}}>慎用</span>: it.forbidden === '2' ? <span className={style['info-flag']} style={{opacity: '0.3',filter:'alpha(opacity=30)',filter:'progid:DXImageTransform.Microsoft.Alpha(opacity=30)',border: '1px solid #000',marginLeft: '5px'}}>禁用</span> : ''}, 
                                         <span  style={it.forbidden === '2' ? {opacity: '0.3', filter:'alpha(opacity=30)',filter:'progid:DXImageTransform.Microsoft.Alpha(opacity=30)'} : ''}> 使用率{it.rate}</span>
                                         
@@ -100,7 +128,7 @@ class DrugTreat extends Component {
                             })}
 
                         </div>
-                        {<div className={style['drug-more']} onClick={() =>this.setOtherRecommend(item, index)} ><img className={style['info-img']} src={more} />更多同类药</div> }
+                        {<div className={style['drug-more']} onClick={() =>this.setOtherRecommend(item, index)} ><img className={style['info-img-more']} src={more} />更多同类药</div> }
                         
                     </div>)
                 })}

src/components/Treat/DrugTreat/index.less

@@ -14,17 +14,25 @@
     line-height: 36px;
     border-bottom: 1px dashed #D2D2D2;
 }
+.drug-name-wrapper {
+    position: relative;
+}
 .drug-name {
     border-bottom: 1px solid #666;
     display: inline-block;
     height: 30px;
     cursor: pointer;
 }
-.info-img {
+.info-img, .info-img-more {
     width: 12px;
     margin: 0 3px -1px;
     cursor: pointer;
 }
+.info-img {
+    width: 15px;
+    position: absolute;
+    top: -15px;
+}
 .info-flag {
     display: inline-block;
     width: 34px;

src/store/actions/diagnosticSearch.js

@@ -19,7 +19,7 @@ export const setSearchValue = (state,action) => {
 export const getSearchResult= (state, action) => {
     const res = Object.assign({},state);
     let searchResult = []
-    action.searchResult.map((item, index) =>{
+    action.searchResult && action.searchResult.map((item, index) =>{
         let searchResultItem = {}
         searchResultItem.id = item.questionId
         searchResultItem.name = item.name