mine.blade.php 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
  1. @extends('admin.base')
  2. @section('content')
  3. <div class="layui-card">
  4. <div class="layui-card-header layuiadmin-card-header-auto">
  5. <div class="layui-btn-group ">
  6. @can('message.message.destroy')
  7. <button class="layui-btn layui-btn-sm layui-btn-danger" id="listDelete">删除</button>
  8. @endcan
  9. </div>
  10. </div>
  11. <div class="layui-card-body">
  12. <table id="dataTable" lay-filter="dataTable"></table>
  13. <script type="text/html" id="options">
  14. <div class="layui-btn-group">
  15. @can('message.message.destroy')
  16. <a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="del">删除</a>
  17. @endcan
  18. </div>
  19. </script>
  20. <script type="text/html" id="read">
  21. <input @{{# if(d.read==2){ }}disabled@{{# } }} message-id="@{{ d.id }}" type="checkbox" @{{# if(d.read==1){ }}lay-filter="read"@{{# } }} lay-skin="switch" lay-text="未读|已读" @{{ d.read==1?'checked':'' }} >
  22. </script>
  23. </div>
  24. </div>
  25. @endsection
  26. @section('script')
  27. @can('message.message')
  28. <script>
  29. layui.use(['layer','table','form'],function () {
  30. var layer = layui.layer;
  31. var form = layui.form;
  32. var table = layui.table;
  33. //用户表格初始化
  34. var dataTable = table.render({
  35. elem: '#dataTable'
  36. ,height: 500
  37. ,url: "{{ route('admin.message.mine') }}" //数据接口
  38. ,page: true //开启分页
  39. ,cols: [[ //表头
  40. {checkbox: true,fixed: true}
  41. ,{field: 'id', title: 'ID', sort: true,width:80}
  42. ,{field: 'title', title: '标题'}
  43. ,{field: 'content', title: '内容'}
  44. ,{field: 'send_name', title: '发送人'}
  45. ,{field: 'read', title: '已读/未读',width:100,toolbar: '#read'}
  46. ,{field: 'created_at', title: '创建时间'}
  47. ,{fixed: 'right', width: 220, align:'center', toolbar: '#options'}
  48. ]]
  49. });
  50. //监听工具条
  51. table.on('tool(dataTable)', function(obj){ //注:tool是工具条事件名,dataTable是table原始容器的属性 lay-filter="对应的值"
  52. var data = obj.data //获得当前行数据
  53. ,layEvent = obj.event; //获得 lay-event 对应的值
  54. if(layEvent === 'del'){
  55. layer.confirm('确认删除吗?', function(index){
  56. $.post("{{ route('admin.message.destroy') }}",{_method:'delete',ids:[data.id]},function (result) {
  57. if (result.code==0){
  58. obj.del(); //删除对应行(tr)的DOM结构
  59. }
  60. layer.close(index);
  61. layer.msg(result.msg)
  62. });
  63. });
  64. } else if(layEvent === 'edit'){
  65. location.href = '/admin/message/'+data.id+'/edit';
  66. }
  67. });
  68. //按钮批量删除
  69. $("#listDelete").click(function () {
  70. var ids = []
  71. var hasCheck = table.checkStatus('dataTable')
  72. var hasCheckData = hasCheck.data
  73. if (hasCheckData.length>0){
  74. $.each(hasCheckData,function (index,element) {
  75. ids.push(element.id)
  76. })
  77. }
  78. if (ids.length>0){
  79. layer.confirm('确认删除吗?', function(index){
  80. $.post("{{ route('admin.message.destroy') }}",{_method:'delete',ids:ids},function (result) {
  81. if (result.code==0){
  82. dataTable.reload()
  83. }
  84. layer.close(index);
  85. layer.msg(result.msg,)
  86. });
  87. })
  88. }else {
  89. layer.msg('请选择删除项')
  90. }
  91. });
  92. //已读未读
  93. form.on('switch(read)', function(data){
  94. var othis = $(data.othis);
  95. var obj = $(data.elem)
  96. var id = obj.attr('message-id');
  97. var url = '/admin/message/'+id+'/read';
  98. $.post(url,{_token:"{{csrf_token()}}"},function (res) {
  99. layer.msg(res.msg,{time:1000},function () {
  100. if (res.code==0){
  101. obj.attr('disabled',true);
  102. othis.addClass("layui-checkbox-disbaled layui-disabled");
  103. form.render('checkbox','read');
  104. if ($("#unreadMessage").length>0){
  105. var currentNum = parseInt($("#unreadMessage").text())
  106. var updateNum = currentNum-1 >=0 ? currentNum : 0;
  107. $("#unreadMessage").text(updateNum)
  108. }
  109. }
  110. })
  111. },'json')
  112. });
  113. });
  114. </script>
  115. @endcan
  116. @endsection