union-question-web/src/modules/paper-export/elements/fill-field/ElemFillField.vue

<template>
  <div class="elem-fill-field" :style="elemStyles">
    <div
      v-for="(info, index) in fieldList"
      :key="index"
      class="fill-field-item"
      :style="itemStyles"
    >
      <div class="fill-field-content" :style="lineStyles">
        <span :style="paramStyle">{{ info }}</span>
        <span>：</span>
        <span></span>
      </div>
    </div>
    <div v-if="!fieldList.length" class="fill-field-item" :style="itemStyles">
      <div class="fill-field-content" :style="lineStyles">
        <span :style="paramStyle">名称名</span>
        <span>：</span>
        <span></span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ElemFillField",
  props: {
    data: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      questions: [],
      paramStyle: {},
      lenWidths: {
        3: 44,
        4: 62,
        5: 72,
        6: 86,
        7: 100,
        8: 114,
      },
      fieldList: [],
    };
  },
  computed: {
    itemStyles() {
      return {
        width: 100 / this.data.fieldCountPerLine + "%",
      };
    },
    lineStyles() {
      return {
        height: this.data.lineSpacing + "px",
        paddingTop: this.data.lineSpacing - 26 + "px",
      };
    },
    elemStyles() {
      if (this.data.mode === "side") {
        return {
          position: "absolute",
          width: this.data.h + "px",
          height: this.data.w + "px",
          transform: "rotate(-90deg)",
          "transform-origin": "0 100%",
          bottom: 0,
          left: this.data.w + "px",
        };
      } else {
        return null;
      }
    },
  },
  watch: {
    data: {
      immediate: true,
      handler() {
        this.init();
      },
    },
  },
  methods: {
    init() {
      this.fieldList = this.data.fields
        .split(/[,，]/)
        .filter((item) => item.trim());

      if (this.data.nameIsJustify) {
        const nameNums = this.fieldList.map((item) => item.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 = {};
      }
    },
  },
};
</script>