[项目练手笔记-谷粒商城（SpringCloud Alibaba+vue前后端分离）]day11品牌分类关联与级联更新

[项目练手笔记-谷粒商城（SpringCloud Alibaba+vue前后端分离）]day11品牌分类关联与级联更新

一、品牌分类关联与级联更新

• 环境：基于Java+Vue的前后端分离工程
• 级联菜单使用：Element-UI组件，Cascader 级联选择器（https://element.eleme.cn/#/zh-CN/component/cascader）
• 级联菜单具体使用方法及回显：我的day10博客（https://blog.csdn.net/qq_41522089/article/details/107430492）
  多表格关联情况下，是需要进行附加冗余数据进行记录的，方便更新

1.分页功能编写

使用mybatis-plus的分页功能

@EnableTransactionManagement
@Configuration
@MapperScan("com.xiaoxiao.gulimall.product.dao")
public class MyBatisConfig {
    @Bean
    public PaginationInterceptor paginationInterceptor() {
        PaginationInterceptor paginationInterceptor = new PaginationInterceptor();
        // 设置请求的页面大于最大页后操作， true调回到首页，false 继续请求  默认false
         paginationInterceptor.setOverflow(true);
        // 设置最大单页限制数量，默认 500 条，-1 不受限制
         paginationInterceptor.setLimit(1000);
        // 开启 count 的 join 优化,只针对部分 left join
        paginationInterceptor.setCountSqlParser(new JsqlParserCountOptimize(true));
        return paginationInterceptor;
    }
}

2.增加品牌模糊查询

@Service("brandService")
public class BrandServiceImpl extends ServiceImpl<BrandDao, BrandEntity> implements BrandService {

    @Override
    public PageUtils queryPage(Map<String, Object> params) {
        String key = (String) params.get("key");
        QueryWrapper<BrandEntity> queryWrapper = new QueryWrapper<>();

        if(!StringUtils.isEmpty(key)) {
            queryWrapper.eq("brand_id",key).or().like("name",key);
        }
        IPage<BrandEntity> page = this.page(
                new Query<BrandEntity>().getPage(params),
                queryWrapper
        );

        return new PageUtils(page);
    }

}

3.前端增加关联分类

          <el-button type="text" size="small" @click="updateCatelogHandle(scope.row.brandId)">关联分类</el-button>

    <el-dialog title="关联分类" :visible.sync="cateRelationDialogVisible" width="30%">
      <el-popover placement="right-end" v-model="popCatelogSelectVisible">
        <category-cascader :catelogPath.sync="catelogPath"></category-cascader>
        <div style="text-align: right; margin: 0">
          <el-button size="mini" type="text" @click="popCatelogSelectVisible = false">取消</el-button>
          <el-button type="primary" size="mini" @click="addCatelogSelect">确定</el-button>
        </div>
        <el-button slot="reference">新增关联</el-button>
      </el-popover>
      <el-table :data="cateRelationTableData" style="width: 100%">
        <el-table-column prop="id" label="#"></el-table-column>
        <el-table-column prop="brandName" label="品牌名"></el-table-column>
        <el-table-column prop="catelogName" label="分类名"></el-table-column>
        <el-table-column fixed="right" header-align="center" align="center" label="操作">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="deleteCateRelationHandle(scope.row.id,scope.row.brandId)"
            >移除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cateRelationDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="cateRelationDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>

    updateCatelogHandle(brandId) {
      this.cateRelationDialogVisible = true;
      this.brandId = brandId;
      this.getCateRelation();
    },
    getCateRelation() {
      this.$http({
        url: this.$http.adornUrl("/product/categorybrandrelation/catelog/list"),
        method: "get",
        params: this.$http.adornParams({
          brandId: this.brandId
        })
      }).then(({ data }) => {
        this.cateRelationTableData = data.data;
      });
    },

4.后端关联存储

1.存储

需要存储的是品牌id与分类id，还有两个的名字，这后面是冗余信息，需要使用对应的dao并且根据其id才能查找到

CategoryBrandRelationController更新方法

    @RequestMapping("/save")
    //@RequiresPermissions("product:categorybrandrelation:save")
    public R save(@RequestBody CategoryBrandRelationEntity categoryBrandRelation){
//    categoryBrandRelationService.save(categoryBrandRelation);
      categoryBrandRelationService.saveDetails(categoryBrandRelation);

        return R.ok();
    }

@Override
public void saveDetails(CategoryBrandRelationEntity categoryBrandRelation) {
    Long brandId = categoryBrandRelation.getBrandId();
    Long catelogId = categoryBrandRelation.getCatelogId();
    BrandEntity brandEntity = brandDao.selectById(brandId);
    CategoryEntity categoryEntity = categoryDao.selectById(catelogId);
    System.out.println(brandEntity);
    System.out.println(categoryEntity);
    categoryBrandRelation.setBrandName(brandEntity.getName());
    categoryBrandRelation.setCatelogName(categoryEntity.getName());
    this.save(categoryBrandRelation);
}

2.品牌更新冗余字段

BrandController更新update方法

@RequestMapping("/update")
//@RequiresPermissions("product:brand:update")
public R update(@Validated(value = {UpdateGroup.class}) @RequestBody BrandEntity brand) {
    brandService.updateDetails(brand);

    return R.ok();
}

BrandServiceImpl更新updateDetails方法

@Override
public void updateDetails(BrandEntity brand) {
    this.updateById(brand);
    if(!StringUtils.isEmpty(brand.getName())){
        categoryBrandRelationService.updateDetails(brand.getBrandId(),brand.getName());
        //TODO 其他关联更新
    }
}

CategoryBrandRelationServiceImpl创建updateDetails方法

@Override
public void updateDetails(Long brandId, String name) {
    CategoryBrandRelationEntity relationEntity = new CategoryBrandRelationEntity();
    relationEntity.setBrandId(brandId);
    relationEntity.setBrandName(name);
    this.update(relationEntity,new UpdateWrapper<CategoryBrandRelationEntity>().eq("brand_id",brandId));
}

3.级联更新冗余字段

级联更新是需要更新冗余字段的，方法与上面的更新品牌字段一样。
这里使用方法2
更新CategoryServiceImpl的updateCascade方法，更新级联菜单

    @Autowired
    private CategoryBrandRelationService relationService;

    @Override
    public void updateCascade(CategoryEntity category) {
    	//先更新菜单
        this.updateById(category);
        //更新级联关联数据
        relationService.updateCascade(category.getCatId(),category.getName());
    }

使用Mybatis-plus直接映射，然后更新

    @Override
    public void updateCascade(Long catId, String name) {
/*      CategoryBrandRelationEntity relationEntity = new CategoryBrandRelationEntity();
        relationEntity.setCatelogId(catId);
        relationEntity.setCatelogName(name);
        this.update(relationEntity,new UpdateWrapper<CategoryBrandRelationEntity>().eq("catelog_id",catId));
*/
        //方案2
        this.baseMapper.updateCategory(catId,name);

    }

@Mapper
public interface CategoryBrandRelationDao extends BaseMapper<CategoryBrandRelationEntity> {

    void updateCategory(@Param("catId") Long catId, @Param("name") String name);
}

Mybatis-plus直接映射

<update id="updateCategory">
    UPDATE     `pms_category_brand_relation` SET `catelog_name` = #{name} WHERE `catelog_id` = #{catId}
</update>

这样整个级联菜单就能完成更新了
修改菜单属性
其他子菜单，级联菜单都会自动更新