master

分支 (1)

管理

管理

master

layui-sku-template
/
sku.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link href="layui/css/layui.css" rel="stylesheet" />
	</head>
	<style>
		#sku-table .layui-table-cell,
		.sku-table-term .layui-table-cell,
		#unitary-table .layui-table-cell {
			height: unset;
		}

		.sku-table-term .layui-table-cell {
			display: flex;
			flex-wrap: wrap;
		}

		#sku-table .layui-upload-drag {
			padding: 5px;
			background-size: cover;
			background-position: center;
			width: 40px;
			height: 40px;
		}

		#sku-table .layui-upload-drag image {
			padding: 5px;
		}

		#sku-table .layui-upload-drag .layui-icon {
			font-size: 25px;
		}

		.sku-term-detail-add {
			margin: 1px 0;
		}
	</style>
	<body>
		<div class="layui-container">
			<form class="layui-form" action="">
				<div class="layui-form-item">
					<label class="layui-form-label">规格选项</label>
					<div class="layui-input-block">
						<input type="radio" name="flag" value="0" title="单规格" lay-filter="skuFlag">
						<input type="radio" name="flag" value="1" title="多规格" lay-filter="skuFlag" checked="">
					</div>
				</div>
				<div class="layui-form-item sku-unitary layui-hide">
					<label class="layui-form-label"> </label>
					<div class="layui-input-block">
						<div id="unitary-table">
							<table class="layui-hide" id="sku-table-unitary" lay-filter="sku-table-unitary"></table>
						</div>
					</div>
				</div>
				<div class="layui-form-item sku-various">
					<label class="layui-form-label">规格项</label>
					<div class="layui-input-block sku-table-term">
						<div class="layui-btn-container" id="gift-list-toolbar">
							<button type="button" class="layui-btn layui-btn-sm layui-btn-normal"
								lay-event="addSku">新增</button>
						</div>
						<table class="layui-hide" id="sku-table-term" lay-filter="sku-table-term"></table>
					</div>
				</div>
				<div class="layui-form-item sku-various">
					<label class="layui-form-label">规格明细</label>
					<div class="layui-input-block">
						<div id="sku-table">
							<table class="layui-hide" id="sku-table-demo" lay-filter="sku-table-demo"></table>
						</div>
					</div>
				</div>
			</form>
			<button type="button" class="layui-btn sku-various" lay-event="getTable">提交</button>
			<button type="button" class="layui-btn sku-various" lay-event="show">回显</button>
			<button type="button" class="layui-btn sku-various" lay-event="showProduct">商品页选择</button>
		</div>
	</body>
	<script src="layui/layui.js"></script>
	<script>
		var termArray = [{
			sid: 1,
			lable: '尺码'
		}, {
			sid: 23,
			lable: '颜色'
		}, {
			sid: 25,
			lable: '款式'
		}];

		let termDetailArray = [
			['X', 'XX', 'M', 'XL'],
			['白', '黑', '蓝', '紫色'],
			['2020款', '2021款', '2022款'],
		];
		let cols = [ //标题栏
			{
				checkbox: true,
				hide: true
			}, {
				field: 'image',
				title: '图片',
				width: 80,
				templet: function(d) {
					if (d.image) {
						return '<div class="layui-upload-drag" id="test-' + d.LAY_TABLE_INDEX + '" data-index="' + d
							.LAY_TABLE_INDEX + '" style="background-image: url(' + d.image + ')"></div>';
					}
					return '<div class="layui-upload-drag" id="test-' + d.LAY_TABLE_INDEX + '" data-index="' + d
						.LAY_TABLE_INDEX + '"><i class="layui-icon"></i></div>';
				},
			}, {
				field: 'curPrice',
				title: '销售价(元) ',
				templet: '<div><input type="number" name="curPrice" lay-verify="required" autocomplete="off" class="layui-input" value="{{d.curPrice}}" data-index="{{d.LAY_TABLE_INDEX}}"></div>',
			}, {
				field: 'marketPrice',
				title: '市场价(元) ',
				templet: '<div><input type="number" name="marketPrice" lay-verify="required" autocomplete="off" class="layui-input" value="{{d.marketPrice}}" data-index="{{d.LAY_TABLE_INDEX}}"></div>',
			}, {
				field: 'costPrice',
				title: '成本价(元) ',
				templet: '<div><input type="number" name="costPrice" lay-verify="required" autocomplete="off" class="layui-input" value="{{d.costPrice}}" data-index="{{d.LAY_TABLE_INDEX}}"></div>',
			}, {
				field: 'stock',
				title: '库存 ',
				templet: '<div><input type="number" name="stock" lay-verify="required" autocomplete="off" class="layui-input" value="{{d.stock}}" data-index="{{d.LAY_TABLE_INDEX}}"></div>',
			}
		];
		let unitaryCols = [{
				checkbox: true,
				hide: true
			},
			{
				field: 'curPrice',
				title: '销售价(元) ',
				templet: '<div><input type="number" name="curPrice" lay-verify="required" autocomplete="off" class="layui-input" value="{{d.curPrice}}" data-index="{{d.LAY_TABLE_INDEX}}"></div>',
			}, {
				field: 'marketPrice',
				title: '市场价(元) ',
				templet: '<div><input type="number" name="marketPrice" lay-verify="required" autocomplete="off" class="layui-input" value="{{d.marketPrice}}" data-index="{{d.LAY_TABLE_INDEX}}"></div>',
			}, {
				field: 'costPrice',
				title: '成本价(元) ',
				templet: '<div><input type="number" name="costPrice" lay-verify="required" autocomplete="off" class="layui-input" value="{{d.costPrice}}" data-index="{{d.LAY_TABLE_INDEX}}"></div>',
			}, {
				field: 'stock',
				title: '库存 ',
				templet: '<div><input type="number" name="stock" lay-verify="required" autocomplete="off" class="layui-input" value="{{d.stock}}" data-index="{{d.LAY_TABLE_INDEX}}"></div>',
			}
		]
		//综合规格详情
		function cartesianProductOf() {
			return Array.prototype.reduce.call(arguments, function(a, b) {
				var ret = [];
				a.forEach(function(a) {
					b.forEach(function(b) {
						ret.push(a.concat([b]));
					});
				});
				return ret;
			}, [
				[]
			]);
		}

		/**
		 * @param {Object} arr 综合数据
		 * @param {Object} skuTypeArr 规格大类数组
		 */
		function cartesianTableDataOf(arr, skuTypeArr) {
			var arrY = [];
			for (var j = 0; j < arr.length; j++) {
				var obj = arr[j];
				var objX = {
					curPrice: 0,
					marketPrice: 0,
					costPrice: 0,
					stock: 0,
					"LAY_CHECKED": true
				};
				for (var i = 0; i < skuTypeArr.length; i++) {
					var id = skuTypeArr[i].sid;
					objX[id] = obj[i]
				}
				arrY.push(objX)
			}
			return arrY;
		}

		layui.use(['table', 'dropdown'], function() {
			var table = layui.table,
				$ = layui.$,
				upload = layui.upload,
				form = layui.form,
				util = layui.util,
				layer = layui.layer;

			//初始化
			renderSkuItemTable();
			//初始化明细
			renderSkuDetailTable();

			form.on('radio(skuFlag)', function(data) {
				//console.log(data.elem); //得到radio原始DOM对象
				//console.log(data.value); //被点击的radio的value值
				if (data.value == 1) {
					$(".sku-various").removeClass("layui-hide")
					$(".sku-unitary").addClass("layui-hide")


				} else {
					$(".sku-various").addClass("layui-hide");
					$(".sku-unitary").removeClass("layui-hide")
					renderUnitaryTable();
				}
			});

			//单一规格
			function renderUnitaryTable() {
				//规格单项渲染
				table.render({
					elem: '#sku-table-unitary',
					page: false,
					limit: Number.MAX_VALUE, // 数据表格默认全部显示
					data: [{
						curPrice:0,
						marketPrice:0,
						costPrice:0,
						stock:0
					}],
					cols: [unitaryCols],
					done: function(res, curr, count) {

					}
				});

			}


			function renderSkuItemTable() {
				var arrZ = [];
				for (var j = 0; j < termArray.length; j++) {
					var obj = termArray[j];
					obj.detail = termDetailArray[j]
					arrZ.push(obj)
				}

				//规格单项渲染
				table.render({
					elem: '#sku-table-term',
					page: false,
					limit: Number.MAX_VALUE, // 数据表格默认全部显示
					data: arrZ,
					cols: [
						[{
								field: 'lable',
								title: '规格名',
								width: 80,
							},
							{
								field: 'detail',
								title: '规格值',
								templet: function(d) {
									var x = [];
									console.log(d)
									for (var i = 0; i < d.detail.length; i++) {
										var y = d.detail[i];
										x.push('<div class="layui-unselect layui-form-checkbox layui-form-checked sku-term-detail-li" style="margin-right: 10px;"><span>' +
											y +
											'</span><i class="layui-icon layui-icon-delete " style="color:#ffb800;" data-index="' +
											d.LAY_TABLE_INDEX + '" data-idx="' + i +
											'" data-type="delSkuDetail"></i></div> '
										)
									}
									x.push(
										'<button type="button" class="layui-btn layui-btn-xs layui-btn-normal sku-term-detail-add" data-index="' +
										d.LAY_TABLE_INDEX +
										'" data-type="addSkuDetail"><i class="layui-icon layui-icon-addition"></i> 新增规格值</button>'
									)
									return x.join(" ")
								}
							},
							{
								field: 'lable',
								title: '操作',
								width: 100,
								templet: '<div><button type="button" class="layui-btn layui-btn-xs layui-btn-danger sku-term-del" data-index="{{d.LAY_TABLE_INDEX}}" data-type="delSku"><i class="layui-icon layui-icon-delete"></i>删除</button></div>'
							},
						]
					],
					done: function(res, curr, count) {
						$('.layui-table-cell').on('click', '.sku-term-detail-add', function() {
							var type = $(this).data('type');
							active[type] ? active[type].call(this) : '';
						});
						$('.layui-table-cell').on('click', '.sku-term-del', function() {
							var type = $(this).data('type');
							active[type] ? active[type].call(this) : '';
						});
						$('.sku-term-detail-li').on('click', '.layui-icon', function() {
							var type = $(this).data('type');
							active[type] ? active[type].call(this) : '';
						});

					}
				});
			}

			//初始化规格明细表
			function renderSkuDetailTable() {

				let arrX = cartesianProductOf(...termDetailArray);
				let arrY = cartesianTableDataOf(arrX, termArray);

				var colsForTable = [];
				for (var i = 0; i < cols.length; i++) {
					colsForTable.push(cols[i]);
				}
				for (var i = termArray.length - 1; i >= 0; i--) {
					var z = termArray[i]
					colsForTable.splice(1, 0, {
						field: z.sid,
						title: z.lable,
						width: 80,
						rowspan: 10
					})
				}
				if (termArray.length == 0) {
					arrY = [];
				}
				//规格明细渲染：
				table.render({
					elem: '#sku-table-demo',
					page: false,
					limit: Number.MAX_VALUE, // 数据表格默认全部显示
					data: arrY,
					cols: [colsForTable],
					done: function(res, curr, count) {
						//如果是异步请求数据方式，res即为你接口返回的信息。
						//如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
						console.log(res);
						//得到当前页码
						console.log(curr);
						//得到数据总量
						console.log(count);
						//合并单元格
						merge(res);
						//上传事件
						for (var i = 0; i < count; i++) {
							upload.render({
								elem: '#test-' + i,
								url: 'https://httpbin.org/post', //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
								before: function(obj) { //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
									layer.load(1); //上传loading
								},
								done: function(res2, index, upload) {
									console.log(res2)
									console.log(this)
									layer.msg('上传成功', res2);
									var index = this.elem[0].dataset.index;
									//$(this.elem).css('background-image', 'url(' + res2.files.file + ')');
									//$(this.elem).children('.layui-icon').addClass('layui-hide')
									console.log(res, index);
									var tableData = res.data[index];
									console.log(tableData)
									tableData.image = res2.files.file;
									table.reload("sku-table-demo", {
										data: res.data
									}, false);
									layer.closeAll('loading'); //关闭loading
								},
								error: function(index, upload) {
									layer.closeAll('loading'); //关闭loading
								}
							});
						}
						//输入框输入
						$("#sku-table .layui-table-cell").on("change", '.layui-input', function(obj) {
							//console.log('改变数值', obj)
							var index = obj.currentTarget.dataset.index;
							var arr = res.data; //
							arr[index][obj.currentTarget.name] = obj.currentTarget.value;
							table.reload("sku-table-demo", {
								data: arr
							});
							form.render();
						})
					}
				});
			}

			//合并单元格
			function merge(res) {
				var skuRowspanArr = [];
				termDetailArray.forEach(function(v, i, a) {
					var num = 1,
						index = i;
					while (index < a.length - 1) {
						num *= a[index + 1].length;
						index++;
					}
					skuRowspanArr.push(num);
				});
				var trArr = $("#sku-table .layui-table-body>.layui-table").find("tr"); //所有行
				var zIndex = termDetailArray.length;
				for (var i = 0; i < trArr.length; i++) {
					var tr = trArr.eq(i);
					for (var j = 1; j <= zIndex; j++) {
						var td = tr.find("td").eq(j);
						if (i % skuRowspanArr[j - 1] == 0) {
							td.each(function() { //当前行隐藏
								$(this).attr("rowspan", skuRowspanArr[j - 1]);
							});
						} else {
							td.each(function() { //当前行隐藏
								$(this).css("display", "none");
							});
						}
					}
				}
			}

			//处理属性 为 lay-active 的所有元素事件
			util.event('lay-event', {
				addSku: function() {
					layer.prompt({
						formType: 0,
						value: '',
						title: '规格',
						area: ['600px', '350px'] //自定义文本域宽高
					}, function(value, index, elem) {
						try {
							for (var i = 0; i < termArray.length; i++) {
								if (termArray[i].lable == value) {
									throw value + ",已存在"
								}
							}
							var lastId = termArray[termArray.length - 1].sid;
							termArray.push({
								sid: lastId + 1,
								lable: value,
								detail: [],
							})
							table.reload("sku-table-term", {
								data: termArray
							});
							layer.close(index);
						} catch (e) {
							console.log(e)
							layer.msg(e.message ? e.message : e);
						}

					});
				},
				getTable: function() {
					var skuArray = table.checkStatus("sku-table-demo").data;
					layer.confirm('确定提交吗?', {
						icon: 3,
						title: '提示'
					}, function(index) {
						//do something
						$.ajax({
							url: 'http://127.0.0.1:82/sku/add',
							type: "post",
							data: {
								termArray: JSON.stringify(termArray),
								skuArray: JSON.stringify(skuArray)
							},
							async: true,
							success: function(res) {

								layer.msg("提交成功");
							}
						});
					});

				},
				show: function() {
					layer.open({
						type: 2,
						content: './sku-show.html',
						area: ['80%', '80%']
					});
				},
				showProduct() {
					layer.open({
						type: 2,
						content: './sku-product.html',
						area: ['80%', '80%']
					});
				}
			});
			//点击事件
			var active = {
				addSkuDetail: function() {
					var xIndex = $(this).data('index');
					console.log(termArray, xIndex)
					layer.prompt({
						formType: 0,
						value: '',
						title: '规格值',
						area: ['600px', '350px'] //自定义文本域宽高
					}, function(value, index, elem) {
						try {
							var zArray = termArray[xIndex].detail;
							console.log('zArray=>', zArray)
							for (var i = 0; i < termArray.length; i++) {
								if (termArray[i].lable == value) {
									throw value + ",已存在"
								}
								if (termArray[i].detail) {
									for (var j = 0; j < termArray[i].detail.length; j++) {
										if (termArray[i].detail[j] == value) {
											throw value + ",已存在"
										}
									}
								}
							}
							zArray.push(value);
							reloadItemDetailTable();
							reloadSkuDetailTable();
							layer.close(index);
						} catch (e) {
							console.log(e)
							layer.msg(e.message ? e.message : e);
						}
					});
				},
				delSkuDetail: function() {
					var xIndex = $(this).data('index');
					var yIndex = $(this).data('idx');
					console.log(termArray, xIndex, yIndex)
					layer.confirm('确定删除此规格?', {
						icon: 3,
						title: '提示'
					}, function(index) {
						//do something
						var zArray = termArray[xIndex].detail;
						zArray.splice(yIndex, 1);
						reloadItemDetailTable();
						reloadSkuDetailTable();
						layer.close(index);
					});
				},
				delSku: function() {
					var xIndex = $(this).data('index');
					layer.confirm('确定删除此规格?', {
						icon: 3,
						title: '提示'
					}, function(index) {
						//do something
						termArray.splice(xIndex, 1);
						reloadItemDetailTable();
						reloadSkuDetailTable();
						layer.close(index);
					});
				}
			}

			function reloadItemDetailTable() {
				table.reload("sku-table-term", {
					data: termArray
				});
			}

			function reloadSkuDetailTable() {
				var termDetailArrayX = [];
				for (var i = 0; i < termArray.length; i++) {
					if (termArray[i].detail.length > 0) {
						termDetailArrayX.push(termArray[i].detail);
					}
				}
				termDetailArray = termDetailArrayX;
				let arrXX = cartesianProductOf(...termDetailArrayX);
				let arrYY = cartesianTableDataOf(arrXX, termArray);

				//同步已有数据
				var oldData = table.checkStatus("sku-table-demo").data;
				var oldSidArray = [];
				for (var i = 0; i < termArray.length; i++) {
					var z = termArray[i]
					oldSidArray.push(z.sid);
				}
				var oldPriceObj = {};
				for (var i = 0; i < oldData.length; i++) {
					var x = oldData[i]
					var xArray = [];
					for (var j = 0; j < oldSidArray.length; j++) {
						xArray.push(x[oldSidArray[j]]);
					}
					oldPriceObj[xArray.join(",")] = x;
				}
				var newData = [];
				for (var i = 0; i < arrYY.length; i++) {
					var x = arrYY[i]
					var xArray = [];
					for (var j = 0; j < oldSidArray.length; j++) {
						if (x[oldSidArray[j]]) {
							xArray.push(x[oldSidArray[j]]);
						}
					}
					if (oldPriceObj[xArray.join(",")]) {
						var o = JSON.parse(JSON.stringify(oldPriceObj[xArray.join(",")]));
						for (var j = 0; j < oldSidArray.length; j++) {
							delete o[oldSidArray[j]];
						}
						x = Object.assign({}, x, o);
					}
					newData.push(x);
				}

				var colsForTable = [];
				for (var i = 0; i < cols.length; i++) {
					colsForTable.push(cols[i])
				}
				for (var i = termArray.length - 1; i >= 0; i--) {
					var z = termArray[i]
					colsForTable.splice(1, 0, {
						field: z.sid,
						title: z.lable,
						width: 80,
						rowspan: 10
					})
				}
				if (termArray.length == 0) {
					arrY = [];
				}
				table.reload("sku-table-demo", {
					data: newData,
					cols: [colsForTable]
				}, false);
			}
		})
	</script>
</html>