frame/parts/print/namCard.vue

<template>
  <div id="namCard">
    <el-row>
      <span v-if="display == 'list'">
        <el-col :span="24" class="one">
          <el-col :span="24" class="btn">
            <el-button type="primary" size="mini" @click="display = 'listView'">打印预览</el-button>
          </el-col>
          <el-col :span="24">
            <el-col :span="6" class="list" v-for="(item, index) in csList[now]" :key="index">
              <p class="txt">
                <span>吉林省高校学生就业能力拓展训练</span> <span>第{{ item.termname }}期</span> <span>{{ item.classname }}班</span>
              </p>
              <p v-if="item.name.length <= 4" class="namesmall">{{ item.name }}</p>
              <p v-else class="namelarge">{{ item.name }}</p>
            </el-col>
          </el-col>
        </el-col>
      </span>
      <span v-else>
        <el-col :span="24" class="two">
          <el-col :span="24" class="btn">
            <el-button type="primary" size="mini" @click="display = 'list'">返回</el-button>
            <el-button type="success" size="mini" @click="toPrint()">打印</el-button>
          </el-col>
          <el-col :span="24" class="printStyle" ref="print">
            <el-col :span="24" class="list" v-for="(item, index) in csList[now]" :key="index">
              <p>
                <span>吉林省高校学生就业能力拓展训练</span> <span>第{{ item.termname }}期</span> <span>{{ item.classname }}班</span>
              </p>
              <span v-if="item.name.length < 8">
                <div v-bind:class="[item.name.length >= 7 ? 'largesize' : 'smallsize']">
                  {{ item.name }}
                </div>
              </span>
              <span v-else>
                <div class="superBigsize">
                  {{ item.name }}
                </div>
              </span>
            </el-col>
          </el-col>
        </el-col>
      </span>
    </el-row>
  </div>
</template>

<script>
import _ from 'lodash';
import { mapState, createNamespacedHelpers } from 'vuex';
export default {
  metaInfo: { title: '学生名单' },
  name: 'name-list',
  props: { list: { type: Array, default: () => [] } },
  components: {},
  data: function() {
    return {
      // 默认显示
      display: 'list',
      csList: [],
      now: 0,
    };
  },
  created() {},
  methods: {
    groupByClass() {
      let duplicate = _.cloneDeep(this.list);
      let group = _.flatten(_.toPairs(_.groupBy(duplicate, 'classid'))).filter(f => _.isArray(f));
      this.$set(this, `csList`, group);
    },
    toPrint() {
      this.$print(this.$refs.print);
    },
  },
  computed: {
    id() {
      return this.$route.query.id;
    },
    mainTitle() {
      let meta = this.$route.meta;
      let main = meta.title || '';
      let sub = meta.sub || '';
      let title = main + sub;
      return title;
    },
  },
  watch: {
    list: {
      handler(val) {
        if (val) this.groupByClass();
      },
      immediate: true,
    },
  },
};
</script>

<style lang="less" scoped>
.one {
  .btn {
    text-align: right;
    margin: 10px 0;
  }
  .list {
    height: 140px;
    border: 1px solid #000;
    padding: 5px 5px;
    p {
      float: left;
      width: 100%;
      text-align: center;
    }
    .txt {
      font-size: 14px;
      font-weight: bold;
      padding: 0 0 5px 0;
    }
    .namesmall {
      font-size: 55px;
      letter-spacing: 5px;
      padding: 15px 0;
    }
    .namelarge {
      font-size: 36px;
      letter-spacing: 5px;
      padding: 0;
    }
  }
}
.two {
  width: 842px;
  .btn {
    text-align: left;
    margin: 15px 0;
  }
}
.printStyle {
  width: 842px;
  // height: 1218px;
  .list {
    width: 335px;
    height: 135px;
    text-align: center;
    border: 1px solid #ccc;
    p:first-child {
      font-size: 15px;
      font-weight: bold;
      padding: 5px 0;
    }
    .superBigsize {
      font-size: 30px;
      padding: 30px 0;
    }
    .largesize {
      font-size: 35px;
      padding: 25px 0;
    }
    .smallsize {
      font-size: 50px;
      padding: 15px 0;
    }
  }
}
</style>