谷粒商城实战笔记-73~74-商品服务-API-属性分组

一，73-商品服务-API-属性分组-分组新增&级联选择器

分组新增时，要实现如下的分类级联效果。

1，引入级联el-cascader组件

 <div>
    <el-cascader
      filterable
      clearable 
      placeholder="试试搜索：手机"
      v-model="paths"
      :options="categorys"
      :props="setting"
    ></el-cascader>
  </div>

• options属性
  通过options属性绑定三级分类数据categorys。
  categorys是在组件创建后触发的声明周期函数中调用接口获取的。
  

• props属性，设置级联选择的展示和value

	setting: {
        value: "catId",
        label: "name",
        children: "children"
      },

效果如下：

这个实现还有一点瑕疵，即出现了四级级联，实际上分类只有三级，这是因为后台给每个分类的children属性都赋值了。

所以，要调整下后台的逻辑，当分类没有子分类时，不要包含这个字段，添加如下注解即可实现。

@JsonInclude(JsonInclude.Include.NON_EMPTY)

二，74-商品服务-API-属性分组-分组新增&级联选择器

这一节解决修改分组时，分类属性不能正常回显的问题。

在点击编辑时，实际上用到了组件group-add-or-update.vue。

这个组件会调用后台接口查询对应的分组信息，所以最好是在后台组装好要回显的分类信息。

AttrGroupController的info方法中调用categoryService.findCatelogPath获取分组的分类信息。

CategoryServiceImpl中的实现逻辑如下。

	@Override
    public Long[] findCatelogPath(Long catelogId) {
        List<Long> paths = new ArrayList<>();
        List<Long> parentPath = findParentPath(catelogId, paths);
        Collections.reverse(parentPath);
        return parentPath.toArray(new Long[parentPath.size()]);
    }

	private List<Long> findParentPath(Long catelogId,List<Long> paths){
        //1、收集当前节点id
        paths.add(catelogId);
        CategoryEntity byId = this.getById(catelogId);
        if(byId.getParentCid()!=0){
            findParentPath(byId.getParentCid(),paths);
        }
        return paths;

    }