【大型电商项目开发】商品服务之三级分类删除功能-13

导读:本篇文章讲解 【大型电商项目开发】商品服务之三级分类删除功能-13,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

一:页面效果

1.打开elementUI官网

https://element.eleme.cn/#/zh-CN/component/tree

复制tree组件相关代码

<template>
  <div>
    <el-tree :data="menus" :props="defaultProps" :expand-on-click-node="false" show-checkbox node-key="catId">
       <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span>
          <el-button type="text" size="mini"  @click="() => append(data)" v-if="node.level<=2">Append</el-button>
          <el-button type="text" size="mini" @click="() => remove(node, data)" v-if="node.childNodes.length == 0">Delete</el-button>
        </span>
      </span>
    </el-tree>
  </div>
</template>
<script>
//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
//例如:import 《组件名称》 from '《组件路径》';
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: {},
  data() {
    return {
      menus: [],
      defaultProps: {
        children: "children",
        label: "name"
      }
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    /**
     * 获取三级菜单数据
     */
    getMenus() {
      this.$http({
        url: this.$http.adornUrl("/product/category/list/tree"),
        method: "get"
      }).then(({ data }) => {
        console.log("成功获取到菜单数据...", data.data);
        this.menus = data.data;
      });
    },
    /**
     * 添加节点
     */
    append(data) {
      console.log("append",data);
    },
    /**
     * 移除节点
     */
    remove(node, data) {
      console.log("remove",node,data);
    },
  },
  //生命周期 - 创建完成(可以访问当前this实例)
  created() {
    this.getMenus();
  },
  //生命周期 - 挂载完成(可以访问DOM元素)
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能,这个函数会触发
};
</script>
<style scoped>
</style>

在这里插入图片描述

2.说明

1)slot-scope=“{ node, data }”
node表示的是节点信息,data表示节点数据
2)v-if=“node.level<=2”
菜单只有三级,所以只要字节点处于一级或者二级,就可以进行添加菜单。
3)v-if=“node.childNodes.length == 0”
因为子节点是一个数组,所以当子节点的数组长度为0时,就显示删除菜单
4):expand-on-click-node=“false”
当为false时,只有点击箭头才会下拉下级菜单
在这里插入图片描述
5)show-checkbox
添加选择框,实现批量删除功能
在这里插入图片描述
6)node-key=“id”
每颗树节点用来作为唯一标识,整棵树是唯一的

二:后台接口实现

1.打开CategoryController文件

  • @RequestBody:获取请求体,只有post请求才会发送请求体,必须发送post请求
  • SpringMVC会自动将请求体的数据(json),转化为对应的对象
/**
     * 删除
     * @RequestBody:获取请求体,只有post请求才会发送请求体,必须发送post请求
     * SpringMVC会自动将请求体的数据(json),转化为对应的对象
     */
    @RequestMapping("/delete")
    //@RequiresPermissions("product:category:delete")
    public R delete(@RequestBody Long[] catIds){
		categoryService.removeByIds(Arrays.asList(catIds));
        return R.ok();
    }

2.使用postman进行接口测试

post请求

localhost:88/api/product/category/delete

在这里插入图片描述
请求发送成功,接口没问题!!!

3.接口功能完善

1)在CategoryController添加delete方法

/**
 * 删除
 * @RequestBody:获取请求体,只有post请求才会发送请求体,必须发送post请求
 * SpringMVC会自动将请求体的数据(json),转化为对应的对象
 */
@RequestMapping("/delete")
//@RequiresPermissions("product:category:delete")
public R delete(@RequestBody Long[] catIds){
    //1.检查当前删除的菜单,是否被别的地方调用
	categoryService.removeMenuByIds(Arrays.asList(catIds));
    return R.ok();
}

2)在CategoryService添加removeMenuByIds方法

/**
     * 多选删除菜单
     * @param asList
     */
    void removeMenuByIds(List<Long> asList);

3)在CategoryServiceImpl实现removeMenuByIds方法

   /**
     * 批量删除
     * @param asList
     */
    @Override
    public void removeMenuByIds(List<Long> asList) {
         //todo  1.检查当前删除的菜单,是否被别的地方调用

         //逻辑删除
         baseMapper.deleteBatchIds(asList);
    }

4.逻辑删除

1)配置全局的逻辑删除规则
在application.yml加入配置

#mybatis-plus映射位置
#classpath*,表示扫描本微服务和其他微服务
mybatis-plus:
  mapper-locations: classpath*:/mapper/**/*.xml
#设置id主键自增
  global-config:
    db-config:
      id-type: auto
      #逻辑删除
      logic-delete-value: 1   # 逻辑已删除值(默认为 1)
      logic-not-delete-value: 0 # 逻辑未删除值(默认为 0)

