teachcloud-print-web/card/modules/free/views/CardFreePreview.vue

<template>
  <div :class="classes">
    <div class="preview-frame" id="preview-frame" v-if="IS_COMMON_CARD"></div>
    <div class="preview-body" v-else>
      <template v-for="(page, pageNo) in pages">
        <div
          :class="[
            'page-box',
            `page-box-${page.pageSize}`,
            `page-box-${pageNo % 2}`
          ]"
          :key="pageNo"
        >
          <div
            :class="['page-locators', `page-locators-${page.locators.length}`]"
          >
            <ul
              class="page-locator-group"
              v-for="(locator, iind) in page.locators"
              :key="iind"
            >
              <li
                v-for="(elem, eindex) in locator"
                :key="eindex"
                :id="elem.id"
              ></li>
            </ul>
          </div>
          <!-- inner edit area -->
          <div class="page-main-inner">
            <div
              :class="['page-main', `page-main-${page.columns.length}`]"
              :style="{ margin: `0 -${page.columnGap / 2}px` }"
            >
              <div
                class="page-column"
                v-for="(column, columnNo) in page.columns"
                :key="columnNo"
                :style="{ padding: `0 ${page.columnGap / 2}px` }"
              >
                <div
                  class="page-column-main"
                  :id="[`column-${pageNo}-${columnNo}`]"
                >
                  <div class="page-column-body" v-if="column.elements.length">
                    <topic-element-preview
                      class="page-column-element"
                      v-for="element in column.elements"
                      :key="element.id"
                      :data="element"
                    ></topic-element-preview>
                  </div>
                  <div class="page-column-body" v-else>
                    <div
                      class="page-column-forbid-area"
                      v-if="cardConfig.showForbidArea"
                    >
                      <p>该区域严禁作答</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- outer edit area -->
          <div class="page-main-outer">
            <page-number
              type="rect"
              :total="pages.length"
              :current="pageNo + 1"
            ></page-number>
            <page-number
              type="text"
              :total="pages.length"
              :current="pageNo + 1"
            ></page-number>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import TopicElementPreview from "../components/TopicElementPreview";
import PageNumber from "../../../components/PageNumber";
import { cardDetail } from "../../../api";
import previewTemp from "../../../previewTemp";
import { getPageModel } from "../cardFormatTransform";
import { deepCopy } from "../../../plugins/utils";
const JsBarcode = require("jsbarcode");

export default {
  name: "card-free-preview",
  components: { TopicElementPreview, PageNumber },
  data() {
    return {
      isPrint: this.$route.params.viewType !== "view",
      isFrame: this.$route.params.viewType === "frame",
      cardId: this.$route.params.cardId,
      cardConfig: {},
      pages: [],
      IS_COMMON_CARD: false
    };
  },
  computed: {
    classes() {
      return [
        "card-free-preview",
        {
          "card-print": this.isPrint
        }
      ];
    }
  },
  mounted() {
    if (this.isFrame) {
      this.initFrame();
    } else {
      this.init();
    }
  },
  methods: {
    initFrame() {
      const cardData = window.parent.cardData;
      if (!cardData) return;

      const { cardConfig, pages } = deepCopy(cardData);
      let fieldInfos = {};
      [...cardConfig.requiredFields, ...cardConfig.extendFields]
        .filter(item => item.enable)
        .map(item => {
          fieldInfos[item.code] = "${" + item.code + "}";
        });
      this.cardConfig = cardConfig;
      this.pages = this.appendFieldInfo(pages, fieldInfos);

      this.$nextTick(() => {
        const cardContentTemp = previewTemp(this.$el.outerHTML);
        const model = getPageModel(cardData);
        window.parent &&
          window.parent.submitCardTemp &&
          window.parent.submitCardTemp(cardContentTemp, model);
      });
    },
    async init() {
      const detData = await cardDetail(this.cardId);

      this.IS_COMMON_CARD = detData.type === "GENERIC";
      // 通卡展示
      if (this.IS_COMMON_CARD) {
        this.$nextTick(() => {
          this.initHtmlTemp(detData.htmlContent);
        });
        return;
      }
      // 常规卡展示
      if (!detData.content) {
        this.$message.error("很抱歉，当前题卡还没开始制作！");
        return;
      }
      const { cardConfig, pages } = JSON.parse(detData.content);
      const fieldInfos = this.fetchFieldInfos(cardConfig, {});

      this.cardConfig = cardConfig;
      this.pages = this.appendFieldInfo(pages, fieldInfos);
    },
    initHtmlTemp(htmlTemp) {
      const iframeDom = document.createElement("iframe");
      document.getElementById("preview-frame").appendChild(iframeDom);
      const wwidth = window.innerWidth - 10;
      const wheight = window.innerHeight - 10;
      iframeDom.style.cssText = `width: ${wwidth}px;height: ${wheight}px;border:none;outline:none;`;
      const iframeDoc = iframeDom.contentDocument;
      iframeDoc.open();
      iframeDoc.write(htmlTemp);
      iframeDoc.close();
    },
    fetchFieldInfos(cardConfig, stdInfo) {
      let fieldInfos = {};
      const defContent = "相关信息";
      [...cardConfig.requiredFields, ...cardConfig.extendFields]
        .filter(item => item.enable)
        .map(item => {
          fieldInfos[item.code] = stdInfo[item.code] || defContent;
        });

      return fieldInfos;
    },
    getBase64Barcode(str) {
      const canvas = document.createElement("CANVAS");
      JsBarcode(canvas, str, {
        width: 2,
        height: 30,
        displayValue: false,
        marginLeft: 20,
        marginRight: 20,
        marginTop: 0,
        marginBottom: 0
      });

      return canvas.toDataURL();
    },
    appendFieldInfo(pages, fieldInfos) {
      const VALID_ELEMENTS_FOR_EXTERNAL = ["BARCODE", "FILL_FIELD"];
      pages.forEach(page => {
        page.columns.forEach(column => {
          column.elements.forEach(element => {
            if (!VALID_ELEMENTS_FOR_EXTERNAL.includes(element.type)) return;

            if (element.type === "BARCODE") {
              const field = element.fields[0] && element.fields[0].code;
              element.content = `data:image/png;base64,${fieldInfos[field]}`;
              return;
            }

            element.fieldInfos = fieldInfos;
          });
        });
      });
      return pages;
    }
  }
};
</script>