front/src/views/evaluating/scoring.vue

<template>
  <div class="app-container">
    <form-search
      :searchformShow="{ subjectid: '', gradeid: '', semester: '', exam: '' }"
      @handleQuery="handleQuery"
      @resetQuery="resetQuery"
    ></form-search>
    <evaluation-title
      title="测评试卷"
      :subTitle="`共有${total}个内容`"
    ></evaluation-title>
    <el-row :gutter="10">
      <el-col
        class="evaluation-card-wrapper"
        v-for="(item, idx) in dataList"
        :key="idx"
        :xs="12"
        :sm="8"
        :md="8"
        :lg="6"
        :xl="6"
      >
        <evaluation-card
          @click.native="detail(item)"
          :title="item.name"
          :sub-title="item.subjectName"
          :state-options="mxGlobal.MergeEvalInspectionStates(item.stateStr)"
          :state="item.stateStr"
          :proportion="item.scoringType == 1 ? '自阅卷' : '老师阅卷'"
        ></evaluation-card>
      </el-col>
    </el-row>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      :page-size="20"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { getEvaluationForTest } from '@/api/webApi/studentEvaluating'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import IconSelect from '@/components/IconSelect'
import transferMixin from '@/components/mx-transfer-mixin'

export default {
  mixins: [transferMixin],
  name: 'Menu',
  components: { Treeselect, IconSelect },
  data() {
    return {
      total: 0,

      // 遮罩层
      loading: true,
      // 显示状态数据字典
      visibleOptions: [],
      // 菜单状态数据字典
      statusOptions: [],
      // 查询参数
      queryParams: {
        classId: '',
        catalogId: '1',
        pageNum: 1,
        pageSize: 20
      },
      dataList: [],
      viewName: ''
    }
  },
  created() {
    this.viewName = this.$route.name
    this.handleQuery()
  },
  methods: {
    detail(item) {
      if (item.evaluationClassId) {
        this.transferTo('/evaluating/answer', { evaluationClassId: item.evaluationClassId })
      } else {
        this.$message.error(item.stateStr + '状态不能查看试卷！')
      }
    },
    /** 测评列表 */
    getList() {
      this.loading = true
      let Ajax = {
        catalogId: this.queryParams.catalogId,
        pageNum: this.queryParams.pageNum,
        pageSize: this.queryParams.pageSize,
        subjectId: this.queryParams.subjectid,
        gradeId: this.queryParams.gradeid,
        termId: this.queryParams.semester,
        typeId: this.queryParams.exam,
        examineeType: '1' // 区分"测评"页
      }
      getEvaluationForTest(Ajax)
        .then((response) => {
          this.dataList = response.rows
          this.total = response.total
          this.loading = false
        })
        .catch((err) => {
          this.loading = false
        })
    },
    /** 搜索按钮操作 */
    handleQuery(data = {}) {
      this.queryParams.gradeid = data.gradeid
      this.queryParams.subjectid = data.subjectid
      this.queryParams.semester = data.semester
      this.queryParams.exam = data.exam
      this.getList()
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },

    /** 重置按钮操作 */
    resetQuery(data) {
      this.handleQuery()
    }
  }
}
</script>