union-question-web/src/modules/paper-export/components/AnswerTemplateView.vue

<template>
  <div class="paper-template-view answer-template-view card-view paper-page">
    <div v-for="(singlePageData, index) in flatData" :key="index">
      <div class="page-box page-box-A4 page-box-answer">
        <div class="page-main-inner">
          <div v-for="(row, i) in singlePageData || []" :key="i">
            <div v-if="row.type == 'bigTitle'" class="is-detail-title">
              {{ row.number | numberToChaineseFilter }}、{{ row.name }}
              {{ row.title }}
            </div>
            <div v-else>
              <span>{{ row.questionSeq + ". " }}</span>
              <question-answer :data="row"></question-answer>
            </div>
          </div>
          <page-number
            type="text"
            :rule="getPageNumberCont(index + 1)"
          ></page-number>
        </div>
      </div>
    </div>

    <div class="page-box page-box-A4 page-box-answer origin-view">
      <div class="page-main-inner">
        <!-- {{ flatData }} -->
        <div v-for="(big, index) in paperDetails" :key="index">
          <div
            class="is-detail-title"
            v-domObserver="
              (top) => {
                getDomTop(top, index);
              }
            "
          >
            {{ big.number | numberToChaineseFilter }}、{{ big.name }}
            {{ big.title }}
          </div>
          <div v-for="(small, i) in big.paperDetailUnits" :key="i">
            <div
              v-if="!small.question.subQuestions"
              v-domObserver="
                (top) => {
                  getDomTop(top, index, i);
                }
              "
            >
              <span>{{ small.question.questionSeq + ". " }}</span>
              <question-answer :data="small.question"></question-answer>
            </div>

            <template v-if="small.question.subQuestions">
              <div
                v-for="(innerQuestion, innerIndex) in small.question
                  .subQuestions"
                :key="innerIndex"
                v-domObserver="
                  (top) => {
                    getDomTop(top, index, i, innerIndex);
                  }
                "
              >
                <span>{{ innerQuestion.questionSeq + ". " }}</span>
                <question-answer :data="innerQuestion"></question-answer>
              </div>
            </template>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import PageNumber from "./PageNumber";
import QuestionAnswer from "../../question/components/QuestionAnswer.vue";
import { cloneDeep } from "lodash";
export default {
  name: "AnswerTemplateView",
  components: {
    PageNumber,
    QuestionAnswer,
  },
  props: {
    pageConfig: {
      type: Object,
      default() {
        return {};
      },
    },
    answerData: {
      type: Object,
      default() {
        return {};
      },
    },
    pageCountMode: {
      type: String,
    },
  },
  computed: {
    paperDetails() {
      return this.answerData?.paperDetails || [];
    },
    //数据扁平化，便于高度计算
    flatData() {
      let arr = [[]];
      const limitHeight = 976;
      let usedPageIndex = 0;
      let computedHeight = 0;
      let paperDetailsWithTop = cloneDeep(this.paperDetailsWithTop);
      for (let i = 0; i < paperDetailsWithTop.length; i++) {
        let cloneBig = cloneDeep(paperDetailsWithTop[i]);
        let { top, height } = cloneBig; //大题标题的尺寸数据
        if (computedHeight + top + height > limitHeight) {
          usedPageIndex++;
          arr[usedPageIndex] = [];
          computedHeight = top + height;
        } else {
          computedHeight += top + height;
        }
        arr[usedPageIndex].push({
          type: "bigTitle",
          name: cloneBig.name,
          title: cloneBig.title,
          number: cloneBig.number,
        });
        if (cloneBig.paperDetailUnits?.length) {
          for (let j = 0; j < cloneBig.paperDetailUnits.length; j++) {
            let unit = cloneBig.paperDetailUnits[j];
            let question = unit.question;
            let { top, height } = unit; //大题标题的尺寸数据
            if (!question.subQuestions) {
              //无套题的小题尺寸数据
              if (computedHeight + top + height > limitHeight) {
                usedPageIndex++;
                arr[usedPageIndex] = [];
                computedHeight = top + height;
              } else {
                computedHeight += top + height;
              }
              arr[usedPageIndex].push({
                type: "subQuestion",
                ...cloneDeep(question),
              });
            } else {
              for (let x = 0; x < question.subQuestions.length; x++) {
                let innerQuestion = question.subQuestions[x];
                let { top, height } = innerQuestion;
                if (computedHeight + top + height > limitHeight) {
                  usedPageIndex++;
                  arr[usedPageIndex] = [];
                  computedHeight = top + height;
                } else {
                  computedHeight += top + height;
                }
                arr[usedPageIndex].push({
                  type: "innerQuestion",
                  ...cloneDeep(innerQuestion),
                });
              }
            }
          }
        }
      }
      if (arr.length % 2 != 0 && this.pageCountMode === "DOUBLE") {
        arr.push([]);
      }
      return arr;
    },
  },
  data() {
    return {
      paperDetailsWithTop: [],
      // computedPages: [],
    };
  },
  watch: {
    answerData(val) {
      let arr = cloneDeep(val?.paperDetails || []);
      this.paperDetailsWithTop = arr.map((detail) => {
        detail.position = { top: 0, height: 0 };
        if (detail.paperDetailUnits?.length) {
          detail.paperDetailUnits = detail.paperDetailUnits.map((unit) => {
            unit.position = { top: 0, height: 0 };
            let question = unit.question;
            if (question.subQuestions?.length) {
              question.subQuestions = question.subQuestions.map((subQues) => {
                subQues.position = { top: 0, height: 0 };
                return subQues;
              });
            }
            return unit;
          });
        }
        return detail;
      });
    },
  },
  methods: {
    created() {},
    mounted() {},
    getDomTop(position, index, subIndex, innerIndex) {
      let arr = cloneDeep(this.paperDetailsWithTop);
      if (subIndex == undefined && innerIndex == undefined) {
        arr[index].position = {
          top: position.top - 40,
          height: position.height,
        };
      }
      if (subIndex) {
        if (innerIndex == undefined) {
          arr[index]["paperDetailUnits"][subIndex].position = {
            top: position.top - 40,
            height: position.height,
          };
        } else {
          arr[index]["paperDetailUnits"][subIndex]["question"]["subQuestions"][
            innerIndex
          ].position = {
            top: position.top - 40,
            height: position.height,
          };
        }
      }
      this.paperDetailsWithTop = arr;
    },
    getPageNumberCont(pageNo) {
      return `第${pageNo}页 共${this.flatData.length}页`;
    },
  },
};
</script>