文章目录
- 一，52-商品服务-API-三级分类-新增-新增效果完成
- 1，点击Append按钮，显示弹窗
- 2，测试
- 完整代码
- 二，53-商品服务-API-三级分类-修改-修改效果完成
- 1，添加Edit按钮并绑定事件
- 2，修改弹窗确定按钮事件逻辑
- 3，回显分类和计量单位
- 4，查询最新分类信息
- 5，点击确定发出请求
- 6，禁止弹窗自动消失
- 完整代码
一，52-商品服务-API-三级分类-新增-新增效果完成
这一节实现点击Append按钮，打开弹窗填写内容，点击确定，调用后台接口保存分类信息。
1，点击Append按钮，显示弹窗
弹窗使用el-dialog组件，基于参考文档copy代码。
<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中定义变量dialogFormVisibleAppend按钮点击事件append函数中设置dialogFormVisible为true
②弹窗中的表单数据绑定
要把弹窗中表单与模型中的数据进行绑定：
- 首先，在data中定义一个
category对象，初始化为空对象 - 然后，将这个对象与dialog对话框中的form表单进行绑定。结合后台数据库表结构，这个对象必须有如下几个字段。
name: 分类名称
parentCid：父分类Id
catLevel：分类级别，等于父分类级别加1
sort：默认为0
showStatus：默认为1，表示未被逻辑删除
- 第三，新增一个分类，必须要知道其父分类的
catId，所以要在append函数中获取父分类的catId和catLevel，存储在category对象中。
③点击确定按钮，提交表单数据到后端接口，后端保存到数据库
确定按钮绑定click事件函数addCategory，代码如下。
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的分类，点击确定保存，保存成功后，界面刷新如下，说明前端操作成功。
查询后台数据库，有如下数据，说明后台保存成功。
完整代码
<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按钮。
<el-button size="mini" @click="() => edit(data)">
Edit
</el-button>
绑定按钮事件。
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查询并回显最新数据的信息。
// 根据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，点击确定发出请求
点击确定按钮，就会向后台发出请求。
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。
完整代码
<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>
