管理后台项目-03-SPU列表-增删改SPU-获取SKU

文章列表

1-spu模块分析

2-spu三级分类和列表页面

3-添加修改spu

3.1-点击新增和修改逻辑分析和功能实现

3.2-图片上传逻辑分析

3.3-销售属性逻辑分析

3.4-保存spu信息

1-spu模块分析

我们看到spu组件模块，上面是三级联动，这个我们已经在上一篇属性那边做成了全局组件，不需要开发，直接引入就行，当点击三级分类的时候，需要拉取spu列表，这个也类似前一篇的属性列表。
这里我们看到有三种内容切换（展示SPU列表结构，添加|修改SPU结构，展示添加SKU结构），这个时候我们需要通过变量来控制模块的显示和隐藏。由于添加|修改SPU结构内容比较多（避免页面显得臃肿），我们拆分为子组件，添加SKU也拆分为一个子组件。

src\\views\\product\\spu\\index.vue
src\\views\\product\\spu\\skuForm\\index.vue
src\\views\\product\\spu\\spuForm\\index.vue

2-spu三级分类和列表页面

当选中三级列表的时候，我们需要向服务器发送请求，获取spu数据动态渲染在表格上，还需要加上分页插件。

编写api接口

定义数据

确定三级分类发送请求

页面动态渲染

分页器改变页码和页大小的时候，方法回调编写；页码改变我们可以和获取分页列表使用同一个方法，改变页大小我们需要写一个回调重新赋值当前页。

3-添加修改spu

当我们新增和修改spu的时候，我们需要展示对应的form，我们已经封装了对应的子组件，显示对应的form；

3.1-点击新增和修改逻辑分析和功能实现

当我们点击添加SPU或者点击列表的编辑/修改按钮的时候，我们需要展示form表单；我们分析form表单的结构，有个品牌下拉列表，还有个销售属性下拉列表，然后我们编辑的时候，需要获取当前spu信息，还需要获取照片墙信息；根据接口文档，我们点击添加按钮和编辑调用的接口不一样；新增的时候2个（品牌下拉列表信息，销售属性下拉列表信息），编辑|修改的时候4个（品牌下拉列表信息，销售属性下拉列表信息，当前spu信息，照片墙信息）。

我们点击的是新增和编辑是在父组件中，获取数据和渲染数据是在子组件中，我们可以通过ref来实现（然后我们理论上也可以在父组件获取传递给使用props传递给子组件，但是子组件理论还有自己的逻辑，需要动态变更数据这里采用ref实现更好）。

this.$refs.spu.addSpuData(this.category3Id);this.$refs.spu.initSpuData(row);在spuForm子组件中需要定义方法addSpuData，initSpuData；实现父子组件通信。

3.2-图片上传逻辑分析

上传图片我们需要用到elementUI的upload组件组件 | Element，我们需要展示或者上传多张图片，需要使用到照片墙信息，需要注意的是
file-list：照片墙需要展示的数据【数组：数组里面的元素务必要有name、url属性】

3.3-销售属性逻辑分析

1-当我们点击添加销售属性的时候，我们需要把我们选中的属性显示在下面的table中，我们使用v-model 收集下面option中的value值；在table中动态渲染，并且还需要计算还有多少个属性没有添加，并且当我们没有选中销售属性名字的时候，添加销售属性按钮不可用。

此外我们还需要计算出未选择的，使用placeholder展示给用户...

2-我们需要展示属性值名称列表，没有的时候我们显示添加，点击添加的时候，我们需要有input输入框可以输入属性值名称，当输入完成，我们需要展示为类似span标签的效果；这里我们需要使用到elementUI中的tag组件，组件 | Element；通过inputVisible的true或者false来实现input和button切换。

3-如果spu编辑信息的时候，我们的销售属性列表中肯定有之前新增的属性名称值，这个时候我们是展示组件中的button按钮，所以我们inputVisible我们取值是没有，是false；直接走else，就是展示button；我们发现条件判断inputVisible为true是就展示input，所以当我们点击销售属性table中的属性名称列表中的添加按钮，我们可以使用this.$set函数来实现给对象添加一个属性inputVisible字段，值为true，我们需要收集当前input输入值，所以我们还需要给对象新增属性inputValue，通过v-model来收集，以便以后点击保存按钮，组装数据提交给服务器。