山东大学软件学院项目实训第三周

考试管理部分的前端主要需要对后端生成的试卷进行渲染展示到前端界面中，我们使用Vue对前端界面进行了渲染，使考试题目可以正常的展示到前端中。

下面是前端渲染的一些代码

<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="listQuery.paperName" placeholder="搜索试卷名称" clearable style="width: 200px;margin-right: 15px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-select v-model="listQuery.langId" placeholder="搜索科目" clearable style="width: 200px;margin-right: 15px;" class="filter-item" @change="handleFilter">
        <el-option v-for="item in langOptions" :key="item.key" :label="item.label" :value="item.key" />
      </el-select>
      <el-select v-model="listQuery.paperType" placeholder="搜索试卷类型" clearable style="width: 200px;margin-right: 15px;" class="filter-item" @change="handleFilter">
        <el-option v-for="item in paperTypeOptions" :key="item.key" :label="item.label" :value="item.key" />
      </el-select>
      <el-button v-waves class="filter-item" style="margin-right: 10px;" type="primary" icon="el-icon-search" @click="handleFilter">
        搜索
      </el-button>
      <el-button v-waves class="filter-item" style="margin-left: 0;margin-right: 10px;" type="primary" icon="el-icon-edit-outline" @click="handleFixedCreate">
        固定组卷
      </el-button>
      <el-button v-waves class="filter-item" style="margin-left: 0;margin-right: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">
        随机组卷
      </el-button>
      <div><span style="color: #FF0000"><i class="el-icon-warning" style="margin-right: 10px"/>鼠标右键单击选中行可查看试卷详情</span></div>
    </div>

    <el-table
      v-loading="listLoading"
      :key="tableKey"
      :data="list"
      :default-sort = "{prop: 'id', order: 'ascending'}"
      border
      fit
      highlight-current-row
      style="width: 100%;"
      @row-contextmenu="seePaperDetail"
    >
      <el-table-column label="序号" prop="id" sortable align="center" width="90">
        <template slot-scope="scope">
          <span>{
  
  { scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="试卷名称" align="center">
        <template slot-scope="scope">
          <span>{
  
  { scope.row.paperName }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="langName" sortable label="所属科目" align="center" width="110">
        <template slot-scope="scope">
          <viewer>
            <img :src="scope.row.langImgSrc" style="width: 40px;height: 40px;border-radius: 20px;">
          </viewer>
          <div>{
  
  { scope.row.langName }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="paperDuration" sortable label="考试时长" align="center" width="110">
        <template slot-scope="scope">
          <span>{
  
  { scope.row.paperDuration/60 }}分钟</span>
        </template>
      </el-table-column>
      <el-table-column prop="paperDifficulty" sortable label="难度系数" align="center" width="142">
        <template slot-scope="scope">
          <el-rate
            v-model="scope.row.paperDifficulty"
            disabled
            text-color="#ff9900"
            score-template="{value}"/>
        </template>
      </el-table-column>
      <el-table-column label="考试注意事项" width="120" align="center">
        <template slot-scope="scope">
          <span>{
  
  { scope.row.paperAttention || '暂无考试注意事项' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="paperType" sortable label="试卷类型" align="center" width="110">
        <template slot-scope="scope">
          <span>{
  
  { scope.row.paperType===1?'随机组卷':'固定组卷' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="totalScore" sortable label="试卷总分" align="center" width="110">
        <template slot-scope="scope">
          <span>{
  
  { scope.row.totalScore }}分</span>
        </template>
      </el-table-column>
      <el-table-column prop="participateNum" sortable label="已参加人数" align="center" width="120">
        <template slot-scope="scope">
          <span>{
  
  { scope.row.participateNum }}人</span>
        </template>
      </el-table-column>
      <el-table-column prop="paperCreateTime" sortable label="试卷创建时间" align="center" width="155">
        <template slot-scope="scope">
          <span >{
  
  { scope.row.paperCreateTime | date-format }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding" width="122">
        <template slot-scope="{row}">
          <el-button v-waves type="danger" icon="el-icon-delete" size="mini" @click="confirmDeletePaper(ro