后台管理系统: spu管理模块

spu管理模块业务

spu 可以理解为类

例如 people类【spu】

sku可以理解为实例

例如：小明 18 男

spu跟sku可以理解为类跟多个实例的关系

spu管理模块静态

<template><div><el-card style="margin: 20px 0px"><CategorySelect @getCategoryId="getCategoryId" :show="!show"></CategorySelect></el-card><el-card style="margin: 20px 0px"><!-- 底部这里将来是有三部分进行切换 --><div><!-- 展示spu列表的结构 --><el-button type="primary" icon="el-icon-plus"> 添加spu </el-button><el-table border style="width: 100%;"><el-table-column type="index" label="序号" width="80" align="center"></el-table-column><el-table-column label="SPU名称" width="width" prop="prop"></el-table-column><el-table-column label="SPU描述" width="width" prop="prop"></el-table-column><el-table-column label="操作" width="width" prop="prop"><template slot-scope="{row,$index}"><el-button type="success" icon="el-icon-plus" size="mini"></el-button><el-button type="warning" icon="el-icon-edit" size="mini"></el-button><el-button type="info" icon="el-icon-info" size="mini"></el-button><el-button type="danger" icon="el-icon-delete" size="mini"></el-button></template></el-table-column></el-table><!--  @size-change="sizeChange"@current-change="currentChange" --><el-paginationstyle="text-align:center;":page-sizes="[3,5,10]":page-size="3"layout="prev, pager, next, jumper,->,sizes,total":total="23" background>:pager-count="7"></el-pagination></div><div></div><div></div></el-card></div>
</template><script>
export default {data() {return {category1Id: '',category2Id: '',category3Id: '',// 控制三级联动的可操作show: true}},methods: {getCategoryId({ categoryId, level }) {// categoryId：获取到一，二，三级分类的id level：为了区分是几级的idif (level == 1) {this.category1Id = categoryIdthis.category2Id = ''this.category3Id = ''} else if (level == 2) {this.category2Id = categoryIdthis.category3Id = ''} else {//代表三级分类的id有了this.category3Id = categoryId//发请求获取平台的属性数据this.getSpuList()}},getSpuList() {}}
}
</script><style>
</style>

动态展示spu列表

这里我不是很懂，明明element-ui自己封装了一个title属性，但是还要自己去封装一个button

这里要注意的是这个按钮是活的，因此不能使用简写

我们把这个按钮封装全局中，以便后续的使用

通过给他传递title参数来显示提示

点击分页器第几页按钮的回调@current-change element-ui都已经给我们封装好了，我直接修改page给传进来的page，然后在调用接口就可以拿到数据了

这里我们可以采用这种方式，就是默认没有传参数进来page是第一页，如果传参数进来，那这个page直接别赋值未传进来的参数

分页器的某一页数据条数发生变化的回调逻辑跟上表述的一样

Spu管理内容的切换

由三部分来切换的

--展示spu列表结构

--添加spu|修改spu

--展示添加spu结构

我们可以通过数字来控制

而我们可以将这俩部分拆分为组件，来展示

SpuForm静态组件完成

给他绑定一个点击事件，点击的时候直接修改他的scene就可以了

书写静态页面，这里要用到这个照片墙的功能

界面

<template><div><el-form ref="form" label-width="80px"><el-form-item label="spu名称"><el-input placeholder="spu名称"></el-input></el-form-item><el-form-item label="品牌"><el-select placeholder="请选择品牌" value=""><el-option label="" value=""></el-option></el-select></el-form-item><el-form-item label="spu描述"><el-input type="textarea" rows="4" placeholder="描述"></el-input></el-form-item><el-form-item label="spu图片"><el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove"><i class="el-icon-plus"></i></el-upload><el-dialog :visible.sync="dialogVisible"><img width="100%" :src="dialogImageUrl" alt="" /></el-dialog></el-form-item><el-form-item label="销售属性"><el-select placeholder="还有三项未选择" value=""><el-option label="label" value="value"></el-option></el-select><el-button type="primary" icon="el-icon-plus">添加销售属性</el-button><el-table style="width: 100%;" border ><el-table-colum type="index" label="序号" width="80px" align="center"></el-table-colum><el-table-colum type="index" label="属性名" width="width"></el-table-colum><el-table-colum type="index" label="属性名称列表" width="width" ></el-table-colum><el-table-colum type="index" label="操作" width="width" ></el-table-colum></el-table></el-form-item><el-form-item><el-button type="primary">保存</el-button><el-button>取消</el-button></el-form-item></el-form></div>
</template>

SpuForm请求业务得分析

---品牌的数据需要发请求的 http://localhost:9529/dev-api/admin/product/baseTrademark/getTrademarkList
---获取平台中全部的销售属性（3个） http://localhost:9529/dev-api/admin/product/baseSaleAttrList
---获取某一个SPU信息 Request URL: http://localhost:9529/dev-api/admin/product/getSpuById/5092
--获取SPU图片 http://localhost:9529/dev-api/admin/product/spuImageList/5092

先做一个点击取消返回原样的逻辑

子组件发射自定义事件

父组件绑定这个自定义事件

SPUFORM子组件发请求地方分析：
不能书写在mounted里面：
因为咱们刚才看了一下已经完成的项目，每一次显示SpuForm子组件的时候，都会发四个请求，
而我们为什么不能放在子组件的mounted里面，因为v-show只是控制SpuForm子组件显示与隐藏，
这个子组件并没有卸载（只是显示或者隐藏），导致mounted只能执行一次。

解决方法就是拿到子组件，然后每次修改都发请求

在父组件当中可以通过$ref获取子组件等等

获取SpuForm数据

先写api，然后是调用它

我们书写在initSpuData，调用的时机就是当我们修改它的时候

测试调用一下，发现是一个对象。那么我们需要存储一下他的数据。按照同样的方式，获取其他服务器返回来的数据

返回回来的数据都是有数据的

async initSpuData(spu){// spu信息let spuResult=await this.$Api.spu.reqSpu(spu.id)if(spuResult.code==200){this.spu=spuResult}// 品牌信息let tradeMarkResult=await this.$Api.spu.reqTradeMarkList()if(tradeMarkResult.code==200){this.tradeMarkList=tradeMarkResult.data}// spu图片let spuImageResult=await this.$Api.spu.reqSpuImageList(spu.id)if(spuImageResult.code==200){this.spuImageList=spuImageResult.data}// 平台全部的销售属性let saleResult=await this.$Api.spu.reqBaseSaleAttrList()if(saleResult.code==200){this.saleAttrList=saleResult.data}}

SpuForm组件数据展示与收集数据

添加SPU的时候需要给服务器携带的参数

{"category3Id": 0,"tmId": 0,"description": "string","spuName": "string","spuImageList": [{"id": 0,"imgName": "string","imgUrl": "string","spuId": 0}],"spuSaleAttrList": [{"baseSaleAttrId": 0,"id": 0,"saleAttrName": "string","spuId": 0,"spuSaleAttrValueList": [{"baseSaleAttrId": 0,"id": 0,"isChecked": "string","saleAttrName": "string","saleAttrValueName": "string","spuId": 0}]}],
}

图片上传的属性

这里有一个注意的点就是file-list.由于照片墙显示图片的数据需要数组，数组里面的元素需要name与url字段，因此需要把服务器返回的数据进行修改

完整展示效果如上

SpuForm销售属性的数据展示

整个项目当中销售属性一共有三个：颜色，尺码，版本

我们还需要通过计算属性计算出未选择的销售属性

假如第一次过滤的是颜色，然后到spu这个数组中对比一下，如果spu.saleAttrList是尺寸

那就是颜色!=尺寸返回的结果是真，也就是我们需要的数据过滤出来，反之颜色!=颜色为假，那就不要这个数据

展示的是name，收集的是id

完成SpuForm照片墙数据的收集

----照片墙何时收集数据
---预览照片墙的时候，显示大的图片的时候，需要收集数据吗? ---不需要收集的【数据已经有了】

---照片墙在删除图片的时候，需要收集数据的。
---照片墙在添加图片的时候，需要收集数据的。

销售属性的添加的操作

------收集哪些数据
baseSaleAttrId
saleAttrName
spuSaleAttrValueList

响应的id和name都可以拿到

-----收集到哪里呀？
把数据收集到SPU对象

销售属性值展示与收集

上面的操作只完成了添加销售属性，但是销售属性列表并没有实现

我们通过row.inputVisible来控制input和button的显示，row.inputValue来收集数据

首先我们需要先把着俩个属性变成响应式数据

因此我们需要使用this.$set

新增的销售属性值需要收集的字段:
baseSaleAttrId
saleAttrValueName

两种情况要考虑，1，是属性值不能未空 2，属性值不能重复

删除销售属性与属性值操作

当我们点击这个属性列表的删除标记时，其实就是删除spuSaleAttrValueList数组里面的数据

删除索引值

删除行

完成添加spu的操作

1.先写接口，通过判断携带是否有spu.id如果有就是修改这个对象，如果没有那么就是添加spu。（主要是这俩个接口结构类似）

2.当我们点击保存按钮的时候要整理参数（照片墙数据），对于图片，需要携带imageName与imageUrl字段

3.发起请求

4.父组件切换完后，需要重新获取数据，同时当前页page传进去

完成spu操作

就是把spu的数据提交给服务器，新增的业务

点击添加SPU按钮的时候，需要发请求（两个:获取品牌的数据、全部销售属性的数据）

点击添加spu按钮发起请求，调用子组件中的事件

搞定

这里有一个注意点，就是当添加的时候，应该返回的是第一页。而修改才是当前页

通过传递过来第二个参数flag传递过来的是修改还是添加来确认停留在第几页

点击取消按钮，清除数据

Object.assign(this._data,this.$options.data());

Object.assign(this._data, this.$option.data()) 这行代码的作用是将 this.$option.data() 返回的对象中的属性复制到 this._data 对象中。如果 this._data 对象中存在相同的属性，那么这些属性的值将被覆盖。因此，这行代码可以清除 this._data 对象中的一些数据。

就是B复制到A

Object.assign()合并对象

this._data就是初始的data值

注意当点击取消按钮时，出现如下的效果，这个是因为父组件的changeScene这个方法传入的形参应该是一个对象而不是俩个参数，上面是我写错了，因此出现了该错误。