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 {

    @Autowired
    ICadPartService service;

    @Autowired
    ICadRelationService 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 = true
            state.title = '添加子节点'
            partForm.parentId = data.id
            partForm.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 = true
            state.title = '添加零部件'
            partForm.parentId = ''
            partForm.partNo = ''
            partForm.partRev = ''
            partForm.name = ''
            partForm.cName = ''
            partForm.material = ''
            partForm.gauge = ''
            partForm.massqty = ''
            partForm.partType = ''
        }

        // 取消
        const cancelEdit = () => {
            state.drawer = false
            setTimeout(() => {
                const form = unref(partFormsss)
                form.resetFields()
            }, 100)
        }
        // 新建/编辑零部件
        const saveEdit = async () => {
            const form = unref(ruleFormsss)
            if (!form) return
            try {
                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.iQuantity
            const 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.data
                getPartTableData(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 = false
                getPartTableData(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>

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

c#引用dll报错cs8370功能“本地函数特性“在c#7.3中不可用

c#引用dll报错cs8370功能“本地函数特性“在c#7.3中不可用

cs8370:功能"本地函数特性"在c#7.3中不可用 解决方法&#xff1a; 代码放在form类里面
阅读更多...
【qt】视口和窗口坐标

【qt】视口和窗口坐标

视口和窗口坐标 一.视口和窗口坐标的原理二.视口和窗口坐标的好处三.演示好处四.总结 一.视口和窗口坐标的原理 在绘图事件中进行绘图 void Widget::paintEvent(QPaintEvent *event) {QPainter painter(this);QRect rect(200,0,200,200);painter.drawRect(rect);//设置视口的…
阅读更多...
和数集团最新人事任命通知

和数集团最新人事任命通知

根据集团战略发展规划&#xff0c;为进一步拓展业务领域&#xff0c;优化组织架构&#xff0c;完善客户服务&#xff0c;经公司研究决定&#xff0c;现对以下人事进行任命&#xff1a; 任命徐敬东为和数研究院院长 任命李晓峰为常务副总经理 任命陈善明为市场总监 任命窦晓…
阅读更多...
什么是感音神经性耳聋?

什么是感音神经性耳聋?

什么是感音神经性耳聋&#xff1f; 感音神经性耳聋&#xff0c;是指耳蜗内的神经细胞以及耳蜗后的神经纤维出现病变所引起的听力下降。由于耳蜗内的毛细胞失去其功能&#xff0c;无法将声音转化为电能&#xff0c;称为感音性聋。耳蜗后的神经纤维的功能出现障碍&#xff0c;无…
阅读更多...
RabbitMQ-Stream(高级详解)

RabbitMQ-Stream(高级详解)

文章目录 什么是流何时使用 RabbitMQ Stream&#xff1f;在 RabbitMQ 中使用流的其他方式基本使用Offset参数chunk Stream 插件服务端消息偏移量追踪示例 示例应用程序RabbitMQ 流 Java API概述环境创建具有所有默认值的环境使用 URI 创建环境创建具有多个 URI 的环境 启用 TLS…
阅读更多...
青否数字人直播源码代理端后台操作步骤！

青否数字人直播源码代理端后台操作步骤！

青否数字人直播源码代理端后台&#xff0c;我们将详细介绍一下数字人的代理端后台的详细操作步骤&#xff01; 1.代理端入口 2.代理后台预览 基本设置&#xff0c;账号管理&#xff0c;资金管理&#xff0c;克隆端 。 2.1基本设置 设置一些账号的基本信息包括名称&#xff0c;l…
阅读更多...
时尚解决方案来袭：几分钟即可生成高清商拍大片

时尚解决方案来袭：几分钟即可生成高清商拍大片

在时尚行业&#xff0c;视觉展示的重要性不可小觑。商品图片不仅代表品牌的风格调性&#xff0c;而且直接影响消费者的购买行为。可以说&#xff0c;视觉营销在服装行业中的地位至关重要。 尽管如此&#xff0c;视觉营销的传统产出渠道——商业摄影&#xff0c;因其高成本、复杂…
阅读更多...
安全生产信息化平台：高效构建安全台账管理体系

安全生产信息化平台：高效构建安全台账管理体系

随着科技的飞速发展&#xff0c;信息化已成为推动企业安全生产管理的重要手段。传统的安全台账管理方式&#xff0c;涉及记录、整理、汇编等多个繁琐环节&#xff0c;不仅耗时费力&#xff0c;而且在查找和检索时也不便。安全生产信息化平台的出现&#xff0c;为企业提供了全新…
阅读更多...
实验12 路由重分布

实验12 路由重分布

实验12 路由重分布 一、 原理描述二、 实验目的三、 实验内容四、 实验配置五、 实验步骤 一、 原理描述 在大型网络的组建过程中&#xff0c;隶属不同机构的网络部分往往会根据自身的实际情况来选用路由协议。例如&#xff0c;有些网络规模很小&#xff0c;为了管理简单&…
阅读更多...
yolov8摔倒检测（包含数据集+训练好的模型）

yolov8摔倒检测（包含数据集+训练好的模型）

基于先进的YOLOv8模型&#xff0c;实现了一套高效可靠的人体摔倒检测系统。YOLOv8作为YOLO系列的最新成员&#xff0c;以其卓越的检测速度和准确性&#xff0c;在计算机视觉领域尤其是目标检测任务中表现出色。本系统不仅能够实时处理视频流或监控画面&#xff0c;还能对静态图…
阅读更多...
RAG 进阶 LlamaIndex多文档

RAG 进阶 LlamaIndex多文档

前言 我们一起来学习LlamaIndex功能更完善的多文档RAG&#xff0c;大家可以参照官方文档来对比学习。 Advanced RAG - LlamaIndex Multi-Doc Agent 单个文档RAG Agent流程 我们结合上图来理解一下文档的处理流程。Document就是文档,它会被解析成多个数据节点(Node),类似RAG …
阅读更多...
小程序开发中部署SSL证书的详细指南

小程序开发中部署SSL证书的详细指南

在小程序开发中部署SSL证书主要是为了实现HTTPS安全连接&#xff0c;确保用户与服务器之间的数据传输是加密的。以下是部署SSL证书的一般步骤&#xff0c;具体操作可能会根据你的服务器提供商和所选的SSL证书类型有所不同&#xff1a; 1. 获取SSL证书 PC点此申请&#xff1a;…
阅读更多...
ArduPilot固件自定义参数

ArduPilot固件自定义参数

文章目录 前言一、修改Parameters.h二、修改Parameters.cpp三、修改config.h四、添加打印五、测试 前言 ROVER4.4 本教程是根据apm官网wiki操作的&#xff0c;有英语基础的可以直接参考官方教程 一、修改Parameters.h 修改Parameters.h&#xff0c;添加如下&#xff1a; k_…
阅读更多...
深度遍历-求“岛屿数量”

深度遍历-求“岛屿数量”

一、问题描述 二、解题思路 1.设置一个对应的boolean二维数组 isfind[][] &#xff0c;用来标记已经遍历过的“岛屿” 2.使用双层循环遍历岛屿&#xff08;grid&#xff09;二维数组&#xff0c;当遇到 isfind[i][j]false 时表示遇到一个新岛屿 3.当遇到新岛屿时进行深度递归…
阅读更多...
小程序中如何设置实体会员卡和线上会员卡一样

小程序中如何设置实体会员卡和线上会员卡一样

在小程序中给客户发电子会员卡&#xff0c;是非常方便和快捷的。除了发放电子会员卡&#xff0c;有些商家还希望能够发放实体会员卡。但实体会员卡如何与小程序中的会员卡号一一对应&#xff0c;是一个重要的问题。下面就具体介绍怎么设置实体会员卡和线上会员卡一样。 1. 领取…
阅读更多...
包装类：基本数据类型对应的对象

包装类：基本数据类型对应的对象

integer 底层原理&#xff1a; 自动装箱与拆箱&#xff08;JDK5以后&#xff09; 成员方法&#xff1a;类型转换最重要 改写键盘录入&#xff1a;利用nextline
阅读更多...
HX519 防倒流数据线芯片IC

HX519 防倒流数据线芯片IC

一般概述 苹果iPhone防倒流数据线芯片&#xff0c;可完美支持iPhone、iPad、iPod等8针闪电接口的数据传输同步功能及充电功能。 特点 ❥集成度高&#xff0c;极少的外围元器件。 ❥电路简单&#xff0c;价格优势明显。 ❥稳定性高&#xff0c;兼容性强。 ❥与市面上普通…
阅读更多...
新渠道+1！TDengine Cloud 入驻 Azure Marketplace

新渠道+1！TDengine Cloud 入驻 Azure Marketplace

近日&#xff0c;TDengine Cloud 正式入驻微软云 Marketplace&#xff0c;为全球更多用户带来全托管的时序数据处理服务。这一举措也丰富了 TDengine 的订阅渠道&#xff0c;为用户提供了极大的便捷性。现在&#xff0c;您可以通过微软云 Marketplace 轻松订阅并部署 TDengine …
阅读更多...
生产环境部署meilisearch（Running a self-hosted Meilisearch project in production）

生产环境部署meilisearch（Running a self-hosted Meilisearch project in production）

官网的第一手资料学新技术&#xff1a;meilisearch官方文档 安装的官网地址&#xff1a;meilisearch安装的官网 部署在生产环境的指导&#xff1a;meilisearch部署在生产环境的指导 Elasticsearch 做为老牌搜索引擎&#xff0c;功能基本满足&#xff0c;但复杂&#xff0c;重…
阅读更多...
导出 Whisper 模型到 ONNX

导出 Whisper 模型到 ONNX

前言 在语音识别领域&#xff0c;Whisper 模型因其出色的性能和灵活性备受关注。为了在更多平台和环境中部署 Whisper 模型&#xff0c;导出为 ONNX 格式是一个有效的途径。ONNX&#xff08;Open Neural Network Exchange&#xff09;是一个开放格式&#xff0c;支持不同的深度…
阅读更多...
最新文章

Copyright @ 2022~2023