基于Vue3和Electron的床边结算指引系统的设计与实现

夏 宇，纪 晨

（深圳市龙华区人民医院信息科，广东深圳 518109）

0 引言

2010年，卫生部发布的《关于进一步改善医疗机构医疗服务管理工作的通知》要求各级医疗机构做好患者出院结算准备工作，力求患者出院结算等候时间不超过10 min，有条件的医院可实行出院患者床边结算。床边结算可以节约患者在窗口排队的等待时间，是传统窗口结算的一种有效补充。

目前，关于床边结算的研究主要集中于床边结算的模式探讨及床边结算在优化出院流程中的作用，较少有研究关注床边结算流程的优化[1-3]。床边结算的主要形式包括使用移动结算车在患者床边结算、收费员先根据清单办理出院手续后再与患者结清费用、在每个病区附近设置结算点为患者结算[1]、患者自主结算等[2]。为方便患者，我院实行利用移动结算车进行床边结算的模式，这种模式的结算流程为：医生开立出院医嘱→护士进行出院登记→收费员进行床边结算→患者出院。目前在进行床边结算的过程中，由于待结算患者数量的变动、不同患者病床位置的差异等，收费员需要不断往返于病房与护士站之间，这增加了收费员与相应病区护士的沟通成本，影响了收费员的结算效率。

当前对于床边结算流程的优化主要以相应患者需求为主[3]，而本文从医院运营角度出发，针对上述影响收费员工作效率的问题，设计一种床边结算指引系统。通过使用本系统，一方面，收费员可以直接获取待结算患者位置信息，无需再向病区护士确认，能实时确认当天的结算任务完成情况，并据此及时调整当前的结算安排；另一方面，结算任务列表与车辆编号的绑定使得收费处的管理人员可以灵活安排结算工作。

1 需求分析

1.1 功能性需求

结合当前医院患者床边结算的需求以及收费员为患者进行床边结算的场景，床边结算指引系统的功能需求主要包括以下4个方面：

（1）提供多种登录方式。

为方便收费员工作，考虑到收费员平时使用医院信息系统（hospital information system，HIS）的登录习惯，提供密码登录和企业微信扫码登录2种登录方式。其中，密码登录的账号密码与HIS同步，企业微信扫码直接调取企业微信的登录接口，这2种登录方式相互补充又符合收费员的使用习惯，更加方便收费员的使用。

（2）查看结算任务。

作为床边结算的收费员，需要明确当天需要进行床边结算的患者数量、患者信息以及患者所在的病区分布情况，从而有计划性地完成床边结算工作[4]。因此，床边结算指引系统的结算任务展示界面应当显示当天对应移动结算车的结算任务，每一条结算任务信息包括患者的姓名、病区位置、床位号等，此功能使得收费员不必再向目标病区护士站护士询问及确认需要床边结算的患者信息，能够减少收费员与护士的沟通成本，并实现指引收费员进行床边结算的目的。

（3）查看结算任务完成情况。

对于收费员来说，查看今日结算任务与确认任务完成情况同等重要[5]。结算任务完成情况包括已结算和未结算2种状态。收费员可以通过查看未结算界面的任务列表规划接下来的结算工作，而已结算界面不仅能够帮助收费员确认自己的工作量，同时当患者、护士站护士或收费处管理人员对收费情况有疑问时可以快速定位到患者位置。

（4）结算任务管理。

在某些特殊情况下，收费员会面临结算工作区域的调动、结算车辆的变更等，此时收费员、移动结算车、结算任务需要相互独立，收费员、移动结算车以及结算任务之间应该是互不干扰的。

1.2 非功能性需求

考虑到医院环境的特殊性以及减轻收费员的工作负担的要求，床边结算指引系统的非功能性需求主要包括以下3个方面：

（1）界面。

在考虑到收费员使用习惯的基础上，保持界面的简洁和美观，在必要处添加提示，并且尽量使所有功能在一个界面完成，减少界面的跳转次数和收费员的点击次数，在保证系统的易用性的同时规避非必要性工作。

（2）可靠性。

为保证患者信息数据的安全性，系统只允许在内网中运行。此外，床边结算指引系统实际运行中可能会出现数据异常、界面显示异常等问题，应能及时排查和处理问题。

（3）系统性能。

为尽可能地缩短患者床边结算等待的时间，床边结算指引系统应对收费员的操作提供快速的响应。因此，应能使用数据压缩、代码压缩、代码拆分等方式优化系统性能。

2 系统设计

2.1 开发环境

为了便于项目的二次开发，使用前后端分离的方式进行系统开发[6]。前端使用Visual Studio Code设计交互界面，数据库端使用PowerDesigner工具对PostgreSQL数据库进行设计。因床边结算指引系统安装在移动结算车的PC端，因此，开发完成后，在医院移动结算车常用的2种Windows系统——Windows7和Windows10中进行可用性测试。

2.2 系统整体架构设计

