【入门毕设项目】基于 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. 必须了解使用本软件的风险,作者不承诺提供一对一的技术支持、使用担保,也不承担任何因本软件而产生的难以预料的问题的相关责任。
相关文章
|
2月前
|
JavaScript 容器
乾坤qiankun框架搭建 主应用为vue3的项目。
乾坤qiankun框架搭建 主应用为vue3的项目。
187 2
|
1月前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具,正确配置和运行预渲染操作,结合其他 SEO 策略,可以实现更好的搜索引擎优化效果。同时,需要不断地监控和优化预渲染效果,以适应不断变化的搜索引擎环境和用户需求。
|
1月前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
2月前
|
JavaScript
如何在 Vue 项目中选择合适的模块格式
【10月更文挑战第20天】选择合适的模块格式需要综合考虑多个因素,没有一种绝对正确的选择。需要根据项目的具体情况进行权衡和分析。在实际选择过程中,要保持灵活性,根据项目的发展和变化适时调整模块格式。
21 7
|
1月前
Vue3 项目的 setup 函数
【10月更文挑战第23天】setup` 函数是 Vue3 中非常重要的一个概念,掌握它的使用方法对于开发高效、灵活的 Vue3 组件至关重要。通过不断的实践和探索,你将能够更好地利用 `setup` 函数来构建优秀的 Vue3 项目。
|
2月前
|
JavaScript 前端开发 编译器
在 Vue 项目中使用 ES 模块格式的优点
【10月更文挑战第20天】在 Vue 项目中使用 ES 模块格式具有众多优点,这些优点共同作用,使得项目能够更高效、更可靠地开发和运行。当然,在实际应用中,还需要根据项目的具体情况和需求进行合理的选择和配置。
37 6
|
1月前
|
JavaScript 测试技术 UED
解决 Vue 项目中 Tree shaking 无法去除某些模块
【10月更文挑战第23天】解决 Vue 项目中 Tree shaking 无法去除某些模块的问题需要综合考虑多种因素,通过仔细分析、排查和优化,逐步提高 Tree shaking 的效果,为项目带来更好的性能和用户体验。同时,持续关注和学习相关技术的发展,不断探索新的解决方案,以适应不断变化的项目需求。
|
2月前
|
缓存 JavaScript 前端开发
《基础篇第4章:vue2基础》:使用vue脚手架创建项目
《基础篇第4章:vue2基础》:使用vue脚手架创建项目
78 3
|
2月前
|
存储 JavaScript 前端开发
前端开发:Vue.js入门与实战
【10月更文挑战第9天】前端开发:Vue.js入门与实战
|
2月前
|
JavaScript API 开发者
十分钟 带你强势入门 vue3
十分钟 带你强势入门 vue3
66 1