1主界面

2、权限列表

权限列表展示,采用 v-if 的方式进行展示

3、角色列表

通过权限管理模块控制不同的用户可以进行哪些操作,具体可以通过角色的方式进行控制,即每个用户分配一个特定的角色,角色包括不同的功能权限。 

 

通过 el-table-column 组件的 type =“expand” 方式实现表格行展开效果。

 

点击权限菜单的删除按钮后,调用后台接口删除对应权限和其下的子权限,(removeRightById用于删除对应的权限)。 

 

 

给角色分配权限,实现角色分配权限对话框布局,控制对话框的显示和隐藏。

 

 

 

对话框显示时调用后台接口加载权限列表数据,完成树形权限菜单的展示。

 选中默认的权限,保存选中的权限,调用后台接口完成角色权限的分配。

 

 

 

 4、添加、删除、编辑

与用户列表同理,实现添加、删除、编辑等功能。

添加功能:首先点击按钮实现对话框出现,点击确定按钮向后台发起添加请求。

编辑功能:首先点击按钮实现对话框出现,同时向后台发起显示数据的请求并将数据显示到页面,编辑后点击确定按钮向后台发起编辑请求。

删除功能:通过用户id向后台发起删除请求,此处无需对话框出现,通过messageBox弹框进行确认删除功能。

 

posted on 2021-06-01 10:03  李起桉  阅读(391)  评论(0编辑  收藏  举报