总结:总得来说修改跟新增差不多,后端代码生成好了,前端修改的时候
(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;
});
},
},