frame/parts/print/certCard copy.vue

<template>
  <div id="certCard">
    <el-row>
      <el-col :span="24">
        <el-col :span="24" class="btn">
          <el-button type="primary" size="mini" @click="submit">生成打印文件</el-button>
          <el-button v-if="url" type="success" size="mini" @click="openPdf">
            打开生成文件
          </el-button>
        </el-col>
        <el-col :span="24" class="list">
          <data-table :fields="fields" :data="list" :opera="opera" :usePage="false"></data-table>
        </el-col>
      </el-col>
    </el-row>
    <!-- 不需要输入了, 作为参数传过来,班级最后一天为毕业日期 -->
    <!-- <el-dialog title="毕业日期" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <el-col :span="24">
        <el-date-picker v-model="endDate" type="date" format="yyyy  年  MM  月 dd  日" value-format="yyyy   年  MM  月 dd  日" placeholder="选择日期">
        </el-date-picker>
      </el-col>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog> -->
  </div>
</template>

<script>
const moment = require('moment');
import _ from 'lodash';
import printTemplate from 'print-template';
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 },
  },
  components: {
    dataTable,
  },
  data: function() {
    return {
      url: '',
      template: null,
      zhengshu: require('@/assets/zhengshu.jpg'),
      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' ? '是' : '无资格') },
      ],
      dialogVisible: false,
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.template = new printTemplate();
      this.template.push({
        name: 'expressDelivery1',
        unit: 'px',
        size: [1046.93, 714.02],
        fixed: [
          { type: 'image', x: 0, y: 0, default: this.zhengshu, width: 1046.93, height: 714.02 },
          { type: 'text', x: 138, y: 356, default: '学校（院）：', fontSize: 18, fontFamily: '华文中宋' },
          { type: 'text', x: 607, y: 356, default: '级', fontSize: 18, fontFamily: '华文中宋' },
          { type: 'text', x: 857, y: 356, default: '专业', fontSize: 18, fontFamily: '华文中宋' },
          { type: 'text', x: 138, y: 426, default: '学生：', fontSize: 18, fontFamily: '华文中宋' },
          { type: 'text', x: 365, y: 426, default: '于', fontSize: 18, fontFamily: '华文中宋' },
          { type: 'text', x: 480, y: 426, default: '年', fontSize: 18, fontFamily: '华文中宋' },
          { type: 'text', x: 560, y: 426, default: '月参加吉林省大学生创新创业培训', fontSize: 18, fontFamily: '华文中宋' },
          { type: 'text', x: 138, y: 500, default: '第', fontSize: 18, fontFamily: '华文中宋' },
          { type: 'text', x: 238, y: 500, default: '期培训班。培训合格，特发此证。', fontSize: 18, fontFamily: '华文中宋' },
          { type: 'text', x: 155, y: 580, default: '证书编号：', fontSize: 18, fontFamily: '华文中宋' },
        ],
        data: {
          school_name: { type: 'text', x: 268, y: 356, fontSize: 20, fontFamily: '华文中宋' },
          entry_year: { type: 'text', x: 555, y: 356, fontSize: 20, fontFamily: '华文中宋' },
          major: { type: 'text', x: 635, y: 356, fontSize: 20, fontFamily: '华文中宋' },
          name: { type: 'text', x: 206, y: 426, fontSize: 20, fontFamily: '华文中宋' },
          year: { type: 'text', x: 417, y: 426, fontSize: 20, fontFamily: '华文中宋' },
          month: { type: 'text', x: 507, y: 426, fontSize: 20, fontFamily: '华文中宋' },
          termnames: { type: 'text', x: 190, y: 500, fontSize: 20, fontFamily: '华文中宋' },
          cernum: { type: 'text', x: 270, y: 580, fontSize: 20, fontFamily: '华文中宋' },
          end_date: { type: 'text', x: 655, y: 580, fontSize: 20, fontFamily: '华文中宋' },
        },
      });
    },
    openPdf() {
      let link = document.createElement('a');
      link.href = this.url;
      link.target = '_blank';
      link.click();
    },
    print() {
      this.dialogVisible = true;
    },
    submit() {
      let msg = this.$message({ message: '正在生成...', duration: 0 });
      this.dialogVisible = false;
      let end_date = { end_date: moment(this.enddate).format('YYYY  年  MM  月 DD  日') };
      let year = { year: this.startdate.substring(0, 4) };
      let month = { month: this.startdate.substring(5, 7) };
      var enticeNew = this.list.map(item => ({ ...item, ...end_date, ...year, ...month }));
      let data = [];
      this.url = null;
      let duplicate = _.cloneDeep(enticeNew);
      duplicate = duplicate.map(i => {
        i.school_name = `${i.school_name}`;
        i.entry_year = `${i.entry_year}`;
        i.major = `${i.major}`;
        i.name = `${i.name}`;
        i.year = `${i.year}`;
        i.month = `${i.month}`;
        i.termnames = `${i.termname}`;
        i.cernum = `${i.year}${i.termname}${i.classname}01`;
        i.end_date = `${i.end_date}`;
        return i;
      });
      // this.template.print('expressDelivery1', [duplicate[0]]).then(pdf => {
      this.template.print('expressDelivery1', duplicate).then(pdf => {
        msg.close();
        if (pdf) {
          this.$message.success('生成成功');
          this.url = pdf.output('bloburi', { filename: '证书' });
        } else {
          this.$message.warring('生成失败');
        }
      });
    },
    handleClose(done) {
      done();
    },
  },
  computed: {
    ...mapState(['user']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped>
.btn {
  margin: 0 0 15px 0;
}
</style>