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

<template>
  <div :class="classes">
    <div class="preview-body">
      <template v-for="(page, pageNo) in pages">
        <div
          :class="[
            'page-box',
            `page-box-${cardConfig.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 { cardConfigInfos } from "../api";
const JsBarcode = require("jsbarcode");
import { getCardHeadModel } from "../elementModel";

const pages = [
  {
    type: "PAGE",
    columnGap: 20,
    locators: [
      [
        {
          type: "LOCATOR",
          id: "locator-0-00"
        },
        {
          type: "LOCATOR",
          id: "locator-0-01"
        }
      ],
      [
        {
          type: "LOCATOR",
          id: "locator-0-10"
        },
        {
          type: "LOCATOR",
          id: "locator-0-11"
        }
      ],
      [
        {
          type: "LOCATOR",
          id: "locator-0-20"
        },
        {
          type: "LOCATOR",
          id: "locator-0-21"
        }
      ]
    ],
    columns: [
      {
        type: "COLUMN",
        elements: []
      },
      {
        type: "COLUMN",
        elements: []
      }
    ]
  }
];

export default {
  name: "card-preview",
  components: { TopicElementPreview, PageNumber },
  data() {
    return {
      cardRuleId: this.$route.params.cardRuleId,
      cardConfig: {},
      pages
    };
  },
  computed: {
    classes() {
      return ["card-preview"];
    }
  },
  mounted() {
    if (!this.cardRuleId) {
      this.$message.error("题卡规则id缺失！");
      return;
    }
    this.init();
  },
  methods: {
    async init() {
      const data = await cardConfigInfos(this.cardRuleId);
      if (!data) {
        this.$message.error("找不到题卡规则！");
        return;
      }
      let config = {
        ...data,
        ...{
          pageSize: "A3",
          columnNumber: 2,
          columnGap: 20,
          showForbidArea: true,
          cardDesc: ""
        }
      };
      config.aOrB = true; // 默认开启A/B卷型
      config.requiredFields = JSON.parse(config.requiredFields);
      config.extendFields = JSON.parse(config.extendFields);
      config.cardTitle = config.titleRule;

      this.cardConfig = config;
      let cardHeadElement = getCardHeadModel(this.cardConfig);
      cardHeadElement.fieldInfos = this.fetchFieldInfos(config, {});
      this.pages[0].columns[0].elements.push(cardHeadElement);
    },
    fetchFieldInfos(cardConfig, stdInfo) {
      let fieldInfos = {};
      const defContent = "相关信息";
      const defNumber = "123456789";
      [...cardConfig.requiredFields, ...cardConfig.extendFields]
        .filter(item => item.enable)
        .map(item => {
          console.log(item);
          fieldInfos[item.code] = stdInfo[item.code] || defContent;
        });
      if (cardConfig.examNumberStyle === "PRINT") {
        fieldInfos.examNumber = this.getBase64Barcode(
          stdInfo["examNumber"] || defNumber
        );
        fieldInfos.examNumberStr = stdInfo["examNumber"] || defNumber;
      }
      if (cardConfig.aOrB && cardConfig.paperType === "PRINT") {
        fieldInfos.paperType = this.getBase64Barcode(
          stdInfo["paperType"] || defNumber
        );
        fieldInfos.paperTypeName = stdInfo["paperTypeName"] || "A";
      }

      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();
    }
  }
};
</script>