<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>动态SKU表-白開水</title>
<link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css"/>
<style>
#sku-table thead tr th i,
#sku-table tbody tr td img {
cursor: pointer;
}
</style>
</head>
<body>
<div class="layui-container">
<form action="" class="layui-form">
<div class="layui-form-item">
<label class="layui-form-label">规格：</label>
<div class="layui-input-block">
<table class="layui-table" id="spec-table">
<thead>
<tr>
<th>规格名</th>
<th>规格值</th>
</tr>
</thead>
<tbody>
<tr>
<td data-id="1">颜色</td>
<td>
<input type="checkbox" title="红" lay-filter="filter" value="1" checked>
<input type="checkbox" title="黄" lay-filter="filter" value="2">
<input type="checkbox" title="蓝" lay-filter="filter" value="3">
</td>
</tr>
<tr>
<td data-id="2">尺码</td>
<td>
<input type="checkbox" title="S" lay-filter="filter" value="4" checked>
<input type="checkbox" title="M" lay-filter="filter" value="5" checked>
<input type="checkbox" title="L" lay-filter="filter" value="6">
<input type="checkbox" title="XL" lay-filter="filter" value="7">
</td>
</tr>
<tr>
<td data-id="2">款式</td>
<td>
<input type="checkbox" title="男款" lay-filter="filter" value="8" checked>
<input type="checkbox" title="女款" lay-filter="filter" value="9" checked>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="layui-form-item layui-hide">
<label class="layui-form-label">SKU表：</label>
<div class="layui-input-block">
<table class="layui-table" id="sku-table">
<thead></thead>
<tbody></tbody>
</table>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="submit">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
<input type="hidden" name="spec" value="">
</div>
</div>
</form>
</div>
<script src="https://www.layuicdn.com/layui/layui.js"></script>
<script>
layui.use(['form', 'upload', 'jquery'], function () {
var form = layui.form, upload = layui.upload, $ = layui.jquery;
function createSkuTable(url = '') {
var specData = [];
$.each($('#spec-table 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')});
});
var specItem = {id: $(this).find('td').eq(0).attr('data-id'), title: $(this).find('td').eq(0).text(), show: $(this).find('input[type=checkbox]:checked').length > 0, child: child};
specData.push(specItem);
});
if ($('#spec-table tbody input[type=checkbox]:checked').length) {
$('#sku-table').parent().parent().removeClass('layui-hide');
var prependThead = [], prependTbody = [];
$.each(specData, function () {
if (this.show) {
prependThead.push(this.title);
var prependTbodyItem = [];
$.each(this.child, function () {
if (this.checked) {
prependTbodyItem.push({id: this.id, title: this.title});
}
});
prependTbody.push(prependTbodyItem);
}
});
if (prependThead.length > 0) {
$('#sku-table thead').html('<tr>' +
prependThead.map(function (t, i, a) {
return '<th>' + t + '</th>'
}) +
'<th>图片</th>' +
'<th>销售价(元) <i class="layui-icon layui-icon-cols"></i></th>' +
'<th>市场价(元) <i class="layui-icon layui-icon-cols"></i></th>' +
'<th>成本价(元) <i class="layui-icon layui-icon-cols"></i></th>' +
'<th>库存 <i class="layui-icon layui-icon-cols"></i></th>' +
'<th>状态 </th>' +
'</tr>');
}
var prependTbodyTrs = [];
prependTbody.reduce(function (prev, cur, index, array) {
var tmp = [];
prev.forEach(function (a) {
cur.forEach(function (b) {
tmp.push({id: a.id + '-' + b.id, title: a.title + '-' + b.title});
})
});
return tmp;
}).forEach(function (item, index, array) {
prependTbodyTrs.push('<tr>' +
item.title.split('-').map(function (t, i, a) {
return '<td>' + t + '</td>';
}) +
'<td><input type="hidden" name="skus[' + item.id + '][picture]" value=""><img src="https://shop.yyhjx.net/backend/assets/abec325a/img/sku-add.png" alt="sku图片"></td>' +
'<td><input type="text" name="skus[' + item.id + '][price]" value="0" class="layui-input" lay-verify="required|number" lay-reqtext="销售价不能为空"></td>' +
'<td><input type="text" name="skus[' + item.id + '][market_price]" value="0" class="layui-input" lay-verify="required|number" lay-reqtext="市场价不能为空"></td>' +
'<td><input type="text" name="skus[' + item.id + '][cost_price]" value="0" class="layui-input" lay-verify="required|number" lay-reqtext="成本价不能为空"></td>' +
'<td><input type="text" name="skus[' + item.id + '][stock]" value="0" class="layui-input" lay-verify="required|number" lay-reqtext="库存不能为空"></td>' +
'<td><select name="skus[' + item.id + '][status]"><option value="1">启用</option><option value="0">禁用</option></select></td>' +
'</tr>');
});
if (prependTbodyTrs.length > 0) {
$('#sku-table tbody').html(prependTbodyTrs.join(''));
$('input[name=spec]').val(JSON.stringify(specData));
form.render('select');
upload.render({
elem: '#sku-table td img',
url: url,
exts: 'png|jpg|ico|jpeg|gif',
accept: 'images',
acceptMime: 'image/*',
multiple: false,
done: function (res) {
if (res.code === 200) {
var url = res.data.url;
$(this.item).attr('src', url).prev().val(url);
layer.msg(res.msg);
} else {
layer.msg(res.msg);
}
return false;
}
});
}
} else {
$('#sku-table').parent().parent().addClass('layui-hide');
$('#sku-table thead').html('');
$('#sku-table tbody').html('');
$('input[name=spec]').val('');
}
}
/**
* 初始化sku表
*/
createSkuTable();
/**
* 监听sku表变化
*/
form.on('checkbox(filter)', function (data) {
createSkuTable();
});
/**
* 监听批量赋值
*/
$(document).on('click', '#sku-table thead tr th i', function () {
var that = this;
layer.prompt(function (value, index, elem) {
$.each($('#sku-table tbody tr'), function () {
$(this).find('td').eq($(that).parent().index()).children('input').val(value);
});
layer.close(index);
});
});
/**
* 监听表单提交
*/
form.on('submit(submit)', function (data) {
var state = Object.keys(data.field).some(function (item, index, array) {
return item.startsWith('skus');
});
state ? layer.alert(JSON.stringify(data.field), {title: '提交的数据'}) : layer.msg('sku表数据不能为空', {icon: 5, anim: 6});
return false;
});
});
</script>
</body>
</html>