根据功能模块的设计，将系统分为桌面应用层、Web服务层和业务服务层。其中，桌面应用层为客户端打开桌面应用的前端页面，功能为与用户进行交互，包括登录页面、未结算任务页面、已结算任务页面以及结算车辆信息更改页面。Web服务层负责对桌面应用层的用户请求进行路由调配、存放静态资源、处理业务服务层返回的数据并提供给用户。业务服务层负责处理并存储采集的数据，并向Web服务端返回结果数据，是整个系统框架业务处理的基础。

系统整体架构如图1所示。采用客户端/服务器（Client/Server，C/S）架构与前后端分离模式，其中桌面应用层为桌面客户端，利用Vue3+Naïve-UI设计界面组件，通过Vue3的路由插件链接客户端功能，使用Axios通过超文本传输安全协议（hypertext transfer protocol secure，HTTPS）以JS对象简谱（JavaScript object notation，JSON）格式和Web服务层进行数据交互[7-8]，使用Electron实现不同窗口间的通信并完成应用的打包。Web服务层中的NodeJS中间件负责响应来自桌面应用层的请求，如果是静态资源请求，则直接返回，如果是动态资源请求，则再向业务服务层发送HTTPS请求。业务服务层为基于Koa框架搭建的业务管理系统，用户通过业务管理系统处理账户权限内的数据并进行交互。

图1 床边结算指引系统整体架构图

2.3 业务表设计

床边结算指引系统的核心实体为用户，根据业务需求，涉及到的业务表包括患者住院记录表、病区信息表和患者结算记录表。其中，患者住院记录表中的字段包括inpatient_filenum（患者档案号）、inpatient_name（患者姓名）、inpatient_dept（患者住院科室）、inpatient_ward（患者住院病区）、inpatient_bednum（患者床位号），病区信息表中的字段包括Ward_code（病区编码）、inpatient_ward_address（患者住院病区地址），患者结算记录表中的字段包括inpatient_filenum（患者档案号）、settlement_status（患者结算状态）、settlement_date（结算日期）和car_num（结算车编号）。

2.4 功能模块设计

床边结算指引系统包括系统登录模块、结算任务查询模块、结算任务状态查询模块和结算任务管理模块4个部分，其功能模块结构图如图2所示。

图2 床边结算指引系统功能模块结构图

其中，系统登录模块包括密码登录和扫码登录2种登录方式。结算任务查询模块负责实现未结算任务的展示，包括未结算患者信息查询、未结算患者信息筛选和未结算患者信息排序。结算任务状态查询模块实现已结算任务的展示，包括已结算患者信息查询、已结算患者信息筛选和已结算患者信息排序。结算任务管理模块负责收费员结算任务的变更，包括结算车辆信息更改以及结算任务信息更新。

结算任务查询模块是系统中的主要模块。查询结算任务的基本操作流程为：收费员登录系统后可以直接看到今日未结算任务信息，并且可以将结算任务按病区排序，根据任务信息中的地址找到患者并完成结算。当结算员完成一个结算任务时，该条任务就会进入已结算任务列表，收费员可以通过切换结算状态界面查看已结算任务和未结算任务。当收费员被分配至其他病区时，可通过更改移动结算车编号进行结算任务管理，更换结算任务。

3 系统实现

3.1 前端实现

床边结算指引系统前端采用Vue3和Electron框架设计，开发模式采用MVVM（Model-View-View-Model）[9]，其架构如图3所示。

图3 MVVM架构图

Model层记录了系统中有价值的数据以及数据之间的联系，根据ViewModel层传过来的请求，以接口的方式提供封装后的后端数据或接收传到前端的数据并进行相应的更新[10]。本系统使用的接口请求是Axios，Axios在取消请求、超时处理、进度处理等方面具有独特的优势，并且能将异步请求同步化，优化用户体验。

ViewModel层是MVVM框架中的核心部分，通过它将View层和Model层联系起来。通过v-model指令实现数据的双向绑定，一方面能够响应View层中用户的操作，进行相应的处理后更新Model层的数据；另一方面调用Model层中的数据，进行相应的处理后展示在View层。

View层是直接面向用户的，其目标是完成数据的展示以及用户与系统的交互。界面设计时可以通过调用第三方的组件库和样式库，本系统选择的是Naïve-UI组件库和Tailwindcss样式库，以实现更佳的用户界面设计。并且，在Vue3中，组件化的开发模式使得各组件之间能够以接口的方式建立通信，代码的开发及修改更加灵活，本系统中的各组件通过路由（Vue Router）实现定向，例如登录验证成功后通过路由跳转到系统主页面。

界面开发完成后使用Electron进行窗口操作的设计，包括窗口最小化、关闭窗口、置顶时边缘隐藏等，最后进行打包，形成桌面应用。

3.2 后端数据视图生成

在PostgreSQL数据库中定义出基于对象类型的视图（即结算任务表），用于存储结算记录[11]。

结算任务表视图的创建语句示例如下：

3.3 系统功能模块实现

3.3.1 系统登录模块

