彈窗可移動添加

src/common/components/ComplexModal/index.jsx

@@ -3,6 +3,8 @@ import ReactDom from "react-dom";
 import style from "./index.less";
 import Notify from '@commonComp/Notify';
 import close from '@common/images/icon_close.png';
+import { dragBox } from '@utils/tools';
+
 /**
  * title:标题
  * children：弹窗内容
@@ -19,6 +21,9 @@ class ComplexModal extends Component {
   constructor(props) {
     super(props);
   }
+  componentDidMount(){
+    dragBox('complexModalWrap','complexModalTitle')
+  }
 
   render() {
     const { onclose,title,children,footer,shadeClose,icon,width,top,bottom} = this.props;
@@ -27,8 +32,8 @@ class ComplexModal extends Component {
     const domNode = document.getElementById('root');
     return ReactDom.createPortal(<div className={style['container']}>
       <div className={style['shade']} onClick={shadeClose===false?'':onclose}></div>
-      <div className={style['modal']} style={{width: width?width:'auto', marginLeft:marginLeft, top:top?top+'px':'',bottom:bottom?bottom+'px':''}}>
-        <div className={style['close']}>
+      <div id="complexModalWrap" className={style['modal']} style={{width: width?width:'auto', marginLeft:marginLeft, top:top?top+'px':'',bottom:bottom?bottom+'px':''}}>
+        <div className={`${style['close']} drag-title`} id="complexModalTitle">
           {icon?<img src={icon} />:''}
           {title}
           <img src={close} onClick={onclose} className={style['closeIcon']} />

src/common/components/ComplexModal/index.less

@@ -1,18 +1,23 @@
 .container {
   position: relative;
   z-index: 2000;
+  padding-top: 40px;
   .content{
     overflow: auto;
-    position: fixed;
-    bottom: 70px;
-    top: 70px;
+    position: relative;
+    height: 100%;
+    padding-bottom: 30px;
+    // bottom: 70px;
+    // top: 70px;
     // width: 820px;
   }
   .footer{
     // width: 820px;
-    position: fixed;
-    bottom:30px;
+    position: relative;
+    padding:15px 0px;
+    bottom: 0;
     text-align: right;
+    background-color: #fff;
   }
   // @media print {
   //   .close{
@@ -41,15 +46,20 @@
     background: #fff;
     position: fixed;
     left: 50%;
-    //top: 50%;
-    // margin-left: -410px;
-    top: 65px;
-    bottom: 65px;
+    top: 3%;
+    bottom: 3%;
+    height: 94%;
+    overflow: hidden;
+    padding-top: 50px;
+    padding-bottom: 64px;
   }
   .close {
     padding:  15px 15px 15px 20px;
     border-bottom: 1px solid #EAEDF1;
     background: #e5eefe;
+    position: absolute;
+    top:0;
+    width: 100%;
     img{
       vertical-align: text-top;
     }

src/common/less/variables.less

@@ -184,3 +184,13 @@
   border:1px solid @import-color;
   //color: @import-color!important;
 }
+:global(.drag-title) {
+  cursor: move;
+  moz-user-select: -moz-none;
+  -moz-user-select: none;
+  -o-user-select: none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}

src/components/ChronicInfo/index.jsx

@@ -526,8 +526,8 @@ class ChronicInfo extends React.Component{
               {showAssess?<ComplexModal onclose={this.showAssessFn} footer={footer}
                       title='管理和评估'
                       icon={manageIcon}
-                      top={20}
-                      bottom={20}
+                      top={'3%'}
+                      bottom={'3%'}
                       width={820}>
                 <AssessResult handleSave={saveAssessInfos}
                               handleSaveCalcu={this.handleSaveCalcu}

src/components/CopyRight/CopyModalSon/index.jsx

@@ -0,0 +1,34 @@
+import React, { Component } from "react";
+import style from "../index.less";
+import close from '../../../common/images/icon_close.png'
+import { dragBox } from '@utils/tools';
+
+class DiscontentSon extends Component {
+  constructor(props) {
+    super(props);
+  }
+  componentDidMount(){
+    dragBox('CopyModalWrap','CopyModalTitle')
+  }
+
+  render() {
+    const { closeCopyModal,copyVisible,date,copyContent,number } = this.props;
+
+    return <div
+        className={style["copyModal"]}
+        style={copyVisible ? { display: "block" } : { display: "none" }}
+      >
+        <div className={style["shade"]} onClick={closeCopyModal}/>
+        <div className={style["copyContent"]} id="CopyModalWrap">
+          <div className={`${style["header"]} drag-title`} id="CopyModalTitle">版本信息<img src={close} onClick={closeCopyModal} /></div>
+          <div className={style["now"]}>
+            当前版本：{number}
+            <span>{date && date.substring(0, 10)}</span>
+          </div>
+          <div className={style["content"]}>{copyContent}</div>
+        </div>
+      </div>
+  }
+}
+
+export default DiscontentSon;

src/components/CopyRight/DiscontentSon/index.jsx

@@ -0,0 +1,31 @@
+import React, { Component } from "react";
+import style from "../index.less";
+import close from '../../../common/images/icon_close.png'
+import { dragBox } from '@utils/tools';
+
+class DiscontentSon extends Component {
+  constructor(props) {
+    super(props);
+  }
+  componentDidMount(){
+    dragBox('disContentWrap','DisclatmerTitle')
+  }
+
+  render() {
+    const { closeDisclatmerModal,disVisible,disclatmerContent } = this.props;
+
+    return <div
+          className={style["disModal"]}
+          style={disVisible ? { display: "block" } : { display: "none" }}
+        >
+          <div className={style["shade"]} onClick={closeDisclatmerModal}/>
+          <div className={style["disContent"]} id="disContentWrap">
+            <div className={`${style["header"]} drag-title`} id="DisclatmerTitle">免责声明<img src={close} onClick={closeDisclatmerModal} /></div>
+            <div className={style["content"]}>{disclatmerContent}</div>
+            <div className={style["btnBox"]}><span  className={style["btn"]} onClick={closeDisclatmerModal}>确定</span></div>
+          </div>
+      </div>
+  }
+}
+
+export default DiscontentSon;

src/components/CopyRight/index.jsx

@@ -2,6 +2,8 @@ import React, { Component } from "react";
 import style from "./index.less";
 import close from '../../common/images/icon_close.png'
 import { storageLocal } from "../../utils/tools"
+import DiscontentSon from "./DiscontentSon"
+import CopyModalSon from "./CopyModalSon"
 
 class CopyRight extends Component {
   constructor(props) {
@@ -16,7 +18,6 @@ class CopyRight extends Component {
   }
   componentWillMount() {
     this.props.getDisMessage()
-
   }
   componentDidMount() {
     this.props.getMessage()
@@ -59,6 +60,7 @@ class CopyRight extends Component {
   render() {
     const { number, date, content, copyVisible, disVisible, disContent, hasNewVersion } = this.props.copyRight;
     const { showCopyModal, closeCopyModal, showDisclatmerModal, closeDisclatmerModal } = this;
+    console.log(disVisible,77777)
     const copyContent = content&&content.map(item => {
       return (
         <div className={style['message']}>
@@ -68,15 +70,6 @@ class CopyRight extends Component {
       );
     });
 
-    // const disclatmerContent = disContent.map(item => {
-    //   return (
-    //     <div className={style['message']}>
-    //       {item.title}
-    //       <div dangerouslySetInnerHTML={{__html: item.description}}></div>
-    //     </div>
-    //   );
-    // })
-
     return (
       <div className={style["container"]}>
         <div className={style["copy"]}>
@@ -87,11 +80,11 @@ class CopyRight extends Component {
           {hasNewVersion && <span>new</span>} &copy;<b>朗通医疗</b>
           <div className={style['disclaimer']} onClick={showDisclatmerModal}>免责声明</div>
         </div>
-        {copyVisible && <div
+        {/* {copyVisible && <div
           className={style["copyModal"]}
           style={copyVisible ? { display: "block" } : { display: "none" }}
         >
-          <div className={style["shade"]}  onClick={closeCopyModal}/>
+          <div className={style["shade"]} onClick={closeCopyModal}/>
           <div className={style["copyContent"]}>
             <div className={style["header"]}>版本信息<img src={close} onClick={closeCopyModal} /></div>
             <div className={style["now"]}>
@@ -100,18 +93,9 @@ class CopyRight extends Component {
             </div>
             <div className={style["content"]}>{copyContent}</div>
           </div>
-        </div>}
-       {disVisible && <div
-          className={style["disModal"]}
-          style={disVisible ? { display: "block" } : { display: "none" }}
-        >
-          <div className={style["shade"]} onClick={closeDisclatmerModal}/>
-          <div className={style["disContent"]}>
-            <div className={style["header"]}>免责声明<img src={close} onClick={closeDisclatmerModal} /></div>
-            <div className={style["content"]}>{this.disclatmerContent()}</div>
-            <div className={style["btnBox"]}><span  className={style["btn"]} onClick={closeDisclatmerModal}>确定</span></div>
-          </div>
-        </div>}
+        </div>} */}
+        {copyVisible && <CopyModalSon copyVisible={copyVisible} date={date} closeCopyModal={closeCopyModal} copyContent={copyContent} number={number}></CopyModalSon>}
+        {disVisible && <DiscontentSon closeDisclatmerModal={closeDisclatmerModal} disVisible={disVisible} disclatmerContent={this.disclatmerContent()}></DiscontentSon>}
       </div>
     );
   }

