后装业务管理平台项目总结

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