8. 谷粒商城树形列表添加过滤、属性分组查询全部、级联选择器

树形列表添加过滤

src\views\modules\common\category.vue

添加了树形菜单过滤，但是清空过滤条件时，节点无法收起

在原有的基础上修改

template

<!-- 树形列表 -->
<template>
  <div>
    <el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input>
    <el-tree
      ref="categoryTree"
      :filter-node-method="filterNode"
      :highlight-current="true"
      style="margin-top: 5px"
    ></el-tree>
  </div>
  <!-- 添加点击事件 -->
</template>

script

  data() {
    return {
      filterText: '',
    }
  },
  
  watch: {
    filterText(val) {
      this.$refs.categoryTree.filter(val)
    },
  },
  
  methods: {
    //树节点过滤
    filterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
  },        

属性分组添加查询全部

src\views\modules\product\attrgroup.vue

改动的较多，建议直接拷贝

添加级联选择器

新增分组中，选择属性分类，使用级联选择器

前端

src\views\modules\product\attrgroup-add-or-update.vue

template

      <el-form-item label="所属分类id" prop="categoryId">
        <!-- filterable 打开搜索功能 -->      
        <el-cascader
          v-model="dataForm.categoryPath"
          :options="categoryList"
          :props="props"
          filterable
        ></el-cascader>
      </el-form-item>

script

  data() {
    return {
      props: {
        value: 'catId',
        label: 'name',
        children: 'childrenList',
      },
      categoryList: [],
    }
  },

methods:

    // 关闭对话框时，清空所选分类
    dialogClose() {
      this.dataForm.categoryPath = []
    },

级联选择器回显

修改属性分组时，根据分类id，回显所属分类

后端

entity

CategoryEntity.java

    @JsonInclude(Include.NON_EMPTY) // 为空则不返回这个字段
    private List<CategoryEntity> childrenList;

AttrGroupEntity.java

	/**
	 *	分类的全路径
	 */
	@TableField(exist = false)
	private Long[] categoryPath;

controller

AdminAttrGroupController.java

    @Autowired
    private CategoryService categoryService;
    
	/**
     * 信息
     */
    @GetMapping("/info/{attrGroupId}")
    public R info(@PathVariable("attrGroupId") Long attrGroupId){
		AttrGroupEntity attrGroup = attrGroupService.getById(attrGroupId);
        Long categoryId = attrGroup.getCategoryId();
        Long[] path = categoryService.findCategoryPath(categoryId);
        attrGroup.setCategoryPath(path);
        return R.ok().put("attrGroup", attrGroup);
    }

service

CategoryService.java

    /**
     * 根据分类id，查找分类id的全路径
     * @param categoryId
     * @return
     */
    Long[] findCategoryPath(Long categoryId);

CategoryServiceImpl.java

    @Override
    public Long[] findCategoryPath(Long categoryId) {
        List<Long> pathList = new ArrayList<>();

        List<Long> parentPathList = findParentPath(categoryId,pathList);
        // 将数据反转过来
        Collections.reverse(parentPathList);
        return pathList.toArray(new Long[parentPathList.size()]);
    }

    /**
     *     225,25,2
     *     只要父节点不为0，就说明有父级，
     *     则继续往上找
     */

    private List<Long> findParentPath(Long categoryId, List<Long> pathList) {
        // 1、收集当前节点id
        pathList.add(categoryId);
        // 先根据id，查出当前分类的信息
        CategoryEntity category = this.getById(categoryId);
        if (category.getParentCid() != 0){
            // 如果父id不为0，则说明有父级，继续往上查
            findParentPath(category.getParentCid(),pathList);
        }

        // 最后查到1级分类，父id为0了，则会返回整个列表
        return pathList;
    }