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

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

一、顯示記錄列表功能

1.顯示列表組件

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

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

2.分頁組件

3.條件查詢組件

二、刪除記錄功能

1.刪除單條記錄

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

2.批量刪除記錄

三、鎖定和解鎖功能

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

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

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

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

四、添加記錄功能

五、修改功能

六、解決組件重用問題

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

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

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

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

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

項目已同步至github：https://github.com/Guoqianliang/yygh_admin

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

最新評論