Vue_New/src/xt_pages/outpatientDoctorStation/doctorDesk.vue

<template>
    <div class="main-contain">
        <div class="position">
            <bread-crumb :crumbs='crumbs'></bread-crumb>
        </div>
        <div class="app-container" style="display:flex">
            <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>
                <el-table :data="tableData" border height="500" 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" width="40">
                        <template slot-scope="scope">
                            <el-popover placement="top-start" width="200" trigger="hover">
                                <i slot="reference" class="el-icon-caret-bottom"></i>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="name" label="姓名" width="100">
                        <template slot-scope="scope">{{ scope.row.date }}</template>
                    </el-table-column>
                    <el-table-column align="center" prop="name" label="姓名" width="110">
                        <template slot-scope="scope">{{ scope.row.date }}</template>
                    </el-table-column>
                </el-table>
            </div> 
            <div class="mainRight">
                <div style="display:flex;justify-content: space-between;">
                    <div>
                        <div class="mainCell">
                            <p>姓名：<span class="cellSpan"></span></p>
                            <p>证件号：<span class="cellSpan"></span></p>
                            <p>挂号类型：<span class="cellSpan"></span></p>
                            <p>患者保险类型：<span class="cellSpan"></span></p>
                        </div>
                        <div class="mainCell">
                            <label class="title"><span class="name">诊断</span> : </label>
                            <el-input size="small" style="width:150px;margin:0 10px;" v-model="input" placeholder="请输入内容"></el-input>
                            <label class="title"><span class="name">处方类型</span> : </label>
                            <el-select size="small" v-model="value" placeholder="请选择" style="width:150px;margin-left:10px;">
                                <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                    <div class="cost">
                        <p>当用费用总额：</p>
                        <p>药品费用总额：</p>
                    </div>
                </div>
                <div style="display:flex;justify-content: space-between;">
                    <div class="mainCell" style="margin-bottom:10px;">
                        <label class="title"><span class="name">新增</span> : </label>
                        <el-button size="small" @click="open(1)" type="primary" style="margin-left:10px;">智慧医保</el-button>
                        <el-button size="small" @click="open(2)" type="primary">病历</el-button>
                        <el-button size="small" @click="open(3)" type="primary">新医嘱</el-button>
                        <el-button size="small" @click="open(4)" type="primary">选择模板</el-button>
                        <el-button size="small" @click="open(5)" type="primary">存模板</el-button>
                        <el-button size="small" @click="open(6)" type="primary">开检验</el-button>
                    </div>
                    <div><el-button size="small" type="primary">保存打印</el-button></div>
                </div>
                <el-table :data="tableData" border height="500" 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="名称">
                        <template slot-scope="scope">{{ scope.row.date }}</template>
                    </el-table-column>
                    <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="数量">
                        <template slot-scope="scope">{{ scope.row.date }}</template>
                    </el-table-column>
                    <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="操作">
                        <template slot-scope="scope">
                            <el-button size="mini" type="danger">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <prescription ref='prescription'></prescription>
        <medicalRecord ref='medicalRecord'></medicalRecord>
        <advice ref='advice'></advice>
        <select-template ref='selectTemplate'></select-template>
        <save-template ref='saveTemplate'></save-template>
        <inspection ref='inspection'></inspection>
    </div>
</template>

<script>
import BreadCrumb from '@/xt_pages/components/bread-crumb'
import prescription from './components/prescription'
import medicalRecord from './components/medicalRecord'
import advice from './components/advice'
import selectTemplate from './components/selectTemplate'
import saveTemplate from './components/saveTemplate'
import inspection from './components/inspection'
export default {
    components:{
        BreadCrumb,
        prescription,
        medicalRecord,
        advice,
        selectTemplate,
        saveTemplate,
        inspection
    },
    data(){
        return{
            crumbs: [
                { path: false, name: '门诊医生站' },
                { path: false, name: '医生工作台' }
            ],
            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 弄'
            }]
        }
    },
    methods:{
        open(index){
            if(index == 1){
                this.$refs.prescription.show()
            }else if(index == 2){
                this.$refs.medicalRecord.show()
            }else if(index == 3){
                this.$refs.advice.show()
            }else if(index == 4){
                this.$refs.selectTemplate.show()
            }else if(index == 5){
                this.$refs.saveTemplate.show()
            }else if(index == 6){
                this.$refs.inspection.show()
            }
            
        }
    }
}
</script>

<style lang="scss" scoped>
.mainCell{
    height:36px;
    display: flex;
    align-items: center;
}
.mainLeft{
    width:250px;
    .el-radio{
        margin-right:20px;
    }
    
}
.mainRight{
    margin-left:20px;
    flex:1;
    .cellSpan{
        min-width: 80px;
        display: inline-block;
        margin-right: 10px;
    }
    .cost{
        border: 1px solid #ccc;
        height: 60px;
        display: flex;
        width: 200px;
        flex-direction: column;
        justify-content: space-around;
        padding: 0 10px;
    }
}
</style>