Mybatis-plus实现软删除三级菜单

MP开启软删除

1.在application.yml中配置相关信息

mybatis-plus:
  mapper-locations: classpath*:/mapper/**/*.xml
  global-config:
    db-config:
      id-type: auto
      logic-delete-value: 1 # 逻辑已删除值(默认为 1)
      logic-not-delete-value: 0 # 逻辑未删除值(默认为 0)

 其中：logic-delete-value为我们在数据表中代表已经逻辑删除的值

            logic-not-delete-value为我们在数据表中代表未进行逻辑删除的值

2.在对应需要软删除的实体类上添加@TableLogic注解

	/**
	 * 是否显示[0-不显示，1显示]
	 */
    @TableLogic(value = "1",delval = "0")
	private Integer showStatus;

         因为我的数据表中的show_status的值是与配置文件中的配置是相反的，所以我们需要改为@TableLogic(value = "1",delval = "0")，其中delval为我们标定软删除的值，value反之

3.调用.deleteBatchIds即可

前端代码及效果

<template>
  <div>
    <el-tree :data="data" :props="defaultProps" show-checkbox node-key="catId" :expand-on-click-node="false" :default-expanded-keys="expandedkeys">
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{
   
   { node.label }}</span>
        <span>
          <el-button v-if="node.level<=2" type="text" size="mini" @click="() => append(data)">
            Append
          </el-button>
          <el-button v-if="node.isLeaf" type="text" size="mini" @click="() => remove(node, data)">
            Delete
          </el-button>
        </span>
      </span>
    </el-tree>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具 js，第三方插件 js，json

//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import 引入的组件需要注入到对象中才能使用
  components: {},
  props: {},
  data() {
    //这里存放数据
    return {
      data: [],
      expandedkeys: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  //计算属性 类似于 data 概念
  computed: {},
  //监控 data 中的数据变化
  watch: {},
  //方法集合
  methods: {
    getMenus() {
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl('/product/category/list/tree'),
        method: 'get'
      }).then(data => {
        console.log('成功获取数据' + data.data.data)
        this.data = data.data.data
      })
    },
    append(data) {
      console.log('append' + data)
    },

    remove(node, data) {
      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({
              type: 'success',
              message: '删除成功!'
            })
            console.log(data)
            // 获取新的菜单
            this.getMenus()
            // 展开这次删除的父菜单
            this.expandedkeys = [node.parent.data.catId]
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    }
  },

  //生命周期 - 创建完成（可以访问当前 this 实例）
  created() {
    this.getMenus()
  },
  //生命周期 - 挂载完成（可以访问 DOM 元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有 keep-alive 缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共 css 类
</style>

 即使调用delete方法，也不是将这条记录物理删除，只是将show_status设置为0

扫描二维码关注公众号，回复： 16687135 查看本文章