java+vue3+el-tree实现树形结构操作

基于springboot + vue3 elementPlus实现树形结构数据的添加、删除和页面展示

效果如下

在这里插入图片描述
在这里插入图片描述

代码如下,业务部分可以自行修改

  • java后台代码
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.daztk.mes.common.annotation.LogOperation;
import com.daztk.mes.common.utils.Result;
import com.daztk.mes.module.cad.dto.CadPartDto;
import com.daztk.mes.module.cad.entity.CadPart;
import com.daztk.mes.module.cad.entity.CadRelation;
import com.daztk.mes.module.cad.service.ICadPartService;
import com.daztk.mes.module.cad.service.ICadRelationService;
import org.apache.commons.collections4.CollectionUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;import java.util.*;
import java.util.stream.Collectors;/*** <p>* 零部件 * </p>** @since 2024-05-30*/
@RestController
@RequestMapping("cad/part")
public class CadPartController {@AutowiredICadPartService service;@AutowiredICadRelationService relationService;/*** 获取所有零部件* @param dto* @return*/@GetMapping("listAll")public Result listAll(CadPartDto dto){List<CadPart> list = new ArrayList<>();try {list = service.getList(dto);if(CollectionUtils.isNotEmpty(list)){list = getTree(list);}} catch (Exception e) {e.printStackTrace();return new Result().err();}return new Result().ok().setData(list);}@PostMapping("add")@LogOperation(tags = "CAD管理-零部件",serviceClass = ICadPartService.class,entityClass = CadPart.class)public Result add(@RequestBody CadPart cadPart){try {service.saveData(cadPart);} catch (Exception e) {e.printStackTrace();return new Result().err();}return new Result().ok().setData(cadPart);}@DeleteMapping("delete")@LogOperation(tags = "CAD管理-零部件",serviceClass = ICadPartService.class,entityClass = CadPart.class)public Result delete(@RequestBody Long[] ids){try {List<Long> idList = Arrays.asList(ids);List<Long> list = recurveIdList(idList);service.removeByIds(list);} catch (Exception e) {e.printStackTrace();return new Result().err();}return new Result().ok();}/*** 递归获取id树** @param ids* @return*/public List<Long> recurveIdList(List<Long> ids){List<Long> list = new ArrayList<>();for(Long id: ids){list.add(id);//关系表查子集List<CadRelation> cadRelations = relationService.list(new QueryWrapper<CadRelation>().eq("parent_id", id));if(CollectionUtils.isNotEmpty(cadRelations)){List<Long> partIds = cadRelations.stream().map(CadRelation::getPartId).collect(Collectors.toList());List<Long> list1 = recurveIdList(partIds);list.addAll(list1);}}return list;}public List<CadPart> getTree(List<CadPart> treeList){List<CadPart> collect = treeList.stream().filter(item -> item.getParentId() == 0)//构造最外层节点,即id=0的节点.map(item -> {item.setChildren(getChildren(item, treeList));//id=0的节点就为他设置子节点return item;}).collect(Collectors.toList());return collect;}private static List<CadPart> getChildren(CadPart treeEntity, List<CadPart> treeEntityList) {List<CadPart> collect = treeEntityList.stream().filter(item -> item.getParentId().equals(treeEntity.getId()))//判断当前节点的父id是不是要设置节点的id.map(item -> {item.setChildren(getChildren(item, treeEntityList));//如果是 为其设置子节点 通过递归 为每个除了最外层节点的节点设置子节点return item;}).collect(Collectors.toList());return collect;}
  • 前端代码
<template><div class="custom-tree-container"><!-- <p>Using render-content</p><el-tree style="max-width: 600px" :data="dataSource" show-checkbox node-key="id" default-expand-all:expand-on-click-node="false" :render-content="renderContent" /> --><el-button type="primary" class="add-btn" icon="el-icon-circle-plus-outline" @click="addEdit">新增零部件</el-button><div style="padding-top: 20px;"><el-tree style="max-width: 600px; " :data="dataSource" show-checkbox node-key="id" default-expand-all:expand-on-click-node="false" ref="treeRef" :props="mapProps"><template #default="{ node, data }"><span class="custom-tree-node"><span>{{ node.label }}</span><span><a @click="append(data)"> 增加子节点 </a><a style="margin-left: 8px" @click="removeNode(node, data)"> 删除 </a></span></span></template></el-tree></div><el-dialog :title="title" v-model="drawer" width="600px"><el-form :model="partForm" :rules="rules" ref="ruleFormsss" label-width="120px" class="demo-partForm"><el-form-item label="数模号:" prop="partNo"><el-input v-model="partForm.partNo" clearable></el-input></el-form-item><el-form-item label="版本号:" prop="partRev"><el-input v-model="partForm.partRev" clearable></el-input></el-form-item><el-form-item label="名称:" prop="name"><el-input v-model="partForm.name" clearable></el-input></el-form-item><el-form-item label="中文名称:" prop="cName"><el-input v-model="partForm.cName" clearable></el-input></el-form-item><el-form-item label="材料:" prop="material"><el-input v-model="partForm.material" clearable></el-input></el-form-item><el-form-item label="规格:" prop="gauge"><el-input v-model="partForm.gauge" clearable></el-input></el-form-item><el-form-item label="重量:" prop="massqty"><el-input v-model="partForm.massqty" clearable></el-input></el-form-item><el-form-item label="数据类型:" prop="partType"><el-input v-model="partForm.partType" clearable></el-input></el-form-item></el-form><template #footer><span class="dialog-footer"><el-button @click="cancelEdit">取 消</el-button><el-button type="primary" @click="saveEdit">确 定</el-button></span></template></el-dialog></div>
</template><script>
import { reactive, ref, toRefs, unref, onMounted } from 'vue'
import { add, remove, listAll } from '@api/cad/part'
import { ElMessage } from 'element-plus'export default {name: 'part',setup() {const state = reactive({drawer: false,title: '',query: {partName: ''},dataSource: [// {//   id: 1,//   label: 'Level one 1',//   children: []//   // children: [//   //   {//   //     id: 4,//   //     label: 'Level two 1-1',//   //     children: [//   //       {//   //         id: 9,//   //         label: 'Level three 1-1-1'//   //       }//   //     ]//   //   }//   // ]// }],mapProps: {id: 'id',label: 'name',children: 'children'}})const treeRef = ref(null)const append = (data) => {state.drawer = truestate.title = '添加子节点'partForm.parentId = data.idpartForm.partNo = ''partForm.partRev = ''partForm.name = ''partForm.cName = ''partForm.material = ''partForm.gauge = ''partForm.massqty = ''partForm.partType = ''// debugger// 获取当前节点// const currentNode = treeRef.value.getNode(data.id)// // 获取当前节点在树中的索引// // const currentIndex = getNod(data.id)// // // 如果索引大于 0,获取前一个节点// // if (currentIndex > 0) {// //   const prevNode = getNodeAt(currentIndex - 1);// //   const prevId = prevNode.id; // //   // 处理前一个节点的 id// // }// let treeNodeId = data.$treeNodeId //节点id// console.info(data)// // alert('当前id'+data.id)// // alert(data.$treeNodeId)// let id = null// if (!data.children || data.children.length == 0) {//   //没有子节点//   id = data.id * 100 + 1// } else {//   id = data.id * 100 + 1 + data.children.length// }// const newChild = { id: id, label: data.label + '-' + id, children: [] }// const child = [{ id: id, label: data.label + '-' + id, children: [] }]// data.children  = child// data.push()// state.dataSource = [data];}const removeNode = (node, data) => {const ids = []ids.push(data.id)remove(ids).then(res => {if (res.code == 200) {ElMessage({type: 'success',message: '删除成功'})getPartTableData(state.query)} else {ElMessage({type: 'error',message: res.msg})}})// dataSource.value = [...dataSource.value];}const partForm = reactive({partNo: '',partRev: '',name: '',cName: '',material: '',gauge: '',massqty: '',partType: '',parentId: ''})const ruleFormsss = ref(null)const addEdit = () => {state.drawer = truestate.title = '添加零部件'partForm.parentId = ''partForm.partNo = ''partForm.partRev = ''partForm.name = ''partForm.cName = ''partForm.material = ''partForm.gauge = ''partForm.massqty = ''partForm.partType = ''}// 取消const cancelEdit = () => {state.drawer = falsesetTimeout(() => {const form = unref(partFormsss)form.resetFields()}, 100)}// 新建/编辑零部件const saveEdit = async () => {const form = unref(ruleFormsss)if (!form) returntry {await form.validate()if (state.title == '添加零部件' || state.title == '添加子节点') {addSavePart()}if (state.title == '编辑零部件') {updateSavePart()}state.drawer = false} catch (error) {console.error(error)ElMessage.error('抱歉,您有必填项未填!')}}const addSavePart = () => {// let quantity = partForm.quantity + partForm.iQuantityconst data = {partNo: partForm.partNo,partRev: partForm.partRev,name: partForm.name,cName: partForm.cName,material: partForm.material,gauge: partForm.gauge,massqty: partForm.massqty,partType: partForm.partType,parentId: partForm.parentId}add(data).then(res => {state.drawer = false// const treeData = {//   id: res.data.id,//   label: res.data.name,//   children: []// }// state.dataSource = res.datagetPartTableData(state.query)ElMessage.success('恭喜您,添加成功!')})}const updateSavePart = () => {const data = {id: state.handleId,name: partForm.name,manager: partForm.manager,startDate: partForm.startDate,endDate: partForm.endDate}update(data).then(res => {state.drawer = falsegetPartTableData(state.query)ElMessage.success('恭喜您,保存成功!')})}const rules = {name: [{ required: true, message: '此处为必填项', trigger: 'blur' }]}function getPartTableData() {listAll(state.query).then(res => {state.dataSource = res.data})}onMounted(() => {getPartTableData()})return {...toRefs(state),append,removeNode,addEdit,cancelEdit,treeRef,partForm,ruleFormsss,saveEdit,rules}}
}</script><style lang="scss" >
.el-tree-node {margin-top: 8px;
}
.custom-tree-node {flex: 1;display: flex;align-items: center;justify-content: space-between;font-size: 18px;padding-right: 8px;
}</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/27771.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C++ UML建模

starUML UML图转C代码 数据流图 E-R图 流程图 整体架构图 ORM关系图 参考 app.asar附件资源可免激活 JHBlog/设计模式/设计模式/1、StarUML使用简明教程.md at master SunshineBrother/JHBlog GitHub C程序员UML实务手册代码 - 开发实例、源码下载 - 好例子网 GitHub -…

leetcode-09-[232]用栈实现队列[225]用队列实现栈[20]有效的括号[1047]删除字符串中的所有相邻重复项

重点&#xff1a; 栈和队列 Java中 栈不建议用stack来实现 建议用 ArrayDeque和Linkedlist来实现 队列建议用ArrayDeque和Linkedlist来实现 两者效率比较&#xff1a; java - Why is ArrayDeque better than LinkedList - Stack Overflow 基于Linkedlist是链表等&#xff0c;除…

LVGL:

LVGL&#xff08;little video graphics library&#xff09;是一个开源的嵌入式图形库&#xff0c;提供高性能、低资源占用的图形用户界面&#xff08;GUI&#xff09;。具有模块化&#xff08;项目工程源码&#xff09;设计&#xff0c;可以在多平台使用&#xff08;如微处理…

字符串数组——传递文本的不同方法实例

一、实例化一个文本并在文本上直接显示接收的信息 1、制作一个预制体 (1) UI-Text (TMP)&#xff0c;TitleText (2) 给Text (TMP)添加Recipients.cs组件 using System.Collections; using System.Collections.Generic; using TMPro; using UnityEngine;public class Recipi…

SQL AND OR 运算符的使用与区别

SQL AND & OR 运算符的使用与区别 SQL(Structured Query Language)是一种用于管理关系数据库的编程语言。在SQL中,AND和OR运算符用于在WHERE子句中组合条件,以便更精确地筛选数据。本文将详细介绍SQL中的AND和OR运算符,包括它们的使用方法和区别。 1. SQL AND 运算符…

Linux 常用命令合集

进入root模式 su -> 回车 -> 输入root用户密码关闭系统 方法1&#xff1a; shutdown -h now 方法2&#xff1a; init 0 方法3&#xff1a; telinit 0按预定时间关闭系统 shutdown -h hours:minutes &取消按预定时间关闭系统 shutdown -c重启 shutdown -r now重启…

【技术】MySQL 8.4 免安装版配置

MySQL 8.4 免安装版配置 官网下载压缩包解压文件创建配置文件初始化数据库安装MySQL服务链接数据库修改密码 官网下载压缩包 从MySQL官网下载压缩包&#xff0c;官网&#xff1a;https://www.mysql.com/ 头部菜单点击【DOWNLOADS】&#xff0c;跳转到下载页面。在页面底部点击…

苹果电脑装虚拟机和双系统的区别 苹果笔记本虚拟机和双系统哪个好 虚拟机能装MacOS吗 虚拟机类似的软件

Mac电脑用户在需要使用Windows操作系统的软件时&#xff0c;通常会面临两个选择&#xff1a;安装双系统或使用虚拟机。两种方式各有优缺点&#xff0c;适用于不同的使用场景。本文将详细分析和说明Mac电脑装双系统和虚拟机之间的区别&#xff0c;帮助用户选择最适合自己的方案。…

【嵌入式 - 关于MCU的内存分配】

一、MCU内存分配 MCU&#xff08;微控制器&#xff09;的内存分配是指如何在不同的内存区域&#xff08;如程序存储器、数据存储器、堆栈等&#xff09;中分配和管理内存。不同的MCU可能有不同的内存架构&#xff0c;但通常MCU的内存通常包括以下几部分&#xff1a; 1.1 内存…

高清无字幕视频素材去哪里找?这几个热门无字幕素材网站你要知道

在短视频创作过程中&#xff0c;高清无字幕的视频素材是提升视频质量的关键。无论是制作校园活动宣传片&#xff0c;还是情感励志视频&#xff0c;这些素材都能让你的视频更具吸引力。今天&#xff0c;我就来给大家推荐几个超棒的视频素材网站&#xff0c;这些网站不仅资源丰富…

Java——面向对象进阶(三)

前言&#xff1a; 抽象类&#xff0c;接口&#xff0c;内部类 文章目录 一、抽象类1.1 抽象方法1.2 抽象类1.3 抽象类的使用 二、 接口2.1 接口的定义和实现2.2 default 关键字2.3 实现接口时遇到的问题 三、内部类3.1 成员内部类3.2 静态内部类3.3 成员内部类3.4 匿名内部类&a…

sslyze一键检查服务器检查服务器的 SSL/TLS 安全性(KALI工具系列二十五)

目录 1、KALI LINUX 简介 2、sslyze工具简介 3、信息收集 3.1 目标主机IP&#xff08;服务器&#xff09; 3.2 KALI的IP 4、操作示例 4.1 扫描主机和端口 4.2 批量扫描 4.3 插件扫描 4.4 输出结果 5、总结 1、KALI LINUX 简介 Kali Linux 是一个功能强大、多才多艺…

C++设计模式---代理模式

1、介绍 代理模式&#xff08;Proxy Pattern&#xff09;是一种结构型设计模式&#xff0c;它为其他对象提供一个代理或占位符&#xff0c;以控制对这个对象的访问。代理对象在客户端和目标对象之间起到中介的作用&#xff0c;可以隐藏目标对象的实现细节&#xff0c;增加额外的…

[Python学习篇] Python字符串

字符串是 Python 中最常用的数据类型&#xff0c;一般使用单引号或引号来创建字符串 语法&#xff1a; 字符串变量名A 字符串变量值A 字符串变量名B "字符串变量值B" 示例&#xff1a; a Hello A print(a) b "Hello B" print(b) 字符串特征 一对引号字…

竟然与 package-lock.json 更新有关!部分用户 H5 页面白屏问题!

一.问题 1 场景 现象 接到部分用户反馈进入xxx H5 页面空白&#xff1b; 研发测日志里问题用户的线上页面URL地址可以正常访问&#xff0c;没有复现问题&#xff01;&#xff01;&#xff01; 定位问题 监控平台和客户端日志报错&#xff1a; SyntaxError: Unexpected toke…

调试了一下午,终于把tailwindcss搞进Blazor了

在Vue和Uniapp项目中使用tailwindcss后&#xff0c;实在是太香了&#xff0c;非常符合我这从XAML走过来的老程序员的手感&#xff0c;所以老想着在Blazor项目中引入。看了几个老外大佬的视频&#xff0c;调试了一下午&#xff0c;终于是捣鼓成功了。由于咱们Blazor项目不在node…

STM32硬件接口I2C应用(基于MP6050)

目录 概述 1 STM32Cube控制配置I2C 1.1 I2C参数配置 1.2 使用STM32Cube产生工程 2 HAL库函数介绍 2.1 初始化函数 2.2 写数据函数 2.3 读数据函数 3 认识MP6050 3.1 MP6050功能介绍 3.2 加速计测量寄存器 ​编辑3.3 温度计量寄存器 3.4 陀螺仪测量寄存器 4 MP60…

C++ Windows下Glog日志库安装使用教程

🙋 介绍:glog是google推出的一款轻量级c++开源日志框架。  环境配置:windows+VS2015+gflags 2.2.2+glog-0.3.5。为避免新版本(glog V0.7.1)踏坑,建议装低版本,这里我选用的是V0.3.5。 1. 下载 在gflags官方中下载gflags代码,官方地址 在Glog官方中下载,githut地址:…

简单易用的多功能图床Picsur

什么是 Picsur &#xff1f; Picsur 是一款易于使用、可自行托管的图片分享服务&#xff0c;类似于 Imgur&#xff0c;并内置转换功能。支持多种格式的图片&#xff0c;包括 QOI、JPG、PNG、WEBP&#xff08;支持动画&#xff09;、TIFF、BMP、GIF&#xff08;支持动画&#xf…

Leetcode.2601 质数减法运算

题目链接 Leetcode.2601 质数减法运算 rating : 1779 题目描述 给你一个下标从 0 0 0 开始的整数数组 n u m s nums nums &#xff0c;数组长度为 n n n 。 你可以执行无限次下述运算&#xff1a; 选择一个之前未选过的下标 i i i &#xff0c;并选择一个 严格小于 n u…