2)给CategoryEntity实体类加上逻辑删除注解@TableLogic

/**
	 * 是否显示[0-不显示,1显示]
	 * @TableLogic:代表这是一个逻辑删除字段
	 */
	@TableLogic(value = "1",delval = "0")
	private Integer showStatus;

3)给application.yml文件添加debug日志配置

#debug日志
logging:
  level: 
    com.sysg.gulimail: debug

4)用postman测试以后打印sql
localhost:88/api/product/category/delete

UPDATE pms_category SET show_status=0 WHERE cat_id IN ( 1431 )

在这里插入图片描述
修改成功!!!

三:前端功能实现

1.在category.vue中添加remove方法

/**
     * 移除节点
     */
    remove(node, data) {
      var ids = [data.catId];
      this.$http({
            url: this.$http.adornUrl('/product/category/delete'),
            method: 'post',
            data: this.$http.adornData(ids, false)
          }).then(({data}) => {
            //刷新页面
            this.getMenus();
          })
      console.log("remove",node,data);
    },

点击delete按钮,删除成功
在这里插入图片描述

2.在删除之前弹框提示

  /**
     * 移除节点
     */
    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.getMenus();
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        }); 
    },

在这里插入图片描述

3.在删除之前弹框提示

在回调函数中添加执行成功函数

          this.$message({
            message: '菜单删除成功',
            type: 'success'
          });

在这里插入图片描述

4.删除成功后继续打开子节点,而不是折叠起来

1)在el-tree标签中添加**:default-expanded-keys = “expandedKey”**
expandedKey表示默认展开的数组
2)在data数据绑定中添加expandedKey:[],
3)在删除成功的方法里为expandedKey赋值,取要删除节点的父节点赋值给expandedKey。

//设置出需要默认展开的菜单
this.expandedKey = [node.parent.data.catId];

4)category.vue所有方法

<template>
  <div>
    <el-tree :data="menus" :props="defaultProps" :expand-on-click-node="false" :default-expanded-keys = "expandedKey"
    show-checkbox node-key="catId">
       <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span>
          <el-button type="text" size="mini"  @click="() => append(data)" v-if="node.level<=2">Append</el-button>
          <el-button type="text" size="mini" @click="() => remove(node, data)" v-if="node.childNodes.length == 0">Delete</el-button>
        </span>
      </span>
    </el-tree>
  </div>
</template>
<script>
//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
//例如:import 《组件名称》 from '《组件路径》';
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: {},
  data() {
    return {
      menus: [],
      //默认展开的数组
      expandedKey:[],
      defaultProps: {
        children: "children",
        label: "name"
      }
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    /**
     * 获取三级菜单数据
     */
    getMenus() {
      this.$http({
        url: this.$http.adornUrl("/product/category/list/tree"),
        method: "get"
      }).then(({ data }) => {
        console.log("成功获取到菜单数据...", data.data);
        this.menus = 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({
            message: '菜单删除成功',
            type: 'success'
            });
            //刷新页面
            this.getMenus();
            //设置出需要默认展开的菜单
            this.expandedKey = [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 scoped>
</style>

5.把逻辑删除的菜单恢复出来

update pms_category set show_status = 1

四:批量删除功能实现

1.添加批量删除按钮

<el-button type="danger" @click="batchDelete">危险按钮</el-button>

2.获取当前选中的节点

1)getCheckedNodes

  • 若节点可被选择(即 show-checkbox 为 true),则返回目前被选中的节点所组成的数组
  • (leafOnly, includeHalfChecked) 接收两个 boolean 类型的参数,1. 是否只是叶子节点,默认值为 false 2. 是否包含半选节点,默认值为 false
    2)在el-tree中添加ref = “menuTree”,用来选中tree中的所有组件
    3)添加batchDelete批量删除方法
 /**
     * 批量删除方法
     */
    batchDelete(){
      let catIds = [];
       let checkedNodes = this.$refs.menuTree.getCheckedNodes();
       for(let i = 0 ; i < checkedNodes.length ; i ++){
           let catId = checkedNodes[i].catId;
           catIds.push(catId);
       }
       //发送post请求提交删除的id
      this.$confirm(`是否批量删除菜单?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http({
            url: this.$http.adornUrl("/product/category/delete"),
            method: "post",
            data: this.$http.adornData(catIds, false),
          }).then(({ data }) => {
            this.$message({
              message: "菜单删除成功",
              type: "success",
            });
            //刷新页面
            this.getMenus();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/84136.html

(0)
小半的头像小半

相关推荐

极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!