当前位置: 首页 > news >正文

若依ruoyi框架实现目录树与查询页面联动

目录

  • 1、业务场景
  • 2、前端
    • api.js修改
    • index.vue修改
      • template修改
      • script修改
  • 3、后端
    • controller
    • serviceimpl
    • domain
      • entity
      • treeselect

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());}
}

相关文章:

若依ruoyi框架实现目录树与查询页面联动

目录1、业务场景2、前端api.js修改index.vue修改template修改script修改3、后端controllerserviceimpldomainentitytreeselect1、业务场景 后管页面实现目录数与查询页面的联动&#xff0c;类似若依框架用户管理页面。 2、前端 api.js修改 在原有的js文件里配置目录树的查…...

Laravel框架学习笔记——Laravel环境配置及安装(Ubuntu20.04为例)

目录引言1、安装Nginx2、安装PHP3、安装Composer4、搭建Laravel框架项目5、修改Nginx映射6、安装MySQL引言 好久没写博客了&#xff0c;因为个人需要&#xff0c; 所以要涉及到Laravel框架的学习&#xff0c;所以会出一系列的关于PHP的Laravel框架学习笔记&#xff0c;希望能够…...

模拟百度翻译-课后程序(JAVA基础案例教程-黑马程序员编著-第六章-课后作业)

【案例6-5】 模拟百度翻译 【案例介绍】 1.任务描述 大家对百度翻译并不陌生&#xff0c;本案例要求编写一个程序模拟百度翻译。用户输入英文之后搜索程序中对应的中文&#xff0c;如果搜索到对应的中文就输出搜索结果&#xff0c;反之给出提示。本案例要求使用Map集合实现英…...

自然语言处理(NLP)之求近义词和类比词<MXNet中GloVe和FastText的模型使用>

这节主要就是熟悉MXNet框架中的两种模型&#xff1a;GloVe和FastText的模型(词嵌入名称)&#xff0c;每个模型下面有很多不同的词向量&#xff0c;这些基本都来自wiki维基百科和twitter推特这些子集预训练得到的。我们只需要导入mxnet.contrib中的text模块即可&#xff0c;这里…...

2023年CDGA考试-第13章-数据质量(含答案)

2023年CDGA考试-第13章-数据质量(含答案) 单选题 1.在导致数据质量问题的常见原因中关于数据输入问题以下描述正确的是: A.数据采集端缺乏数据质量管控 B.相同字段重复设计导致数据不一致 C.缺乏数据采集规范的制定 D.所有描述都正确 答案 D 2.数据质量计划应将其范围限…...

ASEMI高压MOS管ASE65R330参数,ASE65R330图片

编辑-Z ASEMI高压MOS管ASE65R330参数&#xff1a; 型号&#xff1a;ASE65R330 漏极-源极电压&#xff08;VDS&#xff09;&#xff1a;650V 栅源电压&#xff08;VGS&#xff09;&#xff1a;20V 漏极电流&#xff08;ID&#xff09;&#xff1a;12.5A 功耗&#xff08;P…...

LeetCode动态规划经典题目(九):子序列、子数组问题

目录 31. LeetCode674. 最长连续递增序列 32. LeetCode18. 最长重复子数组 33. LeetCode1143. 最长公共子序列 34. LeetCode1035. 不相交的线 35. LeetCode53. 最大子数组和 36. LeetCode392.判断子序列 37. LeetCode115. 不同的子序列 38. LeetCode583. 两个字符串的删…...

如何利用有限的数据发表更多的SCI论文?——利用ArcGIS探究环境和生态因子对水体、土壤和大气污染物的影响

SCI的写作和发表是科研人提升自身实力和实现自己价值的必要途径。“如何利用有限的数据发表更多的SCI论文&#xff1f;”是我们需要解决的关键问题。软件应用只是过程和手段&#xff0c;理解事件之间的内在逻辑和寻找事物之间的内在规律才是目的。如何利用有限的数据发表更多的…...

六【 SpringMVC框架】

一 SpringMVC框架 目录一 SpringMVC框架1.什么是MVC2.SpringMVC概述3.SpringMVC常见开发方式4.SpringMVC执行流程5.SpringMVC核心组件介绍6.快速构建Spring MVC程序✅作者简介&#xff1a;Java-小白后端开发者 &#x1f96d;公认外号&#xff1a;球场上的黑曼巴 &#x1f34e;个…...

