分布式医疗挂号系统(七) | 开发医院设置页面

ゝ一世哀愁。 2022-11-18 02:26 189阅读 0赞

![完成后的医院设置后台页面][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5MTA1OA_size_1_color_FFFFFF_t_70]

@\[toc\](分布式医疗挂号系统(七) | 开发医院设置页面)

在分布式医疗挂号系统中，前端主要使用的两个技术是`Vue`和`ElementUI`。医院设置微服务模块的后端之前已经完成，现在需要借助Vue+ElementUI完成医院设置微服务模块的前端页面：

# 一、显示记录列表功能 #

## 1.显示列表组件 ##

[带斑马纹表格][Link 1]：在页面显示所有记录列表使用ElementUI的`表格组件`会更加直观，我们选用带斑马纹表格组件。

![带斑马纹表格组件][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5MTA1OA_size_1_color_FFFFFF_t_70 1]

## 2.分页组件 ##

![分页组件][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5MTA1OA_size_1_color_FFFFFF_t_70 2]

## 3.条件查询组件 ##

![条件查询组件][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5MTA1OA_size_1_color_FFFFFF_t_70 3]

# 二、删除记录功能 #

## 1.删除单条记录 ##

要完成删除一条记录的功能，我们的思路是为每一条记录添加一个删除按钮，点击按钮后会触发事件，调用方法进而实现功能。

![删除操作流程][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5MTA1OA_size_1_color_FFFFFF_t_70 4]

## 2.批量删除记录 ##

![批量删除记录][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5MTA1OA_size_1_color_FFFFFF_t_70 5]

# 三、锁定和解锁功能 #

> 在医院设置表创建时，我们对表中的`status字段`做过约定：
> 
>  *  status = 1：记录可用，处于解锁状态。
>  *  status = 0：记录不可用，处于锁定状态。
> 
> 我们现在需要做的锁定和解锁功能就是，当这条记录可用时，将其锁定，不可用时取消锁定。

![锁定和解锁功能][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5MTA1OA_size_1_color_FFFFFF_t_70 6]

# 四、添加记录功能 #

![添加记录功能][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5MTA1OA_size_1_color_FFFFFF_t_70 7]

# 五、修改功能 #

![编辑后回显数据][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5MTA1OA_size_1_color_FFFFFF_t_70 8]  
![保存后跳转至显示列表][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5MTA1OA_size_1_color_FFFFFF_t_70 9]

# 六、解决组件重用问题 #

在上述完成的医院设置前端页面中，存在一个小bug，当点击修改按钮，回显所有数据后，若在此时点击医院设置添加按钮，并不会将数据清空。我们的保存和修改是公用了一个页面(组件)来完成的开发。

> 问题：使用`vue-router`导航切换时，如果两个路由都渲染了同一个组件，那么组件的生命周期方法(created或mounted)不会再次被调用。组件会被重用，即显示上一个路由渲染出来的页面。
> 
>  *  解决方案：可以在 `router-view`上加上一个唯一的key，来保证路由切换时都会重新触发生命周期方法，确保组件被重新初始化。

这个解决方案，在我们的Vue框架中已经写好，我们在`src/views/layout/components/AppMain.vue` 文件下将其打开即可：  
![解决组件重用问题][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5MTA1OA_size_1_color_FFFFFF_t_70 10]  
至此，分布式医疗挂号系统的后台页面功能开发已经完成。

> 项目已同步至github：[https://github.com/Guoqianliang/yygh\_admin][https_github.com_Guoqianliang_yygh_admin]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5MTA1OA_size_1_color_FFFFFF_t_70]: /images/20221022/a863526510bb471a8fc752e50ac20d4c.png
[Link 1]: https://element.eleme.cn/#/zh-CN/component/table
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5MTA1OA_size_1_color_FFFFFF_t_70 1]: /images/20221022/af85202a59524829b14954b0f0633492.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5MTA1OA_size_1_color_FFFFFF_t_70 2]: /images/20221022/568dd3828dfe45a88602dadbec14bef5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5MTA1OA_size_1_color_FFFFFF_t_70 3]: /images/20221022/3ef1a1d59f4f45bebe72e50489a64cac.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5MTA1OA_size_1_color_FFFFFF_t_70 4]: /images/20221022/a83bb7ecac4244ad9bf0bcc4fa7c5be6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5MTA1OA_size_1_color_FFFFFF_t_70 5]: /images/20221022/d86738ec0a5f49ddbb73c317d0d85e62.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5MTA1OA_size_1_color_FFFFFF_t_70 6]: /images/20221022/1cb021fcd43e4d35bea1f8c4c06f24a6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5MTA1OA_size_1_color_FFFFFF_t_70 7]: /images/20221022/94ef1331f7b44e1d8c7a6706e1eb813a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5MTA1OA_size_1_color_FFFFFF_t_70 8]: /images/20221022/69afd50120c9428ebf9e59acc528b331.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5MTA1OA_size_1_color_FFFFFF_t_70 9]: /images/20221022/c1beac7439b94190a332b80a189bd6af.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5MTA1OA_size_1_color_FFFFFF_t_70 10]: /images/20221022/f3a18395c2c9497fa7c6d3e0a24d0d82.png
[https_github.com_Guoqianliang_yygh_admin]: https://github.com/Guoqianliang/yygh_admin