知识点：前端使用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. Android 7.1 SystemUI--任务管理--场景一:长按某个缩略图，拖动分屏的流程
			
    TaskView 类的长按事件 onLongClick 方法内发送了 DragStartEvent 事件消息,该 DragStartEvent 事件消息由 RecentsView,TaskStackV ...
    
			
    2. 
						
  2. Java初学者笔记四：按行读写文件和输入处理
			
    一.我们来看python的很简单: 1.读文件: with open("/path/file","r") as fr: for line in fr.readl ...
    
			
    3. 
						
  3. Sun公司的产品AnswerBook存在多种漏洞
			
    一.未授权管理脚本访问漏洞: 1.受影响版本: Sun-AnswerBook2     1.2-1.4.2 2.攻击测试手段 http://a.b.c.d:8888/ab2/@AdminViewErr ...
    
			
    4. 
						
  4. Codeforces 603E  Pastoral Oddities
			
    传送门:http://codeforces.com/problemset/problem/603/E [题目大意] 给出$n$个点,$m$个操作,每个操作加入一条$(u, v)$长度为$l$的边. 对 ...
    
			
    5. 
						
  5. jQuery --- 利用a标签的download属性下载文件！
			
    最近遇到一个项目,需要有点击下载文件的功能. 由于文件格式是多种的,对于 rar / zip / rtf / doc / xlsx / jpg等. 点击下载有的是直接跳转到后进行下载,但有的是打开进行 ...
    
			
    6. 
						
  6. 网络流SAP+gap+弧优化算法
			
    poj1273 Drainage Ditches Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 54962   Accept ...
    
			
    7. 
						
  7. goole进不去？
			
    1.把hosts文件放到C:\Windows\System32\drivers\etc目录下就可以上了.hosts文件自己下载 2. 上vpn ,注册个账号,每个账号500M的FQ流量也可以
    
			
    8. 
						
  8. 【事件流】浅谈事件冒泡&&事件捕获------【巷子】
			
    首先在扯淡的时候我们需要先了解一个东西,这个东西就是事件流. 1.什么是事件流? 解释:当一个HTML元素触发一个事件处理函数的时候,该事件会在该元素节点到根节点之间传播,传播路径所经过的节点都会接受 ...
    
			
    9. 
						
  9. 模反元素 RSA Euler's totient function
			
    https://baike.baidu.com/item/模反元素/20417595 如果两个正整数a和n互质,那么一定可以找到整数b,使得 ab-1 被n整除,或者说ab被n除的余数是1.这时,b就 ...
    
			
    10. 
						
  10. Postgresql 正则表达式（转）
			
    原文:http://blog.csdn.net/wugewuge/article/details/7704996 postgresql支持POSIX 风格的正则表达式,在postgresql中使用正则 ...
    
			
    11.