引言

在商城业务中经常会遇到商品对规格多属性的情况，由于商品SKU模块算法较为复杂开发难度相对较大，但SKU模块是各个商城间高度可重用的模块，因此开发此插件，可应用与快速合成商品SKU的添加与编辑。

此项目为HTML开发，无需导入其他任何依赖

仓库地址：https://gitee.com/WuHaojavaCode/Product-SKU

实现效果

使用方法

将源码克隆下载后直接导入之项目目录下即可使用

SKU初始化加载已有属性

所在文件 index.js

data: function() {//alert(document.getElementById('seach').value)var specs = [ { "name": "颜色", "value": [ "白色", "黑色", "土豪金" ] }, { "name": "内存", "value": [ "8G", "16G" ] } ];var parameterValue = [ { "productId": 0, "productSpec": { "颜色": "白色", "内存": "8G" }, "productNo": "PRODUCTNO_0", "productStock": 0, "productPrice": 0 }, { "productId": 0, "productSpec": { "颜色": "白色", "内存": "16G" }, "productNo": "PRODUCTNO_1", "productStock": 0, "productPrice": 0 }, { "productId": 0, "productSpec": { "颜色": "黑色", "内存": "8G" }, "productNo": "PRODUCTNO_2", "productStock": 0, "productPrice": 0 }, { "productId": 0, "productSpec": { "颜色": "黑色", "内存": "16G" }, "productNo": "PRODUCTNO_3", "productStock": 0, "productPrice": 0 }, { "productId": 0, "productSpec": { "颜色": "土豪金", "内存": "8G" }, "productNo": "PRODUCTNO_4", "productStock": 0, "productPrice": 0 }, { "productId": 0, "productSpec": { "颜色": "土豪金", "内存": "16G" }, "productNo": "PRODUCTNO_5", "productStock": 0, "productPrice": 0 } ];return {specification:specs,// 提交数据格式productArray: parameterValue,// 用来存储要添加的规格属性addValues: [],// 默认商品编号defaultProductNo: 'PRODUCTNO_'// 批量设置相关};}

其中specs为已有规格项目，parameterValue为项目下属性阵列，如果是新增SKU以上JSON为空即可

提交并获取SKU数据

 this.specification;//获取规格项目this.productArray; //获取规格阵列

在以下方法中进行SKU获取和其他提交任务

methods: {// 提交submit: function () {var specificationdata = this.specification;//获取规格项目var productArraydata = this.productArray; //获取规格阵列console.log(productArraydata);//添加自己的业务方法}

上传属性图片

• 上传图片可以在页面上进行script的编辑
• 由于是动态生成的代码调用参考如下

<script>$(document).on('click', '.uploadFile', function(e) {//获取隐藏文本框var value = $(this).parents("div").prev().children("input");//上传图片操作value.val("OK")//上次成功后给文本框赋值
</script>