elizebeth/src/xt_pages/outpatientDoctorStation/doctorDesk.vue

<template>
    <div class="main-contain new-main-contain">
        <div class="position">
            <bread-crumb :crumbs='crumbs'></bread-crumb>
        </div>
        <div class="app-container" style="display:flex;flex: 1;padding: 20px 20px 0px 20px;">
            <div class="mainLeft">
                <div class="mainCell" style="justify-content: space-between;">
                    <p>未就诊：<span>0</span>人</p>
                    <p>已就诊：<span>0</span>人</p>
                </div>
                <div class="mainCell">
                    <el-radio-group v-model="radio">
                        <el-radio :label="1">未就诊</el-radio>
                        <el-radio :label="2">已就诊</el-radio>
                        <el-radio :label="3">全部</el-radio>
                    </el-radio-group>
                </div>
                <div class="mainCell" style="margin-bottom:10px;">
                    <el-input size="small" @keyup.enter.native='searchAction' v-model.trim="search_input" class="filter-item"/>
                    <el-button size="small" style="margin-left:10px;" class="filter-item" type="primary" @click="searchAction">搜索</el-button>
                </div>
                <div style="flex:1;overflow-y:auto;">
                    <el-table :data="tableData" border style="width: 100%;" :row-style="{ color: '#303133' }" :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}" highlight-current-row>
                        <el-table-column align="center" prop="name" label="患者姓名">
                            <template slot-scope="scope">{{ scope.row.date }}</template>
                        </el-table-column>
                        <el-table-column align="center" prop="name" label="就诊号" width="90">
                            <template slot-scope="scope">{{ scope.row.date }}</template>
                        </el-table-column>
                    </el-table>
                </div>
            </div> 
            <div class="mainRight">
                <div class="mainHeader">
                    <el-radio-group v-model="titleType">
                        <el-radio-button label="处方"></el-radio-button>
                        <el-radio-button label="病历"></el-radio-button>
                    </el-radio-group>
                </div>
                <desk-prescription v-if="titleType == '处方'" style="flex:1;"></desk-prescription>
                <desk-record v-if="titleType == '病历'"></desk-record>
            </div>
            
        </div>
    </div>
</template>

<script>
import BreadCrumb from '@/xt_pages/components/bread-crumb'
import deskPrescription from './components/deskPrescription'
import deskRecord from './components/deskRecord'
export default {
    components:{
        BreadCrumb,
        deskPrescription,
        deskRecord
    },
    data(){
        return{
            crumbs: [
                { path: false, name: '门诊医生站' },
                { path: false, name: '医生工作台' }
            ],
            titleType:'处方',
            tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
            }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
            }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
            }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
            },{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
            }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
            }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
            }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
            },{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
            }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
            }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
            }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
            }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
            }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
            }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
            }],
            
        }
    },
    methods:{
        
    }
}
</script>

<style lang="scss" scoped>
.new-main-contain{
    height: 100%;
    display: flex;
    flex-direction: column;
}
.app-container{
    height:100%;
}
.mainCell{
    height:36px;
    display: flex;
    align-items: center;
}
.mainLeft{
    width:200px;
    height: 100%;
    display: flex;
    flex-direction: column;
    .el-radio{
        margin-right:5px;
    }
    
}
.mainRight{
    margin-left:20px;
    flex:1;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    .cellSpan{
        min-width: 80px;
        display: inline-block;
        margin-right: 10px;
    }
}
.mainCenter{
    display: flex;
    flex:1;
}
.centerLeft{
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    .el-form-item{
        width:32%;
        margin-right: 1%;
        float: left;
    }
    .el-form-item__label{
        text-align: left;
    }
}
.backColor{
    background: #f6f8f9;
    height: 5px;
    margin-bottom: 5px;
}
.tabsBox{
    position: relative;
    height: 76%;
    overflow-y: auto;
    margin-bottom: 60px;
    .el-tabs__item{
        padding: 0 10px;
    }
}
.preTabs{
    height:100%;
}
.costBox{
    width:100%;
    height:60px;
    background:#fff;
    position: absolute;
    bottom:0;
    display: flex;
    align-items: center;
}
.addTab{
    position: absolute;
    right: 0;
    top: 14px;
    z-index: 20;
}
.centerRight{
    width: 300px;
    margin-left: 5px;
    display: flex;
    flex-direction: column;
    position: relative;
}
.rightTab{
    height: 40px;
    width: 100%;
    border: 1px solid #d2d2d2;
    box-sizing: border-box;
    
    p{
        width: 50%;
        height: 40px;
        line-height: 40px;
        text-align: center;
        background: #eee;
        float: left;
    }
    >p:last-child{
      border-left: 1px solid #d2d2d2;  
      float: right;
    }
    .activeP{
        background: #409EFF;
        color:#fff;
    }
}
.comfirmBox{
    width:100%;
    height:60px;
    background:#fff;
    position: absolute;
    bottom:0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
</style>

<style lang="scss">
.centerLeft{
    .el-form-item__label{
        text-align: left;
    }
}
.tabsBox{
    .el-tabs__item{
        padding: 0 10px;
    }
    .el-tabs--bottom .el-tabs--left>.el-tabs__header .el-tabs__item:nth-child(2), .el-tabs--bottom .el-tabs--right>.el-tabs__header .el-tabs__item:nth-child(2), .el-tabs--bottom.el-tabs--border-card>.el-tabs__header .el-tabs__item:nth-child(2), .el-tabs--bottom.el-tabs--card>.el-tabs__header .el-tabs__item:nth-child(2), .el-tabs--top .el-tabs--left>.el-tabs__header .el-tabs__item:nth-child(2), .el-tabs--top .el-tabs--right>.el-tabs__header .el-tabs__item:nth-child(2), .el-tabs--top.el-tabs--border-card>.el-tabs__header .el-tabs__item:nth-child(2), .el-tabs--top.el-tabs--card>.el-tabs__header .el-tabs__item:nth-child(2){
        padding: 0 10px;
    }
    .el-tabs--bottom .el-tabs--left>.el-tabs__header .el-tabs__item:last-child, .el-tabs--bottom .el-tabs--right>.el-tabs__header .el-tabs__item:last-child, .el-tabs--bottom.el-tabs--border-card>.el-tabs__header .el-tabs__item:last-child, .el-tabs--bottom.el-tabs--card>.el-tabs__header .el-tabs__item:last-child, .el-tabs--top .el-tabs--left>.el-tabs__header .el-tabs__item:last-child, .el-tabs--top .el-tabs--right>.el-tabs__header .el-tabs__item:last-child, .el-tabs--top.el-tabs--border-card>.el-tabs__header .el-tabs__item:last-child, .el-tabs--top.el-tabs--card>.el-tabs__header .el-tabs__item:last-child{
        padding: 0 10px;
    }
    .el-tabs--card>.el-tabs__header .el-tabs__item.is-active.is-closable{
        padding: 0 10px;
    }
}
.centerRight{
    .el-tabs__nav-scroll{
        display: flex;
    }
    .el-tabs__nav{
        margin: 0 auto;
    }
    .el-table th .cell, .el-table td .cell{
        padding: 0 2px;
    }
}
.preTabs{
    // .el-tabs__content{
    //     height:69%;
    //     overflow-y: auto;
    // }
}
.rightTabs{
    height: 100%;
    // .el-tabs__content{
    //     height:72%;
    //     overflow-y: auto;
    // }
}
</style>