<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>后台管理系统</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="shortcut icon" th:href="@{/images/logo.jpg}"/>
<link rel="stylesheet" th:href="@{/js/layui/css/layui.css}">
<link rel="stylesheet" th:href="@{/js/layui/css/admin.css}">
<link rel="stylesheet" th:href="@{/js/upload_img/css/index.css}">
<script type="text/javascript" th:src="@{/js/jquery-3.3.1.min.js}"></script>
<script th:src="@{/js/layui/layui.js}" charset="utf-8"></script>
<style>
img {
width: 190px;
height: 100px;
}
</style>
</head>
<body>
<div class="layui-form" style="padding: 20px 0 0 0;">
<form id="formId" onsubmit="return false;">
<div class="layui-form-item">
<label class="layui-form-label">
<button type="button" id="fat-add" class="layui-btn layui-btn-sm">添加规格<i class="layui-icon"></i>
</button>
</label>
<label class="layui-form-label">
<button type="button" id="fat-del" class="layui-btn layui-btn-sm">删除规格<i class="layui-icon"></i>
</button>
</label>
</div>
<div id="obj">
<div th:each="list,index:${goodsSpecList}" th:id="'spec'+${index.count}">
<div style="float: left">
<input name="goodsSpecId" th:value="${list.goodsSpecId}" type="hidden">
<div class="layui-form-item">
<label class="layui-form-label"><span style="color: red">*</span>规格名称</label>
<div class="layui-input-inline">
<input type="text" class="layui-input number" th:value="${list.goodsSpecName}"
name="goodsSpecName">
</div>
</div>
<!-- <div class="layui-form-item">-->
<!-- <label class="layui-form-label"><span style="color: red">*</span>库存数量</label>-->
<!-- <div class="layui-input-inline">-->
<!-- <input type="text" class="layui-input" name="goodsSpecStock"-->
<!-- th:value="${list.goodsSpecStock}">-->
<!-- </div>-->
<!-- </div>-->
<div class="layui-form-item">
<label class="layui-form-label"><span style="color: red">*</span>价格/天</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" name="goodsPrice" th:value="${list.goodsPrice}">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label"><span style="color: red">*</span>押金</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" name="deposit" th:value="${list.deposit}">
</div>
</div>
</div>
<div class="layui-form">
<label class="layui-form-label"><span style="color: red"></span>图片</label>
<input th:id="'file'+${index.index}" type="file" name="goodsSpecImg"
onchange="xmTanUploadImg(this,this.id)"
accept="image/*"
style='display: none'>
<div class="Img-div" th:onclick="'chioceImage('+${index.index}+')'">
<img th:id="'file'+${index.index}+'img'" th:src="${list.goodsSpecImg}">
</div>
</div>
<hr style="border: grey solid 1px"/>
<div style="clear: both"></div>
</div>
</div>
<button class="layui-btn" style="display: none;" id="saveBtn" onclick="save()">保存</button>
</form>
</div>
<script>
var n = '[[${number}]]';
var f = true;
layui.use('form', function () {
var form = layui.form;
form.render();
});
$(function () {
$("#fat-del").click(function () {
$('#spec' + n--).remove();
});
$("#fat-add").click(function () {
n++;
var html = '<div id = "spec' + n + '">';
html += '<hr style="border: grey solid 1px"/> <div style="clear: both"></div>\n';
if (f) {
html = '<div id = "spec' + n + '">';
f = false;
}
html +=
' <div th:each="list,index:${goodsSpecList}" th:id="\'spec\'+${index.count}">\n' +
' <div style="float: left">\n' +
'\n' +
' <div class="layui-form-item">\n' +
' <label class="layui-form-label"><span style="color: red">*</span>规格名称</label>\n' +
' <div class="layui-input-inline">\n' +
' <input type="text" class="layui-input number"\n' +
' name="goodsSpecName">\n' +
' </div>\n' +
' </div>\n' +
// ' <div class="layui-form-item">\n' +
// ' <label class="layui-form-label"><span style="color: red">*</span>库存数量</label>\n' +
// ' <div class="layui-input-inline">\n' +
// ' <input type="text" class="layui-input" name="goodsSpecStock"\n' +
// ' th:value="${list.goodsSpecStock}">\n' +
// ' </div>\n' +
// ' </div>\n' +
' <div class="layui-form-item">\n' +
' <label class="layui-form-label"><span style="color: red">*</span>价格/天</label>\n' +
' <div class="layui-input-inline">\n' +
' <input type="text" class="layui-input" name="goodsPrice" th:value="${list.goodsPrice}">\n' +
' </div>\n' +
' </div>\n' +
' <div class="layui-form-item">\n' +
' <label class="layui-form-label"><span style="color: red">*</span>押金</label>\n' +
' <div class="layui-input-inline">\n' +
' <input type="text" class="layui-input" name="deposit" th:value="${list.deposit}">\n' +
' </div>\n' +
' </div>' +
' </div>\n' +
'\n' +
' <div class="layui-form">\n' +
' <label class="layui-form-label"><span style="color: red"></span>图片</label>\n' +
'\n' +
' <input id="file' + (n - 1) + '" type="file" name="goodsSpecImg" onchange="xmTanUploadImg(this,this.id)"\n' +
' accept="image/*"\n' +
' style=\'display: none\'>\n' +
' <div class="Img-div" onclick="chioceImage(' + (n - 1) + ')">\n' +
' <img id="file' + (n - 1) + 'img" src="">\n' +
' </div>\n' +
' </div>\n' +
' </div> </div> '
$('#obj').append(html);
});
// $("#fat-btn").click(function () {
// $('#scpe').append(newSpec);
// });
});
var b = true;
function save() {
for (var i = 0; i < n; i++) {
var goodsSpecName = $($('#obj').find('input[name=goodsSpecName]')[i]).val();
if (!goodsSpecName) {
layer.msg("第" + (i + 1) + "条规格名称不能为空!");
return false;
}
// var goodsSpecStock = $($('#obj').find('input[name=goodsSpecStock]')[i]).val();
// if (!goodsSpecStock) {
// layer.msg("第" + (i + 1) + "条库存数量不能为空!");
// return false;
// }
var goodsPrice = $($('#obj').find('input[name=goodsPrice]')[i]).val();
if (!goodsPrice) {
layer.msg("第" + (i + 1) + "条价格不能为空!");
return false;
}
}
;
if (!b) {
return false;
}
var form = document.querySelector("#formId");
var formdata = new FormData(form);
formdata.append("goodsId", '[[${goodsId}]]');
$.ajax({
url: "updateGoodsSpec",
data: formdata,
type: "POST",
dataType: "json",
processData: false,
contentType: false,
success: function (result) {
b = true;
if (result.code == 100) {
layer.msg(result.msg, {icon: 6, time: 1000}, function () {
closeLayer();
parent.layui.table.reload('tableId');
});
} else {
layer.msg(result.msg, {icon: 5});
}
}
});
}
function closeLayer() {
var index = parent.layer.getFrameIndex(window.name);
//关闭当前frame
parent.layer.close(index);
}
function xmTanUploadImg(obj, id) {
var file = obj.files[0];
var reader = new FileReader();
//读取文件过程方法
reader.onloadstart = function (e) {
console.log("开始读取....");
}
reader.onprogress = function (e) {
console.log("正在读取中....");
}
reader.onabort = function (e) {
console.log("中断读取....");
}
reader.onerror = function (e) {
console.log("读取异常....");
}
reader.onload = function (e) {
console.log("成功读取....");
var img = document.getElementById(id + 'img');
img.src = e.target.result;
}
reader.readAsDataURL(file);
}
function chioceImage(i) {
$('#file' + i).trigger("click");
}
</script>
</body>
</html>