teachcloud-print-web/src/modules/exam/components/ModifyTaskPaper.vue

<template>
  <div class="modify-task-paper">
    <el-dialog
      class="task-detail"
      :visible.sync="modalIsShow"
      :title="title"
      top="10vh"
      width="900px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      append-to-body
      @open="visibleChange"
    >
      <div class="part-box part-box-pad part-box-border">
        <el-form class="form-info" label-width="100px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="试卷编号：">
                <span>{{ instance.paperNumber }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="课程（代码）：">
                <span>
                  {{ instance.courseName }}（{{ instance.courseCode }}）
                </span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="卷型：">
                <span>{{ instance.paperType }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="命题老师：">
                <span>{{ instance.userName }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="已曝光：">
                <span>{{
                  instance.exposedPaperType | defaultFieldFilter
                }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="未曝光：">
                <span>{{
                  instance.unexposedPaperType | defaultFieldFilter
                }}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>

      <div class="part-box part-box-pad part-box-border">
        <div v-if="IS_EDIT" class="mb-2 text-right">
          <el-button
            type="primary"
            icon="el-icon-circle-plus-outline"
            @click="addAtachment"
            >增加卷型</el-button
          >
        </div>
        <table class="table">
          <tr>
            <th>试卷类型</th>
            <th>试卷文件</th>
            <th>答题卡</th>
            <th v-if="IS_EDIT">操作</th>
          </tr>
          <tr v-for="(attachment, index) in paperAttachments" :key="index">
            <td>{{ attachment.name }}卷</td>
            <td class="td-link">
              <span
                v-if="attachment.editable && IS_EDIT"
                @click="toUpload(attachment)"
                title="点击上传试卷"
              >
                <i
                  :class="[
                    'icon',
                    attachment.attachmentId ? 'icon-files-act' : 'icon-files'
                  ]"
                ></i
                >{{
                  attachment.attachmentId
                    ? attachment.filename
                    : "点击上传试卷文件"
                }}
              </span>
              <span
                v-else
                @click="downloadPaper(attachment)"
                title="点击查看试卷"
              >
                <i
                  class="icon icon-download-act"
                  v-if="attachment.attachmentId"
                ></i>
                <i>{{ attachment.filename }}</i>
              </span>
            </td>
            <td
              class="td-link"
              :rowspan="paperAttachments.length"
              v-if="index === 0"
            >
              <span v-if="CAN_EDIT_CARD" @click="toCreateOrViewCard"
                ><i class="icon icon-plus-act"></i>{{ cardTodoName }}</span
              >
              <span v-else @click="toViewCard">
                <i class="icon icon-circle-right"></i>
                <i>查看题卡</i>
              </span>
            </td>
            <td v-if="IS_EDIT">
              <el-button
                v-if="attachment.editable"
                class="btn-primary"
                type="text"
                icon="icon icon-delete"
                title="删除"
                @click="deleteAttachment(index)"
              ></el-button>
            </td>
          </tr>
        </table>
      </div>

      <div slot="footer">
        <el-button
          v-if="IS_EDIT"
          type="primary"
          :disabled="isSubmit"
          @click="submit"
          >确认提交</el-button
        >
        <el-button @click="cancel">取消</el-button>
      </div>
    </el-dialog>

    <!-- upload-paper-dialog -->
    <upload-paper-dialog
      :paper-attachment="curAttachment"
      :upload-type="curUploadType"
      @confirm="uploadConfirm"
      ref="UploadPaperDialog"
    ></upload-paper-dialog>
    <!-- card-option-dialog -->
    <card-option-dialog
      ref="CardOptionDialog"
      :data="curTaskApply"
      @confirm="cardConfirm"
    ></card-option-dialog>
  </div>
</template>

<script>
import UploadPaperDialog from "./UploadPaperDialog";
import CardOptionDialog from "./CardOptionDialog";
import { taskApplyDetail, taskPaperApplyEdit } from "../api";
import { attachmentPreview } from "../../login/api";
import { examRuleDetail } from "../../base/api";

const initTaskApply = {
  examTaskId: "",
  paperType: "A",
  paperAttachmentIds: "",
  cardId: "",
  cardRuleId: "",
  makeMethod: "",
  courseCode: "",
  courseName: "",
  // 题卡状态
  status: "",
  // 考务规则
  includePaper: false,
  customCard: false
};

export default {
  name: "preview-task-paper",
  components: { UploadPaperDialog, CardOptionDialog },
  props: {
    instance: {
      type: Object,
      default() {
        return {};
      }
    },
    editType: {
      type: String,
      default: "PREVIEW",
      validator: val => ["EDIT", "PREVIEW"].includes(val)
    }
  },
  computed: {
    title() {
      const names = {
        EDIT: "申请编辑卷库",
        PREVIEW: "卷库详情"
      };
      return names[this.editType];
    },
    IS_PREVIEW() {
      return this.editType === "PREVIEW";
    },
    IS_EDIT() {
      return this.editType === "EDIT";
    },
    CAN_EDIT_CARD() {
      return this.editType === "EDIT" && !this.instance.exposedPaperType;
    },
    cardTodoName() {
      let name = "查看题卡";
      if (this.CAN_EDIT_CARD) {
        if (this.curTaskApply.makeMethod === "SELECT") {
          name = "选择题卡";
        } else {
          name = "编辑题卡";
        }
      }
      return name;
    }
  },
  data() {
    return {
      isSubmit: false,
      modalIsShow: false,
      curTaskApply: { ...initTaskApply },
      paperAttachments: [],
      paperConfirmAttachments: [],
      curAttachment: {},
      curUploadType: "paper",
      abc: "abcdefghijklmnopqrstuvwxyz".toUpperCase(),
      includePaper: false
    };
  },
  created() {
    this.getExamRule();
  },
  methods: {
    async getExamRule() {
      const examRule = await examRuleDetail();
      this.includePaper = examRule && examRule.includePaper;
    },
    async visibleChange() {
      const data = await taskApplyDetail(this.instance.id);
      this.curTaskApply = this.$objAssign(initTaskApply, data || {});
      this.curTaskApply.courseCode = this.instance.courseCode;
      this.curTaskApply.courseName = this.instance.courseName;
      this.curTaskApply.cardRuleId = this.instance.cardRuleId;
      this.curTaskApply.includePaper = this.includePaper;
      this.paperAttachments = data.paperAttachmentIds
        ? JSON.parse(data.paperAttachmentIds)
        : [];
      const exposedPaperType = this.instance.exposedPaperType || "";
      this.paperAttachments.forEach(paper => {
        paper.editable = !exposedPaperType.includes(paper.name);
      });
    },
    cancel() {
      this.modalIsShow = false;
    },
    open() {
      this.modalIsShow = true;
    },
    addAtachment() {
      if (this.paperAttachments.length >= this.abc.length) return;

      const paperType = this.paperAttachments.map(item => item.name);
      const name = this.abc.split("").find(code => !paperType.includes(code));

      const newAttachment = {
        name,
        attachmentId: "",
        filename: "",
        pages: 0,
        editable: true
      };
      this.paperAttachments.push(newAttachment);

      this.paperAttachments.sort((a, b) => (a.name < b.name ? -1 : 1));
    },
    deleteAttachment(index) {
      if (this.paperAttachments.length <= 1) {
        this.$message.error("试卷类型数量不得少于1");
        return;
      }
      this.paperAttachments.splice(index, 1);
    },
    toUpload(attachment) {
      this.curUploadType = "paper";
      this.curAttachment = {
        ...attachment
      };
      this.$refs.UploadPaperDialog.open();
    },
    uploadConfirm(attachment, uploadType) {
      if (uploadType === "paper") {
        const index = this.paperAttachments.findIndex(
          item => item.name === attachment.name
        );
        this.paperAttachments.splice(index, 1, { ...attachment });
      }
    },
    async downloadPaper(attachment) {
      if (!attachment.attachmentId) return;
      const data = await attachmentPreview(attachment.attachmentId);
      window.open(data.url);
    },
    toViewCard() {
      window.open(
        this.getRouterPath({
          name: "CardPreview",
          params: {
            cardId: this.curTaskApply.cardId,
            viewType: "view"
          }
        })
      );
    },
    toEditCard() {
      this.cachePrepareTcpCard();
      this.$router.push({
        name: "CardDesign",
        params: {
          cardId: this.curTaskApply.cardId
        }
      });
    },
    cachePrepareTcpCard() {
      this.$ls.set("prepareTcPCard", {
        examTaskId: this.curTaskApply.examTaskId,
        courseCode: this.curTaskApply.courseCode,
        courseName: this.curTaskApply.courseName,
        makeMethod: this.curTaskApply.makeMethod,
        cardRuleId: this.curTaskApply.cardRuleId,
        paperType: this.paperAttachments.map(item => item.name).join(",")
      });
    },
    async toCreateOrViewCard() {
      this.task = this.getTaskData();
      if (this.CAN_EDIT_CARD) {
        if (this.curTaskApply.makeMethod === "SELECT") {
          this.$refs.CardOptionDialog.open();
        } else {
          this.toEditCard();
        }
      } else {
        this.toViewCard();
      }
    },
    cardConfirm(data) {
      this.curTaskApply = this.$objAssign(this.curTaskApply, data);
    },
    getTaskData() {
      let data = { ...this.curTaskApply };

      return data;
    },
    checkDataValid() {
      // 校验试卷类型是否连续
      const lastPaperName = this.paperAttachments.slice(-1)[0].name;
      const paperLength = this.abc.indexOf(lastPaperName) + 1;
      if (this.paperAttachments.length !== paperLength) {
        this.$message.error("请保持试卷类型连续！");
        return;
      }

      const attachmentValid = !this.paperAttachments.some(
        item => !item.attachmentId
      );
      // 设置了入库强制包含试卷时，校验试卷是否上传。
      if (this.curTaskApply.includePaper && !attachmentValid) {
        this.$message.error("请完成试卷文件上传！");
        return;
      }

      if (!this.curTaskApply.cardId) {
        this.$message.error("请选择题卡创建方式！");
        return;
      }

      if (
        this.curTaskApply.makeMethod !== "SELECT" &&
        this.curTaskApply.status !== "SUBMIT"
      ) {
        this.$message.error("请先提交题卡！");
        return;
      }
      return true;
    },
    async submit() {
      if (!this.checkDataValid()) return;

      this.$confirm("确定要提交申请修改当前任务吗？", "提示", {
        type: "warning"
      })
        .then(async () => {
          const datas = {
            examTaskId: this.curTaskApply.examTaskId,
            cardId: this.curTaskApply.cardId,
            paperType: this.paperAttachments.map(item => item.name).join(","),
            paperAttachmentIds: JSON.stringify(this.paperAttachments, (k, v) =>
              k === "editable" || k === "url" ? undefined : v
            )
          };
          const data = await taskPaperApplyEdit(datas).catch(() => {});
          if (!data) return;
          this.$message.success("提交成功！");
          this.$emit("modified");
          this.cancel();
        })
        .catch(() => {});
    }
  }
};
</script>