知识点：前端使用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. Eclipse 真机调试检测不到手机解决方案
			
    想用Eclipse真机调试,但是死活检测不到手机. 手机已经打开了usb调试模式. 开始用的华为Mate9,后面试了下小米,都不行. 在网上搜了一堆,什么安全驱动.adb占用.删除360手机助手.修改 ...
    
			
    2. 
						
  2. CHMOD命令怎么用？
			
    文件/目录权限设置命令:chmod 这是Linux系统管理员最常用到的命令之一,它用于改变文件或目录的访问权限.该命令有两种用法: 用包含字母和操作符表达式的文字设定法 其语法格式为:chmod [w ...
    
			
    3. 
						
  3. 电力项目十八--DOM对象的ajax
			
    Ajax操作的核心对象:xmlreq = new XMLHttpRequest(); 第一步:在dictionaryIndex.jsp中添加: <script type="text/j ...
    
			
    4. 
						
  4. 华硕蓝光刻录机在MAC系统里能用吗？
			
    答案是刻录功能不能用(没有驱动),但可以当外置光驱用.需要注意的是单单把刻录机插到MAC电脑上是没有反应的,放入光盘后Finder里会出现一个可移动设备.
    
			
    5. 
						
  5. CommonHelper    公共类
			
      public static class CommonHelper 公共帮助类 using System.Collections.Generic; using System.Linq; using  ...
    
			
    6. 
						
  6. python tensorflow keras
			
    pip install tensorflow pip install keras pip install theano http://www.open-open.com/lib/view/open14 ...
    
			
    7. 
						
  7. Intellij idea的Dependencies波浪线
			
    昨天在家做项目不知道搞了什么出现了大量波浪线.搞了大半天解决了下面的问题. 1.pom.xml出现波浪线.看右边 maven project-->Profiles 勾选dev 2.上面已勾选还有 ...
    
			
    8. 
						
  8. Day04 dom详解及js事件
			
    day04 dom详解 DOM的基础 Document对象 Element对象 Node对象 innerHTML 事件处理 表单验证   上次课内容回顾: JS中ECMAScript用法: JS定义变 ...
    
			
    9. 
						
  9. Ubuntu操作异常汇总
			
    1.使用Ubuntu的apt-get安装软件时出现以下错误: Reading package lists... Done Building dependency tree... Done Packag ...
    
			
    10. 
						
  10. C#基础整理(二)
			
    1.变量类型int.double.string.char.bool.decimal变量使用规则:先声明,再赋值,最后使用 2.命名规范:Camel:第一个单词首字母小写,其他单词首字母大写,其余字母小 ...
    
			
    11.