提示信息详情页弹窗显示

src/common/components/ConfirmModal/NewPortal/index.jsx

@@ -9,7 +9,6 @@ class NewPortal extends Component {
         this.node = document.createElement('div');
         document.body.appendChild(this.node);
     }
-
     render() {
         const { visible,children } = this.props;
         

src/components/PushItems/DetailsModal/NewPortal/index.jsx

@@ -0,0 +1,29 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+
+//传送门，将dom渲染到body节点
+class NewPortal extends Component {
+    constructor(props) {
+        super(props)
+        // 初始化创建渲染的父元素并添加到body下
+        this.node = document.createElement('div');
+    }
+
+    componentDidMount() {
+        document.body.appendChild(this.node);
+    }
+
+    componentWillUnmount() {
+        document.body.removeChild(this.node);
+    }
+    render() {
+        const { visible,children } = this.props;
+        
+        return visible && ReactDOM.createPortal(
+            children,
+            this.node
+        )
+    }
+}
+
+export default NewPortal;

src/components/PushItems/DetailsModal/index.jsx

@@ -0,0 +1,42 @@
+import React, { Component } from "react";
+import styles from "./index.less";
+import NewPortal from './NewPortal'
+import close from "./../img/close.png";
+class DetailsModal extends Component {
+    constructor(props) {
+        super(props);
+        this.hideTips = this.hideTips.bind(this)
+    }
+    hideTips() {
+        const { hideTips } = this.props;
+        hideTips && hideTips();
+    }
+
+    render() {
+        const {showTipsDetails, tipsDetails} = this.props;
+        const imageUrlPrefix = 'http://192.168.2.241:82'; //图片服务器地址
+        return (<NewPortal visible={showTipsDetails}>
+        <div className={styles['details-wrapper']}>
+           {console.log('tipsDetails', tipsDetails)}
+           <div className={styles['details-content-wrapper']}>
+                <h1 className={styles['details-content-name']} >{tipsDetails && tipsDetails.name} <img className={styles['details-close']} onClick={this.hideTips} src={close} /></h1>
+                <div className={styles['details-content']}>
+                    {tipsDetails && tipsDetails.introduceDetailList && tipsDetails.introduceDetailList.map((item, index) => {
+                        return (<div>
+                            <div className={styles['details-content-title-box']}>
+                                <span className={styles['details-content-title-name']}>{item.title}</span>
+                                <div className={styles['details-content-title-line']}></div>
+                            </div>
+                            <div dangerouslySetInnerHTML ={{__html: item.content.replace(/{imageUrlPrefix}/g, imageUrlPrefix)}}></div>
+                        </div>)
+                    })}
+                </div>
+           </div>
+           <div className={styles['details-mask']}>
+           </div>
+        </div>
+    </NewPortal>)
+    }
+}
+
+export default DetailsModal;

src/components/PushItems/DetailsModal/index.less

@@ -0,0 +1,72 @@
+.details-wrapper {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    z-index: 205;
+}
+
+.details-content-wrapper {
+    position: fixed;
+    padding: 50px 0;
+    width: 80%;
+    height: 80%;
+    left: 10%;
+    top: 10%;
+    background: #fff;
+    z-index: 10;
+}
+
+.details-content-name {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    padding: 0 40px;
+    height: 50px;
+    line-height: 50px;
+    font-size: 24px;
+}
+
+.details-content-title-box {
+    position: relative;
+    height: 40px;
+    line-height: 40px;
+    font-size: 20px;
+}
+
+.details-content-title-name {
+    position: absolute;
+    background: #fff;
+    padding-right: 5px;
+    font-size: 20px;
+    z-index: 10;
+}
+
+.details-content-title-line {
+    position: absolute;
+    width: 100%;
+    height: 20px;
+    top: 0;
+    border-bottom: 1px dashed #ccc;
+}
+.details-close {
+    position: absolute;
+    right: 0;
+}
+.details-content {
+    height: 100%;
+    padding: 0 40px;
+    overflow-y: auto;
+}
+.details-mask {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    background: #000;
+    opacity: .6;
+    filter:alpha(opacity=60);
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=60);";
+}

