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;