优化:没有下级菜单时不要有下一级空菜单,在java端把children属性空值去掉,空集合时去掉字段,
可以用@JsonInclude(Inlcude.NON_EMPTY)
注解标注在实体类的属性上,
@TableField(exist =false) @JsonInclude(JsonInclude.Include.NON_EMPTY) private List<CategoryEntity> children;
提交完后返回页面也刷新了,是用到了父子组件。在$message
弹窗结束回调$this.emit
接下来要解决的问题是,修改了该vue后,新增是可以用,修改回显就有问题了,应该回显3级
<el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.attrGroupId)" >修改</el-button> <script> // 新增 / 修改 addOrUpdateHandle(id) { // 先显示弹窗 this.addOrUpdateVisible = true; // .$nextTick(代表渲染结束后再接着执行 this.$nextTick(() => { // this是attrgroup.vue // $refs是它里面的所有组件。在本vue里使用的时候,标签里会些ref="" // addOrUpdate这个组件 // 组件的init(id);方法 this.$refs.addOrUpdate.init(id); }); }, </script> 在init方法里进行回显 但是分类的id还是不对,应该是用数组封装的路径
init(id) { this.dataForm.attrGroupId = id || 0; this.visible = true; this.$nextTick(() => { this.$refs["dataForm"].resetFields(); if (this.dataForm.attrGroupId) { this.$http({ url: this.$http.adornUrl( `/product/attrgroup/info/${this.dataForm.attrGroupId}` ), method: "get", params: this.$http.adornParams() }).then(({ data }) => { if (data && data.code === 0) { this.dataForm.attrGroupName = data.attrGroup.attrGroupName; this.dataForm.sort = data.attrGroup.sort; this.dataForm.descript = data.attrGroup.descript; this.dataForm.icon = data.attrGroup.icon; this.dataForm.catelogId = data.attrGroup.catelogId; //查出catelogId的完整路径 this.catelogPath = data.attrGroup.catelogPath; } }); } });
修改AttrGroupEntity
/** * 三级分类修改的时候回显路径 */ @TableField(exist = false) private Long[] catelogPath;
修改controller
/** * 信息 */ @RequestMapping("/info/{attrGroupId}") //@RequiresPermissions("product:attrgroup:info") public R info(@PathVariable("attrGroupId") Long attrGroupId){ AttrGroupEntity attrGroup = attrGroupService.getById(attrGroupId); // 用当前当前分类id查询完整路径并写入 attrGroup attrGroup.setCatelogPath(categoryService.findCateLogPath(attrGroup.getCatelogId())); return R.ok().put("attrGroup", attrGroup); }
添加service
@Override // CategoryServiceImpl public Long[] findCateLogPath(Long catelogId) { List<Long> paths = new ArrayList<>(); paths = findParentPath(catelogId, paths); // 收集的时候是顺序 前端是逆序显示的 所以用集合工具类给它逆序一下 Collections.reverse(paths); return paths.toArray(new Long[paths.size()]); } /** * 递归收集所有父节点 */ private List<Long> findParentPath(Long catlogId, List<Long> paths) { // 1、收集当前节点id paths.add(catlogId); CategoryEntity byId = this.getById(catlogId); if (byId.getParentCid() != 0) { findParentPath(byId.getParentCid(), paths); } return paths; }