提取拖拽元素相关代码，待完成

src/common/components/Banner/index.jsx

@@ -1,18 +1,16 @@
-import React, { Component } from "react";
 import style from "./index.less";
 import logo from '../../images/logoa.png'
 import setup from '../../images/setup.png';
-class Banner extends Component {
-  render(){
-    const {src,text, children} = this.props;
 
-    return <div className={style['banner-wrapper']+" "+"clearfix"}>
-         <div className={style['logo']}> <img src={logo}/><span >|&nbsp;&nbsp;智能辅助临床决策系统</span>
-            <div className={style['buon']}><img className={style['st']} src={setup}/>设置</div>
-            </div>
-      {children?<div className='fl'>{children}</div>:''}
-    </div>;
-  }
+const Banner = (props) => {
+  const {src,text, children} = props;
+
+  return <div className={style['banner-wrapper']+" "+"clearfix"}>
+       <div className={style['logo']}> <img src={logo}/><span >|&nbsp;&nbsp;智能辅助临床决策系统</span>
+          <div className={style['buon']}><img className={style['st']} src={setup}/>设置</div>
+          </div>
+    {children?<div className='fl'>{children}</div>:''}
+  </div>;
 }
 
 export default Banner;

src/common/components/Button/index.jsx

@@ -1,7 +1,6 @@
 /**
  * Created by ZN on 2018/5/03.
  */
-import React, {Component} from 'react';
 /*import PropTypes from 'prop-types';*/
 import style from './index.less';
 
@@ -17,45 +16,30 @@ import style from './index.less';
     icon: PropTypes.oneOf(['confirm','close','add','aptmts','cancel','print','qa','search','setting','update','tick','submit','more','info']),
     onClick: PropTypes.func
 };*/