src/components/PushItems/index.jsx

@@ -7,7 +7,7 @@ import tipsImg from "../../common/images/tips.png";
 import vigilantImg from "../../common/images/vigilant.png";
 import showImg from "../../common/images/show.png";
 import hideImg from "../../common/images/close.png";
-
+import DetailsModal from './DetailsModal';
 import PushDiag from "./PushDiag";
 import DiagnosticItem from "@containers/DiagnosticItem";
 import $ from "jquery";
@@ -29,6 +29,7 @@ class PushItems extends Component {
     this.changeAssay = this.changeAssay.bind(this);
     this.changeCheck = this.changeCheck.bind(this);
     this.showTips = this.showTips.bind(this);
+    this.hideTips = this.hideTips.bind(this)
     this.$cont = React.createRef();
   }
 
@@ -61,8 +62,13 @@ class PushItems extends Component {
   }
 
   showTips(tips) {
-    const { getTipsDetails } = this.props;
+    const { getTipsDetails, showTipsDetailsModal } = this.props;
     getTipsDetails && getTipsDetails();
+    showTipsDetailsModal && showTipsDetailsModal()
+  }
+  hideTips() {
+    const { hideTipsDetailsModal } = this.props;
+    hideTipsDetailsModal && hideTipsDetailsModal()
   }
   componentDidMount() {
     const height = getWindowInnerHeight() - 200;
@@ -82,7 +88,9 @@ class PushItems extends Component {
       possible,
       assay,
       check,
-      tips
+      tips,
+      showTipsDetails,
+      tipsDetails
     } = this.props.pushMessage;
     const { tipsDiscalimer } = this.props;
     const { moreAssay, moreCheck } = this.state;
@@ -355,7 +363,10 @@ class PushItems extends Component {
           </div>
         </div>
         {tipsDiscalimer.data && <div className={style['disTips']} dangerouslySetInnerHTML={{__html: tipsDiscalimer.data.data[1].description}}></div>}
-        
+        {showTipsDetails && <DetailsModal  
+            showTipsDetails = {showTipsDetails}
+            hideTips = {this.hideTips}
+            tipsDetails = {tipsDetails}/>}
         
       </div>
     );

src/components/TreatDesc/index.jsx

@@ -37,7 +37,7 @@ class TreatDesc extends Component {
                     
                 </div> } */}
                 { otherDrugIndex > -1 && <div  className={style['similar-drug']}>
-                    <h3 className={style['drug-desc-title']}>同类药物  <img src={close} onClick={this.hideTreatDesc} className={style['close-drug-desc']} /></h3>
+                    <h3 className={style['drug-desc-title']}><span className={style['drug-desc-class-title']} title={'同类药物(' + treatment[otherDrugIndex].drugsName + ')'}>同类药物({treatment[otherDrugIndex].drugsName})</span>  <img src={close} onClick={this.hideTreatDesc} className={style['close-drug-desc']} /></h3>
                     {treatment[otherDrugIndex].medicitionsList.map((item, index) =>{
                         return (<span   style={item.forbidden === '2' ? {opacity: '0.3', filter:'alpha(opacity=30)'} : ''}>
                         {index === 0 ? '' : ', '}     
@@ -50,7 +50,7 @@ class TreatDesc extends Component {
                             </span>
                         </span>              
                         
-                        {/* {item.showInfo && item.showInfo==='1'&& <img className={style['info-img']} src={info} />} */}
+                        {<img  onClick={() =>{setDrugInfo(item);showDrugInfo();}}  className={style['info-img']} src={info} />}
                         {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={{border: '1px solid #000',marginLeft: '5px'}}>禁用</span> : ''}, 使用率{item.rate}
                         
                     </span>)

src/components/TreatDesc/index.less

@@ -68,3 +68,10 @@
     border-radius: 4px;
     text-align: center;
 }
+.drug-desc-class-title {
+    display: inline-block;
+    width: 210px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}

src/containers/PushItemsContainer.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import {connect} from 'react-redux';
 import PushItems from '../components/PushItems'
-import {CHANGE_ASSAY, CHANGE_CHECK, ADD_BILLING} from '@store/types/pushMessage';
+import {CHANGE_ASSAY, CHANGE_CHECK, ADD_BILLING, SHOW_TIPS_DETAILS, HIDE_TIPS_DETAILS} from '@store/types/pushMessage';
 import { ADD_DIAGNOSTIC, GET_DIAGNOSTIC_STR } from '@store/types/diagnosticList';
 import {billing, getTips, getTipsDetails} from '../store/async-actions/pushMessage';
 import { isAddMainSuit } from '@store/async-actions/diagnosticList';
@@ -45,6 +45,16 @@ function mapDispatchToProps(dispatch) {
         },
         getTipsDetails: () => {
             dispatch(getTipsDetails())
+        },
+        showTipsDetailsModal: () => {
+            dispatch({
+                type: SHOW_TIPS_DETAILS
+            })
+        },
+        hideTipsDetailsModal: () => {
+            dispatch({
+                type: HIDE_TIPS_DETAILS
+            })
         }
     }
 }

src/store/actions/pushMessage.js

@@ -129,12 +129,20 @@ export const addScheme = (state, action) => {
   return res;
 }
 
+//设置提示信息
 export const setTips = (state, action) => {
   const res = Object.assign({}, state)
   res.tips = action.tips;
   return res;
 }
 
+//设置提示信息详情页
+export const setTipsDetails = (state, action) => {
+  const res = Object.assign({}, state)
+  res.tipsDetails = action.tipsDetails;
+  return res;
+}
+
 export const setChangeAdviceTreatment = (state, action) => {
 	const res = JSON.parse(JSON.stringify(state))
 	const index = action.index; //诊断的下标
@@ -198,8 +206,27 @@ export const addBilling = (state, action) => {
 	return res;
 }
 export const clearAllPushMessage = (state, action) => {
-    const res = JSON.parse(JSON.stringify(state));
-	res.advice = action.data
-	res.AdviceStr = action.saveText
+	const res = JSON.parse(JSON.stringify(state));
+	res.advice = action.data;
+	res.AdviceStr = action.saveText;
+	res.tips = {};
+	res.vigilant = [];
+	res.doubt = [];
+	res.possible = [];
+	res.determine = [];
+	res.assay = [];
+	res.check = [];
+	return res;
+}
+
+export const showTipsDetails = (state, action) => {
+	const res = Object.assign({}, state);
+	res.showTipsDetails = true;
+	return res;
+}
+
+export const hideTipsDetails = (state, action) => {
+	const res = Object.assign({}, state);
+	res.showTipsDetails = false;
 	return res;
 }

src/store/async-actions/pushMessage.js

@@ -1,5 +1,5 @@
 import { get, post, json } from "@utils/ajax";
-import { BILLING_ADVICE, SET_TIPS } from '../types/pushMessage';
+import { BILLING_ADVICE, SET_TIPS, SET_TIPS_DETAILS } from '../types/pushMessage';
 import { SET_CLICK_DIAG } from '../types/diagnosticList';
 import {storageLocal,getEMRParams} from '@utils/tools';
 
@@ -93,6 +93,26 @@ export const getTips = (diagItem) =>{
 export const getTipsDetails = () => {
     return(dispatch, getState) => {
         const state = getState();
-        window.open(`/static/pages/information.html?type=7&&questionId=${state.diagnosticList.clickDiag.id}`);
+        // 诊断指南新窗口展示
+        // window.open(`/static/pages/information.html?type=7&&questionId=${state.diagnosticList.clickDiag.id}`);
+
+        //弹窗显示
+        const url ='/api/icss/introduceInfo/getByQuestionId'
+        const imageUrlPrefix = 'http://192.168.2.241:82'
+        
+        const params = {
+            type: 7,
+            questionId: state.diagnosticList.clickDiag.id,
+            position:2
+        }
+        json(url, params)
+        .then((data)=>{
+                dispatch({
+                    type: SET_TIPS_DETAILS,
+                    tipsDetails: data.data.data
+                })
+        }).catch((e) => {
+            console.log(e)
+        })
     }
 }

src/store/reducers/pushMessage.js

@@ -1,5 +1,5 @@
-import {CHANGE_ASSAY, CHANGE_CHECK, BILLING_ADVICE, ADD_SCHEME, SET_TIPS, SET_CHANGE_ADVICE_TREATMENT, SET_CHANGE_ADVICE_ASSAY, SET_CHANGE_ADVICE_CHECK, ADD_BILLING,CLEAR_ALL_PUSH_MESSAGE } from '../types/pushMessage';
-import {changeAssay, changeCheck, setAdvice, addScheme, setTips, setChangeAdviceTreatment, setChangeAdviceAssay, setChangeAdviceCheck, addBilling,clearAllPushMessage } from '../actions/pushMessage';
+import {CHANGE_ASSAY, CHANGE_CHECK, BILLING_ADVICE, ADD_SCHEME, SET_TIPS,  SET_TIPS_DETAILS, SET_CHANGE_ADVICE_TREATMENT, SET_CHANGE_ADVICE_ASSAY, SET_CHANGE_ADVICE_CHECK, ADD_BILLING,CLEAR_ALL_PUSH_MESSAGE,SHOW_TIPS_DETAILS, HIDE_TIPS_DETAILS } from '../types/pushMessage';
+import {changeAssay, changeCheck, setAdvice, addScheme, setTips, setTipsDetails, setChangeAdviceTreatment, setChangeAdviceAssay, setChangeAdviceCheck, addBilling, clearAllPushMessage, showTipsDetails, hideTipsDetails } from '../actions/pushMessage';
 
 const initState = {
   vigilant: [],
@@ -32,6 +32,8 @@ export default function(state = initState, action) {
       return addScheme(state, action);
     case SET_TIPS: 
       return setTips(state, action);
+    case SET_TIPS_DETAILS:
+      return setTipsDetails(state,action)
     case SET_CHANGE_ADVICE_TREATMENT:
       return setChangeAdviceTreatment(state, action);
     case SET_CHANGE_ADVICE_ASSAY: 
@@ -42,6 +44,10 @@ export default function(state = initState, action) {
       return addBilling(state, action);
     case CLEAR_ALL_PUSH_MESSAGE: 
       return clearAllPushMessage(state, action);
+    case SHOW_TIPS_DETAILS: 
+      return showTipsDetails(state, action);
+    case HIDE_TIPS_DETAILS:
+      return hideTipsDetails(state, action);
     default:
       return state;
   }

src/store/types/pushMessage.js

@@ -5,10 +5,13 @@ export const ADD_ASSAY = 'ADD_ASSAY'; //添加化验；
 export const ADD_CHECK = 'ADD_CHECK'; //添加辅检；
 export const ADD_SCHEME = 'ADD_SCHEME'; //添加治疗方案；
 export const SET_TIPS = 'SET_TIPS'; //设置提示信息；
+export const SET_TIPS_DETAILS = 'SET_TIPS_DETAILS'; //设置提示信息详情页内容；
 export const SET_CHANGE_ADVICE_TREATMENT = 'SET_CHANGE_ADVICE_TREATMENT'//改变医嘱的文字内容；
 export const ADD_BILLING = 'ADD_BILLIND'; //添加开单项
 export const SET_CHANGE_ADVICE_ASSAY = 'SET_CHANGE_ADVICE_ASSAY';   //改变医嘱部分辅检的文字内容
 export const SET_CHANGE_ADVICE_CHECK = 'SET_CHANGE_ADVICE_CHECK';   //改变医嘱部分化验的文字内容
-export const CLEAR_ALL_PUSH_MESSAGE = 'CLEAR_ALL_PUSH_MESSAGE';   //改变医嘱部分化验的文字内容
+export const CLEAR_ALL_PUSH_MESSAGE = 'CLEAR_ALL_PUSH_MESSAGE';   //清除所有推送信息
+export const SHOW_TIPS_DETAILS = 'SHOW_TIPS_DETAILS'; //显示提示详情页
+export const HIDE_TIPS_DETAILS = 'HIDE_TIPS_DETAILS'; //显示提示详情页