完成后效果
http://null_688_6639.gitee.io/his/#/docHome
image.png
image.png
框架
doc/Index
<template>
<div>
<el-row>
<el-col :span="8">
<div class="grid-content bg-purple">
<!--左侧显示挂号信息（当日未诊和已诊患者） -->
<patient></patient>
</div>
</el-col>
<el-col :span="16">
<div class="grid-content bg-purple-light">
<!--右侧显示病历首页（必选）、检查申请（可选）、检验申请（可选） -->
<medical></medical>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
import patient from '@/components/doc/Patient'
import medical from '@/components/doc/MedicalRecord'
export default{
data(){
return {
}
},
components:{
patient,medical
}
}
</script>
<style>
</style>
doc/Patient
<template>
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>卡片名称</span>
<el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
</div>
<div >
111111
</div>
</el-card>
</template>
<script>
</script>
<style>
.text {
font-size: 14px;
}
.item {
margin-bottom: 18px;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both
}
/* .box-card {
width: 480px;
} */
</style>
doc/MedicalRecord
<template>
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>卡片名称</span>
<el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
</div>
<div >
111111
</div>
</el-card>
</template>
<script>
</script>
<style>
.text {
font-size: 14px;
}
.item {
margin-bottom: 18px;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both
}
/* .box-card {
width: 600px;
} */
</style>
通过父子组件交互技术，将左侧组件数据传到右侧
index.vue
<template>
<div>
<el-row>
<el-col :span="8">
<div class="grid-content bg-purple">
<!--左侧显示挂号信息（当日未诊和已诊患者） -->
<patient @getPatient="readPatient"></patient>
</div>
</el-col>
<el-col :span="16">
<div class="grid-content bg-purple-light">
<!--右侧显示病历首页（必选）、检查申请（可选）、检验申请（可选） -->
<medical :patient="patient" ></medical>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
import patient from '@/components/doc/Patient'
import medical from '@/components/doc/MedicalRecord'
export default{
data(){
return {
//定义一个对象来临时存储用户选中的那条挂号信息详细
patient:{
id:'',//挂号id
caseNumber:'',//病历号
realName:'',//患者姓名
constantName:''//性别
}
}
},
components:{
patient,medical
},
methods:{
readPatient(row){
//console.log("当前行的数据：",row);
//把这行数据的数据赋到患者对象
this.patient=row;
}
}
}
</script>
<style>
</style>
Patient.vue
<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="70px">
<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="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="120">
</el-table-column>
<el-table-column
property="realName"
label="姓名"
width="70">
</el-table-column>
<el-table-column
property="constantName"
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="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="120">
</el-table-column>
<el-table-column
property="realName"
label="姓名"
width="70">
</el-table-column>
<el-table-column
property="constantName"
label="性别">
</el-table-column>
</el-table>
</el-row>
</el-card>
</template>
<script>
export default {
data() {
return {
form: {
realName: ''
},
tableData: [],
tableData1:[],
currentRow: null
}
},
methods:{
getPatient(){
alert("开始搜索");
},
handleCurrentChange(val) {
this.currentRow = val;
console.log("选中的行：",this.currentRow);
//this.$emit("eventName",params....)
this.$emit("getPatient",this.currentRow);
}
},
mounted() {
//页面加载时显示未诊患者
this.$axios.get("http://localhost:8080/reg/findRegisterByParams?visitState=1&userId=1¤tDate=2021-01-14&noon=上午")
.then(response=>{
this.tableData=response.data;
})
//页面加载时显示已诊患者
this.$axios.get("http://localhost:8080/reg/findRegisterByParams?visitState=2&userId=1¤tDate=2021-01-14&noon=上午")
.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>
MedicalRecorde.vue
<template>
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>患者信息：姓名：{{patient.realName}}性别{{patient.constantName}}</span>
<el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
</div>
<div >
<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
<el-tab-pane label="病历首页" name="one">病历首页<br>
挂号id:{{patient.id}}<br>
病历号：{{patient.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>
</div>
</el-card>
</template>
<script>
export default{
data(){
return {
activeName: 'one'
}
},
methods:{
handleClick(tab, event) {
//alert("切换到："+tab.name);
console.log("tab:",tab);
console.log(tab, event);
alert(this.patient.caseNumber);
}
},
props:['patient']
}
</script>
<style>
.text {
font-size: 14px;
}
.item {
margin-bottom: 18px;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both
}
/* .box-card {
width: 600px;
} */
</style>
后台
@RequestMapping("/findRegisterByParams")
public List<Map<String,Object>> findRegisterByParams(int visitState,int userId,String currentDate,String noon){
Map map=new HashMap();
map.put("visitState", visitState);
map.put("userId", userId);
map.put("currentDate", currentDate);
map.put("noon", noon);
List<Map<String,Object>> res = service.findRegisterByParams(map);
return res;
}
@Select(" SELECT a.*,b.constantName "+
" from register a,constantitem b,constanttype c "+
" where a.gender=b.id and b.constantTypeID=c.id "+
" and c.constantTypeName='性别类型' "+
" and userId=#{userId} "+
" and visitDate=#{currentDate} "+
" and noon=#{noon} "+
" and visitState=#{visitState}")
List<Map<String, Object>> findRegisterByParams(Map map);
此时效果图
image.png
病历存库
学生完成
全局导航守卫实现登录拦截
详见：
https://www.jianshu.com/p/214f3dd90812
左侧菜单权限控制
<template>
<el-menu
class="el-menu-vertical-demo"
background-color="#D3DCE6"
active-text-color="#ffd04b"
@open="handleOpen"
@close="handleClose"
:default-active="$router.path"
router
>
<el-submenu index="1" v-if="userType==1||userType==0">
<template slot="title">
<i class="el-icon-setting"></i>
<span>系统管理</span>
</template>
<el-menu-item-group>
<el-menu-item index="/sys/constantTypeAdd">常数项分类管理</el-menu-item>
<el-menu-item index="/sys/constantItemAdd">常数项管理</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-submenu index="2" v-if="userType==2||userType==0">
<template slot="title">
<i class="el-icon-location"></i>
<span>挂号收费</span>
</template>
<el-menu-item-group>
<el-menu-item index="/reg/register">挂号</el-menu-item>
<el-menu-item index="1-2">收费</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-submenu index="3" v-if="userType==3||userType==0">
<template slot="title">
<i class="el-icon-location"></i>
<span>门诊医生</span>
</template>
<el-menu-item-group>
<el-menu-item index="/doc/index">门诊病历</el-menu-item>
<el-menu-item index="1-2">收费</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
</template>
<script>
export default {
data(){
return{
userType:''
}
},
methods: {
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
}
},
mounted() {
//取出sessionStorage里的用户角色
//存储到本地变量里
this.userType=sessionStorage.getItem("useType");
//alert(this.userType);
}
}
</script>
<style>
</style>
