teachcloud-print-web/src/modules/mark/components/markDetail/ClassMarkProgressDialog.vue

<template>
  <el-dialog
    class="class-mark-progress-dialog"
    :visible.sync="modalIsShow"
    :title="data.className"
    top="10vh"
    width="500px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    @opened="visibleChange"
    @close="closeHandle"
  >
    <el-table :data="dataList">
      <el-table-column
        prop="groupQuestions"
        label="评阅题目"
        width="120"
      ></el-table-column>
      <el-table-column
        prop="taskCount"
        label="任务总数"
        width="100"
      ></el-table-column>
      <el-table-column
        prop="markedCount"
        label="完成总数"
        width="100"
      ></el-table-column>
      <el-table-column prop="loginName" label="评卷员" min-width="100">
        <template slot-scope="scope">
          {{ scope.row.name }}（{{ scope.row.loginName }}）
        </template>
      </el-table-column>
    </el-table>
    <div slot="footer"></div>
  </el-dialog>
</template>

<script>
import { markProgressClassQuestionListPage } from "../../api";

export default {
  name: "class-mark-progress-dialog",
  props: {
    data: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      modalIsShow: false,
      dataList: [],
    };
  },
  methods: {
    visibleChange() {
      this.initData();
    },
    closeHandle() {
      this.dataList = [];
    },
    cancel() {
      this.modalIsShow = false;
    },
    open() {
      this.modalIsShow = true;
    },
    async initData() {
      const res = await markProgressClassQuestionListPage(this.data);
      this.dataList = res || [];
    },
  },
};
</script>