Authored by XuHaoJie

宁夏-即时消息配置-前端页面优化

... ... @@ -36,22 +36,6 @@ layui.define(['table', 'form', 'admin', 'layer', 'common', 'sessions', 'treeTabl
writeTagsInfo(v);
})
}
//渲染状态信息
// $.each(noticeTimely.noticeStateList,function (i,v) {
// //页面渲染
// var html = $("#noticeTimelyParamAddRowHtml").html();
// $("#editNoticeTimely_add_table").find("tbody").append(html);
// $("#editNoticeTimely_add_table").find("tbody tr td a.layui-table-link").on("click",function () {
// $(this).parents("tr").remove();
// });
// //数据渲染
// var len=$('#editNoticeTimely_add_table').find('tbody tr').size()-1;
// var $tr=$('#editNoticeTimely_add_table').find('tbody tr').eq(len);
// $tr.find('input[name="noticeName"]').val(v.noticeName);
// $tr.find('input[name="noticeState"]').val(v.noticeState);
// $tr.find('input[name="sendTime"]').val(v.sendTime);
// $tr.find('input[name="sendContent"]').val(v.sendContent);
// })
}
});
}else{
... ...
... ... @@ -13,6 +13,7 @@ layui.define(['table', 'form', 'admin', 'layer', 'common', 'sessions', 'treeTabl
var accessToken = sessions.getToken()['access_token'];
var domainName = common.domainName;
var noticeTimelyTable = {};
var noticeTimelyStateTable = {};
var checkList = common.checkPermission(accessToken);
//开关
var switchElement = ['broadcast', 'retry', 'sendState', 'state'];
... ... @@ -82,6 +83,78 @@ layui.define(['table', 'form', 'admin', 'layer', 'common', 'sessions', 'treeTabl
});
});
//加载表格
function loadStateTable(id) {
var params = {};
params.access_token = accessToken;
params.noticeTimelyId = id;
noticeTimelyStateTable = table.render({
elem: '#table-noticeTimely-state-list',
url: domainName + '/api-web/noticeTimely/statePage',
where: params,
height: 'full',
limit: common.limit,
limits: common.limits,
page: {
layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
theme: '#1E9FFF'
},
cols: [[{
type: 'checkbox'
}, {
field: 'noticeName', title: '发送用户', align: 'center', minWidth: '200',
}, {
field: 'sendContent', title: '发送内容', align: 'left', minWidth: '700',
templet: function (d) {
return '<input type="text" class="layui-input" style= "background-color:transparent;border:0;padding-bottom: 10px" readonly="readonly" name="sendContent" value="' + d.sendContent + '">'
}
}, {
field: 'noticeState', title: '发送状态', align: 'center', width: '150',
templet: function (d) {
if (d.noticeState == 1) {
return '已发送';
} else {
return '未发送';
}
}
}, {
field: 'sendTime', title: '发送时间', align: 'center', width: '200'
}, {
title: '操作', align: 'center', minWidth: '150', fixed: 'right',
templet:
'<div>' +
' <button data-id="{{d.id}}" class="layui-btn layui-btn-xs layui-btn-normal link-noticeTimely-state-delete" lay-tips="删除"><i class="layui-icon">&#xe640;</i></button>' +
'</div>'
}]],
done: function (res) {
// 点击删除事件
$('.link-noticeTimely-state-delete').unbind('click').on('click', function () {
var ids = [$(this).data('id')];
debugger
layer.confirm('确认要删除吗?', {icon: 3}, function () {
layer.load(2);
$.ajax({
url: domainName + '/api-web/noticeTimely/stateDelete?access_token=' + accessToken,
type: 'POST',
data: JSON.stringify(ids),
contentType: "application/json;charset=UTF-8",
success: function (response) {
layer.closeAll('loading');
if (response.success) {
layer.msg('删除成功!', {icon: 1, time: 3000});
loadStateTable(id);
} else {
layer.msg('删除失败!', {icon: 2, time: 3000});
}
}
})
});
});
}
});
}
// 加载表格
function loadTable() {
var params = form.val('form-noticeTimely-condition');
... ... @@ -108,38 +181,25 @@ layui.define(['table', 'form', 'admin', 'layer', 'common', 'sessions', 'treeTabl
}, {
field: 'type', title: '类型', align: 'center', width: '100'
}, {
field: 'details', title: '内容', align: 'left', width: '400'
field: 'details', title: '内容', align: 'left', minWidth: '400'
}, {
field: 'frequency', title: '频率', align: 'center', width: '200'
}, {
field: 'noticeNicknames', title: '用户', align: 'center', width: '400'
}, {
field: 'voice', title: '响应声音', align: 'right', width: '140',
templet:
'<div>' +
'<span>{{d.voice}}</span>' +
' <span data-id="{{d.id}}" data-voice="{{d.voice}}" class="link-noticeTimely-MP3" lay-tips="播放"><i class="layui-icon" style="font-size: 20px">&#xe645;</i></span>' +
'</div>'
field: 'noticeNicknames', title: '用户', align: 'center', minWidth: '130'
}, {
field: 'state', title: '状态', align: 'center', width: '100',
field: 'state', title: '是否启用', align: 'center', width: '100',
templet: function (d) {
var checked = d.state == 2 ? 'checked' : '';
return '<div><input type="checkbox" data-id="' + d.id + '" lay-filter="switch_noticeTimely_checkbox_state" name="state" lay-skin="switch" lay-text="启用|禁用" ' + checked + ' ></div>'
}
}, {
field: 'sendState', title: '发送状态', align: 'center', width: '100',
templet: function (d) {
var checked = d.sendState == 1 ? 'checked' : '';
return '<div><input type="checkbox" data-id="' + d.id + '" lay-filter="switch_noticeTimely_checkbox_sendState" name="sendState" lay-skin="switch" lay-text="已发送|未发送" ' + checked + ' ></div>'
}
}, {
field: 'broadcast', title: '是否广播', align: 'center', width: '100',
templet: function (d) {
var checked = d.broadcast == 1 ? 'checked' : '';
return '<div><input type="checkbox" data-id="' + d.id + '" lay-filter="switch_noticeTimely_checkbox_broadcast" name="broadcast" lay-skin="switch" lay-text="是|否" ' + checked + ' ></div>'
}
}, {
field: 'retry', title: '是否重发', align: 'center', width: '100',
field: 'retry', title: '是否轮循', align: 'center', width: '100',
templet: function (d) {
var checked = d.retry == 1 ? 'checked' : '';
return '<div><input type="checkbox" data-id="' + d.id + '" lay-filter="switch_noticeTimely_checkbox_retry" name="retry" lay-skin="switch" lay-text="重发|不重发" ' + checked + ' ></div>'
... ... @@ -154,6 +214,7 @@ layui.define(['table', 'form', 'admin', 'layer', 'common', 'sessions', 'treeTabl
templet:
'<div>' +
' <button data-id="{{d.id}}" class="layui-btn layui-btn-xs layui-btn-normal link-noticeTimely-delete" lay-tips="删除"><i class="layui-icon">&#xe640;</i></button>' +
' <button data-id="{{d.id}}" class="layui-btn layui-btn-xs layui-btn-normal link-noticeTimely-history" lay-tips="历史记录"><i class="layui-icon">&#xe705;</i></button>' +
'</div>'
}]],
done: function (res) {
... ... @@ -169,6 +230,22 @@ layui.define(['table', 'form', 'admin', 'layer', 'common', 'sessions', 'treeTabl
$('.link-noticeTimely-delete').on('click', function () {
deleteById([$(this).data('id')]);
});
//点击查看该消息发送的历史记录
$('.link-noticeTimely-history').unbind('click').on('click', function () {
var id = $(this).data('id');
layer.open({
title: "已发送消息",
content: $("#noticeTimely-state-html").html(),
area: ['80%', '70%'],
btns: ['确认', '取消'],
success: function (index) {
loadStateTable(id);
},
yes: function (index, layero) {
}
});
});
//播放声音
$('.link-noticeTimely-MP3').on('click', function () {
var voice = $(this).data('voice');
... ...
... ... @@ -11,32 +11,32 @@
</div>
</div>
<div class="inline-half layui-inline">
<label class="layui-form-label">类型</label>
<label class="layui-form-label">跳转地址</label>
<div class="layui-input-inline">
<input type="text" name="type" placeholder="请输入类型" value="sql" readonly="readonly" class="layui-input">
<input type="text" name="site" placeholder="请输入详情页地址" class="layui-input">
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">状态</label>
<div class="layui-input-inline" style="width: calc(20vw - 142px);margin-right:0px">
<div class="layui-input-inline" style="width: calc(20vw - 142px);margin-right:105px">
<input type="checkbox" id="switch_noticeTimely_state" name="state" lay-skin="switch" lay-text="启用|禁用" value="0" >
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">是否广播</label>
<div class="layui-input-inline" style="width: calc(20vw - 142px);margin-right:0px">
<div class="layui-input-inline" style="width: calc(20vw - 142px);margin-right:105px">
<input type="checkbox" id="switch_noticeTimely_broadcast" name="broadcast" lay-skin="switch" lay-text="是|否" value="0" >
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">是否重发</label>
<div class="layui-input-inline" style="width: calc(20vw - 142px);margin-right:0px">
<input type="checkbox" id="switch_noticeTimely_retry" name="retry" lay-skin="switch" lay-text="重发|不重发" value="0" >
<label class="layui-form-label">是否轮循</label>
<div class="layui-input-inline" style="width: calc(20vw - 142px);margin-right:105px">
<input type="checkbox" id="switch_noticeTimely_retry" name="retry" lay-skin="switch" lay-text="轮循|不轮循" value="0" >
</div>
</div>
<div class="layui-inline">
<div class="layui-inline" style="display: none !important;">
<label class="layui-form-label">发送状态</label>
<div class="layui-input-inline" style="width: calc(20vw - 142px);margin-right:0px">
<input type="checkbox" id="switch_noticeTimely_sendState" name="sendState" lay-skin="switch" lay-text="已发送|未发送" value="0" >
... ... @@ -61,7 +61,7 @@
</div>
</div>
<div class="layui-form-item">
<div class="inline-half layui-inline">
<div class="inline-half layui-inline" style="display: none!important;">
<label class="layui-form-label">响应声音</label>
<div class="layui-input-inline">
<select name="voice" id="noticeTimely_voice" lay-filter="noticeTimely_voice">
... ... @@ -71,10 +71,10 @@
</select>
</div>
</div>
<div class="inline-half layui-inline">
<label class="layui-form-label">详情页地址</label>
<div class="inline-half layui-inline" style="display: none!important;">
<label class="layui-form-label">类型</label>
<div class="layui-input-inline">
<input type="text" name="site" placeholder="请输入详情页地址" class="layui-input">
<input type="text" name="type" placeholder="请输入类型" value="sql" readonly="readonly" class="layui-input">
</div>
</div>
</div>
... ... @@ -93,49 +93,49 @@
</div>
<button id="btn-noticeTimely-submit" class="hide" lay-submit lay-filter="btn-noticeTimely-submit">提交</button>
</form>
<div class="layui-card-body layui-form-pane editNoticeTimelyParam-list" style="padding-top: 0px;">
<fieldset class="layui-elem-field layui-field-title">
<legend>消息状态 &nbsp; &nbsp;
<a class="layui-btn layui-btn-xs layui-btn-normal" id="editNoticeTimelyParamBtn"><i class="layui-icon">&#xe654;</i></a>
</legend>
</fieldset>
<div class="layui-form-item">
<table id="editNoticeTimely_add_table" class="layui-table">
<thead>
<tr>
<th style="text-align: center;width: 150px">发送用户</th>
<th style="text-align: center;width: 60px">发送状态</th>
<th style="text-align: center;width: 150px">发送时间</th>
<th style="text-align: center;">发送内容</th>
<th style="text-align: center;width: 60px">操作</th>
</tr>
</thead>
<tbody>
<!-- <div class="layui-card-body layui-form-pane editNoticeTimelyParam-list" style="padding-top: 0px;">-->
<!-- <fieldset class="layui-elem-field layui-field-title">-->
<!-- <legend>消息状态 &nbsp; &nbsp;-->
<!-- <a class="layui-btn layui-btn-xs layui-btn-normal" id="editNoticeTimelyParamBtn"><i class="layui-icon">&#xe654;</i></a>-->
<!-- </legend>-->
<!-- </fieldset>-->
<!-- <div class="layui-form-item">-->
<!-- <table id="editNoticeTimely_add_table" class="layui-table">-->
<!-- <thead>-->
<!-- <tr>-->
<!-- <th style="text-align: center;width: 150px">发送用户</th>-->
<!-- <th style="text-align: center;width: 60px">发送状态</th>-->
<!-- <th style="text-align: center;width: 150px">发送时间</th>-->
<!-- <th style="text-align: center;">发送内容</th>-->
<!-- <th style="text-align: center;width: 60px">操作</th>-->
<!-- </tr>-->
<!-- </thead>-->
<!-- <tbody>-->
</tbody>
</table>
</div>
</div>
<!-- </tbody>-->
<!-- </table>-->
<!-- </div>-->
<!-- </div>-->
</article>
<script type="text/html" id="noticeTimelyParamAddRowHtml">
<tr>
<td>
<input type="text" class="layui-input" name="noticeName">
</td>
<td>
<select name="noticeState" class="layui-select" style="min-width: 100px">
<option value="1">已发送</option>
<option value="2">未发送</option>
</select>
</td>
<td><input type="text" class="layui-input" readonly="readonly" name="sendTime"></td>
<td>
<input type="text" class="layui-input" name="sendContent">
<!-- <textarea name="details" class="layui-textarea"></textarea>-->
</td>
<td align="center" style="min-width: 80px"><a class="layui-table-link layui-btn layui-btn-xs layui-btn-normal" title="删除" ><i style="font-size: 18px" class="layui-icon">&#xe640;</i></a></td>
</tr>
</script>
<!--<script type="text/html" id="noticeTimelyParamAddRowHtml">-->
<!-- <tr>-->
<!-- <td>-->
<!-- <input type="text" class="layui-input" name="noticeName">-->
<!-- </td>-->
<!-- <td>-->
<!-- <select name="noticeState" class="layui-select" style="min-width: 100px">-->
<!-- <option value="1">已发送</option>-->
<!-- <option value="2">未发送</option>-->
<!-- </select>-->
<!-- </td>-->
<!-- <td><input type="text" class="layui-input" readonly="readonly" name="sendTime"></td>-->
<!-- <td>-->
<!-- <input type="text" class="layui-input" name="sendContent">-->
<!--&lt;!&ndash; <textarea name="details" class="layui-textarea"></textarea>&ndash;&gt;-->
<!-- </td>-->
<!-- <td align="center" style="min-width: 80px"><a class="layui-table-link layui-btn layui-btn-xs layui-btn-normal" title="删除" ><i style="font-size: 18px" class="layui-icon">&#xe640;</i></a></td>-->
<!-- </tr>-->
<!--</script>-->
<script>
layui.use('noticeTimelyAdd', function (fn) {
fn({{d}});
... ...
... ... @@ -36,6 +36,11 @@
</div>
</div>
</article>
<script type="text/html" id="noticeTimely-state-html" >
<div>
<table id="table-noticeTimely-state-list" lay-filter="table-noticeTimely-state-list"></table>
</div>
</script>
<script>
layui.use('noticeTimelyIndex', function (fn) {
fn();
... ...