客户端网站建设文档,做简图的网站,网站地图灰色效果的怎么做的,如何自己做一个网页基于springboot vue3 elementPlus实现树形结构数据的添加、删除和页面展示
效果如下 代码如下#xff0c;业务部分可以自行修改
java后台代码
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.daztk.mes.common.annotation.LogOperation…基于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){ListCadPart 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 {ListLong idList Arrays.asList(ids);ListLong list recurveIdList(idList);service.removeByIds(list);} catch (Exception e) {e.printStackTrace();return new Result().err();}return new Result().ok();}/*** 递归获取id树** param ids* return*/public ListLong recurveIdList(ListLong ids){ListLong list new ArrayList();for(Long id: ids){list.add(id);//关系表查子集ListCadRelation cadRelations relationService.list(new QueryWrapperCadRelation().eq(parent_id, id));if(CollectionUtils.isNotEmpty(cadRelations)){ListLong partIds cadRelations.stream().map(CadRelation::getPartId).collect(Collectors.toList());ListLong list1 recurveIdList(partIds);list.addAll(list1);}}return list;}public ListCadPart getTree(ListCadPart treeList){ListCadPart collect treeList.stream().filter(item - item.getParentId() 0)//构造最外层节点即id0的节点.map(item - {item.setChildren(getChildren(item, treeList));//id0的节点就为他设置子节点return item;}).collect(Collectors.toList());return collect;}private static ListCadPart getChildren(CadPart treeEntity, ListCadPart treeEntityList) {ListCadPart 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;}
前端代码
templatediv classcustom-tree-container!-- pUsing render-content/pel-tree stylemax-width: 600px :datadataSource show-checkbox node-keyid default-expand-all:expand-on-click-nodefalse :render-contentrenderContent / --el-button typeprimary classadd-btn iconel-icon-circle-plus-outline clickaddEdit新增零部件/el-buttondiv stylepadding-top: 20px;el-tree stylemax-width: 600px; :datadataSource show-checkbox node-keyid default-expand-all:expand-on-click-nodefalse reftreeRef :propsmapPropstemplate #default{ node, data }span classcustom-tree-nodespan{{ node.label }}/spanspana clickappend(data) 增加子节点 /aa stylemargin-left: 8px clickremoveNode(node, data) 删除 /a/span/span/template/el-tree/divel-dialog :titletitle v-modeldrawer width600pxel-form :modelpartForm :rulesrules refruleFormsss label-width120px classdemo-partFormel-form-item label数模号 proppartNoel-input v-modelpartForm.partNo clearable/el-input/el-form-itemel-form-item label版本号 proppartRevel-input v-modelpartForm.partRev clearable/el-input/el-form-itemel-form-item label名称 propnameel-input v-modelpartForm.name clearable/el-input/el-form-itemel-form-item label中文名称 propcNameel-input v-modelpartForm.cName clearable/el-input/el-form-itemel-form-item label材料 propmaterialel-input v-modelpartForm.material clearable/el-input/el-form-itemel-form-item label规格 propgaugeel-input v-modelpartForm.gauge clearable/el-input/el-form-itemel-form-item label重量 propmassqtyel-input v-modelpartForm.massqty clearable/el-input/el-form-itemel-form-item label数据类型 proppartTypeel-input v-modelpartForm.partType clearable/el-input/el-form-item/el-formtemplate #footerspan classdialog-footerel-button clickcancelEdit取 消/el-buttonel-button typeprimary clicksaveEdit确 定/el-button/span/template/el-dialog/div
/templatescript
import { reactive, ref, toRefs, unref, onMounted } from vue
import { add, remove, listAll } from api/cad/part
import { ElMessage } from element-plusexport 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(当前iddata.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}}
}/scriptstyle langscss
.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
