更新

package.json

@@ -20,6 +20,7 @@
     "lodash": "^4.17.15",
     "moment": "^2.24.0",
     "naf-core": "^0.1.2",
+    "print": "^1.2.0",
     "qrcode": "^1.4.4",
     "vue": "^2.6.10",
     "vue-meta": "^2.3.2",

src/main.js

@@ -10,6 +10,8 @@ import '@/plugins/element';
 import InitStomp from '@/plugins/stomp';
 import '@frame/icon/iconfont.css';
 Vue.config.productionTip = false;
+import Print from '@/util/print';
+Vue.use(Print); //注册
 
 new Vue({
   router,

src/router/index.js

@@ -69,6 +69,14 @@ const routes = [
         meta: { title: '班级', sub: '寝室' },
         component: () => import('@/views/classes/bedroom.vue'),
       },
+      // 新增-打印名单
+
+      {
+        path: '/classes/namCard',
+        name: 'classes_namCard',
+        meta: { title: '班级', sub: '学生名单' },
+        component: () => import('@/views/classes/namCard.vue'),
+      },
       {
         path: '/student/detail',
         name: 'student_detail',

src/util/print.js

@@ -0,0 +1,135 @@
+// 打印类属性、方法定义
+/* eslint-disable */
+const Print = function (dom, options) {
+  if (!(this instanceof Print)) return new Print(dom, options);
+
+  this.options = this.extend({
+    'noPrint': '.no-print'
+  }, options);
+
+  if ((typeof dom) === "string") {
+    this.dom = document.querySelector(dom);
+  } else {
+    this.isDOM(dom)
+    this.dom = this.isDOM(dom) ? dom : dom.$el;
+  }
+
+  this.init();
+};
+Print.prototype = {
+  init: function () {
+    var content = this.getStyle() + this.getHtml();
+    this.writeIframe(content);
+  },
+  extend: function (obj, obj2) {
+    for (var k in obj2) {
+      obj[k] = obj2[k];
+    }
+    return obj;
+  },
+
+  getStyle: function () {
+    var str = "",
+      styles = document.querySelectorAll('style,link');
+    for (var i = 0; i < styles.length; i++) {
+      str += styles[i].outerHTML;
+    }
+    str += "<style>" + (this.options.noPrint ? this.options.noPrint : '.no-print') + "{display:none;}</style>";
+
+    return str;
+  },
+
+  getHtml: function () {
+    var inputs = document.querySelectorAll('input');
+    var textareas = document.querySelectorAll('textarea');
+    var selects = document.querySelectorAll('select');
+
+    for (var k = 0; k < inputs.length; k++) {
+      if (inputs[k].type == "checkbox" || inputs[k].type == "radio") {
+        if (inputs[k].checked == true) {
+          inputs[k].setAttribute('checked', "checked")
+        } else {
+          inputs[k].removeAttribute('checked')
+        }
+      } else if (inputs[k].type == "text") {
+        inputs[k].setAttribute('value', inputs[k].value)
+      } else {
+        inputs[k].setAttribute('value', inputs[k].value)
+      }
+    }
+
+    for (var k2 = 0; k2 < textareas.length; k2++) {
+      if (textareas[k2].type == 'textarea') {
+        textareas[k2].innerHTML = textareas[k2].value
+      }
+    }
+
+    for (var k3 = 0; k3 < selects.length; k3++) {
+      if (selects[k3].type == 'select-one') {
+        var child = selects[k3].children;
+        for (var i in child) {
+          if (child[i].tagName == 'OPTION') {
+            if (child[i].selected == true) {
+              child[i].setAttribute('selected', "selected")
+            } else {
+              child[i].removeAttribute('selected')
+            }
+          }
+        }
+      }
+    }
+
+    return this.dom.outerHTML;
+  },
+
+  writeIframe: function (content) {
+    var w, doc, iframe = document.createElement('iframe'),
+      f = document.body.appendChild(iframe);
+    iframe.id = "myIframe";
+    //iframe.style = "position:absolute;width:0;height:0;top:-10px;left:-10px;";
+    iframe.setAttribute('style', 'position:absolute;width:0;height:0;top:-10px;left:-10px;');
+    w = f.contentWindow || f.contentDocument;
+    doc = f.contentDocument || f.contentWindow.document;
+    doc.open();
+    doc.write(content);
+    doc.close();
+    var _this = this
+    iframe.onload = function(){
+      _this.toPrint(w);
+      setTimeout(function () {
+        document.body.removeChild(iframe)
+      }, 100)
+    }
+  },
+
+  toPrint: function (frameWindow) {
+    try {
+      setTimeout(function () {
+        frameWindow.focus();
+        try {
+          if (!frameWindow.document.execCommand('print', false, null)) {
+            frameWindow.print();
+          }
+        } catch (e) {
+          frameWindow.print();
+        }
+        frameWindow.close();
+      }, 10);
+    } catch (err) {
+      console.log('err', err);
+    }
+  },
+  isDOM: (typeof HTMLElement === 'object') ?
+    function (obj) {
+      return obj instanceof HTMLElement;
+    } :
+    function (obj) {
+      return obj && typeof obj === 'object' && obj.nodeType === 1 && typeof obj.nodeName === 'string';
+    }
+};
+const MyPlugin = {}
+MyPlugin.install = function (Vue, options) {
+  // 4. 添加实例方法
+  Vue.prototype.$print = Print
+}
+export default MyPlugin

src/views/classes/namCard.vue

@@ -0,0 +1,270 @@
+<template>
+  <div id="namCard">
+    <detail-frame :title="mainTitle" :returns="toreturn">
+      <el-col :span="24" class="printingBtn">
+        <el-button type="primary" size="mini" @click="toPrint()">打印名牌</el-button>
+      </el-col>
+      <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>
+    </detail-frame>
+  </div>
+</template>
+
+<script>
+import detailFrame from '@frame/layout/admin/detail-frame';
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions } = createNamespacedHelpers('student');
+export default {
+  metaInfo: { title: '学生名单' },
+  name: 'name-list',
+  props: {},
+  components: {
+    detailFrame,
+  },
+  data: function() {
+    return {
+      list: [
+        {
+          name: '顾红伟',
+        },
+        {
+          name: '顾红伟顾',
+        },
+        {
+          name: '顾红伟顾红',
+        },
+        {
+          name: '顾红伟顾红伟',
+        },
+        {
+          name: '顾红伟顾红伟顾',
+        },
+        {
+          name: '顾红伟顾红伟顾红',
+        },
+        {
+          name: '顾红伟顾红伟顾红伟',
+        },
+        {
+          name: '顾红伟顾红伟顾红伟顾',
+        },
+        {
+          name: '顾红伟',
+        },
+        {
+          name: '顾红伟',
+        },
+        {
+          name: '顾红伟',
+        },
+        {
+          name: '顾红伟',
+        },
+        {
+          name: '顾红伟',
+        },
+        {
+          name: '顾红伟',
+        },
+        {
+          name: '顾红伟',
+        },
+        {
+          name: '顾红伟',
+        },
+        {
+          name: '顾红伟',
+        },
+        {
+          name: '顾红伟',
+        },
+        {
+          name: '顾红伟',
+        },
+        {
+          name: '顾红伟',
+        },
+        {
+          name: '顾红伟',
+        },
+        {
+          name: '顾红伟',
+        },
+        {
+          name: '顾红伟',
+        },
+        {
+          name: '顾红伟',
+        },
+        {
+          name: '顾红伟',
+        },
+        {
+          name: '顾红伟',
+        },
+        {
+          name: '顾红伟',
+        },
+        {
+          name: '顾红伟',
+        },
+        {
+          name: '顾红伟',
+        },
+        {
+          name: '顾红伟',
+        },
+        {
+          name: '顾红伟',
+        },
+        {
+          name: '顾红伟',
+        },
+        {
+          name: '顾红伟',
+        },
+        {
+          name: '顾红伟',
+        },
+        {
+          name: '顾红伟',
+        },
+        {
+          name: '顾红伟',
+        },
+        {
+          name: '顾红伟',
+        },
+        {
+          name: '顾红伟',
+        },
+        {
+          name: '顾红伟',
+        },
+        {
+          name: '顾红伟',
+        },
+        {
+          name: '顾红伟',
+        },
+        {
+          name: '顾红伟',
+        },
+        {
+          name: '顾红伟',
+        },
+        {
+          name: '顾红伟',
+        },
+        {
+          name: '顾红伟',
+        },
+        {
+          name: '顾红伟',
+        },
+        {
+          name: '顾红伟',
+        },
+        {
+          name: '顾红伟',
+        },
+        {
+          name: '顾红伟',
+        },
+        {
+          name: '顾红伟',
+        },
+        {
+          name: '顾红伟',
+        },
+        {
+          name: '顾红伟',
+        },
+        {
+          name: '顾红伟',
+        },
+        {
+          name: '顾红伟',
+        },
+        {
+          name: '顾红伟',
+        },
+        {
+          name: '顾红伟',
+        },
+      ],
+    };
+  },
+  created() {},
+  methods: {
+    ...mapActions(['query']),
+    async search() {
+      const res = await this.query({ classid: this.id });
+      if (this.$checkRes(res)) {
+        this.$set(this, `list`, res.data);
+      }
+    },
+    toPrint() {
+      this.$print(this.$refs.print);
+    },
+    toreturn() {
+      window.history.go(-1);
+    },
+  },
+  computed: {
+    id() {
+      return this.$route.query.id;
+    },
+    mainTitle() {
+      let meta = this.$route.meta;
+      let main = meta.title || '';
+      let sub = meta.sub || '';
+      let title = main + sub;
+      return title;
+    },
+  },
+  watch: {
+    id: {
+      handler(val) {
+        if (val) this.search();
+      },
+      immediate: true,
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+// .info {
+//   width: 714px;
+// }
+.list {
+  width: 171px;
+  height: 140px;
+  border: 1px dashed #333;
+  margin: 0 8px 10px 0;
+  padding: 5px 5px;
+  p {
+    float: left;
+    width: 100%;
+    text-align: center;
+    font-size: 12px;
+    padding: 0 0 10px 0;
+  }
+  p:last-child {
+    font-size: 25px;
+    letter-spacing: 5px;
+    padding: 0;
+  }
+}
+.printingBtn {
+  text-align: center;
+  padding: 10px 0;
+}
+</style>

src/views/classes/name-list.vue

@@ -1,6 +1,9 @@
 <template>
   <div id="name-list">
     <list-frame :title="mainTitle" @query="search" :total="total" :needFilter="false" :returns="toreturn" :needAdd="false">
+      <el-col :span="24" class="printingBtn">
+        <el-button type="primary" size="mini" @click="toPrint()">打印名牌</el-button>
+      </el-col>
       <data-table :fields="fields" :data="list" :opera="opera" @edit="toEdit" @delete="toDelete" @post="toPost"></data-table>
     </list-frame>
     <el-drawer title="任职" :visible.sync="drawer" direction="rtl" @close="toClose">
@@ -137,6 +140,10 @@ export default {
     toreturn() {
       window.history.go(-1);
     },
+    // 打印名牌
+    toPrint() {
+      this.$router.push({ path: '/classes/namCard', query: { id: this.id } });
+    },
   },
   computed: {
     id() {
@@ -161,4 +168,9 @@ export default {
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.printingBtn {
+  text-align: right;
+  padding: 10px 0;
+}
+</style>