<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head th:include="include :: header">
<meta charset="UTF-8">
</head>
<body class="gray-bg">
<div class="col-sm-3" style="height: 100%;">
<div class="select-info" style="height: 100%;">
<img class="img-circle" th:src="@{/favicon.ico}"/>
<hr style="border-top:1px solid #C2C2C2;">
<div class="col-sm-8">
<h3><strong>[[${user.loginName}]]</strong></h3>
<p><i class="fa fa-user"></i> [[${user.userName}]] / [[${#strings.defaultString(roleGroup,'无角色')}]]
<p><i class="fa fa-phone"></i> [[${user.phoneNumber}]]</p>
<p><i class="fa fa-group"></i> [[${user.dept.deptName}]] / [[${#strings.defaultString(postGroup,'无岗位')}]]</p>
<p><i class="fa fa-transgender"></i> 性别：[[${user.sex}]]</p>
<p><i class="fa fa-envelope-o"></i> [[${user.email}]]</p>
<p><i class="fa fa-calendar"></i> [[${#dates.format(user.createTime, 'yyyy-MM-dd HH:mm:ss')}]]</p>
</div>
</div>
</div>
<div class="col-sm-9" style="height: 100%">
<div class="select-info">
<ul id="myTab" class="nav nav-tabs">
<li id="tabAllTap" class="active"><a href="#tabAll" data-toggle="tab">全部</a></li>
<li id="tabNotReadTap"><a href="#tabNotRead" data-toggle="tab">未读</a></li>
<li id="tabHavenReadTap"><a href="#tabHavenRead" data-toggle="tab">已读</a></li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="tabAll">
<div class="btn-group hidden-xs" id="toolbar" role="group">
<a class="btn btn-outline btn-success btn-rounded" onclick="readAll()">
全部已读
</a>
</div>
<table class="table-bordered" id="bootstrap-table" data-mobile-responsive="true"></table>
</div>
<div class="tab-pane fade" id="tabNotRead">
<div class="btn-group hidden-xs" id="toolbar1" role="group">
<a class="btn btn-outline btn-success btn-rounded" onclick="readAll()">
全部已读
</a>
</div>
<table class="table-bordered" id="bootstrap-table1" data-mobile-responsive="true"></table>
</div>
<div class="tab-pane fade" id="tabHavenRead">
<table class="table-bordered" id="bootstrap-table2" data-mobile-responsive="true"></table>
</div>
</div>
</div>
</div>
<div th:include="include :: footer"></div>
</body>
<script th:inline="javascript">
var prefix = ctx + "system/notice"
$(function () {
var options = {
url: prefix + "/list",
method: "get",
modalName: "消息表-全部",
sidePagination: "server",
search: false,
pageSize: 10,
onClickRow: function (row) {
if (row.status == 0) {
readOne(row.id)
}
},
columns: [
{
field: 'content',
title: '消息',
width: 80,
formatter: function (value, row) {
if (row.status == 0) {
return value + "<span style='color:red'>*</span>"
} else {
return value
}
}
},
{
field: 'created',
title: '时间',
width: 20
}
]
};
$.table.init(options);
});
$("#bootstrap-table1").bootstrapTable({
url: prefix + "/list",
method: "get",
toolbar: "#toolbar1",
iconSize: "outline",
queryParams: {status: 0},
showRefresh: true, //刷新
showToggle: true, //视图切换
showColumns: true, //列选择
modalName: "消息表-未读",
sidePagination: "server",
onClickRow: function (row) {
readOne(row.id)
},
responseHandler: responseHandler,
search: false,
pageList: [10, 25, 50, 100],
pageNumber: 1,
pageSize: 10,
columns: [
{
field: 'content',
title: '消息',
width: 80
},
{
field: 'created',
title: '时间',
width: 20
}
]
})
$("#bootstrap-table2").bootstrapTable({
url: prefix + "/list",
method: "get",
iconSize: "outline",
showRefresh: true, //刷新
showToggle: true, //视图切换
showColumns: true, //列选择
queryParams: function (params) {
return {
pageSize: params.limit,
pageNum: params.offset / params.limit + 1,
status: 1
};
},
modalName: "消息表-已读",
pagination: true,
sidePagination: "server",
responseHandler: responseHandler,
search: false,
pageList: [10, 25, 50, 100],
pageNumber: 1,
pageSize: 10,
columns: [
{
field: 'content',
title: '消息',
width: 80
},
{
field: 'created',
title: '时间',
width: 20
}
]
})
function responseHandler(res) {
if (res.code == 200) {
return {rows: res.data, total: res.total, code: 0};
} else {
$.modal.alertWarning(res.msg);
return {rows: [], total: 0};
}
}
function readOne(id) {
$.ajax({
url: prefix + "/readOne",
type: "get",
data: {id: id},
success: function (response) {
if (response.code == 200) {
$("#bootstrap-table").bootstrapTable("refresh")
$("#bootstrap-table1").bootstrapTable("refresh")
} else {
$.modal.alertError(response.msg)
}
},
error: function (response) {
$.modal.alertError("服务出错")
}
})
}
function readAll() {
$.modal.confirm("是否已读所有消息？", function () {
$.ajax({
url: prefix + "/readAll",
type: "get",
success: function (response) {
if ($("#tabNotReadTap".hasClass("active"))) {
$("#bootstrap-table1").bootstrapTable("")
}
},
error: function (response) {
$.modal.alertError("服务出错")
}
})
})
}
</script>
</html>