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

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

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

原数据库：

商品表——school_commodity；

商品规格表——school_commodity_specification；

规格表——school_specification；

规格值表——school_specification_item；

原打算新建一张sku表保存商品Id，商品规格，商品库存。商品规格以String的形式保存每一个具体的规格，如：红色-120米。但发现要考虑Json转String的问题，放弃该想法。

数据库增改：

商品sku表——school_commodity_sku；

商品sku规格表——school_commodity_sku_specification；

使用这两张关联表，当查询school_commodity表时可以获取到该商品下关联的school_commodity_sku，并且通过school_commodity_sku的id查询school_commodity_sku_specification，获取到该商品所有规格所拥有的库存。

前端展示：

由于库存为新增功能，原先的所有商品没有sku数据，编辑商品初始化时无法从数据库获取表单数据，必须在前端页面上根据商品现有的规格生成库存表单。如果商品只有1个规格，可以直接取到商品所拥有的规格值来生成表单。难点在于，商品有复数规格时，要如何排列组合生成表单，最蠢的方法是有几个规格就循环嵌套几次，但是我们不可能提前知道用户选了几个规格从而设置几次循环。

封装方法：

由于历史遗留问题，所有规格分类都保存在specificationIds中，商品选中的规格保存在specifitionList中。每次用户的修改都必须遍历一次specificationIds和specifitionList，找出用户选中的规格分类保存在schoolCommoditySku.specifitionList中。

在schoolCommoditySku.specifitionList中保存规格分类和规格值。

当schoolCommoditySku.specifitionList的长度不为0即商品有规格时，调用封装方法封装表单：

1. 设置循环次数为schoolCommoditySku.specifitionList的size，每次循环都取schoolCommoditySku.specifitionList下的一个规格分类，传入packageFromText中进行封装，packageFromText会将封装好的表单数据暂时保存在tempArr中；
2. 当tempArr中没有数据时，创建对象objValue={}，使用objValue[key]= value的形式往objValue中保存规格值，再创建obj={}对象，以obj[key]=objValue的形式保存数据，然后将obj以push保存进newArr中，最后将newArr克隆给tempArr；
3. 当tempArr中有数据时，创建对象objValue={}，使用objValue[key]= value的形式往objValue中保存规格值，然后以tempArr的length进行循环，每次循环克隆一个当前的tempArr给subItem，再将objValue克隆给obj，最后将subItem和obj合并后push进newArr；
4. 每次循环都要判断是否封装的是最后一个规格，最后一个规格之后必须封装库存对象；
5. 最后再将newArr克隆给packageData，packageData为表单遍历的数据。

这里注意只能用for循环不能用forEach遍历，因为每一次循环都会修改表单的数据，如果使用forEach会存在引用传递的问题

当schoolCommoditySku.specifitionList长度为0时，直接创建stockItem对象，通过stockItem[key]=value的形式保存库存信息，最后保存在this.packageData中。

页面展示：

因为显示表单只显示一次表头即规格分类，但是之前封装的时候每个数据里都保存了一次规格分类，所以不能直接遍历，否则有几条数据就有几个表头。

v-for="(item, idex) in Object.values(packageData[0])"只遍历第一条数据，这样表头就只显示一次。

注意，这里的v-for不是遍历封装好的数据，只是遍历封装好的数据下的第一条数据来制作表头，并不表示表单内容只显示第一条。

element的table组件会自动遍历data标签中设置的数据源到表单中。

因为封装的数据的特殊，不能直接使用scope来捕获数据显示在页面的表单中，使用template slot-scope="scope"获取当前行数据，并根据数据内容进行判断。当捕获到的行对象的name为库存时展示input，让用户设置库存。

总结：

1. 当JSON转String有麻烦时，可以使用关联表来获取商品规格的库存；
2. 前端数据封装可以使用let object = {}来创建对象，并且使用object[key] = value的形式来保存数据到对象中（注：该数据为对象不是数组，要分清对象和数组，否则传参时会有错误）
3. 后端返回的表单数据不需要遍历，先存在前端的list中，在el-table中的data属性中设置数据源为list，el-table会自动把list中的所有数据遍历到表格中。通过el-table-colum的prop属性自定义字段的名称，prop会自动在list中找到对应字段的数据渲染在el-table-colum中
4. 前端封装数据要注意引用传递问题，不要随随便便使用forEach，只有确认forEach之后的数据不会更改，不确定的情况下使用for是最保险的