基于Vue3和Electron的床邊結算指引系統(tǒng)的設計與實現(xiàn)

夏 宇，紀 晨

（深圳市龍華區(qū)人民醫(yī)院信息科，廣東深圳 518109）

0 引言

2010年，衛(wèi)生部發(fā)布的《關于進一步改善醫(yī)療機構醫(yī)療服務管理工作的通知》要求各級醫(yī)療機構做好患者出院結算準備工作，力求患者出院結算等候時間不超過10 min，有條件的醫(yī)院可實行出院患者床邊結算。床邊結算可以節(jié)約患者在窗口排隊的等待時間，是傳統(tǒng)窗口結算的一種有效補充。

目前，關于床邊結算的研究主要集中于床邊結算的模式探討及床邊結算在優(yōu)化出院流程中的作用，較少有研究關注床邊結算流程的優(yōu)化[1-3]。床邊結算的主要形式包括使用移動結算車在患者床邊結算、收費員先根據(jù)清單辦理出院手續(xù)后再與患者結清費用、在每個病區(qū)附近設置結算點為患者結算[1]、患者自主結算等[2]。為方便患者，我院實行利用移動結算車進行床邊結算的模式，這種模式的結算流程為：醫(yī)生開立出院醫(yī)囑→護士進行出院登記→收費員進行床邊結算→患者出院。目前在進行床邊結算的過程中，由于待結算患者數(shù)量的變動、不同患者病床位置的差異等，收費員需要不斷往返于病房與護士站之間，這增加了收費員與相應病區(qū)護士的溝通成本，影響了收費員的結算效率。

當前對于床邊結算流程的優(yōu)化主要以相應患者需求為主[3]，而本文從醫(yī)院運營角度出發(fā)，針對上述影響收費員工作效率的問題，設計一種床邊結算指引系統(tǒng)。通過使用本系統(tǒng)，一方面，收費員可以直接獲取待結算患者位置信息，無需再向病區(qū)護士確認，能實時確認當天的結算任務完成情況，并據(jù)此及時調(diào)整當前的結算安排；另一方面，結算任務列表與車輛編號的綁定使得收費處的管理人員可以靈活安排結算工作。

1 需求分析

1.1 功能性需求

結合當前醫(yī)院患者床邊結算的需求以及收費員為患者進行床邊結算的場景，床邊結算指引系統(tǒng)的功能需求主要包括以下4個方面：

（1）提供多種登錄方式。

為方便收費員工作，考慮到收費員平時使用醫(yī)院信息系統(tǒng)（hospital information system，HIS）的登錄習慣，提供密碼登錄和企業(yè)微信掃碼登錄2種登錄方式。其中，密碼登錄的賬號密碼與HIS同步，企業(yè)微信掃碼直接調(diào)取企業(yè)微信的登錄接口，這2種登錄方式相互補充又符合收費員的使用習慣，更加方便收費員的使用。

（2）查看結算任務。

作為床邊結算的收費員，需要明確當天需要進行床邊結算的患者數(shù)量、患者信息以及患者所在的病區(qū)分布情況，從而有計劃性地完成床邊結算工作[4]。因此，床邊結算指引系統(tǒng)的結算任務展示界面應當顯示當天對應移動結算車的結算任務，每一條結算任務信息包括患者的姓名、病區(qū)位置、床位號等，此功能使得收費員不必再向目標病區(qū)護士站護士詢問及確認需要床邊結算的患者信息，能夠減少收費員與護士的溝通成本，并實現(xiàn)指引收費員進行床邊結算的目的。

（3）查看結算任務完成情況。

對于收費員來說，查看今日結算任務與確認任務完成情況同等重要[5]。結算任務完成情況包括已結算和未結算2種狀態(tài)。收費員可以通過查看未結算界面的任務列表規(guī)劃接下來的結算工作，而已結算界面不僅能夠幫助收費員確認自己的工作量，同時當患者、護士站護士或收費處管理人員對收費情況有疑問時可以快速定位到患者位置。

（4）結算任務管理。

在某些特殊情況下，收費員會面臨結算工作區(qū)域的調(diào)動、結算車輛的變更等，此時收費員、移動結算車、結算任務需要相互獨立，收費員、移動結算車以及結算任務之間應該是互不干擾的。

1.2 非功能性需求

考慮到醫(yī)院環(huán)境的特殊性以及減輕收費員的工作負擔的要求，床邊結算指引系統(tǒng)的非功能性需求主要包括以下3個方面：

（1）界面。

在考慮到收費員使用習慣的基礎上，保持界面的簡潔和美觀，在必要處添加提示，并且盡量使所有功能在一個界面完成，減少界面的跳轉(zhuǎn)次數(shù)和收費員的點擊次數(shù)，在保證系統(tǒng)的易用性的同時規(guī)避非必要性工作。

