商品服务-三级分类-基础修改操作

最新推荐文章于 2023-06-28 14:36:07 发布
最新推荐文章于 2023-06-28 14:36:07 发布
阅读量1.5k 收藏
点赞数
分类专栏： ElementUI 谷粒商城 VUE 文章标签： 分类
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41596346/article/details/121281625
版权
谷粒商城 同时被 3 个专栏收录
62 篇文章 1 订阅
订阅专栏
VUE
34 篇文章 0 订阅
订阅专栏
ElementUI
32 篇文章 0 订阅
订阅专栏

1.添加修改按钮

在添加按钮后添加修改按钮

 <el-button
     type="text"
     size="mini"
     @click="() => edit(data)">
     Edit     
  </el-button>

在remove方法后加上修改方法

 //修改
 edit(data){
   console.log("要修改的数据:",data);
 }

在这里插入图片描述

2.弹出修改对话框

//修改
edit(data){
  console.log("要修改的数据:",data);
  //打开对话框
  this.dialogVisible = true;
  this.category.name = data.name;
  this.category.catId = data.catId;
  this.category.productUnit = data.productUnit;
},

在这里插入图片描述
问题: 修改和添加共用了一个对话框，这样修改点击确认如何发送请求?

3.对话框类型的划分

将原先对话框中确认点击触发函数改为submitData，新增一个属性对话框类型dialogType(2种类型add/edit)和对话框提示信息title,在添加和修改方法分别赋值即可，并修改对话框提示信息

 <!-- 对话框 -->
 <el-dialog :title="title" :visible.sync="dialogVisible" width="30%">
   <el-form :model="category">
     <el-form-item label="分类名称" >
       <el-input v-model="category.name" autocomplete="off"></el-input>
     </el-form-item>
    <el-form-item label="图标">
       <el-input v-model="category.icon" autocomplete="off"></el-input>
     </el-form-item>
     <el-form-item label="计量单位">
       <el-input v-model="category.productUnit" autocomplete="off"></el-input>
     </el-form-item>
   </el-form>
   <span slot="footer" class="dialog-footer">
     <el-button @click="dialogVisible = false">取 消</el-button>
     <el-button type="primary" @click="submitData"
       >确 定</el-button
     >
   </span>
 </el-dialog>

在data中新增对话框类型和对话框提示信息

//对话框类型  add/edit
dialogType: "",
//话框提示信息
title: "",

对应方法中的赋值与submitData方法

//添加
append(data) {
   console.log("添加", data);
   //打开对话框
   this.dialogVisible = true;
   this.dialogType = "add";
   this.title = "添加分类";
   this.category.parentCid = data.catId;
   this.category.catLevel = data.catLevel * 1 + 1;
   this.category.catId = null;
   this.category.name = "";
   this.category.icon = "";
   this.category.productUnit = "";
   this.category.sort = 0;
   this.category.showStatus = 1;
 },
 
//修改
edit(data){
   //console.log("要修改的数据:",data);
   //打开对话框
   this.dialogVisible = true;
   this.dialogType = "edit";
   this.title = "修改分类";
   //发送请求获取当前节点最新的数据
   this.$http({
     url: this.$http.adornUrl(`/product/category/info/${data.catId}`),
     method: "get",
   }).then(({ data }) => {
     console.log("修改回显的数据", data);
     this.category.name = data.data.name;
     this.category.catId = data.data.catId;
     this.category.icon = data.data.icon;
     this.category.productUnit = data.data.productUnit;
     this.category.parentCid = data.data.parentCid;
     this.category.catLevel = data.data.catLevel;
     this.category.sort = data.data.sort;
     this.category.showStatus = data.data.showStatus;
     });
},

//根据对话框类型提交数据
submitData(){
  if (this.dialogType == "add") {
    this.addCategory();
  }
  if (this.dialogType == "edit") {
    this.editCategory();
  }
},

 //修改三级分类数据
editCategory() {

},

点击添加
在这里插入图片描述
点击修改
在这里插入图片描述

4.发送请求修改数据

 //修改三级分类数据
