You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
291 lines
12 KiB
291 lines
12 KiB
<!DOCTYPE html> |
|
<html xmlns:th="http://www.thymeleaf.org" lang="en"> |
|
|
|
<head th:replace="admin/common::header(~{::title},~{},~{})"> |
|
<title>轮播图管理</title> |
|
</head> |
|
|
|
<body> |
|
<th:block th:include="admin/common::nav('banner')"></th:block> |
|
|
|
<div class="container lw-main lw-banner"> |
|
<div class="btn-group" role="group" style="margin-bottom: 20px" aria-label="..."> |
|
<button type="button" style="outline: none;" id="create-banner-btn" class="btn btn-success"><i class="fa fa-plus"></i> |
|
新增 |
|
</button> |
|
<button type="button" style="outline: none;" id="refresh-banner-btn" class="btn btn-primary"><i class="fa fa-refresh"></i> |
|
保存顺序 |
|
</button> |
|
</div> |
|
<table id="data-table" style="user-select: none"></table> |
|
</div> |
|
<!-- 编辑窗口 --> |
|
<div class="modal fade" id="save-window" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> |
|
<div class="modal-dialog" role="document"> |
|
<div class="modal-content"> |
|
<form id="data-form"> |
|
<input type="hidden" name="id"> |
|
<div class="modal-header"> |
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span |
|
aria-hidden="true">×</span></button> |
|
<h4 class="modal-title" id="window-title">Modal Title</h4> |
|
</div> |
|
<div class="modal-body"> |
|
|
|
<div class="form-group"> |
|
<label>标题</label> |
|
<input type="text" name="title" class="form-control" |
|
placeholder="请输入标题..."> |
|
</div> |
|
|
|
<div class="form-group"> |
|
<label>跳转链接</label> |
|
<input type="url" name="link" class="form-control" |
|
placeholder="请输入跳转链接..."> |
|
</div> |
|
|
|
<div class="form-group"> |
|
<label>图片</label> |
|
<br> |
|
<img id="image-show" src="/static/admin/image/default.png" |
|
style="vertical-align: bottom;width: 60%;border: 1px solid #cccccc;" alt=""> |
|
<button type="button" id="my-upload-btn" class="btn btn-success"><i class="fa fa-image"></i>上传图片 |
|
</button> |
|
<input type="file" id="upload-hide" accept="image/jpg,image/jpeg,image/png,image/gif,image/bmp" |
|
style="display: none"> |
|
<input type="hidden" name="cover" required class="form-control" placeholder="请输入图片..."> |
|
</div> |
|
|
|
<div class="form-group"> |
|
<label>顺序</label> |
|
<input type="number" name="ordered" class="form-control" min="0" |
|
placeholder="请输入顺序..."> |
|
</div> |
|
|
|
<div class="form-group"> |
|
<label>描述信息</label> |
|
<input type="text" name="summary" class="form-control" |
|
placeholder="请输入描述信息..."> |
|
</div> |
|
|
|
</div> |
|
<div class="modal-footer"> |
|
<button style="outline: none;" type="button" class="btn btn-default" data-dismiss="modal">关闭</button> |
|
<button style="outline: none;" type="submit" class="btn btn-primary">保存</button> |
|
</div> |
|
</form> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<th:block th:include="admin/common::footer"></th:block> |
|
<script> |
|
$(function () { |
|
// 显示表单所有轮播图数据 |
|
$('#data-table').bootstrapTable({ |
|
url: "/admin/banner/", |
|
columns: [ |
|
{ |
|
title: "序号", |
|
width: 50, |
|
align: 'center', |
|
// 生成自增的序号 |
|
formatter: function (value, row, index) { |
|
return index + 1 |
|
} |
|
}, |
|
{ |
|
title: "标题", |
|
align: "center", |
|
field: "title", |
|
}, |
|
{ |
|
title: "跳转链接", |
|
align: "center", |
|
field: "link", |
|
formatter: value => { |
|
return `<a href="${value}" target="_blank">${value}</a>` |
|
} |
|
}, |
|
{ |
|
title: "图片", |
|
field: "cover", |
|
align: "center", |
|
formatter: value => { |
|
return `<img src="${value}" width="100px" height="100px" />` |
|
} |
|
}, |
|
{ |
|
title: "顺序", |
|
align: "center", |
|
field: "ordered", |
|
formatter: (value, row) => { |
|
return `<input class="form-control sortedBySave" style="width: 60px" type="number" min="0" |
|
data-id="${row.id}" value="${value}">` |
|
} |
|
}, |
|
{ |
|
title: "描述信息", |
|
field: "summary", |
|
align: "center", |
|
}, |
|
{ |
|
field: "id", |
|
title: '操作', |
|
align: "center", |
|
width: 180, |
|
formatter: function (value) { |
|
return `<button type="button" style="outline: none;" data-id="${value}" class="btn btn-info btn-sm banner-edit-btn"><i class="fa fa-edit"></i> 编辑</button> |
|
<button type="button" style="outline: none;" data-id="${value}" class="btn btn-danger btn-sm banner-delete-btn"><i class="fa fa-trash"></i> 删除</button>` |
|
} |
|
} |
|
], |
|
responseHandler: function (res) { |
|
return res.data |
|
} |
|
}) |
|
// 编辑对应轮播图 |
|
$("#data-table").on("click", ".banner-edit-btn", function () { |
|
let id = $(this).data("id") |
|
$.ajax({ |
|
url: "/admin/banner/" + id, |
|
method: 'GET', |
|
dataType: 'json', |
|
success: res => { |
|
if (res.code === 200) { |
|
$("#window-title").text('编辑轮播图') |
|
$("#data-form").initForm(res.data) |
|
$('#image-show').attr('src', res.data.cover) |
|
$('#save-window').modal('show') |
|
} else { |
|
layer.msg(res.message, {icon: 2}) |
|
} |
|
} |
|
|
|
}) |
|
}) |
|
|
|
// 新增轮播图 |
|
$("#create-banner-btn").on("click", function () { |
|
$("#window-title").text('新增轮播图') |
|
// 清空之前表单的数据 |
|
$("#data-form").initForm({id: "", title: "", link: "", cover: "", ordered: "", summary: "",}) |
|
$('#image-show').attr('src', "/static/admin/image/default.png") |
|
$('#save-window').modal('show') |
|
}) |
|
|
|
|
|
// 删除轮播图 |
|
$("#data-table").on("click", ".banner-delete-btn", function () { |
|
let id = $(this).data('id') |
|
let idx = layer.confirm('是否要删除该数据？', { |
|
btn: ['确认', '取消'] //按钮 |
|
}, function () { // 点击确认后删除 |
|
$.ajax({ |
|
url: '/admin/banner/' + id, |
|
method: 'delete', |
|
dataType: 'json', |
|
success: res => { |
|
if (res.code === 200) { |
|
layer.msg("删除成功", {icon: 1, time: 700}) |
|
$('#data-table').bootstrapTable('refresh', {silent: true}) |
|
} else { |
|
layer.msg(res.message, {icon: 2}) |
|
} |
|
} |
|
}) |
|
layer.close(idx); // 关闭提示框 |
|
}) |
|
}) |
|
|
|
// 更新轮播图数据 |
|
$("#data-form").on("submit", function () { |
|
let data = $(this).serialize(); |
|
$.ajax({ |
|
url: "/admin/banner/", |
|
method: "POST", |
|
data: data, |
|
dataType: "json", |
|
success: res => { |
|
if (res.code === 200) { |
|
// 显示成功信息 |
|
layer.msg("保存成功", {icon: 1, time: 600}, function () { |
|
// 关闭模态框 |
|
$('#save-window').modal('hide') |
|
// 重载表格数据 |
|
$('#data-table').bootstrapTable('refresh', {silent: true}) |
|
}) |
|
} else { |
|
layer.msg(res.message, {icon: 2}) |
|
} |
|
} |
|
}) |
|
return false; // 阻止表单的提交行为 |
|
}) |
|
|
|
|
|
// 点击图片上传按钮 |
|
$('#my-upload-btn').on('click', function () { |
|
$('#upload-hide').click(); |
|
}) |
|
|
|
// 实现图片上传 |
|
$('#upload-hide').on('change',function() { |
|
let file = this.files[0]; // 只处理第一张图片 |
|
let fd = new FormData(); |
|
fd.append('file',file); |
|
console.log(file); |
|
$.ajax({ |
|
url: '/admin/upload', |
|
method: 'POST', |
|
data: fd, |
|
dataType: 'json', |
|
processData: false, |
|
contentType: false, |
|
success: res => { |
|
if (res.code === 200) { |
|
console.log(res.data); |
|
// 设置图片路径 |
|
$('#image-show').attr('src', res.data); |
|
$('#data-form [name=cover]').val(res.data); |
|
layer.msg("图片上传成功", {icon: 1, time: 600}); |
|
}else { |
|
// 文件上传失败 |
|
layer.msg(res.message, {icon: 2}); |
|
} |
|
} |
|
}) |
|
}); |
|
|
|
// 实现按照ordered排序 |
|
$('#refresh-banner-btn').on('click', function () { |
|
console.log("id----ordered") |
|
// 返回数据的格式,依次获得所有表格项的id和顺序值并组成下面的格式 |
|
// id1----顺序1;id2----顺序2;id3----顺序13 |
|
let ids = "" |
|
$('#data-table .sortedBySave').each((index, ele) => ids += $(ele).data('id') + "----" + $(ele).val() + ";") |
|
console.log(ids); |
|
$.ajax({ |
|
url: "/admin/banner/order", |
|
method: "POST", |
|
data: { |
|
ids: ids |
|
}, |
|
dataType: "json", |
|
success: res => { |
|
if (res.code === 200) { |
|
layer.msg("保存成功", {icon: 1, time: 600}, function () { |
|
$('#data-table').bootstrapTable('refresh', {silent: true}) |
|
}); |
|
} else { |
|
layer.msg(res.message, {icon: 2}); |
|
} |
|
} |
|
}) |
|
}) |
|
|
|
}) |
|
</script> |
|
</body> |
|
|
|
</html> |