第二十章第三节：实现属性分组的分页查询功能（根据品牌id和key）

品牌查询请求：/product/attrgroup/list/{catelogId}

请求参数：
分类ID: catelogId

{
   page: 1,//当前页码
   limit: 10,//每页记录数
   sidx: 'id',//排序字段
   order: 'asc/desc',//排序方式
   key: '华为'//检索关键字
}

响应数据示例：
{
    "msg": "success", 
    "code": 0, 
    "page": {
        "totalCount": 0, 
        "pageSize": 10, 
        "totalPage": 0, 
        "currPage": 1, 
		//当前对象集合
        "list": [
            {
                "attrGroupId": 7, 
                "attrGroupName": "主体", 
                "sort": 1, 
                "descript": "主体", 
                "icon": "xx", 
                "catelogId": 225, 
                "catelogPath": null
            }, 
            {
                "attrGroupId": 8, 
                "attrGroupName": "规格", 
                "sort": 2, 
                "descript": "规格", 
                "icon": "XX", 
                "catelogId": 225, 
                "catelogPath": null
            }
        ]
    }
}

操作数据库表：pms_brand

1、实现效果

当点击左侧属性分组菜单时，查询所有的属性分组数据
当点击品牌tree三级数据时，根据当前品牌的id查询相应的数据

请求：/product/attrgroup/list/{catelogId}

params参数格式：
{
   page: 1,//当前页码
   limit: 10,//每页记录数
   sidx: 'id',//排序字段
   order: 'asc/desc',//排序方式
   key: '华为'//检索关键字
}

返回的响应数据格式：
{
	"msg": "success",
	"code": 0,
	"page": {
		"totalCount": 0,
		"pageSize": 10,
		"totalPage": 0,
		"currPage": 1,
		"list": [{
			"attrGroupId": 0, //分组id
			"attrGroupName": "string", //分组名
			"catelogId": 0, //所属分类
			"descript": "string", //描述
			"icon": "string", //图标
			"sort": 0 //排序
			"catelogPath": [2,45,225] //分类完整路径
		}]
	}
}

2、编写属性分组接口

com.applesnt.onlinemall.product.service.AttrGroupService

/*根据传递过来的map参数以及品牌id查询属性分组数据*/
PageUtils queryPage(Map<String, Object> params,Long catelogId);

3、编写属性分组接口实现

com.applesnt.onlinemall.product.service.impl.AttrGroupServiceImpl

@Override
public PageUtils queryPage(Map<String, Object> params, Long catelogId) {
    //当点击的不是三级时，查询所有数据
    if(catelogId == 0){
        IPage<AttrGroupEntity> page = this.page(
                //根据map中分页（page、limit）信息获取分页对象
                new Query<AttrGroupEntity>().getPage(params),
                //查询条件 null
                new QueryWrapper<AttrGroupEntity>()
        );
        //返回封装的分页信息和数据信息
        return new PageUtils(page);
    }else{
        //根据点击的catid进行查询
        //select * from pms_attr_group where catelog_id =1 and (attr_group_id =key or attr_group_name like '%key%')
        String key = params.get("key").toString();//从map中获取key的值
        QueryWrapper<AttrGroupEntity> wrapper = new QueryWrapper<AttrGroupEntity>();
        wrapper.eq("catelog_id",catelogId);//eq 表示等于
        if(!StringUtils.isEmpty(key)){
            //相当于sql语句的and (attr_group_id =key or attr_group_name like '%key%')
            wrapper.and((obj)->{
                obj.eq("attr_group_id",key).or().like("attr_group_name",key);
            });
        }
        //wrapper：为当前组装的查询条件
        IPage<AttrGroupEntity> page = this.page(
                new Query<AttrGroupEntity>().getPage(params), wrapper);

        return new PageUtils(page);
    }
}

4、编写controller控制层调用

com.applesnt.onlinemall.product.controller.AttrGroupController

/**
 * 根据参数和id查询列表
 */
@RequestMapping("/list/{catelogId}")
public R list(@RequestParam Map<String, Object> params,@PathVariable("catelogId") Long catelogId){
    PageUtils page = attrGroupService.queryPage(params,catelogId);
    return R.ok().put("page", page);
}

5、编写前端页面查询

src\views\modules\product\attrgroup.vue

定义一个变量catId 默认等于0

catId: 0,

在子组件传递父组件的方法中增加点击三级节点的判断，并把三级节点的catId赋值给变量catId
重新发起查询属性分组数据的请求

      //tree公共组件点击时传递数据
      treenodeclick(data, node) {
        console.log("tree子组件传递的数据是：", data, node);
        //当点击的节点为3级节点时
        if (node.level == 3) {
          //变量catId的值就等于当前节点的catId的值
          this.catId = data.catId;
          //重新查询属性分组数据
          this.getDataList();
        }
      },
      // 获取数据列表
      getDataList() {
        this.dataListLoading = true
        this.$http({
          // 发送查询数据请求
          url: this.$http.adornUrl(`/product/attrgroup/list/${this.catId}`),
          method: 'get',
          //封装的json参数
          params: this.$http.adornParams({
            'page': this.pageIndex,
            'limit': this.pageSize,
            'key': this.dataForm.key
          })
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.dataList = data.page.list
            this.totalPage = data.page.totalCount
          } else {
            this.dataList = []
            this.totalPage = 0
          }
          this.dataListLoading = false
        })
      },