vue实现下拉树带（人员）

一、效果

二、代码

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

controller层

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

service层

    /*** 部门列表带用户列表树形结果** @param pid* @return 结果*/@Overridepublic 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 {// 当根节点组织结构时，查询结构下面的员工，并赋值给根节点组织机构的childrenchildren = 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

     SELECTdept_id AS id,dept_name AS labelFROMsys_deptWHEREparent_id = #{parentId}AND del_flag = '0'

表结构

 user.xml

     SELECTuser_id AS id,nick_name AS labelFROMsys_userWHEREdept_id = #{deptId}AND del_flag = '0'AND `STATUS` = '0'AND login_type ='2'ORDER BYuser_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）

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！