【需求】：如下图所示，当点击左侧仓库时，显示对应的页面权限以及按钮权限。
【技术点】：处理树状结构
需求图
【页面代码】
let targetArr = [],
expandArr = []
let authorityArr = []
if (res.datas && res.datas.length) {
getAllKeysValues(res.datas, targetArr, expandArr, authorityArr, 'id', 'subs')
}
addCheckedFlag(this.rigthTreeData, targetArr, expandArr, authorityArr, 'id', 'subs')
【工具类函数代码】
// 获取数组（包括子节点）的全部子节点id
export function getAllKeysValues(treeArr, targetArr, expandArr, authorityArr, key = 'id', children = 'subs') {
treeArr.map(item => {
expandArr.push(item[key])
if (item.hasOwnProperty('authorityDtos') && item['authorityDtos'] && item['authorityDtos'].length) {
item['authorityDtos'].map(it => {
authorityArr.push(it['value'])
})
}
if (item.hasOwnProperty(children) && item[children].length) {
getAllKeysValues(item[children], targetArr, expandArr, authorityArr, key, children)
} else {
targetArr.push(item[key])
}
})
}
// 给过滤出的id加选中标识
export function addCheckedFlag(treeArr, idsArr, expandArr, authorityArr, key = 'id', children = 'subs') {
treeArr.map(item => {
item.checked = false
if (item.hasOwnProperty('authorityDtos') && item['authorityDtos'] && item['authorityDtos'].length) {
item['authorityDtos'].map(its => {
if (authorityArr.findIndex(it => it == its['id']) != -1) {
its.checked = true
} else {
its.checked = false
}
})
} else {
if (idsArr.findIndex(it => it == item[key]) != -1) {
item.checked = true
}
}
if (expandArr.findIndex(it => it == item[key]) != -1) {
item.expand = true
} else {
item.expand = false
}
if (item.hasOwnProperty(children) && item[children].length) {
addCheckedFlag(item[children], idsArr, expandArr, authorityArr, key, children)
}
})
}
【编程逻辑】：有按钮权限时就一定有页面权限，没有按钮权限时再去考虑有无页面权限！
- 接口返回的数据为：
"datas":[
{
"id":1320,
"name":"工作台",
"url":"",
"parentId":0,
"terminalOfType":"web",
"tenantNumber":"20",
"functionId":0,
"routeView":"/wms/workplace",
"sort":1,
"icon":"ios-desktop",
"subs":[
{
"id":1414,
"name":"大屏",
"url":"",
"parentId":1320,
"terminalOfType":"web",
"tenantNumber":"20",
"functionId":0,
"routeView":"/wms/daping",
"sort":2,
"icon":"ios-pie",
"subs":[
],
"authorityDtos":null,
"nodeName":null,
"nodeId":1414
}
],
"authorityDtos":null,
"nodeName":null,
"nodeId":1320
},
{
"id":1324,
"name":"企业管理",
"url":"",
"parentId":0,
"terminalOfType":"web",
"tenantNumber":"20",
"functionId":0,
"routeView":"/wms/company/",
"sort":2,
"icon":"ios-contacts",
"subs":[
{
"id":1325,
"name":"组织架构",
"url":"",
"parentId":1324,
"terminalOfType":"web",
"tenantNumber":"20",
"functionId":0,
"routeView":"/wms/company/framework",
"sort":1,
"icon":"ios-map-outline",
"subs":[
{
"id":1326,
"name":"人员信息",
"url":"/person",
"parentId":1325,
"terminalOfType":"web",
"tenantNumber":"20",
"functionId":300,
"routeView":"/wms/company/userManage",
"sort":2,
"icon":null,
"subs":[
],
"authorityDtos":[
{
"value":"300.4",
"name":"列表",
"personId":null,
"menuName":"人员信息",
"menuId":1326,
"source":null,
"wareId":null
},
{
"value":"300.2",
"name":"编辑",
"personId":null,
"menuName":"人员信息",
"menuId":1326,
"source":null,
"wareId":null
}
],
"nodeName":null,
"nodeId":1326
}
],
"authorityDtos":null,
"nodeName":null,
"nodeId":1325
}
],
"authorityDtos":null,
"nodeName":null,
"nodeId":1324
},
{
"id":1329,
"name":"仓库管理",
"url":"",
"parentId":0,
"terminalOfType":"web",
"tenantNumber":"20",
"functionId":0,
"routeView":"/wms/depot/",
"sort":3,
"icon":"ios-home",
"subs":[
{
"id":1345,
"name":"出库管理",
"url":"",
"parentId":1329,
"terminalOfType":"web",
"tenantNumber":"20",
"functionId":0,
"routeView":"/wms/depot/outstorage",
"sort":4,
"icon":"logo-chrome",
"subs":[
{
"id":1346,
"name":"领料出库",
"url":"",
"parentId":1345,
"terminalOfType":"web",
"tenantNumber":"20",
"functionId":0,
"routeView":"/wms/depot/outStorageManageRWB",
"sort":0,
"icon":"",
"subs":[
],
"authorityDtos":null,
"nodeName":null,
"nodeId":1346
}
],
"authorityDtos":null,
"nodeName":null,
"nodeId":1345
}
],
"authorityDtos":null,
"nodeName":null,
"nodeId":1329
}
]
网友评论