后台管理项目12

完善SkuForm

添加sku保存与取消的操作

保存的操作

当用户点击保存的时候，应该将之前收集的数据进行整理，把spuInfo的信息整理好，然后书写接口，将整理好的数据发送给服务器进行存储。
首先先书写存储的接口。

接下来给保存按钮绑定点击事件，当用户点击的时候，将数据整理到spuInfo中，并且发请求。发完请求存储完成之后，需要将页面跳转到第一页。因此需要发请求完成之后再次调用一下自定义事件，把页面转换的数据传递给spu组件。


需要注意的是，reduce与map。reduce的使用是遍历item，将符合的结果传给prev所定义的结构，可以通过以下两个例子理解。需要注意的是使用prev最后return的结果是最终结果。如果还是不太明白可以阅读以下文章arr.reduce的使用

//第一个例子通过遍历arr数组，将符合回调函数的结果重新添加到所定义的{}中。
// 普通数组统计
let arr = ['李明', '韩梅梅', '张三', '李明', '李明', '张三', '韩梅梅', '李明', 'Jack', '韩梅梅']
const sum = arr.reduce((acc, cur) => {
  if (!acc[cur]) {
    acc[cur] = 0
  }
  acc[cur]++
  return acc
}, {})
console.log(sum) // {李明: 4, 韩梅梅: 3, 张三: 2, Jack: 1}
//第二个例子类似，但是原数组复杂一些
// 对象数组统计
let arr1 = [{
  hobby: 'basketball'
}, {
  hobby: 'badminton'
}, {
  hobby: 'basketball'
}, {
  hobby: 'swim'
}, {
  hobby: 'basketball'
}, {
  hobby: 'swim'
}, {
  hobby: 'pingpong'
}]
const sum2 = arr1.reduce((acc, cur) => {
  if (!acc[cur.hobby]) {
    acc[cur.hobby] = 0
  }
  acc[cur.hobby]++
  return acc
}, {})
console.log(sum2) // {basketball: 3, badminton: 1, swim: 2, pingpong: 1}

关于map的使用。可以阅读以下文章。arr.map的使用

取消的操作

当用户点击取消，应该将页面从skuForm转换为第一个界面，并清空数据。
首先给取消按钮绑定点击事件，接下来书写逻辑，具体代码如下所示。

sku列表的展示

接下来处理列表展示的内容，当用户点击如下按钮时，应该将添加好的以及之前的sku展示出来。

为了展示数据，首先需要书写获取列表的接口

接口书写完成后，考虑如何展示列表，在这里使用elementUI中的Dialog对话框来展示sku列表。将Dialog对话框引入到项目中进行修改，修改完成之后需要利用按钮控制Dialog对话框的出现，因此给展示sku列表的按钮绑定一个点击事件。当点击的时候，展示对话框，并且发送请求，为了展示列表，需要将请求返回的数据进行存储，最后动态渲染到页面上。具体代码如下所示。需要注意的是，在table里还用到了loading效果。当loading 为true的时候，就是给表格加了loading的效果，当请求到数据之后，将loading置为false，取消loading效果。然后当对话框关闭的时候，将loading再次置为true。

sku模块的展示

接下来搭建sku模块

静态页面

静态界面代码如下所示

页面效果如下所示

展示数据

首先书写接口

书写完成之后当sku组件挂载完成，发起一次请求，并存储数据

接下来动态渲染页面。

接下来分页器，当点击分页器重新发请求，加载不同数据。

上架与下架操作

处理表格中的按钮，在sku模块中一共有五个按钮，但只展示四个按钮，上架与下架按钮通过v-if进行切换。上架与下架通过isSale属性来决定展示哪个按钮，当点击上架，需要发请求然后弹提示，当点击下架同样发请求弹提示，因此再给这两个按钮绑定点击事件。书写这两个按钮需要调用的接口

SKU详情查看

接下来书写详情查看的功能，当用户点击如下按钮时。

应该将SKU的详情进行展示。为了获取到详情，应该先调用接口拿到详情数据，随后在页面进行展示。
具体步骤如下所示，首先书写接口

接下来绑定点击事件请求数据并储存。

此时已经成功获取数据，接下来考虑展示的问题，为了让页面更美观，在展示的时候采用elementUI的抽屉效果（从右往左）。注意:span 24代表一行

接下来完善当点击的时候展示抽屉。

此时页面效果如下所示