【入门毕设项目】基于 Vue 的医院门诊预约挂号系统(二)

简介: 【入门毕设项目】基于 Vue 的医院门诊预约挂号系统

医生管理模块

管理员登陆系统后,可以进入医生管理模块,查询医生档案的详细数据,如下图所示:

医生的信息包括

  • 医生姓名
  • 医生年龄
  • 学历学位
  • 开始工作时间
  • 毕业院校
  • 职称
  • 专业
  • 所属科室
  • 医生介绍

医生档案的增加、编辑、删除、导出操作步骤同科室模块。

可以根据科室查询医生,如在科室搜索框内输入“口腔”,点击搜索按钮,即可查询口腔科的医生列表,如下图所示:

医生的数据库设计如下图所示:

医生放号模块

为了模拟真实的预约挂号流程,本系统设计了医生放号模块。

管理员进入医生放号模块,界面如下图所示:

点击每一行医生的“放号”按钮,系统弹出放号交互弹框,如下图所示:

管理员需要填入放号日期、放号时段、放号个数,完成放号功能。

如填入放号日期为“2022-09-12”,放号时段为上午,放号个数为 10 个,点击“确认放号”按钮,即可完成对罗文文医生的放号操作。

管理员可点击每一行医生的“查询”按钮,完成对放号结果的查询,如下图所示:

医生号源的数据库设计如下图所示:

预约挂号模块

患者账号登陆系统后,可以进入到预约挂号模块,如下图所示:

在预约挂号模块中,可以查询需要挂号的医生。

可以根据科室查询,可以筛选是否今日的号,可以搜索医生的姓名、职称,该搜索功能在左上角顶部的搜索框实现。

如筛选了口腔科的科室,点击搜索按钮,即可完成口腔科医生的搜索,如下图所示:

患者点击每一行医生的红色的“挂号”按钮,系统弹出挂号弹框,患者可以查询该为医生的号源,如下图所示:

点击每一行的橙色“挂号”按钮,系统弹出再次确认弹框。

点击“确定”按钮,即可完成预约挂号操作。

挂号的数据库设计如下图所示:

我的挂号模块

患者登陆系统后,可以进入我的挂号模块。

该模块用于展示个人的挂号详情,界面如下图所示:

患者可以点击每一行红色的“取消点我”按钮,取消该次预约挂号,取消后号源恢复为未挂号状态。

患者可以点击红色的“付款”按钮,完成预约订单的付款功能。付款仅为模拟,支付宝/微信/银联支付必须要企业认证,个人没权限测试开发支付功能。

患者预约到医生的号后,可在我的订单模块模拟付款。付款后预约订单状态为已付款。

患者点击“付款”后,系统将弹出二次确认弹框,如下图所示:

用户留言模块

医院的预约挂号标准化流程,一定会存在有需要改进的点,或者现有功能不能被患者理解学会,所以需要设计留言板功能,实现患者和医院的信息交互功能。

患者进入到用户留言模块,界面如下图所示:

患者可点击顶部蓝色的“添加”按钮,打开添加留言弹框,如下图所示。

患者点击弹框底部的“确认留言”按钮后,完成留言操作。

留言完成后界面如下图所示:

管理员可以对留言进行回复操作,如下图所示。

回复成功后,管理员可以双击每一条评论行,查看该条评论的回复列表,如下图所示:

医院新闻模块

管理员可以进入医院新闻模块,界面如下图所示:

新闻的信息包括:

  • 新闻名称
  • 新闻描述
  • 图片
  • 新闻时效
  • 是否公开
  • 是否置顶

支持对医院的新闻进行添加、编辑、删除、公开、置顶,操作过程同科室管理模块。

系统采用了 ViewerJs 依赖,对指定 URL 的图片进行预览。

系统采用了 View UI 组件库,在表格内嵌了 Switch 开关组件。

普通患者只能进入的医院新闻留言模块,只保留了新闻的查看功能,界面如下图所示:

医院新闻的数据库设计如下图所示:

项目总结

加快完整医院预约挂号系统的建立和实施是当前我国医疗发展面临的一个重要课题。通过对目前的医院预约挂号现状进行分析,并针对这种现状进行研究设计,实现了基于 Vue 的医院门诊预约挂号管理系统,为人们的预约挂号提供了便利,促进了挂号预约的信息化发展。

开发模板