【BBuf的CUDA笔记】八,对比学习OneFlow 和 FasterTransformer 的 Softmax Cuda实现

0x1. OneFlow/FasterTransformer SoftMax CUDA Kernel 实现学习 这篇文章主要学习了oneflow的softmax kernel实现以及Faster Transformer softmax kernel的实现&#xff0c;并以个人的角度分别解析了原理和代码实现&#xff0c;最后对性能做一个对比方便大家直观的感受到onefl…...

python 类对象的析构释放代码演示

文章目录一、类的构造函数与析构函数二、代码演示1. 引用的更迭2. 只在函数内部的类对象三、函数内部返回的类对象1. 使用全局变量 引用 函数内部的类对象一、类的构造函数与析构函数 init 函数是python 类的构造函数&#xff0c;在创建一个类对象的时候&#xff0c;就会自动调…...

Hadoop Shell常用命令

Hadoop Shell命令在管理HDFS的时候还是比较常用的&#xff0c;Hadoop Shell命令与shell命令极为相似&#xff0c;但是方便查询&#xff0c;在这里总结分享&#xff0c;大家enjoy~~ 1&#xff0c;cat 语法格式&#xff1a;hadoop fs -cat URI [URI …] 含义&#xff1a;将路径…...

Android中级——色彩处理和图像处理

色彩处理 通过色彩矩阵处理 色彩矩阵介绍 图像的RGBA可拆分为一个4行5列的矩阵和5行1列矩阵相乘 其中4行5列矩阵即为ColorMatrix&#xff0c;可通过调整ColorMatrix间接调整RGBA 第一行 abcde 决定新的 R第二行 fghij 决定新的 G第三行 klmno 决定新的 G第四行 pqrst 决定新…...

C++类和对象:类的定义、类对象的存储、this指针

目录 一. 对于面向过程和面向对象的认识 二. 类 2.1 struct关键字定义类 2.1.1 C语言中的struct关键字 2.1.2 C中的struct关键字 2.2 class关键字 2.1 使用class关键字定义类 三. 类的访问限定及封装 3.1 类的访问权限及访问限定符 3.1.1 访问权限 3.1.2 访问限定…...

代码随想录算法训练营第三十九天 | 62.不同路径,63. 不同路径 II

一、参考资料不同路径https://programmercarl.com/0062.%E4%B8%8D%E5%90%8C%E8%B7%AF%E5%BE%84.html 视频讲解&#xff1a;https://www.bilibili.com/video/BV1ve4y1x7Eu不同路径 IIhttps://programmercarl.com/0063.%E4%B8%8D%E5%90%8C%E8%B7%AF%E5%BE%84II.htmlhttps://progr…...

数据库复习3

一. 简答题&#xff08;共1题&#xff0c;100分&#xff09; 1. (简答题) 存在数据库test&#xff0c;数据库中有如下表&#xff1a; 1.学生表 Student(Sno,Sname,Sage,Ssex) --Sno 学号,Sname 学生姓名,Sage 出生年月,Ssex 学生性别 主键Sno 2.教师表 Teacher(Tno,Tname) --T…...

顺序表的增删查改

数据结构 是数据存储的方式&#xff0c;对于不同的数据我们要采用不同的数据结构。就像交通运输&#xff0c;选用什么交通工具取决于你要运输的是人还是货物&#xff0c;以及它们的数量。 顺序存储结构 包括顺序表、链表、栈和队列等。 例如腾讯QQ中的好友列表&#xff0c;…...

jupyter matplotlib中文乱码解决

中文乱码可能有两种情况 1. matplotlib里面有中文字体 2. 没有中文字体 查看是否有中文字体: # 查询当前系统所有字体 from matplotlib.font_manager import FontManager import subprocessmpl_fonts = set(f.name for f in FontManager().ttflist)print(all font list get f…...

Smtplib之发邮件模块

目录 创建Smtp对象 Smtp类中的方法 MIME MIMEBase MIMEBase MIMEMultipart MIMEApplication MIMEAudio MIMEImage MIMEText 实例 texthtml格式 发送带图片附件的邮件 发送带附件的邮件 含多种格式 SMTP模块 SMTP 简单传输协议&#xff0c;它是一组用于由源…...

Android 适配手机和平板

