在分布式醫(yī)療掛號(hào)系統(tǒng)中宿礁，前端主要使用的兩個(gè)技術(shù)是Vue和ElementUI换吧。醫(yī)院設(shè)置微服務(wù)模塊的后端之前已經(jīng)完成泌霍，現(xiàn)在需要借助Vue+ElementUI完成醫(yī)院設(shè)置微服務(wù)模塊的前端頁面：
一、顯示記錄列表功能
1.顯示列表組件
帶斑馬紋表格：在頁面顯示所有記錄列表使用ElementUI的表格組件會(huì)更加直觀教沾，我們選用帶斑馬紋表格組件蒲跨。
2.分頁組件
3.條件查詢組件
二、刪除記錄功能
1.刪除單條記錄
要完成刪除一條記錄的功能授翻，我們的思路是為每一條記錄添加一個(gè)刪除按鈕或悲，點(diǎn)擊按鈕后會(huì)觸發(fā)事件，調(diào)用方法進(jìn)而實(shí)現(xiàn)功能堪唐。
2.批量刪除記錄
三隆箩、鎖定和解鎖功能
在醫(yī)院設(shè)置表創(chuàng)建時(shí)，我們對(duì)表中的
status字段做過約定：
- status = 1：記錄可用羔杨，處于解鎖狀態(tài)捌臊。
- status = 0：記錄不可用，處于鎖定狀態(tài)兜材。
我們現(xiàn)在需要做的鎖定和解鎖功能就是理澎，當(dāng)這條記錄可用時(shí)，將其鎖定曙寡，不可用時(shí)取消鎖定糠爬。
四、添加記錄功能
五举庶、修改功能
六执隧、解決組件重用問題
在上述完成的醫(yī)院設(shè)置前端頁面中，存在一個(gè)小bug，當(dāng)點(diǎn)擊修改按鈕镀琉，回顯所有數(shù)據(jù)后峦嗤，若在此時(shí)點(diǎn)擊醫(yī)院設(shè)置添加按鈕，并不會(huì)將數(shù)據(jù)清空屋摔。我們的保存和修改是公用了一個(gè)頁面(組件)來完成的開發(fā)烁设。
問題：使用
vue-router導(dǎo)航切換時(shí)，如果兩個(gè)路由都渲染了同一個(gè)組件钓试，那么組件的生命周期方法(created或mounted)不會(huì)再次被調(diào)用装黑。組件會(huì)被重用，即顯示上一個(gè)路由渲染出來的頁面弓熏。
- 解決方案：可以在
router-view上加上一個(gè)唯一的key恋谭，來保證路由切換時(shí)都會(huì)重新觸發(fā)生命周期方法，確保組件被重新初始化挽鞠。
這個(gè)解決方案箕别，在我們的Vue框架中已經(jīng)寫好，我們?cè)?code>src/views/layout/components/AppMain.vue 文件下將其打開即可：
至此滞谢，分布式醫(yī)療掛號(hào)系統(tǒng)的后臺(tái)頁面功能開發(fā)已經(jīng)完成串稀。
項(xiàng)目已同步至github：https://github.com/Guoqianliang/yygh_admin