（2）可靠性。

為保證患者信息數(shù)據(jù)的安全性，系統(tǒng)只允許在內(nèi)網(wǎng)中運行。此外，床邊結算指引系統(tǒng)實際運行中可能會出現(xiàn)數(shù)據(jù)異常、界面顯示異常等問題，應能及時排查和處理問題。

（3）系統(tǒng)性能。

為盡可能地縮短患者床邊結算等待的時間，床邊結算指引系統(tǒng)應對收費員的操作提供快速的響應。因此，應能使用數(shù)據(jù)壓縮、代碼壓縮、代碼拆分等方式優(yōu)化系統(tǒng)性能。

2 系統(tǒng)設計

2.1 開發(fā)環(huán)境

為了便于項目的二次開發(fā)，使用前后端分離的方式進行系統(tǒng)開發(fā)[6]。前端使用Visual Studio Code設計交互界面，數(shù)據(jù)庫端使用PowerDesigner工具對PostgreSQL數(shù)據(jù)庫進行設計。因床邊結算指引系統(tǒng)安裝在移動結算車的PC端，因此，開發(fā)完成后，在醫(yī)院移動結算車常用的2種Windows系統(tǒng)——Windows7和Windows10中進行可用性測試。

2.2 系統(tǒng)整體架構設計

根據(jù)功能模塊的設計，將系統(tǒng)分為桌面應用層、Web服務層和業(yè)務服務層。其中，桌面應用層為客戶端打開桌面應用的前端頁面，功能為與用戶進行交互，包括登錄頁面、未結算任務頁面、已結算任務頁面以及結算車輛信息更改頁面。Web服務層負責對桌面應用層的用戶請求進行路由調(diào)配、存放靜態(tài)資源、處理業(yè)務服務層返回的數(shù)據(jù)并提供給用戶。業(yè)務服務層負責處理并存儲采集的數(shù)據(jù)，并向Web服務端返回結果數(shù)據(jù)，是整個系統(tǒng)框架業(yè)務處理的基礎。

系統(tǒng)整體架構如圖1所示。采用客戶端/服務器（Client/Server，C/S）架構與前后端分離模式，其中桌面應用層為桌面客戶端，利用Vue3+Na?ve-UI設計界面組件，通過Vue3的路由插件鏈接客戶端功能，使用Axios通過超文本傳輸安全協(xié)議（hypertext transfer protocol secure，HTTPS）以JS對象簡譜（JavaScript object notation，JSON）格式和Web服務層進行數(shù)據(jù)交互[7-8]，使用Electron實現(xiàn)不同窗口間的通信并完成應用的打包。Web服務層中的NodeJS中間件負責響應來自桌面應用層的請求，如果是靜態(tài)資源請求，則直接返回，如果是動態(tài)資源請求，則再向業(yè)務服務層發(fā)送HTTPS請求。業(yè)務服務層為基于Koa框架搭建的業(yè)務管理系統(tǒng)，用戶通過業(yè)務管理系統(tǒng)處理賬戶權限內(nèi)的數(shù)據(jù)并進行交互。

圖1 床邊結算指引系統(tǒng)整體架構圖

2.3 業(yè)務表設計

床邊結算指引系統(tǒng)的核心實體為用戶，根據(jù)業(yè)務需求，涉及到的業(yè)務表包括患者住院記錄表、病區(qū)信息表和患者結算記錄表。其中，患者住院記錄表中的字段包括inpatient_filenum（患者檔案號）、inpatient_name（患者姓名）、inpatient_dept（患者住院科室）、inpatient_ward（患者住院病區(qū)）、inpatient_bednum（患者床位號），病區(qū)信息表中的字段包括Ward_code（病區(qū)編碼）、inpatient_ward_address（患者住院病區(qū)地址），患者結算記錄表中的字段包括inpatient_filenum（患者檔案號）、settlement_status（患者結算狀態(tài)）、settlement_date（結算日期）和car_num（結算車編號）。

2.4 功能模塊設計

床邊結算指引系統(tǒng)包括系統(tǒng)登錄模塊、結算任務查詢模塊、結算任務狀態(tài)查詢模塊和結算任務管理模塊4個部分，其功能模塊結構圖如圖2所示。

圖2 床邊結算指引系統(tǒng)功能模塊結構圖

其中，系統(tǒng)登錄模塊包括密碼登錄和掃碼登錄2種登錄方式。結算任務查詢模塊負責實現(xiàn)未結算任務的展示，包括未結算患者信息查詢、未結算患者信息篩選和未結算患者信息排序。結算任務狀態(tài)查詢模塊實現(xiàn)已結算任務的展示，包括已結算患者信息查詢、已結算患者信息篩選和已結算患者信息排序。結算任務管理模塊負責收費員結算任務的變更，包括結算車輛信息更改以及結算任務信息更新。

