上次用药情况

src/components/Treat/LastTreat/LastDrug/index.jsx

@@ -0,0 +1,77 @@
+import React, { Component } from 'react';
+import style from './index.less';
+import info2 from './../../img/info2.png';
+import info3 from './../../img/info3.png';
+import $ from "jquery";
+
+class LastDrug extends Component {
+    constructor(props){
+        super(props);
+        this.state = {
+            currentIndex: -1
+        }
+        this.handleMouseLeaveDrug = this.handleMouseLeaveDrug.bind(this);
+        this.handleMouseLeaveImg = this.handleMouseLeaveImg.bind(this);
+        this.setDrugInfo = this.setDrugInfo.bind(this);
+    }
+    handleMouseEnterDrug(index, item) {
+        const drugNameWidth = parseInt($('#'+item.medicitionName)[0].offsetWidth)
+        const imgLeft = drugNameWidth/2-8
+        $('#'+item.medicitionName).find('img').css('left', imgLeft)
+        this.setState({
+            currentIndex: index,
+        })
+    }
+    handleMouseLeaveDrug() {
+        this.setState({
+            currentIndex: -1, 
+        })
+    }
+    handleMouseEnterImg() {
+        this.setState({
+            hasEnterImg: true
+        })
+    }
+    handleMouseLeaveImg() {
+        this.setState({
+            hasEnterImg: false
+        })
+    }
+    setDrugInfo(item) {
+        const { setDrugInfo } = this.props;
+        setDrugInfo && setDrugInfo(item);
+    }
+
+
+    render() {
+        const { icon, titleStyle,titleBg, filter, title, lastDrugList, showDrugInfo } = this.props
+        const  { currentIndex, hasEnterImg } = this.state
+        return(
+             <div className={style['last-common-box']}>
+                <div className={style['last-common-title']}>{title}</div>
+                <div className={style['last-common-list']}>
+                    {lastDrugList.map((item, index) => {
+                        return<span
+                            onMouseEnter={this.handleMouseEnterDrug.bind(this, index, item)}
+                            onMouseLeave = {this.handleMouseLeaveDrug}
+                            id={item.medicitionName}
+                            className={style['last-common-warpper']}
+                            > 
+                            {item.medicitionName} 
+                            {<img className={style['info-img']}  
+                                style ={currentIndex === index  ? {display: "inline-block"} : {display: "none"}}
+                                src={currentIndex === index ?(hasEnterImg ? info3 : info2 ): info2} 
+                                onMouseEnter={this.handleMouseEnterImg.bind(this)}
+                                onMouseLeave = {this.handleMouseLeaveImg}
+                                onClick={() =>{this.setDrugInfo(item);showDrugInfo();}}/>}
+                            {index == lastDrugList.length-1 ?  '' : <span>,</span>}
+                        </span>
+                    })}
+                </div>
+            </div>
+        )
+    }
+
+}
+
+export default LastDrug;

src/components/Treat/LastTreat/LastDrug/index.less

@@ -0,0 +1,14 @@
+.last-common-title {
+    height: 30px;
+    line-height: 30px;
+}
+.last-common-warpper {
+    position: relative;
+    margin: 0 20px 0 0
+}
+.info-img {
+    position: absolute;
+    width: 15px;
+    position: absolute;
+    top: -15px;
+}

src/components/Treat/LastTreat/index.jsx

@@ -1,18 +1,60 @@
 import React, { Component } from 'react';
 import style from './index.less';
