frame/parts/print/certCard.vue

<template>
  <div id="certCard">
    <el-row>
      <span v-if="display == 'list'">
        <el-col :span="24">
          <el-col :span="24" style="margin:15px 0;">
            <el-button type="primary" size="mini" @click="clickView()"> 打印预览</el-button>
          </el-col>
          <el-col :span="24">
            <data-table :fields="fields" :select="true" @handleSelect="handleSelect" :data="list" :opera="opera" :usePage="false"></data-table>
          </el-col>
        </el-col>
      </span>
      <span v-else>
        <el-col :span="24">
          <el-col :span="24" style="margin:15px 0;">
            <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="certInfo" ref="print">
            <el-col :span="24" class="list" v-for="(item, index) in certList" :key="index">
              <el-col :span="24" class="bjImage no-print">
                <el-image :src="beijingImage"></el-image>
              </el-col>
              <el-col :span="24" class="cardInfo">
                <p class="one">
                  <span class="one1">学校（院）：</span>
                  <span class="one2">{{ item.school_name }}</span>
                  <span class="one3">{{ item.entry_year }}</span>
                  <span class="one4">级</span>
                  <span class="one5">{{ item.major }}</span>
                  <span class="one6">专业</span>
                </p>
                <p class="two">
                  <span class="two1">学生：</span>
                  <span class="two2">{{ item.name }}</span>
                  <span class="two3">于</span>
                  <span class="two4">{{ item.year }}</span>
                  <span class="two5">年</span>
                  <span class="two6">{{ item.month }}</span>
                  <span class="two7">月参加吉林省大学生就业能力扩展训练</span>
                </p>
                <p class="three">
                  <span class="thr1">第</span>
                  <span class="thr2"> {{ term }}</span>
                  <span class="thr3">期培训班，培训合格，特发此证。</span>
                </p>
                <p class="four">
                  <span class="four1">证书编号：</span>
                  <span class="four2">{{ item.year }}{{ term }}{{ getclanum(classname) }}{{ item.number }}</span>
                  <span class="four3">{{ getend(enddate) }}</span>
                </p>
              </el-col>
            </el-col>
          </el-col>
        </el-col>
      </span>
    </el-row>
  </div>
</template>