一、屏幕适配限定符Android 系统加载应用资源时 , 会根据当前运行应用的设备的相关属性 , 如 : 屏幕尺寸 / 屏幕像素密度 / 宽高比 / 屏幕方向 等属性 , 加载不同的屏幕适配限定符目录下的资源 ;如 : 横竖屏切换时 , res/layout-land 目录中 , 存放的是横屏布局 , res/layout-p…...

零门槛NAS搭建:WinNAS如何让普通电脑秒变私有云?

一、核心优势&#xff1a;专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发&#xff0c;是一款收费低廉但功能全面的Windows NAS工具&#xff0c;主打“无学习成本部署” 。与其他NAS软件相比&#xff0c;其优势在于&#xff1a; 无需硬件改造&#xff1a;将任意W…...

python打卡day49

知识点回顾&#xff1a; 通道注意力模块复习空间注意力模块CBAM的定义 作业&#xff1a;尝试对今天的模型检查参数数目&#xff0c;并用tensorboard查看训练过程 import torch import torch.nn as nn# 定义通道注意力 class ChannelAttention(nn.Module):def __init__(self,…...

实现弹窗随键盘上移居中

实现弹窗随键盘上移的核心思路 在Android中&#xff0c;可以通过监听键盘的显示和隐藏事件&#xff0c;动态调整弹窗的位置。关键点在于获取键盘高度&#xff0c;并计算剩余屏幕空间以重新定位弹窗。 // 在Activity或Fragment中设置键盘监听 val rootView findViewById<V…...

【Java学习笔记】BigInteger 和 BigDecimal 类

BigInteger 和 BigDecimal 类 二者共有的常见方法 方法功能add加subtract减multiply乘divide除 注意点&#xff1a;传参类型必须是类对象 一、BigInteger 1. 作用&#xff1a;适合保存比较大的整型数 2. 使用说明 创建BigInteger对象 传入字符串 3. 代码示例 import j…...

中医有效性探讨

文章目录 西医是如何发展到以生物化学为药理基础的现代医学&#xff1f;传统医学奠基期&#xff08;远古 - 17 世纪&#xff09;近代医学转型期&#xff08;17 世纪 - 19 世纪末&#xff09;​现代医学成熟期&#xff08;20世纪至今&#xff09; 中医的源远流长和一脉相承远古至…...

MySQL 主从同步异常处理

阅读原文&#xff1a;https://www.xiaozaoshu.top/articles/mysql-m-s-update-pk MySQL 做双主&#xff0c;遇到的这个错误&#xff1a; Could not execute Update_rows event on table ... Error_code: 1032是 MySQL 主从复制时的经典错误之一&#xff0c;通常表示&#xff…...

深度学习之模型压缩三驾马车:模型剪枝、模型量化、知识蒸馏

一、引言 在深度学习中&#xff0c;我们训练出的神经网络往往非常庞大&#xff08;比如像 ResNet、YOLOv8、Vision Transformer&#xff09;&#xff0c;虽然精度很高&#xff0c;但“太重”了&#xff0c;运行起来很慢&#xff0c;占用内存大&#xff0c;不适合部署到手机、摄…...

深入浅出WebGL:在浏览器中解锁3D世界的魔法钥匙

WebGL&#xff1a;在浏览器中解锁3D世界的魔法钥匙 引言&#xff1a;网页的边界正在消失 在数字化浪潮的推动下&#xff0c;网页早已不再是静态信息的展示窗口。如今&#xff0c;我们可以在浏览器中体验逼真的3D游戏、交互式数据可视化、虚拟实验室&#xff0c;甚至沉浸式的V…...

leetcode_69.x的平方根

题目如下 &#xff1a; 看到题 &#xff0c;我们最原始的想法就是暴力解决: for(long long i 0;i<INT_MAX;i){if(i*ix){return i;}else if((i*i>x)&&((i-1)*(i-1)<x)){return i-1;}}我们直接开始遍历&#xff0c;我们是整数的平方根&#xff0c;所以我们分两…...

python打卡day49@浙大疏锦行

知识点回顾&#xff1a; 通道注意力模块复习空间注意力模块CBAM的定义 作业&#xff1a;尝试对今天的模型检查参数数目&#xff0c;并用tensorboard查看训练过程 一、通道注意力模块复习 & CBAM实现 import torch import torch.nn as nnclass CBAM(nn.Module):def __init__…...