答案导出coding...

src/modules/paper-export/components/AnswerTemplateView.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="paper-template-view card-view paper-page">
+    <!-- <template v-for="(page, pageNo) in pages"> -->
+    <!-- <div
+        :key="pageNo"
+        :class="[
+          'page-box',
+          `page-box-${page.pageSize}`,
+          `page-box-${pageTypeType(page.pageType)}`,
+        ]"
+      >
+        <div
+          :class="[
+            'page-main-inner',
+            {
+              'page-main-noside': !page.showSide || page.pageType === 'cover',
+            },
+          ]"
+        ></div>
+      </div> -->
+    <!-- </template> -->
+  </div>
+</template>
+
+<script>
+// import TopicElementPreview from "./TopicElementPreview";
+// import PageNumber from "./PageNumber";
+
+export default {
+  name: "AnswerTemplateView",
+  components: {
+    // TopicElementPreview,
+    // PageNumber,
+  },
+  props: {
+    pages: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
+    pageConfig: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    pageTypeType(pageType) {
+      const types = {
+        cover: 0,
+        front: 0,
+        back: 1,
+      };
+      return types[pageType];
+    },
+    getPageNumber(curPageNo, columnNo) {
+      const coverPageCount = this.pages.filter(
+        (p) => p.pageType === "cover"
+      ).length;
+      let pageNo = this.pageConfig.showCover
+        ? curPageNo - coverPageCount
+        : curPageNo;
+      return pageNo * this.pageConfig.columnNumber + columnNo + 1;
+    },
+    getTotalPage() {
+      const pageCount = this.pages.filter((p) => p.pageType !== "cover").length;
+      return pageCount * this.pageConfig.columnNumber;
+    },
+    getPageNumberCont(pageNumberRule, curPageNo, columnNo) {
+      const pageCont = `第${this.getPageNumber(
+        curPageNo,
+        columnNo
+      )}页（共${this.getTotalPage()}页）`;
+      return pageNumberRule
+        ? pageNumberRule.replace("${pageNumber}", pageCont)
+        : pageCont;
+    },
+  },
+};
+</script>

src/modules/paper-export/router/index.js

@@ -35,4 +35,12 @@ export const otherRoutes = [
         /* webpackChunkName: "paperTemp" */ "../views/PaperTemplateBuild.vue"
       ),
   },
+  {
+    path: "/answer-template/build/:paperId/:viewType?",
+    name: "AnswerTemplateBuild",
+    component: () =>
+      import(
+        /* webpackChunkName: "paperTemp" */ "../views/AnswerTemplateBuild.vue"
+      ),
+  },
 ];

src/modules/paper-export/views/AnswerTemplateBuild.vue

