谷粒商城day39 -商品服务-API-三级分类-新增-新增效果完成

总结：总得来说修改跟新增差不多，后端代码生成好了，前端修改的时候

(1)  点击修改时实时获取当前菜单的信息，需要先做一个查询，将当前model置为数据库内最新

(2)  打开新增的弹框，标题改为修改菜单

(3)  修改成功后记得新增时把model内的相关属性初始化，不然显示的是修改时的值

 

1.添加修改按钮

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

2.data内添加相关属性，分别为 弹框类型与弹框标题

3.弹框内添加两个额外表单项

<el-form-item label="单位">
          <el-input v-model="category.productUnit" autocomplete="off"></el-input>
        </el-form-item>
         <el-form-item label="图标">
          <el-input v-model="category.icon" autocomplete="off"></el-input>
        </el-form-item>

4.确定按钮点击事件方法改为submit，适用于新增与修改

<el-button type="primary" @click="submit()">确 定</el-button>

5.添加与改动相关方法

    append(node, data) {
      this.dialogVisible = true;
      this.dialogType = "add";
      this.dialogTitle = "新增菜单";
      this.category.parentCid = data.catId;
      this.category.catLevel = data.catLevel + 1;
      this.category.name = "";
      this.category.icon = "";
      this.category.productUnit = "";
    },
    submit() {
      if (this.dialogType === "add") {
        this.saveCategory();
      } else {
        this.editCategory();
      }
    },
    edit(node, data) {
      console.log("data:++",data);
      this.getCategoryById(data);
      this.dialogVisible = true;
      this.dialogType = "edit";
      this.dialogTitle = "修改菜单";
      this.category.catLevel = data.catLevel + 1;
    },
    saveCategory() {
      this.$http({
        url: this.$http.adornUrl("/product/category/save"),
        method: "post",
        data: this.$http.adornData(this.category, false),
      }).then(({ data }) => {
        this.$message({
          type: "success",
          message: "新增成功!",
        });
        this.getDataList();
        this.expandedkeys = [this.category.parentCid];
        this.dialogVisible = false;
      });
    },
    getCategoryById(data) {
      this.$http({
        url: this.$http.adornUrl(
          `/product/category/info/${data.catId}`
        ),
        method: "get",
        params: this.$http.adornParams({}),
      }).then(({ data }) => {
        console.log("data:++",data);
        this.category.catId = data.category.catId;
        this.category.name = data.category.name;
        this.category.productUnit = data.category.productUnit;
        this.category.icon = data.category.icon;
        this.category.parentCid = data.category.parentCid;
      });
    },
    editCategory() {
      var {catId,name,productUnit,icon} = this.category
      this.$http({
        url: this.$http.adornUrl(
          "/product/category/update"
        ),
        method: "post",
        data: this.$http.adornData({catId,name,productUnit,icon}, false),
      }).then(({ data }) => {
        this.$message({
          type: "success",
          message: "修改成功!",
        });
        this.getDataList();
        this.expandedkeys = [this.category.parentCid];
        this.dialogVisible = false;
      });
    },
  },