管理后台项目-04-SPU列表-增删改SPU-获取SKU【续】

最新推荐文章于 2024-06-02 21:27:33 发布

ycmy2017

最新推荐文章于 2024-06-02 21:27:33 发布

阅读量729

点赞数

分类专栏： # 项目实战-前端-管理后台文章标签： vue 前端 javascript

本文链接：https://blog.csdn.net/ycmy2017/article/details/130287616

版权

项目实战-前端-管理后台专栏收录该内容

8 篇文章 4 订阅

订阅专栏

上一篇文章管理后台项目-03-SPU列表-增删改SPU-获取SKU_ycmy2017的博客-CSDN博客内容较多，交互逻辑有点复杂，所以分两篇文章编写，这篇文章继续编写spu模块没有开发完成的功能。

1-删除spu

先做spu列表页面的删除spu功能，当用户点击列表页面的删除按钮时，我们需要提示用户，并且想服务器发送请求，删除对应的spu记录。删除记录后，需要重新获取数据；但是如果是

2-添加sku

需求：当用户点击列表上面的添加sku按钮后，我们需要展示添加sku的form表单；需要收集和填写相关信息，当用户点击保存按钮后，我们需要向服务器发送请求，添加sku信息。

2.1-获取skuForm页面组件的数据

首先，用户点击添加sku按钮，我们需要切换场景（从列表页面到添加sku页面），进入到sku页面，我们首先要获取平台属性-销售属性-图片列表数据。所以我们需要在父组件中点击添加sku按钮，需要子组件获取信息，需要父组件调用子组件的方法，采用this.$refs来实现。

//获取图片的数据 /admin/product/spuImageList/{spuId} get
export const reqSpuImageLIst = (spuId)=>request({url:`/admin/product/spuImageList/${spuId}`,method:'get'});

//获取销售属性的数据 /admin/product/spuSaleAttrList/{spuId} get
export const reqSpuSaleAttrList = (spuId)=>request({url:`/admin/product/spuSaleAttrList/${spuId}`,method:'get'});

//获取平台属性的数据 GET /admin/product/attrInfoList/{category1Id}/{category2Id}/{category3Id}
export const reqAttrInfoList = (category1Id,category2Id,category3Id)=>request({url:`/admin/product/attrInfoList/${category1Id}/${category2Id}/${category3Id}`,method:'get'});

2.2-收集form表单数据

我们需要收集表单数据，后续需要组装数据给服务器发送请求。对于sku名称，价格，重量，规格描述等信息，我们直接可以使用v-model来收集。

对于平台属性和销售属性，收集方法类似，我们只要解决一个，另外一个就可以解决。比如平台属性，我们到时候需要向服务器提交属性id和属性值id；属性是个数组，有很多个，我们可以将数据收集到数组的每个对象里面（给对象新加一个字段），到时候整理参数的时候，直接从里面获取就行。

对于图片，当我们选中图片的时候，我们需要收集到用户选中的图片，选中框使用el-table的@selection-change事件处理。图片列表中，有个设置默认和默认两个按钮，我们需要通过字段isDefault来实现切换，当我们点击设置默认后，我们需要将默认照片的url传递给服务器，所以还需要赋值给skuInfo对象中的字段。

2.3-保存提交数据

当用户点击保存的时候，我们需要按照服务器的要求，调用服务端接口并且提交数据给服务器。有些数据我们已经有了，但是有些数据我们需要整理，按照服务端的接口文档来提交参数。

//添加SKU /admin/product/saveSkuInfo post

export const reqAddSku = (skuInfo)=>request({url:'/admin/product/saveSkuInfo',method:'post',data:skuInfo});

使用了数组的reduce方法来构建新的数组，使用了数组的map方法来构建新的数组。
prev:接受的新的数组；item：遍历数组的每个对象；[]：给新的数组默认空；
map:将原始数组的对象，映射为新数组的每个对象。

当用户点击取消的时候，我们需要切换场景，需要清除之前的数据。

3-查看SKU信息和loading效果

当用户点击spu列表上查看全部sku列表信息时，需要弹框展示sku信息（列表），需要使用到el-dialog组件，需要带table的dialog组件。

//获取SKU列表数据的接口 GET /admin/product/findBySpuId/{spuId}
export const reqSkuList = (spuId)=>request({url:`/admin/product/findBySpuId/${spuId}`,method:'get'});