-
-class Button extends Component {
-    constructor(props) {
-        super(props);
-        /* this.handleClick = this.handleClick.bind(this);
-         this.handleLeave = this.handleLeave.bind(this);*/
-    }
-
-    /*handleClick(){
-        this.props.onClick&&this.props.onClick();
-    }*/
-
-    render() {
-        let props = this.props;
-        let type = props.type ? style[props.type] : '';
-        let classes = style["button"] + " " + type;
-        const spanStyle = {
-            position: "relative",
-            left: "-3px",
-            lineHeight: "30px"
-        };
-        if (props.disabled) {
-            return <button contenteditable="false" className={classes} style={props.style}  {...props} disabled>
-                {
-                    React.Children.map(props.children, function (child) {
-                        return <span style={spanStyle}>{child}</span>;
-                    })
-                }
-            </button>;
-        }
-        return <button contenteditable="false" className={classes} style={props.style} {...props}>
-            {
-                React.Children.map(props.children, function (child) {
-                    return <span style={spanStyle}>{child}</span>;
-                })
-            }
-        </button>;
-    }
+const Button = (props) => {
+  let type = props.type ? style[props.type] : '';
+  let classes = style["button"] + " " + type;
+  const spanStyle = {
+      position: "relative",
+      left: "-3px",
+      lineHeight: "30px"
+  };
+  if (props.disabled) {
+      return <button contenteditable="false" className={classes} style={props.style}  {...props} disabled>
+          {
+              React.Children.map(props.children, function (child) {
+                  return <span style={spanStyle}>{child}</span>;
+              })
+          }
+      </button>;
+  }
+  return <button contenteditable="false" className={classes} style={props.style} {...props}>
+      {
+          React.Children.map(props.children, function (child) {
+              return <span style={spanStyle}>{child}</span>;
+          })
+      }
+  </button>;
 }
-/*Button.propTypes = propTypes;*/
 
 export default Button;

src/common/components/ComplexModal/index.jsx

@@ -20,7 +20,7 @@ class ComplexModal extends Component {
     super(props);
   }
   componentDidMount(){
-    dragBox('complexModalWrap','complexModalTitle')
+    dragBox('complexModalWrap','complexModalTitle','complexModalWrapMove')
   }
 
   render() {
@@ -28,7 +28,7 @@ class ComplexModal extends Component {
     const marginLeft = width? -parseInt(width)/2 : '';
     //const marginTop = height? -parseInt(height)/2: '';
     const domNode = document.getElementById('root');
-    return ReactDom.createPortal(<div className={style['container']}>
+    return ReactDom.createPortal(<div className={style['container']} id="complexModalWrapMove">
       <div className={style['shade']} onClick={shadeClose===false?'':onclose}></div>
       <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">

src/common/components/ComplexModal/index.less

@@ -1,8 +1,12 @@
 @import "~@less/mixin.less";
 .container {
-  position: relative;
+  // position: relative;
   z-index: 2000;
-  padding-top: 40px;
+  // padding-top: 40px;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
   .content{
     overflow: auto;
     position: relative;

src/common/components/DelToast/index.jsx

@@ -29,7 +29,7 @@ class DelToast extends React.PureComponent{
       return <div className={style['del-box']} id="delBox">
         <div className={style['del-con']}>
           <div className={style['del-tri']}></div>
-          <div className={style['del-title']} id="delTit">删除 {name} ？</div>
+          <div className={style['del-title']} id="delTit" title={'删除 '+name+' ？'}>删除 {name} ？</div>
           <div className={style['del-foot']}>
             <span className={`${style['del-btn']} ${style['del-del']}`} onClick={this.handleDel}>删除</span>
             <span className={`${style['del-btn']} ${style['del-cancel']}`} onClick={this.handleCancel}>取消</span>

src/common/components/DropContainer/index.jsx

@@ -6,15 +6,12 @@
  * children:下拉内容
  *
  * ***/
-import React,{Component} from 'react';
 
-class DropContainer extends Component {
-  render(){
-    const {children} = this.props;
-    return <div className="container">
-              {children}
-            </div>;
-  }
+const DropContainer = (props) => {
+  const {children} = props;
+  return <div className="container">
+            {children}
+          </div>;
 }
 
 export default DropContainer;

src/common/components/Footer/index.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import style from './index.less';
 import printIcon from '@common/images/team.png';
 /**
@@ -11,14 +10,12 @@ import printIcon from '@common/images/team.png';
  * handleConfirm：另一按钮的点击事件；
 **/
 
-class Footer extends React.PureComponent{
-  render(){
-    const {footText,print,handlePrint,handleConfirm} = this.props;
-    return <div className={style['footer']}>
-      {print?<span className={style['print']} onClick={handlePrint}><img src={printIcon} alt=""/>打印</span>:''}
-          <span className={style['okBtn']} onClick={handleConfirm}>{footText}</span>
-    </div>;
-  }
+const Footer = (props) => {
+  const {footText,print,handlePrint,handleConfirm} = props;
+  return <div className={style['footer']}>
+    {print?<span className={style['print']} onClick={handlePrint}><img src={printIcon} alt=""/>打印</span>:''}
+        <span className={style['okBtn']} onClick={handleConfirm}>{footText}</span>
+  </div>;
 }
 
 export default Footer;

src/common/components/InspectCommon/index.jsx

@@ -6,7 +6,7 @@ const InspectCommon = (props) => {
   return <div className={ style.wrapper} id="inspectFill">
       {children}
       <div className={style.btnWrap}>
-          <span className={style.clear + ' red'} onClick={handleClear}>清空选项s</span>
+          <span className={style.clear + ' red'} onClick={handleClear}>清空选项</span>
           <span className={style.sure} onClick={handleConfirm}>确定</span>
       </div>
   </div>

src/common/components/Loading/index.jsx

@@ -5,7 +5,6 @@
  * text:显示在图标下的文字
  * img:自定义图标
  */
-import React, {Component} from 'react';
 /*import PropTypes from 'prop-types';*/
 import style from './index.less';
 import icon from './img/loading.gif';
@@ -33,9 +32,8 @@ const defaultProps = {
 //     )
 // }
 
-class Loading extends React.Component{
-    render(){
-        const {text, img, show} = this.props;
+const Loading = (props) =>{
+  const {text, img, show} = props;
         return (
             <div className={style['loading']} style={{display: show ? 'block' : 'none'}}>
                 {this.props.shadeIsShow?<div className={style['cover']}/>:null}
@@ -45,9 +43,9 @@ class Loading extends React.Component{
                 </div>
             </div>
         )
-    }
 }
 
+
 /*Loading.propTypes = propTypes;
 Loading.defaultProps = defaultProps;*/
 

src/common/components/MiniToast/index.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import style from './index.less';
 import closeIcon from "../../images/close-icon.png";
 /**
@@ -14,24 +13,22 @@ import closeIcon from "../../images/close-icon.png";
 * confirm:确定事件
 * 使用时，父元素需要加相对定位position: relative;
 **/
-class MiniToast extends React.PureComponent{
-  render(){
-    const {show,title,icon,children,footer,close,confirm,confirmText} = this.props;
-    if(show){
-      return <div className={style["infoBox"]}>
-              <p className={style["infoTitle"]}>
-                {icon?<img src={icon} />:''}
-                {title}
-                <img src={closeIcon} onClick={close} className={style["closeIcon"]}/>
-              </p>
-              <div className={style["infoCon"]}>{children}</div>
-              {footer?<div className={style["infoFoot"]}>
-                        <span onClick={confirm}>{confirmText?confirmText:'确定'}</span>
-                      </div>:''}
-            </div>
-    }
-    return ''
+const MiniToast = (props) => {
+  const {show,title,icon,children,footer,close,confirm,confirmText} = props;
+  if(show){
+    return <div className={style["infoBox"]}>
+            <p className={style["infoTitle"]}>
+              {icon?<img src={icon} />:''}
+              {title}
+              <img src={closeIcon} onClick={close} className={style["closeIcon"]}/>
+            </p>
+            <div className={style["infoCon"]}>{children}</div>
+            {footer?<div className={style["infoFoot"]}>
+                      <span onClick={confirm}>{confirmText?confirmText:'确定'}</span>
+                    </div>:''}
+          </div>
   }
+  return ''
 }
 
 export default MiniToast;

src/common/components/Modal/body/ModalBody.jsx

@@ -1,24 +1,15 @@
-import React, {Component} from "react";
-import classNames from 'classnames';
-
 import styles from "./index.less";
 
-class ModalBody extends Component {
-    constructor(props) {
-        super(props);
-    }
-
-    render() {
-        const  {overflow, children} = this.props;
-        let bodyStyle = {
-            overflowY: overflow ? "auto": "hide"
-        };
-        return (
-            <div className={styles['modal-body']} style={bodyStyle}>
-                {children ? children : <div className="paragraph"> </div>}
-            </div>
-        );
-    }
+const ModalBody = (props) => {
+  const  {overflow, children} = props;
+  let bodyStyle = {
+      overflowY: overflow ? "auto": "hide"
+  };
+  return (
+      <div className={styles['modal-body']} style={bodyStyle}>
+          {children ? children : <div className="paragraph"> </div>}
+      </div>
+  );
 }
 
 export default ModalBody;

src/common/components/Modal/footer/ModalFooter.jsx

@@ -3,6 +3,7 @@ import classNames from 'classnames';
 
 import styles from "./index.less";
 
+
 class ModalFooter extends Component {
 
 

src/common/components/Tab/TabOne/index.jsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import styles from '../index.less'
 
 const TabContain = (props) =>{

src/common/components/Tab/index.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import TabOne from '@commonComp/Tab/TabOne';
 import styles from './index.less'
 import PropTypes from "prop-types"

src/components/BodyContainer/index.jsx

@@ -1,24 +1,14 @@
-import React, { Component } from "react";
-
-//  引入组件
 import SaveDataAll from "@containers/BodyContainer";
 import PushContainer from '@components/PushContainer';
 
 import style from './index.less';
 
-class BodyContainer extends Component {
-    constructor() {
-        super();
-    }
-    
-    render() {
-        const { saveDateAll } = this.props;
-        //console.log(saveDateAll)
-        return <div className={style['container'] + ' clearfix'}>
-            <SaveDataAll saveDateAll={saveDateAll}></SaveDataAll>
-            <PushContainer></PushContainer>
-        </div>;
-    }
+const BodyContainer = (props) =>{
+  const { saveDateAll } = props;
+  return <div className={style['container'] + ' clearfix'}>
+      <SaveDataAll saveDateAll={saveDateAll}></SaveDataAll>
+      <PushContainer></PushContainer>
+  </div>;
 }
 
 export default BodyContainer;

src/components/Empty/index.jsx

@@ -1,22 +1,15 @@
-import React from 'react';
 import styles from './index.less';
 import empty from '@common/images/empty.png';
 
 
-
-class Empty extends React.Component {
-    constructor(props){
-        super(props);
-    }
-    render(){
-        const {message} = this.props;
-        return (
-            <div className={styles.empty}>
-                <img src={empty} alt="暂无数据"/>
-                <p>{message}</p>
-            </div>
-        )
-    }
+const Empty = (props) => {
+  const {message} = props;
+  return (
+      <div className={styles.empty}>
+          <img src={empty} alt="暂无数据"/>
+          <p>{message}</p>
+      </div>
+  )
 }
 
 export default Empty;

src/components/TreatDesc/index.jsx

@@ -59,7 +59,6 @@ class TreatDesc extends Component {
         $('#treatDescBox').css({'display': 'none'});
         $('#treatDescBox').animate({'display': 'none'}, 500);
         $('#treatWrapper').animate({'margin-left': '-340px','left':'50%'}, 500);
-        
     }
 
     render(){

src/utils/drag.js

@@ -0,0 +1,102 @@
+import $ from 'jquery';
+import { getWindowInnerHeight,getWindowInnerWidth,getPageCoordinate } from './tools'
+/**
+ * 
+ * @param {被拖动的元素} domWrap 
+ * @param {可拖动的区域} domDrag 
+ * @param {鼠标滑动监听的区域} dragMove 
+ * @param {拖动元素/清除拖动事件监听} type 
+ */
+
+function dragBox(domWrap,domDrag,dragMove){
+  // console.log(domWrap,domDrag,'拖拽')
+  let drag = $("#"+domDrag);
+  let wrap = $("#"+domWrap);
+  let wrapHeight = wrap.height();//被拖拽的元素高度
+  let wrapWidth = wrap.width();//被拖拽的元素宽度
+  let width = getWindowInnerHeight();//屏幕宽度
+  let height = getWindowInnerWidth();//屏幕高度
+  let mouseX = 0,mouseY = 0,dragX = 0,dragY = 0,isDrag = false,isMove = false;
+  // windowEventHandler('mousedown',function(event){    //鼠标位置获取，计算点击位置到拖拽元素左边的距离
+  //   let page = getPageCoordinate(event,'0');
+  //   mouseX = page.boxLeft - wrap.offsetLeft      //鼠标到拖拽元素的左边界的距离
+  //   mouseY = page.boxTop - wrap.offsetTop       //鼠标到拖拽元素的上边界的距离
+  //   isDrag = true
+  //   // isMove = false
+  // },drag)
+  drag.on('mousedown',function(event){
+    let page = getPageCoordinate(event,'0');
+    mouseX = page.boxLeft - wrap.offsetLeft      //鼠标到拖拽元素的左边界的距离
+    mouseY = page.boxTop - wrap.offsetTop       //鼠标到拖拽元素的上边界的距离
+    isDrag = true
+  })
+  $(document).on('mousemove',handleMove)
+  $(document).on('mouseup',function(){
+    isDrag = false
+    return false
+  })
+  // windowEventHandler('mousemove',handleMove,document)
+  // windowEventHandler('mouseup',()=>{
+  //   // if(isMove){ //有move就设置位置没有移动就不处理
+  //   //   console.log(dragX)
+  //   //   wrap.style.left = dragX + 'px'
+  //   //   wrap.style.top = dragY + 'px'
+  //   // }
+  //   isDrag = false
+  //   return false
+  // },document)
+
+  function handleMove(event){      //移动的
+    console.log(99)
+    let dragDes = document.getElementById('treatDescBox');//展開区域
+    let page = getPageCoordinate(event,'0');
+    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
+      }else{
+        dragDesWidth = 0
+      }
+      maxDragX = width - wrapWidth - dragDesWidth
+    }else{
+      maxDragX = width - wrapWidth
+    }
+    if(isDrag){
+      dragX = page.boxLeft - mouseX          //鼠标可拖拽到左边的最大距离
+      dragY = page.boxTop - mouseY          //鼠标可拖拽到上边的最大距离
+      if(dragX < 0){      //不能超出左边界
+        dragX = 0
+      }
+      if(dragY < 0){      //不能超出上边界
+        dragY = 0
+      }
+      if(domDrag == 'dragTreatTitle'){
+        if(width-dragX-dragDesWidth < wrapWidth){    //不能超出右边界
+          dragX = maxDragX
+        }
+      }else{
+        // console.log(width,dragX,maxDragX,wrapWidth)
+        if(width-dragX < wrapWidth){    //不能超出右边界
+          dragX = maxDragX
+        }
+      }
+      if(height-dragY < wrapHeight){     //不能超出下边界
+        dragY = maxDragY
+      }
+      // isMove = true
+      wrap.style.left = dragX + 'px'
+      wrap.style.marginLeft = 0 + 'px'
+      wrap.style.top = dragY + 'px'
+    }
+  }
+  setTimeout(() => {
+    // windowRemoveEventHandler('mousemove',handleMove,document)
+  }, 6000);
+}
+
+module.exports = {
+  dragBox
+}

src/utils/tools.js

@@ -11,6 +11,7 @@ import {ISREAD, SETREADDITEMS} from "../store/types/homePage";
 import {CLEAR_FIRST_MAIN_DIAG, CLEAR_ALL_TREAT} from "../store/types/treat";
 import {tabChange} from '@store/actions/tabTemplate';
 import config from '@config/index.js';
+import $ from 'jquery';
 
 /***
  * 工具函数
@@ -740,12 +741,12 @@ function normalVal(min,max){
       return null;
   }
 }
-function getPageCoordinate(event){
+function getPageCoordinate(event,stic){//获取鼠标点击的位置
     let e = event || window.event;
     var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
     var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
     var x = e.pageX || (e.clientX + scrollX);
-    var y = (e.pageY+25) || (e.clientY + scrollY + 25);
+    var y = (e.pageY+(stic?25:0)) || (e.clientY + scrollY + (stic?25:0));//弹窗位置偏下25
     let obj = {
       boxLeft : x ,
       boxTop : y
@@ -762,37 +763,32 @@ function timestampToTime(timestamp) {     //excel导入2019年5月1日会转换
   var s = date.getSeconds();
   return Y+M+D+h+m+s;
 }
-function getPageLength(event) {     //兼容ie8获取页面距离左和上的距离，包括滚动距离
-  let e = event || window.event;
-  let scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
-  let scrollY = document.documentElement.scrollTop || document.body.scrollTop;
-  let x = e.pageX || e.clientX + scrollX;
-  let y = e.pageY || e.clientY + scrollY;
-  let page = {
-    pageX:x,
-    pageY:y
-  }
-  return page;
-}
-function dragBox(domWrap,domDrag){
+function dragBox(domWrap,domDrag,dragMove){
   // console.log(domWrap,domDrag,'拖拽')
   let drag = document.getElementById(domDrag);//拖拽区域
   let wrap = document.getElementById(domWrap);//被拖拽的元素
+  let move = document.getElementById(dragMove);//被拖拽的元素
   let wrapHeight = wrap.offsetHeight;//被拖拽的元素高度
   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;
   windowEventHandler('mousedown',function(event){    //鼠标位置获取，计算点击位置到拖拽元素左边的距离
-    let page = getPageLength(event);
-    mouseX = page.pageX - wrap.offsetLeft      //鼠标到拖拽元素的左边界的距离
-    mouseY = page.pageY - wrap.offsetTop       //鼠标到拖拽元素的上边界的距离
+    let page = getPageCoordinate(event,'0');
+    mouseX = page.boxLeft - wrap.offsetLeft      //鼠标到拖拽元素的左边界的距离
+    mouseY = page.boxTop - wrap.offsetTop       //鼠标到拖拽元素的上边界的距离
     isDrag = true
     // isMove = false
   },drag)
-  // windowEventHandler('mousemove',handleMove,document)
+  // $(move).mouseup(()=>{
+  //   console.log(123)
+  //   isDrag = false
+  //   return false
+  // })
+  // $(move).mousemove(handleMove)
   windowEventHandler('mousemove',handleMove,document)
   windowEventHandler('mouseup',()=>{
+    console.log(123)
     // if(isMove){ //有move就设置位置没有移动就不处理
     //   console.log(dragX)
     //   wrap.style.left = dragX + 'px'
@@ -800,11 +796,12 @@ function dragBox(domWrap,domDrag){
     // }
     isDrag = false
     return false
-  },document)
+  },dragMove)
 
   function handleMove(event){      //移动的
+    console.log(99)
     let dragDes = document.getElementById('treatDescBox');//展開区域
-    let page = getPageLength(event);
+    let page = getPageCoordinate(event,'0');
     let maxDragX = 0,dragDesWidth = 0;
     let maxDragY = height - wrapHeight;//最大可拖拽y方向距离
     wrapHeight = wrap.offsetHeight;
@@ -820,8 +817,8 @@ function dragBox(domWrap,domDrag){
       maxDragX = width - wrapWidth
     }
     if(isDrag){
-      dragX = page.pageX - mouseX          //鼠标可拖拽到左边的最大距离
-      dragY = page.pageY - mouseY          //鼠标可拖拽到上边的最大距离
+      dragX = page.boxLeft - mouseX          //鼠标可拖拽到左边的最大距离
+      dragY = page.boxTop - mouseY          //鼠标可拖拽到上边的最大距离
       if(dragX < 0){      //不能超出左边界
         dragX = 0
       }
@@ -847,6 +844,9 @@ function dragBox(domWrap,domDrag){
       wrap.style.top = dragY + 'px'
     }
   }
+  setTimeout(() => {
+    // windowRemoveEventHandler('mousemove',handleMove,document)
+  }, 2000);
 }
 
 function getCurrentDate(){
@@ -1164,7 +1164,6 @@ module.exports = {
     getPageCoordinate,
     windowRemoveEventHandler,
     timestampToTime,
-    getPageLength,
     dragBox,
     formatContinueDots,
     inspectAndAssist,