若依生成树表和下拉框选择树表结构（在其他页面使用该下拉框输入）

1.数据库表设计

  • 生成树结构的主要列是id列和parent_id列，后者指向他的父级
    ![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/a945bf568f9d45c98cd96407fbb0f3d3.png

2.来到前端代码生成器页面

  • 导入你刚刚写出该格式的数据库表
    在这里插入图片描述

3.点击编辑，来到字段

  • 祖籍列表是为了好找到直接父类，不属于代码生成器方法，需要后台编写
    在这里插入图片描述

4.改变生成结构为树表结构

在这里插入图片描述

5.提交然后生成代码并复制到对应目录当中

6.修改serviceImpl当中插入和修改方法

    /*** 新增原料** @param tIngredient 原料* @return 结果*/@Overridepublic int insertTIngredient(TIngredient tIngredient) {TIngredient info = tIngredientMapper.selectTIngredientById(tIngredient.getParentId());// 如果父节点不为正常状态,则不允许新增子节点if (!UserConstants.DEPT_NORMAL.equals(info.getStatus())) {throw new ServiceException("原料类型停用，不允许新增");}tIngredient.setAncestors(info.getAncestors() + "," + tIngredient.getParentId());tIngredient.setCreateTime(DateUtils.getNowDate());return tIngredientMapper.insertTIngredient(tIngredient);}/*** 修改原料** @param tIngredient 原料* @return 结果*/@Overridepublic int updateTIngredient(TIngredient tIngredient) {TIngredient newParentDept = tIngredientMapper.selectTIngredientById(tIngredient.getParentId());TIngredient oldDept = tIngredientMapper.selectTIngredientById(tIngredient.getId());if (StringUtils.isNotNull(newParentDept) && StringUtils.isNotNull(oldDept)) {String newAncestors = newParentDept.getAncestors() + "," + newParentDept.getId();String oldAncestors = oldDept.getAncestors();tIngredient.setAncestors(newAncestors);updateDeptChildren(tIngredient.getId(), newAncestors, oldAncestors);}tIngredient.setUpdateTime(DateUtils.getNowDate());int result = tIngredientMapper.updateTIngredient(tIngredient);if (UserConstants.DEPT_NORMAL.equals(tIngredient.getStatus()) && StringUtils.isNotEmpty(tIngredient.getAncestors())&& !StringUtils.equals("0", tIngredient.getAncestors())) {// 如果该部门是启用状态，则启用该部门的所有上级部门updateParentDeptStatusNormal(tIngredient);}return result;}
  • 用到了两个额外对数操作方法，联动子父级菜单的修改
    /*** 修改该部门的父级部门状态** @param tIngredient 当前部门*/private void updateParentDeptStatusNormal(TIngredient tIngredient) {String ancestors = tIngredient.getAncestors();Long[] deptIds = Convert.toLongArray(ancestors);tIngredientMapper.enableTIngredientByIds(deptIds);}/*** 修改子元素关系** @param deptId       被修改的部门ID* @param newAncestors 新的父ID集合* @param oldAncestors 旧的父ID集合*/public void updateDeptChildren(Long deptId, String newAncestors, String oldAncestors) {List<TIngredient> children = tIngredientMapper.selectChildrenTIngredientById(deptId);for (TIngredient child : children) {child.setAncestors(child.getAncestors().replaceFirst(oldAncestors, newAncestors));}if (children.size() > 0) {tIngredientMapper.updateTIngredientChildren(children);}}

生成完毕，额外处理自己表中数据也是在新增或者修改当中写

来到想要使用的前端页面（其他页面使用）

1.导入依赖

  • 第一个依赖是生成树的请求
  • 第二个组件是vue.js的树形选择组件
  • 第三个是树形组件的css样式
import { listIngredient } from "@/api/bases/ingredient";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

2.注册树形组件

  components: {Treeselect},

在这里插入图片描述

3.要使用的核心方法

    /** 查询原料下拉树结构 */getTreeselect () {listIngredient().then(response => {this.ingredientOptions = [];const data = { id: 0, ingredientName: '顶级节点', children: [] };data.children = this.handleTree(response.data, "id", "parentId");this.ingredientOptions.push(data);});},/** 转换原料数据结构 */normalizer (node) {if (node.children && !node.children.length) {delete node.children;}return {id: node.id,label: node.ingredientName,children: node.children};},

4调用方法，我是通过新增按钮来实现的

    /** 新增原料操作 */handleAddIngredientVO () {this.reset();this.getTreeselect();this.openAddIngredientVO = true;this.titleAddIngredientVO = "添加产品原料";},

5.调用方法的下拉框表单

            <!-- 新增或者修改原料 --><el-dialog:title="titleAddIngredientVO":visible.sync="openAddIngredientVO"width="500px"append-to-body><el-formref="formVO":model="formVO":rules="rules"label-width="80px"><el-form-itemlabel="产品编码"prop="breedId"><el-inputv-model="formVO.breedId"placeholder="请输入产品编码"/></el-form-item><el-form-itemlabel="父级"prop="materialId"><treeselectv-model="formVO.materialId":options="ingredientOptions":normalizer="normalizer":disable-branch-nodes="true"placeholder="请选择原料"/></el-form-item><el-form-itemlabel="kg/每米"prop="remark"><el-inputv-model="formVO.remark"placeholder="请输入每米多少千克"/></el-form-item></el-form><divslot="footer"class="dialog-footer"><el-buttontype="primary"@click="submitForm">确 定</el-button><el-button @click="cancel">取 消</el-button></div></el-dialog>
  • **重点**
    在这里插入图片描述

6.附treeselect组件常用属性

<treeselect:multiple="true"v-model="form.postIds"//多选id值可赋值可传给后台:options="postOptions"//下拉树桩多选框的数据:show-count="true"//展示下拉总数数据:flat="true"//设置平面模式（选中的标签不联动子节点和父节点）:limit="5"//展示多选的标签个数:limitText="count => `及其它${count}项`"//多选的超出文字展示方式:auto-deselect-descendants="true"//取消节点时，取消其接点的子节点（仅可在平面模式下使用）:auto-select-descendants="true"//选择节点时，取消其接点的子节点（仅可在平面模式下使用）placeholder="请选择区域":disable-branch-nodes="true"//只能选择末级节点/>

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

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

相关文章

实训一:设计系统主页作业

实训一:设计系统主页作业

1.题目 设计系统主页。 2.目的 (1)熟悉Web前端项目开发环境。 (2)掌握如何建立Web前端项目&#xff0c;学会规划项目结构。 (3)掌握动态生成页面内容的方法。 (4)理解如何使用Flash显示图片新闻。 (5)会在应用系统中编写播放动态新闻的程序。 3.内容 建立项目结构&#xff0c;并…
阅读更多...
ROS 2边学边练（47）-- 利用Xacro精简代码

ROS 2边学边练（47）-- 利用Xacro精简代码

前言 Xacro&#xff08;XML Macro&#xff09;是ROS&#xff08;Robot Operating System&#xff09;中用于处理URDF&#xff08;Unified Robot Description Format&#xff09;文件的一个宏处理工具。它允许你在URDF文件中定义和使用宏&#xff0c;这样可以减少重复的代码&…
阅读更多...
【计算机网络】Socket网络编程

【计算机网络】Socket网络编程

&#x1f4bb;文章目录 &#x1f4c4;前言Socket编程基础概念工作原理 Socket API介绍socket函数绑定、监听函数accept、connect接受/发送函数 Socket API的应用Socket类与其派生类的设计服务器与客户端的设计使用 &#x1f4d3;总结 &#x1f4c4;前言 现今我们的日常生活当中…
阅读更多...
git rebase 合并当前分支的多个commit记录

git rebase 合并当前分支的多个commit记录

git rebase 合并当前分支的多个commit记录 git rebase 相关的选项和用法step1&#xff1a;找到想要合并的 commitstep2. 使用 rebase -istep3. 编辑提交历史&#xff1a;step4.编辑合并后的提交信息step5.完成 rebase 过程&#xff1a;step6.**推送更新&#xff1a;**step6.**再…
阅读更多...
【Day2：JAVA变量、数据类型、运算符的认识】

【Day2：JAVA变量、数据类型、运算符的认识】

目录 1、变量的介绍、定义、使用2、标识符2.1 概念2.2 标识符的命名规则2.3 标识符的命名规范 3、数据类型3.1 基本数据类型3.2 引用数据类型 4、Scanner键盘录入4.1 键盘录入效果介绍4.2 键盘录入的三个步骤 5、运算符5.1 运算符和表达式5.2 算数运算符5.3 自增自减运算符5.4 …
阅读更多...
时间瑾眼中的IT行业现状与未来趋势

时间瑾眼中的IT行业现状与未来趋势

文章目录 技术革新与行业应用IT行业的人才培养与教育人工智能与机器学习的演进数据安全与隐私保护可持续发展与绿色技术社会责任与道德规范 随着技术的不断进步&#xff0c;IT行业已成为推动全球经济和社会发展的关键力量。从云计算、大数据、人工智能到物联网、5G通信和区块链…
阅读更多...
如何高效管理微信？快速掌握捷径！

如何高效管理微信？快速掌握捷径！

对于那些需要管理多个微信号的人来说&#xff0c;如何高效地管理这些账号成为了一个难题。今天&#xff0c;就给大家分享一个管理多个微信号的捷径——微信管理系统。 通过微信管理系统&#xff0c;你可以轻松实现高效管理多个微信号&#xff0c;一起来看看吧&#xff01; 首…
阅读更多...
第四届微调——炼丹

第四届微调——炼丹

学习地址&#xff1a;Tutorial/xtuner/README.md at main InternLM/Tutorial GitHub 笔记 微调是一种在已有的预训练模型基础上&#xff0c;通过使用新的数据对模型进行进一步优化和调整的技术手段。它的目的是使模型能够更好地适应特定的应用场景和任务需求&#xff0c;进一…
阅读更多...
【数据库系统工程师】2024年5月考前最后冲刺指南

【数据库系统工程师】2024年5月考前最后冲刺指南

一、备考关键&#xff1a; 高效率的备考方式&#xff1a;多轮迭代学习 △ 基础阶段 △ 大面积撒网(60%) 略读&#xff0d;> 做题 &#xff0d;> 回顾 &#xff0d;> 精读 △ 积累阶段 △ 有针对性的突破(30%) 完成所有章节之后&#xff0c;进行真题测试&#x…
阅读更多...
CCF-Csp算法能力认证，202209-1如此编码（C++）含解析

CCF-Csp算法能力认证，202209-1如此编码（C++）含解析

前言 推荐书目&#xff0c;在这里推荐那一本《算法笔记》&#xff08;胡明&#xff09;&#xff0c;需要PDF的话&#xff0c;链接如下 「链接&#xff1a;https://pan.xunlei.com/s/VNvz4BUFYqnx8kJ4BI4v1ywPA1?pwd6vdq# 提取码&#xff1a;6vdq”复制这段内容后打开手机迅雷…
阅读更多...
C++进阶：AVL树详解及模拟实现（图示讲解旋转过程）

C++进阶：AVL树详解及模拟实现（图示讲解旋转过程）

C进阶&#xff1a;AVL树详解及模拟实现&#xff08;图示讲解旋转过程&#xff09; 之前在搜索二叉树最后早就埋下伏笔&#xff0c;来介绍AVL树和红黑树&#xff0c;今天就先来第一个吧 文章目录 1.AVL树介绍1.1概念介绍1.2核心性质 2.项目文件规划3.整体框架&#xff08;节点和…
阅读更多...
python跟C++选哪个？

python跟C++选哪个？

选择使用Python还是C取决于你的具体需求和项目背景。我这里有一套编程入门教程&#xff0c;不仅包含了详细的视频讲解&#xff0c;项目实战。如果你渴望学习编程&#xff0c;不妨点个关注&#xff0c;给个评论222&#xff0c;私信22&#xff0c;我在后台发给你。 在通信工程行业…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023