editCategory() {
  var { catId, name, icon, productUnit } = this.category;
  this.$http({
    url: this.$http.adornUrl("/product/category/update"),
    method: "post",
    data: this.$http.adornData({ catId, name, icon, productUnit }, false),
  }).then(({ data }) => {
    this.$message({
      message: `【${this.category.name}】菜单修改成功`,
      type: "success",
    });
    //关闭对话框
    this.dialogVisible = false;
    //刷新出新的菜单
    this.getMenus();
    //设置需要默认展开的菜单
    this.expandedKey = [this.category.parentCid];
  });
},

在这里插入图片描述
在这里插入图片描述
SQL语句

2021-11-12 10:26:51.102 DEBUG 4800 --- [io-10000-exec-6] c.a.g.p.dao.CategoryDao.updateById       : ==>  Preparing: UPDATE pms_category SET icon=?, name=?, product_unit=? WHERE cat_id=? AND show_status=1 
2021-11-12 10:26:51.113 DEBUG 4800 --- [io-10000-exec-6] c.a.g.p.dao.CategoryDao.updateById       : ==> Parameters: q(String), 苹果(String), 件(String), 1433(Long)
2021-11-12 10:26:51.115 DEBUG 4800 --- [io-10000-exec-6] c.a.g.p.dao.CategoryDao.updateById       : <==    Updates: 1

5.对话框优化

发现鼠标滑出对话框随便点击一下，对话框就关闭啦，此效果不太友好，将此功能关闭
在这里插入图片描述

<!-- 对话框 -->
<el-dialog :title="title" :visible.sync="dialogVisible" width="30%"  :close-on-click-modal="false">
  <el-form :model="category">
    <el-form-item label="分类名称" >
      <el-input v-model="category.name" autocomplete="off"></el-input>
    </el-form-item>
   <el-form-item label="图标">
      <el-input v-model="category.icon" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="计量单位">
      <el-input v-model="category.productUnit" autocomplete="off"></el-input>
    </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="submitData"
      >确 定</el-button
    >
  </span>
</el-dialog>

