tnbapp/src/views/exam/ExamPaperList.vue

<template>
  <el-container>
    <el-header height="220">
      <el-row>
        <el-select
          v-model="queryInfo.subjectId"
          clearable
          placeholder="请选择科目"
          style="margin-left: 5px"
          @change="subjectChange"
        >
          <el-option
            v-for="item in allSubject"
            :key="item.key"
            :label="item.value"
            :value="item.key"
          />
        </el-select>
        <el-button type="plain" icon="el-icon-plus" style="margin-left: 5px" @click="addExamPaper">添加</el-button>
      </el-row>
    </el-header>

    <el-main>
      <el-table
        :data="dataList"
        border
        style="width: 100%"
      >
        <el-table-column
          fixed="left"
          label="No"
          type="index"
        />
        <el-table-column
          prop="paperName"
          label="试卷名称"
          width="150"
        />
        <el-table-column
          prop="subject"
          label="所属科目"
          width="90"
        />
        <el-table-column
          prop="startTime"
          label="考试时间"
          width="150"
        />
        <el-table-column
          prop="duration"
          label="考试时长(分钟)"
          width="150"
        />
        <el-table-column
          prop="totalScore"
          label="试卷总分"
        />
        <el-table-column
          prop="scope"
          label="试卷用户"
        >
          <template slot-scope="scope">
            <el-tag
              v-if="scope.row.scope === 1"
              size="mini"
            >所有用户</el-tag>
            <el-tag
              v-else
              size="mini"
              type="success"
            >VIP用户</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="markType"
          label="阅卷类型"
        >
          <template slot-scope="scope">
            <el-tag
              v-if="scope.row.markType === 1"
              size="mini"
            >管理员阅卷</el-tag>
            <el-tag
              v-else
              size="mini"
              type="success"
            >自主阅卷</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="测评码"
        >
          <template slot-scope="scope">
            <el-tag
              v-if="scope.row.passcode === undefined"
              size="mini"
            >不需要</el-tag>
            <el-tag
              v-else
              size="mini"
              type="success"
            >{{ scope.row.passcode }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="状态"
        >
          <template slot-scope="scope">
            <el-tag
              v-if="scope.row.expired"
              size="mini"
              type="danger"
            >已过期</el-tag>
            <el-tag
              v-else
              size="mini"
              type="success"
            >未过期</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="320"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="warning"
              @click="previewPaper(scope.$index, scope.row)"
            >预览</el-button>
            <el-button
              size="mini"
              type="warning"
              @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        :small="screenWidth <= 768"
        layout="prev, pager, next"
        :page-size="pageSize"
        :current-page="currentPage"
        :total="totalSize"
        @current-change="handleCurrentChange"
        @prev-click="handleCurrentChange"
        @next-click="handleCurrentChange"
      />
    </el-main>
  </el-container>
</template>

<script>
import { getSubjectKV, getPapers, deletePaper } from '@/api/exam'

export default {
  name: 'ExamPaperList',
  data() {
    return {
      // 屏幕宽度, 为了控制分页条的大小
      screenWidth: document.body.clientWidth,
      currentPage: 1,
      pageSize: 20,
      totalSize: 0,
      dataList: [],
      // **********************************************************************
      queryInfo: {
        subjectId: null,
        pageNumber: 1,
        pageSize: 10
      },
      allSubject: []
    }
  },
  created() {
    document.title = '试卷管理'
    this.getData(this.queryInfo)
    this.getSubjects()
  },
  methods: {
    handleCurrentChange(pageNumber) {
      this.currentPage = pageNumber
      this.queryInfo.pageNumber = this.currentPage
      this.queryInfo.pageSize = this.pageSize
      this.getData(this.queryInfo)
      // 回到顶部
      scrollTo(0, 0)
    },
    getData(queryInfo) {
      getPapers(queryInfo).then(resp => {
        if (resp.code === 0) {
          this.dataList = resp.data.list
          this.totalSize = resp.data.totalSize
        } else {
          this.$notify({
            title: '提示',
            message: resp.msg,
            type: 'warning',
            duration: 3000
          })
        }
      }).catch(error => {
        this.$notify({
          title: '提示',
          message: error.message,
          type: 'error',
          duration: 3000
        })
      })
    },
    getSubjects() {
      getSubjectKV().then((resp) => {
        if (resp.code === 0) {
          this.allSubject = resp.data
        }
      })
    },
    // 题库变化
    subjectChange(val) {
      this.queryInfo.subjectId = val
      this.queryInfo.pageNumber = this.currentPage
      this.queryInfo.pageSize = this.pageSize
      this.getData(this.queryInfo)
    },
    handleDelete(index, row) {
      this.$confirm('确定要删除 ' + row.paperName + '?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deletePaper(row.paperId).then(resp => {
          if (resp.code === 0) {
            this.$notify({
              title: '提示',
              message: '稿件已删除',
              type: 'warning',
              duration: 3000
            })
            this.$router.go(0)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    addExamPaper() {
      this.$router.push('/exam/paper/add')
    },
    previewPaper(index, row) {
      const paperId = row.paperId
      const routeUrl = this.$router.resolve({
        path: '/exam/paper/detail',
        query: {
          paperId: paperId,
          viewType: 1,
          userId: ''
        }
      })
      window.open(routeUrl.href, '_blank')
    }
  }
}
</script>

<style>
</style>