当前位置：首页 > news >正文

基于Vue+Element UI+Node+MongoDB的医院门诊预约挂号系统

news 来源：原创 2024/5/18 12:39:42

目录
概述 3
系统目标 3
需求分析 3
功能需求 3
非功能需求 4
设计 4
数据库设计 4
数据库说明 4
数据结构 4
接口设计 5
登录 5
注册、添加信息 6
查询信息 6
查询全部病人 6
查询全部医生 6
查询某科室下的医生 6
根据 id 查询 6
根据病人 id 查询挂号记录 7
根据 id 删除 7
根据 id 编辑 7
根据科室名查询下属门诊 7
根据医生 id 查询排班信息 7
页面设计 8
登录、注册页面设计 8
用户主页设计 9
用户挂号记录页面 10
信息列表页 10
添加信息页 11
编辑信息页 11
实现 11
后端实现 13
前端实现 15
测试 17
登录测试 17
注册测试 17
退出登录测试 18
挂号测试 18
取消挂号记录 18
添加信息 18
删除信息 18
编辑信息 18
项目总结 18
概述
项目名称：Hs医院挂号预约系统 / Hs医院门诊预约挂号系统
项目技术：Vue + Element UI + Node + MongoDB
系统目标
在互联网发达的现代，为病人挂号预约提供便利，不用再在医院的挂号窗口排队等待，而是利用互联网的便利；使用本系统，用户可以足不出户、免去等待的进行挂号预约，医院方面的管理员可以便捷的对医院中的一些数据、信息进行存储、管理、维护，节省信息管理的成本。
需求分析
功能需求
用户：
•病人：可以查看医院信息、科室门诊、医生信息、预约挂号、预约记录；
•管理员：可以对系统内的数据、信息进行管理；
用例：
•登录、注册、退出登录
•查看医院信息、科室门诊信息、医生信息、预约挂号、预约挂号记录
•用户管理、科室管理、值班管理、挂号管理（仅管理员）
系统结构图：
在这里插入图片描述

非功能需求
•简洁：界面简洁、结构明了，没有多余的信息妨碍用户达到目的；
•快捷：通过页面模块化，提高模块的复用性，减少页面的刷新同时提高页面的加载速度；
设计
数据库设计
数据库说明
•MongoDB 数据库的集合可以看做是其他关系数据库（如 MySQL）的表
•集合的字段 _id 为唯一主键
•一些除 _id 外的 ObjectId数据类型的字段相当于外键
本文转载自http://www.biyezuopin.vip/onews.asp?id=15694

<template>
  <el-main>
    <el-row style="display: flex">
      <el-col :span="20" style="margin: auto;">
        <el-card style="min-width: 1232px">
          <div slot="header">
            <span>预约挂号记录</span>
          </div>
          <el-row>
            <el-table :data="items.filter(data => !search || data.doctor.toLowerCase().includes(search.toLowerCase()))">
              <el-table-column type="index" align="center"></el-table-column>
              <el-table-column label="id" prop="_id" align="center" v-if="false"></el-table-column>
              <el-table-column label="医生" prop="doctor.account" align="center"></el-table-column>
              <el-table-column label="星期" prop="duty" align="center"></el-table-column>
              <el-table-column label="时间段" prop="timeslot" width="100px" align="center"></el-table-column>
              <el-table-column label="日期" prop="appointment" align="center"></el-table-column>
              <el-table-column align="center">
                <template slot="header" slot-scope="scope" :class="{scope}"> <!-- slot-scope="scope" -->
                  <el-input
                      v-model="search"
                      placeholder="输入医生关键字"/>
                </template>
                <template slot-scope="scope">
                  <el-button size="mini" type="danger" @click="remove(scope.row)">取消</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </el-main>
</template>

<script>
export default {
  name: "MyRegistration",
  data() {
    return{
      items: [],
      search: '',
    }
  },
  methods: {
    async STime(){
      for(let i = 0; i < this.items.length; i++){
        let T = new Date(Date.parse(this.items[i].appointment)) // date 转 Date ！重点
        let Y = T.getFullYear()
        let M = T.getMonth() + 1
        let D = T.getDate()
        this.items[i].appointment = Y + (M < 10 ? "-0" : "-") + M + (D < 10 ? "-0" : "-") + D
      }
    },
    async findMy(){
      let token = window.sessionStorage.getItem('token')
      let myId = token.split('.')[0] //病人id
      const res = await this.$http.get(`rest/registration/myregistration/${myId}`)
      this.items = res.data
      await this.STime()
    },
    // eslint-disable-next-line no-unused-vars
    async remove(row){
      this.$confirm(`是否确定取消"${row.appointment}-${row.duty}-${row.timeslot}"的挂号?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // eslint-disable-next-line no-unused-vars
        const res = await this.$http.delete(`rest/registration/${row._id}`)
        this.$message({
          type: 'success',
          message: '取消成功!'
        });
        await this.findMy()
      });
    }
  },
  created(){
    this.findMy()
  }
}
</script>

<style scoped>
/deep/ .el-card__header{
  background-color: #6EBEC4;
  text-align: center;
  color: #ffffff;
  font-size: 25px;
}
</style>