月度形象图管理
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>月度形象图管理</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" th:href="@{/static/css/bootstrap.min.css}">
<script th:src="@{/static/js/jquery-3.5.1.min.js}"></script>
<script th:src="@{/static/js/layer/layer.js}"></script>
<script src="/static/js/bootbox.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
</head>
<body class="bg-gray data-scroll">
<div class="container-fluid">
<form name="searchForm" class="form-inline" action="#" method="get" th:object="${page}">
<div class="col-md-3 col-sm-3 form-group has-feedback">
<span class="glyphicon glyphicon-indent-left form-control-feedback left" aria-hidden="true"></span>
<label>项目:</label>
<select id="heard" class="form-control has-feedback-left" th:field="*{projectId}" onchange="query()">
<option value="" disabled selected hidden>选择项目</option>
<option th:each="p:${projectList}" th:value="${p.projectId}" th:text="${p.projectName}">Press</option>
</select>
</div>
<pre><code> <button type="button" class="btn btn-info mr-1" onclick="query()">搜索</button>
<button type="button" class="btn btn-info" onclick="clean()">清空</button>
</form>
<div style="width:100%; overflow:auto;" class="table-box">
<button class="btn btn-info mb-1" type="button" onclick="addpage()"><i class="bi bi-plus-lg"></i> 添加主题</button>
<table class="table table-sm table-bordered table-hover">
<thead>
<tr style="white-space: nowrap;">
<th>序号</th>
<th>
<input type="checkbox" onclick="selectAll(this.checked)">
</th>
<th>月度形象图主键</th>
<th>月度形象图详情主键</th>
<th>项目名</th>
<th>主题</th>
<th>详情</th>
<th>效果图</th>
<th>现场图上传时间</th>
<th>现场图</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr th:each="t,i:${list}">
<td th:text="${i.count}">1</td>
<td>
<input type="checkbox" name="ids" th:value="${t.imageId}">
</td>
<td th:text="${t.imageId}">月度形象图主键</td>
<td th:text="${t.imageDetailId}">月度形象图详情主键</td>
<td th:text="${t.projectName}">项目名</td>
<td th:text="${t.imageTitle}">主题</td>
<td th:text="${t.imageDatil}">详情</td>
<td>
<img th:src="${t.effectSrc}" alt="无效果图" style="width: 50px;height: 50px;" onclick="showImage(this.src)">
</td>
<td th:text="${#dates.format(t.imageDetailDate,'yyyy年M月')}">上传时间</td>
<td>
<img th:src="${t.imageDetailPic}" alt="无现场图" style="width: 50px;height: 50px;" onclick="showImage(this.src)">
<button class="btn btn-info mb-1" type="button" th:onclick="addXCT([[${t.imageId}]])"><i class="bi bi-plus-lg"></i> 添加现场图</button>
<button class="btn btn-warning mb-1" type="button" th:onclick="javascript:editXCT([[${t.imageId}]],[[${t.imageDetailId}]])"><i class="bi bi-plus-lg"></i> 修改现场图</button>
<button class="btn btn-danger mb-1" type="button" th:onclick="deleteDetailImage([[${t.imageDetailId}]])"><i class="bi bi-trash"></i> 删除现场图</button>
</td>
<td style="width: 110px;white-space: nowrap;">
<button th:onclick="editpage([[${t.imageId}]])" class="btn btn-info btn-sm" type="button"><i
class="bi bi-pencil-square"></i> 修改
</button>
<button class="btn btn-danger mb-1" type="button" name="delId" th:onclick="del([[${t.imageId}]])"><i class="bi bi-trash"></i> 删除</button>
</td>
</tr>
</tbody>
</table>
<!-- 分页标签 -->
</div>
<!-- 图片放大弹窗框架 -->
<div id="imageModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-xl" role="document">
<div class="modal-content">
<div class="modal-body">
<img id="modalImage" class="img-fluid" alt="放大图" style="width: 100%;">
</div>
</div>
</div>
</div>
</code></pre>
</div>
</body>
<script type="text/javascript">
<pre><code>$(document).ready(function(){
// 默认查询下拉框的第一个项目
query();
});
function addXCT(id){
location.href = '/monthlyImage/addXCT?id='+id;
}
// 应该传2个参?
function editXCT(imageId,imageDetailId){
console.log(imageId)
console.log(imageDetailId)
// return;
location.href = '/monthlyImage/editXCT?imageId='+imageId+'&imageDetailId='+imageDetailId;
}
// 显示被点击的图片放大图
function showImage(src) {
$('#modalImage').attr('src', src); // 设置弹窗中图片的 src 属性
$('#imageModal').modal('show'); // 显示弹窗
}
function query() {
document.searchForm.action = '/monthlyImage/query';
document.searchForm.submit();
}
function clean() {
$("form[name='searchForm'] input").val("");
query();
}
function selectAll(checked){
$("[name='ids']").prop("checked", checked);
}
function addpage() {
location.href = '/monthlyImage/addpage'
}
function editpage(id) {
location.href = '/monthlyImage/editpage?id=' + id;
}
function del(id) {
layer.confirm('确定要删除吗?', function (index) {
layer.close(index);
$.ajax({
type: 'delete',
url: '/monthlyImage/delete?id='+id,
data: {'id': id},
dataType: 'json',
beforeSend: function () {
layer.load();
},
success: function (result) {
location.reload();
if (result.success) {
location.reload();
} else {
layer.alert(result.msg);
}
},
error: function () {
layer.alert("请求失败");
},
complete: function () {
layer.closeAll("loading");
}
});
});
}
function deleteDetailImage(id){
console.log(id);
layer.confirm('确定要删除吗?', function (index) {
layer.close(index);
$.ajax({
type: 'delete',
url: '/monthlyImage/deleteDetailImage?id='+id,
data: {'id': id},
dataType: 'json',
beforeSend: function () {
layer.load();
},
success: function (result) {
location.reload();
if (result.success) {
location.reload();
} else {
layer.alert(result.msg);
}
},
error: function () {
layer.alert("请求失败");
},
complete: function () {
layer.closeAll("loading");
}
});
});
}
</code></pre>
</script>
</html>
原文地址: http://www.cveoy.top/t/topic/GEg 著作权归作者所有。请勿转载和采集!