通過id、parentId建立樹形結構
後臺傳輸的json
數據,這裏爲了不影響閱讀,刪除掉了不必要的部分
數據格式
{
"httpCode": 200,
"code": 200,
"message": "操作成功",
"data": {
"orgList": [ // 租戶下所有部門
{
"id": 88, //部門id
"name": "部門1", //部門名稱
"orgCode": "/38/88/", //部門code,以及部門格式爲/**/,二級部門格式爲/**/**/,以此類推
"parentId": null, //部門的上級部門id,如果parentId爲null表示該部門爲頂級部門
"tenantId": 38, //租戶Id
"binds": 0 //該部門下綁定車輛數
},
{
"id": 90,
"name": "part2",
"orgCode": "/38/88/90/",
"parentId": 88,
"tenantId": 38,
"binds": 0
},
{
"id": 92,
"name": "part3",
"orgCode": "/38/88/90/92/",
"parentId": 90,
"tenantId": 38,
"binds": 0
},
{
"id": 93,
"name": "part4",
"orgCode": "/38/88/90/92/93/",
"parentId": 92,
"tenantId": 38,
"binds": 0
},
{
"id": 96,
"name": "部門2",
"orgCode": "/38/96/",
"parentId": null,
"tenantId": 38,
"binds": 1
},
{
"id": 98,
"name": "part22",
"orgCode": "/38/96/98/",
"parentId": 96,
"tenantId": 38,
"binds": 1
},
{
"id": 100,
"name": "111",
"orgCode": "/38/88/90/92/93/100/",
"parentId": 93,
"tenantId": 38,
"binds": 0
}
],
"tenantInfo": { //租戶信息
"id": 38, //租戶Id
"name": "測試租戶", //租戶名稱
"orgCode": "/38/", //租戶code
"parentId": null, //因爲在設計中租戶就是頂級部門,所以不會有parentId
"tenantId": 38, //租戶id
"binds": 1 //租戶下綁定的總車輛數
}
}
}
這裏後臺沒有直接返回樹形結構是由於有多處使用該接口,而只有在該頁面需要做成樹狀圖,所以需要前端處理下數據格式,完成效果如下
實現方法
大概思路,因爲返回的數據中orgCode
是有規律的,所以新建兩個Map
結構,level
通過orgCode
將數據劃分爲不同的級別,然後以級別爲鍵值對數據進行存儲,childrenNode
通過以parnetId
爲鍵值來對數據進行存儲,存儲完成之後,通過findSuperiors
遞歸將childrenNode
中的數據按照級別由高到低的通過parnetId
填存到level
中
//遞歸結構樹
findSuperiors(max, map, children, min) {
if (max < min) {
return
}
map.get(max).map(item => {
if (children.get(item['parentId']).length > 0) {
item.children = children.get(item['id']);
}
})
this.findSuperiors(max - 1, map, children, min);
}
//請求後臺數據
services.get_tree(this.id)
.then(res => {
this.treeData = [];
let childrenNode = new Map(),
level = new Map();
for (let key of res.orgList) {
let parentId = key['parentId'];
if (childrenNode.has(parentId)) {
childrenNode.get(parentId).push(key);
}
else {
childrenNode.set(parentId, []);
childrenNode.get(parentId).push(key);
}
let lev = key['orgCode'].split('/').length - 3;
if (level.has(lev)) {
level.get(lev).push(key);
}
else {
level.set(lev, []);
key.children = [];
level.get(lev).push(key);
}
}
let min = Math.min.apply(Math, [...level.keys()]),
max = Math.max.apply(Math, [...level.keys()]);
this.findSuperiors(max, level, childrenNode, min);
if (res.tenantInfo) {
res.tenantInfo.children = [];
res.tenantInfo.children = level.get(min);
this.treeData.push(res.tenantInfo);
}
else {
this.treeData = level.get(min);
}
}
)