谷粒商城实战笔记-52~53-商品服务-API-三级分类-新增-修改

Java追光着2024-07-23 16:44

文章目录

一，52-商品服务-API-三级分类-新增-新增效果完成

这一节实现点击Append按钮，打开弹窗填写内容，点击确定，调用后台接口保存分类信息。

1，点击Append按钮，显示弹窗

弹窗使用el-dialog组件，基于参考文档copy代码。

clike 复制代码 
<el-dialog title="提示" :visible.sync="dialogFormVisible">
  <el-form :model="category">
    <el-form-item label="分类名称">
      <el-input v-model="category.name" autocomplete="off"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
  </div>
</el-dialog>

① 点击Append按钮打开弹窗

使用dialogFormVisible变量控制弹窗的显示，在Append按钮的点击事件中讲这个变量的值置为true。

代码中两处改动：

  • data中定义变量dialogFormVisible
  • Append按钮点击事件append函数中设置dialogFormVisible为true

②弹窗中的表单数据绑定

要把弹窗中表单与模型中的数据进行绑定：

  • 首先，在data中定义一个category对象，初始化为空对象
  • 然后，将这个对象与dialog对话框中的form表单进行绑定。结合后台数据库表结构，这个对象必须有如下几个字段。 name: 分类名称

    parentCid：父分类Id

    catLevel：分类级别，等于父分类级别加1

    sort：默认为0

    showStatus：默认为1，表示未被逻辑删除

  • 第三，新增一个分类，必须要知道其父分类的catId，所以要在append函数中获取父分类的catId和catLevel，存储在category对象中。

③点击确定按钮，提交表单数据到后端接口，后端保存到数据库

确定按钮绑定click事件函数addCategory，代码如下。

clike 复制代码 
addcategory() {
      this.$http({
        url: this.$http.adornUrl("/product/category/add"),
        method: "post",
        data: this.$http.adornData(this.category, false),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.$message({
            message: "添加成功",
            type: "success",
            duration: 1500,
            onClose: () => {
              console.log("添加成功，关闭消息提示");
              this.dialogFormVisible = false;
              this.getMenus(); // 重新获取数据
            },
          });
        } else {
          this.$message.error(data.msg);
        }
      });

2，测试

点击Append，输入一个名为电子书222的分类，点击确定保存，保存成功后，界面刷新如下，说明前端操作成功。

查询后台数据库，有如下数据，说明后台保存成功。

完整代码

