谷粒商城-商品服务的开发(修改)

1.先添加一个修改按钮：

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

2.写一个修改按钮的点击方法：

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

3.在data数据中添加category的菜单id:(默认值为null):

 category: {name:"",parentCid:0,catLevel:0,showStatus:1,sort:0,catId:null},

4.因为我们复用了新增数据的对话框，所以现在要判断是修改还是新增：

（1）在data数据中加一个判断值：

 dialogType: "",//edit,add

（2）当点击的是添加按钮时，在添加按钮的方法中给dialogType赋值：

  this.dialogType = "add";

（3）当点击的是修改按钮时，在修改按钮的方法中给dialogType赋值：

this.dialogType = "edit";

（4）重新给dialog确定按钮定义一个方法：@click="submitData"

<el-button type="primary" @click="submitData">确 定</el-button>

（5）在submitData方法中判断是执行添加方法还是修改方法：

submitData(){
        if (this.dialogType == 'add'){
          this.addCategory();
        }
        if(this.dialogType == 'edit'){
          this.editCategory();
        }
      },

（6）在dialog对话框绑定一个名字：

v-bind:title="title"

在data中：

  title: "",

在edit方法中：

this.title = "修改分类";

在append方法中：

this.title = "添加分类";

5.完善dialog对话框：新增图标和计量单位表单：

 <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>

在data的category对象中增加相关参数：

category: {name:"",parentCid:0,catLevel:0,showStatus:1,sort:0,catId:null,icon: "",productUnit: ""},

6.修改数据前需要在对话框中回显数据：这里会存在一个问题，假设现在有好几个工作人员都在修改菜单的名字，而我又不知道，所以回显的可能是旧数据，所以回显之前需要发送请求，获取当前节点最新的数据：

（1）后端代码已经生成

  @RequestMapping("/info/{catId}")
    public R info(@PathVariable("catId") Long catId){
		CategoryEntity category = categoryService.getById(catId);

        return R.ok().put("data", category);
    }

（2）前端代码：（回显之前发送请求）

 //打开对话框
      edit(data){
        this.title = "修改分类";
        this.dialogType = "edit";
        console.log("要修改的数据为",data);
        this.dialogVisible = true;
        //回显之前发送请求获取当前节点的最新数据
        this.$http({
          url: this.$http.adornUrl(`/product/category//info/${data.catId}`),
          method: 'get',
        }).then(({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;

        });
      },

7.修改好数据后发送请求保存数据：

由于我们只回显并修改了部分数据，ajax的参数不能是整个category对象，否则一些没有修改的数据会被数据库默认赋值，改变它原来的值。

这里可以使用解构表达式将需要提交的数据从category中解构出来：

var {catId, name, icon, productUnit} = this.category;
var data = {catId: catId, name: name, icon: icon, productUnit: productUnit};

由于key和vlalue名字相同时可以省略key，所以可以简化：

var {catId, name, icon, productUnit} = this.category;
var data = {catId, name, icon, productUnit};

正式发送求情：

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

      },

由于在添加或修改时，鼠标点击了对话框以外的部分，对话框就会默认关闭，这样很不友好，所以我们来给对话框设置一个属性：

:close-on-click-modal="false"

8.修改和添加公用一个dialog这里会发生一个小bug:

点击修改按钮后会回显内容，然后点击添加按钮也会回显相关内容：所以在点击添加的append方法中需要清空他们的值：

this.category.name = "";
this.category.catId = null;
this.category.icon = "";
this.category.productUnit = "";
this.category.sort = 0;
this.category.showStatus = 1;

谷粒商城-商品服务的开发(修改)

猜你喜欢