抽离Footer组件；删除多余代码

src/common/components/ComplexModal/index.jsx

@@ -1,10 +1,8 @@
 import React, { Component } from "react";
 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：弹窗内容
@@ -38,7 +36,6 @@ class ComplexModal extends Component {
           {title}
           <img src={close} onClick={onclose} className={style['closeIcon']} />
         </div>
-        <i className={style['flg']}>患者基本信息</i>
         <div className={style["content"]} style = {{width: width?width:'auto'}}>{children}</div>
         <div className={style['footer']} style = {{width: width?width:'auto'}}>{footer}</div>
       </div>

src/common/components/ComplexModal/index.less

@@ -1,3 +1,4 @@
+@import "~@less/mixin.less";
 .container {
   position: relative;
   z-index: 2000;
@@ -16,9 +17,6 @@
     text-align: right;
     background-color: #fff;
   }
-  .flg {
-    display: none;
-  }
   .shade {
     position: fixed;
     left: 0;

src/common/components/Footer/index.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import style from './index.less';
+import printIcon from '@common/images/team.png';
+/**
+ * author: Liucf@2019-05-15
+ * 弹窗底部按钮(目前用于管理评估、量表、推荐结果弹窗)
+ * 两个按钮：打印 + 确定/关闭/其他 
+ * print:是否显示打印按钮；
+ * footText:另一按钮显示文字;
+ * handlePrint:打印按钮的点击事件；
+ * 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>;
+  }
+}
+
+export default Footer;

src/common/components/Footer/index.less

@@ -0,0 +1,32 @@
+@import "~@less/mixin.less";
+.footer{
+    .print{
+        width: 111px;
+        height: 34px;
+        line-height: 34px;
+        outline: none;
+        border-radius: 4px;
+        border: 0 none;
+        cursor: pointer;
+        background: #fff;
+        margin-right: 20px;
+        img{
+          width: 20px;
+          vertical-align: middle;
+          margin-right: 4px;
+        }
+      }
+      .okBtn{
+        .btnCom;
+        width: 80px;
+        height: 34px;
+        line-height: 32px;
+        border: 1px solid #3B9ED0;
+        box-sizing: border-box;
+        margin-left: 20px;
+        background: #3B9ED0;
+        color: #fff;
+        float: right;
+        margin-right: 20px;
+      }
+  }

src/common/components/MiniToast/index.jsx

@@ -1,46 +1,35 @@
 import React from 'react';
 import style from './index.less';
-import close from "../../images/close-icon.png";
+import closeIcon from "../../images/close-icon.png";
 /**
-*小弹窗，没有蒙层，例如计算公式结果
-*title:弹窗标题
-*icon:标题旁边的icon,不传不显示
-*children:弹窗内容
-*show:弹窗显示
-*footer:是否显示底部“确定”按钮，默认不显示
-*close:关闭弹窗事件
-*confirm:确定事件
-*使用时，父元素需要加相对定位position: relative;
-*/
-class MiniToast extends React.Component{
-  constructor(props){
-    super(props);
-  }
-
-  close(){
-    const {close} = this.props;
-    close&&close();
-  }
-
-  confirm(){
-    const {confirm} = this.props;
-    confirm&&confirm();
-  }
-
-
+* author:Liucf@2019-05-15
+* 小弹窗，没有蒙层，例如计算公式结果
+* title:弹窗标题
+* icon:标题旁边的icon,不传不显示
+* children:弹窗内容
+* show:弹窗显示
+* footer:是否显示底部“确定”按钮，默认不显示
+* close:关闭弹窗事件
+* confirm:确定事件
+* 使用时，父元素需要加相对定位position: relative;
+**/
+class MiniToast extends React.PureComponent{
   render(){
-    const {show,title,icon,children,footer} = this.props;
-    return <div className={style["infoBox"]} style={{display:show?'block':'none'}}>
+    const {show,title,icon,children,footer,close,confirm} = this.props;
+    if(show){
+      return <div className={style["infoBox"]}>
               <p className={style["infoTitle"]}>
                 {icon?<img src={icon} />:''}
                 {title}
-                <img src={close} onClick={this.close.bind(this)} className={style["closeIcon"]}/>
+                <img src={closeIcon} onClick={close} className={style["closeIcon"]}/>
               </p>
               <div className={style["infoCon"]}>{children}</div>
-              <div className={style["infoFoot"]} style={{display:footer?'block':'none'}}>
-                <span onClick={this.confirm.bind(this)}>确定</span>
-              </div>
+              {footer?<div className={style["infoFoot"]}>
+                        <span onClick={confirm}>确定</span>
+                      </div>:''}
             </div>
+    }
+    return ''  
   }
 }
 

src/common/components/index.js

@@ -22,6 +22,7 @@ import Add from "./Add";
 import ComplexModal from "./ComplexModal";
 import MiniToast from "./MiniToast";
 import TailInlineTag from "./TailInlineTag";
+import Footer from "./Footer";
 
 module.exports = {
     Banner,
@@ -47,5 +48,6 @@ module.exports = {
     Add,
     ComplexModal,
     MiniToast,
-    TailInlineTag
+    TailInlineTag,
+    Footer
 };

src/components/AssessResult/AssessHis/index.jsx

@@ -1,6 +1,6 @@
 import React, { Component } from "react";
 import style from "./index.less";
-import { Radio,ComplexModal,Notify} from '@commonComp';
+import { Radio,ComplexModal,Notify,Footer} from '@commonComp';
 import arrow from '@common/images/show.png';
 import arrowDown from '@common/images/close.png';
 import loadingIcon from '@common/images/loading.gif';
@@ -130,10 +130,10 @@ class AssessResultHis extends Component {
     const { loading,isChronic, list,inquiryId } = this.props;
     const {tableName,tableId,showScale,showAssess} = this.state;
     const obj = list&&list[inquiryId];
-    const scaleFooter = <div className={style['footer']}>
-      <span className={style['print']} onClick={this.onPrint}><img src={printIcon} alt=""/>打印</span>
-      <span className={style['okBtn']} onClick={()=>this.showScaleFn()}>关闭</span>
-    </div>;
+    const scaleFooter = <Footer print={true}
+                        footText="关闭"
+                        handlePrint={this.onPrint}
+                        handleConfirm={this.showScaleFn}/>
     return <div className={style['assess-cont']}>
       <div className={style['assess-result']}>
         <p className={style['enter']}>{isChronic?'管理和评估':'推荐'}结果：{showAssess?<a onClick={this.showAssessFn}>收起结果<img src={arrowDown} /></a>:<a onClick={this.showAssessFn}>查看结果<img src={arrow} /></a>}</p>

src/components/AssessResult/AssessHis/index.less

@@ -31,38 +31,3 @@
     width: 30px;
   }
 }
-.footer{
-  .print{
-    width: 111px;
-    height: 34px;
-    line-height: 34px;
-    outline: none;
-    border-radius: 4px;
-    /*color: #3B9ED0;*/
-    border: 0 none;
-    cursor: pointer;
-    background: #fff;
-    margin-right: 20px;
-    img{
-      width: 20px;
-      vertical-align: middle;
-      margin-right: 4px;
-    }
-  }
-  .okBtn{
-    width: 80px;
-    height: 34px;
-    line-height: 32px;
-    text-align: center;
-    outline: none;
-    border-radius: 4px;
-    cursor: pointer;
-    border: 1px solid #3B9ED0;
-    box-sizing: border-box;
-    margin-left: 20px;
-    background: #3B9ED0;
-    color: #fff;
-    float: right;
-    margin-right: 20px;
-  }
-}

src/components/ChronicInfo/index.jsx

@@ -10,7 +10,7 @@ import allTableIcon from '@common/images/all-table.png';
 import add from '@common/images/add-result.png';
 import added from '@common/images/first.png';
 import checkIcon from '@common/images/check.png';
-import {ComplexModal,ConfirmModal,MiniToast, Radio,CheckBtn} from '@commonComp';
+import {ComplexModal,ConfirmModal,MiniToast, Radio,CheckBtn,Footer} from '@commonComp';
 import AssessResult from '@containers/AssessResult';
 import ScaleTable from '@containers/ScaleTable';
 import Notify from '@commonComp/Notify';
@@ -458,21 +458,21 @@ class ChronicInfo extends React.Component{
   }
 
   render(){
-    const footer = <div className={style['footer']}>
-      <span className={style['print']} onClick={this.onPrint}><img src={printIcon} alt=""/>打印</span>
-      <span className={style['okBtn']} onClick={()=>this.handleSaveAssess()}>确定</span>
-    </div>;
-    const recFooter =<div className={style['footer']}>
-      <span className={style['okBtn']} onClick={()=>this.handleSaveRecommend()}>确定</span>
-    </div>;
-    const scaleFooter = <div className={style['footer']}>
-      <span className={style['print']} onClick={this.onPrint}><img src={printIcon} alt=""/>打印</span>
-      <span className={style['okBtn']} onClick={()=>this.closeTable()}>确定</span>
-    </div>;
+    const footer = <Footer print={true}
+                      footText="确定"
+                      handlePrint={this.onPrint}
+                      handleConfirm={this.handleSaveAssess} />
+    const recFooter = <Footer print={false}
+                      footText="确定"
+                      handleConfirm={this.handleSaveRecommend}/>
+    const scaleFooter = <Footer print={true}
+                      footText="确定"
+                      handlePrint={this.onPrint}
+                      handleConfirm={this.closeTable}/>
     const {chronicMagItem,tableList,saveAssessInfos,chronicDesease,formulaResult,showHide} = this.props;
     const {showAssess,isAssessConfirm,tableName,tableId,parentId,parentIndex,isRecommendConfirm,showRecommend,radioVal,possible} = this.state;
-    return <div className={style["tips"]} style={{marginBottom:'15px'}}>
-              <div className={`${style["tips-title"]} ${style["chronic"]}`}>
+    return <div className={style["tips"]}>
+              <div className={style["tips-title"]}>
                 <div className={style["tips-name"]}>
                   <img src={chronicPic} />
                   <h2>{chronicMagItem&&chronicMagItem.name||chronicDesease&&chronicDesease.name||'病情提示'}</h2>

src/components/ChronicInfo/index.less

@@ -1,19 +1,19 @@
 @import "~@less/mixin.less";
 .tips{
   border:1px solid #EAEDF1;
-  .tips-title,h1{
+  margin-bottom: 15px;
+  .tips-title{
     font-size: 14px;
     color: #000;
     padding: 8px 15px;
     background: #EAF7FA;
     font-weight: bold;
+    background: rgba(242,150,91,0.1);
     img {
       float:left;
       margin-top: 0px;
       margin-right: 5px;
     }
-  }
-  .tips-title{
     .tips-name{
       width: 238px;
       display: inline-block;
@@ -46,9 +46,6 @@
       margin: 0 0 -2px 10px;
       }
     }
-    .chronic{
-      background: rgba(242,150,91,0.1);
-    }
     .content{
       font-size: 14px;
       padding:6px 15px;
@@ -115,7 +112,7 @@
       line-height: 24px;
       font-size: 14px;
       // margin-top: 15px;
-      height: 325px;
+      height: 365px;
       overflow-y: auto;
       padding: 10px 0 0 10px;
       li{
@@ -127,38 +124,6 @@
         margin-left: 10px;
       }
     }
-    .footer{
-      .print{
-        width: 111px;
-        height: 34px;
-        line-height: 34px;
-        outline: none;
-        border-radius: 4px;
-        /*color: #3B9ED0;*/
-        border: 0 none;
-        cursor: pointer;
-        background: #fff;
-        margin-right: 20px;
-        img{
-          width: 20px;
-          vertical-align: middle;
-          margin-right: 4px;
-        }
-      }
-      .okBtn{
-        .btnCom;
-        width: 80px;
-        height: 34px;
-        line-height: 32px;
-        border: 1px solid #3B9ED0;
-        box-sizing: border-box;
-        margin-left: 20px;
-        background: #3B9ED0;
-        color: #fff;
-        float: right;
-        margin-right: 20px;
-      }
-    }
   .chooseItem{
     display: inline-block;
     margin-right: 10px;