union-question-web/src/modules/paper-export/views/AnswerTemplateBuild.vue

<template>
  <div class="paper-template-build">
    <div class="paper-template-build-body">
      <answer-template-view
        v-if="paperJson"
        ref="AnswerTemplateView"
        id="answer-template-view"
        class="preview-body"
        :answerData="paperJson"
        :pageCountMode="pageCountMode"
        @rend-finished="rendFinished"
      ></answer-template-view>
    </div>
  </div>
</template>

<script>
import AnswerTemplateView from "../components/AnswerTemplateView.vue";
import { paperDetailInfoApi } from "../../paper/api";
import { buildPdf } from "@/plugins/htmlToPdf";

export default {
  name: "AnswerTemplateBuild",
  components: { AnswerTemplateView },
  data() {
    return {
      paperId: this.$route.params.paperId,
      viewType: this.$route.params.viewType,
      seqMode: "MODE3",
      paperJson: null,
      maxColumnWidth: 200,
      maxColumnHeight: 200,
      curPaperTemp: {},
      downloading: false,
      fieldData: {},
      paperStructs: [],
      configSources: [],
      prepareDownloadPdf: false,
      pageCountMode: "SIMPLE",
    };
  },
  mounted() {
    if (this.viewType === "frame") {
      this.initFrame();
      return;
    }
  },
  methods: {
    async initFrame() {
      try {
        const answerSet = window.parent.answerSet;
        if (!answerSet) {
          this.emitFrameResult(false, "数据缺失");
          return;
        }

        this.seqMode = answerSet.seqMode;
        this.pageCountMode = answerSet.pageCountMode;

        await this.getPaperJson();
      } catch (error) {
        this.emitFrameResult(false, "数据错误");
      }
    },
    async rendFinished() {
      const answerBlob = await buildPdf(
        {
          elements: document
            .getElementById("answer-template-view")
            .querySelectorAll(".page-answer-flat"),
          pageSize: "A4",
        },
        true
      ).catch((error) => {
        console.error(error);
      });
      if (!answerBlob) {
        this.emitFrameResult(false, "生成答案pdf错误");
        return;
      }

      this.emitFrameResult(true, "", answerBlob);
    },
    emitFrameResult(success = true, errorMsg = "", blobCont = null) {
      // console.log("htmlC", htmlCont);
      window.parent &&
        window.parent.submitPaperTemp &&
        window.parent.submitPaperTemp({
          success,
          errorMsg,
          blobCont,
          contType: "answer",
        });
    },
    async getPaperJson() {
      const res = await paperDetailInfoApi({
        paperId: this.paperId,
        seqMode: this.seqMode,
      });
      this.paperJson = res.data;
      this.resetClozeSerialNo(this.paperJson);
    },
    resetClozeSerialNo(paperData) {
      const clozeQuestionTypes = ["CLOZE", "BANKED_CLOZE"];
      paperData.paperDetails.forEach((detail) => {
        detail.paperDetailUnits.forEach((question) => {
          if (!clozeQuestionTypes.includes(question.questionType)) return;
          question.question.quesBody.sections.forEach((section) => {
            section.blocks.forEach((block) => {
              if (block.type !== "cloze") return;
              block.value =
                question.question.subQuestions[block.value - 1].questionSeq;
            });
          });
        });
      });
    },
  },
};
</script>

<style>
.paper-template-build {
  text-align: center;
}
.paper-template-build-body {
  display: inline-block;
  text-align: initial;
}

.paper-template-build .page-box {
  margin-top: 10px;
  margin-bottom: 10px;
}
.paper-template-build .paper-build-config {
  padding: 10px 15px 2px;
  margin-top: 5px;
  background: #fff;
  border-radius: 10px;
}
.paper-build-config .el-form-item {
  margin-bottom: 16px;
  margin-right: 30px;
}
.paper-template-build .element-list {
  visibility: hidden;
  position: absolute;
  width: 1200px;
  height: 600px;
  overflow: hidden;
  left: -9999px;
  top: 0;
  z-index: 1;
}
</style>