404 lines
18 KiB
Plaintext
404 lines
18 KiB
Plaintext
|
<html>
|
|||
|
|
<head>
|
|||
|
|
<meta charset="utf-8">
|
|||
|
|
<title>通知中心</title>
|
|||
|
|
<link href="../lib/font-awesome-4.7.0/css/font-awesome.css?v=@HT.Cloud.Code.GlobalContext.GetVersion()" rel="stylesheet" />
|
|||
|
|
<script src="../lib/jquery-3.4.1/jquery-3.4.1.min.js?v=@HT.Cloud.Code.GlobalContext.GetVersion()" charset="utf-8"></script>
|
|||
|
|
<link rel="stylesheet" href="../js/lay-module/dtree/dtree.css?v=@HT.Cloud.Code.GlobalContext.GetVersion()">
|
|||
|
|
<link rel="stylesheet" href="../js/lay-module/dtree/font/dtreefont.css?v=@HT.Cloud.Code.GlobalContext.GetVersion()">
|
|||
|
|
<script src="../js/framework-ui.js?v=@HT.Cloud.Code.GlobalContext.GetVersion()"></script>
|
|||
|
|
<script src="../lib/layui/layui.js?v=@HT.Cloud.Code.GlobalContext.GetVersion()"></script>
|
|||
|
|
<link rel="stylesheet" href="../lib/layui/css/layui.css?v=@HT.Cloud.Code.GlobalContext.GetVersion()" media="all">
|
|||
|
|
<link rel="stylesheet" href="../css/public.css?v=@HT.Cloud.Code.GlobalContext.GetVersion()" media="all">
|
|||
|
|
<script src="../js/lay-config.js?v=@HT.Cloud.Code.GlobalContext.GetVersion()" charset="utf-8"></script>
|
|||
|
|
<link href="../css/watercloud.css?v=@HT.Cloud.Code.GlobalContext.GetVersion()" rel="stylesheet" />
|
|||
|
|
<link rel="stylesheet" href="../js/lay-module/loading/wcLoading.css?v=@HT.Cloud.Code.GlobalContext.GetVersion()" media="all">
|
|||
|
|
<script src="../js/lay-module/loading/wcLoading.js?v=@HT.Cloud.Code.GlobalContext.GetVersion()" charset="utf-8"></script>
|
|||
|
|
<style>
|
|||
|
|
/** 消息列表样式 */
|
|||
|
|
.layui-badge {
|
|||
|
|
position: relative;
|
|||
|
|
display: inline-block;
|
|||
|
|
padding: 0 6px;
|
|||
|
|
font-size: 12px;
|
|||
|
|
text-align: center;
|
|||
|
|
background-color: #FF5722;
|
|||
|
|
color: #fff;
|
|||
|
|
border-radius: 2px;
|
|||
|
|
left: 40px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.layui-badge-yellow {
|
|||
|
|
margin-top: 5px;
|
|||
|
|
color: #faad14;
|
|||
|
|
background: #fff;
|
|||
|
|
border: 1px solid #ffe58f;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.layui-badge-green {
|
|||
|
|
margin-top: 5px;
|
|||
|
|
color: #52c41a;
|
|||
|
|
background: #fff;
|
|||
|
|
border: 1px solid #b7eb8f;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.layui-badge-red {
|
|||
|
|
margin-top: 5px;
|
|||
|
|
color: #f5222d;
|
|||
|
|
background: #fff;
|
|||
|
|
border: 1px solid #ffa39e;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.message-list {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 48px;
|
|||
|
|
padding: 0px 0px;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
bottom: 45px;
|
|||
|
|
overflow-y: auto;
|
|||
|
|
-webkit-overflow-scrolling: touch;
|
|||
|
|
background: #F2F2F2;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.watercolor {
|
|||
|
|
background-color: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.message-list-item {
|
|||
|
|
display: block;
|
|||
|
|
line-height: 24px;
|
|||
|
|
position: relative;
|
|||
|
|
border-bottom: 1px solid #e8e8e8;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.message-list-item:hover, .message-btn-clear:hover, .message-btn-more:hover {
|
|||
|
|
background: #F2F2F2;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.message-list-item .message-item-icon {
|
|||
|
|
width: 30px;
|
|||
|
|
height: 30px;
|
|||
|
|
line-height: 30px;
|
|||
|
|
margin-top: -20px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
position: absolute;
|
|||
|
|
left: 40px;
|
|||
|
|
top: 50%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.message-list-item .message-item-icon.layui-icon {
|
|||
|
|
color: #fff;
|
|||
|
|
font-size: 15px;
|
|||
|
|
text-align: center;
|
|||
|
|
background-color: #FE5D58;
|
|||
|
|
margin-top: -20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.message-list-item .message-item-icon + .message-item-right {
|
|||
|
|
margin-left: 40px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.message-list-item .message-item-title {
|
|||
|
|
color: #666;
|
|||
|
|
font-size: 14px;
|
|||
|
|
padding-left: 40px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.message-list-item .message-item-text {
|
|||
|
|
color: #999;
|
|||
|
|
font-size: 12px;
|
|||
|
|
padding-left: 40px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.message-list-item .message-item-extra {
|
|||
|
|
color: #999;
|
|||
|
|
font-size: 12px;
|
|||
|
|
padding-left: 40px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.message-list-item > .layui-badge {
|
|||
|
|
position: absolute;
|
|||
|
|
right: 20px;
|
|||
|
|
top: 12px;
|
|||
|
|
left: 40px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.message-btn-clear, .message-btn-more {
|
|||
|
|
color: #666;
|
|||
|
|
display: block;
|
|||
|
|
padding: 10px 5px;
|
|||
|
|
line-height: 24px;
|
|||
|
|
text-align: center;
|
|||
|
|
cursor: pointer;
|
|||
|
|
background-color: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.message-btn-clear {
|
|||
|
|
position: absolute;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
border-top: 1px solid #e8e8e8;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.message-btn-more {
|
|||
|
|
color: #666;
|
|||
|
|
font-size: 13px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.message-btn-more.ew-btn-loading > .ew-btn-loading-text {
|
|||
|
|
font-size: 13px !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.message-list-empty {
|
|||
|
|
color: #999;
|
|||
|
|
padding: 100px 0;
|
|||
|
|
text-align: center;
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.message-list-empty > .layui-icon {
|
|||
|
|
color: #ccc;
|
|||
|
|
display: block;
|
|||
|
|
font-size: 45px;
|
|||
|
|
margin-bottom: 15px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.show-empty .message-list-empty {
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.show-empty .message-btn-clear, .show-empty .message-list {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
body {
|
|||
|
|
margin: 5px 0px 5px 0px;
|
|||
|
|
}
|
|||
|
|
/** //消息列表样式结束 */
|
|||
|
|
</style>
|
|||
|
|
<script>
|
|||
|
|
layui.use(['element', 'jquery', 'common'], function () {
|
|||
|
|
var $ = layui.$;
|
|||
|
|
var common = layui.common;
|
|||
|
|
$(function () {
|
|||
|
|
//todo ajax获取3个信息的参数 进行显示
|
|||
|
|
common.ajax({
|
|||
|
|
url: "/InfoManage/Message/GetUnReadListJson",
|
|||
|
|
dataType: "json",
|
|||
|
|
async: false,
|
|||
|
|
success: function (data) {
|
|||
|
|
//通知值
|
|||
|
|
var num1 = 0;
|
|||
|
|
//私信值
|
|||
|
|
var num2 = 0;
|
|||
|
|
//带办值
|
|||
|
|
var num3 = 0;
|
|||
|
|
var html1 = '';
|
|||
|
|
var html2 = '';
|
|||
|
|
var html3 = '';
|
|||
|
|
for (var i = 0; i < data.length; i++) {
|
|||
|
|
if (data[i].F_MessageType == 0) {
|
|||
|
|
num1++;
|
|||
|
|
html1 += '<a class="message-list-item" id="' + data[i].F_Id + '" href="javascript:;">'
|
|||
|
|
+ '<div class="watercolor">'
|
|||
|
|
+ '<i class="layui-icon layui-icon-tips message-item-icon"></i>'
|
|||
|
|
+ '<div class="message-item-right">'
|
|||
|
|
+ '<div class="message-item-title">' + '通知--' + new Date(data[i].F_CreatorTime).Format("yyyy-MM-dd hh:mm") + '</div>'
|
|||
|
|
+ '<div class="message-item-text layui-hide">' + data[i].F_MessageInfo + '</div>'
|
|||
|
|
+ '<div class="message-item-extra">' + data[i].F_CreatorUserName + '</div>'
|
|||
|
|
+ '</div>'
|
|||
|
|
+ '</div >'
|
|||
|
|
+ '</a >';
|
|||
|
|
}
|
|||
|
|
else if (data[i].F_MessageType == 1) {
|
|||
|
|
num2++;
|
|||
|
|
html2 += '<a class="message-list-item" id="' + data[i].F_Id + '" href="javascript:;">'
|
|||
|
|
+ '<div class="watercolor">'
|
|||
|
|
+ '<div class="message-item-right">'
|
|||
|
|
+ '<div class="message-item-title">' + '私信--' + data[i].F_CreatorUserName + '</div>'
|
|||
|
|
+ '<div class="message-item-text layui-hide">' + data[i].F_MessageInfo + '</div>'
|
|||
|
|
+ '<div class="message-item-extra">' + new Date(data[i].F_CreatorTime).Format("yyyy-MM-dd hh:mm") + '</div>'
|
|||
|
|
+ '</div>'
|
|||
|
|
+ '</div>'
|
|||
|
|
+ '</a>';
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
num3++;
|
|||
|
|
html3 += '<a class="message-list-item" id="' + data[i].F_Id + '" href="javascript:;">'
|
|||
|
|
+ '<div class="watercolor">'
|
|||
|
|
+ '<span class="layui-badge ' + 'layui-badge-yellow' + '">' + '待处理' + '</span>'
|
|||
|
|
+ '<div class="message-item-right">'
|
|||
|
|
+ '<h2 class="message-item-title">' + data[i].F_MessageInfo + '</h2>'
|
|||
|
|
+ '<div class="message-item-text layui-hide">' + data[i].F_Href + '</div>'
|
|||
|
|
+ '<div class="message-item-extra">' + new Date(data[i].F_CreatorTime).Format("yyyy-MM-dd hh:mm") + '</div>'
|
|||
|
|
+ '</div>'
|
|||
|
|
+ '</div>'
|
|||
|
|
+ '</a>';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
$('#message1').html("通知(" + num1 + ")");
|
|||
|
|
$('#message2').html("私信(" + num2 + ")");
|
|||
|
|
$('#message3').html("待办(" + num3 + ")");
|
|||
|
|
$('#list1').html(html1);
|
|||
|
|
$('#list2').html(html2);
|
|||
|
|
$('#list3').html(html3);
|
|||
|
|
if (num1 == 0) {
|
|||
|
|
$('#list1').parents('.layui-tab-item').addClass('show-empty');
|
|||
|
|
}
|
|||
|
|
if (num2 == 0) {
|
|||
|
|
$('#list2').parents('.layui-tab-item').addClass('show-empty');
|
|||
|
|
}
|
|||
|
|
if (num3 == 0) {
|
|||
|
|
$('#list3').parents('.layui-tab-item').addClass('show-empty');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
wcLoading.close();
|
|||
|
|
/* 按钮点击事件 */
|
|||
|
|
$('body').on('click', '.message-list-item', function () {
|
|||
|
|
//todo 前后交互，htm2是根据后端数据生成的
|
|||
|
|
var message = $('.layui-this')[0].id;
|
|||
|
|
common.ajax({
|
|||
|
|
url: "/InfoManage/Message/ReadMsgForm",
|
|||
|
|
data: { keyValue: this.id },
|
|||
|
|
dataType: "json",
|
|||
|
|
type: 'POST',
|
|||
|
|
success: function () {
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
if (message == 'message1') {
|
|||
|
|
var title = $(this).children('.watercolor').children('.message-item-right').children('.message-item-title').text(),
|
|||
|
|
noticeTime = $(this).children('.watercolor').children('.message-item-right').children('.message-item-extra').text(),
|
|||
|
|
content = $(this).children('.watercolor').children('.message-item-right').children('.message-item-text').text();
|
|||
|
|
var html = '<div style="padding:15px 20px; text-align:justify; line-height: 22px;border-bottom:1px solid #e2e2e2;background-color: #2f4056;color: #ffffff">\n' +
|
|||
|
|
'<div style="text-align: center;margin-bottom: 20px;font-weight: bold;border-bottom:1px solid #718fb5;padding-bottom: 5px"><h4 class="text-danger">' + title + '</h4></div>\n' +
|
|||
|
|
'<div style="font-size: 12px">' + content + '</div>\n' +
|
|||
|
|
'</div>\n';
|
|||
|
|
top.layer.open({
|
|||
|
|
type: 1,
|
|||
|
|
title: '通知' + '<span style="float: right;right: 1px;font-size: 12px;color: #b1b3b9;margin-top: 1px">' + noticeTime + '</span>',
|
|||
|
|
area: '250px;',
|
|||
|
|
shade: 0.8,
|
|||
|
|
id: 'layuimini-notice',
|
|||
|
|
btn: ['确定'],
|
|||
|
|
btnAlign: 'c',
|
|||
|
|
moveType: 1,
|
|||
|
|
content: html
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
else if (message == 'message2') {
|
|||
|
|
var title = $(this).children('.watercolor').children('.message-item-right').children('.message-item-title').text(),
|
|||
|
|
noticeTime = $(this).children('.watercolor').children('.message-item-right').children('.message-item-extra').text(),
|
|||
|
|
content = $(this).children('.watercolor').children('.message-item-right').children('.message-item-text').text();
|
|||
|
|
var html = '<div style="padding:15px 20px; text-align:justify; line-height: 22px;border-bottom:1px solid #e2e2e2;background-color: #2f4056;color: #ffffff">\n' +
|
|||
|
|
'<div style="text-align: center;margin-bottom: 20px;font-weight: bold;border-bottom:1px solid #718fb5;padding-bottom: 5px"><h4 class="text-danger">' + title + '</h4></div>\n' +
|
|||
|
|
'<div style="font-size: 12px">' + content + '</div>\n' +
|
|||
|
|
'</div>\n';
|
|||
|
|
top.layer.open({
|
|||
|
|
type: 1,
|
|||
|
|
title: '私信' + '<span style="float: right;right: 1px;font-size: 12px;color: #b1b3b9;margin-top: 1px">' + noticeTime + '</span>',
|
|||
|
|
area: '250px;',
|
|||
|
|
shade: 0.8,
|
|||
|
|
id: 'layuimini-notice',
|
|||
|
|
btn: ['确定'],
|
|||
|
|
btnAlign: 'c',
|
|||
|
|
moveType: 1,
|
|||
|
|
content: html
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
var Href = $(this).children('.watercolor').children('.message-item-right').children('.message-item-text').html();
|
|||
|
|
top.$("[layuimini-href='" + Href + "']", ".layuimini-menu-left").click();
|
|||
|
|
common.modalClose();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
/* 清空消息点击事件 分开写交互*/
|
|||
|
|
$('#messageClearBtn1').click(function () {
|
|||
|
|
var thisObj = $(this);
|
|||
|
|
common.ajax({
|
|||
|
|
url: "/InfoManage/Message/ReadAllMsgForm?type=0",
|
|||
|
|
type: "POST",
|
|||
|
|
success: function () {
|
|||
|
|
$('#message1').html("通知(0)");
|
|||
|
|
$(thisObj).parents('.layui-tab-item').addClass('show-empty');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
$('#messageClearBtn2').click(function () {
|
|||
|
|
var thisObj = $(this);
|
|||
|
|
common.ajax({
|
|||
|
|
url: "/InfoManage/Message/ReadAllMsgForm?type=1",
|
|||
|
|
type: "POST",
|
|||
|
|
success: function () {
|
|||
|
|
$('#message2').html("私信(0)");
|
|||
|
|
$(thisObj).parents('.layui-tab-item').addClass('show-empty');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
$('#messageClearBtn3').click(function () {
|
|||
|
|
var thisObj = $(this);
|
|||
|
|
common.ajax({
|
|||
|
|
url: "/InfoManage/Message/ReadAllMsgForm?type=2",
|
|||
|
|
type: "POST",
|
|||
|
|
success: function () {
|
|||
|
|
$('#message3').html("待办(0)");
|
|||
|
|
$(thisObj).parents('.layui-tab-item').addClass('show-empty');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div class="layui-card" style="box-shadow: none;border: none;">
|
|||
|
|
<div class="layui-tab layui-tab-brief">
|
|||
|
|
<ul class="layui-tab-title" style="text-align: center;">
|
|||
|
|
<li class="layui-this" id="message1"></li>
|
|||
|
|
<li id="message2" class="layui-hide"></li>
|
|||
|
|
<li id="message3"></li>
|
|||
|
|
</ul>
|
|||
|
|
<div class="layui-tab-content" style="padding: 0;">
|
|||
|
|
<!-- tab1 -->
|
|||
|
|
<div class="layui-tab-item layui-show">
|
|||
|
|
<div class="message-list" id="list1">
|
|||
|
|
</div>
|
|||
|
|
<!-- 列表为空 -->
|
|||
|
|
<div class="message-list-empty">
|
|||
|
|
<i class="layui-icon layui-icon-notice"></i>
|
|||
|
|
<div>没有通知</div>
|
|||
|
|
</div>
|
|||
|
|
<a id="messageClearBtn1" class="message-btn-clear">全部标记已读</a>
|
|||
|
|
</div>
|
|||
|
|
<!-- tab2 -->
|
|||
|
|
<div class="layui-tab-item">
|
|||
|
|
<div class="message-list" id="list2">
|
|||
|
|
</div>
|
|||
|
|
<!-- 列表为空 -->
|
|||
|
|
<div class="message-list-empty">
|
|||
|
|
<i class="layui-icon layui-icon-dialogue"></i>
|
|||
|
|
<div>没有私信</div>
|
|||
|
|
</div>
|
|||
|
|
<a id="messageClearBtn2" class="message-btn-clear">全部标记已读</a>
|
|||
|
|
</div>
|
|||
|
|
<!-- tab3 -->
|
|||
|
|
<div class="layui-tab-item">
|
|||
|
|
<div class="message-list" id="list3">
|
|||
|
|
</div>
|
|||
|
|
<!-- 列表为空 -->
|
|||
|
|
<div class="message-list-empty">
|
|||
|
|
<i class="layui-icon layui-icon-flag"></i>
|
|||
|
|
<div>没有待办</div>
|
|||
|
|
</div>
|
|||
|
|
<a id="messageClearBtn3" class="message-btn-clear">全部标记已读</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</body>
|
|||
|
|
</html>
|