6.完整代码

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

    <!-- 对话框 -->
    <el-dialog :title="title" :visible.sync="dialogVisible" width="30%"  :close-on-click-modal="false">
      <el-form :model="category">
        <el-form-item label="分类名称" >
          <el-input v-model="category.name" autocomplete="off"></el-input>
        </el-form-item>
       <el-form-item label="图标">
          <el-input v-model="category.icon" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="计量单位">
          <el-input v-model="category.productUnit" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitData"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "",
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: {},
  data() {
    return {
      menus: [],
      //默认展开节点
      expandedKey: [],
      //对话框是否显示
      dialogVisible: false,
      //对话框类型  add/edit
      dialogType: "",
      //话框提示信息
      title: "",
      category: {
        name: "",
        parentCid: 0,
        catLevel: 0,
        showStatus: 1,
        sort: 0,
        productUnit: "",
        icon: "",
        catId: null
        },
      defaultProps: {
        children: "children",
        label: "name",
      },
    };
  },
  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("添加", data);
      //打开对话框
      this.dialogVisible = true;
      this.dialogType = "add";
      this.title = "添加分类";
      this.category.parentCid = data.catId;
      this.category.catLevel = data.catLevel * 1 + 1;
      //将修改的回显值还原为默认值
      this.category.catId = null;
      this.category.name = "";
      this.category.icon = "";
      this.category.productUnit = "";
      this.category.sort = 0;
      this.category.showStatus = 1;
    },

    //添加三级分类
    addCategory(){
      console.log("提交的三级分类数据", this.category);
      this.$http({
        url: this.$http.adornUrl("/product/category/save"),
        method: "post",
        data: this.$http.adornData(this.category, false)
      }).then(({ data }) => {
        this.$message({
          message: `【${this.category.name}】菜单保存成功 `,
          type: "success"
        });
        //关闭对话框
        this.dialogVisible = false;
        //刷新出新的菜单
        this.getMenus();
        //设置需要默认展开的菜单
        this.expandedKey = [this.category.parentCid];
      });
    },

    //删除
    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 }) => {
            //console.log("6666:"+node.data.name);
            this.$message({
              message: `【${node.data.name}】菜单删除成功`,
              type: "success",
            });
            //刷新出新的菜单
            this.getMenus();
            //设置需要默认展开的菜单(当前删除节点的父节点)
            this.expandedKey = [node.parent.data.catId];
          });
        })
        .catch(() => {});

      console.log("remove", node, data);
    },

    //修改
    edit(data){
     // console.log("要修改的数据:",data);
      //打开对话框
      this.dialogVisible = true;
      this.dialogType = "edit";
      this.title = "修改分类";
      //发送请求获取当前节点最新的数据
      this.$http({
        url: this.$http.adornUrl(`/product/category/info/${data.catId}`),
        method: "get",
      }).then(({ data }) => {
        console.log("修改回显的数据", data);
        this.category.name = data.data.name;
        this.category.catId = data.data.catId;
        this.category.icon = data.data.icon;
        this.category.productUnit = data.data.productUnit;
        this.category.parentCid = data.data.parentCid;
        this.category.catLevel = data.data.catLevel;
        this.category.sort = data.data.sort;
        this.category.showStatus = data.data.showStatus;
      });
    },

    //根据对话框类型提交数据
    submitData(){
      if (this.dialogType == "add") {
        this.addCategory();
      }
      if (this.dialogType == "edit") {
        this.editCategory();
      }
    },

     //修改三级分类数据
    editCategory() {
      var { catId, name, icon, productUnit } = this.category;
      this.$http({
        url: this.$http.adornUrl("/product/category/update"),
        method: "post",
        data: this.$http.adornData({ catId, name, icon, productUnit }, false),
      }).then(({ data }) => {
        this.$message({
          message: `【${this.category.name}】菜单修改成功`,
          type: "success",
        });
        //关闭对话框
        this.dialogVisible = false;
        //刷新出新的菜单
        this.getMenus();
        //设置需要默认展开的菜单
        this.expandedKey = [this.category.parentCid];
      });
    },

  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},

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

