vue实现下拉树带（人员）

一、效果

二、代码

1.后台接口（递归算法）

controller层

     /**
     * 部门列表带用户列表树形结果
     *
     * @return 结果
     */
    @ApiOperation(value = "部门列表带用户列表树形结果", notes = "XDRS")
    @GetMapping("/listDeptUserTree")
    public AjaxResult listDeptUserTree() {
        return AjaxResult.success(deptService.findOrgUserTree(0L));
    }

service层

    /**
     * 部门列表带用户列表树形结果
     *
     * @param pid
     * @return 结果
     */
    @Override
    public List> findOrgUserTree(Long pid) {
        // 查找根节点
        List> list = deptMapper.findListByPid(pid);
        List> children;
        for (Map m : list) {
            children = findOrgUserTree((Long) m.get("id"));
            // 查询组织机构的子节点，并赋值给元素“children”
            if (children != null && children.size() != 0) {
                List> ss = sysUserMapper.findUserByOrgId((Long) m.get("id"));
                if (ss != null && ss.size() != 0) {
                    children.addAll(ss);
                }
                m.put("children", children);
            } else {
                // 当根节点组织结构时，查询结构下面的员工，并赋值给根节点组织机构的children
                children = sysUserMapper.findUserByOrgId((Long) m.get("id"));
                if (children != null && children.size() != 0) {
                    m.put("children", children);
                }
                // 设置叶子组织机构（没有人员），为不可选 isDisabled为vueTree节点的属性，不能勾选
                if (children == null || children.size() == 0) {
                    m.put("isDisabled", true);
                }
            }
        }
        return list;
    }

 mapper层

dept.xml

     
    
        SELECT
            dept_id AS id,
            dept_name AS label
        FROM
            sys_dept
        WHERE
            parent_id = #{parentId}
            AND del_flag = '0'
    

表结构

 

 user.xml

     
    
        SELECT
            user_id AS id,
            nick_name AS label
        FROM
            sys_user
        WHERE
            dept_id = #{deptId}
            AND del_flag = '0'
            AND `STATUS` = '0'
            AND login_type ='2'
        ORDER BY
            user_id ASC
    

表结构

 后台查询的数组结果：
 

[{
    "children": [{
        "id": 602,
        "label": "销售部",
        "isDisabled": true
    }, {
        "children": [{
            "id": 1851,
            "label": "张三"
        }, {
            "id": 1852,
            "label": "李四"
        }],
        "id": 603,
        "label": "产品部"
    }, {
        "children": [{
            "id": 1854,
            "label": "李小萌"
        }],
        "id": 611,
        "label": "研发部"
    }],
    "id": 1,
    "label": "帅帅集团有限公司"
}]

1. 2.前端组件（vue-treeselect）