目录
1、业务场景
后管页面实现目录数与查询页面的联动，类似若依框架用户管理页面。
2、前端
api.js修改
在原有的js文件里配置目录树的查询接口
// 查询目录树的接口调用
export function areaTreeSelect() {
return request({
url: '/test/test/areaTree',//后端接口URL
method: 'get'
})
}
index.vue修改
template修改
<template>
<div class="app-container">
<el-row :gutter="20">
<!-- 目录树 -->
<el-col :span="4" :xs="24">
<div class="head-container">
<el-input
v-model="areaName"
placeholder="请输入区划名称"
clearable
size="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-all
highlight-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());
}
}