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

<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)}`,
        ]"
      >
        <!-- inner edit area -->
        <div
          :class="[
            'page-main-inner',
            {
              'page-main-noside': !page.showSide || page.pageType === 'cover',
            },
          ]"
        >
          <div
            :class="['page-main', `page-main-${page.columns.length}`]"
            :style="{ margin: `0 -${page.columnGap / 2}px` }"
          >
            <div
              v-for="(column, columnNo) in page.columns"
              :key="columnNo"
              class="page-column"
              :style="{ padding: `0 ${page.columnGap / 2}px` }"
            >
              <div
                :id="[`column-${pageNo}-${columnNo}`]"
                class="page-column-main"
              >
                <div class="page-column-body">
                  <topic-element-preview
                    v-for="element in column.elements"
                    :key="element.id"
                    class="page-column-element"
                    :data="element"
                  ></topic-element-preview>
                  <!-- paper question info  -->
                  <template v-if="column.texts && column.texts.length">
                    <elem-rich-text
                      v-for="elem in column.texts"
                      :id="`rich-text-${elem.id}`"
                      :key="elem.id"
                      :data="elem"
                    ></elem-rich-text>
                  </template>
                </div>
              </div>
              <page-number
                v-if="page.showPageNo && page.pageType !== 'cover'"
                type="text"
                :total="getTotalPage()"
                :current="getPageNumber(pageNo, columnNo)"
              ></page-number>
            </div>
          </div>
        </div>
        <!-- side edit erea -->
        <div
          v-if="page.showSide && page.pageType !== 'cover'"
          class="page-column-side"
        >
          <div class="column-side-body">
            <box-element-preview
              v-for="element in page.sides"
              :key="element.id"
              class="page-side-element"
              :data="element"
            ></box-element-preview>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import TopicElementPreview from "./TopicElementPreview";
import BoxElementPreview from "./BoxElementPreview.vue";
import PageNumber from "./PageNumber";
import ElemRichText from "../elements/rich-text/ElemRichText.vue";

export default {
  name: "PaperTemplateView",
  components: {
    TopicElementPreview,
    BoxElementPreview,
    PageNumber,
    ElemRichText,
  },
  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;
    },
  },
};
</script>