teachcloud-print-web/card/elements/fill-field/ElemFillField.vue

<template>
  <div class="elem-fill-field">
    <div
      class="fill-field-item"
      v-for="(info, index) in data.fields"
      :key="index"
      :style="itemStyles"
    >
      <div class="fill-field-content" :style="lineStyles">
        <span :style="paramStyle">{{ info.name }}</span>
        <span>：</span>
        <span>{{ fieldInfos[info.code] }}</span>
      </div>
    </div>
    <div v-if="!data.fields.length" class="fill-field-item" :style="itemStyles">
      <div class="fill-field-content" :style="lineStyles">
        <span :style="paramStyle">变量名</span>
        <span>：</span>
        <span>12345</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "elem-fill-field",
  props: {
    data: {
      type: Object
    }
  },
  data() {
    return {
      fieldInfos: this.data["fieldInfos"] || {},
      questions: [],
      paramStyle: {},
      lenWidths: {
        3: 44,
        4: 62,
        5: 72,
        6: 86,
        7: 100,
        8: 114
      }
    };
  },
  computed: {
    itemStyles() {
      return {
        width: 100 / this.data.fieldCountPerLine + "%"
      };
    },
    lineStyles() {
      return {
        height: this.data.lineSpacing + "px",
        paddingTop: this.data.lineSpacing - 26 + "px"
      };
    }
  },
  methods: {
    init() {
      if (this.data.nameIsJustify) {
        const nameNums = this.data.fields.map(item => item.name.length);
        const maxNameLen = Math.max.apply(null, nameNums);
        const num = maxNameLen < 3 ? 3 : maxNameLen > 8 ? 8 : maxNameLen;
        this.paramStyle = {
          width: this.lenWidths[num] + "px"
        };
      } else {
        this.paramStyle = {};
      }
    }
  },
  watch: {
    data: {
      immediate: true,
      handler() {
        this.init();
      }
    }
  }
};
</script>