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="openClassMark" 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">
          <template slot-scope="scope">
            <span>{{ scope.row.questionNumber }}</span>
            <el-tag
              v-if="scope.row.aiMark"
              class="tag-spin tag-wrap"
              size="medium"
              >AI智能评卷</el-tag
            >
          </template>
        </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-column
          class-name="action-column"
          label="操作"
          width="200"
          align="center"
          fixed="right"
        >
          <template slot-scope="scope">
            <template v-if="scope.row.aiMark">
              <el-button
                v-if="checkPrivilege('link', 'EnableAiMark', 'MarkManage')"
                class="btn-primary"
                type="text"
                @click="handleAiStatusUpdate(scope.row)"
                >{{ scope.row.enableAi ? "终止" : "开启" }}智能评卷</el-button
              >
              <el-button
                v-if="checkPrivilege('link', 'ResetAiMarkTask', 'MarkManage')"
                class="btn-primary"
                type="text"
                @click="handleAiReset(scope.row)"
                >重置AI智能评卷任务</el-button
              >
            </template>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <class-mark-progress-dialog
      ref="ClassMarkProgressDialog"
      :data="curClass"
    />
  </div>
</template>

<script>
import {
  markProgressSummary,
  markProgressClassListPage,
  markProgressMarkerExport,
  markProgressQuestionAiStatusUpdate,
  markProgressQuestionAiReset,
} 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: {},
      openClassMark: false,
      downloading: false,
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    async initData() {
      await this.getSummary();
      if (this.openClassMark) 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.openClassMark = res.classMark;
    },
    async handleAiStatusUpdate(row) {
      const actionName = row.enableAi ? "终止" : "开启";
      const confirm = await this.$confirm(
        `确定要${actionName}AI智能评卷任务？`,
        "提示",
        {
          type: "warning",
        }
      ).catch(() => {});
      if (confirm !== "confirm") return;

      await markProgressQuestionAiStatusUpdate({
        questionId: row.questionId,
        enableAi: !row.enableAi,
      });
      this.$message.success("操作成功");
      this.initData();
    },
    async handleAiReset(row) {
      const confirm = await this.$confirm(
        "确定要重置AI智能评卷任务？",
        "提示",
        {
          type: "warning",
        }
      ).catch(() => {});
      if (confirm !== "confirm") return;

      await markProgressQuestionAiReset(row.questionId);
      this.$message.success("重置成功");
      this.initData();
    },
    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,
        examId: this.baseInfo.examId,
        paperNumber: this.baseInfo.paperNumber,
      };
      this.$refs.ClassMarkProgressDialog.open();
    },
  },
};
</script>