闫增涛
2025-04-08 b41630280b49408824feb333849d51d83fa06fca
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
{extend name="../../base/view/common/base" /}
<!-- 主体 -->
{block name="body"}
<div class="p-page">
    {include file="message/msgmenu" /}
    <div style="margin-left:172px;">
        <form class="layui-form gg-form-bar border-t border-x">
            <div class="layui-input-inline" style="width:200px">
                <input type="text" autocomplete="off" name="range_time" readonly class="layui-input tool-time" data-range="~" placeholder="接收日期">
            </div>
            <div class="layui-input-inline" style="width:128px">
                <select name="read">
                    <option value="">选择消息状态</option>
                    <option value="1">未读消息</option>
                    <option value="2">已读消息</option>
                </select>
            </div>
            <div class="layui-input-inline" style="width:128px">
                <select name="types">
                    <option value="">选择消息类型</option>
                    <option value="1">系统消息</option>
                    <option value="2">个人消息</option>
                </select>
            </div>
            <div class="layui-input-inline" style="width:300px">
                <input type="text" name="keywords" placeholder="关键字" class="layui-input" autocomplete="off"/>
            </div>
            <div class="layui-input-inline" style="width:150px;">
                <button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="webform"><i class="layui-icon layui-icon-search mr-1"></i>搜索</button>
                <button type="reset" class="layui-btn layui-btn-reset" lay-filter="reset">清空</button>
            </div>
        </form> 
        <table class="layui-hide" id="test" lay-filter="test"></table>
    </div>
</div>
 
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <div class="layui-btn-group">
            <button class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon">&#xe61f;</i>新建消息</button>
            <button class="layui-btn layui-btn-normal layui-btn-sm" lay-event="star"><i class="layui-icon">&#xe67b;</i>设为星标</button>
            <button class="layui-btn layui-btn-warm layui-btn-sm" lay-event="read"><i class="layui-icon">&#xe605;</i>设为已读</button>
            <button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="del"><i class="layui-icon">&#xe640;</i>批量删除</button>
        </div>
    </div>
</script>
{/block}
<!-- /主体 -->
 
