|
|
@@ -0,0 +1,136 @@
|
|
|
+<template>
|
|
|
+ <div id="certCard">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-col :span="24" class="btn">
|
|
|
+ <el-button type="primary" size="mini" @click="print">生成打印文件</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" :total="total" :opera="opera" :usePage="false"></data-table>
|
|
|
+ </el-col>
|
|
|
+ <!-- <el-col :span="24" ref="print">
|
|
|
+ <el-col :span="24" class="list" v-for="(item, index) in list" :key="index">
|
|
|
+ <p>
|
|
|
+ <span>学校（院）：</span>
|
|
|
+ <span>{{ item.school_name }}</span>
|
|
|
+ <span>,</span>
|
|
|
+ <span>{{ item.entry_year }}</span>
|
|
|
+ <span>级</span>
|
|
|
+ <span>{{ item.major }}</span>
|
|
|
+ <span>专业</span>
|
|
|
+ <span>学生：</span>
|
|
|
+ <span>{{ item.name }}</span>
|
|
|
+ <span>于</span>
|
|
|
+ <span>2020年11月参加吉林省大学生就业能力扩展训练</span>
|
|
|
+ <span>第</span>
|
|
|
+ <span>{{ item.termname }}</span>
|
|
|
+ <span>期培训班。培训合格，特发此证</span>
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ <span>证书编号：2020{{ item.termname }}{{ item.classname }}</span>
|
|
|
+ <span>2020年11月22日</span>
|
|
|
+ </p>
|
|
|
+ </el-col>
|
|
|
+ </el-col> -->
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+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: () => [] },
|
|
|
+ total: null,
|
|
|
+ },
|
|
|
+ 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' ? '是' : '无资格') },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ 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 }],
|
|
|
+ data: {
|
|
|
+ school_name: { type: 'text', x: 15, y: 15, fontSize: 16 },
|
|
|
+ entry_year: { type: 'text', x: 56, y: 55, fontSize: 16 },
|
|
|
+ major: { type: 'text', x: 107, y: 105, fontSize: 16 },
|
|
|
+ name: { type: 'text', x: 158, y: 155, fontSize: 16 },
|
|
|
+ termname: { type: 'text', x: 15, y: 255, fontSize: 16 },
|
|
|
+ cernum: { type: 'text', x: 100, y: 250, fontSize: 16 },
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ openPdf() {
|
|
|
+ let link = document.createElement('a');
|
|
|
+ link.href = this.url;
|
|
|
+ link.target = '_blank';
|
|
|
+ link.click();
|
|
|
+ },
|
|
|
+ print() {
|
|
|
+ let data = [];
|
|
|
+ this.url = null;
|
|
|
+ let duplicate = _.cloneDeep(this.list);
|
|
|
+ duplicate = duplicate.map(i => {
|
|
|
+ i.cernum = `2020${i.termname}${i.classname}`;
|
|
|
+ i.entry_year = `nihao${i.termname}${i.classname}`;
|
|
|
+ return i;
|
|
|
+ });
|
|
|
+ // this.template.print('expressDelivery1', [duplicate[0]]).then(pdf => {
|
|
|
+ this.template.print('expressDelivery1', [duplicate[0]]).then(pdf => {
|
|
|
+ if (pdf) {
|
|
|
+ this.$message.success('生成成功');
|
|
|
+ this.url = pdf.output('bloburi', { filename: '证书' });
|
|
|
+ } else {
|
|
|
+ this.$message.warring('生成失败');
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+ 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>
|
