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

<template>
  <div class="head-stdinfo card-head-body-spin">
    <div class="stdinfo-item" v-for="(info, index) in fields" :key="index">
      <span :style="paramStyle" v-html="info.contentHtml"></span>
      <span>：</span>
      <span :style="contStyle">{{ fieldInfos[info.code] }}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "head-stdinfo",
  props: {
    data: {
      type: Object,
    },
  },
  data() {
    return {
      fieldInfos: this.data["fieldInfos"] || {},
      fields: [],
      paramStyle: {},
      contStyle: {},
      lenWidths: {
        3: 45,
        4: 62,
        5: 75,
        6: 90,
        7: 105,
        8: 120,
      },
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.fields = [...this.data.requiredFields, ...this.data.extendFields]
        .filter((item) => item.enable)
        .map((item) => {
          // 兼容wkhtmltopdf 汉字两端对齐的问题
          item.contentHtml = item.name
            .split("")
            .map((str) => `<i>${str}</i>`)
            .join(" ");
          return item;
        });
      const nameNums = this.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",
      };
      this.contStyle = {
        marginLeft: this.lenWidths[num] + 20 + "px",
      };
    },
  },
};
</script>