《基于 Vue 和 SpringBoot 的假日旅社管理系统》是基于《基于 Vue 和 SpringBoot 的通用管理系统》(https://gitee.com/yyzwz/template)开发的,模板包含了登陆注册、用户管理、部门管理、文件管理、权限管理、日志管理、个人中心、数据字典和代码生成这九个功能模块,另外还有两张样例数据表和五张样例数据图,是一个很好的前后端分离开发模板,开发者可以在这个模板上进行二次开发,只需要实现需求方的业务逻辑,即可快速成型甲方的业务需求。

模板采用了基于角色的访问控制,角色和菜单关联,一个角色可以配置多个菜单权限;然后再将用户和角色关联,一位用户可以赋予多个角色。这样用户就可以根据角色拿到该有的菜单权限,更方便管理者进行权限管控。

模板还封装了文件管理功能,在其他模块如若要实现图片/文件上传预览时,前端只需导入现成的 Vue 组件即可实现(使用 viewerjs 依赖实现),后端只需定义 String 类型的实体类变量即可,无需再去研究文件上传预览的相关功能,简化了开发者的工作量。

模板还自带基于 beetl 代码生成器功能,开发者只需要输入类名(如 Student)和类备注(如学生),运行 main 函数即可自动生成后端的所有 MVC 结构代码,无需开发增删改查的 API 接口。对于前端,开发者只需输入后端实体类的完整路径,利用 Java 的反射原理,拿到后端实体类的字段,即可自动生成前端所有代码,生成的模块代码包含基础的增删改查功能,简化开发者的工作量。

免责声明

  • 本项目开源,仅供个人学习使用,遵循 GPL-3.0 开源协议,转发 / 商用授权请联系作者,否则后果自负
  • 作者拥有本软件构建后的应用系统全部内容所有权及独立的知识产权(软件著作权登记号:2022SR0369372)。
  • 如有问题,欢迎在仓库 Issue 留言,看到后会第一时间回复。相关意见会酌情考虑,但没有一定被采纳的承诺或保证。

下载本系统代码的用户,必须同意以下内容,否则请勿下载

  1. 出于自愿而使用/开发本软件,了解使用本软件的风险,且同意自己承担使用本软件的风险。
  2. 利用本软件构建的网站的任何信息内容以及导致的任何版权纠纷和法律争议及后果和作者无关,作者对此不承担任何责任。
  3. 在任何情况下,对于因使用或无法使用本软件而导致的任何难以合理预估的损失(包括但不仅限于商业利润损失、业务中断与业务信息丢失),作者概不承担任何责任。
  4. 必须了解使用本软件的风险,作者不承诺提供一对一的技术支持、使用担保,也不承担任何因本软件而产生的难以预料的问题的相关责任。
相关文章
|
3天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
4天前
|
存储 缓存 JavaScript
在 Vue 中使用 computed 和 watch 时,性能问题探讨
本文探讨了在 Vue.js 中使用 computed 计算属性和 watch 监听器时可能遇到的性能问题,并提供了优化建议,帮助开发者提高应用性能。
|
4天前
|
存储 缓存 JavaScript
如何在大型 Vue 应用中有效地管理计算属性和侦听器
在大型 Vue 应用中,合理管理计算属性和侦听器是优化性能和维护性的关键。本文介绍了如何通过模块化、状态管理和避免冗余计算等方法,有效提升应用的响应性和可维护性。
|
4天前
|
存储 缓存 JavaScript
Vue 中 computed 和 watch 的差异
Vue 中的 `computed` 和 `watch` 都用于处理数据变化,但使用场景不同。`computed` 用于计算属性,依赖于其他数据自动更新;`watch` 用于监听数据变化,执行异步或复杂操作。
|
3天前
|
JavaScript 前端开发 UED
vue学习第二章
欢迎来到我的博客!我是一名自学了2年半前端的大一学生,熟悉JavaScript与Vue,目前正在向全栈方向发展。如果你从我的博客中有所收获,欢迎关注我,我将持续更新更多优质文章。你的支持是我最大的动力!🎉🎉🎉
|
5天前
|
存储 JavaScript 开发者
Vue 组件间通信的最佳实践
本文总结了 Vue.js 中组件间通信的多种方法,包括 props、事件、Vuex 状态管理等,帮助开发者选择最适合项目需求的通信方式,提高开发效率和代码可维护性。
|
3天前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript和Vue的大一学生。自学前端2年半,熟悉JavaScript与Vue,正向全栈方向发展。博客内容涵盖Vue基础、列表展示及计数器案例等,希望能对你有所帮助。关注我,持续更新中!🎉🎉🎉
|
17天前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具,正确配置和运行预渲染操作,结合其他 SEO 策略,可以实现更好的搜索引擎优化效果。同时,需要不断地监控和优化预渲染效果,以适应不断变化的搜索引擎环境和用户需求。
|
5天前
|
存储 JavaScript
Vue 组件间如何通信
Vue组件间通信是指在Vue应用中,不同组件之间传递数据和事件的方法。常用的方式有:props、自定义事件、$emit、$attrs、$refs、provide/inject、Vuex等。掌握这些方法可以实现父子组件、兄弟组件及跨级组件间的高效通信。
|
10天前
|
JavaScript
Vue基础知识总结 4:vue组件化开发
Vue基础知识总结 4:vue组件化开发