【大型电商项目开发】商品服务之分类属性分组&分组新增编辑-22

一：分类属性分组后台代码实现

1.编辑AttrGroupController

   /**
     * 列表
     */
    @RequestMapping("/list/{catelogId}")
    //@RequiresPermissions("product:attrgroup:list")
    public R list(@RequestParam Map<String, Object> params,@PathVariable("catelogId") Long catelogId){
        PageUtils page = attrGroupService.queryPage(params,catelogId);
        return R.ok().put("page", page);
    }

• 通过catelogId和分页参数查询属性分组信息
• @PathVariable(“catelogId”)标注其是参数

2.编辑AttrGroupService

/**
     * 分页查询属性分组
     * @param params
     * @param catelogId
     * @return
     */
    PageUtils queryPage(Map<String, Object> params, Long catelogId);

• params：存放的是分页信息

3.编辑AttrGroupServiceImpl实现AttrGroupService

 @Override
    public PageUtils queryPage(Map<String, Object> params, Long catelogId) {
        if(catelogId == 0){
            //当没有任何参数的时候，就查询的是所有数据
            IPage<AttrGroupEntity> page =
                    this.page(new Query<AttrGroupEntity>().getPage(params), new QueryWrapper<AttrGroupEntity>());
            return new PageUtils(page);
        } else {
            String key = (String) params.get("key");
            QueryWrapper<AttrGroupEntity> wrapper = new QueryWrapper<AttrGroupEntity>().eq("catelog_id", catelogId);
            if(!StringUtils.isEmpty(key)){
                wrapper.and((obj)->{
                    obj.eq("attr_group_id",key).or().like("attr_group_name", key);
                });
            }
            IPage<AttrGroupEntity> page =
                    this.page(new Query<AttrGroupEntity>().getPage(params),wrapper);
            return new PageUtils(page);
        }

    }

1）当catelogId等于0时，默认查询所有信息
* this.page：主要返回的是分页信息
* new Query().getPage(params), new QueryWrapper()的参数需要用构造器去构造出来。
2）当catelogId不为0时，通过catelogId和分也信息查询数据。

二：分类属性分组前台代码实现

1.修改attrgroup.vue的getDataList方法

// 获取数据列表
    getDataList() {
      this.dataListLoading = true;
      this.$http({
        url: this.$http.adornUrl(`/product/attrgroup/list/${this.catId}`),
        method: "get",
        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;
      });
    },

• ${this.catId}：表示的是插值表达式

2.优化treeNodeClick方法

 data() {
    return {
      dataForm: {
        key: ""
      },
      catId:0,
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      addOrUpdateVisible: false
    };
  },

• 在data中绑定catId，默认值为0

   /**
     * 感知树节点
     */
    treeNodeClick(data,node,component) {
       //判断当前点击的分类是不是三级分类
       if(node.level == 3){
          this.catId = data.catId;
          //重新获取列表数据
          this.getDataList();
       }
    },

• 当节点是三级的时候，获取到当前节点的id，传递给getDataList方法，获取列表数据

三：分类属性分组新增功能

1.新增分类级联选择器

1）在attrgroup-add-or-update.vue页面添加el-cascader选择器

       <el-cascader
          v-model="dataForm.catelogId"
          :options="categorys"
        ></el-cascader>

2）在data中添加categorys

     //三级分类数组
      categorys:[],

3）添加获取三级分类方法

/**
     * 获取三级分类信息
     */
    getCategorys() {
      this.$http({
        url: this.$http.adornUrl("/product/category/list/tree"),
        method: "get"
      }).then(({ data }) => {
        console.log("成功获取到菜单数据...", data.data);
        this.menus = data.data;
      });
    },

4）在生命周期内加载该方法

   created(){
    this.getCategorys();
  },

2.回显分类级联选择器

1）在选择器添加prop属性，用来绑定值

<el-cascader
          v-model="dataForm.catelogIds"
          :options="categorys"
          :props="props"
        ></el-cascader>

2）在data中声明prop，绑带属性值

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

3）当第三级chlidren的节点为空的时候，需要处理

/**
	 * 当前菜单的所有子分类
	 * @TableField(exist = false)
	 * 数据表不存在此字段
	 */
	@JsonInclude(JsonInclude.Include.NON_EMPTY)
	@TableField(exist = false)
	private List<CategoryEntity> children;

• @JsonInclude(JsonInclude.Include.NON_EMPTY)：表明当子节点为空时，则不进行返回。

4）优化dataform的参数

   dataForm: {
        attrGroupId: 0,
        attrGroupName: "",
        sort: "",
        descript: "",
        icon: "",
        catelogIds: [],
        catelogId:0,
      },

• catelogIds: []：表示三级分类的数组
• catelogId:0：表示第三级菜单作为catalogid

5）优化提交的方法

// 表单提交
    dataFormSubmit() {
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(
              `/product/attrgroup/${
                !this.dataForm.attrGroupId ? "save" : "update"
              }`
            ),
            method: "post",
            data: this.$http.adornData({
              attrGroupId: this.dataForm.attrGroupId || undefined,
              attrGroupName: this.dataForm.attrGroupName,
              sort: this.dataForm.sort,
              descript: this.dataForm.descript,
              icon: this.dataForm.icon,
              catelogId: this.dataForm.catelogIds[this.dataForm.catelogIds.length - 1],
            })
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.visible = false;
                  this.$emit("refreshDataList");
                }
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        }
      });
    }
  }

• catelogId: this.dataForm.catelogIds[this.dataForm.catelogIds.length - 1]：表明保存的时候只传第三级的值作为此信息的categoryId
• 但让三级分类回显则必须传入数组

四：分类属性分组编辑功能

1.编辑页面回显三级分类属性分组

1）优化cascader选择器

     <el-form-item label="所属分类id" prop="catelogId">
        <el-cascader
          v-model="dataForm.catelogPath"
          :options="categorys"
          :props="props"
          filterable
          placeholder="试试搜索：手机"
        ></el-cascader>
      </el-form-item>

2）在data中定义catelogPath作为分组路径

      props:{
        value:"catId",
        label:"name",
        children:"children",
      },
      visible: false,
      //三级分类数组
      categorys: [],
      dataForm: {
        attrGroupId: 0,
        attrGroupName: "",
        sort: "",
        descript: "",
        icon: "",
        catelogPath: [],
        catelogId:0,
      },

3）当页面关闭的时候，清空三级分类

• 在el-dialog中添加@closed="dialogClose"方法，当dialog关闭的时候执行该方法

   /**
     * 模态框关闭的时候执行
     */
    dialogClose(){
       this.dataForm.catelogPath = [];
    },

2.后台代码实现，编辑CategoryServiceImpl

   /**
     * 查询分类数组
     * @param catelogId
     * @return
     */
    @Override
    public Long[] findCateglogPath(Long catelogId) {
        List<Long> path = new ArrayList<>();
        List<Long> parentPath = findParentPath(catelogId,path);
        //将list逆序重排
        Collections.reverse(parentPath);
        return parentPath.toArray(new Long[parentPath.size()]);
    }

    /**
     * 递归获取父id
     * @param catelogId
     * @param path
     * @return
     */
    private List<Long> findParentPath(Long catelogId,List<Long> path){
        //将当前节点保存起来
        path.add(catelogId);
        //通过id获取节点信息
        CategoryEntity byId = this.getById(catelogId);
        if( byId.getParentCid() != 0) {
            findParentPath(byId.getParentCid(), path);
        }
        return path;
    }

• 用递归地思想查询其父id是否有值，然后放到list集合中
• Collections.reverse(parentPath);可以将集合逆序排序