88建网站,sem代运营推广公司,wordpress源码 优惠券,千库网网页版登录官网文章目录 一#xff0c;52-商品服务-API-三级分类-新增-新增效果完成1#xff0c;点击Append按钮#xff0c;显示弹窗2#xff0c;测试完整代码 二#xff0c;53-商品服务-API-三级分类-修改-修改效果完成1#xff0c;添加Edit按钮并绑定事件2#xff0c;修改弹窗确定按… 文章目录 一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.syncdialogFormVisibleel-form :modelcategoryel-form-item label分类名称el-input v-modelcategory.name autocompleteoff/el-input/el-form-item/el-formdiv slotfooter classdialog-footerel-button clickdialogFormVisible false取 消/el-buttonel-button typeprimary clickdialogFormVisible 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的分类点击确定保存保存成功后界面刷新如下说明前端操作成功。 查询后台数据库有如下数据说明后台保存成功。 完整代码
templatedivel-treenode-keycatId:datamenus:propsdefaultProps:expand-on-click-nodefalseshow-checkbox:default-expanded-keysexpandedKeysspan classcustom-tree-node slot-scope{ node, data }span{{ node.label }}/spanspanel-buttonv-ifnode.level 2sizeminiclick() append(data)Append/el-buttonel-buttonv-ifnode.childNodes.length 0typetextsizeminiclick() remove(node, data)Delete/el-button/span/span/el-treeel-dialog title提示 :visible.syncdialogFormVisibleel-form :modelcategoryel-form-item label分类名称el-input v-modelcategory.name autocompleteoff/el-input/el-form-item/el-formdiv slotfooter classdialog-footerel-button clickdialogFormVisible false取 消/el-buttonel-button typeprimary clickaddCategory确 定/el-button/div/el-dialog/div
/templatescript
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 sizemini 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表示appendedit表示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。 完整代码
templatedivel-treenode-keycatId:datamenus:propsdefaultProps:expand-on-click-nodefalseshow-checkbox:default-expanded-keysexpandedKeysspan classcustom-tree-node slot-scope{ node, data }span{{ node.label }}/spanspanel-buttonv-ifnode.level 2sizeminiclick() append(data)Append/el-buttonel-buttonsizeminiclick() edit(data)Edit/el-buttonel-buttonv-ifnode.childNodes.length 0typetextsizeminiclick() remove(node, data)Delete/el-button/span/span/el-treeel-dialog :titledialogTitle :visible.syncdialogFormVisible :close-on-click-modalfalseel-form :modelcategoryel-form-item label分类名称el-input v-modelcategory.name autocompleteoff/el-input/el-form-itemel-form-item label图标el-input v-modelcategory.icon autocompleteoff/el-input/el-form-itemel-form-item label计量单位el-input v-modelcategory.productUnit autocompleteoff/el-input/el-form-item/el-formdiv slotfooter classdialog-footerel-button clickdialogFormVisible false取 消/el-buttonel-button typeprimary clicksubmitCategory确 定/el-button/div/el-dialog/div
/templatescript
export default {components: {},props: {},data() {return {dialogTitle: , // 编辑窗口标题新增分类修改分类dialogType: , // 编辑窗口类型create表示appendedit表示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
