专业网站建设企业,最好的微网站建设价格,组织建设方面存在的问题,广州营销策划公司排行目录一#xff1a;先获取所有权限tree二#xff1a;在获取所有该角色能有的权限tree三#xff1a;递归处理勾选tree节点由于项目是从0-1开始构建的 rbac都需要重新构建对接 所以涉及到了权限管理和菜单管理 一级菜单包含多个二级菜单 若二级不全选#xff0c;则一级显示 半…
目录一先获取所有权限tree二在获取所有该角色能有的权限tree三递归处理勾选tree节点由于项目是从0-1开始构建的 rbac都需要重新构建对接 所以涉及到了权限管理和菜单管理 一级菜单包含多个二级菜单 若二级不全选则一级显示 半选 状态若二级全选中则一级显示 全选 状态在下次进入编辑页面时需要将当前选中租户的权限回显出来 说明二级下面会有多个三级菜单以此类推 整体思路很简单初始化树 - 处理 el-tree 回显 - 递归处理所有层级菜单选中的id
不处理情况下 只要勾选一个子节点回来接收到的父节点数据 会显示 会显示所有子节点数据
一先获取所有权限tree
Template
Form :rulesrules registerregistertemplate #menusel-tree reftreeRef node-keyid :datamenuTree :propsdefaultProps check-changehandleSelectionChange show-checkbox //template/Form// 权限Treelet menuTree reftree[]([])const defaultProps {label: name,children: subMenus}const multipleSelection ref()const treeRef ref()const currentIds ref()//获取菜单树const getMenus async () {const { data, status } await roleApi.roleMenuTree()if (status 200) {menuTree.value dataif (props.currentRow) {console.log(props.currentRow.id, currentRow)getRoleMenus(props.currentRow.id)}}}二在获取所有该角色能有的权限tree //查看角色关联菜单const getRoleMenus async (id: any) {const { data, status } await roleApi.roleMenuById(id)if (status 200) {currentIds.value []handleObj(data)nextTick(() {currentIds.value.forEach((item: any) {// 选中树获取到树的节点如果存在isLeaf则设置回显const node treeRef.value.getNode(item)if (node.isLeaf) {treeRef.value.setChecked(node, true)}})})}}三递归处理勾选tree节点 // 递归处理勾选tree节点const handleObj (data: any) {data.forEach((item: any) {currentIds.value.push(item.id)if (item.subMenus item.subMenus.length) {handleObj(item.subMenus)}})}处理后的效果
