治疗方案更多同类药选中状态

src/common/components/HasInfoItem/index.jsx

@@ -1,48 +1,67 @@
 import React,{Component} from 'react';
 import style from './index.less';
+import infoShow from '@common/images/info-show.png';
+import infoMove from '@common/images/info-move.png';
 import $ from 'jquery';
 
 class HasInfoItem extends Component {
     constructor(props) {
         super(props)
+        this.state = {
+            hasEnterItem: false,
+            hasEnterImg: false
+        }
     }
     handleMouseEnterDrug(){
-
+        this.setState({
+            hasEnterItem: true
+        })
     }
     handleMouseLeaveDrug(){
-
+        this.setState({
+            hasEnterItem: false
+        })
     }
     handleMouseEnterImg(){
-
+        this.setState({
+            hasEnterImg: true
+        })
     }
-    onMouseLeave(){
-
+    handleMouseLeaveImg(){
+        this.setState({
+            hasEnterImg: false
+        })
     }
-    setDrugInfo(){
-
+    setDrugInfo(item){
+        const{ setDrugInfo } = this.props
+        setDrugInfo && setDrugInfo(item)
+    }
+    handleSelect(){
+        const{ handleSelect, position } = this.props
+        handleSelect && handleSelect(position)
     }
 
     render(){
         const { item } = this.props
-        return (<span onMouseEnter={this.handleMouseEnterDrug.bind(this,item)}
-            onMouseLeave = {this.handleMouseLeaveDrug}
-            className={style['drug-name-wrapper']} 
-        >
-            <span className={style['drug-name']}  
+        const { hasEnterItem, hasEnterImg} = this.state
+        return (<span className={style['drug-name-wrapper']} >
+            <span className={`${style['drug-name']} ${item.forbidden === '2' ? style['disabled']: item.selected ?  style['selected'] : ''}`}  
                 // onDoubleClick={() =>{this.setDrugInfo(it);showDrugInfo();}}  //药品说明双击显示（现在为点击图标显示）
-                onClick={()=>{item.forbidden === '2' ? '' : this.handleSelect(index2,index3)}} 
-                style={item.forbidden === '2' ? {opacity: '0.3', filter:'alpha(opacity=30)',filter:'progid:DXImageTransform.Microsoft.Alpha(opacity=30)'} : item.selected ? {color: '#3B9ED0', borderBottom: '1px solid #3B9ED0'}:''}
+                onClick={()=>{item.forbidden === '2' ? '' : this.handleSelect()}} 
+                onMouseEnter={this.handleMouseEnterDrug.bind(this)}
+                onMouseLeave = {this.handleMouseLeaveDrug.bind(this)}
                 >
                 {item.medicitionName}
+                {<img className={`${style['info-img']} ${hasEnterItem?style['show-content']:style['hide-content']}`}  
+                title='点击i图标可查看详细说明'
+                src={hasEnterImg?infoMove:infoShow} 
+                onMouseEnter={this.handleMouseEnterImg.bind(this)}
+                onMouseLeave = {this.handleMouseLeaveImg.bind(this)}
+                onClick={this.setDrugInfo.bind(this,item)}/>}
             </span>
-            {/* {<img className={style['info-img']}  
-            title='点击i图标可查看详细说明'
-            style ={currentIndex === index2 ? (index3 === currentImg ? {display: "inline-block"} : {display: "none"}) : {display: "none"}}
-            src={currentIndex === index2 ? (index3 === currentImg ? (hasEnterImg ? info3 : info2) : info2): info2} 
-            onMouseEnter={this.handleMouseEnterImg.bind(this, index3, index2)}
-            onMouseLeave = {this.handleMouseLeaveImg}
-            onClick={this.setDrugInfo.bind(this,item)}/>} */}
-        {item.forbidden === '1' ? <span className={style['info-flag']} style={{border: '1px solid #F4C051', background: '#F4C051',marginLeft: '5px'}}>慎用</span>: item.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> : ''}
+            {(item.forbidden === '1'||item.forbidden === '2') && <span className={`${style['info-flag']} ${item.forbidden === '1' ? style['cautious']:item.forbidden === '2'?style['disabled']:''}`}>
+                {item.forbidden === '1' ? "慎用":item.forbidden === '2'? "禁用":""} 
+            </span>}
         {/*<span  style={item.forbidden === '2' ? {opacity: '0.3', filter:'alpha(opacity=30)',filter:'progid:DXImageTransform.Microsoft.Alpha(opacity=30)'} : ''}> 使用率{item.rate}</span>*/}
 
     </span>)

src/common/components/HasInfoItem/index.less

@@ -1,22 +1,5 @@
-.drug-box {
-    padding: 10px 0 0 0;
-}
-.drug-title{
-    background: #EAF7FA;
-    height: 36px;
-    line-height: 36px;
-    font-weight: bold;
-}
-.drug-icon {
-    width: 16px;
-    float: left;
-    margin: 10px;
-}
-.drug-item {
-    position: relative;
-    line-height: 36px;
-    border-bottom: 1px dashed #D2D2D2;
-}
+
+
 .drug-name-wrapper {
     position: relative;
     margin-right: 6px;
@@ -30,6 +13,7 @@
     display: inline-block;
     height: 30px;
     cursor: pointer;
+    position: relative;
 }
 .info-img, .info-img-more {
     width: 12px;
@@ -39,7 +23,7 @@
 .info-img {
     width: 15px;
     position: absolute;
-    top: -15px;
+    top: -5px;
     left: 50%;
     margin-left: -7px;
     cursor: pointer;
@@ -51,51 +35,28 @@
     line-height: 16px;
     border-radius: 4px;
     text-align: center;
+    margin: 0 0 0 5px;
+    border: 1px solid #000;
+    position: relative;
+    top: 2px;
 }
-.drug-more {
-    cursor: pointer;
-    color: #3B9ED0;
-    position: absolute;
-    right: 0;
-    top: 50%;
-    margin-top: -18px;
-}
-.drug-name-box {
-    float: left;
-    width: 530px;
+.show-content {
+    display: inline-block;
 }
-.drug-content:after{display:block;clear:both;content:"";visibility:hidden;height:0}
-.drug-content{zoom:1}
-.drug-more:hover {
-    color: #3B9ED0;
+.hide-content{
+    display: none;
 }
-
-.diag-content-box{
-    border:1px solid #D2D2D2;
-    margin: 10px 0;
-    padding: 10px 10px 0 10px;
+.disabled{
+    opacity: 0.3;
+    filter:alpha(opacity=30);
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=30);";
 }
-.diag-content-title{
+.selected {
     color: #3B9ED0;
-    line-height: 16px;
-    position: relative;
-    margin: 0 0 10px 0;
+    border-bottom: 1px solid #3B9ED0;
 }
-.diag-content-circle{
-    position: relative;
-    display: inline-block;
-    width:4px;
-    height:4px;
-    background: #3B9ED0;
-    border-radius: 50%;
-    top: -4px;
-    margin-right: 6px;
+.cautious {
+    border: 1px solid #F4C051;
+    background: #F4C051;
 }
-.diag-content {
-    margin: 10px 0 20px 0;
-}
-.diag-content-description{
-    color: #333333;
-    font-weight: 600;
-    margin: 5px 0 10px 0;
-}
+

src/components/Treat/DrugTreat/index.jsx

@@ -23,10 +23,9 @@ class DrugTreat extends Component {
         this.handleMouseLeaveImg = this.handleMouseLeaveImg.bind(this);
         this.getImg = this.getImg.bind(this);
     }
-
-    handleSelect(index,ii) {
+    handleSelect(position) {
         const { selectDrug } = this.props;
-        selectDrug && selectDrug(index,ii);
+        selectDrug && selectDrug(position);
     }
     handleMouseEnterDrug(ii, index, it) {
         this.setState({
@@ -99,7 +98,14 @@ class DrugTreat extends Component {
                                         <div  className={style['drug-name-box']}>
                                             <span style={item2.drugsForbidden === '2'? {opacity: '0.3', filter:'alpha(opacity=30)',filter:'progid:DXImageTransform.Microsoft.Alpha(opacity=30)'} : ''}>{index2 + 1 + '. ' }<span>{item2.subdrugsName}</span>:&nbsp;</span>
                                             {item2.medicitionsList.map((item3, index3) => {
-                                                return ((item3.isShow == 1 || item3.selected) &&  <HasInfoItem item = {item3}></HasInfoItem>
+                                                return ((item3.isShow == 1 || item3.selected) &&  <HasInfoItem 
+                                                    item = {item3}
+                                                    setDrugInfo = {this.setDrugInfo}
+                                                    position = {[index0, index1, index2, index3]}
+                                                    handleSelect = {this.handleSelect}
+                                                >
+
+                                                </HasInfoItem>
                                                 )
 
                                             })}

src/containers/Treat.js

@@ -35,11 +35,10 @@ function mapDispatchToProps(dispatch) {
             dispatch({type: CHANGE_REACT, it, index})
         },
       
-        selectDrug: (index, ii)=>{
+        selectDrug: (position)=>{
             dispatch ({
                 type: SELECT_DRUG,
-                index: index,
-                ii: ii
+                indexList: position,
             })
         },
         setOtherRecommend: (item, index) => {

src/store/actions/treat.js

@@ -54,9 +54,8 @@ export const setTreatment = (state, action) => {
 export const selectDrug = (state, action) => {
     const res = JSON.parse(JSON.stringify(state));
     const drugTreat = res.treatment.slice();
-    const index = action.index  //药品类的索引
-    const ii = action.ii   //药品索引
-    const selectItem = drugTreat[index].medicitionsList[ii]
+    const indexList = action.indexList  //药品索引列表
+    const selectItem = drugTreat[indexList[0]].meditionDetails[indexList[1]].treatment[indexList[2]].medicitionsList[indexList[3]]
     const selected =  selectItem.selected//所选择药品的选择状态
     selectItem.selected = !selected;
     return res