知识点：前端使用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. 对规范中每个模块只允许一个id的理解
			
    优点: 每个模块只有一个ID,并且在css中不适用ID,ID从模板中传入js中,则该模块的复用灵活性会非常高.想要复用该模块时,只需要改动两个地方.一个是html中的ID,另外一个是写到全局conf. ...
    
			
    2. 
						
  2. apt-get install的默认安装路径
			
    apt-get 命令 sudo apt-get update sudo apt-get install tree sudo apt-get -y install tree //跳过系统提示,直接安装. ...
    
			
    3. 
						
  3. Mac下Python与Kafka的配合使用
			
    安装并配置Kafka 安装 # brew install kafka 配置 """ zookeeper配置文件/usr/local/etc/kafka/zookeeper ...
    
			
    4. 
						
  4. 【BZOJ3203】[Sdoi2013]保护出题人 二分+凸包
			
    [BZOJ3203][Sdoi2013]保护出题人 Description Input 第一行两个空格隔开的正整数n和d,分别表示关数和相邻僵尸间的距离.接下来n行每行两个空格隔开的正整数,第i +  ...
    
			
    5. 
						
  5. 暴力破解工具hydra
			
    Hydra是一个并行登录的裂解装置,它支持众多的协议来攻击.新的模块很容易的添加,旁边,它是灵活的,而且速度非常快. 首先安装的是hydra的支持库包软件. yum -y install openss ...
    
			
    6. 
						
  6. MYSQL-max_binlog_cache_size参数
			
    max_binlog_cache_size 解释:这是设置最大二进制日志的缓存区大小的变量.若处理多语句事务时需要的内存大小比设置值大的话就会提示一个error:Multi-statement tra ...
    
			
    7. 
						
  7. UUID的定义以及作用
			
    UUID含义是通用唯一识别码 (Universally Unique Identifier),这 是一个软件建构的标准,也是被开源软件基金会 (Open Software Foundation, OS ...
    
			
    8. 
						
  8. mongodb拆库分表脚本
			
    脚本功能: 1. 将指定的报告文件按照指定的字段.切库切表策略切分 2. 将切分后的文件并发导入到对应的Mongodb中 3. 生成日志文件和done标识文件 使用手册: -h    打印帮助信息,并 ...
    
			
    9. 
						
  9. PHP获取目录和的方法通过魔术变量；通过超级全局变量；通过相关函数等等：
			
    <?php /** * PHP获取路径或目录实现 * @link http://www.phpddt.com */ //魔术变量,获取当前文件的绝对路径 echo "__FILE__: ...
    
			
    10. 
						
  10. ORA-39006、ORA-39065、ORA-01403、ORA-39097错误解决办法
			
    今天有同事找说是expdp到出数据时报错: 处理方法:sys用户下执行如下语句重新生成DATAPUMP API用到的视图问题就解决了. SQL> @?/rdbms/admin/catmeta.s ...
    
			
    11.