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

<template>
  <div class="mark-detail-progress">
    <div class="box-justify part-box part-box-pad">
      <el-breadcrumb separator="|">
        <el-breadcrumb-item
          >考生人数：{{ summary.studentCount }}</el-breadcrumb-item
        >
        <el-breadcrumb-item
          >已扫描人数：{{ summary.uploadCount }}</el-breadcrumb-item
        >
        <el-breadcrumb-item
          >缺考人数：{{ summary.absentCount }}</el-breadcrumb-item
        >
        <el-breadcrumb-item
          >阅卷进度：{{ summary.percent || 0 }}%</el-breadcrumb-item
        >
      </el-breadcrumb>
      <div>
        <el-button type="primary" @click="initData">查询</el-button>
        <el-button
          type="primary"
          :loading="downloading"
          icon="el-icon-download"
          @click="toExport"
          >导出评卷员工作量</el-button
        >
      </div>
    </div>
    <div v-if="openMarkClass" class="part-box part-box-pad">
      <div class="part-box-head">
        <h3>班级评卷进度</h3>
      </div>

      <el-form label-position="left" label-width="0" inline>
        <el-form-item>
          <el-input
            v-model.trim="filter.className"
            placeholder="班级"
            clearable
          >
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getList(1)">查询</el-button>
        </el-form-item>
      </el-form>

      <el-table ref="TableList" :data="classList">
        <el-table-column
          prop="className"
          label="班级"
          min-width="200"
        ></el-table-column>
        <el-table-column
          class-name="action-column"
          label="评卷员"
          align="center"
          min-width="100"
        >
          <template slot-scope="scope">
            <el-button
              class="btn-primary"
              type="text"
              @click="toMarker(scope.row)"
              >{{ scope.row.markerCount }}</el-button
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="taskCount"
          label="任务总数"
          min-width="100"
        ></el-table-column>
        <el-table-column
          prop="markedCount"
          label="完成总数"
          min-width="100"
        ></el-table-column>
        <el-table-column
          prop="leftCount"
          label="剩余总数"
          min-width="100"
        ></el-table-column>
        <el-table-column prop="percent" label="评卷进度" min-width="100">
          <span slot-scope="scope">{{ scope.row.percent || 0 }}%</span>
        </el-table-column>
        <el-table-column
          class-name="action-column"
          label="待仲裁数"
          width="100"
          align="center"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-button
              class="btn-primary"
              type="text"
              @click="toArbitrate(scope.row)"
              >{{ scope.row.arbitrateCount }}</el-button
            >
          </template>
        </el-table-column>
        <el-table-column
          class-name="action-column"
          label="操作"
          width="100"
          align="center"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-button
              class="btn-primary"
              type="text"
              @click="toDetail(scope.row)"
              >查看详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="part-page">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :pager-count="5"
          :current-page="current"
          :total="total"
          :page-size="size"
          @current-change="toPage"
          @size-change="pageSizeChange"
        >
        </el-pagination>
      </div>
    </div>
    <div class="part-box part-box-pad">
      <div class="part-box-head">
        <h3>题目评卷进度</h3>
      </div>
      <el-table ref="TableList" :data="questionList">
        <el-table-column
          prop="questionNumber"
          label="评阅题目"
          width="120"
        ></el-table-column>
        <el-table-column
          class-name="action-column"
          label="评卷员"
          align="center"
          min-width="100"
        >
          <template slot-scope="scope">
            <el-button
              class="btn-primary"
              type="text"
              @click="toMarker(scope.row)"
              >{{ scope.row.markerCount }}</el-button
            >
          </template>
        </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="leftCount"
          label="剩余总数"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="currentCount"
          label="正在评卷"
          width="100"
        ></el-table-column>
        <el-table-column prop="percent" label="评卷进度" width="100">
          <span slot-scope="scope">{{ scope.row.percent || 0 }}%</span>
        </el-table-column>
        <el-table-column
          class-name="action-column"
          label="待仲裁数"
          width="100"
          align="center"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-button
              class="btn-primary"
              type="text"
              @click="toArbitrate(scope.row)"
              >{{ scope.row.arbitrateCount }}</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <class-mark-progress-dialog
      ref="ClassMarkProgressDialog"
      :data="curClass"
    />
  </div>
</template>

<script>
import {
  markProgressSummary,
  markProgressClassListPage,
  markProgressMarkerExport,
} from "../../api";
import { downloadByApi } from "@/plugins/download";
import ClassMarkProgressDialog from "./ClassMarkProgressDialog.vue";

export default {
  name: "mark-detail-progress",
  components: {
    ClassMarkProgressDialog,
  },
  props: {
    baseInfo: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      filter: {
        className: "",
      },
      size: this.GLOBAL.pageSize,
      current: 1,
      total: 0,
      classList: [],
      curClass: {},
      summary: {},
      questionList: [],
      curRow: {},
      openMarkClass: false,
      downloading: false,
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    async initData() {
      await this.getSummary();
      if (this.openMarkClass) this.toPage(1);
    },
    async getSummary() {
      const res = await markProgressSummary({
        examId: this.baseInfo.examId,
        paperNumber: this.baseInfo.paperNumber,
      });
      this.summary = res.totalInfo || {
        studentCount: "",
        uploadCount: "",
        absentCount: "",
        percent: "",
      };
      this.questionList = res.groupInfo || [];
      this.openMarkClass = res.openMarkClass;
    },
    async getList() {
      const datas = {
        examId: this.baseInfo.examId,
        paperNumber: this.baseInfo.paperNumber,
        ...this.filter,
        pageNumber: this.current,
        pageSize: this.size,
      };
      const data = await markProgressClassListPage(datas);
      if (!data) return;
      this.classList = data.records;
      this.total = data.total;
    },
    toPage(page) {
      this.current = page;
      this.getList();
    },
    toArbitrate(row) {
      if (row.className) this.$ls.set("preset-className", row.className);
      this.$ls.set("preset-questionId", row.questionId);
      this.$emit("to-menu", "arbitration");
    },
    toMarker(row) {
      if (row.className) this.$ls.set("preset-className", row.className);
      this.$ls.set("preset-questionId", row.questionId);
      this.$emit("to-menu", "marker");
    },
    async toExport() {
      if (this.downloading) return;
      this.downloading = true;

      const res = await downloadByApi(() => {
        return markProgressMarkerExport({
          examId: this.baseInfo.examId,
          courseId: this.baseInfo.courseId,
          paperNumber: this.baseInfo.paperNumber,
        });
      }).catch((e) => {
        this.$message.error(e || "下载失败，请重新尝试！");
      });
      this.downloading = false;

      if (!res) return;
      this.$message.success("下载成功！");
    },
    toDetail(row) {
      this.curClass = row;
      this.$refs.ClassMarkProgressDialog.open();
    },
  },
};
</script>