更新

parts/print/print-sign copy.vue

@@ -0,0 +1,147 @@
+<template>
+  <div id="print-sign">
+    <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">
+          <table border="1">
+            <tr>
+              <th>姓名</th>
+              <th>性别</th>
+              <th>民族</th>
+              <th>身份证号</th>
+              <th>学校</th>
+              <th>专业</th>
+              <th>入学年份</th>
+              <th>手机号</th>
+              <th>班级</th>
+              <th>寝室</th>
+              <th>签名</th>
+            </tr>
+            <tr v-for="(item, index) in list" :key="index">
+              <td>{{ item.name }}</td>
+              <td>{{ item.gender }}</td>
+              <td>{{ item.nation }}</td>
+              <td>{{ item.id_number }}</td>
+              <td>{{ item.school_name }}</td>
+              <td>{{ item.major }}</td>
+              <td>{{ item.entry_year }}</td>
+              <td>{{ item.phone }}</td>
+              <td>{{ item.classname }}</td>
+              <td>{{ item.bedroom }}</td>
+              <td width="70px"></td>
+            </tr>
+          </table>
+
+          <!-- <el-table :data="list" border style="width: 100%">
+            <el-table-column width="260px" align="center" label="姓名" prop="name"></el-table-column>
+            <el-table-column width="75px" align="center" label="性别" prop="gender"></el-table-column>
+            <el-table-column width="140px" align="center" label="民族" prop="nation"></el-table-column>
+            <el-table-column width="280px" align="center" label="身份证号" prop="id_number"></el-table-column>
+            <el-table-column width="310px" align="center" label="学校" prop="school_name"></el-table-column>
+            <el-table-column align="center" label="专业" prop="major"></el-table-column>
+            <el-table-column width="120px" align="center" label="入学年份" prop="entry_year"></el-table-column>
+            <el-table-column width="180px" align="center" label="手机号" prop="phone"></el-table-column>
+            <el-table-column width="100px" align="center" label="班级" prop="classname"></el-table-column>
+            <el-table-column width="100px" align="center" label="寝室" prop="bedroom"></el-table-column>
+            <el-table-column width="150px" align="center" label="签名"></el-table-column>
+          </el-table> -->
+        </el-col>
+      </span>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'print-sign',
+  props: {
+    list: { type: Array, default: () => [] },
+  },
+  components: {},
+  data: function() {
+    return {
+      display: 'list',
+    };
+  },
+  created() {},
+  methods: {
+    toPrint() {
+      this.$print(this.$refs.print);
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.printList {
+  width: 1050px;
+  // height: 717px;
+
+  table {
+    border-collapse: collapse;
+    zoom: 0.9;
+    tr {
+      th {
+        text-align: center;
+        // padding: 8px 0;
+        height: 51.6px;
+      }
+      td {
+        text-align: center;
+        height: 23px;
+        margin: 0 5px;
+      }
+    }
+  }
+  // height: 719px;
+  // border: 1px solid #ccc;
+  // /deep/.el-table {
+  //   font-size: 10px;
+  //   zoom: 0.5;
+  // }
+  // /deep/.el-table td {
+  //   height: 57px;
+  // }
+  // /deep/.el-table th {
+  //   height: 40px;
+  // }
+}
+</style>

parts/print/print-sign.vue

@@ -1,4 +1,4 @@
-<template>
+<template>
   <div id="print-sign">
     <el-row>
       <span v-if="display == 'list'">
@@ -31,48 +31,34 @@
           </el-col>
         </el-col>
         <el-col :span="24" class="printList" ref="print">
-          <table border="1">
-            <tr>
-              <th>姓名</th>
-              <th>性别</th>
-              <th>民族</th>
-              <th>身份证号</th>
-              <th>学校</th>
-              <th>专业</th>
-              <th>入学年份</th>
-              <th>手机号</th>
-              <th>班级</th>
-              <th>寝室</th>
-              <th>签名</th>
-            </tr>
-            <tr v-for="(item, index) in list" :key="index">
-              <td>{{ item.name }}</td>
-              <td>{{ item.gender }}</td>
-              <td>{{ item.nation }}</td>
-              <td>{{ item.id_number }}</td>
-              <td>{{ item.school_name }}</td>
-              <td>{{ item.major }}</td>
-              <td>{{ item.entry_year }}</td>
-              <td>{{ item.phone }}</td>
-              <td>{{ item.classname }}</td>
-              <td>{{ item.bedroom }}</td>
-              <td width="70px"></td>
-            </tr>
-          </table>
-
-          <!-- <el-table :data="list" border style="width: 100%">
-            <el-table-column width="260px" align="center" label="姓名" prop="name"></el-table-column>
-            <el-table-column width="75px" align="center" label="性别" prop="gender"></el-table-column>
-            <el-table-column width="140px" align="center" label="民族" prop="nation"></el-table-column>
-            <el-table-column width="280px" align="center" label="身份证号" prop="id_number"></el-table-column>
-            <el-table-column width="310px" align="center" label="学校" prop="school_name"></el-table-column>
-            <el-table-column align="center" label="专业" prop="major"></el-table-column>
-            <el-table-column width="120px" align="center" label="入学年份" prop="entry_year"></el-table-column>
-            <el-table-column width="180px" align="center" label="手机号" prop="phone"></el-table-column>
-            <el-table-column width="100px" align="center" label="班级" prop="classname"></el-table-column>
-            <el-table-column width="100px" align="center" label="寝室" prop="bedroom"></el-table-column>
-            <el-table-column width="150px" align="center" label="签名"></el-table-column>
-          </el-table> -->
+          <div>
+            <p>
+              <span class="textOver one">姓名</span>
+              <span class="textOver two">性别</span>
+              <span class="textOver three">民族</span>
+              <span class="textOver four">身份证号</span>
+              <span class="textOver five">学校</span>
+              <span class="textOver six">专业</span>
+              <span class="textOver seven">入学年份</span>
+              <span class="textOver eight">手机号</span>
+              <span class="textOver nine">班级</span>
+              <span class="textOver ten">寝室</span>
+              <span class="textOver twlve">签名</span>
+            </p>
+            <p class="list" v-for="(item, index) in list" :key="index">
+              <span class="textOver one">{{ item.name }}</span>
+              <span class="textOver two">{{ item.gender }}</span>
+              <span class="textOver three">{{ item.nation }}</span>
+              <span class="textOver four">{{ item.id_number }}</span>
+              <span class="textOver five">{{ item.school_name }}</span>
+              <span class="textOver six">{{ item.major }}</span>
+              <span class="textOver seven">{{ item.entry_year }}</span>
+              <span class="textOver eight">{{ item.phone }}</span>
+              <span class="textOver nine">{{ item.classname }}</span>
+              <span class="textOver ten">{{ item.bedroom }}</span>
+              <span class="textOver twlve"></span>
+            </p>
+          </div>
         </el-col>
       </span>
     </el-row>
@@ -113,35 +99,73 @@ export default {
 <style lang="less" scoped>
 .printList {
   width: 1050px;
-  // height: 717px;
-
-  table {
-    border-collapse: collapse;
-    zoom: 0.9;
-    tr {
-      th {
+  div {
+    // height: 717px;
+    // border: 1px solid #000;
+    zoom: 0.8;
+    p:nth-child(1) {
+      height: 30px;
+      border: 1px solid #000;
+      span {
+        display: inline-block;
+        height: 30px;
+        line-height: 30px;
         text-align: center;
-        // padding: 8px 0;
-        height: 51.6px;
+        border-left: 1px solid #000;
+        border-right: 1px solid #000;
+        font-weight: bold;
       }
-      td {
+    }
+    .list {
+      border: 1px solid #000;
+      height: 21.7px;
+      span {
         text-align: center;
-        height: 23px;
-        margin: 0 5px;
+        display: inline-block;
+        border-left: 1px solid #000;
+        border-right: 1px solid #000;
+      }
+    }
+    p {
+      .one {
+        width: 150px;
+      }
+      .two {
+        width: 50px;
+      }
+      .three {
+        width: 90px;
+      }
+      .four {
+        width: 180px;
+      }
+      .five {
+        width: 185px;
+      }
+      .six {
+        width: 205px;
+      }
+      .seven {
+        width: 70px;
+      }
+      .eight {
+        width: 120px;
+      }
+      .nine {
+        width: 70px;
+      }
+      .ten {
+        width: 90px;
+      }
+      .twlve {
+        width: 72.5px;
       }
     }
   }
-  // height: 719px;
-  // border: 1px solid #ccc;
-  // /deep/.el-table {
-  //   font-size: 10px;
-  //   zoom: 0.5;
-  // }
-  // /deep/.el-table td {
-  //   height: 57px;
-  // }
-  // /deep/.el-table th {
-  //   height: 40px;
-  // }
+}
+.textOver {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 </style>