更新

parts/print/certCard copy.vue

@@ -0,0 +1,161 @@
+<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>

parts/print/certCard.vue

@@ -1,36 +1,67 @@
 <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>
+      <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" :data="list" :opera="opera" :usePage="false"></data-table>
+          </el-col>
         </el-col>
-        <el-col :span="24" class="list">
-          <data-table :fields="fields" :data="list" :opera="opera" :usePage="false"></data-table>
+      </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"> {{ item.termname }}</span>
+                  <span class="thr3">期培训班，培训合格，特发此证。</span>
+                </p>
+                <p class="four">
+                  <span class="four1">证书编号：</span>
+                  <span class="four2">{{ item.year }}{{ item.termname }}{{ item.classname }}</span>
+                  <span class="four3">2020年03月16日</span>
+                </p>
+              </el-col>
+            </el-col>
+          </el-col>
         </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> -->
+    </el-row>
   </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 {
@@ -40,14 +71,10 @@ export default {
     startdate: { type: String },
     enddate: { type: String },
   },
-  components: {
-    dataTable,
-  },
+  components: { dataTable },
   data: function() {
     return {
-      url: '',
-      template: null,
-      zhengshu: require('@/assets/zhengshu.jpg'),
+      display: 'list',
       opera: [],
       fields: [
         { label: '姓名', prop: 'name' },
@@ -57,89 +84,29 @@ export default {
         { label: '职务', prop: 'job' },
         { label: '是否优秀', prop: 'is_fine', format: i => (i === '0' ? '否' : i === '1' ? '是' : '无资格') },
       ],
-      dialogVisible: false,
+      beijingImage: require('@/assets/zhengshu.jpg'),
+      // 证书列表
+      certList: [],
     };
   },
-  created() {
-    this.init();
-  },
+  created() {},
   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;
+    // 打印预览
+    clickView() {
+      this.display = 'listView';
+      let certList = this.list;
       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('生成失败');
-        }
-      });
+      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;
+      }
+      console.log(certList);
+      this.$set(this, `certList`, certList);
     },
-    handleClose(done) {
-      done();
+    toPrint() {
+      this.$print(this.$refs.print);
     },
   },
   computed: {
@@ -155,7 +122,133 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.btn {
-  margin: 0 0 15px 0;
+.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: '华文中宋';
+    .one {
+      position: absolute;
+      top: 356px;
+      left: 138px;
+      .one1 {
+        font-size: 18px;
+        display: inline-block;
+        width: 110px;
+      }
+      .one2 {
+        font-size: 20px;
+        display: inline-block;
+        width: 255px;
+      }
+      .one3 {
+        font-size: 20px;
+        display: inline-block;
+        width: 55px;
+      }
+      .one4 {
+        font-size: 18px;
+        display: inline-block;
+        width: 22px;
+      }
+      .one5 {
+        font-size: 20px;
+        display: inline-block;
+        width: 270px;
+      }
+      .one6 {
+        font-size: 18px;
+      }
+    }
+    .two {
+      position: absolute;
+      top: 426px;
+      left: 138px;
+      .two1 {
+        font-size: 18px;
+        display: inline-block;
+        width: 60px;
+      }
+      .two2 {
+        font-size: 20px;
+        display: inline-block;
+        width: 150px;
+      }
+      .two3 {
+        font-size: 18px;
+        display: inline-block;
+        width: 40px;
+      }
+      .two4 {
+        font-size: 20px;
+        display: inline-block;
+        width: 55px;
+      }
+      .two5 {
+        font-size: 18px;
+        display: inline-block;
+        width: 25px;
+      }
+      .two6 {
+        font-size: 20px;
+        display: inline-block;
+        width: 35px;
+      }
+      .two7 {
+        font-size: 18px;
+      }
+    }
+    .three {
+      position: absolute;
+      top: 500px;
+      left: 138px;
+      .thr1 {
+        font-size: 18px;
+        display: inline-block;
+        width: 35px;
+      }
+      .thr2 {
+        font-size: 20px;
+        display: inline-block;
+        width: 45px;
+      }
+      .thr3 {
+        font-size: 18px;
+      }
+    }
+    .four {
+      position: absolute;
+      top: 580px;
+      left: 155px;
+      .four1 {
+        font-size: 18px;
+        display: inline-block;
+        width: 100px;
+      }
+      .four2 {
+        font-size: 20px;
+        display: inline-block;
+        width: 385px;
+      }
+      .four3 {
+        font-size: 20px;
+        letter-spacing: 6px;
+      }
+    }
+  }
 }
 </style>

parts/print/namCard.vue

@@ -1,41 +1,54 @@
 <template>
   <div id="namCard">
