模板样式

src/components/Operation/index.jsx

@@ -368,7 +368,7 @@ class Operation extends Component {
         close={() => { this.closeDiagBox()}}
         cancel={() => {this.closeDiagBox()}}
         okText={this.state.okText}
-        height={type==3?370:200}
+        height={type==3?275:200}
         width={type==3?545:300}
         okBorderColor={this.state.borderColor}
         okColor={this.state.okColor}

src/components/PushContainer/index.jsx

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import style from './index.less';
 import { Tab, ConfirmModal, Notify } from '@commonComp';
-import { tabChange, allChecked, changeVisible, keepPushData, allCheckedShow,allCheckedAdmin,allCheckedShowAdmin } from '@store/actions/tabTemplate';
+import { tabChange, allChecked, changeVisible, keepPushData, allCheckedShow,allCheckedAdmin,allCheckedShowAdmin,whichTemp } from '@store/actions/tabTemplate';
 import { initItemList, delItem,delItemAdmin, delBatchItem, delBatchItemAdmin,changeTitleAsync, setPageView,changeTitleAsyncAdmin,setPageViewAdmin } from '@store/async-actions/tabTemplate';
 import { connect } from "react-redux";
 import store from '@store';
@@ -59,6 +59,7 @@ class PushContainer extends Component {
     this.makeSure = this.makeSure.bind(this)
     this.handleClose = this.handleClose.bind(this);
     this.templateSearch = this.templateSearch.bind(this);
+    this.whichTemp = this.whichTemp.bind(this);
   }
   componentDidMount() {
     // const height = getWindowInnerHeight()-160;
@@ -278,8 +279,11 @@ class PushContainer extends Component {
   handleClose() {
     store.dispatch(changeVisible(false));
   }
+  whichTemp(tab){
+    store.dispatch(whichTemp(tab))
+  }
   render() {
-    const { activeId, checkItems, visible, showMsg,hasMore,current, items, allCheckShow,allCheckShowAdmin,adminItems,admin,checkItemsAdmin,clearSearch } = this.props;
+    const { activeId, checkItems,selectTemp, visible, showMsg,hasMore,current, items, allCheckShow,allCheckShowAdmin,adminItems,admin,checkItemsAdmin,clearSearch } = this.props;
     return <div className={style["container"]} ref={this.$cont} >
       <Tab tabs={this.state.tabs}
         activeId={activeId}
@@ -309,6 +313,8 @@ class PushContainer extends Component {
             handleAllCheckbox={this.handleAllCheckbox}
             handleClickGetMore={this.handleClickGetMore}
             templateSearch={this.templateSearch}
+            whichTemp={this.whichTemp}
+            selectTemp={selectTemp}
           ></TemplateItems>
           <MedicalInfoContainer></MedicalInfoContainer>
         </TemplateContainer>
@@ -348,6 +354,8 @@ const mapStateToProps = (state) => {//console.log(state)
     allCheckShowAdmin: state.tabTemplate.allCheckShowAdmin,
     checkItemsAdmin: state.tabTemplate.checkItemsAdmin,
     clearSearch:state.print.clearSearch,
+    
+    selectTemp:state.tabTemplate.selectTemp,
   }
 }
 

src/components/TemplateItems/TemplateItem/index.less

@@ -48,9 +48,11 @@
         float: left;
     }
     .check-box {
-        height: 18px;
-        width: 18px;
+        height: 14px;
+        width: 14px;
         margin-top: 14px;
+        position: relative;
+        top: 1px;
     }
     .title{
       display: inline-block;

src/components/TemplateItems/index.jsx

@@ -5,17 +5,21 @@ import TemplateItem from './TemplateItem'
 import check_circle from './TemplateItem/img/check-circle.png';
 import delIcon from '@common/images/del_nor.png';
 import check_right from './TemplateItem/img/check-right.png';
+import tempTip from './TemplateItem/img/tempTip.png';
+import tempTrd from './TemplateItem/img/tempTrd.png';
+import tmpAllCircle from './TemplateItem/img/tmpAllCircle.png';
+import tmpAllRight from './TemplateItem/img/tmpAllRight.png';
 import Empty from '@components/Empty';
 import {windowEventHandler,getWindowInnerHeight} from '@utils/tools'
 
-
 class TemplateItems extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
             msg:'还没有保存模板',
             val:'',
-            height:''
+            height:'',
+            showTipContent:false
         }
         this.$cont = React.createRef();
         this.$conts = React.createRef();
@@ -25,6 +29,7 @@ class TemplateItems extends React.Component {
         this.handleEnter = this.handleEnter.bind(this);
         this.handleChange = this.handleChange.bind(this);
         this.clear = this.clear.bind(this);
+        this.showTipContent = this.showTipContent.bind(this);
     }  
     componentDidMount(){
         const height = getWindowInnerHeight()-195;
@@ -40,6 +45,12 @@ class TemplateItems extends React.Component {
             }
         });
     }
+    showTipContent(){
+        let show = this.state.showTipContent
+        this.setState({
+            showTipContent:!show
+        })
+    }
     genItems(items,flg) {
         const Items = [];
         const {admin,adminItems,checkItemsAdmin} = this.props;
@@ -74,9 +85,9 @@ class TemplateItems extends React.Component {
             }
         }
         if (items.length == checkItems.length && checkItems.length != 0) {
-            return check_right;
+            return tmpAllRight;
         } else {
-            return check_circle;
+            return tmpAllCircle;
         }
     }
     templateSearch(){
@@ -117,18 +128,21 @@ class TemplateItems extends React.Component {
         this.$search.current.focus();
         this.templateSearch();
     }
-  componentWillReceiveProps(next){
+    clickTabChange(){
+
+    }
+    componentWillReceiveProps(next){
         //点清空恢复初始状态
       if(this.props.clearSearch!==next.clearSearch){
         this.clear();
       }
     }
     render() {
-        const { checkItemsAdmin,handleAllCheckboxAdmin,handleMangerTemplateAdmin,allCheckShowAdmin,admin,adminItems,allCheckShow, handleMangerTemplate,handleClickGetMore, handleDelList, handleAllCheckbox, items,checkItems,current,hasMore } = this.props;
-        const {height} = this.state
+        const {selectTemp,whichTemp, checkItemsAdmin,handleAllCheckboxAdmin,handleMangerTemplateAdmin,allCheckShowAdmin,admin,adminItems,allCheckShow, handleMangerTemplate,handleClickGetMore, handleDelList, handleAllCheckbox, items,checkItems,current,hasMore } = this.props;
+        const {height,showTipContent} = this.state
         return (
             <div className={style.wrapper} >
-                {//管理员操作
+                {//管理员操作      
                     adminItems&&admin ? (allCheckShowAdmin ?
                         <div className={style.wrapperTop}>
                             <div className={style['check-wrap']} onClick={handleAllCheckboxAdmin} style={{paddingLeft:'10px'}}>
@@ -166,7 +180,7 @@ class TemplateItems extends React.Component {
                     <div className={style.comAdminWrp}>
                         <div className={`${style.tempLists} ${style.tempListsP}`} ref={this.$cont} style={{display:admin?'none':'block',border:'1px solid #EAEDF1'}}>
                             {//个人
-                                allCheckShow&&!admin ?<div className={`${style.wrapperTop} ${style.wrapperTopM} ${style.personalTmp}`}>
+                                allCheckShow ?<div className={`${style.wrapperTop} ${style.wrapperTopM} ${style.personalTmp} ${selectTemp==1?style.personalTmpOwn:null}`} onClick={()=>whichTemp(1)}>
                                     <i></i>
                                     <i></i>
                                     <div className={style['check-wrap']} onClick={handleAllCheckbox}>
@@ -174,37 +188,55 @@ class TemplateItems extends React.Component {
                                     </div>
                                     <span onClick={handleAllCheckbox}>全选</span>
                                     <span className={`${style['fr-element']} ${style['done']}`} onClick={handleMangerTemplate}>完成</span>
-                                    {
+                                    {checkItems.length>0&&<span className={`${style['fr-element']} ${style['del-items']}`} onClick={handleDelList}>删除</span>}
+                                    {/* {
                                         checkItems.length>0?<span className={`${style['fr-element']} ${style['del-items']}`} onClick={handleDelList}>删除</span>:
                                         <span className={`${style['fr-element']} ${style['del-items-gray']}`}>删除</span>
-                                    }
+                                    } */}
                                 </div>:null
                             }
                             {
-                                !allCheckShow&&<div className={`${style.personalTmp} clearfix`}>
-                                    <span className={style.tip}>个人模板</span>
-                                    <i></i>
+                                <div className={`${style.topBorder} clearfix`}>
                                     {
-                                        items.length > 0&&<span className={`${style['fr-element']} ${style['manger']}`} onClick={handleMangerTemplate}>管理</span>
+                                        !allCheckShow&&<div className={`${style.personalTmp} ${selectTemp==1?style.personalTmpOwn:''} clearfix`} onClick={()=>whichTemp(1)}>
+                                            <span className={style.tip}>个人模板</span>
+                                            <i></i>
+                                            {
+                                                items.length > 0&&<span className={`${style['fr-element']} ${style['manger']}`} onClick={handleMangerTemplate}>管理</span>
+                                            }
+                                        </div>
+                                    }
+                                    {
+                                        !admin?!allCheckShowAdmin&&<div 
+                                            className={`${style.personalTmp} ${style.personalTmpStatand} ${selectTemp==2?style.personalTmpOwn:''}`} 
+                                            onClick={()=>{whichTemp(2);allCheckShow&&handleMangerTemplate()}}
+                                            >标准模板 {selectTemp==2&&<img src={tempTip} className={style.tempTip} alt="" onMouseEnter={this.showTipContent} onMouseLeave={this.showTipContent}/>}
+                                            {
+                                                showTipContent&&<div className={style.tempTipContent}>
+                                                    <img src={tempTrd} alt=""/>
+                                                    <p>1. 标准模版中的科室，对应的是经朗通医疗团队整理的，符合临床医学意义的科室。</p>
+                                                    <p>2.只有特定的“管理员”账号，可对“标准模板”进行修改，普通账号仅可进行“引用”；</p>
+                                                </div>  
+                                            }  
+                                        </div>:''
                                     }
                                 </div>
                             }
                             {
-                                <div style={{height:height/2-42+'px',overflow:'auto'}}>
-                                    {this.genItems(items).length > 0?this.genItems(items): <Empty message={this.state.msg}></Empty>}
+                                <div style={{height:height-52+'px',overflow:'auto'}}>
+                                    {
+                                        selectTemp==1&&this.genItems(items).length > 0?this.genItems(items):selectTemp==2&&this.genItems(adminItems,true).length > 0?this.genItems(adminItems,true): <Empty message={this.state.msg}></Empty>
+                                    }
                                 </div>
                             }
                         </div>
-                        <div className={style.tempLists} ref={this.$conts} style={{border:admin?'0':'1px solid #EAEDF1'}}>
-                            {
-                                !admin?!allCheckShowAdmin&&<div className={`${style.personalTmp}`}>标准模板</div>:''
-                            }
-                            {
-                                <div style={{height:admin?height+'px':(height-20)/2-42+'px',overflow:'auto'}}>
+                        {
+                            admin&&<div className={style.tempLists} ref={this.$conts} style={{border:admin?'0':'1px solid #EAEDF1'}}>
+                                <div style={{height:height+'px',overflow:'auto'}}>
                                     {this.genItems(adminItems,true).length > 0?this.genItems(adminItems,true): <Empty message={this.state.msg}></Empty>}
                                 </div>
-                            }
-                        </div>
+                            </div>
+                        }
                     </div>
                 }
                 {/* <div className={style.tempLists} ref={this.$cont}>

src/components/TemplateItems/index.less

@@ -56,6 +56,12 @@
         .del-items {
             margin-right: 20px;
             color: #FF0000;
+            border: 1px solid #fff;
+            height: 22px;
+            line-height: 20px;
+            border-radius: 11px;
+            padding: 0 5px;
+            margin-top: 8px;
         }
         .del-items-gray {
             margin-right: 20px;
@@ -69,7 +75,16 @@
         }
     }
     .wrapperTopM {
-        padding: 0 10px;
+        padding: 0 11px;
+        position: relative;
+        top: 1px;
+        padding-top: 1px;
+        .check-box {
+            width: 14px;
+            height: 14px;
+            position: relative;
+            top: 1px;
+        }
     }
     .loadMore {
       text-align: center;
@@ -120,18 +135,21 @@
 
 .fr-element {
     // float: right;
-    color: #3B9ED0;
+    color: #777777;
     display: inline-block;
     height: 36px;
     line-height: 36px;
 }
 .personalTmp {
-    width: 100%;
+    width: 50%;
+    float: left;
     height: 40px !important;
     line-height: 40px !important;
-    background-color: #EDF8FF;
+    // background-color: #EDF8FF;
     padding: 0 10px;
     box-sizing: border-box;
+    cursor: pointer;
+    color: #777777;
     .tip {
 
     }
@@ -139,3 +157,42 @@
         float: right;
     }
 }
+.personalTmpOwn {
+    background-color: #2A9BD5;
+    color: #fff;
+    .fr-element,.done {
+        color: #fff !important;
+    }
+}
+.tempTip {
+    width: 14px;
+    height: 14px;
+    position: relative;
+    top: 2px;
+}
+.personalTmpStatand {
+    position: relative;
+    .tempTipContent {
+        position: absolute;
+        left: -61px;
+        top: 40px;
+        width: 270px;
+        padding: 15px;
+        z-index: 100;
+        background-color: #fff;
+        color: #1E1E1E;
+        font-size: 12px;
+        line-height: 16px;
+        box-shadow:0px 2px 20px -3px rgba(59,89,126,0.2);
+        img {
+            width: 16px;
+            height: 14px;
+            position: absolute;
+            top: -10px;
+            left: 113px;
+        }
+    }
+}
+.topBorder {
+    border: 1px solid #3B9ED0;
+}

src/store/actions/tabTemplate.js

@@ -17,9 +17,14 @@ import {
     CKECK_ITEMS_ADMIN,
     DEL_ITEMS_ADMIN,
     BATCH_DEL_ITEMS_ADMIN,
-    CHANGE_TITLE_ADMIN
+    CHANGE_TITLE_ADMIN,
+    WHICH_TEMP
 } from '@store/types/tabTemplate';
 
+export const whichTemp = (tab) => ({ //模板tab切换
+    type: WHICH_TEMP,
+    tab
+});
 export const delItems = (id) => ({ //删除模板
     type: DEL_ITEMS,
     id

src/store/reducers/tabTemplate.js

@@ -18,6 +18,7 @@ import {
   DEL_ITEMS_ADMIN,
   BATCH_DEL_ITEMS_ADMIN,
   CHANGE_TITLE_ADMIN,
+  WHICH_TEMP
 } from '../types/tabTemplate';
 
 
@@ -42,8 +43,15 @@ const initDataList = {
   current:1,//当前页
   hasMore:true,//是否显示更多
   departLis:[],//搜索的科室列表
+  selectTemp:1,//默认1个人模板2标准模板
 }
 export default (state = initDataList, action) => {
+  if (action.type === WHICH_TEMP) {//模板tab切换
+    const newState = Object.assign({}, state);
+    console.log(action)
+    newState.selectTemp = action.tab;
+    return newState;
+  }
   if (action.type === GET_DPT_LIS) {
     const newState = Object.assign({}, state);
     newState.departLis = action.list;

src/store/types/tabTemplate.js

@@ -17,3 +17,4 @@ export const CKECK_ITEMS_ADMIN = 'CKECK_ITEMS_ADMIN';
 export const DEL_ITEMS_ADMIN = 'DEL_ITEMS_ADMIN';
 export const BATCH_DEL_ITEMS_ADMIN = 'BATCH_DEL_ITEMS_ADMIN';
 export const CHANGE_TITLE_ADMIN = 'CHANGE_TITLE_ADMIN';
+export const WHICH_TEMP = 'WHICH_TEMP';

src/utils/config.js

@@ -1,8 +1,8 @@
 // const host='http://192.168.3.1:5050';//赵
 // const host='http://192.168.3.100:5050';//王峰
 // const host='http://192.168.2.121:5050';//后端接口访问地址
-// const host='http://192.168.2.236:5050';//后端接口访问地址
-const host='http://192.168.2.241:5050';//后端接口访问地址
+const host='http://192.168.2.236:5050';//后端接口访问地址
+// const host='http://192.168.2.241:5050';//后端接口访问地址
 // const host='http://192.168.3.11:5050';//王宇
 //const host='http://192.168.2.164:8080';
 // const host='http://192.168.3.117:5050'; //周铁刚

src/utils/tools.js

@@ -234,7 +234,7 @@ const pushAllDataList =(whichSign,action,reData,type) =>{           //回读清
       });
       store.dispatch({
           type: SET,
-          isEmpty:false,
+          isEmpty:reData.checkBody?false:true,
           data:reData.checkBody,
           isText:true,    //查体只显示文本
       });