teachcloud-print-web/card/elements/card-head/cardHeadSpin/HeadDynamic.vue

<template>
  <div :class="classes">
    <!-- write -->
    <div
      class="head-dynamic-part head-dynamic-write"
      v-if="data.examNumberStyle !== 'FILL' && data.writeSign"
    >
      <div class="stdinfo-item">
        <span>手写签名</span>
        <span>：</span>
        <span></span>
      </div>
      <p>
        注意：签名则表示您认可答题卡提供的信息与您本人信息相符；如签名与信息不符或者未签名，试卷作废。
      </p>
    </div>
    <!-- file -->
    <div class="head-dynamic-part head-dynamic-fill">
      <div class="head-dynamic-content">
        <p><span>正确填涂：</span><i></i></p>
        <p>
          <span>错误填涂：</span>
          <i>√</i>
          <i>×</i>
          <i></i>
          <i></i>
        </p>
      </div>
    </div>
    <!-- miss discipline -->
    <div
      v-if="data.examAbsent || data.discipline"
      class="head-dynamic-part head-dynamic-missfill"
    >
      <div class="head-dynamic-miss" v-if="data.examAbsent">
        <div class="head-dynamic-content">
          <span class="dynamic-miss-title">缺考标记</span>
          <span class="dynamic-miss-body"
            ><i class="head-dynamic-rect" id="dynamic-miss-area"></i
          ></span>
        </div>
      </div>
      <div class="head-dynamic-miss" v-if="data.discipline">
        <div class="head-dynamic-content">
          <span class="dynamic-miss-title">违纪标记</span>
          <span class="dynamic-miss-body"
            ><i class="head-dynamic-rect" id="dynamic-miss-area"></i
          ></span>
        </div>
      </div>
    </div>
    <!-- aorb -->
    <div
      :class="[
        'head-dynamic-part',
        'head-dynamic-aorb',
        `head-dynamic-aorb-${data.paperType.toLowerCase()}`
      ]"
      id="head-dynamic-aorb"
      v-if="data.aOrB"
    >
      <div class="dynamic-aorb-item dynamic-aorb-title">
        <p class="dynamic-aorb-content">试卷类型：</p>
      </div>
      <div
        class="dynamic-aorb-item dynamic-aorb-rects"
        v-if="data.paperType === 'FILL'"
      >
        <div class="dynamic-aorb-content">
          <span class="head-dynamic-rect"><i>A</i></span>
          <span class="head-dynamic-rect"><i>B</i></span>
        </div>
      </div>
      <!-- <div
        class="dynamic-aorb-item dynamic-aorb-info"
        v-if="data.paperType === 'PRINT'"
      >
        <div class="dynamic-aorb-content">
          <i>{{ aorbBarcodeName }}</i>
        </div>
      </div> -->
      <div
        class="dynamic-aorb-item dynamic-aorb-barcode"
        id="dynamic-aorb-barcode"
        v-if="data.paperType === 'PRINT'"
      >
        <div class="dynamic-aorb-content">
          <img :src="aorbBarcodeSrc" v-if="aorbBarcodeSrc" />
          <img src="../../../assets/images/barcode-sample-notext.png" v-else />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { calcSum } from "../../../plugins/utils";

export default {
  name: "head-dynamic",
  props: {
    data: {
      type: Object
    }
  },
  data() {
    return {
      aorbBarcodeSrc:
        this.data["fieldInfos"] && this.data["fieldInfos"]["paperType"],
      aorbBarcodeName:
        (this.data["fieldInfos"] && this.data["fieldInfos"]["paperTypeName"]) ||
        "A"
    };
  },
  computed: {
    classes() {
      let partNum = 1;
      if (this.data.examNumberStyle !== "FILL" && this.data.writeSign)
        partNum++;
      if (this.data.aOrB) partNum++;
      if (this.data.examAbsent || this.data.discipline) partNum++;

      return ["head-dynamic", "card-head-body-spin", `head-dynamic-${partNum}`];
    }
  },
  mounted() {
    this.initStyles();
  },
  methods: {
    initStyles() {
      const { examNumberStyle, columnNumber, pageSize } = this.data;
      if (
        examNumberStyle === "FILL" ||
        (pageSize === "A3" && columnNumber !== 2) ||
        (pageSize === "A4" && columnNumber !== 1)
      )
        return;
      const parentHeight = this.$el.parentNode.offsetHeight;
      this.$el.style.height = parentHeight + "px";
      const childrenCount = this.$el.children.length;
      if (childrenCount > 1) {
        let heights = [];
        for (let i = 0; i < childrenCount; i++) {
          heights[i] = this.$el.children[i].offsetHeight;
        }
        const lastChildHeight = parentHeight - calcSum(heights.slice(0, -1));
        this.$el.children[childrenCount - 1].style.height =
          lastChildHeight + "px";
      }
    }
  }
};
</script>