第十三章第七节：页面分类删除功能

请求：/product/category/delete

请求参数：
catIds：[170]

响应数据示例：
{
	"code": 0,
	"msg": "success"
}

操作数据库表：pms_category

1、配置mybatis的逻辑删除

商品的逻辑删除（逻辑删除需要配置mybatis）
辑删除是指不真正删除，只是修改了显示字段

修改onlinemall-product的application配置文件

mybatis-plus:
  #mapper映射文件
  mapper-locations: classpath:/mapper/**/*.xml
  #主键自增
  global-config:
    db-config:
      id-type: auto
      #全局配置逻辑已删除值（优先级低）
      logic-delete-value: 1
      #全局配置逻辑未删除值（优先级低）
      logic-not-delete-value: 0

修改实体类的哪个字段代表删除值 增加注解
com.applesnt.onlinemall.product.entity.CategoryEntity

         /**
	 * 是否显示[0-不显示，1显示]
	 * value表示未删除 delval表示已删除
	 * 如果和全局配置是一样的值 可以忽略不写
	 */
	@TableLogic(value = "1",delval = "0")
	private Integer showStatus;

2、增加分类删除的接口

com.applesnt.onlinemall.product.service.CategoryService

//商品的逻辑删除（不真正删除，只是修改了显示字段）
void removeMenusByIds(List<Long> catIds);

3、增加分类删除的接口实现

com.applesnt.onlinemall.product.service.impl.CategoryServiceImpl

    @Override
    public void removeMenusByIds(List<Long> catIds) {
        //TODO 删除该分类是否被其他地方引用

        //调用mybatis的批量删除方法（如果配置了逻辑删除，非真正的删除）
        baseMapper.deleteBatchIds(catIds);
    }

4、编写controller调用分类删除实现

com.applesnt.onlinemall.product.controller.CategoryController

     /**
     * 删除
     * @RequestBody:表示从请求体中获取json数据，只能时post请求
     */
    @RequestMapping("/delete")
    public R delete(@RequestBody Long[] catIds){

        // 商品的逻辑删除（逻辑删除需要配置mybatis）
        // 逻辑删除是指不真正删除，只是修改了显示字段
        categoryService.removeMenusByIds(Arrays.asList(catIds));
        return R.ok();
    }

5、用postman测试

6、页面删除功能

<template>
  <!-- elemnetUI tree组件 
  :data="menus"：绑定的数据
  :props="defaultProps"：要渲染的数据项
  :expand-on-click-node="false"：点击添加和删除时不触发展开事件
  show-checkbox：显示单选框
  node-key="catId"：数据唯一性id
  :default-expanded-keys="expandedkey"：删除成功后，展开父节点
  -->
  <el-tree
    :data="menus"
    :props="defaultProps"
    :expand-on-click-node="false"
    show-checkbox
    node-key="catId"
    :default-expanded-keys="expandedkey"
  >
    <span class="custom-tree-node" slot-scope="{ node, data }">
      <span>{{ node.label }}</span>
      <span>
        <!-- 当层级小于等于2时 才会出现添加按钮 -->
        <el-button v-if="node.level<=2" type="text" size="mini" @click="() => append(data)">添加</el-button>
        <!-- 当没有子节点时才会出现删除按钮 -->
        <el-button
          v-if="node.childNodes.length==0"
          type="text"
          size="mini"
          @click="() => remove(node, data)"
        >刪除</el-button>
      </span>
    </span>
  </el-tree>
</template>

<script>
// elemnetUI tree组件的script
export default {
  data() {
    return {
      //elemnetUI tree组件的数据改为null
      menus: [],
      // 删除成功后需要展开的节点
      expandedkey: [],
      defaultProps: {
        // children为显示的子节点，必须返回的menus数组的属性key
        children: "children",
        // 要显示出来的名称，必须是返回menus数组的属性key
        label: "name"
      }
    };
  },
  methods: {
    //获取tree数据列表
    getMenus() {
      this.$http({
        //请求的url
        url: this.$http.adornUrl("/product/category/list/tree"),
        //请求方式
        method: "get"
        //成功以后的对数据的处理，把数据打印测试 ({data}):解构表达式
      }).then(({ data }) => {
        console.log("成功获取数据：" + data.data);
        // 把获取到的数据赋值给menus
        this.menus = data.data;
      });
    },
    // 添加方法
    append(data) {
      console.log("append", data);
    },
    // 删除方法 发送post请求
    remove(node, data) {
      //获取当前要删掉的id
      var ids = [data.catId];
      // 弹出删除提示框
      this.$confirm(`要删除 ${data.name} 菜单数据, 是否继续?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          //确认删除
          this.$http({
            url: this.$http.adornUrl("/product/category/delete"),
            method: "post",
            data: this.$http.adornData(ids, false)
            //删除成功的调用
          }).then(({ data }) => {
            this.$message({
              message: "菜单数据删除成功",
              type: "success"
            });
            //删除成功后重新调用获取菜单数据
            this.getMenus();
            // 删除成功后，把父节点展开进行赋值
            this.expandedkey = [node.parent.data.catId]
          });
        }) //取消删除
        .catch(() => {});
        console.log(node)
    }
  },
  //在组件刚被加载完调用获取tree数据的函数
  created() {
    this.getMenus();
  }
};
</script>

<style>
</style>