zoukankan      html  css  js  c++  java
  • @JsonInclude去空字段和解决vue级联菜单回显的bug

    优化:没有下级菜单时不要有下一级空菜单,在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;
        }
    

      

  • 相关阅读:
    Redis 之order set有序集合结构及命令详解
    Redis 之set集合结构及命令详解
    Redis 之list链表结构及命令详解
    Redis 之string结构及命令详解
    Redis 通用key操作命令
    Redis 在Linux下的安装
    Entity FrameWork 操作使用详情
    Linux 之常用操作指令详解
    Linux 之根目录介绍
    php 加密解密函数封装
  • 原文地址:https://www.cnblogs.com/vincentmax/p/14422425.html
Copyright © 2011-2022 走看看