营销型企业网站,搜索引擎优化网页,网络舆情监测分析系统,外贸网站建设哪家强1.数据库表设计
生成树结构的主要列是id列和parent_id列#xff0c;后者指向他的父级
2.来到前端代码生成器页面
导入你刚刚写出该格式的数据库表
3.点击编辑#xff0c;来到字段
祖籍列表是为了好找到直接父类#xff0c;不属于代码生成器方法#xff0c;需要后台编…1.数据库表设计
生成树结构的主要列是id列和parent_id列后者指向他的父级
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) {ListTIngredient 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:titletitleAddIngredientVO:visible.syncopenAddIngredientVOwidth500pxappend-to-bodyel-formrefformVO:modelformVO:rulesruleslabel-width80pxel-form-itemlabel产品编码propbreedIdel-inputv-modelformVO.breedIdplaceholder请输入产品编码//el-form-itemel-form-itemlabel父级propmaterialIdtreeselectv-modelformVO.materialId:optionsingredientOptions:normalizernormalizer:disable-branch-nodestrueplaceholder请选择原料//el-form-itemel-form-itemlabelkg/每米propremarkel-inputv-modelformVO.remarkplaceholder请输入每米多少千克//el-form-item/el-formdivslotfooterclassdialog-footerel-buttontypeprimaryclicksubmitForm确 定/el-buttonel-button clickcancel取 消/el-button/div/el-dialog
**重点**
6.附treeselect组件常用属性
treeselect:multipletruev-modelform.postIds//多选id值可赋值可传给后台:optionspostOptions//下拉树桩多选框的数据:show-counttrue//展示下拉总数数据:flattrue//设置平面模式选中的标签不联动子节点和父节点:limit5//展示多选的标签个数:limitTextcount 及其它${count}项//多选的超出文字展示方式:auto-deselect-descendantstrue//取消节点时取消其接点的子节点仅可在平面模式下使用:auto-select-descendantstrue//选择节点时取消其接点的子节点仅可在平面模式下使用placeholder请选择区域:disable-branch-nodestrue//只能选择末级节点/
