後裝業務管理平臺專案總結

摘要： 通過id、parentId建立樹形結構 後臺傳輸的 json 資料，這裡為了不影響閱讀，刪除掉了不必要的部分 資料格式 { "httpCode": 200, "code": 200, "message": ...

通過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);
}
}
)