<style scoped>
</style>
Java小生不才
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用java怎么实现商品三级分类_如何实现列表三级分类---后端+前端
weixin_32159409的博客
02-26 5395
对于分类来说，一般包括一级分类，二级分类，三级分类， 大部分网站都是左边点击二级分类，右边显示相对应商品 下面就来为大家详细分析一下该如何实现吧。 如图: 分析图 1.1后端实现：JavaBean与数据库匹配字段用于封装，每一个分类，对应多个子分类 1.2后端实现：数据库中的数据必须交特殊的，先录入父分类，再录入子分类，为了保证所有的子分类，可以在遍历找到父分类，数据需要排序。步骤一： mappe...
java父子类三级查询_java关于三级分类功能实现
weixin_30359265的博客
02-13 1496
1、技术前提1.1、后端采用的技术是SpringBoot+MybatisPlus+人人代码生成器实现的1.2、前端采用的技术是VUE +ElementUI+人人开源实现的2、后端实现2.1、pom依赖org.springframework.bootspring-boot-starter-parent2.1.8.RELEASEcom.baomidoumybatis-plus-boot-starter...
Vue中el-dialog的用法
人生的尽头是孤独
04-07 3005
1、写入页面 <el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button> <el-dialog title="收货地址" :visible.sync="dialogFormVisible" @closed="handleClose"> <el-form :model="form" :rules="rules" ref="ruleForm"&gt
Vue组件解析：自定义弹窗组件ByDialog详解
最新发布
weixin_48723799的博客
06-28 3979
在Vue.js前端开发中，弹窗组件是常见的交互元素之一。为了提高开发效率并保持代码的可维护性，我们可以创建自定义弹窗组件。本文将详细解析Vue.js结合ElementUi自定义弹窗组件ByDialog的实现原理和使用示例，并提供相关代码和注释。
数据三级分类（树形结构、递归）
weixin_43119266的博客
12-02 824
【代码】数据三级分类（树形结构、递归）
JS插件 ---- pc端三级联动的demo
06-16
在网页开发中，"三级联动"是一种常见的交互设计，尤其在构建导航菜单、地区选择、商品分类等场景中广泛使用。这种设计涉及到JavaScript（JS）技术，通过JS插件实现，使得用户在选择某一选项时，其他关联的下拉菜单会...
jQuery四级联动商品分类菜单.zip
05-27
4. 用户选择第二级分类，重复步骤2，但这次获取的是第三级分类数据。 5. 依此类推，直至第四级分类。 总结来说，"jQuery四级联动商品分类菜单"是前端开发中一个实用的例子，它展示了如何结合HTML、CSS和JavaScript...
行业分类-设备装置-移动终端配置器及移动终端内部程序改写系统.zip
09-05
开发者可能需要深入到设备的底层系统，对原生操作系统进行修改或添加新功能，这就需要一个能够读取、编辑和重新编译系统级代码的工具。这种系统改写可能涵盖各种操作，如替换系统库、修改权限设置、创建自定义启动器...
add.zip vue 三级联动
01-23
Vue 三级联动是指在Vue项目中实现三个层级的数据交互和视图更新，常见于导航菜单、地区选择、商品分类等场景。这个“add.zip”文件可能是包含了一个Vue CLI 3项目，用于演示或实现这种三级联动功能。 Vue CLI 3是...
手机三级联动选择js代码.zip
07-04
总的来说，手机三级联动选择的实现涉及到JavaScript基础、DOM操作、事件处理、触屏适配以及CSS样式等多个方面，对于提升移动端应用的交互体验具有重要意义。通过研究这个示例，开发者可以深入理解这些技术，并将其...
三级联动java源码
07-27
省、市、镇三级联动java完整源码（可以直接运行项目），有mysql生成语句。
java实现多级分类
森森正能量男神
02-08 1116
其中 id 代表当前学科，sub_parent_id 代表当前学科的父类学科，当值为 0 时表示当前是一级学科，即没有父类学科，至于 sub_class 和 sub_number 分别表示学科等级和代码，这两个可有可无，至于定义什么样的属性取决于如何更好的进行前后端交互。使用场景，不管是在前后端分离或者是不分离的项目中，我们通常会遇到这种多级分类的情况，比如前端需要选择 省——市——县 或者 计算机类——后端——Java工程师，这样的三级分类，也可能是二级分类或者更高级的分类。
list高级用法
Mr_TIANT的博客
11-24 458
List高级用法stream().mapforEach stream().map records.stream().map(e -> { e.set("name","小明"); if (pojo != null) { e.set("age", 18)); e.set("sex", "男"); } return e; }).collect(Collectors.toList()); forEach
递归获取三级分类菜单【java实现】
wy
10-16 969
递归获取三级分类菜单
Java代码查询商品三级分类菜单，以树形结构展示(摘自尚硅谷)
weixin_42355715的博客
02-15 1218
@Override public List<CategoryEntity> listWithTree() { List<CategoryEntity> categoryList = baseMapper.selectList(null); categoryList.stream().filter((CategoryEntity) -> { return CategoryEntity.getParentCid() =
三级分类的数据表设计和构造API数据
weixin_62421895的博客
08-02 1272
诸如下图这种：一级菜单下有二级菜单和三级菜单。与此类似的应用场景还有很多很多，如省市县的三级联动、后台管理菜单、部门展示等等。先看看表结构吧具体的 sql 文件，在贴的源码仓库中有。其中最重要的就是理清父子层级的关系就好了，知道是个什么样子设计的，如何去管理他们，那这些就都不是事啦。二级评论的表的设计方法其实也大致如此。数据表中对应的数据关系大致如下：技术就是常用的 SpringBoot、Mybatis-Plus另外还用了下Mybatis-Plus逆向生成器，还有Java的函数式编程完整依赖如下： 关于
53、商品服务-API-三级分类-修改-基本修改效果完成
pyd1040201698的博客
08-11 244
页面菜单就可以修改了
谷粒商城三级分类删除添加更改操作
weixin_49260963的博客
06-11 632
谷粒商城三级分类删除域添加操作
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值