分布式醫(yī)療掛號(hào)系統(tǒng) | 開發(fā)醫(yī)院設(shè)置頁(yè)面

在分布式醫(yī)療掛號(hào)系統(tǒng)中，前端主要使用的兩個(gè)技術(shù)是Vue和ElementUI。醫(yī)院設(shè)置微服務(wù)模塊的后端之前已經(jīng)完成，現(xiàn)在需要借助Vue+ElementUI完成醫(yī)院設(shè)置微服務(wù)模塊的前端頁(yè)面：

一、顯示記錄列表功能

1.顯示列表組件

帶斑馬紋表格開發(fā)文檔：

在頁(yè)面顯示所有記錄列表使用ElementUI的表格組件會(huì)更加直觀，我們選用帶斑馬紋表格組件。

2.分頁(yè)組件

3.條件查詢組件

二、刪除記錄功能

1.刪除單條記錄

要完成刪除一條記錄的功能，我們的思路是為每一條記錄添加一個(gè)刪除按鈕，點(diǎn)擊按鈕后會(huì)觸發(fā)事件，調(diào)用方法進(jìn)而實(shí)現(xiàn)功能。

2.批量刪除記錄

三、鎖定和解鎖功能

在醫(yī)院設(shè)置表創(chuàng)建時(shí)，我們對(duì)表中的status字段做過(guò)約定：

status = 1：記錄可用，處于解鎖狀態(tài)

status = 0：記錄不可用，處于鎖定狀態(tài)

我們現(xiàn)在需要做的鎖定和解鎖功能就是，當(dāng)這條記錄可用時(shí)，將其鎖定，不可用時(shí)取消鎖定。

四、添加記錄功能

五、修改功能

六、解決組件重用問(wèn)題

在上述完成的醫(yī)院設(shè)置前端頁(yè)面中，存在一個(gè)小bug，當(dāng)點(diǎn)擊修改按鈕，回顯所有數(shù)據(jù)后，若在此時(shí)點(diǎn)擊醫(yī)院設(shè)置添加按鈕，并不會(huì)將數(shù)據(jù)清空。我們的保存和修改是公用了一個(gè)頁(yè)面(組件)來(lái)完成的開發(fā)。

問(wèn)題：使用vue-router導(dǎo)航切換時(shí)，如果兩個(gè)路由都渲染了同一個(gè)組件，那么組件的生命周期方法(created或mounted)不會(huì)再次被調(diào)用。組件會(huì)被重用，即顯示上一個(gè)路由渲染出來(lái)的頁(yè)面。

解決方案：可以在 router-view上加上一個(gè)唯一的key，來(lái)保證路由切換時(shí)都會(huì)重新觸發(fā)生命周期方法，確保組件被重新初始化。

這個(gè)解決方案，在我們的Vue框架中已經(jīng)寫好，我們?cè)?code>src/views/layout/components/AppMain.vue 文件下將其打開即可：

至此，分布式醫(yī)療掛號(hào)系統(tǒng)的后臺(tái)頁(yè)面功能開發(fā)已經(jīng)完成。

項(xiàng)目已同步至github：https://github.com/Guoqianliang/yygh_admin

以上就是VUE開發(fā)分布式醫(yī)療掛號(hào)系統(tǒng)的醫(yī)院設(shè)置頁(yè)面步驟的詳細(xì)內(nèi)容，更多關(guān)于VUE開發(fā)分布式醫(yī)療掛號(hào)系統(tǒng)醫(yī)院設(shè)置頁(yè)面的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！