+import LastDrug from './LastDrug/index.jsx';
+import info2 from './../img/info2.png';
+import info3 from './../img/info3.png';
+import $ from "jquery";
 
 class LastTreat extends Component {
     constructor(props){
         super(props);
+        this.state = {
+            currentIndex: -1
+        }
+        this.handleMouseLeaveDrug = this.handleMouseLeaveDrug.bind(this);
+        this.handleMouseLeaveImg = this.handleMouseLeaveImg.bind(this);
+        this.setDrugInfo = this.setDrugInfo.bind(this);
     }
+    handleMouseEnterDrug(index, item) {
+        const drugNameWidth = parseInt($('#'+item.medicitionName)[0].offsetWidth)
+        const imgLeft = drugNameWidth/2-8
+        $('#'+item.medicitionName).find('img').css('left', imgLeft)
+        this.setState({
+            currentIndex: index,
+        })
+    }
+    handleMouseLeaveDrug() {
+        this.setState({
+            currentIndex: -1, 
+        })
+    }
+    handleMouseEnterImg() {
+        this.setState({
+            hasEnterImg: true
+        })
+    }
+    handleMouseLeaveImg() {
+        this.setState({
+            hasEnterImg: false
+        })
+    }
+    setDrugInfo(item) {
+        const { setDrugInfo } = this.props;
+        setDrugInfo && setDrugInfo(item);
+    }
+
 
     render() {
-        const { icon, titleStyle,titleBg, filter, title, lasttreatTreat } = this.props
+        const { icon, titleStyle,titleBg, filter, title, lastTreat, showDrugInfo, setDrugInfo } = this.props
+        const { chronicDisMedica, commonDisMedica } = lastTreat
         return(
-            lasttreatTreat.content && lasttreatTreat.content.length > 0 && <div className={style['last-treat-wrapper']}>
+            chronicDisMedica && chronicDisMedica.length > 0 && commonDisMedica && commonDisMedica.length > 0 &&
+            <div className={style['last-treat-wrapper']}>
+                {console.log('lasttreatTreat', lastTreat)}
                 <div className={style['last-treat-title-box']} style={titleStyle}></div>
                 <div className={style['last-treat-title']} ><img className={style['last-treat-icon']} src={icon}/>{title}</div>
-                
+                {commonDisMedica.length > 0 && <LastDrug title='普通病用药内容' lastDrugList = {commonDisMedica}  showDrugInfo={showDrugInfo} setDrugInfo={setDrugInfo}></LastDrug>}
+                {chronicDisMedica.length > 0 && <LastDrug title='慢病用药内容' lastDrugList = {chronicDisMedica}  showDrugInfo={showDrugInfo} setDrugInfo={setDrugInfo}></LastDrug>}
             </div>
         )
     }

src/components/Treat/LastTreat/index.less

@@ -23,3 +23,5 @@
     float: left;
     margin: 10px;
 }
+
+

src/components/Treat/index.jsx

@@ -52,7 +52,7 @@ class Treat extends Component {
       $('#drugWrapper').css({'z-index': 301});
     }
     render(){
-        const {setDrugInfoMore,treatIndex,treatIndexSet, generalTreat, treatment, treatItem, surgeryTreat, selectDrug, drugInfo, treatDesc, setOtherRecommend, setDrugInfo, showDrug, showDrugInfo,hideDrugInfo, title, drugInfoList, hideDrugInfoMore} = this.props;
+        const {setDrugInfoMore,treatIndex,treatIndexSet, generalTreat, treatment, treatItem, surgeryTreat, lastTreat, selectDrug, drugInfo, treatDesc, setOtherRecommend, setDrugInfo, showDrug, showDrugInfo,hideDrugInfo, title, drugInfoList, hideDrugInfoMore} = this.props;
         const { zIndex,show } = this.state
         return(
             <div   className={style['treat-wrapper']}>
@@ -64,6 +64,7 @@ class Treat extends Component {
 
                     <div className={style['treat-inner-box']}>
                         <GeneralTreat icon={generalIcon} title='一般治疗'   generalTreat={generalTreat}></GeneralTreat>
+                        <LastTreat icon={generalIcon} title='上次用药情况' lastTreat={lastTreat}  showDrugInfo = {showDrugInfo} setDrugInfo={ setDrugInfo }></LastTreat>
                         <DrugTreat treatment={ treatment } 
                                 selectDrug={selectDrug} 
                                 setOtherRecommend={ setOtherRecommend } 

src/containers/Treat.js

@@ -13,6 +13,7 @@ function mapStateToProps(state){
         treatment: treat.treatment,
         generalTreat: treat.generalTreat,
         surgeryTreat: treat.surgeryTreat,
+        lastTreat: treat.lastTreat,
         treatDesc: treat.treatDesc,
         drugInfo: treat.drugInfo,
         showDrug: treat.showDrugInfo,

src/store/reducers/treat.js

@@ -71,21 +71,21 @@ const initState = {
     lastTreat: {
         commonDisMedica: [
             {
-                name: '泮托拉唑',
+                medicitionName: '泮托拉唑',
                 id: 145
             },
             {
-                name: '奥美拉唑',
+                medicitionName: '奥美拉唑',
                 id: 341
             }
         ],
         chronicDisMedica: [
             {
-                name: '兰索拉唑',
+                medicitionName: '兰索拉唑',
                 id: 342
             },
             {
-                name: '山莨菪碱',
+                medicitionName: '山莨菪碱',
                 id: 344
             }
         ],