init project

mes/qd/src/views/wms/test/print2/demo.vue

@@ -0,0 +1,143 @@
+<template>
+  <div>
+    <div class="tab_company_out">
+      <div style="margin-bottom:10px;">
+        <span style="font-size: 24px;text-align: center;">大标题</span>
+      </div>
+      <table>
+        <tr>
+          <th width="12%"></th>
+          <th width="15%"></th>
+          <th width="15%"></th>
+          <th width="15%"></th>
+        </tr>
+        <!-- 每页显示onePageRow条数据 -->
+        <tr v-for="(row,index) in tableData" :key="index">
+          <td align="center">{{row.date}}</td>
+          <td align="center">{{row.name}}</td>
+          <td align="center">{{row.name}}</td>
+          <td align="center">{{row.name}}</td>
+        </tr>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Demo',
+  props: {
+    // 接受的打印数据
+    tableData: {}
+  }
+}
+</script>
+
+<style scoped>
+* {
+  padding: 0;
+  margin: 0;
+  list-style-type: none;
+  font-family: "微软雅黑";
+  font-size: 12px;
+}
+
+.tab_company_out {
+  text-align: center;
+  width: 100%;
+  margin: auto;
+  page-break-after: always;
+}
+
+h3 {
+  font-size: 14px;
+}
+
+.dan {
+  text-align: center;
+  position: relative;
+}
+
+.dan span {
+  position: absolute;
+  right: 0;
+}
+
+p {
+  overflow: hidden;
+  padding: 10px 0;
+}
+
+p span {
+  float: left;
+}
+
+p span ins {
+  text-decoration: underline;
+}
+
+p time {
+  float: right;
+}
+
+table {
+  width: 100%;
+  border: none;
+  border-bottom: 1px solid #000;
+}
+
+table tr td {
+  border: 1px solid #000;
+  border-bottom: none;
+  border-right: none;
+  height: 20px;
+  line-height: 20px;
+}
+
+table tr td:last-of-type,
+table tr th:last-of-type {
+  border-right: 1px solid #000;
+}
+
+table tr th {
+  border-top: 1px solid #000;
+  border-left: 1px solid #000;
+  height: 22px;
+  line-height: 22px;
+  font-size: 12px;
+}
+
+table th {
+  text-align: center;
+}
+
+table tr th:nth-child(2) {
+  width: 0;
+}
+
+.lu {
+  display: inline-block;
+  padding-top: 10px;
+}
+
+.lu li {
+  float: left;
+  text-align: left;
+  margin-right: 15px;
+}
+
+.lu li label {
+  width: 100px;
+  display: inline-block;
+}
+
+.lu li:last-of-type {
+  margin-right: 0;
+}
+</style>
+<style scoped>
+
+@page{
+  margin: 3mm;
+}
+</style>

mes/qd/src/views/wms/test/print2/index.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="app-container">
+    <el-button @click="printDemo">打印测试</el-button>
+
+    <vue-easy-print v-show="false" ref="easyPrint" :table-show="false" :space-row="true">
+      <demo :table-data="tableData" />
+    </vue-easy-print>
+
+  </div>
+</template>
+
+<script>
+
+// https://www.icode9.com/content-4-906367.html#vue_jsbarcode_19
+// https://juejin.cn/post/6882565127246184455
+
+// https://www.npmjs.com/package/vue-easy-print
+// https://github.com/bosscloud/vue-print
+// https://jsfiddle.net/pcloth/p35vz97u/
+import vueEasyPrint from 'vue-easy-print'
+import demo from './demo'
+
+export default {
+  components: {
+    vueEasyPrint,
+    demo
+  },
+  data() {
+    return {
+      tableData: [{
+        date: '2016-05-02',
+        name: '王小虎',
+        province: '上海',
+        city: '普陀区',
+        address: '上海市普陀区金沙江路 1518 弄',
+        zip: 200333
+      }, {
+        date: '2016-05-04',
+        name: '王小虎',
+        province: '上海',
+        city: '普陀区',
+        address: '上海市普陀区金沙江路 1517 弄',
+        zip: 200333
+      }, {
+        date: '2016-05-01',
+        name: '王小虎',
+        province: '上海',
+        city: '普陀区',
+        address: '上海市普陀区金沙江路 1519 弄',
+        zip: 200333
+      }, {
+        date: '2016-05-03',
+        name: '王小虎',
+        province: '上海',
+        city: '普陀区',
+        address: '上海市普陀区金沙江路 1516 弄',
+        zip: 200333
+      }]
+    }
+  },
+  created() {
+    for (let i = 0; i < 100; i++) {
+      const a = {
+        date: '2016-05-03',
+        name: '张三'
+      }
+      this.tableData.push(a)
+    }
+  },
+  methods: {
+    printDemo() {
+      this.$refs.easyPrint.print()
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>