結算任務查詢模塊是系統(tǒng)中的主要模塊。查詢結算任務的基本操作流程為：收費員登錄系統(tǒng)后可以直接看到今日未結算任務信息，并且可以將結算任務按病區(qū)排序，根據(jù)任務信息中的地址找到患者并完成結算。當結算員完成一個結算任務時，該條任務就會進入已結算任務列表，收費員可以通過切換結算狀態(tài)界面查看已結算任務和未結算任務。當收費員被分配至其他病區(qū)時，可通過更改移動結算車編號進行結算任務管理，更換結算任務。

3 系統(tǒng)實現(xiàn)

3.1 前端實現(xiàn)

床邊結算指引系統(tǒng)前端采用Vue3和Electron框架設計，開發(fā)模式采用MVVM（Model-View-View-Model）[9]，其架構如圖3所示。

圖3 MVVM架構圖

Model層記錄了系統(tǒng)中有價值的數(shù)據(jù)以及數(shù)據(jù)之間的聯(lián)系，根據(jù)ViewModel層傳過來的請求，以接口的方式提供封裝后的后端數(shù)據(jù)或接收傳到前端的數(shù)據(jù)并進行相應的更新[10]。本系統(tǒng)使用的接口請求是Axios，Axios在取消請求、超時處理、進度處理等方面具有獨特的優(yōu)勢，并且能將異步請求同步化，優(yōu)化用戶體驗。

ViewModel層是MVVM框架中的核心部分，通過它將View層和Model層聯(lián)系起來。通過v-model指令實現(xiàn)數(shù)據(jù)的雙向綁定，一方面能夠響應View層中用戶的操作，進行相應的處理后更新Model層的數(shù)據(jù)；另一方面調(diào)用Model層中的數(shù)據(jù)，進行相應的處理后展示在View層。

View層是直接面向用戶的，其目標是完成數(shù)據(jù)的展示以及用戶與系統(tǒng)的交互。界面設計時可以通過調(diào)用第三方的組件庫和樣式庫，本系統(tǒng)選擇的是Na?ve-UI組件庫和Tailwindcss樣式庫，以實現(xiàn)更佳的用戶界面設計。并且，在Vue3中，組件化的開發(fā)模式使得各組件之間能夠以接口的方式建立通信，代碼的開發(fā)及修改更加靈活，本系統(tǒng)中的各組件通過路由（Vue Router）實現(xiàn)定向，例如登錄驗證成功后通過路由跳轉(zhuǎn)到系統(tǒng)主頁面。

界面開發(fā)完成后使用Electron進行窗口操作的設計，包括窗口最小化、關閉窗口、置頂時邊緣隱藏等，最后進行打包，形成桌面應用。

3.2 后端數(shù)據(jù)視圖生成

在PostgreSQL數(shù)據(jù)庫中定義出基于對象類型的視圖（即結算任務表），用于存儲結算記錄[11]。

結算任務表視圖的創(chuàng)建語句示例如下：

3.3 系統(tǒng)功能模塊實現(xiàn)

3.3.1 系統(tǒng)登錄模塊

系統(tǒng)登錄流程如圖4所示。密碼登錄中，收費員輸入工號密碼后，利用Vue3的雙向綁定將從前端捕獲的用戶輸入加密后傳輸至HIS登錄校驗接口以完成用戶身份的驗證。掃碼登錄中，收費員掃描企業(yè)微信的二維碼后，系統(tǒng)調(diào)用企業(yè)微信用戶認證接口進行身份驗證。身份驗證通過后會跳轉(zhuǎn)至結算任務界面，同時通過Electron的ipcRenderer功能發(fā)送窗口大小變更命令。系統(tǒng)登錄界面如圖5所示。

圖4 床邊結算指引系統(tǒng)登錄流程圖

圖5 床邊結算指引系統(tǒng)登錄界面

3.3.2 結算任務查詢模塊

利用Na?ve-UI中的Tabs組件和Data Table組件設計結算任務查詢模塊，將病床號設置為篩選字段，病區(qū)地址設置為索引和篩選字段。結算任務查詢流程如圖6所示，收費員通過點擊結算任務展示界面Tabs中的“未結算”發(fā)出查詢請求，后臺會回傳未結算任務的相關信息并按要求展示在前端界面，收費員可以查看今日任務中待結算的患者及其病房位置信息，并且可以按照病床號和病區(qū)位置進行篩選和排序。結算任務查詢界面如圖7（a）所示，結算病區(qū)篩選界面如圖7（b）所示。

圖6 結算任務查詢流程圖

圖7 結算任務查詢及結算病區(qū)篩選界面

3.3.3 結算任務狀態(tài)查詢模塊