-    <el-row type="flex" align="middle" justify="end" class="btn_bar">
-      <!-- <el-col :span="4" class="printingBtn">
-        <el-button type="primary" size="mini" icon="el-icon-arrow-left" @click="now--" :disabled="now == 0">上一班</el-button>
-      </el-col> -->
-      <el-col :span="4" class="printingBtn">
-        <el-button type="primary" size="mini" @click="toPrint()">打印名牌</el-button>
-      </el-col>
-      <!-- <el-col :span="4" class="printingBtn">
-        <el-button type="primary" size="mini" icon="el-icon-arrow-right" @click="now++" :disabled="now == csList.length - 1">下一班</el-button>
-      </el-col> -->
+    <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>
-
-    <!-- <el-col :span="24" class="info" ref="print">
-      <el-col :span="6" class="list" v-for="(item, index) in list" :key="index">
-        <p>
-          <span>吉林省高校学生就业能力扩展训练</span><span>第{{ item.termname }}期</span><span>{{ item.classname }}</span>
-        </p>
-        <p>{{ item.name }}</p>
-      </el-col>
-    </el-col> -->
-    <el-col :span="24" class="info" ref="print">
-      <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>
   </div>
 </template>
 
 <script>
 import _ from 'lodash';
 import { mapState, createNamespacedHelpers } from 'vuex';