系统登录流程如图4所示。密码登录中，收费员输入工号密码后，利用Vue3的双向绑定将从前端捕获的用户输入加密后传输至HIS登录校验接口以完成用户身份的验证。扫码登录中，收费员扫描企业微信的二维码后，系统调用企业微信用户认证接口进行身份验证。身份验证通过后会跳转至结算任务界面，同时通过Electron的ipcRenderer功能发送窗口大小变更命令。系统登录界面如图5所示。

图4 床边结算指引系统登录流程图

图5 床边结算指引系统登录界面

3.3.2 结算任务查询模块

利用Naïve-UI中的Tabs组件和Data Table组件设计结算任务查询模块，将病床号设置为筛选字段，病区地址设置为索引和筛选字段。结算任务查询流程如图6所示，收费员通过点击结算任务展示界面Tabs中的“未结算”发出查询请求，后台会回传未结算任务的相关信息并按要求展示在前端界面，收费员可以查看今日任务中待结算的患者及其病房位置信息，并且可以按照病床号和病区位置进行筛选和排序。结算任务查询界面如图7（a）所示，结算病区筛选界面如图7（b）所示。

图6 结算任务查询流程图

图7 结算任务查询及结算病区筛选界面

3.3.3 结算任务状态查询模块

利用Naïve-UI中的Tabs组件和Data Table组件设计结算任务状态查询模块。结算任务状态查询流程如图8所示，当收费员点击结算任务展示界面Tabs中的“已结算”发出查询已结算任务请求，后台会回传已结算任务的相关信息，前端获取到数据后刷新界面，从未结算任务列表切换至已结算任务列表，收费员即可查看已经完成的结算任务。同时，收费员可以通过信息栏中的待结算数量和已结算数量掌握结算任务进度，及时调整工作安排。如图9所示，收费员可在已结算界面查看结算任务状态的相关信息。

图8 结算任务状态查询流程图

图9 结算任务状态查询界面

3.3.4 结算任务管理模块

为方便收费员工作，提高工作效率，收费处会提前一天统计第二天全院需要出院结算的患者总量，并将其分配至若干个移动结算车。通过Naïve-UI中的Drawer、Radio等组件设计结算车辆编号变更界面，变更流程如图10所示。收费员点击车辆编号圆框，会弹出车辆信息更改界面[如图11（a）所示]，选择车辆编号后点击“确定”，通过Vue3的双向绑定会将相应的车辆编号传至后端，后端接收后返回对应车辆编号的结算任务，刷新结算任务列表并更新移动结算车编号[如图11（b）所示]。系统中移动结算车的编号并不是移动结算车设备的编号，而是一组结算任务的编号，收费员、移动结算车、结算任务相互独立，因此，通过该模块可实现移动结算车和收费员的灵活调配。

图10 结算任务变更流程图

图11 结算任务管理界面

4 系统应用

床边结算指引系统已在我院住院楼脊柱外科眼科病区、神经内科病区、呼吸与危重症医学科病区、肝胆甲乳外科病区投入使用，2名收费员使用本系统为300多名患者提供了床边结算服务，平均每人每天结算8位患者，患者由出院登记至结算的平均等待时间从原来的1.5 h缩短至30 min，减轻窗口结算压力的同时显著缩短了患者的结算等待时长。本系统为收费员提供了界面简洁、功能易用的床边结算指引服务，使收费员对待床边结算患者的位置定位更为直接高效，为床边结算流程的优化以及收费员床边结算工作体验的提升奠定了基础。本系统在提升床边结算效率方面的优势主要体现在以下3个方面：

（1）结算任务内容清晰。

本系统明确展示了床边结算患者的姓名、床位号、病房位置等信息，可避免收费员在护士站与病房间的来回奔波。同时考虑到收费员的个人工作特点，在病房号和病区位置处加入了排序功能，并且能按病区进行筛选，实现了结算指引功能的同时又满足收费员个性查看并调整结算任务安排的需求，这是在优化床边结算流程方面的有效尝试。

（2）结算任务状态同步。

过去如需查找或核对患者结算状态信息，收费员需要在HIS中根据患者身份识别码等信息进行搜索查验。而本系统中数据直接对接HIS后台数据库，当收费员收费完成后，患者的结算信息会从未结算界面转到已结算界面，收费员能够及时掌握结算任务状态。本系统的应用实现了结算任务状态的实时反馈，收费员无需切换HIS的结算功能页面，节省了结算状态确认的时间成本。

（3）结算任务调度灵活。

本系统将结算任务与虚拟车辆编号绑定，不同结算员可以通过选择不同车辆编号领取相应的结算任务，为收费处管理人员协调收费员安排提供了便利，也为收费员实际工作的灵活调度提供了有力的保障。

5 结语

本文设计了基于Vue3和Electron的床边结算指引系统，并通过实际应用验证了系统功能，在页面内容显示以及与用户交互设计方面，达到了预期的效果，满足了收费员快速定位待床边结算患者的位置的需求。虽然本系统达到了预期的设计目标，但还是存在一些不足：目前结算任务列表主要通过人工分配，增加了重复性的工作，因此下一步拟使用基于时间-空间的聚类算法优化结算任务分配方式，减轻收费处管理人员的工作量。