项目里遇到的一个需求:在权限树勾选权限后,向后端发送对应的权限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
}
其中使用了扁平化处理后的树状数组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
}