el |
您所在的位置：网站首页 › discuz33破解权限 › el |
el
|
需求描述
项目里遇到的一个需求：在权限树勾选权限后，向后端发送对应的权限id数组 后端对id有这样的要求： 勾选了父权限则默认获取其所有子权限，故该情况下只发送该父权限id，而不要其子权限id 若勾选了某父权限的部分子权限（数量 < parentPermissions.children.length），则不过滤它们的父权限id， 只保留选择的其子权限的id 预期效果大概就是这样（图中数据都是测试使用随便设置的，有些没逻辑） 参数: gottenNodes：通过el-tree的this.$refs.tree.getCheckedNodes()获得，是选择的节点的node数组 checkId: 通过el-tree的this.$refs.tree.getCheckedKeys()获得，是选择的节点的key数组，也是我们需要过滤的数组 import store from '@/store' /** * 用于配置角色权限，根据接口要求，需要过滤掉el-tree返回的父级节点 * 可以直接利用它的props让父子不严格关联，但是我不太想要那种情况下的表现效果 * @param gottenNodes el-tree返回的被选择的节点数组， 这个数组是一维的 * @param checkedId el-tree 返回的被选择的初始的id数组，这里面可能存在父子id都在的情况 * @return 从nodes中提取出的parentId对象数组，每个parent对象含有: 父权限id和其children的id数组 */ export function filterParentId(gottenNodes, checkedId){ let pId =[] // 1、获取nodes中的所有的parentId和其children的id数组，加入集合 let nodeKids = [] for(let i = 0; i < gottenNodes.length; i++){ if(gottenNodes[i].hasChildren){ nodeKids = store.getters.permissionsFalt.find((p) => p.id == gottenNodes[i].id).children.map((child) => { return child.id }) pId.push({ id: gottenNodes[i].id, children: nodeKids }) } nodeKids = [] } // 借助Set去重并深拷贝 pId = [...new Set( pId.map(p => JSON.stringify(p)) )].map(ever => JSON.parse(ever)) // 2、然后进行过滤，过滤的思想目前是这样: // 出于这样的业务需求: 选择了父权限，那么默认拥有其所有子权限 // 如果选择了子权限（无children），那么该子权限就是权限树一支的末端，不再传该子权限的父权限 // 于是得到结论: 当某一父权限被选中，且checkedId中它的子权限数量少于它的children.length，那么舍弃父权限id // 如果等于children.length，那么舍弃全部子权限，保留父权限 // 3、遍历pId和初始权限数组，开始过滤 return checkAndFilter(pId, checkedId) } /** * 过滤权限id * @param pId 处理得到的父亲权限信息 * @param checkedId el-tree返回的源数组 * @return 过滤结果 */ function checkAndFilter(pId, checkedId){ let cnt = 0, temp = [] //需要深拷贝 let copy = JSON.parse(JSON.stringify(checkedId)) for(let i = 0; i < pId.length; i++){ if(!pId[i].children.length){ continue } copy.forEach((item) => { if(pId[i].children.includes(item)){ cnt++ temp.push(item) } }) if(!cnt){ continue }else if(cnt < pId[i].children.length){ checkedId.splice(checkedId.indexOf(pId[i].id), 1) }else{ temp.forEach((t) => { checkedId.splice(checkedId.indexOf(t), 1) }) } // 已经遍历过的数据移出数组 cnt = 0 if(temp != []){ temp.forEach((t) => { copy.splice(copy.indexOf(t), 1) }) temp = [] } } return checkedId } 其中用到了一个将树状数组permissionsTree扁平化为一维数组permissionsFalt的API /** * 树状数组扁平化 * @param arr 需要扁平化的树状数组 * @return 处理后的扁平化数组 */ export function faltten(arr){ var res = [] var out = [] res = res.concat(arr) while(res.length){ var fir = res.shift() if(fir.children.length){ res = res.concat(fir.children) //delete fir.children } out.push(fir) } return out } |
【本文地址】
今日新闻 |
推荐新闻 |