第二十章第五节：属性分组的修改页面级联回显分类

请求：/product/attrgroup/info/{attrGroupId}

请求参数：
属性分组ID: attrGroupId

响应数据示例：
{
	"msg": "success",
	"attrGroup": {
		"attrGroupId": 7,
		"attrGroupName": "主体",
		"sort": 1,
		"descript": "主体",
		"icon": "xx",
		"catelogId": 225,
		"catelogPath": [2, 34, 225]
	},
	"code": 0
}

操作数据库表：
pms_attr_group
pms_category

1、在实体类中增加一个属性,存放分类集合

com.applesnt.onlinemall.product.entity.AttrGroupEntity

/*注解表示不是数据库字段
* catelogPath：存放返回的三级分类id信息,要与页面上面的级联组件绑定的变量名一致
* */
@TableField(exist = false)
private Long[] catelogPath;

2、编写功能接口

com.applesnt.onlinemall.product.service.CategoryService

    /*根据当前的分数分类id 查询出三级分类id集合[父/子/孙]*/
    Long[] findCatelogPath(Long catelogId);

3、编写功能接口实现

com.applesnt.onlinemall.product.service.CategoryService

    /*根据当前的分数分类id 查询出三级分类id集合[父/子/孙]*/
    @Override
    public Long[] findCatelogPath(Long catelogId) {

        List<Long> paths = new ArrayList<>();

        paths = this.findParentPath(catelogId,paths);
        /*由于查询出来的是顺序是孙/子/父 所以需要倒排序*/
        Collections.reverse(paths);
        /*list 转 数组 返回*/
        return paths.toArray(new Long[paths.size()]);
    }

    /*递归查询*/
    private List<Long> findParentPath(Long catelogId,List<Long> paths){
        /*根据传递过来的分类id获取当前对象*/
        CategoryEntity categoryEntity = this.baseMapper.selectById(catelogId);
        /*把当前的id放到list中*/
        paths.add(catelogId);
        /*如果当前对象不是顶级分类*/
        if (categoryEntity.getParentCid()!=0){
            /*根据当前对象的父id继续递归查询*/
            this.findParentPath(categoryEntity.getParentCid(),paths);
        }
        return paths;
    }

4、编写controller调用

com.applesnt.onlinemall.product.controller.AttrGroupController

    /*注入三级分类的service*/
    @Autowired
    private CategoryService categoryService;

    /**
     * 信息
     */
    @RequestMapping("/info/{attrGroupId}")
    public R info(@PathVariable("attrGroupId") Long attrGroupId){
        /*根据id查询出当前属性分组对象*/
		AttrGroupEntity attrGroup = attrGroupService.getById(attrGroupId);
		/*从当前对象获取所属分类id*/
        Long catelogId =  attrGroup.getCatelogId();
        /*根据当前的分数分类id 查询出三级分类id集合[父/子/孙]*/
        Long[] catelogPath = categoryService.findCatelogPath(catelogId);
        /*把三级分类结果集放到当前对象中 返回页面*/
        attrGroup.setCatelogPath(catelogPath);
        return R.ok().put("attrGroup", attrGroup);
    }

5、修改页面 获取回显的分类数组

attrgroup-add-or-update.vue页面在init方法中增加回显的值

this.dataForm.catelogPath = data.attrGroup.catelogPath;

6、优化项

当点击完修改后，在点击添加 分类数据会记录修改的分类数据

<!-- 綁定一個closed事件，當關不這個頁面時 調用dialogClose方法，清空表單的分類數據-->
<el-dialog :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible" @closed="dialogClose">

// 關閉對話框時，清空表單分類數據
dialogClose(){
  this.dataForm.catelogPath = [];
},