NN2022081301/public/agent/pages/store/sku.html

<div class="layui-form-item">
    <label class="control-label">规格项目</label>
    <table class="layui-table ctrl-group">
    </table>
    <button class="layui-btn icon-btn add-spec-btn" type="button">添加规格</button>
</div>
<div id="lv_table_con" class="control-group" style="display: none;">
    <label class="control-label">规格项目(sku)表</label>
    <div class="controls">
        <div id="lv_table">

        </div>
    </div>
</div>


let specHtml = '<tr class="spec-box" style="position: relative">\n' +
    '                        <td class="spec" style="width: 100px;position: relative">\n' +
        '                            <input class="layui-input" name="spec" value="">\n' +
        '                            <button class="rm-spec-btn" style="border: none;position: absolute;top: 15px;right: 16px;background: #ff0000;color: #fff;border-radius: 2px;padding: 1px 5px;">X</button>\n' +
        '                        </td>\n' +
    '                        <td class="spec-item" style="display:flex;flex-wrap: wrap;align-items: center;position: relative">\n' +
        '                            <div class="item-one" style="position: relative;margin: 5px 0 5px 6px">\n' +
            '                                <input class="layui-input" name="spec_value" style="width: 100px" value="">\n' +
            '                            </div>\n' +
        '                            <button type="button" class="layui-btn layui-btn-sm add-spec-item-btn" style="margin-left: 20px">添加参数</button>\n' +
        '                        </td>\n' +
    '                    </tr>';
let itemHtml ='<div class="item-one" style="position: relative;margin: 5px 0 5px 6px">\n' +
    '                                <input class="layui-input" name="spec_value" style="width: 100px" value="">\n' +
    '                                <button class="rm-spec-item-btn" style="border: none;position: absolute;top: 1px;right: 1px;background: #ff0000;color: #fff;border-radius: 2px;padding: 1px 5px;">X</button>\n' +
    '                            </div>';

// 添加规格
$(document).on('click','.add-spec-btn',function () {
// 添加tr
var last = $('.ctrl-group tr:last');
if (!last || last.length == 0) {
$(this).prev().eq(0).html(specHtml)
} else {
last.eq(0).after(specHtml);
}
})
$(document).on('click', '.rm-spec-btn', function() {
$(this).parents('tr').remove();
renderSkuItem()
});

// 添加规格参数
$(document).on('click','.add-spec-item-btn', function () {
$(this).parents('.spec-item').find('.item-one:last').after(itemHtml);
});

$(document).on('click', '.rm-spec-item-btn', function() {
$(this).parents('.item-one:last').remove();
renderSkuItem()
});

// 及时生成
$(document).on('focusout', 'input[name="spec_value"]', function() {
renderSkuItem();
})

function renderSkuItem()
{
var lv1Arr = $('input[name="spec"]');

if (!lv1Arr || lv1Arr.length == 0) {
$('#lv_table_con').hide();
$('#lv_table').html('');
return;
}
for (var i = 0; i < lv1Arr.length; i++) {
var lv2Arr = $(lv1Arr[i]).parents('.spec-box').find('input[name="spec_value"]');
if (!lv2Arr || lv2Arr.length == 0) {
layer.tips('规格项必须填写哟!',  $(lv1Arr[i]), {tips: [1, '#ff4c4c']})
return false;
}
$.each(lv2Arr, (i,t) => {
if($(t).val() === ""){
layer.tips('规格项必须填写哟!',  $(t), {tips: [1, '#ff4c4c']})
return false;
}
})
}
// 数据采集 spec
let specs = [],specv = [];
$.each(lv1Arr, (i,t) => {
let val = $(t).val();
specs.push(val);
})
console.log(specs);


// var SKU = sku.init({ id:'sku',item:item});
// return false;
var tableHTML = '', spec = [],spec_value=[];
tableHTML += '<table class="layui-table">';
    tableHTML += '    <thead>';
    tableHTML += '        <tr>';
        for (var i = 0; i < lv1Arr.length; i++) {
        // 收集商品属性
        tableHTML += '<th width="50">' + $(lv1Arr[i]).val() + '</th>';
        }
        // 添加要获取的数据
        tableHTML += '            <th style="width: 50px">现价</th>';
        tableHTML += '            <th style="width: 50px">原价</th>';
        tableHTML += '            <th style="width: 50px">库存</th>';
        tableHTML += '        </tr>';
    tableHTML += '    </thead>';
    tableHTML += '    <tbody>';
    var numsArr = new Array();
    var idxArr = new Array();
    for (var i = 0; i < lv1Arr.length; i++) {
    numsArr.push($(lv1Arr[i]).parents('.spec-box').find('input[name="spec_value"]').length);
    idxArr[i] = 0;
    }
    var len = 1;
    var rowsArr = new Array();
    for (var i = 0; i < numsArr.length; i++) {
    len = len * numsArr[i];

    var tmpnum = 1;
    for (var j = numsArr.length - 1; j > i; j--) {
    tmpnum = tmpnum * numsArr[j];
    }
    rowsArr.push(tmpnum);
    }

    for (var i = 0; i < len; i++) {
    tableHTML += '        <tr data-row="' + (i+1) + '">';
        var name = '';
        for (var j = 0; j < lv1Arr.length; j++) {
        var n = parseInt(i / rowsArr[j]);
        if (j == 0) {
        } else if (j == lv1Arr.length - 1) {
        n = idxArr[j];
        if (idxArr[j] + 1 >= numsArr[j]) {
        idxArr[j] = 0;
        } else {
        idxArr[j]++;
        }
        } else {
        var m = parseInt(i / rowsArr[j]);
        n = m % numsArr[j];
        }

        var text = $(lv1Arr[j]).parents('.spec-box').find('input[name="spec_value"]').eq(n).val();
        console.log(text);
        if (j != lv1Arr.length - 1) {
        name += text + '_';
        } else {
        name += text;
        }
        if (i % rowsArr[j] == 0) {
        tableHTML += '<td rowspan="' + rowsArr[j] + '" data-rc="' + (i+1) + '_' + (j+1) + '">' + text + '</td>';
        }
        }
        // 对应上面
        tableHTML += '<td style="width: 50px"><input type="text" class="layui-input" name="' + name + '[price]" /></td>';
        tableHTML += '<td style="width: 50px"><input type="text" class="layui-input" name="' + name + '[original_price]" /></td>';
        tableHTML += '<td style="width: 50px"><input type="text" class="layui-input" name="' + name + '[stock]" /></td>';
        tableHTML += '</tr>';
    }
    tableHTML += '</tbody>';
    tableHTML += '</table>';

$('#lv_table_con').show();
$('#lv_table').html(tableHTML);
}