exam-list.html 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>云阅卷本地代理工具</title>
  6. <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
  7. <link rel="stylesheet" href="css/style.css">
  8. </head>
  9. <body>
  10. <div class="wp">
  11. <div class="hd">
  12. <div class="logo"><img src="img/logo.png" /></div>
  13. <span class="y"> 欢迎您,<span id="user-name"></span>
  14. <span id="school-switch" style="display:none">
  15. <span class="pipe">|</span><a href="school-list.html"></a>
  16. </span>
  17. <span class="pipe">|</span><a href="login.html">退出</a>
  18. </span>
  19. </div>
  20. <div class="cont">
  21. <div class="title cl" style="background:#FFF;">
  22. <span class="y">共有<b id="total-count">0</b>场考试,请选择</span>
  23. <h2>考试列表</h2>
  24. </div>
  25. <table cellpadding="0" cellspacing="0" width="100%" class="tablelist">
  26. <thead>
  27. <th>ID</th>
  28. <th>考试名称</th>
  29. <th>创建时间</th>
  30. <th>操作</th>
  31. </thead>
  32. <tbody id="exam-list">
  33. </tbody>
  34. </table>
  35. <div class="page">
  36. <span class="back" id="previous-button">上页</span>
  37. <div id="page-list">
  38. </div>
  39. <span class="next" id="next-button">下页</span>
  40. </div>
  41. </div>
  42. <div class="ft">Copyright © 2011-2020 www.qmth.com.cn, All Rights Reserved</div>
  43. </div>
  44. <script>
  45. const $ = require('jquery')
  46. const env = require('../lib/env.js')
  47. const api = require('../lib/api.js')
  48. const mustache = require('mustache')
  49. const examTemplate = '<tr><td>{{id}}</td>\
  50. <td>{{name}}</td><td>{{examTime}}</td>\
  51. <td><a href="##" data-index="{{index}}">进入考试</a></td></tr>'
  52. const pageTemplate = '<a href="##" data-number="{{number}}">{{number}}</a>'
  53. const pageSize = 10
  54. let examList = []
  55. let currentPage
  56. let pageCount
  57. $(document).ready(() => {
  58. env.merge(JSON.parse(window.localStorage.getItem('env')))
  59. $('#user-name').html(env.user.userName)
  60. let schoolName = env.getSchoolName()
  61. if (schoolName != undefined) {
  62. $('#school-switch').find('a').html(schoolName)
  63. $('#school-switch').show()
  64. }
  65. api.getExams(1, 1000, env.user.schoolId).then(list => {
  66. examList = list
  67. initPage()
  68. }).catch(err => {
  69. alert('获取考试列表失败\n' + (err || ''))
  70. })
  71. })
  72. function initPage() {
  73. let totalCount = examList.length
  74. if (totalCount > 0) {
  75. pageCount = totalCount % pageSize == 0 ? parseInt(totalCount / pageSize) : parseInt(totalCount / pageSize) + 1
  76. } else {
  77. pageCount = 0
  78. }
  79. $('#total-count').html(totalCount)
  80. $('#page-list').empty()
  81. for (let i = 1; i <= pageCount; i++) {
  82. let dom = $(mustache.render(pageTemplate, {
  83. number: i
  84. }))
  85. $('#page-list').append(dom)
  86. dom.click(function() {
  87. changePage(parseInt($(this).attr('data-number')))
  88. })
  89. }
  90. $('#previous-button').click(() => {
  91. if (currentPage > 1) {
  92. changePage(currentPage - 1)
  93. }
  94. })
  95. $('#next-button').click(() => {
  96. if (currentPage < pageCount) {
  97. changePage(currentPage + 1)
  98. }
  99. })
  100. if (pageCount > 0) {
  101. changePage(1)
  102. }
  103. }
  104. function render() {
  105. $('#page-list').find('a').removeClass('on')
  106. $('#page-list').find('a[data-number="' + currentPage + '"]').addClass('on')
  107. $('#exam-list').empty()
  108. let start = (currentPage - 1) * pageSize
  109. let end = start + pageSize
  110. for (let i = start; i < end && i < examList.length; i++) {
  111. examList[i].index = i
  112. let dom = $(mustache.render(examTemplate, examList[i]))
  113. $('#exam-list').append(dom)
  114. dom.find('a').click(selectExam)
  115. }
  116. }
  117. function selectExam() {
  118. let exam = examList[parseInt($(this).attr('data-index'))]
  119. env.exam = exam
  120. env.examId = exam.id
  121. window.localStorage.setItem('env', JSON.stringify(env))
  122. window.location.href = 'index.html'
  123. }
  124. function changePage(pageNumber) {
  125. currentPage = pageNumber
  126. render()
  127. }
  128. </script>
  129. </body>
  130. </html>