商品增加库存功能，前端页面要求显示表单修改库存（二）

该贴为学习记录贴，记录博主开发项目时遇到的各种问题和解决方法

需求：对商品购买增加库存功能，并且在编辑商品页面中，根据商品拥有的规格生成From表单，用户可在From表单中修改商品各个规格的库存。

在第一章中已经处理完数据库存储商品规格和库存、前端页面显示表单的问题。这一章解决用户修改了库存后传给后端保存进数据库的数据封装问题。

后端接收的数据VO：

@NoArgsConstructor
@EqualsAndHashCode(callSuper=false)
@Data
@ApiModel(value = "商品库存和规格VO类")
public class SchoolCommoditySkuSpecificationVO {

  @ApiModelProperty(value = "商品skuCode")
  private String skuCode;

  @ApiModelProperty(value = "商品规格列表")
  private List<SchoolCommodityVO> specifications;

  @ApiModelProperty(value = "商品库存数量")
  private Integer stockNum;
}

 前端封装schoolCommoditySkuSpecifications数据：

let list = utils.deepClone(this.packageData)
    let newlist = []
    for (let i = 0; i < list.length; i++) {
        let item = list[i]
            let num = Object.keys(item).length
            let KeyName = Object.keys(item)[num - 1]
            let skuCode = null
            let stock = null
            if (KeyName === 'skuCode') {
                skuCode = item[KeyName]
                    let stockKeyName = Object.keys(item)[num - 2]
                    stock = item[stockKeyName]
            } else if (KeyName === 'stock') {
                stock = item[KeyName]
            }
            let spItemList = []
            if (skuCode) {
                for (let j = 0; j < num - 2; j++) {
                    let keyName = Object.keys(item)[j]
                        spItemList.push(item[keyName])
                }
                const stockObject = Object.assign({}, {
                    skuCode: skuCode['value'],
                    stockNum: stock['value'],
                    specifications: spItemList
                })
                    newlist.push(stockObject)
            } else {
                for (let j = 0; j < num - 1; j++) {
                    let keyName = Object.keys(item)[j]
                        spItemList.push(item[keyName])
                }
                const stockObject = Object.assign({}, {
                    stockNum: stock['value'],
                    specifications: spItemList
                })
                    newlist.push(stockObject)
            }
    }
    this.dataForm = Object.assign(this.dataForm, {
    schoolCommoditySkuSpecifications: newlist
})

由于是新增的库存功能，所以在初始化的时候是无法从后端获取到的sku数据的。用户在编写表单内容点击提交后，通过循环遍历进行封装。并且封装的时候要判断有没有skuCode，skuCode在之后将用在后端来判断是新增sku还是原有的sku。

前端用户提交时必须确认用户是否对商品的规格进行增删，向用户确认是否要更改。因为商品购买后退款回滚库存是根据skuCode来进行操作，如果每次用户修改都直接新增数据更改skuCode那么会有库存回收和库存显示错误的问题。

后端接收到前端发送的商品信息后，在处理sku数据时必须判断用户是否要更改规格，不更改规格直接根据skuCode来重新编辑库存。

保存商品的sku数据时，由于sku和商品表是关联的，所以只需要product.setSku(sku)之后再productRepository.saveall(productList)，就可以直接将sku数据保存在sku表中，不需要更新或生成sku数据后再save一遍sku表。