1、业务场景

后管页面实现目录数与查询页面的联动，类似若依框架用户管理页面。

2、前端

api.js修改

在原有的js文件里配置目录树的查询接口

// 查询目录树的接口调用
export function areaTreeSelect() {return request({url: '/test/test/areaTree',//后端接口URLmethod: 'get'})
}

index.vue修改

template修改

<template><div class="app-container"><el-row :gutter="20"><!-- 目录树 --><el-col :span="4" :xs="24"><div class="head-container"><el-inputv-model="areaName"placeholder="请输入区划名称"clearablesize="small"prefix-icon="el-icon-search"style="margin-bottom: 20px"/></div><div class="head-container"><el-tree:data="deptOptions":props="defaultProps":expand-on-click-node="false":filter-node-method="filterNode"ref="tree"node-key="id"default-expand-allhighlight-current@node-click="handleNodeClick"/></div></el-col><!-- 查询页面 --><el-col :span="20" :xs="24"><!-- 这里将原来的查询页面代码都放里边，截止到新增修改的代码 --></el-col></el-row></div>  
</template>  

script修改

export default {name: "xxx",dicts: ['xxx'],components: { Treeselect },data() {return {//...// 树选项deptOptions: undefined,// 部门名称areaName: undefined}//...},// 表单参数form: {},defaultProps: {children: "children",label: "label"},watch: {// 根据名称筛选目录树areaName(val) {this.$refs.tree.filter(val);}},created() {this.getList();this.getDeptTree();//js文件配置的目录树接口},methods: {//.../** 查询下拉树结构 */getDeptTree() {areaTreeSelect().then(response => {console.log("树结构="+response.data)this.deptOptions = response.data;});},// 筛选节点filterNode(value, data) {if (!value) return true;return data.label.indexOf(value) !== -1;},// 节点单击事件handleNodeClick(data) {this.queryParams.areaCode = data.id;this.handleQuery();},//...}//...
}

3、后端

controller

    /*** 获取行目录树列表*/@PreAuthorize("@ss.hasPermi('test:area:list')")@GetMapping("/areaTree")public AjaxResult areaTree(Area area){return success(commonService.selectTreeList(area));}

serviceimpl

本质上还是复用SysDept````和SysDeptServiceImpl````的代码块

	@Override
public List<TreeSelectArea> selectDeptTreeList(CommonArea dept) {List<CommonArea> depts = this.selectCommonAreaList(dept);
//        List<CommonArea> depts = SpringUtils.getAopProxy(this).selectCommonAreaList(dept);return buildDeptTreeSelect(depts);
}@Override
public List<CommonArea> buildDeptTree(List<CommonArea> depts) {List<CommonArea> returnList = new ArrayList<CommonArea>();List<String> tempList = depts.stream().map(CommonArea::getAreaCode).collect(Collectors.toList());for (CommonArea dept : depts){// 如果是顶级节点, 遍历该父节点的所有子节点if (!tempList.contains(dept.getParentCode())){recursionFn(depts, dept);returnList.add(dept);}}if (returnList.isEmpty()){returnList = depts;}return returnList;
}@Override
public List<TreeSelectArea> buildDeptTreeSelect(List<CommonArea> depts) {List<CommonArea> deptTrees = buildDeptTree(depts);return deptTrees.stream().map(TreeSelectArea::new).collect(Collectors.toList());
}/*** 递归列表*/
private void recursionFn(List<CommonArea> list, CommonArea t)
{// 得到子节点列表List<CommonArea> childList = getChildList(list, t);t.setChildren(childList);for (CommonArea tChild : childList){if (hasChild(list, tChild)){recursionFn(list, tChild);}}
}
/*** 得到子节点列表*/
private List<CommonArea> getChildList(List<CommonArea> list, CommonArea t)
{List<CommonArea> tlist = new ArrayList<CommonArea>();Iterator<CommonArea> it = list.iterator();while (it.hasNext()){CommonArea n = (CommonArea) it.next();if (StringUtils.isNotNull(n.getParentCode()) && n.getParentCode().equals(t.getAreaCode())){tlist.add(n);}}return tlist;
}/*** 判断是否有子节点*/
private boolean hasChild(List<CommonArea> list, CommonArea t)
{return getChildList(list, t).size() > 0;
}

domain

entity

//原来的system包继承的是TreeEntity
public class CommonArea extends TreeEntity {
}//需要确认修改为common包的BaseEntity
public class CommonArea extends BaseEntity {//切记实现children/** 子集 */private List<CommonArea> children = new ArrayList<CommonArea>();public List<CommonArea> getChildren() {return children;}public void setChildren(List<CommonArea> children) {this.children = children;}
}

treeselect

需要在common包下TreeSelect同级目录下生成自己的目录支撑对象.

package com.ruoyi.common.core.domain;/*** Treeselect树结构实体类* * @author ruoyi*/
public class TreeSelectArea implements Serializable
{private static final long serialVersionUID = 1L;/** 节点ID */private String id;/** 节点名称 */private String label;/** 子节点 */@JsonInclude(JsonInclude.Include.NON_EMPTY)private List<TreeSelectArea> children;public TreeSelectArea(){}public TreeSelectArea(CommonArea area){this.id = area.getAreaCode();this.label = area.getAreaName();this.children = area.getChildren().stream().map(TreeSelectArea::new).collect(Collectors.toList());}
}