teachcloud-print-web/src/modules/exam-center/views/ExamTaskAuditEdit.vue

<template>
  <div class="exam-task-audit-edit task-detail">
    <div class="task-title">
      <h2>
        <span>考试名称： {{ task.examName }} </span>
        <span>科目名称：{{ task.courseName }}</span>
      </h2>
    </div>
    <div class="task-body">
      <table class="table">
        <tr>
          <th>试卷类型</th>
          <th v-if="task.examPaper">试卷文件</th>
          <th v-if="task.examPaper">试卷审核确认书</th>
          <th v-if="task.answerSheet">答题卡</th>
        </tr>
        <tr v-for="(attachment, index) in paperAttachments" :key="index">
          <td>{{ attachment.name }}卷</td>
          <td class="td-link" v-if="task.examPaper">
            <span @click="downloadPaper(attachment)" title="点击下载试卷">
              <i class="icon icon-download-act"></i>{{ attachment.filename }}
            </span>
          </td>
          <td
            class="td-link"
            :rowspan="pTypeEnable ? paperAttachments.length : 1"
            v-if="index === 0 && task.examPaper"
          >
            <span @click="downloadPaperConfirm" title="点击下载确认书文件">
              <i class="icon icon-download-act"></i
              >{{ paperConfirmAttachmentId.filename }}
            </span>
          </td>
          <td
            class="td-link"
            :rowspan="pTypeEnable ? paperAttachments.length : 1"
            v-if="index === 0 && task.answerSheet"
          >
            <span @click="toPreviewCard" title="点击预览答题卡内容">{{
              task.cardName
            }}</span>
          </td>
        </tr>
      </table>

      <!-- task-form -->
      <el-form
        ref="ModalForm"
        :model="modalForm"
        :rules="rules"
        label-width="180px"
        style="min-width:800px;"
      >
        <el-form-item prop="status" label="审核结果：">
          <el-radio-group v-model="modalForm.status" :disabled="hasAudited">
            <el-radio
              v-for="item in AUDIT_TYPE"
              :key="item.key"
              :label="item.key"
              >{{ item.name }}</el-radio
            >
          </el-radio-group>
        </el-form-item>
        <el-form-item
          prop="remark"
          label="审核意见："
          v-if="modalForm.status === 2"
        >
          <el-input
            type="textarea"
            style="width: 439px;"
            v-model.trim="modalForm.remark"
            :disabled="hasAudited"
            :maxlength="200"
            :rows="5"
            show-word-limit
            placeholder="请输入审核意见"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            :disabled="isSubmit"
            @click="save"
            v-if="!hasAudited"
            >提交</el-button
          >
          <el-button @click="goback">{{
            hasAudited ? "返回" : "取消"
          }}</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { waitTaskDetail, auditExamTask } from "../api";
import { attachmentPreview } from "../../login/api";

export default {
  name: "exam-task-audit-edit",
  data() {
    return {
      taskId: this.$route.params.taskId,
      task: {},
      pTypeEnable: false,
      paperConfirmAttachmentId: {},
      paperAttachments: [],
      curAttachment: {},
      isSubmit: false,
      hasAudited: false,
      AUDIT_TYPE: [
        {
          key: 1,
          name: "通过"
        },
        {
          key: 2,
          name: "不通过"
        }
      ],
      modalForm: { status: 1, remark: "" },
      rules: {
        status: [
          {
            required: true,
            message: "请选择审核结果",
            trigger: "change"
          }
        ],
        remark: [
          {
            required: true,
            message: "请输入审核意见",
            trigger: "change"
          }
        ]
      }
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    async getData() {
      const data = await waitTaskDetail(this.taskId);
      const nameCode = data.courseNameCode.split(/\(|\)/);
      this.task = Object.assign(this.task, data, {
        courseName: nameCode[0],
        courseCode: nameCode[1]
      });
      this.pTypeEnable = this.task.enablePaperType.split(",").length > 1;
      this.parsePaperAttachment();
      this.paperConfirmAttachmentId = this.task.paperConfirmAttachmentId
        ? JSON.parse(this.task.paperConfirmAttachmentId)
        : { attachmentId: "", filename: "" };
      this.hasAudited = this.task.auditStatus !== 0;
      this.modalForm = {
        status: this.hasAudited ? data.auditStatus : 1,
        remark: data.remark
      };
    },
    parsePaperAttachment() {
      const paperAttachment =
        this.task.paperAttachmentId && JSON.parse(this.task.paperAttachmentId);
      if (!paperAttachment) return;

      this.paperAttachments = paperAttachment.paper;
    },
    async downloadPaper(attachment) {
      const data = await attachmentPreview(attachment.attachmentId);
      window.open(data.path);
    },
    async downloadPaperConfirm() {
      if (!this.paperConfirmAttachmentId.attachmentId) return;
      const data = await attachmentPreview(
        this.paperConfirmAttachmentId.attachmentId
      );
      window.open(data.path);
    },
    toPreviewCard() {
      window.open(
        this.getRouterPath({
          name: "CardPreview",
          params: {
            cardId: this.task.cardId,
            viewType: "view"
          }
        })
      );
    },
    async save() {
      const valid = await this.$refs["ModalForm"].validate().catch(() => {});
      if (!valid) return;

      if (this.isSubmit) return;
      this.isSubmit = true;
      const datas = {
        ...this.modalForm,
        taskId: this.taskId,
        examId: this.task.examId
      };
      const result = await auditExamTask(datas).catch(() => {});
      this.isSubmit = false;
      if (!result) return;

      this.$message.success("审核成功！");
      this.goback();
    }
  }
};
</script>