@@ -0,0 +1,252 @@
+<template>
+  <div class="paper-template-build">
+    <div class="paper-template-build-body">
+      <!-- <paper-template-view
+        ref="PaperTemplateView"
+        class="preview-body"
+        :pages="pages"
+        :page-config="paperTempJson.pageConfig"
+      >
+      </paper-template-view> -->
+      <!-- process dom -->
+      <!-- <div v-if="elementList.length" class="element-list">
+        <elem-rich-text
+          v-for="elem in elementList"
+          :id="elem.id"
+          :key="elem.id"
+          :data="elem"
+        ></elem-rich-text>
+      </div> -->
+      <answer-template-view
+        ref="AnswerTemplateView"
+        class="preview-body"
+        :answerData="paperJson"
+      ></answer-template-view>
+    </div>
+  </div>
+</template>
+
+<script>
+// import ElemRichText from "../elements/rich-text/ElemRichText.vue";
+// import PaperTemplateView from "../components/PaperTemplateView.vue";
+import AnswerTemplateView from "../components/AnswerTemplateView.vue";
+// import { deepCopy } from "../../card/plugins/utils";
+// import previewTemp from "../previewTemp";
+import { paperDetailInfoApi } from "../../paper/api";
+// import { paperTemplateListApi, paperPdfDownloadApi } from "../api";
+import { paperPdfDownloadApi } from "../api";
+import { downloadByApi } from "@/plugins/download";
+import paperTemplateBuildMixins from "./paperTemplateBuildMixins";
+
+export default {
+  name: "AnswerTemplateBuild",
+  components: { AnswerTemplateView },
+  mixins: [paperTemplateBuildMixins],
+  data() {
+    return {
+      paperId: this.$route.params.paperId,
+      viewType: this.$route.params.viewType,
+      seqMode: "MODE3",
+      paperJson: {},
+      paperTempJson: {
+        pages: [],
+        pageConfig: {},
+      },
+      maxColumnWidth: 200,
+      maxColumnHeight: 200,
+      paperTempList: [],
+      curPaperTemp: {},
+      downloading: false,
+      fieldData: {},
+      paperStructs: [],
+      configModalForm: {
+        showDetailNo: true,
+        showDetailScoreInfo: true,
+        showDetailScoreTable: false,
+        pageCountMode: "SIMPLE",
+      },
+      configSources: [],
+      prepareDownloadPdf: false,
+    };
+  },
+  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.curPaperTemp = answerSet.paperTemp;
+        this.configModalForm = answerSet.configModalForm;
+
+        await this.getPaperJson();
+      } catch (error) {
+        this.emitFrameResult(false, "数据错误");
+      }
+
+      this.$nextTick(() => {
+        this.emitFrameResult(true, "", this.getPreviewTemp());
+      });
+    },
+    emitFrameResult(success = true, errorMsg = "", htmlCont = "") {
+      alert("success:" + success, errorMsg, htmlCont);
+      // window.parent &&
+      //   window.parent.submitPaperTemp &&
+      //   window.parent.submitPaperTemp({
+      //     success,
+      //     errorMsg,
+      //     htmlCont,
+      //     templateId: this.curPaperTemp.id,
+      //   });
+    },
+    async getPaperJson() {
+      const res = await paperDetailInfoApi({
+        paperId: this.paperId,
+        seqMode: this.seqMode,
+      });
+      this.paperJson = res.data;
+      this.resetClozeSerialNo(this.paperJson);
+      this.fieldData = {
+        paperName: res.data.name,
+        courseName: res.data.course.name,
+        courseCode: res.data.course.code,
+        totalScore: res.data.totalScore,
+        rootOrgName: res.data.rootOrgName,
+      };
+      this.paperStructs = this.paperJson.paperDetails.map((detail) => {
+        return {
+          detailName: detail.name,
+          questionCount: detail.unitCount,
+          totalScore: detail.score,
+        };
+      });
+    },
+    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;
+            });
+          });
+        });
+      });
+    },
+    // img ------ start >
+    loadImg(url) {
+      return new Promise((resolve, reject) => {
+        const img = new Image();
+        img.onload = function () {
+          resolve(true);
+        };
+        img.onerror = function () {
+          reject();
+        };
+        img.src = url;
+      });
+    },
+    getRichJsonImgUrls(richJson) {
+      let urls = [];
+      if (!richJson) return urls;
+      richJson.sections.forEach((section) => {
+        section.blocks.forEach((elem) => {
+          if (elem.type === "image" && elem.value.startsWith("http")) {
+            urls.push(elem.value);
+          }
+        });
+      });
+      return urls;
+    },
+    async waitAllImgLoaded() {
+      let imgUrls = [];
+      this.elementList.forEach((item) => {
+        imgUrls.push(...this.getRichJsonImgUrls(item.content));
+      });
+
+      // console.log(imgUrls);
+
+      if (!imgUrls.length) return Promise.resolve(true);
+      const imgLoads = imgUrls.map((item) => this.loadImg(item));
+      const imgLoadResult = await Promise.all(imgLoads).catch(() => {});
+      if (imgLoadResult && imgLoadResult.length) {
+        return Promise.resolve(true);
+      } else {
+        return Promise.reject();
+      }
+    },
+    // img ------ end >
+    // download ------ start >
+    getPreviewTemp() {
+      // return previewTemp(this.$refs.PaperTemplateView.$el.outerHTML);
+    },
+    async downloadPaperPdf() {
+      const htmlCont = this.getPreviewTemp();
+
+      if (this.downloading) return;
+      this.downloading = true;
+
+      const res = await downloadByApi(() => {
+        return paperPdfDownloadApi({
+          content: htmlCont,
+          templateId: this.curPaperTemp.id,
+          paperId: this.paperId,
+        });
+      }).catch((e) => {
+        this.$message.error(e || "下载失败，请重新尝试！");
+      });
+      this.downloading = false;
+
+      if (!res) return;
+      this.$message.success("下载成功！");
+    },
+  },
+};
+</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>

src/modules/paper-export/views/PaperTemplateBuild.vue

@@ -168,6 +168,7 @@ export default {
           ? JSON.parse(this.curPaperTemp.content)
           : { pages: [], pageConfig: {} };
         this.paperTempJson = paperTempJson;
+        console.log("paperTempJson", paperTempJson);
         this.pages = paperTempJson.pages;
         this.updaterFieldInfo();
       } catch (error) {

src/modules/questions/views/GenPaper.vue

@@ -405,6 +405,15 @@
         height="800"
       ></iframe>
     </div>
+
+    <div v-if="answerPreviewUrl" class="design-preview-frame">
+      <iframe
+        :src="answerPreviewUrl"
+        frameborder="0"
+        width="1000"
+        height="800"
+      ></iframe>
+    </div>
   </section>
 </template>
 
@@ -490,6 +499,7 @@ export default {
       },
       // pdf download
       paperPreviewUrl: "",
+      answerPreviewUrl: "",
       downloading: false,
       curPaperTemp: null,
       paperTempList: [],
@@ -891,6 +901,17 @@ export default {
         this.toDownloadPaperPdf();
         return;
       }
+      if (this.exportModel.exportContent === "ANSWER") {
+        if (!this.exportModel.templateId) {
+          this.$notify({
+            message: "请选择答案模板",
+            type: "error",
+          });
+          return;
+        }
+        this.toDownloadAnswerPdf();
+        return;
+      }
 
       if (
         !this.exportModel.exportContent ||
@@ -1042,6 +1063,7 @@ export default {
         seqMode: this.exportModel.seqMode,
         configModalForm,
       };
+      console.log("window.paperSet", window.paperSet);
       const { href } = this.$router.resolve({
         name: "PaperTemplateBuild",
         params: {
@@ -1056,6 +1078,25 @@ export default {
       // console.log(href);
       this.paperPreviewUrl = href;
     },
+    toDownloadAnswerPdf() {
+      if (this.downloading) return;
+      this.downloading = true;
+      window.answerSet = {
+        answerTemplateId: this.exportModel.templateId,
+        seqMode: this.exportModel.seqMode,
+      };
+      const { href } = this.$router.resolve({
+        name: "AnswerTemplateBuild",
+        params: {
+          paperId: this.exportModel.id,
+          viewType: "frame",
+        },
+        query: {
+          t: Date.now(),
+        },
+      });
+      this.answerPreviewUrl = href;
+    },
     registWindowSubmit() {
       window.submitPaperTemp = async ({
         success,