后台管理系统10

SPU模块（四）

SpuForm组件保存的操作

首先书写修改或者添加SPU的接口

接下来给保存按钮绑定点击事件，当点击保存按钮时，应发送请求添加或者修改SPU并且页面跳转为初始页面。

添加SPU的操作

当用户选择添加SPU的时候，需要发起两次请求，一次请求品牌数据，一次请求全部的销售属性。所以需要完善添加SPU按钮的回调函数。

由于保存之前写好了，此时添加的内容书写完成后，即可直接保存。

数据回显问题

此时存在一个小问题，就是当用户点击添加SPU时，输入数据后。点击取消，再点击添加SPU时之前书写的数据还在。这是由于没有对数据进行清除。效果如下所示

解决方法如下，给取消按钮绑定点击事件，当点击取消时，进行页面跳转并且清空数据。


其中Object.assign是es6新增的方法，可以合并对象。其中this._data可以操作data中的响应式数据。而this.$options可以获取配置对象，配置对象的data函数执行，返回的响应式数据为空。将空与响应式数据合并，就等同于清空数据。
同理当点击保存按钮的时候，同样需要清空数据。

删除SPU的操作

接下来设置删除spu的操作

首先书写接口

接下来给删除按钮多加一个pop弹出框，让界面更美观。此时当用户点击pop弹出框的确定时，设定回调函数。


此时效果如下所示