index.html 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157
  1. <div class="layui-fluid">
  2. <div class="layui-card">
  3. <div class="layui-form layui-card-header layuiadmin-card-header-auto">
  4. <button class="layui-btn layuiadmin-btn" data-type="add">添加</button>
  5. </div>
  6. <div class="layui-card-body">
  7. <table id="{$lay_table}" lay-filter="{$lay_table}"></table>
  8. <script type="text/html" id="setOption">
  9. {{# d.option.forEach(function(v){ }}
  10. <button class="layui-btn layui-btn-normal layui-btn-sm">{{ v }}</button>
  11. {{# }) }}
  12. </script>
  13. <script type="text/html" id="setTpl">
  14. <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">
  15. <i class="layui-icon layui-icon-edit"></i>编辑
  16. </a>
  17. <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">
  18. <i class="layui-icon layui-icon-delete"></i>删除
  19. </a>
  20. <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="qrcode">
  21. <i class="layui-icon layui-icon-picture-fine"></i>查看二维码
  22. </a>
  23. <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="num">
  24. <i class="layui-icon layui-icon-form"></i>查看票数
  25. </a>
  26. <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="apply">
  27. <i class="layui-icon layui-icon-table"></i>投票明细
  28. </a>
  29. </script>
  30. </div>
  31. </div>
  32. </div>
  33. <script>
  34. layui.use(['index', 'admin', 'form', 'table'], function () {
  35. const $ = layui.$;
  36. const admin = layui.admin;
  37. const form = layui.form;
  38. const table = layui.table;
  39. form.render();
  40. table.render({
  41. elem: '#{$lay_table}',
  42. url: "{:url('vote/listVote')}",
  43. cols: [
  44. [
  45. {field: 'title', title: '标题', width: 200},
  46. {field: 'option', title: '选项', toolbar: '#setOption'},
  47. {field: 'start_time', title: '开始时间', width: 160, align: 'center'},
  48. {field: 'end_time', title: '结束时间', width: 160, align: 'center'},
  49. {field: 'create_time', title: '创建时间', width: 160, align: 'center'},
  50. {title: '操作', width: 430, align: 'center', fixed: 'right', toolbar: '#setTpl'}
  51. ]
  52. ],
  53. page: true,
  54. limit: 50,
  55. cellMinWidth: 150,
  56. text: '对不起,加载出现异常!'
  57. });
  58. form.on('submit({$lay_btn})', function (data) {
  59. table.reload('{$lay_table}', {
  60. where: data.field,
  61. page: {
  62. curr: 1
  63. }
  64. });
  65. });
  66. //事件
  67. const active = {
  68. add: function () {
  69. const index = layer.open({
  70. type: 2,
  71. title: '添加活动',
  72. content: "{:url('vote/voteForm')}",
  73. maxmin: true,
  74. area: ['550px', '550px']
  75. });
  76. layer.full(index);
  77. }
  78. };
  79. //监听工具条
  80. table.on('tool({$lay_table})', function (obj) {
  81. const data = obj.data;
  82. if (obj.event === 'del') {
  83. layer.confirm('确定删除吗?', function (index) {
  84. admin.req({
  85. url: "{:url('vote/delVote')}",
  86. data: {
  87. id: data.id
  88. },
  89. done: function (res) {
  90. layui.table.reload('{$lay_table}');
  91. }
  92. });
  93. layer.close(index);
  94. });
  95. } else if (obj.event === 'edit') {
  96. const index = layer.open({
  97. type: 2,
  98. title: '编辑活动',
  99. content: "{:url('vote/voteForm')}?id=" + data.id,
  100. maxmin: true,
  101. area: ['550px', '550px']
  102. });
  103. layer.full(index);
  104. } else if (obj.event === 'qrcode') {
  105. admin.req({
  106. url: "{:url('vote/qrcodeVote')}?id=" + data.id,
  107. data: {
  108. id: data.id
  109. },
  110. done: function (res) {
  111. layer.photos({
  112. photos: {
  113. "title": "二维码", //相册标题
  114. "id": 1, //相册id
  115. "start": 0, //初始显示的图片序号,默认0
  116. "data": [ //相册包含的图片,数组格式
  117. {
  118. "alt": "二维码",
  119. "pid": 0, //图片id
  120. "src": res.data, //原图地址
  121. }
  122. ]
  123. }
  124. });
  125. }
  126. });
  127. } else if (obj.event === 'num') {
  128. layer.open({
  129. type: 2,
  130. title: '查看票数',
  131. content: "{:url('vote/showNum')}?id=" + data.id,
  132. maxmin: true,
  133. area: ['550px', '550px']
  134. });
  135. } else if (obj.event === 'apply') {
  136. layer.open({
  137. type: 2,
  138. title: '投票明细',
  139. content: "{:url('vote/applyVote')}?id=" + data.id,
  140. maxmin: true,
  141. area: ['700px', '550px']
  142. });
  143. }
  144. });
  145. $('.layui-btn.layuiadmin-btn').on('click', function () {
  146. const type = $(this).data('type');
  147. active[type] ? active[type].call(this) : '';
  148. });
  149. });
  150. </script>