markingcloud
/
stmms-proxy


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>云阅卷本地代理工具</title>
    <meta name="viewport"
        content="width=device-width,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <div class="wp">
        <div class="hd">
            <div class="logo"><img src="img/logo.png" /></div>
            <span class="y"> 欢迎您，<span id="user-name"></span>
                <span class="pipe">|</span><a href="login.html">退出</a>
            </span>
        </div>
        <div class="cont">
            <div class="title cl" style="background:#FFF;">
                <span class="y">共有<b id="total-count">0</b>场考试，请选择</span>
                <h2>考试列表</h2>
            </div>
            <table cellpadding="0" cellspacing="0" width="100%" class="tablelist">
                <thead>
                    <th>ID</th>
                    <th>考试名称</th>
                    <th>创建时间</th>
                    <th>操作</th>
                </thead>
                <tbody id="exam-list">
                </tbody>
            </table>
            <div class="page">
                <span class="back" id="previous-button">上页</span>
                <div id="page-list">
                </div>
                <span class="next" id="next-button">下页</span>
            </div>
        </div>
        <div class="ft">Copyright © 2011-2020 www.qmth.com.cn, All Rights Reserved</div>
    </div>

    <script>
        const $ = require('jquery')
        const env = require('../lib/env.js')
        const api = require('../lib/api.js')
        const mustache = require('mustache')
        const examTemplate = '<tr><td>{{id}}</td>\
            <td>{{name}}</td><td>{{examTime}}</td>\
            <td><a href="##" data-index="{{index}}">进入考试</a></td></tr>'
        const pageTemplate = '<a href="##" data-number="{{number}}">{{number}}</a>'
        const pageSize = 10

        let examList = []
        let currentPage
        let pageCount
        $(document).ready(() => {
            env.merge(JSON.parse(window.localStorage.getItem('env')))
            $('#user-name').html(env.user.userName)

            api.getExams(1, 1000).then(list => {
                examList = list
                initPage()
            }).catch(err => {
                alert('获取考试列表失败\n' + (err || ''))
            })
        })

        function initPage() {
            let totalCount = examList.length
            if (totalCount > 0) {
                pageCount = totalCount % pageSize == 0 ? parseInt(totalCount / pageSize) : parseInt(totalCount /
                    pageSize) + 1
            } else {
                pageCount = 0
            }
            $('#total-count').html(totalCount)

            $('#page-list').empty()
            for (let i = 1; i <= pageCount; i++) {
                let dom = $(mustache.render(pageTemplate, {
                    number: i
                }))
                $('#page-list').append(dom)

                dom.click(function () {
                    changePage(parseInt($(this).attr('data-number')))
                })
            }
            $('#previous-button').click(() => {
                if (currentPage > 1) {
                    changePage(currentPage - 1)
                }
            })
            $('#next-button').click(() => {
                if (currentPage < pageCount) {
                    changePage(currentPage + 1)
                }
            })
            if (pageCount > 0) {
                changePage(1)
            }
        }

        function render() {
            $('#page-list').find('a').removeClass('on')
            $('#page-list').find('a[data-number="' + currentPage + '"]').addClass('on')

            $('#exam-list').empty()
            let start = (currentPage - 1) * pageSize
            let end = start + pageSize
            for (let i = start; i < end && i < examList.length; i++) {
                examList[i].index = i
                let dom = $(mustache.render(examTemplate, examList[i]))
                $('#exam-list').append(dom)

                dom.find('a').click(selectExam)
            }
        }

        function selectExam() {
            let exam = examList[parseInt($(this).attr('data-index'))]
            env.exam = exam
            env.examId = exam.id
            window.localStorage.setItem('env', JSON.stringify(env))
            window.location.href = 'index.html'
        }

        function changePage(pageNumber) {
            currentPage = pageNumber
            render()
        }
    </script>
</body>

</html>