260 lines
10 KiB
HTML
260 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>编辑页面</title>
|
|
<link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css">
|
|
<style>
|
|
.time-group {
|
|
margin-bottom: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.time-input {
|
|
width: 400px;
|
|
}
|
|
.upload-box {
|
|
margin-top: 15px;
|
|
}
|
|
.date-range-input {
|
|
width: 400px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="layui-container" style="margin-top: 15px;">
|
|
<form class="layui-form" id="dataForm">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header">编辑</div>
|
|
<div class="layui-card-body">
|
|
<!-- 是否开启 -->
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">有效开关：</label>
|
|
<div class="layui-input-block">
|
|
<input type="checkbox" name="switch" lay-skin="switch" lay-text="开|关" value="1">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 日期有效期 -->
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">有效期：</label>
|
|
<div class="layui-input-block">
|
|
<input type="text" class="layui-input date-range-input" name="dateRange" id="dateRange" placeholder="请选择日期范围">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 展示 -->
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">展示：</label>
|
|
<div class="layui-input-block" style="display: flex; align-items: center;">
|
|
<input type="text" class="layui-input time-input" name="showTime" id="showTime" placeholder="选择时间范围">
|
|
<button type="button" class="layui-btn layui-btn-primary" style="margin-left: 10px;">
|
|
<i class="layui-icon layui-icon-add-1"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 特定时间 -->
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">特定时间：</label>
|
|
<div class="layui-input-block" id="timeContainer">
|
|
<!-- 时间组将被动态添加到这里 -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 文件上传 -->
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">上传文件：</label>
|
|
<div class="layui-input-block">
|
|
<div class="layui-upload">
|
|
<button type="button" class="layui-btn" id="uploadBtn">
|
|
<i class="layui-icon layui-icon-upload"></i> 选择文件
|
|
</button>
|
|
<div class="layui-upload-list">
|
|
<p id="uploadFileName"></p>
|
|
</div>
|
|
<input type="hidden" name="fileUrl" id="fileUrl">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 按钮组 -->
|
|
<div class="layui-form-item">
|
|
<div class="layui-input-block">
|
|
<button type="submit" class="layui-btn" lay-submit lay-filter="saveForm">保存</button>
|
|
<button type="button" class="layui-btn layui-btn-primary">关闭</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<script src="https://www.layuicdn.com/layui/layui.js"></script>
|
|
<script>
|
|
layui.use(['form', 'laydate', 'upload', 'table', 'layer'], function(){
|
|
var form = layui.form;
|
|
var laydate = layui.laydate;
|
|
var upload = layui.upload;
|
|
var table = layui.table;
|
|
var layer = layui.layer;
|
|
var $ = layui.$;
|
|
|
|
// 初始化日期范围选择器
|
|
laydate.render({
|
|
elem: '#dateRange',
|
|
type: 'date',
|
|
range: true,
|
|
trigger: 'click'
|
|
});
|
|
|
|
// 文件上传
|
|
upload.render({
|
|
elem: '#uploadBtn',
|
|
url: '/api/upload', // 设置上传接口
|
|
accept: 'file',
|
|
done: function(res){
|
|
if(res.code === 0){
|
|
layer.msg('上传成功');
|
|
$('#uploadFileName').html('已上传文件: ' + res.data.fileName);
|
|
$('#fileUrl').val(res.data.fileUrl);
|
|
} else {
|
|
layer.msg('上传失败：' + res.msg);
|
|
}
|
|
},
|
|
error: function(){
|
|
layer.msg('上传失败');
|
|
}
|
|
});
|
|
|
|
// 初始化展示时间选择器
|
|
laydate.render({
|
|
elem: '#showTime',
|
|
type: 'time',
|
|
range: true
|
|
});
|
|
|
|
// 生成唯一ID
|
|
function generateUniqueId() {
|
|
return 'date_' + Date.now() + '_' + Math.floor(Math.random() * 1000);
|
|
}
|
|
|
|
// 创建新的时间组
|
|
function createTimeGroup() {
|
|
var id = generateUniqueId();
|
|
var html = `
|
|
<div class="time-group" id="group_${id}">
|
|
<input type="text" class="layui-input time-input" name="timeRanges[]" id="${id}" placeholder="选择时间范围">
|
|
<button type="button" class="layui-btn layui-btn-primary add-btn" style="margin-left: 10px;">
|
|
<i class="layui-icon layui-icon-add-1"></i>
|
|
</button>
|
|
<button type="button" class="layui-btn layui-btn-danger delete-btn" style="margin-left: 10px;">删除</button>
|
|
</div>
|
|
`;
|
|
$('#timeContainer').append(html);
|
|
|
|
laydate.render({
|
|
elem: '#' + id,
|
|
type: 'time',
|
|
range: true
|
|
});
|
|
|
|
return id;
|
|
}
|
|
|
|
// 添加初始时间组
|
|
createTimeGroup();
|
|
|
|
// 绑定添加按钮事件
|
|
$(document).on('click', '.add-btn', function() {
|
|
createTimeGroup();
|
|
});
|
|
|
|
// 绑定删除按钮事件
|
|
$(document).on('click', '.delete-btn', function() {
|
|
var groupDiv = $(this).closest('.time-group');
|
|
if ($('.time-group').length > 1) {
|
|
groupDiv.remove();
|
|
}
|
|
});
|
|
|
|
// 表单提交处理
|
|
form.on('submit(saveForm)', function(data) {
|
|
// 收集表单数据
|
|
var formData = {
|
|
enabled: data.field.switch === "1",
|
|
dateRange: data.field.dateRange,
|
|
showTime: data.field.showTime,
|
|
timeRanges: [],
|
|
fileUrl: data.field.fileUrl
|
|
};
|
|
|
|
// 收集所有时间范围
|
|
$('.time-group input').each(function() {
|
|
var value = $(this).val();
|
|
if (value) {
|
|
formData.timeRanges.push(value);
|
|
}
|
|
});
|
|
|
|
// 显示加载层
|
|
var loadIndex = layer.load(1);
|
|
alert(JSON.stringify(formData))
|
|
// 发送Ajax请求
|
|
$.ajax({
|
|
url: '/api/save',
|
|
type: 'POST',
|
|
contentType: 'application/json',
|
|
data: JSON.stringify(formData),
|
|
success: function(res) {
|
|
layer.close(loadIndex);
|
|
if (res.code === 0) {
|
|
layer.msg('保存成功', {icon: 1}, function() {
|
|
// 显示数据预览表格
|
|
showPreviewTable(formData);
|
|
});
|
|
} else {
|
|
layer.msg('保存失败：' + res.msg, {icon: 2});
|
|
}
|
|
},
|
|
error: function(xhr) {
|
|
layer.close(loadIndex);
|
|
layer.msg('保存失败：' + xhr.statusText, {icon: 2});
|
|
}
|
|
});
|
|
|
|
return false; // 阻止表单默认提交
|
|
});
|
|
|
|
// 显示预览表格
|
|
function showPreviewTable(data) {
|
|
layer.open({
|
|
type: 1,
|
|
title: '数据预览',
|
|
area: ['800px', '500px'],
|
|
content: '<div id="previewTable"></div>',
|
|
success: function(){
|
|
table.render({
|
|
elem: '#previewTable',
|
|
cols: [[
|
|
{field: 'index', title: '序号', width: 80},
|
|
{field: 'dateRange', title: '有效期', width: 200},
|
|
{field: 'timeRange', title: '时间范围', width: 200},
|
|
{field: 'status', title: '状态', width: 100}
|
|
]],
|
|
data: data.timeRanges.map((time, index) => {
|
|
return {
|
|
index: index + 1,
|
|
dateRange: data.dateRange,
|
|
timeRange: time,
|
|
status: data.enabled ? '有效' : '无效'
|
|
}
|
|
})
|
|
});
|
|
}
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |