中信建设有限责任公司内部网站,湘潭专业网站建设湘潭振企专业,找工程项目,wordpress 移动主菜单权限管理
效果展示#xff1a; #xff08;1#xff09;权限列表 #xff08;2#xff09;角色列表 其中的分配权限功能
权限列表功能开发
新功能模块#xff0c;需要创建新分支 git branch 查看所有分支#xff08;*表示当前分支#xff09; git checkout -b ri…权限管理
效果展示 1权限列表 2角色列表 其中的分配权限功能
权限列表功能开发
新功能模块需要创建新分支 git branch 查看所有分支*表示当前分支 git checkout -b rights 创建新分支rights并切换到该分支上 git push -u origin rights 把本地的rights分支推送到云端origin仓库进行保存分支名为rights
先创建对应的组件再创建对应的路由规则 结果展示
绘制权限列表的基本页面布局
面包屑导航卡片视图Table数据表格
权限列表的数据获取 权限列表数据的表格渲染 角色列表功能开发
用户、角色、权限之间的关系
用户代表电商后台管理系统的每一个账号 权限代表账号所拥有的能力对一个列表来说分为增删改查这些操作 角色代表不同用户拥有的不同权限 首先把权限分配给不同的角色再把角色分配给对应的用户把用户绑定了不同角色每个角色下拥有不同权限
角色列表路由切换
创建组件创建对应路由规则
角色列表基础布局获取角色列表相关数据
基础布局 面包屑导航卡片视图区域添加角色按钮Table列表 获取角色列表数据
表格中角色列表数据的渲染 增删改查
添加角色 点击按钮弹出添加角色的对话框并添加表单校验规则 添加角色表单关闭对话框后的重置 添加角色前的表单预校验并实现真正的添加角色功能
修改角色 4. 添加修改角色表单的内容并撰写对应验证规则 5. 展示修改角色的对话框 6. 修改表单后关闭对话框需要进行重置操作
预校验及修改角色信息操作
删除角色 8. 在删除角色之前先弹出提示是否确认删除的对话框弹框MessageBox 9. 判断是否确认删除确认发送delete请求通过id删除用户取消返回提示信息
角色下权限数据的渲染
pre标签主要用来渲染带有转义字符的空格符和换行符等 的文本内容字符串
通过作用域插槽拿到scope.row通过scope.row拿到对应的角色信息通过三层for循环把对应的权限渲染出来每循环一次往tag里放标签 通过scope.row.children拿到一级权限 在正常形态下:span默认为24。假如:span为12那么就是原本列数的一半。 一级权限的美化 二级权限及三级权限 将一级权限和二级权限纵向居中 为展开项中每一个权限标签增加一个删除小图标并实现删除权限功能
为每个标签添加closable属性可定义标签是否可移除 首先设置第三权限的删除操作 **☆优化点**解决删除权限后关闭展开项无法及时看到删除哪项权限的问题。由于delete请求返回的data, 是当前角色下最新的权限数据故可用res.children res.data 为当前角色重新赋值权限避免当前页面的完整渲染提升用户体验。 为第二权限、第一权限增加删除功能
分配权限功能的实现
弹出对话框以树形结构获取所有权限数据 在对话框中显示树形结构数据 组件按需导入全局注册 树形控件基本展示 进一步优化树形控件
在每个节点前添加复选框show-checkbox选中某节点时不能只是选中文本要默认选中它的id值 3. 默认展开所有节点
已有权限在树上的默认勾选功能
在点按钮的同时将当前角色的所有第三权限的id放到一个数组中通过属性绑定将这个数组交给default-checked-keys 以递归的方式获取第三权限的id 在showSetRightDialog函数中调用getLeafKeys函数 解决bug 关闭分配权限对话框未清空之前的权限数据导致后面角色的对话框包含之前的数据每次点开不同角色的分配角色对话框数据越来越多 解决方法每次关闭对话框清空defKeys数组
具体分配权限的功能 在点击“分配权限”按钮时先立即把该角色的id保存到data中供后面发送请求使用 点击“确定”按钮时把所有全选中节点的id和半选中节点的id合并成完整数组 tree组件中获取全节点和半节点的id值以数组形式返回的两个函数 JavaScript中的三个点(…)扩展运算符是一种简写语法用于取出参数对象的所有可遍历属性值的集合展开为函数参数列表或数组。 把这个数组拼接形成字符串中间以’,拼接发送角色授权的请求