-const { mapActions } = createNamespacedHelpers('student');
 export default {
   metaInfo: { title: '学生名单' },
   name: 'name-list',
@@ -43,15 +56,14 @@ export default {
   components: {},
   data: function() {
     return {
+      // 默认显示
+      display: 'list',
       csList: [],
       now: 0,
-      nowList: [],
-      isActive: false,
     };
   },
   created() {},
   methods: {
-    ...mapActions(['query']),
     groupByClass() {
       let duplicate = _.cloneDeep(this.list);
       let group = _.flatten(_.toPairs(_.groupBy(duplicate, 'classid'))).filter(f => _.isArray(f));
@@ -60,9 +72,6 @@ export default {
     toPrint() {
       this.$print(this.$refs.print);
     },
-    toreturn() {
-      window.history.go(-1);
-    },
   },
   computed: {
     id() {
@@ -88,37 +97,69 @@ export default {
 </script>
 
 <style lang="less" scoped>
-// .info {
-//   width: 714px;
-// }
-.list {
-  width: 300px;
-  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;
+.one {
+  .btn {
+    text-align: right;
+    margin: 10px 0;
   }
-  .namesmall {
-    font-size: 55px;
-    letter-spacing: 5px;
-    padding: 15px 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;
+    }
   }
-  .namelarge {
-    font-size: 36px;
-    letter-spacing: 5px;
-    padding: 0;
+}
+.two {
+  width: 842px;
+  .btn {
+    text-align: left;
+    margin: 15px 0;
   }
 }
-.printingBtn {
-  text-align: center;
-  padding: 10px 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>

parts/print/print-sign.vue

@@ -1,58 +1,51 @@
 <template>
   <div id="print-sign">
-    <el-row type="flex" align="middle" justify="end" class="btn_bar">
-      <el-col :span="4" class="printingBtn">
-        <el-button type="primary" size="mini" @click="toPrint()">打印报到表</el-button>
-      </el-col>
-    </el-row>
-    <el-row type="flex" align="middle" justify="center" style="text-align:center" id="printArea">
-      <!-- <table class="table" ref="print">
-        <tr>
-          <th style="width:150px">姓名</th>
-          <th style="width:250px">学校</th>
-          <th style="width:50px">性别</th>
-          <th style="width:100px">民族</th>
-          <th style="width:50px">班级</th>
-          <th>手机号</th>
-          <th style="width:100px">签名</th>
-        </tr>
-        <tr v-for="(i, index) in list" :key="index">
-          <td>{{ i.name }}</td>
-          <td>{{ i.school_name }}</td>
-          <td>{{ i.gender }}</td>
-          <td>{{ i.nation }}</td>
-          <td>{{ i.classname }}</td>
-          <td>{{ i.phone }}</td>
-          <td></td>
-        </tr>
-      </table> -->
-
-      <el-col :span="24" style="width:1055px;" ref="print">
-        <el-table border :data="list" size="small" style="border: solid #cecece;">
-          <!-- <el-table-column align="center" label="姓名" prop="name" width="120px"></el-table-column>
-          <el-table-column align="center" label="性别" prop="gender" width="70px"></el-table-column>
-          <el-table-column align="center" label="民族" prop="nation" width="80px"></el-table-column>
-          <el-table-column align="center" label="身份证号" prop="id_number" width="150px"></el-table-column>
-          <el-table-column align="center" label="学校" prop="school_name" width="130px"></el-table-column>
-          <el-table-column align="center" label="专业" prop="major" width="100px"></el-table-column>
-          <el-table-column align="center" label="入学年份" prop="entry_year" width="70px"></el-table-column>
-          <el-table-column align="center" label="手机号" prop="phone" width="100px"></el-table-column>
-          <el-table-column align="center" label="班级" prop="classname" width="80px"></el-table-column>
-          <el-table-column align="center" label="寝室" prop="bedroom" width="70px"></el-table-column>
-          <el-table-column align="center" label="签名" width="78x"></el-table-column> -->
-          <el-table-column align="center" label="姓名" prop="name"></el-table-column>
-          <el-table-column align="center" label="性别" prop="gender"></el-table-column>
-          <el-table-column align="center" label="民族" prop="nation"></el-table-column>
-          <el-table-column align="center" label="身份证号" prop="id_number"></el-table-column>
-          <el-table-column align="center" label="学校" prop="school_name"></el-table-column>
-          <el-table-column align="center" label="专业" prop="major"></el-table-column>
-          <el-table-column align="center" label="入学年份" prop="entry_year"></el-table-column>
-          <el-table-column align="center" label="手机号" prop="phone"></el-table-column>
-          <el-table-column align="center" label="班级" prop="classname"></el-table-column>
-          <el-table-column align="center" label="寝室" prop="bedroom"></el-table-column>
-          <el-table-column align="center" label="签名"></el-table-column>
-        </el-table>
-      </el-col>
+    <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="display = 'listView'">打印预览</el-button>
+          </el-col>
+          <el-col :span="24">
+            <el-table border :data="list" size="small" style="border: solid #cecece;">
+              <el-table-column align="center" label="姓名" prop="name"></el-table-column>
+              <el-table-column align="center" label="性别" prop="gender"></el-table-column>
+              <el-table-column align="center" label="民族" prop="nation"></el-table-column>
+              <el-table-column align="center" label="身份证号" prop="id_number"></el-table-column>
+              <el-table-column align="center" label="学校" prop="school_name"></el-table-column>
+              <el-table-column align="center" label="专业" prop="major"></el-table-column>
+              <el-table-column align="center" label="入学年份" prop="entry_year"></el-table-column>
+              <el-table-column align="center" label="手机号" prop="phone"></el-table-column>
+              <el-table-column align="center" label="班级" prop="classname"></el-table-column>
+              <el-table-column align="center" label="寝室" prop="bedroom"></el-table-column>
+              <el-table-column align="center" label="签名"></el-table-column>
+            </el-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="primary" size="mini" @click="toPrint()">打印</el-button>
+          </el-col>
+        </el-col>
+        <el-col :span="24" class="printList" ref="print">
+          <el-table :data="list" border style="width: 100%">
+            <el-table-column align="center" label="姓名" prop="name"></el-table-column>
+            <el-table-column width="60px" align="center" label="性别" prop="gender"></el-table-column>
+            <el-table-column width="60px" align="center" label="民族" prop="nation"></el-table-column>
+            <el-table-column align="center" label="身份证号" prop="id_number"></el-table-column>
+            <el-table-column align="center" label="学校" prop="school_name"></el-table-column>
+            <el-table-column align="center" label="专业" prop="major"></el-table-column>
+            <el-table-column width="70px" align="center" label="入学年份" prop="entry_year"></el-table-column>
+            <el-table-column align="center" label="手机号" prop="phone"></el-table-column>
+            <el-table-column width="60px" align="center" label="班级" prop="classname"></el-table-column>
+            <el-table-column width="70px" align="center" label="寝室" prop="bedroom"></el-table-column>
+            <el-table-column align="center" label="签名"></el-table-column>
+          </el-table>
+        </el-col>
+      </span>
     </el-row>
   </div>
 </template>
@@ -66,12 +59,13 @@ export default {
   },
   components: {},
   data: function() {
-    return {};
+    return {
+      display: 'list',
+    };
   },
   created() {},
   methods: {
     toPrint() {
-      // window.Print('#printArea');
       this.$print(this.$refs.print);
     },
   },
@@ -88,20 +82,18 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.table {
-  border: 0.5px solid #ccc;
-  th {
-    // padding: 0 5px;
-    border: 0.25px solid #ccc;
+.printList {
+  width: 1050px;
+  // height: 719px;
+  border: 1px solid #ccc;
+  /deep/.el-table {
+    font-size: 10px;
   }
-  td {
-    text-align: center;
-    // padding: 0 5px;
-    border: 0.25px solid #ccc;
+  /deep/.el-table td {
+    height: 71.5px;
+  }
+  /deep/.el-table th {
+    height: 40px;
   }
-}
-/deep/.el-table--small td {
-  height: 76px;
-  padding: 0;
 }
 </style>