index.html 2.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. <style>
  2. </style>
  3. <div class="layui-fluid">
  4. <div class="layui-card">
  5. <div class="layui-card-body">
  6. <table id="{$lay_table}" lay-filter="{$lay_table}"></table>
  7. <script type="text/html" id="setTpl">
  8. <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="detail">
  9. <i class="layui-icon layui-icon-edit"></i>明细
  10. </a>
  11. <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="qrcode">
  12. <i class="layui-icon layui-icon-picture-fine"></i>评测二维码
  13. </a>
  14. </script>
  15. </div>
  16. </div>
  17. </div>
  18. <script>
  19. layui.use(['index', 'admin', 'form', 'table'], function () {
  20. const $ = layui.$;
  21. const admin = layui.admin;
  22. const form = layui.form;
  23. const table = layui.table;
  24. form.render();
  25. table.render({
  26. elem: '#{$lay_table}',
  27. url: "{:url('officer/listOfficer')}",
  28. cols: [
  29. [
  30. {field: 'id', title: 'ID' ,width: 150},
  31. {field: 'name', title: '试卷标题'},
  32. {title: '操作', width: 200, align: 'center', fixed: 'right', toolbar: '#setTpl'}
  33. ]
  34. ],
  35. page: true,
  36. limit: 50,
  37. cellMinWidth: 150,
  38. text: '对不起,加载出现异常!'
  39. });
  40. //监听工具条
  41. table.on('tool({$lay_table})', function (obj) {
  42. const data = obj.data;
  43. if (obj.event === 'detail') {
  44. const index = layer.open({
  45. type: 2,
  46. title: '考试明细',
  47. content: "{:url('officer/detail')}?id=" + data.id,
  48. maxmin: true,
  49. area: ['550px', '550px']
  50. });
  51. layer.full(index);
  52. } else if (obj.event === 'qrcode') {
  53. admin.req({
  54. url: "{:url('officer/qrcode')}?id=" + data.id,
  55. data: {
  56. id: data.id
  57. },
  58. done: function (res) {
  59. layer.photos({
  60. photos: {
  61. "title": "二维码", //相册标题
  62. "id": 1, //相册id
  63. "start": 0, //初始显示的图片序号,默认0
  64. "data": [ //相册包含的图片,数组格式
  65. {
  66. "alt": "二维码",
  67. "pid": 0, //图片id
  68. "src": res.data, //原图地址
  69. }
  70. ]
  71. }
  72. });
  73. }
  74. });
  75. }
  76. });
  77. });
  78. </script>