一、总述

本次就是一个小的优化。

就是分组新增或者是修改的时候，直接显示商品分类的id可读性不高，新增的时候需要填写对商品分类的id，修改的时候，就只是给你一个商品分类的数字，并不能直接显示到底是什么分类。

那有什么办法可以解决这个问题呢？

elementUI中的级联选择器可以解决这个问题。

二、前端实现

前端这里就是一个级联选择器这个组件的使用，翻阅文档，知道哪些参数，如何配置就行了

下图是elementUI中的级联选择器：

复制这个直接到我们的分组组件中，在新增/删除对话框那里，将所属分类id下面的内容进行替换

在数据域中声明好相关的属性：

需要正确将分类数据显示出来的话，就需要在页面打开的时候就获取到分类数据，放到categorys中：

通过上述步骤，基本上就能显示了，但是会出现最后一级的分类是空的情况，这是由于这个级联组件可不管你的children集合里面没有元素，只要存在这个就渲染，空的也渲染，只是显示空白，没有数据罢了。

那么需要怎么办呢？

其实很简单，就是将后端返回的对应的那个实体类，在children字段上面加上注解，加上：

java 复制代码

@JsonInclude(JsonInclude.Include.NON_EMPTY)

代表一但为空的话，这里的为空空集合也包括了，就不将这个字段以json返回给前端。

到现在的话，在新增的时候就能级联显示分类信息了：

当然这里选择的话，最终给我们的数据是，从父到孙的分类id数组，而我们最终提交的时候，只需要提交最后一级的分类id就行了，因此需要在提交之前做一下处理，修改表单中的绑定的分类值：

那修改的时候，怎样还以这种级联的方式进行回显呢？

其实很简单，我们知道刚刚选择了最终我们得到的数据是"父-子-孙"的分类id数组，反正有这个数据，级联组件就能正确的进行显示。

那么现在思路其实就已经出来了，就是点击修改按钮的时候，前端肯定要向后端请求分组数据，只需要分组数据中携带好分类id的完整路径即可，然后将这个完整路径设置给数据域中的categoryIds，又因为这个categoryIds和级联组件进行了绑定，因此此时级联组件就能按照这个路径进行级联显示了。

所以现在只需要在后端携带好这个路径，然后在前端绑定好就行了。

后端携带这个路径是后端的事情，在后端实现中进行说明，现在直接说一下绑定：

三、后端实现

在新增分组信息的后端没什么好说的，都不需要修改什么。

只是这个修改分组时因为需要将分类信息以级联的方式进行回显，而级联回显依赖的是分类路径。

所以这里后端主要是对分类信息获取接口改进一下，就是新增一个分类路径进行返回

controller

service

service接口：

java 复制代码

public interface IAttrGroupService extends IService<AttrGroup> {

    AttrGroupVo getDetailGroup(Long attrGroupId);
}

service实现：

java 复制代码

@Service
public class AttrGroupServiceImpl extends ServiceImpl<AttrGroupMapper, AttrGroup> implements IAttrGroupService {

    @Autowired
    private ICategoryService categoryService;
    @Override
    public AttrGroupVo getDetailGroup(Long attrGroupId) {
        AttrGroup group = getById(attrGroupId);
        AttrGroupVo attrGroupVo = new AttrGroupVo();
        BeanUtils.copyProperties(group,attrGroupVo);
        Long[] path = categoryService.categoryPath(group.getCatelogId());
        attrGroupVo.setCategoryPath(path);
        return attrGroupVo;
    }
}

这是分组这里，主要还是分类那里通过分类id获取其完整路径的核心方法：

service：

接口：

实现：

java 复制代码

@Override
    public Long[] categoryPath(Long categoryId) {
        List<Long> path = new ArrayList<>();
        List<Long> categoryPath = path(categoryId, path);
        Collections.reverse(categoryPath);
        return categoryPath.toArray(new Long[categoryPath.size()]);
    }

    private List<Long> path(Long categoryId,List<Long> path){
        path.add(categoryId);
        Category category = getById(categoryId);
        Long parentCid = category.getParentCid();
        if(parentCid!=0){
            path(parentCid,path);
        }
        return path;
    }

四、总结

前端的话就是一个级联组件的使用，后端的话主要是分类路径的获取

谷粒商城第十天-分组新增级联显示商品分类&分组修改级联回显商品分类

一、总述

二、前端实现

三、后端实现

四、总结