<script>
const moment = require('moment');
import _ from 'lodash';
import dataTable from '@frame/components/filter-page-table';
import { mapState, createNamespacedHelpers } from 'vuex';
export default {
  name: 'certCard',
  props: {
    list: { type: Array, default: () => [] },
    startdate: { type: String },
    enddate: { type: String },
    classname: { type: String },
    term: { type: String },
  },
  components: { dataTable },
  data: function() {
    return {
      display: 'list',
      opera: [],
      fields: [
        { label: '姓名', prop: 'name' },
        { label: '学校名称', prop: 'school_name' },
        { label: '院系', prop: 'faculty' },
        { label: '专业', prop: 'major' },
        { label: '职务', prop: 'job' },
        { label: '是否优秀', prop: 'is_fine', format: i => (i === '0' ? '否' : i === '1' ? '是' : '无资格') },
      ],
      beijingImage: require('@/assets/zhengshu.jpg'),
      // 证书列表
      certList: [],
      // 选择学生的列表
      selectList: [],
    };
  },
  created() {},
  methods: {
    // 打印预览
    clickView() {
      let certList = this.selectList;
      if (certList.length == 0) {
        this.$message({
          message: '请选择需要打印证书的学生',
          type: 'warning',
        });
      } else {
        this.display = 'listView';
        let end_date = { end_date: moment(this.enddate).format('YYYY  年  MM  月 DD  日') };
        let year = this.startdate.substring(0, 4);
        let month = this.startdate.substring(5, 7);
        for (const val of certList) {
          val.year = year;
          val.month = month;
        }
        this.$set(this, `certList`, certList);
      }
    },
    handleSelect(data) {
      this.$set(this, `selectList`, data);
    },
    toPrint() {
      this.$print(this.$refs.print);
    },
    // 結束時間
    getend(date) {
      let end_date = moment(date).format('YYYY  年  MM  月 DD  日');
      if (end_date) return end_date;
    },
    // 过滤班级
    getclanum(index) {
      var num = index.replace(/[^\d]/g, '');
      if (num < 10) return '0' + num;
      else return num;
    },
    // 过滤几号学生
    // getnum(index) {
    //   let num = index + 1;
    //   if (num < 10) return '0' + num;
    //   else return index;
    // },
  },
  computed: {
    ...mapState(['user']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped>
.certInfo {
  .list {
    width: 1050px;
    height: 719px;
    overflow: hidden;
    position: relative;
  }
  .bjImage {
    width: 100%;
    height: 719px;
    border: 1px solid #000;
    .el-image {
      width: 100%;
      height: 717px;
    }
  }
  .cardInfo {
    position: absolute;
    font-family: Arial;
    .one {
      position: absolute;
      top: 356px;
      left: 115px;
      .one1 {
        font-size: 18px;
        display: inline-block;
        width: 110px;
        font-weight: bold;
        font-family: Arial;
      }
      .one2 {
        font-size: 20px;
        display: inline-block;
        width: 270px;
        font-weight: bold;
        font-family: Arial;
      }
      .one3 {
        font-size: 20px;
        display: inline-block;
        width: 55px;
        font-weight: bold;
        font-family: Arial;
      }
      .one4 {
        font-size: 18px;
        display: inline-block;
        width: 22px;
        font-weight: bold;
        font-family: Arial;
      }
      .one5 {
        font-size: 20px;
        display: inline-block;
        width: 310px;
        font-weight: bold;
        font-family: Arial;
      }
      .one6 {
        font-size: 18px;
        font-weight: bold;
        font-family: Arial;
      }
    }
    .two {
      position: absolute;
      top: 426px;
      left: 115px;
      .two1 {
        font-size: 18px;
        display: inline-block;
        width: 60px;
        font-weight: bold;
        font-family: Arial;
      }
      .two2 {
        font-size: 20px;
        display: inline-block;
        width: 150px;
        font-weight: bold;
        font-family: Arial;
      }
      .two3 {
        font-size: 18px;
        display: inline-block;
        width: 70px;
        font-weight: bold;
        font-family: Arial;
      }
      font-weight: bold;
      font-family: Arial;
      .two4 {
        font-size: 20px;
        display: inline-block;
        width: 90px;
        font-weight: bold;
        font-family: Arial;
      }
      .two5 {
        font-size: 18px;
        display: inline-block;
        width: 25px;
        font-weight: bold;
        font-family: Arial;
      }
      .two6 {
        font-size: 20px;
        display: inline-block;
        width: 90px;
        font-weight: bold;
        font-family: Arial;
      }
      .two7 {
        font-size: 18px;
        font-weight: bold;
        font-family: Arial;
      }
    }
    .three {
      position: absolute;
      top: 500px;
      left: 115px;
      .thr1 {
        font-size: 18px;
        display: inline-block;
        width: 35px;
        font-weight: bold;
        font-family: Arial;
      }
      .thr2 {
        font-size: 20px;
        display: inline-block;
        width: 45px;
        font-weight: bold;
        font-family: Arial;
      }
      .thr3 {
        font-size: 18px;
        font-weight: bold;
        font-family: Arial;
      }
    }
    .four {
      position: absolute;
      top: 580px;
      left: 120px;
      .four1 {
        font-size: 18px;
        display: inline-block;
        width: 100px;
        font-weight: bold;
        font-family: Arial;
      }
      .four2 {
        font-size: 20px;
        display: inline-block;
        width: 430px;
        font-weight: bold;
        font-family: Arial;
      }
      .four3 {
        font-size: 20px;
        letter-spacing: 6px;
        font-weight: bold;
        font-family: Arial;
      }
    }
  }
}
</style>