<!-- 脚本 -->
{block name="script"}
<script>
    const moduleInit = ['tool'];
    function gouguInit() {
        var table = layui.table, tool = layui.tool ,form = layui.form;        
        layui.pageTable = table.render({
            elem: '#test',
            toolbar: '#toolbarDemo',
            defaultToolbar:false,
            title:'收件箱',
            url: "/home/message/inbox", //数据接口
            page: true ,//开启分页
            limit: 20,
            cellMinWidth: 80,
            height: 'full-112',
            cols: [[ //表头
              {type:'checkbox',fixed:'left'},
              {field: 'msg_type', title: '消息类型',width:90,align:'center',templet: function (d) {
                    var html = '<span class="yellow">系统消息</span>';
                    if(d.from_uid > 0){
                        html = '<span class="blue">个人消息</span>';
                    }
                    return html;
                }              
              },
              {field: 'from_name', title: '发件人', width:100,align:'center'},
              {field: 'title', title: '消息主题',minWidth:240},
              {field: 'create_time', title: '发件时间', align:'center',width:160},
              {field: 'read_time', title: '是否已读',align:'center', width:80,templet:function(d){
                    var html='<span style="color:#5FB878">已读</span>';
                    if(d.read_time==0){
                        html='<span style="color:#FF5722">未读</span>';
                    }
                    return html;
                }},
              {field: 'is_star', title: '是否星标',align:'center', width:80,templet:function(d){
                    var html='<span class="layui-icon layui-icon-rate" style="color:#5FB878; font-size:20px; cursor:pointer" lay-event="star"> </span>';
                    if(d.is_star==1){
                        html='<span class="layui-icon layui-icon-rate-solid" style="color:#ffb800; font-size:20px; cursor:pointer" lay-event="unstar"> </span>';
                    }
                    return html;
                }},
              {field: 'right', title: '操作',fixed:'right', width:160, align:'center',templet: function (d) {
                    let html='<div class="layui-btn-group">';
                    let btn1='<span class="layui-btn layui-btn-xs layui-btn-normal" lay-event="view">查看</span>';
                    let btn2='<span class="layui-btn layui-btn-xs" lay-event="reply">回复</span>';
                    let btn3='<span class="layui-btn layui-btn-xs layui-btn-normal" lay-event="resend">转发</span>';
                    let btn4='<button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</button></div>';
                    if(d.from_uid == 0){
                        return html+btn1+btn4+'</div>'
                    }
                    else{
                        return html+btn1+btn2+btn3+btn4+'</div>'
                    }                    
                }
              }
            ]]
        });
 
        //监听行工具事件
        table.on('tool(test)', function(obj){
            var data = obj.data;
            if(obj.event === 'star'){
                layer.confirm('确定该信息设为星标吗?', {icon: 3, title:'提示'}, function(index){
                    let callback = function (e) {
                        layer.msg(e.msg);
                        if(e.code==0){
                            layui.pageTable.reload();
                        }
                    }
                    tool.delete("/home/message/check", {
                        ids: data.id,type:5,
                    }, callback);
                    layer.close(index);
                });
            }
            if(obj.event === 'unstar'){
                layer.confirm('确定该信息取消星标吗?', {icon: 3, title:'提示'}, function(index){
                    let callback = function (e) {
                        layer.msg(e.msg);
                        if(e.code==0){
                            layui.pageTable.reload();
                        }
                    }
                    tool.delete("/home/message/check", {
                        ids: data.id,type:6,
                    }, callback);
                    layer.close(index);
                });
            }
            if(obj.event === 'del'){
                layer.confirm('确定该信息要放入垃圾箱吗?', {icon: 3, title:'提示'}, function(index){
                    let callback = function (e) {
                        layer.msg(e.msg);
                        if(e.code==0){
                            layui.pageTable.reload();
                        }
                    }
                    tool.delete("/home/message/check", {
                        ids: data.id,type:2,
                    }, callback);
                    layer.close(index);
                });
            }
            if(obj.event === 'view'){
                tool.side('/home/message/read?id='+data.id);
                return;
            }
            if(obj.event === 'reply'){
                tool.side('/home/message/reply?msg_id='+data.id);
                return;
            }
            if(obj.event === 'resend'){
                tool.side('/home/message/resend?msg_id='+data.id);
                return;
            }
        });
        
        //表头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id); //获取选中行状态
            var data = checkStatus.data; 
            if (obj.event === 'add') {
                tool.side("/home/message/add");
                return;
            }
            if(data.length==0){
                layer.msg('请选择要操作的消息');
                return false;
            }
            var idArray=[],msg='是否执行该操作?',type=0;
            for(var i=0;i<data.length;i++){
                idArray.push(data[i].id);
            }
            switch(obj.event){
                case 'read':
                    msg = '确定把选中的信息设为已读吗?';
                    type = 1;
                break;
                case 'del':
                    msg = '确定把选中的信息要放入垃圾箱吗?';
                    type = 2;
                break;
                case 'star':
                    msg = '确定把选中的信息设为星标吗?';
                    type = 5;
                break;
            };
            
            layer.confirm(msg, {
                icon: 3,
                title: '提示'
            }, function (index) {
                let callback = function (e) {
                    layer.msg(e.msg);
                    if(e.code==0){
                        layui.pageTable.reload();
                    }
                }
                tool.delete("/home/message/check", {
                    ids: idArray.join(','),
                    type:type,
                }, callback);
                layer.close(index);
            });
        });
         
        //监听搜索提交
        form.on('submit(webform)', function(data){
            layui.pageTable.reload({where:data.field,page:{curr:1}});
            return false;
        });
    }        
</script>
{/block}
<!-- /脚本 -->