msyj-admin-org/src/modules/main/WorkOverview.vue

<template>
  <div class="overview">
    <div class="overview-head" v-if="overviewInfo.workName">
      <div class="overview-bg-person"></div>
      <h1 class="overview-title">{{ overviewInfo.workName }}</h1>
      <ul class="overview-infos">
        <li>
          <span><i class="icon ivu-icon-student"></i></span>
          <span>考生总数：</span>
          <span>{{ overviewInfo.stuTotalCount }}</span>
        </li>
        <li>
          <span><i class="icon ivu-icon-area"></i></span>
          <span>考区数：</span>
          <span>{{ overviewInfo.questionCount }}</span>
        </li>
      </ul>
      <div class="overview-actions">
        <Button
          icon="md-download"
          shape="circle"
          @click="download(exportGradeScoreUrl)"
          >导出档位成绩</Button
        >
        <Button
          icon="md-download"
          shape="circle"
          @click="download(exportScoreUrl)"
          >导出分数成绩</Button
        >
      </div>
    </div>
    <div class="overview-body">
      <div
        class="overview-subject"
        v-for="(subject, index) in overviewInfo.subjectOverviews"
        :key="index"
      >
        <div class="subject-content">
          <h2 class="subject-name">{{ subject.subjectName }}</h2>
          <ul class="subject-infos">
            <li>
              <p>已上传</p>
              <p>{{ subject.uploadedCount }}</p>
            </li>
            <li>
              <p>未采集</p>
              <p>{{ subject.leftCount }}</p>
            </li>
            <li>
              <p>进度</p>
              <p>{{ subject.progress }}</p>
            </li>
          </ul>
          <div class="subject-actions">
            <p>当前阶段</p>
            <p>{{ subject.markStageName }}</p>
            <div class="subject-actions-detail">
              <Button
                icon="upload icon"
                shape="circle"
                @click="toUploadManual(subject)"
                >导入缺考名单</Button
              >
              <br />
              <Button
                icon="md-download"
                shape="circle"
                @click="download(subject.exportAbsentDataUrl)"
                >导出缺考名单</Button
              >
            </div>
          </div>
          <Button
            type="primary"
            shape="circle"
            @click="toCommit(subject)"
            style="width: 120px;"
            >评卷管理</Button
          >
        </div>
      </div>
    </div>
    <!-- import student  -->
    <import-file
      title="导入缺考名单"
      :upload-url="uploadUrl"
      :upload-data="uploadData"
      :download-url="downloadManualTemplateUrl"
      :download-filename="downloadManualTemplateFilename"
      :headers="headers"
      :format="['xls', 'xlsx']"
      @upload-success="uploadSuccess"
      ref="ImportManual"
    >
    </import-file>
  </div>
</template>

<script>
import { workOverviewDetail } from "@/api";
import { SUBJECT_STAGE } from "@/constants/enumerate";
import ImportFile from "@/components/common/ImportFile";

export default {
  name: "overview",
  components: { ImportFile },
  data() {
    return {
      workId: this.$route.params.workId,
      SUBJECT_STAGE,
      exportGradeScoreUrl: "",
      exportScoreUrl: "",
      overviewInfo: {
        subjectOverviews: []
      },
      // upload
      headers: {
        Authorization: this.$ls.get("user", { token: "" }).token,
        workId: this.$route.params.workId,
        userId: this.$ls.get("user", { id: "" }).id
      },
      uploadData: {
        workId: this.$route.params.workId,
        subject: ""
      },
      uploadUrl: "/api/import/students/missingStudent",
      downloadManualTemplateUrl: "/templates/导入缺考名单-模板.xlsx",
      downloadManualTemplateFilename: "导入缺考名单-模板.xlsx"
    };
  },
  mounted() {
    this.getDetail();
    this.exportGradeScoreUrl = `${this.GLOBAL.domain}/api/export/score/exportLevelResult?workId=${this.workId}`;
    this.exportScoreUrl = `${this.GLOBAL.domain}/api/export/score/exportScoreResult?workId=${this.workId}`;
  },
  methods: {
    async getDetail() {
      const data = await workOverviewDetail(this.workId);
      data.subjectOverviews.map(item => {
        item.markStageName = SUBJECT_STAGE[item.markStage];
        item.exportAbsentDataUrl = `${this.GLOBAL.domain}/api/export/users/${this.workId}/${item.subject}/export`;
        item.progress =
          item.uploadedCount + item.leftCount
            ? (
                (100 * item.uploadedCount) /
                (item.uploadedCount + item.leftCount)
              ).toFixed(1) + "%"
            : "0.0%";
      });
      this.overviewInfo = data;
    },
    download(url) {
      window.open(this.urlAddAuthor(url));
    },
    toUploadManual(subject) {
      this.uploadData.subject = subject.subject;
      this.$refs.ImportManual.open();
    },
    uploadSuccess() {
      this.$Message.success("导入成功！");
    },
    toCommit(subject) {
      const routerName = subject.markStage === "SCORE" ? "Mark" : "Grading";
      this.$router.push({
        name: routerName,
        params: { workId: this.workId, subjectId: subject.subjectId }
      });
    }
  }
};
</script>