前置准备
修改components/index.vue
注释掉： line-height: 160px;
.el-main {
height: 100%;
background-color: #E9EEF3;
color: #333;
text-align: center;
/* line-height: 160px; */
}
医生病历首页
1、路由 ：
{
path: '/MedicalRecordIndex',
name: 'MedicalRecordIndex',
component: DocIndex
}
2、doc/index.vue
<template>
<el-card class="box-card">
<el-row>
<!--左侧 患者信息-->
<el-col :span="8">
<patient @getPatient="getPatient"></patient>
</el-col>
<!--右侧 病历信息 -->
<el-col :span="16">
<el-card class="box-card-child">
<!--头-->
<div slot="header" class="clearfix">
<span style="float: left;font-size: 12px;">隐藏患者栏</span>
<span style="float: left;font-size: 12px;"> </span>
<strong>患者姓名：</strong><span>{{this.patient.realName}}</span>
<strong>病历号:</strong><span> {{this.patient.caseNumber}}</span>
<strong> 性别： </strong><span>{{this.patient.gender}}</span>
<el-button style="float: right; padding: 3px 0;font-size: 12px;" type="text">诊毕</el-button>
</div>
<!--体 registerId是挂号的编号，对应register表的主键-->
<medicalRecord :registerId="registerId" :caseNumber="caseNumber"></medicalRecord>
</el-card>
</el-col>
</el-row>
</el-card>
</template>
<style>
.clearfix {
font-size: 12px;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both
}
.box-card {
width: 100%;
}
html,
body {
margin: 0;
padding: 0;
}
#app {
margin: 0;
}
</style>
<script>
import patient from '@/components/doc/patient'
import medicalRecord from '@/components/doc/medicalRecord'
export default {
data() {
return {
patient: {
id: '', //挂号主键
realName: '', //挂号人的姓名
gender: '', //性别
caseNumber: '' //病历号
},
registerId:'',
caseNumber:''
}
},
components: {
patient,
medicalRecord
},
methods: {
getPatient(data) {
this.patient = data;
this.registerId=data.id;
this.caseNumber=data.caseNumber;
}
}
}
</script>
<style>
</style>
3、左侧
<template>
<el-card class="box-card-child">
<div slot="header" class="clearfix">
<span style="float: left;font-size: 10px;">患者选择</span>
<el-button style="float: right; padding: 3px 0;font-size: 10px;" type="text">刷新</el-button>
</div>
<el-form ref="form" label-width="60px">
<el-row>
<el-col :span="16">
<el-form-item prop="realName" label="患者名">
<el-input v-model="form.realName" size="mini" ></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="small" @click="getPatient"></el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
<el-row>
<el-col :span="24" style="align:left;" ><el-tag size="medium">已诊患者</el-tag></el-col>
<el-table
ref="singleTable"
:data="tableData1"
highlight-current-row
@current-change="handleCurrentChange"
style="width: 100%">
<el-table-column
type="index"
width="30">
</el-table-column>
<el-table-column
property="caseNumber"
label="病历号"
width="70">
</el-table-column>
<el-table-column
property="realName"
label="姓名"
width="70">
</el-table-column>
<el-table-column
property="gender"
label="性别">
</el-table-column>
</el-table>
</el-row>
<el-row>
<el-col :span="24" style="align:left;" ><el-tag>未诊患者</el-tag></el-col>
<el-table
ref="singleTable"
:data="tableData"
highlight-current-row
@current-change="handleCurrentChange"
style="width: 100%">
<el-table-column
type="index"
width="30">
</el-table-column>
<el-table-column
property="caseNumber"
label="病历号"
width="70">
</el-table-column>
<el-table-column
property="realName"
label="姓名"
width="70">
</el-table-column>
<el-table-column
property="gender"
label="性别">
</el-table-column>
</el-table>
</el-row>
</el-card>
</template>
<script>
export default {
data() {
return {
form: {
realName: ''
},
tableData: [],
currentRow: null
}
},
methods:{
getPatient(){
alert("开始搜索");
},
handleCurrentChange(val) {
this.currentRow = val;
console.log("选中的行：",this.currentRow);
this.$emit("getPatient",this.currentRow);
}
},
mounted() {
//页面加载时显示未诊患者
this.$axios.get("http://localhost:8080/register/findRegisterByParams?visitState=1")
.then(response=>{
this.tableData=response.data;
})
//页面加载时显示已诊患者
this.$axios.get("http://localhost:8080/register/findRegisterByParams?visitState=2")
.then(response=>{
this.tableData1=response.data;
})
}
}
</script>
<style>
.text {
font-size: 12px;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both
}
.box-card-child {
width: 100%;
}
</style>
4、doc/medicalRecord.vue 右侧
<template>
<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
<el-tab-pane label="病历首页" name="one">病历首页{{registerId}}{{caseNumber}}</el-tab-pane>
<el-tab-pane label="检查申请" name="two">检查申请</el-tab-pane>
<el-tab-pane label="检验申请" name="three">检验申请</el-tab-pane>
<el-tab-pane label="处置申请" name="foure">处置申请</el-tab-pane>
<el-tab-pane label="门诊确诊" name="five">门诊确诊</el-tab-pane>
<el-tab-pane label="成药处方" name="six">成药处方</el-tab-pane>
<el-tab-pane label="草药处方" name="seven">草药处方</el-tab-pane>
<el-tab-pane label="费用查询" name="eight">费用查询</el-tab-pane>
</el-tabs>
</template>
<script>
export default{
data(){
return {
activeName: 'one'
}
},
props:['registerId',"caseNumber"],
methods:{
handleClick(tab, event) {
//alert("切换到："+tab.name);
console.log("tab:",tab);
console.log(tab, event);
}
}
}
</script>
<style>
</style>
网友评论