edit

assets/lib/layui/admin/modules/plugin/skuTable.js

@@ -111,7 +111,7 @@ layui.define(['jquery', 'form', 'upload', 'layer', 'sortable'], function (export
                     return false;
                 }
 
-                var index = Util.msg.loading('加载中');
+                //var index = Util.msg.loading('加载中');
                 $.ajax({
                     url: option.url,
                     type: type,
@@ -120,12 +120,14 @@ layui.define(['jquery', 'form', 'upload', 'layer', 'sortable'], function (export
                     data: option.data,
                     timeout: 60000,
                     success: function (res) {
-                        Util.msg.close(index);
+                        //Util.msg.close(index);
+                        /*
                         if (res[option.statusName] == option.statusCode) {
                             return ok(res);
                         } else {
                             return no(res);
-                        }
+                        }*/
+                        return ok(res);
                     },
                     error: function (xhr, textstatus, thrown) {
                         Util.msg.error('Status:' + xhr.status + '，' + xhr.statusText + '，请稍后再试！', function () {
@@ -146,7 +148,7 @@ layui.define(['jquery', 'form', 'upload', 'layer', 'sortable'], function (export
 
     class SkuTable {
         options = {
-            isAttributeValue: 0, //规格类型 0统一规格 1多规格
+            isAttributeValue: 1, //规格类型 0统一规格 1多规格
             isAttributeElemId: 'fairy-is-attribute', //规格类型容器id
             specTableElemId: 'fairy-spec-table', //规格表容器id
             skuTableElemId: 'fairy-sku-table', //SKU表容器id
@@ -217,6 +219,9 @@ layui.define(['jquery', 'form', 'upload', 'layer', 'sortable'], function (export
                     },
                     statusCode: this.options.requestSuccessCode
                 }, (res) => {
+                    if (!res.data) {
+                        res.data = [];
+                    }
                     this.options.skuData = res.data;
                     this.css();
                     this.render();
@@ -290,7 +295,7 @@ layui.define(['jquery', 'form', 'upload', 'layer', 'sortable'], function (export
                 $.each($(`#${that.options.specTableElemId} tbody tr`), function () {
                     var child = [];
                     $.each($(this).find('input[type=checkbox]'), function () {
-                        child.push({id: $(this).val(), title: $(this).attr('title'), checked: $(this).is(':checked')});
+                        child.push({id: $(this).val(), title: $(this).attr('title'), checked: $(this).is(':checked') ? '1' : '0'});
                     });
                     var specItem = {
                         id: $(this).find('td').eq(0).data('spec-id'),
@@ -300,10 +305,6 @@ layui.define(['jquery', 'form', 'upload', 'layer', 'sortable'], function (export
                     specData.push(specItem);
                 });
                 that.options.specData = specData;
-                $('#spec').val(JSON.stringify(that.options.specData));
-                if (data.elem.checked) {
-                    //that.options.skuData[]
-                }
                 //that.options.skuData = $.extend(that.options.skuData, that.getFormSkuData());
                 that.resetRender(that.options.skuTableElemId);
                 that.renderMultipleSkuTable();
@@ -353,7 +354,7 @@ layui.define(['jquery', 'form', 'upload', 'layer', 'sortable'], function (export
                 layer.prompt({title: '规格值'}, function (value, index, elem) {
                     that.options.specData.forEach(function (v, i) {
                         if (v.id == specId) {
-                            v.child.push({id: Util.tool.uuid(), title: value, checked: false});
+                            v.child.push({id: Util.tool.uuid(), title: value, checked: '0'});
                         }
                     });
                     that.resetRender(that.options.specTableElemId);
@@ -412,13 +413,16 @@ layui.define(['jquery', 'form', 'upload', 'layer', 'sortable'], function (export
         render() {
             this.resetRender();
             this.renderIsAttribute(this.options.isAttributeValue);
-            if (this.options.isAttributeValue == '1') {
+            if (this.options.isAttributeValue == '2') {
                 if (this.options.specDataUrl && this.options.productId) {
                     Util.request.get({
                         url: this.options.specDataUrl,
                         productId: this.options.productId,
                         statusCode: this.options.requestSuccessCode
                     }, (res) => {
+                        if (!res.data) {
+                            res.data = [];
+                        }
                         this.options.specData = res.data;
                         this.renderSpecTable();
                         this.renderMultipleSkuTable();
@@ -456,8 +460,8 @@ layui.define(['jquery', 'form', 'upload', 'layer', 'sortable'], function (export
          */
         renderIsAttribute(checkedValue) {
             var html = '';
-            html += `<input type="radio" name="is_attribute" title="统一规格" value="0" lay-filter="fairy-is-attribute" ${checkedValue == '0' ? 'checked' : ''}>`;
-            html += `<input type="radio" name="is_attribute" title="多规格" value="1" lay-filter="fairy-is-attribute" ${checkedValue == '1' ? 'checked' : ''}>`;
+            html += `<input type="radio" name="update_spec_type" title="单规格" value="1" lay-filter="fairy-is-attribute" ${checkedValue == '1' ? 'checked' : ''}>`;
+            html += `<input type="radio" name="update_spec_type" title="多规格" value="2" lay-filter="fairy-is-attribute" ${checkedValue == '2' ? 'checked' : ''}>`;
             this.renderFormItem('规格类型', html, this.options.isAttributeElemId);
         }
 
@@ -478,9 +482,9 @@ layui.define(['jquery', 'form', 'upload', 'layer', 'sortable'], function (export
                 switch (item.type) {
                     case "select":
                         table += '<td>';
-                        table += `<select name="${item.field}" lay-verify="${item.verify}" lay-reqtext="${item.reqtext}">`;
+                        table += `<select style="width: 100%;" name="skus[-1][${item.field}]" lay-verify="${item.verify}" lay-reqtext="${item.reqtext}">`;
                         item.option.forEach(function (o) {
-                            table += `<option value="${o.value}" ${that.options.skuData[item.field] == o.value ? 'selected' : ''}>${o.key}</option>`;
+                            table += `<option value="${o.value}" ${that.options.skuData && that.options.skuData[-1] && that.options.skuData[-1][item.field] && that.options.skuData[item.field] == o.value ? 'selected' : ''}>${o.key}</option>`;
                         });
                         table += '</select>';
                         table += '</td>';
@@ -488,7 +492,7 @@ layui.define(['jquery', 'form', 'upload', 'layer', 'sortable'], function (export
                     case "input":
                     default:
                         table += '<td>';
-                        table += `<input type="text" name="${item.field}" value="${that.options.skuData[item.field] ? that.options.skuData[item.field] : item.value}" class="layui-input" lay-verify="${item.verify}" lay-reqtext="${item.reqtext}">`;
+                        table += `<input type="text" style="width: 100%;" name="skus[-1][${item.field}]" value="${that.options.skuData && that.options.skuData[-1] && that.options.skuData[-1][item.field] ? that.options.skuData[-1][item.field] : item.value}" class="layui-input" lay-verify="${item.verify}" lay-reqtext="${item.reqtext}">`;
                         table += '</td>';
                         break;
                 }
@@ -506,17 +510,23 @@ layui.define(['jquery', 'form', 'upload', 'layer', 'sortable'], function (export
         renderSpecTable() {
             var that = this,
                 table = `<input type="hidden" name="spec" id="spec" value=""/><table class="layui-table" id="${this.options.specTableElemId}"><thead><tr><th>规格名</th><th>规格值</th></tr></thead><colgroup><col width="140"></colgroup><tbody>`;
-            $.each(this.options.specData, function (index, item) {
-                table += that.options.sortable ? `<tr data-id="${item.id}">` : '<tr>';
-                table += `<td data-spec-id="${item.id}">${item.title}<i class="layui-icon layui-icon-delete layui-anim layui-anim-scale ${that.options.specDataDelete ? '' : 'layui-hide'}" data-spec-index="${index}"></i></td>`;
-                table += '<td>';
-                $.each(item.child, function (key, value) {
-                    table += `<input type="checkbox" title="${value.title}" lay-filter="fairy-spec-filter" value="${value.id}" ${value.checked ? 'checked' : ''} /><i class="layui-icon layui-icon-delete layui-anim layui-anim-scale ${that.options.specDataDelete ? '' : 'layui-hide'}" data-spec-value-index="${index}-${key}"></i> `;
+            if (this.options.specData.length > 0) {
+                $.each(this.options.specData, function (index, item) {
+                    table += that.options.sortable ? `<tr data-id="${item.id}">` : '<tr>';
+                    table += `<td data-spec-id="${item.id}">${item.title}<i class="layui-icon layui-icon-delete layui-anim layui-anim-scale ${that.options.specDataDelete ? '' : 'layui-hide'}" data-spec-index="${index}"></i></td>`;
+                    table += '<td>';
+                    if (item.child) {
+                        $.each(item.child, function (key, value) {
+                            table += `<input type="checkbox" title="${value.title}" lay-filter="fairy-spec-filter" value="${value.id}" ${value.checked == '1' ? 'checked' : ''} /><i class="layui-icon layui-icon-delete layui-anim layui-anim-scale ${that.options.specDataDelete ? '' : 'layui-hide'}" data-spec-value-index="${index}-${key}"></i> `;
+                        });
+                    }
+                    
+                    table += '<div class="fairy-spec-value-create"><i class="layui-icon layui-icon-addition"></i>规格值</div>'
+                    table += '</td>';
+                    table += '</tr>';
                 });
-                table += '<div class="fairy-spec-value-create"><i class="layui-icon layui-icon-addition"></i>规格值</div>'
-                table += '</td>';
-                table += '</tr>';
-            });
+            }
+            
             table += '</tbody>';
 
             table += '<tfoot><tr><td colspan="2">';
@@ -527,6 +537,10 @@ layui.define(['jquery', 'form', 'upload', 'layer', 'sortable'], function (export
 
             this.renderFormItem('商品规格', table, this.options.specTableElemId);
 
+            if (this.options.specData.length > 0) {
+                $('#spec').val(JSON.stringify(this.options.specData));
+            }
+
             if (this.options.sortable) {
                 /**
                  * 拖拽
@@ -556,21 +570,28 @@ layui.define(['jquery', 'form', 'upload', 'layer', 'sortable'], function (export
 
             if ($(`#${this.options.specTableElemId} tbody input[type=checkbox]:checked`).length) {
                 var prependThead = [], prependTbody = [];
-                $.each(this.options.specData, function (index, item) {
-                    var isShow = item.child.some(function (value, index, array) {
-                        return value.checked;
-                    });
-                    if (isShow) {
-                        prependThead.push(item.title);
-                        var prependTbodyItem = [];
-                        $.each(item.child, function (key, value) {
-                            if (value.checked) {
-                                prependTbodyItem.push({id: value.id, title: value.title});
-                            }
+                if (this.options.specData.length > 0) {
+                    $.each(this.options.specData, function (index, item) {
+                        var isShow = item.child.some(function (value, index, array) {
+                            return value.checked == '1' ? true : false;
                         });
-                        prependTbody.push(prependTbodyItem);
-                    }
-                });
+                        if (isShow) {
+                            prependThead.push(item.title);
+                            var prependTbodyItem = [];
+                            if (item.child) {
+                                $.each(item.child, function (key, value) {
+                                    if (value.checked == '1') {
+                                        prependTbodyItem.push({id: value.id, title: value.title});
+                                    }
+                                });
+                            }
+                            
+                            prependTbody.push(prependTbodyItem);
+                        }
+                    });
+
+                    $('#spec').val(JSON.stringify(that.options.specData));
+                }
 
                 table += '<colgroup>' + '<col width="70">'.repeat(prependThead.length + 1) + '</colgroup>';
 
@@ -607,15 +628,21 @@ layui.define(['jquery', 'form', 'upload', 'layer', 'sortable'], function (export
                 var prependTbodyTrs = [];
                 prependTbody.reduce(function (prev, cur, index, array) {
                     var tmp = [];
-                    prev.forEach(function (a) {
-                        cur.forEach(function (b) {
-                            tmp.push({id: a.id + that.options.skuNameDelimiter + b.id, title: a.title + that.options.skuNameDelimiter + b.title});
-                        })
-                    });
+                    if (cur.length > 0) {
+                        prev.forEach(function (a) {
+                            cur.forEach(function (b) {
+                                tmp.push({id: a.id + that.options.skuNameDelimiter + b.id, title: a.title + that.options.skuNameDelimiter + b.title});
+                            })
+                        });
+                    } else {
+                        prev.forEach(function (a) {
+                            tmp.push({id: a.id, title: a.title});
+                        });
+                    }
+                    
                     return tmp;
                 }).forEach(function (item, index, array) {
                     var tr = '<tr>';
-
                     tr += item.title.split(that.options.skuNameDelimiter).map(function (t, i, a) {
                         if (that.options.rowspan) {
                             if (index % skuRowspanArr[i] === 0 && skuRowspanArr[i] > 1) {
@@ -633,18 +660,21 @@ layui.define(['jquery', 'form', 'upload', 'layer', 'sortable'], function (export
                     that.options.multipleSkuTableConfig.tbody.forEach(function (c) {
                         switch (c.type) {
                             case "image":
-                                tr += '<td><input type="hidden" name="' + that.makeSkuName(item, c) + '" value="' + (that.options.skuData[that.makeSkuName(item, c)] ? that.options.skuData[that.makeSkuName(item, c)] : c.value) + '" lay-verify="' + c.verify + '" lay-reqtext="' + c.reqtext + '"><img class="fairy-sku-img" src="' + (that.options.skuData[that.makeSkuName(item, c)] ? that.options.skuData[that.makeSkuName(item, c)] : that.options.skuIcon) + '" alt="' + c.field + '图片"></td>';
+                                var skuValue = that.getSkuData(that.options.skuData, item, c);
+                                tr += '<td><input type="hidden" name="' + that.makeSkuName(item, c) + '" value="' + (skuValue ? skuValue : c.value) + '" lay-verify="' + c.verify + '" lay-reqtext="' + c.reqtext + '"><img class="fairy-sku-img" src="' + (skuValue ? skuValue : that.options.skuIcon) + '" alt="' + c.field + '图片"></td>';
                                 break;
                             case "select":
-                                tr += '<td><select name="' + that.makeSkuName(item, c) + '" lay-verify="' + c.verify + '" lay-reqtext="' + c.reqtext + '">';
+                                var skuValue = that.getSkuData(that.options.skuData, item, c);
+                                tr += '<td><select style="width: 100%;" name="' + that.makeSkuName(item, c) + '" lay-verify="' + c.verify + '" lay-reqtext="' + c.reqtext + '">';
                                 c.option.forEach(function (o) {
-                                    tr += '<option value="' + o.value + '" ' + (that.options.skuData[that.makeSkuName(item, c)] == o.value ? 'selected' : '') + '>' + o.key + '</option>';
+                                    tr += '<option value="' + o.value + '" ' + (skuValue && skuValue == o.value ? 'selected' : '') + '>' + o.key + '</option>';
                                 });
                                 tr += '</select></td>';
                                 break;
                             case "input":
                             default:
-                                tr += '<td><input type="text" name="' + that.makeSkuName(item, c) + '" value="' + (that.options.skuData[that.makeSkuName(item, c)] ? that.options.skuData[that.makeSkuName(item, c)] : c.value) + '" class="layui-input" lay-verify="' + c.verify + '" lay-reqtext="' + c.reqtext + '"></td>';
+                                var skuValue = that.getSkuData(that.options.skuData, item, c);
+                                tr += '<td><input style="width: 100%;" type="text" name="' + that.makeSkuName(item, c) + '" value="' + (skuValue ? skuValue : c.value) + '" class="layui-input" lay-verify="' + c.verify + '" lay-reqtext="' + c.reqtext + '"></td>';
                                 break;
                         }
                     });
@@ -714,6 +744,14 @@ layui.define(['jquery', 'form', 'upload', 'layer', 'sortable'], function (export
             return 'skus[' + (this.options.skuNameType === 0 ? sku.id : sku.title) + '][' + conf.field + ']';
         }
 
+        getSkuData(data, sku, conf) {
+            if (data[(this.options.skuNameType === 0 ? sku.id : sku.title)]) {
+                return data[(this.options.skuNameType === 0 ? sku.id : sku.title)][conf.field];
+            } else {
+                return false;
+            }
+        }
+
         getSpecData() {
             return this.options.specData;
         }

assets/lib/manage/main.js

@@ -2512,7 +2512,7 @@ function showLoad(id, value)
 				}
 			} else {
 				e.html(t.data);
-				form.render();
+				form.render('checkbox');
 			}
 		} else {
 			e.html('');
@@ -3293,3 +3293,71 @@ function showVideo(video)
 	var html = '<meta name="referrer" content="no-referrer"><video width="400" height="300" controls autoplay="autoplay"><source src="'+video+'" type="video/mp4">您的浏览器不支持Video标签。</video>';
 	showAlert(html);
 }
+
+
+function sku(e)
+{
+	var data = $('#sku_table_col').html();
+	data = JSON.parse(data);
+	var thead = [];
+	var tbody = [];
+	var mthead = [];
+	var mtbody = [];
+
+	for (var i in data) {
+		if (data[i]['verify'] == 'number') {
+			var type = 'required|number';
+			var value = '0';
+		} else {
+			var type = 'required';
+			var value = '';
+		}
+		if (data[i]['type'] == 'image') {
+			var icon = '';
+		} else {
+			var icon = 'layui-icon-cols';
+		}
+		mthead.push({title: data[i]['name'], icon: icon});
+		mtbody.push({type: data[i]['type'], field: i, value: value, verify: type, reqtext: data[i]['name'] + '不能为空'});
+		if (data[i]['type'] != 'image') {
+			thead.push({title: data[i]['name'], icon: 'layui-icon-cols'});
+			tbody.push({type: data[i]['type'], field: i, value: value, verify: type, reqtext: data[i]['name'] + '不能为空'});
+		}
+	}
+ 	var obj = skuTable.render({
+        //规格类型 1统一规格 2多规格
+        isAttributeValue: e.attr('data-type'),
+        //规格类型容器id
+        isAttributeElemId: 'sku_spec_type',
+        //规格表容器id
+        specTableElemId: 'sku_spec_table',
+        //sku表容器id
+        skuTableElemId: 'sku_table',
+        //规格拖拽排序
+        sortable: true,
+        //sku表相同属性值是否合并行
+        rowspan: true,
+        //请求成功返回状态码值
+        requestSuccessCode: 1,
+        //上传接口地址
+        //接口要求返回格式参考 upload.json
+        uploadUrl: e.attr('data-upload'),
+        //统一规格配置项
+        singleSkuTableConfig: {
+            thead: thead,
+            tbody: tbody
+        },
+        //多规格配置项
+        multipleSkuTableConfig: {
+            thead: mthead,
+            tbody: mtbody
+        },
+        //商品id 配合specDataUrl和skuDataUrl使用
+        productId: e.attr('data-id'),
+        //规格数据, 一般从后台获取,
+        specData: [],
+        specDataUrl: e.attr('data-spec'),
+        skuData : [],
+        skuDataUrl: e.attr('data-sku'),
+    });
+}