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

<template>
  <div :class="classes">
    <div class="stdno-empty" v-if="data.examNumberStyle === 'PASTE'">
      <p class="">粘贴条形码区</p>
    </div>
    <div class="stdno-auto" v-if="data.examNumberStyle === 'PRINT'">
      <div class="stdno-auto-barcode">
        <img :src="examNumberBarcodeSrc" v-if="examNumberBarcodeSrc" />
        <img src="../../../assets/images/barcode-sample-notext.png" v-else />
        <p>{{ examNumberBarcodeName || "123456789" }}</p>
      </div>
    </div>
    <div class="stdno-fill" v-if="data.examNumberStyle === 'FILL'">
      <div class="stdno-fill-head">
        <h5>学号</h5>
        <div class="stdno-fill-rect">
          <div
            class="stdno-fill-number"
            v-for="n in fillNumber"
            :key="n"
            :style="columnStyles"
          ></div>
        </div>
      </div>
      <div class="stdno-fill-body">
        <div
          class="stdno-fill-list"
          v-for="n in fillNumber"
          :key="n"
          :style="columnStyles"
        >
          <div
            class="stdno-fill-option"
            v-for="(m, mindex) in getColumnFills(n)"
            :key="mindex"
          >
            <i>{{ m }}</i>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "head-stdno",
  props: {
    data: {
      type: Object,
    },
  },
  data() {
    return {
      examNumberBarcodeSrc:
        this.data["fieldInfos"] && this.data["fieldInfos"]["examNumber"],
      examNumberBarcodeName:
        this.data["fieldInfos"] && this.data["fieldInfos"]["examNumberStr"],
      defaultColumnFills: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
    };
  },
  computed: {
    classes() {
      return ["head-stdno", "card-head-body-spin"];
    },
    fillNumber() {
      return this.data["fillNumber"] || 13;
    },
    columnStyles() {
      return {
        width: (100 / this.fillNumber).toFixed(2) + "%",
      };
    },
  },
  methods: {
    getColumnFills(columnIndex) {
      if (
        !this.data.containsLetter ||
        !this.data.relationList ||
        !this.data.relationList.length
      ) {
        return [...this.defaultColumnFills];
      }

      const curRelation = this.data.relationList.find(
        (item) => item.columnIndex === columnIndex
      );
      if (!curRelation) return [...this.defaultColumnFills];

      return this.defaultColumnFills.map(
        (item, index) => curRelation.letters[index] || ""
      );
    },
  },
};
</script>