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

<template>
  <div :class="classes">
    <card-free-view
      v-if="pages.length"
      ref="CardFreeView"
      class="preview-body"
      :pages="pages"
      :card-config="cardConfig"
    ></card-free-view>
  </div>
</template>

<script>
import CardFreeView from "../modules/free/components/CardFreeView";
import { cardDetail } from "../api";
import { deepCopy } from "../plugins/utils";
const JsBarcode = require("jsbarcode");

export default {
  name: "card-free-preview",
  components: { CardFreeView },
  data() {
    return {
      isPrint: this.$route.params.viewType !== "view",
      isFrame: this.$route.params.viewType === "frame",
      cardId: this.$route.params.cardId,
      pages: [],
      cardConfig: {}
    };
  },
  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 = this.$refs.CardFreeView.getPreviewTemp(
          this.$el.outerHTML
        );
        const model = this.$refs.CardFreeView.getPageModel(cardData);
        window.parent &&
          window.parent.submitCardTemp &&
          window.parent.submitCardTemp(cardContentTemp, model);
      });
    },
    async init() {
      const detData = await cardDetail(this.cardId);
      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);
    },
    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>