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

快来打我* 2022-03-07 06:42 271阅读 0赞

## 通过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 //租户下绑定的总车辆数
            }
        }
    }

这里后台没有直接返回树形结构是由于有多处使用该接口，而只有在该页面需要做成树状图，所以需要前端处理下数据格式，完成效果如下

![clipboard.png][]

### 实现方法 ###

大概思路，因为返回的数据中`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);
                }
            }
    )

[clipboard.png]: /images/20220307/c8a32170e0b64c8893062c15054cbf93.png