利用Na?ve-UI中的Tabs組件和Data Table組件設計結算任務狀態(tài)查詢模塊。結算任務狀態(tài)查詢流程如圖8所示，當收費員點擊結算任務展示界面Tabs中的“已結算”發(fā)出查詢已結算任務請求，后臺會回傳已結算任務的相關信息，前端獲取到數(shù)據(jù)后刷新界面，從未結算任務列表切換至已結算任務列表，收費員即可查看已經(jīng)完成的結算任務。同時，收費員可以通過信息欄中的待結算數(shù)量和已結算數(shù)量掌握結算任務進度，及時調(diào)整工作安排。如圖9所示，收費員可在已結算界面查看結算任務狀態(tài)的相關信息。

圖8 結算任務狀態(tài)查詢流程圖

圖9 結算任務狀態(tài)查詢界面

3.3.4 結算任務管理模塊

為方便收費員工作，提高工作效率，收費處會提前一天統(tǒng)計第二天全院需要出院結算的患者總量，并將其分配至若干個移動結算車。通過Na?ve-UI中的Drawer、Radio等組件設計結算車輛編號變更界面，變更流程如圖10所示。收費員點擊車輛編號圓框，會彈出車輛信息更改界面[如圖11（a）所示]，選擇車輛編號后點擊“確定”，通過Vue3的雙向綁定會將相應的車輛編號傳至后端，后端接收后返回對應車輛編號的結算任務，刷新結算任務列表并更新移動結算車編號[如圖11（b）所示]。系統(tǒng)中移動結算車的編號并不是移動結算車設備的編號，而是一組結算任務的編號，收費員、移動結算車、結算任務相互獨立，因此，通過該模塊可實現(xiàn)移動結算車和收費員的靈活調(diào)配。

圖10 結算任務變更流程圖

圖11 結算任務管理界面

4 系統(tǒng)應用

床邊結算指引系統(tǒng)已在我院住院樓脊柱外科眼科病區(qū)、神經(jīng)內(nèi)科病區(qū)、呼吸與危重癥醫(yī)學科病區(qū)、肝膽甲乳外科病區(qū)投入使用，2名收費員使用本系統(tǒng)為300多名患者提供了床邊結算服務，平均每人每天結算8位患者，患者由出院登記至結算的平均等待時間從原來的1.5 h縮短至30 min，減輕窗口結算壓力的同時顯著縮短了患者的結算等待時長。本系統(tǒng)為收費員提供了界面簡潔、功能易用的床邊結算指引服務，使收費員對待床邊結算患者的位置定位更為直接高效，為床邊結算流程的優(yōu)化以及收費員床邊結算工作體驗的提升奠定了基礎。本系統(tǒng)在提升床邊結算效率方面的優(yōu)勢主要體現(xiàn)在以下3個方面：

（1）結算任務內(nèi)容清晰。

本系統(tǒng)明確展示了床邊結算患者的姓名、床位號、病房位置等信息，可避免收費員在護士站與病房間的來回奔波。同時考慮到收費員的個人工作特點，在病房號和病區(qū)位置處加入了排序功能，并且能按病區(qū)進行篩選，實現(xiàn)了結算指引功能的同時又滿足收費員個性查看并調(diào)整結算任務安排的需求，這是在優(yōu)化床邊結算流程方面的有效嘗試。

（2）結算任務狀態(tài)同步。

過去如需查找或核對患者結算狀態(tài)信息，收費員需要在HIS中根據(jù)患者身份識別碼等信息進行搜索查驗。而本系統(tǒng)中數(shù)據(jù)直接對接HIS后臺數(shù)據(jù)庫，當收費員收費完成后，患者的結算信息會從未結算界面轉(zhuǎn)到已結算界面，收費員能夠及時掌握結算任務狀態(tài)。本系統(tǒng)的應用實現(xiàn)了結算任務狀態(tài)的實時反饋，收費員無需切換HIS的結算功能頁面，節(jié)省了結算狀態(tài)確認的時間成本。

（3）結算任務調(diào)度靈活。

本系統(tǒng)將結算任務與虛擬車輛編號綁定，不同結算員可以通過選擇不同車輛編號領取相應的結算任務，為收費處管理人員協(xié)調(diào)收費員安排提供了便利，也為收費員實際工作的靈活調(diào)度提供了有力的保障。

5 結語

本文設計了基于Vue3和Electron的床邊結算指引系統(tǒng)，并通過實際應用驗證了系統(tǒng)功能，在頁面內(nèi)容顯示以及與用戶交互設計方面，達到了預期的效果，滿足了收費員快速定位待床邊結算患者的位置的需求。雖然本系統(tǒng)達到了預期的設計目標，但還是存在一些不足：目前結算任務列表主要通過人工分配，增加了重復性的工作，因此下一步擬使用基于時間-空間的聚類算法優(yōu)化結算任務分配方式，減輕收費處管理人員的工作量。