clike 复制代码 
<template>
  <div>
    <el-tree
      node-key="catId"
      :data="menus"
      :props="defaultProps"
      :expand-on-click-node="false"
      show-checkbox
      :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"
            size="mini"
            @click="() => append(data)"
          >
            Append
          </el-button>
          <el-button
            v-if="node.childNodes.length == 0"
            type="text"
            size="mini"
            @click="() => remove(node, data)"
          >
            Delete
          </el-button>
        </span>
      </span>
    </el-tree>

    <el-dialog title="提示" :visible.sync="dialogFormVisible">
      <el-form :model="category">
        <el-form-item label="分类名称">
          <el-input v-model="category.name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCategory">确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      dialogFormVisible: false,
      menus: [],
      category: {name: "", parentCid: 0, catLevel: 0, sort: 0, showStatus: 1},
      expandedKeys: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
    };
  },
  methods: {
    append(data) {
      console.log(data);
      this.dialogFormVisible = true;
      this.category = {
        name: "",
        parentCid: data.catId,
        catLevel: data.level + 1,
        sort: 0,
        showStatus: 1
      };
    },
    addCategory() {
      this.$http({
        url: this.$http.adornUrl("/product/category/save"),
        method: "post",
        data: this.$http.adornData(this.category, false),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.$message({
            message: "添加成功",
            type: "success",
            duration: 1500,
            onClose: () => {
              console.log("添加成功，关闭消息提示");
              this.dialogFormVisible = false;
              this.getMenus(); // 重新获取数据
              this.expandedKeys =[ this.category.parentCid ]; // 重置展开节点
            },
          });
        } else {
          this.$message.error(data.msg);
        }
      });
    },
    remove(node, data) {
      console.log(node, data);
      var ids = [node.data.catId];

      this.$confirm(
        `确定对[id=${ids.join(",")}]进行[${
          ids.length == 1 ? "删除" : "批量删除"
        }]操作?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          this.$http({
            url: this.$http.adornUrl("/product/category/delete"),
            method: "post",
            data: this.$http.adornData(ids, false),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  console.log("删除成功，关闭消息提示");
                  this.getMenus(); // 重新获取数据
                  this.expandedKeys = [ node.parent.data.catId ]; // 重置展开节点
                },
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        })
        .catch(() => {});
    },
    // 获取分类数据
    getMenus() {
      this.dataListLoading = true;
      this.$http({
        url: this.$http.adornUrl("/product/category/list/tree"),
        method: "get",
      }).then(({ data }) => {
        console.log(data);
        this.dataListLoading = false;
        this.menus = data.data;
      });
    },
  },
  created() {
    this.getMenus(); // 获取分类数据
  },
};
</script>
<style scoped>
</style>

二，53-商品服务-API-三级分类-修改-修改效果完成

本节在前一节的基础上完成分类修改的功能。

1，添加Edit按钮并绑定事件

新增Edit按钮。

clike 复制代码 
<el-button size="mini" @click="() => edit(data)">
    Edit
</el-button>

绑定按钮事件。

clike 复制代码 
edit(data) {
      console.log(data);
      this.dialogType = "edit";
      this.dialogFormVisible = true;
      this.category = {...data };
},

2，修改弹窗确定按钮事件逻辑

因为Append和Edit共用一个弹窗，但二者的逻辑有显著不同，一个会调用save接口，一个调用update接口，所以在model中新增一个变量dialogType来标识Dialog是哪个按钮触发的。

在两个按钮的响应事件中对该变量进行更新。

  • create表示append
  • edit表示edit

与此同时，定义一个变量dialogTitle动态绑定Dialog的提示信息。

将dialog的确定按钮的click事件修改为方法submitCategory，该方法根据dialogType确定是更新还是Append。

3，回显分类和计量单位

相对于下一节的内容，表单增加了分类和计量单位。

对应的模型为：

效果如下图。

4，查询最新分类信息

编辑分类信息的时候，为了防止数据过期，最佳方案是根据catId查询并回显最新数据的信息。

clike 复制代码 
	  // 根据catId查询最新数据
      this.$http({
        url: this.$http.adornUrl(`/product/category/info/${data.catId}`),
        method: "get",
        data: this.$http.adornData({ catId: data.catId }, false),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.category = {...data.data };
        } else {
          this.$message.error(data.msg);
        }
      });

5，点击确定发出请求

点击确定按钮，就会向后台发出请求。

clike 复制代码 
 updateCategory() {
      var {catId, name, icon, productUnit } = this.category
      console.log( this.category);
      this.$http({
        url: this.$http.adornUrl("/product/category/update"),
        method: "post",
        data: this.$http.adornData({catId, name, icon, productUnit }, false),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.$message({
            message: "修改成功",
            type: "success",
            duration: 1500,
            onClose: () => {
              console.log("修改成功，关闭消息提示");
              this.dialogFormVisible = false;
              this.getMenus(); // 重新获取数据
              this.expandedKeys =[ this.category.parentCid == 0 ? this.category.catId : this.category.parentCid ]; // 重置展开节点
              console.log(this.expandedKeys);
            },
          });
        } else {
          this.$message.error(data.msg);
        }
      });
    },

注意，请求成功后要重新请求页面数据，刷新页面，展开指定分类。

此外，因为是部分更新，所以不能不需要的字段也更新了，仅仅更新必要的四个字段。

6，禁止弹窗自动消失

点击弹窗之外，弹窗会自动隐藏，要取消这个行为，可以给Dialog加上一个属性，并设置为false。

完整代码

clike 复制代码 
<template>
  <div>
    <el-tree
      node-key="catId"
      :data="menus"
      :props="defaultProps"
      :expand-on-click-node="false"
      show-checkbox
      :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"
            size="mini"
            @click="() => append(data)"
          >
            Append
          </el-button>
          <el-button
            size="mini"
            @click="() => edit(data)"
          >
            Edit
          </el-button>
          <el-button
            v-if="node.childNodes.length == 0"
            type="text"
            size="mini"
            @click="() => remove(node, data)"
          >
            Delete
          </el-button>
        </span>
      </span>
    </el-tree>

    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" :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>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitCategory">确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      dialogTitle: "", // 编辑窗口标题，新增分类，修改分类
      dialogType: "", // 编辑窗口类型，create表示append，edit表示edit
      dialogFormVisible: false,
      menus: [],
      category: {name: "", parentCid: 0, catLevel: 0, sort: 0, showStatus: 1, icon: "", productUnit: "", catId: null},
      expandedKeys: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
    };
  },
  methods: {
    append(data) {
      console.log(data);
      this.dialogType = "create";
      this.dialogTitle = "新增分类";
      this.dialogFormVisible = true;
      this.category = {
        name: "",
        parentCid: data.catId,
        catLevel: data.level + 1,
        sort: 0,
        showStatus: 1
      };
    },
    edit(data) {
      console.log(data);
      this.dialogType = "edit";
      this.dialogTitle = "修改分类";
      this.dialogFormVisible = true;
      
      // 根据catId查询最新数据
      this.$http({
        url: this.$http.adornUrl(`/product/category/info/${data.catId}`),
        method: "get",
        data: this.$http.adornData({ catId: data.catId }, false),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.category = {...data.data };
        } else {
          this.$message.error(data.msg);
        }
      });
    },
    submitCategory() {
      if (this.dialogType === "create") {
        this.addCategory();
      } else if (this.dialogType === "edit") {
        this.updateCategory();
      }
    },
    updateCategory() {
      var {catId, name, icon, productUnit } = this.category
      console.log( this.category);
      this.$http({
        url: this.$http.adornUrl("/product/category/update"),
        method: "post",
        data: this.$http.adornData({catId, name, icon, productUnit }, false),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.$message({
            message: "修改成功",
            type: "success",
            duration: 1500,
            onClose: () => {
              console.log("修改成功，关闭消息提示");
              this.dialogFormVisible = false;
              this.getMenus(); // 重新获取数据
              this.expandedKeys =[ this.category.parentCid == 0 ? this.category.catId : this.category.parentCid ]; // 重置展开节点
              console.log(this.expandedKeys);
            },
          });
        } else {
          this.$message.error(data.msg);
        }
      });
    },
    addCategory() {
      this.$http({
        url: this.$http.adornUrl("/product/category/save"),
        method: "post",
        data: this.$http.adornData(this.category, false),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.$message({
            message: "添加成功",
            type: "success",
            duration: 1500,
            onClose: () => {
              console.log("添加成功，关闭消息提示");
              this.dialogFormVisible = false;
              this.getMenus(); // 重新获取数据
              this.expandedKeys =[ this.category.parentCid ]; // 重置展开节点
            },
          });
        } else {
          this.$message.error(data.msg);
        }
      });
    },
    remove(node, data) {
      console.log(node, data);
      var ids = [node.data.catId];

      this.$confirm(
        `确定对[id=${ids.join(",")}]进行[${
          ids.length == 1 ? "删除" : "批量删除"
        }]操作?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          this.$http({
            url: this.$http.adornUrl("/product/category/delete"),
            method: "post",
            data: this.$http.adornData(ids, false),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  console.log("删除成功，关闭消息提示");
                  this.getMenus(); // 重新获取数据
                  this.expandedKeys = [ node.parent.data.catId ]; // 重置展开节点
                },
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        })
        .catch(() => {});
    },
    // 获取分类数据
    getMenus() {
      this.dataListLoading = true;
      this.$http({
        url: this.$http.adornUrl("/product/category/list/tree"),
        method: "get",
      }).then(({ data }) => {
        console.log(data);
        this.dataListLoading = false;
        this.menus = data.data;
      });
    },
  },
  created() {
    this.getMenus(); // 获取分类数据
  },
};
</script>
<style scoped>
</style>
相关推荐
Bullet34341 分钟前
IDEA运行Tomcat出现乱码问题解决汇总
java·经验分享·笔记·tomcat·intellij-idea
东京老树根42 分钟前
SAP学习笔记 - 开发29 - 前端Fiori开发 Custom Controls（自定义控件）
笔记·学习
致***锌2 小时前
期权怎么判断是不是主力合约？
笔记
Moonnnn.6 小时前
【单片机期末】单片机系统设计
笔记·单片机·嵌入式硬件·学习
小前端大牛马11 小时前
java教程笔记（十一）-泛型
java·笔记·python
sjtu_cjs11 小时前
Tensorrt python api 10.11.0笔记
开发语言·笔记·python
Clair-Sean14 小时前
【JavaSE】多线程基础学习笔记
笔记·python·学习
moxiaoran575314 小时前
uni-app学习笔记三十四--刷新和回到顶部的实现
笔记·学习·uni-app
致***锌18 小时前
期货与期权市场基本原理是什么？
笔记
幻奏岚音20 小时前
统计学（第8版）——假设检验学习笔记（考试用）
笔记·学习·算法
热门推荐
01Coze扣子平台完整体验和实践（附国内和国际版对比）02【图像处理与机器视觉】XJTU期末考点03KGG转MP3工具|非KGM文件|解密音频04零代码入门 | Coze——让大模型接入自己的数据库05从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑06YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】07DeepSeek各版本说明与优缺点分析08海康Visionmaster-常见问题排查方法-启动阶段09【SpeedAI科研小助手】2分钟极速解决知网维普重复率、AIGC率过高，一键全文降！文件格式不变，公式都保留的！10R-tree详解