基于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;
}
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51.
- 52.
- 53.
- 54.
- 55.
- 56.
- 57.
- 58.
- 59.
- 60.
- 61.
- 62.
- 63.
- 64.
- 65.
- 66.
- 67.
- 68.
- 69.
- 70.
- 71.
- 72.
- 73.
- 74.
- 75.
- 76.
- 77.
- 78.
- 79.
- 80.
- 81.
- 82.
- 83.
- 84.
- 85.
- 86.
- 87.
- 88.
- 89.
- 90.
- 91.
- 92.
- 93.
- 94.
- 95.
- 96.
- 97.
- 98.
- 99.
- 100.
- 101.
- 102.
- 103.
- 104.
- 105.
- 106.
- 107.
- 108.
- 109.
- 110.
- 111.
- 112.
- 113.
- 114.
- 115.
- 116.
- 117.
- 118.
- 119.
- 120.
- 121.
- 122.
- 123.
- 124.
- 125.
- 126.
- 前端代码
<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>
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51.
- 52.
- 53.
- 54.
- 55.
- 56.
- 57.
- 58.
- 59.
- 60.
- 61.
- 62.
- 63.
- 64.
- 65.
- 66.
- 67.
- 68.
- 69.
- 70.
- 71.
- 72.
- 73.
- 74.
- 75.
- 76.
- 77.
- 78.
- 79.
- 80.
- 81.
- 82.
- 83.
- 84.
- 85.
- 86.
- 87.
- 88.
- 89.
- 90.
- 91.
- 92.
- 93.
- 94.
- 95.
- 96.
- 97.
- 98.
- 99.
- 100.
- 101.
- 102.
- 103.
- 104.
- 105.
- 106.
- 107.
- 108.
- 109.
- 110.
- 111.
- 112.
- 113.
- 114.
- 115.
- 116.
- 117.
- 118.
- 119.
- 120.
- 121.
- 122.
- 123.
- 124.
- 125.
- 126.
- 127.
- 128.
- 129.
- 130.
- 131.
- 132.
- 133.
- 134.
- 135.
- 136.
- 137.
- 138.
- 139.
- 140.
- 141.
- 142.
- 143.
- 144.
- 145.
- 146.
- 147.
- 148.
- 149.
- 150.
- 151.
- 152.
- 153.
- 154.
- 155.
- 156.
- 157.
- 158.
- 159.
- 160.
- 161.
- 162.
- 163.
- 164.
- 165.
- 166.
- 167.
- 168.
- 169.
- 170.
- 171.
- 172.
- 173.
- 174.
- 175.
- 176.
- 177.
- 178.
- 179.
- 180.
- 181.
- 182.
- 183.
- 184.
- 185.
- 186.
- 187.
- 188.
- 189.
- 190.
- 191.
- 192.
- 193.
- 194.
- 195.
- 196.
- 197.
- 198.
- 199.
- 200.
- 201.
- 202.
- 203.
- 204.
- 205.
- 206.
- 207.
- 208.
- 209.
- 210.
- 211.
- 212.
- 213.
- 214.
- 215.
- 216.
- 217.
- 218.
- 219.
- 220.
- 221.
- 222.
- 223.
- 224.
- 225.
- 226.
- 227.
- 228.
- 229.
- 230.
- 231.
- 232.
- 233.
- 234.
- 235.
- 236.
- 237.
- 238.
- 239.
- 240.
- 241.
- 242.
- 243.
- 244.
- 245.
- 246.
- 247.
- 248.
- 249.
- 250.
- 251.
- 252.
- 253.
- 254.
- 255.
- 256.
- 257.
- 258.
- 259.
- 260.
- 261.
- 262.
- 263.
- 264.
- 265.
- 266.
- 267.
- 268.
- 269.
- 270.
- 271.
- 272.
- 273.
- 274.
- 275.
- 276.
- 277.
- 278.
- 279.
- 280.
- 281.
- 282.
- 283.
- 284.
- 285.
- 286.
- 287.
- 288.
- 289.
- 290.
- 291.
- 292.
- 293.
- 294.
- 295.
- 296.
- 297.
- 298.
- 299.
- 300.
- 301.
- 302.
- 303.
- 304.
- 305.
- 306.
- 307.
- 308.
- 309.
- 310.
- 311.
- 312.