欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

java+vue3+el-tree實現(xiàn)樹形結構操作代碼

 更新時間:2024年06月13日 10:09:36   作者:迪霸戈  
基于springboot + vue3 elementPlus實現(xiàn)樹形結構數(shù)據(jù)的添加、刪除和頁面展示,本文通過示例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧

基于springboot + vue3 elementPlus實現(xiàn)樹形結構數(shù)據(jù)的添加、刪除和頁面展示

效果如下

代碼如下,業(yè)務部分可以自行修改

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)//構造最外層節(jié)點,即id=0的節(jié)點
                .map(item -> {
                    item.setChildren(getChildren(item, treeList));//id=0的節(jié)點就為他設置子節(jié)點
                    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()))//判斷當前節(jié)點的父id是不是要設置節(jié)點的id
                .map(item -> {
                    item.setChildren(getChildren(item, treeEntityList));//如果是 為其設置子節(jié)點 通過遞歸 為每個除了最外層節(jié)點的節(jié)點設置子節(jié)點
                    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)"> 增加子節(jié)點 </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="數(shù)模號:" 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="規(guī)格:" 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="數(shù)據(jù)類型:" 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 = '添加子節(jié)點'
            partForm.parentId = data.id
            partForm.partNo = ''
            partForm.partRev = ''
            partForm.name = ''
            partForm.cName = ''
            partForm.material = ''
            partForm.gauge = ''
            partForm.massqty = ''
            partForm.partType = ''
            // debugger
            // 獲取當前節(jié)點
            // const currentNode = treeRef.value.getNode(data.id)
            // // 獲取當前節(jié)點在樹中的索引
            // // const currentIndex = getNod(data.id)
            // // // 如果索引大于 0,獲取前一個節(jié)點
            // // if (currentIndex > 0) {
            // //   const prevNode = getNodeAt(currentIndex - 1);
            // //   const prevId = prevNode.id; 
            // //   // 處理前一個節(jié)點的 id
            // // }
            // let treeNodeId = data.$treeNodeId //節(jié)點id
            // console.info(data)
            // // alert('當前id'+data.id)
            // // alert(data.$treeNodeId)
            // let id = null
            // if (!data.children || data.children.length == 0) {
            //   //沒有子節(jié)點
            //   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 == '添加子節(jié)點') {
                    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>

到此這篇關于java+vue3+el-tree實現(xiàn)樹形結構操作的文章就介紹到這了,更多相關java樹形結構內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!

相關文章

  • Spring Web MVC和Hibernate的集成配置詳解

    Spring Web MVC和Hibernate的集成配置詳解

    這篇文章主要介紹了Spring Web MVC和Hibernate的集成配置詳解,具有一定借鑒價值,需要的朋友可以參考下
    2017-12-12
  • Java技巧函數(shù)方法實現(xiàn)二維數(shù)組遍歷

    Java技巧函數(shù)方法實現(xiàn)二維數(shù)組遍歷

    這篇文章主要介紹了Java技巧函數(shù)方法實現(xiàn)二維數(shù)組遍歷,二維數(shù)組遍歷,每個元素判斷下是否為偶數(shù),相關內(nèi)容需要的小伙伴可以參考一下
    2022-08-08
  • Java全能工具類之Hutool的用法詳解

    Java全能工具類之Hutool的用法詳解

    Hutool是一個Java工具類庫,由國內(nèi)的程序員loolly開發(fā),目的是提供一些方便、快捷、實用的工具類和工具方法,本文就來詳細聊聊它的使用吧
    2023-03-03
  • 詳解Java編程中對象的序列化

    詳解Java編程中對象的序列化

    這篇文章主要介紹了Java編程中對象的序列化,包括一些反序列化的例子,需要的朋友可以參考下
    2015-11-11
  • SpringMVC獲取HTTP中元素的實現(xiàn)示例

    SpringMVC獲取HTTP中元素的實現(xiàn)示例

    本文主要介紹了SpringMVC獲取HTTP中的元素,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2025-02-02
  • JVM 心得 OOM時的堆信息獲取方法與分析

    JVM 心得 OOM時的堆信息獲取方法與分析

    下面小編就為大家?guī)硪黄狫VM 心得 OOM時的堆信息獲取方法與分析。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-10-10
  • mybatis插入與批量插入返回ID的原理詳解

    mybatis插入與批量插入返回ID的原理詳解

    這篇文章主要給大家介紹了關于mybatis插入與批量插入返回ID的原理的相關資料,文中通過示例代碼介紹的非常詳細,對大家學習或者使用mybatis具有一定的參考學習價值,需要的朋友們下面來一起學習學習吧
    2019-07-07
  • 使用graalvm為帶有反射功能的java代碼生成native?image的示例詳解

    使用graalvm為帶有反射功能的java代碼生成native?image的示例詳解

    graalvm讓native鏡像支持反射的關鍵是利用json提前告訴它哪些類的哪些方法會被反射調(diào)用,然后它就能力在運行時支持反射了,這篇文章主要介紹了如何使用graalvm為帶有反射功能的java代碼生成native?image,需要的朋友可以參考下
    2024-02-02
  • Jmeter邏輯控制器事務控制器使用方法解析

    Jmeter邏輯控制器事務控制器使用方法解析

    這篇文章主要介紹了Jmeter邏輯控制器事務控制器使用方法解析,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
    2020-11-11
  • Java字符串split方法的坑及解決

    Java字符串split方法的坑及解決

    這篇文章主要介紹了Java字符串split方法的坑及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-12-12

最新評論