src/components/CopyRight/index.less

@@ -95,9 +95,10 @@
         position: fixed;  
         width: 50%;
         height: 60%;
-        left: 20%;
+        left: 25%;
         background: #fff;
         top: 20%;
+        padding: 40px 0 60px 0;
         img{
           float: right;
           margin: -5px 5px 0px 0px;
@@ -105,7 +106,8 @@
         }
         .header {
           position: absolute;
-          top: -40px;
+          top: 0px;
+          width: 100%;
           height: 40px;
           font-size: 14px;
           padding: 10px 0px 10px 20px;
@@ -129,8 +131,8 @@
           overflow: auto;
         }
         .btnBox {
-          position: absolute;
-          bottom: -60px;
+          position: relative;
+          // bottom: -60px;
           width: 100%;
           height: 60px;
           background: #fff;

src/components/HistoryCaseContainer/HistoryList/index.jsx

@@ -6,13 +6,16 @@ import sort from "./img/sort.png"
 import close from "./img/close.png";
 import PreviewBody from '@components/PreviewBody';
 import Empty from '@components/Empty'
-
+import { dragBox } from '@utils/tools';
 
 
 class HistoryCaseContainer extends React.Component {
     constructor(props){
         super(props);
     }
+    componentDidMount(){
+      dragBox('hisWrapMove','closeHis')
+    }
     render(){
         const { items,handleCaseClick,handleQuoteClick,handleSortClick,showHistoryBox,activeHistory,preInfo } = this.props;
         let baseList = store.getState();
@@ -36,8 +39,10 @@ class HistoryCaseContainer extends React.Component {
             return jsonDataString;
         }
         return (
-            <div className={styles.mainHistory}>
-                <img className={styles.close} src={close} alt="关闭历史病历" onClick={showHistoryBox}/>
+            <div className={styles.mainHistory} id="hisWrapMove">
+                <div className={`${styles.closeHis} drag-title`} id="closeHis">
+                    <img className={styles.close} src={close} alt="关闭历史病历" onClick={showHistoryBox}/>
+                </div>
                 <div className={styles.mainHistoryLeft}>
                     <div className={styles.title}>
                         <span className={styles.his}>历史病历</span>
@@ -46,7 +51,7 @@ class HistoryCaseContainer extends React.Component {
                     <div className={styles.lists}>
                         <ul>
                             {
-                                items && items.length > 0? items.map((val,idx)=>{
+                                (items && items.length > 0)? items.map((val,idx)=>{
                                     return <li key={val.id} className={val.id == activeHistory.id?styles.bgc:''} onClick={(e)=>{handleCaseClick(e,idx)}}>
                                         <span title={val.diagnose}>{val.diagnose}</span>
                                         {/* <span className={val.id == activeHistory.id?`${styles.time} ${styles.quoteHide}`:styles.time}>{val.inquiryDate}</span>

src/components/HistoryCaseContainer/HistoryList/index.less

@@ -1,26 +1,27 @@
 @import "~@less/mixin.less";
 .mainHistory {
     position: fixed;
-    left: 0;
-    top: 0;
-    right: 0;
-    bottom:0;
-    margin: auto;
+    margin-left: -500px;
+    left: 50%;
     width: 1000px;
-    top: 70px;
-    bottom: 70px;
+    top: 7%;  
+    bottom: 7%;
+    height: 86%;
     background-color: #fff;
     z-index: 242;
+    overflow: hidden;
     .close {
         position: absolute;
         top: 0;
         right: 0;
+        cursor: pointer;
     }
     .mainHistoryLeft {
         width: 300px;
         height: 100%;
         background: #d2d1d1;
         position: relative;
+        float: left;
         .title {
             height: 80px;
             line-height: 80px;
@@ -97,6 +98,21 @@
         }
     }
     .mainHistoryRight {
-        margin-left: 300px;
+        // margin-left: 300px;
+        // position: absolute;
+        overflow: auto;
+        height: 100%;
+        padding-top: 40px;
+        // top: 42px;
+
+        float: left;
+    }
+    .closeHis {
+      width: 700px;
+      height: 40px;
+      margin-left: 300px;
+      position: absolute;
+      z-index: 9999;
+      // border-bottom: 1px solid #EAEDF1;
     }
 }

src/components/Preview/index.jsx

@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import {getAllDataList,getAllDataStringList} from '@utils/tools';
+import {getAllDataList,getAllDataStringList,dragBox} from '@utils/tools';
 import PreviewBody from '../PreviewBody';
 import store from '@store';
 import style from "./index.less";
@@ -9,7 +9,9 @@ class Preview extends Component {
   constructor(props) {
     super(props)
   }
-
+  componentDidMount(){
+    dragBox('previewWrapper','previewStatic')
+  }
   render() {
     const { onClose, visible,preInfo } = this.props;
     let baseList = store.getState();
@@ -18,8 +20,8 @@ class Preview extends Component {
 
     return <div className={style['container']} style={visible? {display: 'block'}: {display: 'none'}}>
       <div className={style['shade']} onClick={onClose}></div>
-      <div className={style['modal']}>
-        <div className={style['close']}>预览<img src={close} onClick={onClose} /></div>
+      <div className={style['modal']} id="previewWrapper">
+        <div id="previewStatic" className={`${style['close']} drag-title`}>预览<img src={close} onClick={onClose} /></div>
         <PreviewBody
             preInfo={preInfo}
             dataJson={dataJson}

src/components/Preview/index.less

@@ -18,8 +18,10 @@
     position: fixed;
     left: 50%;
     margin-left: -410px;
-    top: 65px;  
-    bottom: 65px;
+    top: 7%;  
+    bottom: 7%;
+    height: 86%;
+    overflow: hidden;
   }
   .close { 
     padding:  15px 15px 15px 20px;

src/components/PreviewBody/index.jsx

@@ -223,20 +223,21 @@ class PreviewBody extends Component {
         </table>
         <p style={{textAlign:'right',marginTop:'15px'}}>医生签名：<span style={{minWidth: '60px',padding: '0 5px 2px 5px',borderBottom: '1px solid #333',}}>{baseObj ? baseObj.doctorName : (noData ? '' : preInfo.doctorName)}</span></p>
         {showAssessBtn?<AssessResultHis inquiryId={baseObj&&baseObj.id} inquiryDate={baseObj&&baseObj.inquiryDate}></AssessResultHis>:""}
+        
+        <div onClick={() => { this.surePrint(dataStr) }} style={{
+          display: show ? 'inline-block' : 'none',
+          padding: '10px 20px',
+          float: 'right',
+          marginTop: '22px',
+          background: '#3B9ED0',
+          color: '#fff',
+          borderRadius: '4px',
+          cursor: 'pointer',
+          position: 'absolute',
+          right: '-40px'
+        }}>打印</div>
       </div>
 
-      <div onClick={() => { this.surePrint(dataStr) }} style={{
-        display: show ? 'inline-block' : 'none',
-        padding: '10px 20px',
-        float: 'right',
-        marginTop: '15px',
-        background: '#3B9ED0',
-        color: '#fff',
-        borderRadius: '4px',
-        cursor: 'pointer',
-        position: 'absolute',
-        right: '40px'
-      }}>打印</div>
     </div>
   }
 }

src/components/PreviewBody/index.less

@@ -1,11 +1,12 @@
 @import "~@less/variables.less";
 .content {
-  position: fixed;
-  bottom: 70px;
+  position: relative;
   overflow: auto;
-  top:120px;
+  height: 100%;
+  top:0px;
   width: 820px;
-  padding: 0 0px 60px 0px;
+  padding: 15px 0px 100px 0px;
+  box-sizing: border-box;
   .contents {
     position: relative;
     padding-bottom: 26px;

src/components/PrintPreview/index.jsx

@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import { getAllDataList, getAllDataStringList,filterDataArr } from '@utils/tools';
+import { getAllDataList, getAllDataStringList,dragBox } from '@utils/tools';
 import style from "./index.less";
 import PreviewBody from "../PreviewBody";
 import store from '@store';
@@ -11,6 +11,9 @@ class PrintPreview extends Component {
     constructor(props) {
         super(props)
     }
+    componentDidMount(){
+      dragBox('previewPrintWrapper','previewPrintStatic')
+    }
     render() {
         const { onClose, visible, preInfo,save } = this.props;
         let baseList = store.getState();
@@ -19,8 +22,8 @@ class PrintPreview extends Component {
 
         return <div className={style['container']} style={visible ? { display: 'block' } : { display: 'none' }}>
             <div className={style['shade']} onClick={onClose}></div>
-            <div className={style['modal']}>
-                <div className={style['close']}>打印<img src={close} onClick={onClose} /></div>
+            <div className={style['modal']} id="previewPrintWrapper">
+                <div id="previewPrintStatic" className={`${style['close']} drag-title`}>打印<img src={close} onClick={onClose} /></div>
                   <PreviewBody
                       preInfo={preInfo}
                       dataJson={dataJson}

src/components/PrintPreview/index.less

@@ -18,8 +18,10 @@
       position: fixed;
       left: 50%;
       margin-left: -410px;
-      top: 65px;  
-      bottom: 65px;
+      top: 7%;  
+      bottom: 7%;
+      height: 86%;
+      overflow: hidden;
     }
     .close { 
       padding:  15px 15px 15px 20px;

src/components/PushItems/DetailsModal/index.jsx

@@ -4,6 +4,7 @@ import NewPortal from './NewPortal'
 import close from "./../img/close.png";
 import $ from "jquery";
 import { imageUrlPrefix } from '@utils/config.js';
+import { dragBox } from '@utils/tools';
 class DetailsModal extends Component {
     constructor(props) {
         super(props);
@@ -12,6 +13,9 @@ class DetailsModal extends Component {
         }
         this.hideTips = this.hideTips.bind(this)
     }
+    componentDidMount(){
+      dragBox('detailsContentWrap','detailsContentTitle')
+    }
     hideTips() {
         const { hideTips } = this.props;
         hideTips && hideTips();
@@ -46,15 +50,14 @@ class DetailsModal extends Component {
         }
     }
     
-    
-
     render() {
         const {showTipsDetails, tipsDetails} = this.props;
         const { currentIndex } = this.state
-        return (<NewPortal visible={showTipsDetails}>
-        <div className={styles['details-wrapper']}>
-           <div className={styles['details-content-wrapper']}>
-                <h1 className={styles['details-content-name']} >{tipsDetails && tipsDetails.tagName} <img className={styles['details-close']} onClick={this.hideTips} src={close} /></h1>
+        const domNode = document.getElementById('root');
+        return showTipsDetails && ReactDOM.createPortal(
+          <div className={styles['details-wrapper']}>
+           <div className={styles['details-content-wrapper']} id="detailsContentWrap">
+                <h1 id="detailsContentTitle" className={`${styles['details-content-name']} drag-title`} >{tipsDetails && tipsDetails.tagName} <img className={styles['details-close']} onClick={this.hideTips} src={close} /></h1>
                 <div className={styles['details-content']} id= 'detailsContent' onScroll={this.handleScrollModal.bind(this, tipsDetails)}>
                     {tipsDetails && tipsDetails.introduceDetailList && tipsDetails.introduceDetailList.map((item, index) => {
                         return (<div id={item.title}>
@@ -85,8 +88,9 @@ class DetailsModal extends Component {
            </div>
            <div className={styles['details-mask']} onClick={this.hideTips}>
            </div>
-        </div>
-    </NewPortal>)
+        </div>,
+          domNode
+      )
     }
 }
 

src/components/Treat/DrugTreat/index.jsx

@@ -74,16 +74,13 @@ class DrugTreat extends Component {
         const drugIdList = this.state.drugIdList.split(' ')
         setDrugInfoMore({drugIdList: drugIdList})
         showDrugInfo && showDrugInfo();
-
     }
+    
     showTreatDesc() {
         $('#treatDescBox').css({'display': 'block'});
         $('#treatWrapper').animate({'margin-left': '-471px','left':'50%'}, 300);
         $('#treatDescBox').animate({'width': '260px'}, 500);
-        
     }
-    
-
 
     render(){
         const { treatment,showDrugInfo } = this.props

src/utils/tools.js

@@ -776,7 +776,7 @@ function dragBox(domWrap,domDrag){
   let drag = document.getElementById(domDrag);//拖拽区域
   let wrap = document.getElementById(domWrap);//被拖拽的元素
   let wrapHeight = wrap.offsetHeight;//被拖拽的元素高度
-  let wrapWidth = wrap.offsetWidth;//被拖拽的元素高度
+  let wrapWidth = wrap.offsetWidth;//被拖拽的元素宽度
   let width = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;//屏幕宽度
   let height = window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight;//屏幕高度
   let mouseX = 0,mouseY = 0,dragX = 0,dragY = 0,isDrag = false,isMove = false;
@@ -797,14 +797,15 @@ function dragBox(domWrap,domDrag){
     // }
     isDrag = false
     return false
-  },drag)
+  },document)
 
   function handleMove(event){      //移动的
     let dragDes = document.getElementById('treatDescBox');//展開区域
     let page = getPageLength(event);
     let maxDragX = 0,dragDesWidth = 0;
     let maxDragY = height - wrapHeight;//最大可拖拽y方向距离
-  
+    wrapHeight = wrap.offsetHeight;
+    wrapWidth = wrap.offsetWidth;
     if(domDrag == 'dragTreatTitle'){//最大可推拽x方向距离
       if(dragDes != null){
         dragDesWidth = dragDes.offsetWidth
@@ -829,6 +830,7 @@ function dragBox(domWrap,domDrag){
           dragX = maxDragX
         }
       }else{
+        console.log(width,dragX,maxDragX,wrapWidth)
         if(width-dragX < wrapWidth){    //不能超出右边界
           dragX = maxDragX
         }