医疗挂号系统完整代码
-
挂号界面
- 我选择的是layout下的混合布局
- components/neuregist/GuaHao.vue
<template>
<div align="left">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-row :gutter="2">
<el-col :span="6">
<!-- <div class="grid-content bg-purple">门诊挂号管理</div> -->
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">挂号</el-button>
<el-button @click="resetForm('ruleForm')">清空</el-button>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="2">
<el-col :span="6">
<div class="grid-content bg-purple">
<el-form-item label="发票号:" prop="invoiceNumber">
<el-input v-model="ruleForm.invoiceNumber" size="mini" align="left" ></el-input>
</el-form-item>
</div>
</el-col>
</el-row>
<el-row :gutter="3">
<el-col :span="6">
<div class="grid-content bg-purple">
<el-form-item label="病历号:" prop="caseNumber">
<el-input v-model="ruleForm.caseNumber" size="mini" align="left" ></el-input>
</el-form-item>
</div>
</el-col>
<el-col :span="6">
<div class="grid-content bg-purple">
<el-form-item label="姓名:" prop="realName">
<el-input v-model="ruleForm.realName" size="mini" align="left"></el-input>
</el-form-item>
</div>
</el-col>
<el-col :span="4">
<div class="grid-content bg-purple">
<el-form-item label="性别" prop="gender">
<el-select v-model="ruleForm.gender" placeholder="选择">
<el-option v-for="item in genders" :key="item.id" :label="item.constantName" :value="item.id"></el-option>
</el-select>
</el-form-item>
</div>
</el-col>
<el-col :span="4">
<div class="grid-content bg-purple">
<el-form-item label="年龄:" prop="age" align="left">
<el-input v-model="ruleForm.age" size="mini"></el-input>
</el-form-item>
</div>
</el-col>
<el-col :span="4">
<div class="grid-content bg-purple">
<el-form-item label="岁别" prop="ageType">
<el-select v-model="ruleForm.ageType" placeholder="">
<el-option label="岁" value="岁"></el-option>
<el-option label="月" value="月"></el-option>
<el-option label="天" value="天"></el-option>
</el-select>
</el-form-item>
</div>
</el-col>
</el-row>
<el-row :gutter="3">
<el-col :span="6">
<div class="grid-content bg-purple">
<el-form-item prop="date1" label="出生日期:">
<el-date-picker type="date" placeholder="出生日期" v-model="ruleForm.birthDate" style="width: 100%;" value-format="yyyy-MM-dd"></el-date-picker>
</el-form-item>
</div>
</el-col>
<el-col :span="6">
<div class="grid-content bg-purple">
<el-form-item label="身份证号:" prop="iDnumber" align="left">
<el-input v-model="ruleForm.iDnumber" size="mini"></el-input>
</el-form-item>
</div>
</el-col>
<el-col :span="12">
<div class="grid-content bg-purple">
<el-form-item label="家庭住址:" prop="homeAddress" align="left">
<el-input v-model="ruleForm.homeAddress" size="mini"></el-input>
</el-form-item>
</div>
</el-col>
</el-row>
<el-row :gutter="3">
<el-col :span="6">
<div class="grid-content bg-purple">
<el-form-item label="结算类别" prop="ageType">
<el-select v-model="ruleForm.settleId" placeholder="请选择">
<!--这个需要查询库-->
<el-option v-for="item in settles" :key="item.id" :label="item.constantName" :value="item.id"></el-option>
</el-select>
</el-form-item>
</div>
</el-col>
<!--以下级联开始-->
<!-- 1根据看诊日期查午别-->
<el-col :span="6">
<div class="grid-content bg-purple">
<el-form-item prop="date1" label="看诊日期:">
<el-date-picker type="date" placeholder="看诊日期" value-format="yyyy-MM-dd" v-model="ruleForm.visitDate" style="width: 100%;" @change="kzrq_select()"></el-date-picker>
</el-form-item>
</div>
</el-col>
<!-- 2根据看诊日期、午别查科室 -->
<el-col :span="6">
<div class="grid-content bg-purple">
<el-form-item label="午别" prop="noon">
<el-select v-model="ruleForm.noon" placeholder="请选择" @change="noon_select()">
<!--这个需要根据上面的选择动态加载出来-->
<el-option v-for="item in noons" :key="item.noon" :label="item.noon" :value="item.noon"></el-option>
</el-select>
</el-form-item>
</div>
</el-col>
<!-- 3根据看诊日期、午别、科室 查号别-->
<el-col :span="6">
<div class="grid-content bg-purple">
<el-form-item label="挂号科室:" prop="noon">
<el-select v-model="ruleForm.deptId" placeholder="请选择" @change="dept_select()">
<!--这个需要根据上面的选择动态加载出来-->
<el-option v-for="item in depts" :key="item.DeptID" :label="item.DeptName" :value="item.DeptID"></el-option>
</el-select>
</el-form-item>
</div>
</el-col>
</el-row>
<el-row :gutter="3">
<!-- 4根据看诊日期、午别、科室、号别查医生-->
<el-col :span="6">
<div class="grid-content bg-purple">
<el-form-item label="号别:" prop="registLeId">
<el-select v-model="ruleForm.registLeId" placeholder="请选择" @change="registLe_select()">
<!--这个需要根据上面的选择动态加载出来-->
<el-option v-for="item in registLevels" :key="item.ID" :label="item.RegistName" :value="item.ID"></el-option>
</el-select>
</el-form-item>
</div>
</el-col>
<!--级联
* 5查已用挂号额度，查挂号额度 查挂号费
* -->
<el-col :span="6">
<div class="grid-content bg-purple">
<el-form-item label="看诊医生:" prop="userId">
<el-select v-model="ruleForm.userId" placeholder="请选择" @change="user_select()">
<!--这个需要根据上面的选择动态加载出来-->
<el-option v-for="item in users" :key="item.id" :label="item.realName" :value="item.id"></el-option>
</el-select>
</el-form-item>
</div>
</el-col>
<el-col :span="6">
<div class="grid-content bg-purple">
<el-form-item label="初始号额:" prop="cshe">
<el-input v-model="ruleForm.cshe" size="mini" placeholder="初始号额" readonly></el-input>
</el-form-item>
</div>
</el-col>
<el-col :span="6">
<div class="grid-content bg-purple">
<el-form-item label="已用号额:" prop="yyhe">
<el-input v-model="ruleForm.yyhe" size="mini" placeholder="已用号额" readonly></el-input>
</el-form-item>
</div>
</el-col>
</el-row>
<el-row :gutter="3">
<el-col :span="6">
<div class="grid-content bg-purple">
<el-form-item label="病历本:" prop="isBook">
<input type="checkbox" v-model="ruleForm.isBook" true-value="1" false-value="0" @change="book_select()"></input>
</el-form-item>
</div>
</el-col>
<el-col :span="6">
<div class="grid-content bg-purple">
<el-form-item label="应收金额:" prop="fee">
<el-input v-model="ruleForm.fee" size="mini" align="left"></el-input>
</el-form-item>
</div>
</el-col>
<el-col :span="6">
<div class="grid-content bg-purple">
<el-form-item label="收费方式:" prop="feeType">
<el-select v-model="ruleForm.feeType" placeholder="请选择" >
<!--这个需要根据上面的选择动态加载出来-->
<el-option v-for="item in constantTypes" :key="item.id" :label="item.constantName" :value="item.id"></el-option>
</el-select>
</el-form-item>
</div>
</el-col>
</el-row>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
ruleForm: {
invoiceNumber: '',//发票编号
realName: '',//真实姓名
gender: '',//性别
age: '',//年令
ageType: '',//年令类型
birthDate:'',//出生日期
iDnumber:'',//身份证号
homeAddress:'',//家庭住址
settleId:'',//结算类别 1自费/2市医保
visitDate:'',//看诊日期
noon:'',//午别
deptId:'',//科室id
registLeId:'',//挂号级别id
userId:'',//医生id
cshe:'',//初始号额
yyhe:'',//已用号额
isBook:'0',//病历本要否
fee:0, //应收金额
feeType:51,// 收费方式51-现金52-医保卡
registerId:''//用户编号
},
genders:[],
settles:[],
noons:[],
depts:[],
registLevels:[],
users:[],
constantTypes:[],
rules: {
//todo
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
alert(this.ruleForm);
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
},
blhcx(){
//select * from register where casenumber=?
alert("生成病历号");
//根据casenumber到register 表里查询用户基本信息
//如果存在就更新用户住址，真实姓名，身份证号，性别，agetype,age,生日等
},
kzrq_select(){
alert("第一步按排班日期查午别");
},
noon_select(){
alert("第二步根据日期和午别查科室");
},
dept_select(){
alert("第三步根据日期午别 科室查号别");
},
registLe_select(){
alert("第四步根据日期午别 科室 号别查医生");
},
user_select(){
alert("第五步根据日期午别 科室 号别医生查已用挂号额度 挂号额度和挂号费");
},
book_select(){
alert("根据是否选择了病历本计算费用");
}
}
}
</script>
<style>
.el-row {
margin-bottom: 0px;
&:last-child {
margin-bottom: 0;
}
}
.el-col {
border-radius: 4px;
}
.bg-purple-dark {
background: #99a9bf;
}
.bg-purple {
background: #d3dce6;
}
.bg-purple-light {
background: #e5e9f2;
}
.grid-content {
border-radius: 4px;
min-height: 20px;
}
.row-bg {
padding: 10px 0;
background-color: #f9fafc;
}
</style>
-
详细分析需求
- 初始加载项
-
最大病例号（也可以通过事件触 发）
-
性别常量
-
结算类别
-
收费方式
- 级联加载项（6步）
5、kzrq_select(){
alert("第一步按排班日期查午别");
},
6、noon_select(){
alert("第二步根据日期和午别查科室");
},
7、dept_select(){
alert("第三步根据日期午别 科室查号别");
},
8、registLe_select(){
alert("第四步根据日期午别 科室 号别查医生");
},
9、user_select(){
alert("第五步根据日期午别 科室 号别医生查已用挂号额度 挂号额度和挂号费");
},
10、book_select(){
alert("根据是否选择了病历本计算费用");
}
9119
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
