知识点：前端使用vuetree的组件库，调用后台查询组织机构，包括人员的接口

实现下拉树的功能

查考：

vue-treeselect官网：https://vue-treeselect.js.org/

源码demo下载链接：https://github.com/shuaishuaihand/orgvuetreedemo.git

（一）效果：

（二）代码

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

controller层

/**
 * 查询组织结构下拉树
 * @return
 */
@RequestMapping(value = "/findOrgUserTree", method = { RequestMethod.GET, RequestMethod.POST })
@ResponseBody
public List<Map<String,Object>> findOrgUserTree() {
    return orgService.findOrgUserTree(0);
}

service层

/**
 * 递归查询组织机构-用户树节点
 * @return
 */
public List<Map<String, Object>> findOrgUserTree(int pid) {
    // 查找根节点
    List<Map<String, Object>> list = orgMapper.findListByPid(pid);
    List<Map<String, Object>> children;
    for (Map<String, Object>  m: list) {
        children = findOrgUserTree((int)m.get("id"));
        if (children != null && children.size() != 0) { //查询组织机构的子节点，并赋值给元素“children”
            m.put("children",children);
        } else {
            children = userMapper.findUserByOrgId((int)m.get("id")); //当根节点组织结构时，查询结构下面的员工，并赋值给根节点组织机构的children
            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层
OrgMapper.xml:
<select id="findListByPid" resultType="java.util.HashMap" parameterType="java.lang.Integer">
    select id,name as label from organization
    <if test="pid!=0"> //pid为父节点的ID
        WHERE PARENTID =#{pid}
   </if>
    <if test="pid==0">
      WHERE  (PARENTID &lt; 1 or PARENTID is null)
    </if>
</select>

组织机构表：


User.xml:
<select id="findUserByOrgId" resultType="java.util.HashMap">
    select id ,user_name as label from user
    <if test="orgId!=null">
        WHERE ORG_ID =#{orgId} ORDER BY id
   </if>
</select>

员工表：


后台查询的数组结果：
[{
    "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": "帅帅集团有限公司"
}]

2.前端组件（vue-treeselect）
<body>   <!--:value-consists-of="valueConsistsOf"-->
<div id="app">
        组织机构    //options1是后台接口传过来的数组； value作为绑定值，可以在修改时绑定ids数组；valueConsistsOf设定为叶子节点元素选择；
        <treeselect  :options="options1" :multiple="true"  v-model="value" :value-consists-of="valueConsistsOf"
                       placeholder="选择成员"/>

</div>
<script>
    // register the component
    Vue.component('treeselect', VueTreeselect.Treeselect)
    new Vue({
        el: '#app',
        data: {
            // define default value
            value: null,
            valueConsistsOf: 'LEAF_PRIORITY',
            // define options
            options1: "",
        },
        //初始化方法
        mounted:function () {
            this.findZNodes();

        },
        methods: {
            //加载修改树结构json
            findZNodes: function () {
                this.$http.post("/org/findOrgUserTree").then(function (response) {
                    this.options1 = response.data;
                })
            }
        }
    })
</script>
</body>



 
												


											
vue-Treeselect实现组织机构（员工）下拉树的功能的更多相关文章
	

    
								
  1. vue 模拟下拉树
		
    // 使用vue 做表格部分其他部分暂不修改 var app = new Vue({ el: "#freightTbl", watch: { //监听表格数据的变化[使用 watc ...
    
		
    2. 
						
  2. vue+element下拉树选择器
		
    项目需求:输入框点击弹出树形下拉结构,可多选或者单选. 解决方案:1.使用layui formSelect多选插件 2.基于vue+elementui 下拉框和树形控件组合成树形下拉结构 <el ...
    
		
    3. 
						
  3. 开源框架.netCore DncZeus学习（五）下拉树的实现
		
    千里之行,始于足下,先从一个小功能研究起,在菜单管理页面有一个下拉树,先研究下它怎么实现的 1.先找到menu.vue页面 惯性思维先搜索请选择三个字,原来是动态生成的 再向上找DropDown组件, ...
    
		
    4. 
						
  4. elementUI下拉树组件封装
		
    使用组件:Popover 弹出框.Tree 树形控件 和 input 输入框 用法: 1.新建一个.vue文件,粘贴以下组件封装的代码(完全可以使用) 2.在页面需要使用下拉树的地方调用即可. (1) ...
    
		
    5. 
						
  5. zTree开发下拉树
		
    最近,因为工作需要一个树形下拉框的组件,经过查资料一般有两种的实现方法.其一,就是使用zTree实现:其二,就是使用easyUI实现.因为公司的前端不是使用easyUI设计的,故这里我选择了zTree ...
    
		
    6. 
						
  6. Extjs下拉树代码测试总结
		
    http://blog.csdn.net/kunoy/article/details/8067801 首先主要代码源自网络,对那些无私的奉献者表示感谢! 笔者对这些代码做了二次修改,并总结如下: Ex ...
    
		
    7. 
						
  7. EXTJS下拉树ComboBoxTree参数提交及回显方法
		
    http://blog.csdn.net/wjlht/article/details/6085245 使用extjs可以构造出下拉数,但是不方便向form提交参数,在此,笔者想到一个办法,很方便Com ...
    
		
    8. 
						
  8. layui扩展组件，下拉树多选
		
      项目介绍 项目中需要用到下拉树多选功能,找到两个相关组件moretop-layui-select-ext和wujiawei0926-treeselect,但是moretop-layui-selec ...
    
		
    9. 
						
  9. EasyUI-combotree 下拉树 数据回显时默认选中
		
    组合树(combotree)把选择控件和下拉树结合起来.它与组合框(combobox)相似,不同的是把列表替换成树组件.组合树(combotree)支持带有用于多选的树状态复选框的树. 依赖 comb ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 2800 送外卖[状态压缩dp]
			
    2800 送外卖  时间限制: 2 s  空间限制: 256000 KB  题目等级 : 钻石 Diamond 题解       题目描述 Description 有一个送外卖的,他手上有n份订单,他 ...
    
			
    2. 
						
  2. 百度地图api定位和导航简写
			
    function locate() { // 百度地图API功能 var map = new BMap.Map("allmap"); // 创建Map实例 var point =  ...
    
			
    3. 
						
  3. oneThink的ArticleController控制，详看
			
    本人新手小白,看下 onethink 的 ArticleController , 它里面写的方法,和一些自己以后改进的方向: <?php namespace Home\Controller; c ...
    
			
    4. 
						
  4. java面向对象（上）
			
    一.一些重要的概念理解 Java是面向对象的程序设计语言,提供了类,成员变量,方法等的基本功能.类可被认为是一种自定义的数据类型,可以使用类来定义变量,所有使用类定义的变量都是引用变量.它会引用到类的 ...
    
			
    5. 
						
  5. 170717、springboot编程之mybatis数据库开发和aop拦截
			
    一.springboot整合mybaits (1)新建maven project; 新建一个maven project,取名为:spring-boot-mybatis (2)在pom.xml文件中引入 ...
    
			
    6. 
						
  6. IT求职部分网站汇总
			
    哪合伙:http://nahehuo.com/ 过来人:http://www.guolairen.com/ 智联:www.zhaopin.com 前程:www.51job.com 中华英才:www.c ...
    
			
    7. 
						
  7. kubernetes实战(八)：k8s集群安全机制RBAC
			
    1.基本概念 RBAC(Role-Based Access Control,基于角色的访问控制)在k8s v1.5中引入,在v1.6版本时升级为Beta版本,并成为kubeadm安装方式下的默认选项, ...
    
			
    8. 
						
  8. Django自带的加密算法及加密模块
			
    Django 内置的User类提供了用户密码的存储.验证.修改等功能,可以很方便你的给用户提供密码服务. 默认的Ddjango使用pbkdf2_sha256方式来存储和管理用的密码,当然是可以自定义的 ...
    
			
    9. 
						
  9. python实现http接口自动化测试（完善版）
			
    今天给大家分享一个简单的Python脚本,使用python进行http接口的自动化测试,脚本很简单,逻辑是:读取excel写好的测试用例,然后根据excel中的用例内容进行调用,判断预期结果中的返回值 ...
    
			
    10. 
						
  10. Spark调优秘诀
			
    1.诊断内存的消耗 在Spark应用程序中,内存都消耗在哪了? 1.每个Java对象都有一个包含该对象元数据的对象头,其大小是16个Byte.由于在写代码时候,可能会出现这种情况:对象头比对象本身占有 ...
    
			
    11.