知识点：前端使用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. str += "a" + "b" & str = str + "a" + "b"的性能比较
			
    str += "a" + "b"在浏览器中的执行过程: 1.创建临时字符串, 2.将临时字符串设置为“ab”, 3.将临时字符串和str进行连接, 4.将结果赋 ...
    
			
    2. 
						
  2. Linux命令学习之xargs命令
			
    xargs命令是给其他命令传递参数的一个过滤器,也是组合多个命令的一个工具.它擅长将标准输入数据转换成命令行参数,xargs能够处理管道或者stdin并将其转换成特定命令的命令参数.xargs也可以将 ...
    
			
    3. 
						
  3. glassfish任意文件读取漏洞解析
			
    一.背景: glassfish是一款java编写的跨平台的开源的应用服务器. 二.漏洞原理: 与宽字节SQL注入一致,都是由于unicode编码歧义导致的.具体payload如下构造: http:// ...
    
			
    4. 
						
  4. 高中生的IT之路-1.2离开校园
			
    记得那是07年夏季的一天,高考成绩出来之后,班主任老师通知大家回学校报考志愿. 那天我刚到学校会议室,我还没来得及和同学见面就被班主任喊过去了,把志愿表递给我了我,我当时连仔细看那张志愿表都没看,随手 ...
    
			
    5. 
						
  5. tortoiseSVN如何发现和解决冲突？
			
    版本冲突原因: 假设A.B两个用户都在版本号为100的时候,更新了kingtuns.txt这个文件,A用户在修改完成之后提交kingtuns.txt到服务器,这个时候提交成功,这个时候kingtuns ...
    
			
    6. 
						
  6. 表格table列宽度控制<colgroup>
			
    <colgroup> 标签用于对表格中的列进行组合,以便对其进行格式化. 通过使用 <colgroup> 标签,可以向整个列应用样式,而不需要重复为每个单元格或每一行设置样式. ...
    
			
    7. 
						
  7. Code Forces 18D Seller Bob(简单DP)
			
    D. Seller Bob time limit per test 2 seconds memory limit per test 128 megabytes input standard input ...
    
			
    8. 
						
  8. thinkphp中 volist循环的 mod取值的问题
			
    <ul> <volist name="data" id="arr" key="k" mod="2"&g ...
    
			
    9. 
						
  9. What are Traceroute, Ping, Telnet and Nslookup commands?
			
    https://help.maximumasp.com/KB/a445/connectivity-testing-with-ping-telnet-tracert-and-pathping-.aspx ...
    
			
    10. 
						
  10. proxy ubuntu proxy--http://jingyan.baidu.com/article/8cdccae9913470315513cd70.html
			
    apt-get 设置代理 proxy 方法 方法一 :这是一种临时的手段,如果你仅仅是暂时需要通过http代理使用apt-get,你可以使用这种方法. 在使用 apt-get  之前,在终端中输入以下 ...
    
			
    11.