医疗挂号系统完整代码


  • 所实现的需求
  • 挂号界面
  • 挂号逻辑前后台实现
  • 挂号界面
  • 我选择的是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>
  • 详细分析需求
  • 初始加载项
    1. 最大病例号(也可以通过事件触 发)
    1. 性别常量
    1. 结算类别
    1. 收费方式
  • 级联加载项(6步)
  5kzrq_select(){
    alert("第一步按排班日期查午别");
        },
   6noon_select(){
    alert("第二步根据日期和午别查科室");
            },
7dept_select(){
    alert("第三步根据日期午别 科室查号别");
            },
8registLe_select(){
    alert("第四步根据日期午别 科室 号别查医生");
            },
9user_select(){
    alert("第五步根据日期午别 科室 号别医生查已用挂号额度 挂号额度和挂号费");
            },
10book_select(){
    alert("根据是否选择了病历本计算费用");
            }
Logo

前往低代码交流专区

更多推荐