谷粒商城实战笔记-52~53-商品服务-API-三级分类-新增-修改

一，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中定义变量dialogFormVisible
• Append按钮点击事件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-treenode-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-buttonv-if="node.level <= 2"size="mini"@click="() => append(data)">Append</el-button><el-buttonv-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.categoryconsole.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-treenode-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-buttonv-if="node.level <= 2"size="mini"@click="() => append(data)">Append</el-button><el-buttonsize="mini"@click="() => edit(data)">Edit</el-button><el-buttonv-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表示editdialogFormVisible: 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.categoryconsole.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>