date

src/common/components/Calendar/Time/index.jsx

@@ -13,6 +13,7 @@ class Time extends React.Component {
         else if(value>=24) {value=23}
         else if(value<0) {value=0}
         this.props.handleChange({
+            day:this.props.day,
             hour:value,
             minute:this.props.minute,
             second:this.props.second,
@@ -24,6 +25,7 @@ class Time extends React.Component {
         else if(value>=60) {value=59}
         else if(value<0) {value=0}
         this.props.handleChange({
+            day:this.props.day,
             hour:this.props.hour,
             minute:value,
             second:this.props.second,
@@ -35,6 +37,7 @@ class Time extends React.Component {
         else if(value>=60) {value=59}
         else if(value<0) {value=0}
         this.props.handleChange({
+            day:this.props.day,
             hour:this.props.hour,
             minute:this.props.minute,
             second:value,

src/common/components/Calendar/index.jsx

@@ -22,9 +22,11 @@ class Calendar extends React.Component {
         this.state = {
             year:  this.year,
             month:  this.month,
+            day:  this.day,
             select:{
                 year:  this.year,
                 month:  this.month,
+                day:  this.day,
                 day: 0,//这里设置初始选中的值
                 hour:0,
                 minute:0,
@@ -85,13 +87,12 @@ class Calendar extends React.Component {
         });
         this.props.handleChange(info);
     }
-
     genTimeComponent(){
-        return this.props.needTime?<Time hour={this.state.select.hour} minute={this.state.select.minute} second={this.state.select.second} handleChange={(info)=>{this.handleChange(info)}}/>:null;
+        return this.props.needTime?<Time hour={this.state.select.hour} minute={this.state.select.minute} second={this.state.select.second} day={this.state.select.day} handleChange={(info)=>{this.handleChange(info)}}/>:null;
     }
     render() {
         return (
-            <div className={style.wrapper}>
+            <div className={style.wrapper} style={{top:this.props.top}}>
                 <div className={style.top}>
                     <div className={style.year}>
                         <YearList select={this.state.year} canSelectFuture={this.props.canSelectFuture} handleChange={(info) => this.handleYearSelect(info)}/>
@@ -105,6 +106,7 @@ class Calendar extends React.Component {
                 </div>
                 <Content selectTime={this.state.select} year={this.state.year} month={this.state.month} handleClick={(info)=>this.handleChange(info)} canSelectFuture={this.props.canSelectFuture}/>
                 {this.genTimeComponent()}
+                <div className={style.timeSure} onClick={()=>this.props.timeSure(this.state.select)}>确定</div>
             </div>
         )
     }

src/common/components/Calendar/index.less

@@ -9,7 +9,7 @@
   border-radius: 3px;
   position: absolute;
   top: 10px;
-    right: 0;
+  right: 0;
   z-index: 100;
   border: 1px solid #ccc;
   box-sizing: border-box;
@@ -49,4 +49,25 @@
       }
     }
   }
+  
+  .timeSure{
+    width: 46px;
+    height: 26px;
+    line-height: 26px;
+    position: absolute;
+    right: 5px;
+    bottom: 15px;
+    box-sizing: border-box;
+    color:#1F547E;
+    border: 1px solid #b1d2ec;
+    background-color: #deecf8;
+    text-align: center;
+    &:hover{
+      background-color: #ECF4FB;
+    }
+    &:active{
+      box-shadow: @active-box-shadow;
+      border-radius: 2px;
+    }
+  }
 }

src/common/components/ComplexModal/index.jsx

@@ -25,7 +25,7 @@ class ComplexModal extends Component {
 
   render() {
     const { onclose,title,children,footer,shadeClose,icon,width,top,bottom} = this.props;
-    const marginLeft = width? -parseInt(width)/2 : '';
+    const marginLeft = width? - parseInt(width)/2 : '';
     //const marginTop = height? -parseInt(height)/2: '';
     const domNode = document.getElementById('root');
     return ReactDom.createPortal(<div className={style['container']}>

src/common/components/WrapModalContainer/index.jsx

@@ -0,0 +1,27 @@
+import React from "react";
+import {dragBox} from '@utils/drag';
+import ReactDom from "react-dom";
+import style from "./index.less";
+import close from '@common/images/icon_close.png';
+
+class WrapModalContainer extends React.Component {
+  constructor(props) {
+    super(props)
+  }
+  componentDidMount(){
+    dragBox('previewWrapper','previewStatic','add')
+  }
+  render() {
+    const { onClose, children,title,width } = this.props;
+    const domNode = document.getElementById('root');
+    return ReactDom.createPortal(<div className={style['container']}>
+      <div className={style['shade']} onClick={onClose}></div>
+      <div className={style['modal']} id="previewWrapper" style={{width:width+'px',marginLeft:(-width/2)+'px'}}>
+        <div id="previewStatic" className={`${style['close']} drag-title`}>{title}<img src={close} onClick={onClose} /></div>
+        {children}
+      </div>
+    </div>,domNode)
+  }
+}
+
+export default WrapModalContainer;

src/common/components/WrapModalContainer/index.less

@@ -0,0 +1,46 @@
+.container {
+  position: fixed;
+  z-index: 2000;
+  width: 100%;
+  height: 100%;
+  .shade {
+    position: fixed;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #000;
+    opacity: 0.6;
+    filter:alpha(opacity=60);
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=60);";
+  }
+  .modal {
+    width: 820px;
+    background: #fff;
+    position: fixed;
+    left: 50%;
+    margin-left: -410px;
+    top: 7%;  
+    bottom: 7%;
+    height: 86%;
+    overflow: hidden;
+    padding-top: 40px;
+  }
+  .close { 
+    padding:  0 15px;
+    height: 40px;
+    line-height: 40px;
+    border-bottom: 1px solid #EAEDF1;
+    box-sizing: border-box;
+    position: absolute;
+    width: 100%;
+    top: 0;
+    background-color: #fff;
+    z-index: 10;
+    img{
+      float:right;
+      cursor: pointer;
+      margin-top: 10px;
+    }
+  }
+}

src/common/components/index.js

@@ -24,6 +24,7 @@ import MiniToast from "./MiniToast";
 import DelToast from "./DelToast";
 import TailInlineTag from "./TailInlineTag";
 import Footer from "./Footer";
+import WrapModalContainer from "./WrapModalContainer";
 
 module.exports = {
     Banner,
@@ -52,5 +53,6 @@ module.exports = {
     DelToast,
     MiniToast,
     TailInlineTag,
-    Footer
+    Footer,
+    WrapModalContainer
 };

src/common/less/variables.less

@@ -5,6 +5,10 @@
 @blue: #3B9ED0;
 @red:#ff0000;
 @tab-color:#3B9ED0;
+
+@ipt-color:#E9F5FA;
+@ipt-bg-color:#F0F0F0;
+@ipt-wrap-color:#e2e2e2;
 /***按钮hover***/
 @button-hover: #aaa;
 

src/components/AssistCheck/index.jsx

@@ -15,7 +15,7 @@ class AssistCheck extends React.Component {
             <div className={styles.wrapper}>
                 <div className={styles.top}>
                     <span id="assistResultData">辅检结果数据</span>
-                    {/* <button>导入化验结果</button> */}
+                    {/* <button>导入辅检结果</button> */}
                 </div>
                 <ItemBox 
                     className={styles.title}

src/components/Inspect/index.jsx

@@ -1,217 +1,248 @@
 import React from 'react';
-import { ItemBox,ConfirmModal } from '@commonComp';
+import { ItemBox, ConfirmModal, WrapModalContainer } from '@commonComp';
 import AddInspect from '../AddInspect';
 import styles from './index.less';
 import { getExcelList } from '@store/actions/inspect';
 import Notify from '@commonComp/Notify';
 import store from '@store';
 import $ from 'jquery';
-import { host,prefix } from '@utils/config.js';
-import {isIE,getUrlArgObject} from '@utils/tools.js';
+import { host, prefix } from '@utils/config.js';
+import { isIE, getUrlArgObject } from '@utils/tools.js';
+import {dragBox} from '@utils/drag';
+import WrapModalBody from '../WrapModalBody';
 
 
 (function ($) {
-    var FileAPI = {
-        // @default: "./dist/"
-        staticPath: './dists/',
+  var FileAPI = {
+    // @default: "./dist/"
+    staticPath: './dists/',
 
-        // @default: FileAPI.staticPath + "FileAPI.flash.swf"
-        flashUrl: './dists/FileAPI.flash.swf',
+    // @default: FileAPI.staticPath + "FileAPI.flash.swf"
+    flashUrl: './dists/FileAPI.flash.swf',
 
-        // @default: FileAPI.staticPath + "FileAPI.flash.image.swf"
-        flashImageUrl: './dists/FileAPI.flash.image.swf'
-    };
-    return FileAPI
+    // @default: FileAPI.staticPath + "FileAPI.flash.image.swf"
+    flashImageUrl: './dists/FileAPI.flash.image.swf'
+  };
+  return FileAPI
 })($)
 
 import "./dists/FileAPI.js";
 
-const isLocal = window.location.hostname.indexOf('localhost')!=-1;
-const qhost = isLocal?host+prefix:prefix;
+const isLocal = window.location.hostname.indexOf('localhost') != -1;
+const qhost = isLocal ? host + prefix : prefix;
 const api = {
-    upload: qhost+'/lisExcelRes/lisExcelAnalysis'
+  upload: qhost + '/lisExcelRes/lisExcelAnalysis'
 };
 
 class Inspect extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            val: '',
-            visible:false,
-            dom:[],
-            isIE:isIE(),
-            ieVersion:null,
-            height:'-1'
-        }
-        this.handleImportExcel = this.handleImportExcel.bind(this)
-        this.cancel = this.cancel.bind(this)
-        this.getWarings = this.getWarings.bind(this)
+  constructor(props) {
+    super(props);
+    this.state = {
+      val: '',
+      visible: false,
+      dom: [],
+      isIE: isIE(),
+      ieVersion: null,
+      height: '-1',
+      hide: true
     }
-    componentDidMount(){
-        var ua = navigator.userAgent;
-        var _isIE = ua.indexOf("MSIE")>-1;
-        if(_isIE){
-            let version =  ua.match(/MSIE ([\d.]+)/)[1];
-            this.setState({
-                ieVersion:version
-            })
-        }
-        $('iframe').bind( 'load', function(){} )
-      const {fetchPushInfos} = this.props;
-        // FileAPI.debug = true
-        $.support.cors = true;
-        const that = this;
-        var choose = document.getElementById('choose');
-        FileAPI.event.on(choose, 'change', function (evt){
-            var files = FileAPI.getFiles(evt);
-            var baseData = store.getState().patInfo.message;
-            FileAPI.filterFiles(files, function (file, info){
-                let name = file.name;
-                // if( name.split('.')[1] == 'xlsx' || name.split('.')[1] == 'xls' ){
-                //     Notify.error('请选择正确的excel表格')
-                //     return;
-                // }else{
-                //     alert(9)
-                //     return true;
-                // }
-                return true;
-            },
-            function (files, rejected){
-                if( files.length ){
-                    //console.log(files[0])
-                  const securityCode = getUrlArgObject("code");
-                  const appKeyId = getUrlArgObject("appI");
-                  const appKeySecret = getUrlArgObject("appS");
-                    FileAPI.upload({
-                        // url: '/api/icss/lisExcelRes/lisExcelAnalysis',
-                        url: api.upload,
-                        data:{ hospitalCode:baseData == '{}'? '' : baseData.hospitalCode },
-                        files: { uploadfile: files[0] },
-                        headers:{
-                          appKeyId:appKeyId,
-                          appKeySecret:appKeySecret,
-                          securityCode:securityCode
-                            // 'Content-Type':'Content-Type: multipart/form-data'
-                            // 'Content-Type':'application/json;charset=UTF-8'
-                            // 'Content-type': "text/plain"
-                            // "Content-Type": 'multipart/form-data',
-                            // 'Accept':'application/json'
-                        },
-                        complete: function (err, xhr){
-                            if( !err ){
-                                let res = JSON.parse(xhr.response);
-                                let message = res.data.messages;
-                                store.dispatch(getExcelList(res.data));
-                                fetchPushInfos&&fetchPushInfos();
-                                if (message&&message.length != 0) {
-                                    that.setState({
-                                        visible:true,
-                                        dom:message,
-                                        height:message.length
-                                    })
-                                }
-                                $("#choose").val("");
-                            }else{
-                                let res = JSON.parse(xhr.response);
-                                Notify.error(res.msg)
-                            }
-                        }
-                    });
+    this.handleImportExcel = this.handleImportExcel.bind(this)
+    this.cancel = this.cancel.bind(this)
+    this.getWarings = this.getWarings.bind(this)
+    this.checkSystemIpt = this.checkSystemIpt.bind(this)
+    this.onClose = this.onClose.bind(this)
+  }
+  componentDidMount() {
+    var ua = navigator.userAgent;
+    var _isIE = ua.indexOf("MSIE") > -1;
+    if (_isIE) {
+      let version = ua.match(/MSIE ([\d.]+)/)[1];
+      this.setState({
+        ieVersion: version
+      })
+    }
+    $('iframe').bind('load', function () { })
+    const { fetchPushInfos } = this.props;
+    // FileAPI.debug = true
+    $.support.cors = true;
+    const that = this;
+    var choose = document.getElementById('choose');
+    FileAPI.event.on(choose, 'change', function (evt) {
+      var files = FileAPI.getFiles(evt);
+      var baseData = store.getState().patInfo.message;
+      FileAPI.filterFiles(files, function (file, info) {
+        let name = file.name;
+        // if( name.split('.')[1] == 'xlsx' || name.split('.')[1] == 'xls' ){
+        //     Notify.error('请选择正确的excel表格')
+        //     return;
+        // }else{
+        //     alert(9)
+        //     return true;
+        // }
+        return true;
+      },
+        function (files, rejected) {
+          if (files.length) {
+            //console.log(files[0])
+            const securityCode = getUrlArgObject("code");
+            const appKeyId = getUrlArgObject("appI");
+            const appKeySecret = getUrlArgObject("appS");
+            FileAPI.upload({
+              // url: '/api/icss/lisExcelRes/lisExcelAnalysis',
+              url: api.upload,
+              data: { hospitalCode: baseData == '{}' ? '' : baseData.hospitalCode },
+              files: { uploadfile: files[0] },
+              headers: {
+                appKeyId: appKeyId,
+                appKeySecret: appKeySecret,
+                securityCode: securityCode
+                // 'Content-Type':'Content-Type: multipart/form-data'
+                // 'Content-Type':'application/json;charset=UTF-8'
+                // 'Content-type': "text/plain"
+                // "Content-Type": 'multipart/form-data',
+                // 'Accept':'application/json'
+              },
+              complete: function (err, xhr) {
+                if (!err) {
+                  let res = JSON.parse(xhr.response);
+                  let message = res.data.messages;
+                  store.dispatch(getExcelList(res.data));
+                  fetchPushInfos && fetchPushInfos();
+                  if (message && message.length != 0) {
+                    that.setState({
+                      visible: true,
+                      dom: message,
+                      height: message.length
+                    })
+                  }
+                  $("#choose").val("");
+                } else {
+                  let res = JSON.parse(xhr.response);
+                  Notify.error(res.msg)
                 }
+              }
             });
+          }
         });
+    });
+  }
+  handleImportExcel() {
+    this.inputRef.click();
+  }
+  cancel() {
+    this.setState({ visible: false })
+  }
+  getStyle() {
+    const { ieVersion } = this.state;
+    if (ieVersion && ieVersion <= 9) {
+      return styles.disabledBtn;
+    } else {
+      return styles.button;
     }
-    handleImportExcel() {
-        this.inputRef.click();
-    }
-    cancel(){
-        this.setState({visible:false})
-    }
-  getStyle(){
-    const {ieVersion} = this.state;
-        if(ieVersion&&ieVersion<=9){
-            return styles.disabledBtn;
-        }else{
-            return styles.button;
-        }
   }
-    getWarings(lis){
-        <ul>
+  getWarings(lis) {
+    <ul>
+      {
+        lis.length > 0 && lis.map((val) => {
+          return <li>
+            {val}
+          </li>
+        })
+      }
+    </ul>
+  }
+  checkSystemIpt() {
+    this.setState({
+      hide: true
+    })
+  }
+  onClose(){
+    console.log(9999)
+    this.setState({
+      hide: false
+    })
+    dragBox('previewWrapper','previewStatic','del')
+  }
+  render() {
+    const { fetchPushInfos, getInfomation, inspectVal, windowHeight, handleCloseExcel, handleChangeValue, labelListActive, list, handleSign, labelList, handleLabelSub, handleClear, handleConfirm, fillActive, changeActivePart, getExcelDataList, delPartItem, inspectList } = this.props;
+    const { ieVersion, isIE, hide } = this.state;
+    const { checkSystemIpt,onClose } = this;
+    return (
+      <div className={styles.wrapper} >
+        {/* 导入功能插件，ie8/9权限问题暂未解决，先隐藏 */}
+        <div className={styles.top}>
+          <span id="inspectResultData">化验结果数据</span>
+          {/* <div className={this.getStyle()} onClick={ieVersion&&ieVersion<=9?null:this.handleImportExcel}> */}
+          <div className={this.getStyle()}>
+            {/* <button disabled={ieVersion&&ieVersion>9?true:false}>导入化验结果</button>*/}
+            <div className={styles.pushButton}>导入化验结果</div>
+            <ul className={styles.importSelect}>
+              <li className={styles.excelIpt}>
+                <div onClick={ieVersion && ieVersion <= 9 ? null : this.handleImportExcel}>本地导入</div>
+                <input type="file" name="uploadfile" id="choose" style={{ display: 'none' }} ref={(DOM) => this.inputRef = DOM} />
+              </li>
+              <li className={`${styles.excelIpt} ${styles.systemIpt}`} onClick={checkSystemIpt}>检查系统导入</li>
+            </ul>
             {
-                lis.length>0 && lis.map((val)=>{
-                    return <li>
-                        {val}
-                    </li>
-                })
+              hide ? <WrapModalContainer title={'导入化验数据'} width={1000} onClose={onClose}>
+                <WrapModalBody></WrapModalBody>
+              </WrapModalContainer> : null
             }
-        </ul>
-    }
-    render() {
-        const {fetchPushInfos,getInfomation,inspectVal,windowHeight, handleCloseExcel, handleChangeValue, labelListActive, list, handleSign, labelList, handleLabelSub, handleClear, handleConfirm, fillActive, changeActivePart, getExcelDataList,delPartItem,inspectList } = this.props;
-        const {ieVersion,isIE} = this.state;
-        return (
-            <div className={styles.wrapper} >
-                {/* 导入功能插件，ie8/9权限问题暂未解决，先隐藏 */}
-                <div className={styles.top}>
-                    <span id="inspectResultData">化验结果数据</span>
-                    <div className={this.getStyle()} onClick={ieVersion&&ieVersion<=9?null:this.handleImportExcel}>
-                       {/* <button disabled={ieVersion&&ieVersion>9?true:false}>导入化验结果</button>*/}
-                        <div className={styles.pushButton}>导入化验结果</div>
-                        <input type="file" name="uploadfile" id="choose" style={{ display: 'none' }} ref={(DOM) => this.inputRef = DOM} />
-                    </div>
-                </div>
-                <ItemBox
-                    className={styles.title}
-                    title={'化验'}
-                    editable={false}
-                    border={true}
-                    marginTop={'20px'}
-                >
-                    <div style={{ padding: '10px', boxSizing: 'border-box' }} >
-                        <AddInspect
-                            handleSign={handleSign}
-                            handleChangeValue={handleChangeValue}
-                            list={list}
-                            handlePush={fetchPushInfos}
-                            labelList={labelList}
-                            handleLabelSub={handleLabelSub}
-                            fillActive={fillActive}
-                            handleClear={handleClear}
-                            handleConfirm={handleConfirm}
-                            changeActivePart={changeActivePart}
-                            getExcelDataList={getExcelDataList}
-                            handleCloseExcel={handleCloseExcel}
-                            labelListActive={labelListActive}
-                            delPartItem={delPartItem}
-                            inspectList={inspectList}
-                            getInfomation={getInfomation}
-                            inspectVal={inspectVal}
-                            windowHeight={windowHeight}
-                        >
-                        </AddInspect>
-                    </div>
-                </ItemBox>
-                <ConfirmModal visible={this.state.visible} 
-                    okText='删除' 
-                    cancelText='确定' 
-                    width="450"
-                    height={(this.state.height > 2 && this.state.height < 8)?((this.state.height * 30 + 120)+'px') : this.state.height > 8 ? '350px' : '200px'}
-                    noFooter= {true}
-                    close={this.cancel}>
-                    <ul className={styles.excelList}>
-                        {
-                            this.state.dom.length>0 && this.state.dom.map((val)=>{
-                                return <li className={styles.excelListWaring}>
-                                    {val}
-                                </li>
-                            })
-                        }
-                    </ul>
-                    <div onClick={this.cancel} className={styles.confirmBtn}>确定</div>
-                </ConfirmModal>
-            </div>
-        )
-    }
+            {/* <input type="file" name="uploadfile" id="choose" style={{ display: 'none' }} ref={(DOM) => this.inputRef = DOM} /> */}
+          </div>
+        </div>
+        <ItemBox
+          className={styles.title}
+          title={'化验'}
+          editable={false}
+          border={true}
+          marginTop={'20px'}
+        >
+          <div style={{ padding: '10px', boxSizing: 'border-box' }} >
+            <AddInspect
+              handleSign={handleSign}
+              handleChangeValue={handleChangeValue}
+              list={list}
+              handlePush={fetchPushInfos}
+              labelList={labelList}
+              handleLabelSub={handleLabelSub}
+              fillActive={fillActive}
+              handleClear={handleClear}
+              handleConfirm={handleConfirm}
+              changeActivePart={changeActivePart}
+              getExcelDataList={getExcelDataList}
+              handleCloseExcel={handleCloseExcel}
+              labelListActive={labelListActive}
+              delPartItem={delPartItem}
+              inspectList={inspectList}
+              getInfomation={getInfomation}
+              inspectVal={inspectVal}
+              windowHeight={windowHeight}
+            >
+            </AddInspect>
+          </div>
+        </ItemBox>
+        <ConfirmModal visible={this.state.visible}
+          okText='删除'
+          cancelText='确定'
+          width="450"
+          height={(this.state.height > 2 && this.state.height < 8) ? ((this.state.height * 30 + 120) + 'px') : this.state.height > 8 ? '350px' : '200px'}
+          noFooter={true}
+          close={this.cancel}>
+          <ul className={styles.excelList}>
+            {
+              this.state.dom.length > 0 && this.state.dom.map((val) => {
+                return <li className={styles.excelListWaring}>
+                  {val}
+                </li>
+              })
+            }
+          </ul>
+          <div onClick={this.cancel} className={styles.confirmBtn}>确定</div>
+        </ConfirmModal>
+      </div>
+    )
+  }
 }
 
 export default Inspect;

src/components/Inspect/index.less

@@ -20,8 +20,10 @@
         float: right;
         border-radius: 5px;
         border: 1px solid @template-color;
-        overflow: hidden;
+        // overflow: hidden;
         margin-top: -3px;
+        position: relative;
+        z-index: 99;
     }
     .disabledBtn{
         float: right;
@@ -68,4 +70,25 @@
     color: #fff;
     // cursor: pointer;
 }
+.importSelect {
+  position: absolute;
+  width: 120%;
+  top: 30px;
+  left: 0;
+  z-index: 99;
+  font-size: 12px;
+  box-shadow: 0 10px 20px 0 #989DA3;
+  border: 1px solid #dedede;
+  background-color: #fff;
+  li {
+    height: 34px;
+    line-height: 34px;
+    padding-left: 10px;
+    cursor: pointer;
+  }
+  li:hover {
+    background-color: @ipt-color;
+    color: #2A9BD5;
+  }
+}
 

src/components/Preview/index.jsx

@@ -19,7 +19,7 @@ class Preview extends Component {
     const dataJson = getAllDataList(baseList);
     const dataStr = getAllDataStringList(baseList);
 
-    return <div className={style['container']} style={visible? {display: 'block'}: {display: 'none'}}>
+    return <div className={style['container']}>
       <div className={style['shade']} onClick={onClose}></div>
       <div className={style['modal']} id="previewWrapper">
         <div id="previewStatic" className={`${style['close']} drag-title`}>预览<img src={close} onClick={onClose} /></div>

src/components/PrintPreview/index.jsx

@@ -21,7 +21,7 @@ class PrintPreview extends Component {
         const dataJson = getAllDataList(baseList);
         const dataStr = getAllDataStringList(baseList);
 
-        return <div className={style['container']} style={visible ? { display: 'block' } : { display: 'none' }}>
+        return <div className={style['container']}>
             <div className={style['shade']} onClick={onClose}></div>
             <div className={style['modal']} id="previewPrintWrapper">
                 <div id="previewPrintStatic" className={`${style['close']} drag-title`}>打印<img src={close} onClick={onClose} /></div>

src/components/TemplateItems/TemplateItem/index.jsx

@@ -11,210 +11,205 @@ import editing_icon from './img/edit_blue.png';
 import check_circle from './img/check-circle.png';
 import check_right from './img/check-right.png';
 import store from '@store'
-import {checkItems} from '@store/actions/tabTemplate';
+import { checkItems } from '@store/actions/tabTemplate';
 import $ from 'jquery';
 
 class TemplateItem extends React.Component {
-    constructor() {
-        super();
-        this.content = null;
-        this.state = {
-            delHover: false,
-            editHover: false,
-            checkBox:false,
-            bgColor:false,
-        };
-        this.isConfirmClick = false;
-        this.timer = null;
-        this.handleTitleClick = this.handleTitleClick.bind(this)
-    }
-
-    getArrow() {
-        return this.state.isOpen ? arrow_down_icon : arrow_icon;
-    }
-
-    handleContentClick(e,sex) {
-        e.stopPropagation();
-        this.props.handleContentClick(this.props.id,sex);
-    }
-
-    handleCheckboxClick(e,id){          //点击复选框
-        e.stopPropagation();
-        let tempCheck = this.state.checkBox;
-        this.setState({
-            checkBox:!tempCheck
-        })
-        store.dispatch(checkItems(id))
-    }
-
-    getCheckIcon() {
-        let tempCheckItems = this.props.checkItems;
-        if(tempCheckItems.indexOf(this.props.id) != -1){
-            return [check_right,'title-wrapper-bg']
-        }else{
-            return [check_circle,'']
-        }
-    }
-    getBgcColor() {
-        let tempCheckItems = this.props.checkItems;
-        if(tempCheckItems.indexOf(this.props.id) != -1){
-            return 'title-wrapper-bg'
-        }else{
-            return ''
-        }
-    }
-    getDelIcon() {
-        return this.state.delHover ? del_hover_icon : del_icon;
-    }
-
-    handleDelIconMouseEnter() {
-        this.setState({
-            delHover: true
-        });
-    }
-
-    handleDelIconMouseLeave() {
-        this.setState({
-            delHover: false
-        });
-    }
-
-    handleTemplateDel(e) {
-        e.stopPropagation();
-        this.props.handleTemplateDel(this.props.id);
-    }
-
-    getEditIcon() {
-        return this.state.editHover ? editing_icon : edit_icon;
-    }
-
-    handleEditIconMouseEnter() {
-        this.setState({
-            editHover: true
-        });
-    }
-
-    handleEditIconMouseLeave() {
-        this.setState({
-            editHover: false
-        });
-    }
-
-    handleEditIconClick(e,name) {
-        e.stopPropagation();
-        let currId = this.props.id
-        this.props.handleTitleChange(currId,name);
-    }
-
-    handleTitleClick(e) {
-      if(e.target.tagName == 'I'){
-        let tmpDomLis = $(e.target).parent().parent().siblings()
-        $(e.target).parent().next().slideToggle()
-        if($(e.target).parent().next().height() == 0){
-          $(e.target).next().attr('src',arrow_down_icon)
-        }else{
-          $(e.target).next().attr('src',arrow_icon)
-        }
-        for(let i = 0;i < tmpDomLis.length;i++){
-          let tmpDiv = tmpDomLis[i]
-          $(tmpDiv).children().eq(1).slideUp()
-          $(tmpDiv).children().eq(0).children('img').eq(0).attr('src',arrow_icon)
-        }
-      }else if($(e.target).attr('src')){
-        let tmpDomLis = $(e.target).parent().parent().siblings()
-        $(e.target).parent().next().slideToggle()
-        if($(e.target).parent().next().height() == 0){
-          $(e.target).attr('src',arrow_down_icon)
-        }else{
-          $(e.target).attr('src',arrow_icon)
-        }
-        for(let i = 0;i < tmpDomLis.length;i++){
-          let tmpDiv = tmpDomLis[i]
-          $(tmpDiv).children().eq(1).slideUp()
-          $(tmpDiv).children().eq(0).children('img').eq(0).attr('src',arrow_icon)
-        }
-      }else{
-        let tmpDomLis = $(e.target).parent().siblings()
-        $(e.target).next().slideToggle()
-        if($(e.target).next().height() == 0){
-          $(e.target).children('img').eq(0).attr('src',arrow_down_icon)
-        }else{
-          $(e.target).children('img').eq(0).attr('src',arrow_icon)
-        }
-        for(let i = 0;i < tmpDomLis.length;i++){
-          let tmpDiv = tmpDomLis[i]
-          $(tmpDiv).children().eq(1).slideUp()
-          $(tmpDiv).children().eq(0).children('img').eq(0).attr('src',arrow_icon)
-        }
+  constructor() {
+    super();
+    this.content = null;
+    this.state = {
+      delHover: false,
+      editHover: false,
+      checkBox: false,
+      bgColor: false,
+    };
+    this.isConfirmClick = false;
+    this.handleTitleClick = this.handleTitleClick.bind(this)
+  }
+
+  getArrow() {
+    return this.state.isOpen ? arrow_down_icon : arrow_icon;
+  }
+
+  handleContentClick(e, sex) {
+    e.stopPropagation();
+    this.props.handleContentClick(this.props.id, sex);
+  }
+
+  handleCheckboxClick(e, id) {          //点击复选框
+    e.stopPropagation();
+    let tempCheck = this.state.checkBox;
+    this.setState({
+      checkBox: !tempCheck
+    })
+    store.dispatch(checkItems(id))
+  }
+
+  getCheckIcon() {
+    let tempCheckItems = this.props.checkItems;
+    if (tempCheckItems.indexOf(this.props.id) != -1) {
+      return [check_right, 'title-wrapper-bg']
+    } else {
+      return [check_circle, '']
+    }
+  }
+  getBgcColor() {
+    let tempCheckItems = this.props.checkItems;
+    if (tempCheckItems.indexOf(this.props.id) != -1) {
+      return 'title-wrapper-bg'
+    } else {
+      return ''
+    }
+  }
+  getDelIcon() {
+    return this.state.delHover ? del_hover_icon : del_icon;
+  }
+
+  handleDelIconMouseEnter() {
+    this.setState({
+      delHover: true
+    });
+  }
+
+  handleDelIconMouseLeave() {
+    this.setState({
+      delHover: false
+    });
+  }
+
+  handleTemplateDel(e) {
+    e.stopPropagation();
+    this.props.handleTemplateDel(this.props.id);
+  }
+
+  getEditIcon() {
+    return this.state.editHover ? editing_icon : edit_icon;
+  }
+
+  handleEditIconMouseEnter() {
+    this.setState({
+      editHover: true
+    });
+  }
+
+  handleEditIconMouseLeave() {
+    this.setState({
+      editHover: false
+    });
+  }
+
+  handleEditIconClick(e, name) {
+    e.stopPropagation();
+    let currId = this.props.id
+    this.props.handleTitleChange(currId, name);
+  }
+
+  handleTitleClick(e) {
+    if (e.target.tagName == 'I') {
+      let tmpDomLis = $(e.target).parent().parent().siblings()
+      $(e.target).parent().next().slideToggle()
+      if ($(e.target).parent().next().height() == 0) {
+        $(e.target).next().attr('src', arrow_down_icon)
+      } else {
+        $(e.target).next().attr('src', arrow_icon)
+      }
+      for (let i = 0; i < tmpDomLis.length; i++) {
+        let tmpDiv = tmpDomLis[i]
+        $(tmpDiv).children().eq(1).slideUp()
+        $(tmpDiv).children().eq(0).children('img').eq(0).attr('src', arrow_icon)
+      }
+    } else if ($(e.target).attr('src')) {
+      let tmpDomLis = $(e.target).parent().parent().siblings()
+      $(e.target).parent().next().slideToggle()
+      if ($(e.target).parent().next().height() == 0) {
+        $(e.target).attr('src', arrow_down_icon)
+      } else {
+        $(e.target).attr('src', arrow_icon)
+      }
+      for (let i = 0; i < tmpDomLis.length; i++) {
+        let tmpDiv = tmpDomLis[i]
+        $(tmpDiv).children().eq(1).slideUp()
+        $(tmpDiv).children().eq(0).children('img').eq(0).attr('src', arrow_icon)
+      }
+    } else {
+      let tmpDomLis = $(e.target).parent().siblings()
+      $(e.target).next().slideToggle()
+      if ($(e.target).next().height() == 0) {
+        $(e.target).children('img').eq(0).attr('src', arrow_down_icon)
+      } else {
+        $(e.target).children('img').eq(0).attr('src', arrow_icon)
+      }
+      for (let i = 0; i < tmpDomLis.length; i++) {
+        let tmpDiv = tmpDomLis[i]
+        $(tmpDiv).children().eq(1).slideUp()
+        $(tmpDiv).children().eq(0).children('img').eq(0).attr('src', arrow_icon)
       }
     }
-
-    render() {
-        const { allCheckShow,id,name,preview,sex } = this.props;
-        let previewJson = JSON.parse(preview);
-        let sexStr = sex==2?' (女)':sex==1?' (男)':' (通用)';
-        return (
-            <div className={style.wrapper}>
-                <div className={ 
-                    allCheckShow?
-                    `${style["title-wrapper"]} ${style["clearfix"]} ${style[this.getCheckIcon()[1]]}`:
-                    `${style["title-wrapper"]} ${style["clearfix"]}`}
-                    onClick={this.handleTitleClick}
-                >
-                    {
-                        allCheckShow?<div className={style['check-wrap']} onClick={(e)=>{this.handleCheckboxClick(e,id)}}>
-                            <img className={`${style['fl-element']} ${style['check-box']}`} 
-                            src={this.getCheckIcon()[0]}
-                        /></div>:null
-                    }
-                    <i
-                        className={style['title']}
-                        title={name+sexStr}
-                    >
-                        {name+sexStr}
-                    </i>
-                    <img className={style.arrow} src={arrow_icon} />
-                    <img title={'删除模板'} 
-                        className={style.del}
-                        style={{display:allCheckShow?'none':'block'}}
-                        src={this.getDelIcon()} 
-                        onMouseEnter={() => this.handleDelIconMouseEnter()}
-                        onMouseLeave={() => this.handleDelIconMouseLeave()}
-                        onClick={(e) => this.handleTemplateDel(e)} 
-                    />
-                    <span className={style.quote} onClick={(e) => this.handleContentClick(e,sex)}>引用</span>
-                    <img title={'修改模板标题'}
-                        className={style.edit}
-                        src={this.getEditIcon()}
-                        onMouseEnter={() => this.handleEditIconMouseEnter()}
-                        onMouseLeave={() => this.handleEditIconMouseLeave()}
-                        onClick={(e) => this.handleEditIconClick(e,name)}
-                    />
-                </div>
-                <div
-                    ref={(content) => this.content = content}
-                    className={style.content}
-                    title={this.title}
-                >
-                    {
-                        previewJson?<DesItem preview={previewJson}></DesItem>:<p>暂无数据</p>
-                    }
-                </div>
-            </div>
-        )
-    }
-
-    componentWillUnmount() {
-        clearTimeout(this.timer);
-    }
+  }
+
+  render() {
+    const { allCheckShow, id, name, preview, sex } = this.props;
+    let previewJson = JSON.parse(preview);
+    let sexStr = sex == 2 ? ' (女)' : sex == 1 ? ' (男)' : ' (通用)';
+    return (
+      <div className={style.wrapper}>
+        <div className={
+          allCheckShow ?
+            `${style["title-wrapper"]} ${style["clearfix"]} ${style[this.getCheckIcon()[1]]}` :
+            `${style["title-wrapper"]} ${style["clearfix"]}`}
+          onClick={this.handleTitleClick}
+        >
+          {
+            allCheckShow ? <div className={style['check-wrap']} onClick={(e) => { this.handleCheckboxClick(e, id) }}>
+              <img className={`${style['fl-element']} ${style['check-box']}`}
+                src={this.getCheckIcon()[0]}
+              /></div> : null
+          }
+          <i
+            className={style['title']}
+            title={name + sexStr}
+          >
+            {name + sexStr}
+          </i>
+          <img className={style.arrow} src={arrow_icon} />
+          <img title={'删除模板'}
+            className={style.del}
+            style={{ display: allCheckShow ? 'none' : 'block' }}
+            src={this.getDelIcon()}
+            onMouseEnter={() => this.handleDelIconMouseEnter()}
+            onMouseLeave={() => this.handleDelIconMouseLeave()}
+            onClick={(e) => this.handleTemplateDel(e)}
+          />
+          <span className={style.quote} onClick={(e) => this.handleContentClick(e, sex)}>引用</span>
+          <img title={'修改模板标题'}
+            className={style.edit}
+            src={this.getEditIcon()}
+            onMouseEnter={() => this.handleEditIconMouseEnter()}
+            onMouseLeave={() => this.handleEditIconMouseLeave()}
+            onClick={(e) => this.handleEditIconClick(e, name)}
+          />
+        </div>
+        <div
+          ref={(content) => this.content = content}
+          className={style.content}
+          title={this.title}
+        >
+          {
+            previewJson ? <DesItem preview={previewJson}></DesItem> : <p>暂无数据</p>
+          }
+        </div>
+      </div>
+    )
+  }
 }
 
 export default TemplateItem;
 TemplateItem.propTypes = {
-    id: PropTypes.string,
-    title: PropTypes.string,
-    content: PropTypes.arrayOf(PropTypes.string),
-    handleContentClick: PropTypes.func,
-    handleTemplateDel: PropTypes.func,
-    handleTitleChange: PropTypes.func
+  id: PropTypes.string,
+  title: PropTypes.string,
+  content: PropTypes.arrayOf(PropTypes.string),
+  handleContentClick: PropTypes.func,
+  handleTemplateDel: PropTypes.func,
+  handleTitleChange: PropTypes.func
 };

src/components/WrapModalBody/Item/index.jsx

@@ -0,0 +1,47 @@
+import React from "react";
+import style from "../index.less";
+import { Calendar} from '@commonComp';
+
+class Item extends React.Component {
+  constructor(props) {
+    super(props)
+  }
+  handleChangeDate(date){
+    console.log(date,'外')
+  }
+  timeSure(date){
+    console.log(date,'外')
+  }
+  render() {
+    return <div className={style['items']}>
+      <ul>
+        <li className={`${style.code} ${style.pubLi}`}>
+          <span>门诊号 : </span>
+          <input type="text" />
+        </li>
+        <li className={`${style.name} ${style.pubLi}`}>
+          <span>姓名 : </span>
+          <input type="text" />
+        </li>
+        <li className={`${style.sex} ${style.pubLi}`}>
+          <span>性别 : </span>
+          <input type="text" />
+        </li>
+        <li className={`${style.age} ${style.pubLi}`}>
+          <span>年龄 : </span>
+          <input type="text" />
+        </li>
+        <li className={`${style.time} ${style.pubLi}`}>
+          <span>送检时间 : </span>
+          <div className={style.timeIpts}>
+            <input className={style.ipt} type="text" placeholder="起始时间"/>~<input className={style.ipt} type="text" placeholder="终止时间"/>
+          </div>
+          <Calendar top={40} timeSure={this.timeSure} needTime={true} isShow={true} handleChange={this.handleChangeDate.bind(this)}></Calendar>
+        </li>
+      </ul>
+      <div className={style.search}>检索</div>
+    </div>
+  }
+}
+
+export default Item;

src/components/WrapModalBody/WrapModalTable/index.jsx

@@ -0,0 +1,16 @@
+import React from "react";
+import style from "../index.less";
+
+class WrapModalTable extends React.Component {
+  constructor(props) {
+    super(props)
+  }
+  render() {
+    const { list,message } = this.props;
+    return <div className={style['modalTable']}>
+      table
+    </div>
+  }
+}
+
+export default WrapModalTable;

src/components/WrapModalBody/WrapModalTitle/index.jsx

@@ -0,0 +1,17 @@
+import React from "react";
+import style from "../index.less";
+import Item from "../Item";
+
+class WrapModalTitle extends React.Component {
+  constructor(props) {
+    super(props)
+  }
+  render() {
+    const { list,message } = this.props;
+    return <div className={style['modalTop']}>
+      <Item></Item>
+    </div>
+  }
+}
+
+export default WrapModalTitle;

src/components/WrapModalBody/index.jsx

@@ -0,0 +1,24 @@
+import React from "react";
+import style from "./index.less";
+import WrapModalTitle from "./WrapModalTitle";
+import WrapModalTable from "./WrapModalTable";
+
+class WrapModalBody extends React.Component {
+  constructor(props) {
+    super(props)
+  }
+  render() {
+    const { list,message } = this.props;
+    return <div className={style['container']}>
+      <div className={`${style.left}`}>
+        <WrapModalTitle></WrapModalTitle>
+        <WrapModalTable></WrapModalTable>
+      </div>
+      <div className={`${style.right}`}>
+        sdsd
+      </div>
+    </div>
+  }
+}
+
+export default WrapModalBody;

src/components/WrapModalBody/index.less

@@ -0,0 +1,93 @@
+@import "~@less/mixin.less";
+
+.container {
+  height: 100%;
+  background-color: @ipt-wrap-color;
+  position: relative;
+  .left {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 761px;
+    height: 100%;
+    border-right: 1px solid #D8D8D8;
+  }
+  .right {
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 238px;
+    height: 100%;
+  }
+  .modalTop {
+    height: 46px;
+    line-height: 46px;
+    background-color: @ipt-bg-color;
+    padding: 0 20px;
+  }
+  .items {
+    .search {
+      font-size: 12px;
+      float: right;
+      height: 26px;
+      line-height: 24px;
+      border: 1px solid #9C9C9C;
+      border-radius: 4px;
+      padding: 0 11px;
+      margin-top: 10px;
+      cursor: pointer;
+    }
+    .search:hover {
+      background-color: @blue;
+      border: 1px solid @blue;
+      color: #fff;
+    }
+    .pubLi {
+      float: left;
+      margin-right: 5px;
+      position: relative;
+      span {
+        font-size: 12px;
+      }
+      input {
+        font-size: 12px;
+        height: 26px;
+        line-height: 26px;
+        padding: 0 3px;
+        box-sizing: border-box;
+      }
+    }
+    .code{
+      input {
+        width: 74px;
+      }
+    }
+    .name {
+      input {
+        width: 42px;
+      }
+    }
+    .sex {
+      input {
+        width: 28px;
+      }
+    }
+    .age {
+      input {
+        width: 28px;
+      }
+    }
+    .time {
+      .timeIpts{
+        height: 26px;
+        line-height: 26px;
+        display: inline-block;
+        background-color: #fff;
+      }
+      input.ipt {
+        width: 122px;
+        text-align: center;
+      }
+    }
+  }
+}

src/store/reducers/tabTemplate.js

@@ -70,7 +70,6 @@ export default (state = initDataList, action) => {
   if (action.type === CHANGE_TITLE) {
     const newState = Object.assign({}, state);
     let tempArr = newState.items;
-    console.log(action)
     for (let i = 0; i < tempArr.length; i++) {
       if (tempArr[i].id == action.obj.id) {
         tempArr[i].name = action.obj.title
@@ -90,6 +89,7 @@ export default (state = initDataList, action) => {
       tempArr.splice(tempArr.findIndex(item => item === action.id), 1)
       newState.checkItems = [...tempArr]
     }
+    console.log(newState.checkItems)
     return newState;
   }
   if (action.type === KEEP_PUSH_DATA) {