学生报到表打印

src/main.js

@@ -10,6 +10,8 @@ import '@/plugins/setting';
 import '@/plugins/other';
 import '@/plugins/moment';
 import '@/plugins/dateM';
+import Print from '@frame/utils/print';
+Vue.use(Print); //注册
 import InitStomp from '@/plugins/stomp';
 
 Vue.config.productionTip = false;

src/router/index.js

@@ -271,7 +271,7 @@ const newPlan = [
 ];
 
 const train = [
-  //班级设置需要处理,课表管理(按魏老师给的图片做), 通知,学生管理(拿出来,加上searchBar)缺少考勤,学生成绩
+  //班级设置需要处理,通知
   {
     path: '/train/plan/classes',
     name: 'train_plan_classes',
@@ -451,6 +451,12 @@ const routes = [
     meta: { title: '全年计划', sub: '管理' },
     component: () => import('@/views/yearPlan/index.vue'),
   },
+  {
+    path: '/student/name/card',
+    name: 'student_name_card',
+    meta: { title: '学生名签' },
+    component: () => import('@/views/student/namCard.vue'),
+  },
   // 教师甄选注册账号
   {
     path: '/teaRegister',

src/utils/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/student/namCard.vue

@@ -0,0 +1,115 @@
+<template>
+  <div id="namCard">
+    <el-row type="flex" align="middle" justify="center" 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>
+
+    <!-- <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>
+          <span>吉林省高校学生就业能力扩展训练</span><span>第{{ item.termname }}期</span><span>{{ item.classname }}</span>
+        </p>
+        <p>{{ 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',
+  props: { list: { type: Array, default: () => [] } },
+  components: {},
+  data: function() {
+    return {
+      csList: [],
+      now: 0,
+      nowList: [],
+    };
+  },
+  created() {},
+  methods: {
+    ...mapActions(['query']),
+    groupByClass() {
+      let duplicate = _.cloneDeep(this.list);
+      let group = _.flatten(_.toPairs(_.groupBy(duplicate, 'classid'))).filter(f => _.isArray(f));
+      this.$set(this, `csList`, group);
+    },
+    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: {
+    list: {
+      handler(val) {
+        if (val) this.groupByClass();
+      },
+      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/train-plan/parts/print-sign.vue

@@ -0,0 +1,53 @@
+<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">
+      <el-col :span="24" style="width:1060px;border: solid #cecece;">
+        <el-table border stripe :data="list" ref="print" size="small" style="border: solid #cecece;">
+          <el-table-column align="center" label="姓名" prop="name" width="170"></el-table-column>
+          <el-table-column align="center" label="学校" prop="school_name" width="150" ></el-table-column>
+          <el-table-column align="center" label="性别" prop="gender" width="80"></el-table-column>
+          <el-table-column align="center" label="民族" prop="nation" width="150"></el-table-column>
+          <el-table-column align="center" label="班级" prop="classname" width="80"></el-table-column>
+          <el-table-column align="center" label="手机号" prop="phone" width="150"></el-table-column>
+          <el-table-column align="center" label="签名"></el-table-column>
+        </el-table>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'print-sign',
+  props: {
+    list: { type: Array, default: () => [] },
+  },
+  components: {},
+  data: function() {
+    return {};
+  },
+  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></style>

src/views/train-plan/print.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="print">
-    <list-frame title="打印管理" @query="search" :total="total" :needFilter="false" :needAdd="false">
+    <list-frame title="打印管理" @query="search" :total="total" :needFilter="false" :needAdd="false" v-if="view == 'list'">
       <el-form :inline="true" size="mini">
         <el-form-item label="期">
           <el-select v-model="form.termid" placeholder="请选择期数" @change="getBatch">
@@ -8,52 +8,89 @@
           </el-select>
         </el-form-item>
         <el-form-item label="批次">
-          <el-select v-model="form.batchid" placeholder="请先选择期数">
+          <el-select v-model="form.batchid" placeholder="请先选择期数" clearable @clear="form.batchid = undefined">
             <el-option v-for="(i, index) in batchList" :key="index" :label="i.name" :value="i._id"></el-option>
           </el-select>
         </el-form-item>
         <el-form-item>
           <el-button type="primary" @click="search">查询</el-button>
-          <el-button @click="nameList()">打印学生名签</el-button>
-          <el-button @click="signList()">打印学生签到表</el-button>
-          <el-button @click="certList()">打印学生证书</el-button>
-          <el-button @click="classLesson()">打印班级课表</el-button>
+          <!-- <el-button @click="nameList()" :disabled="classList.length <= 0">打印学生名签</el-button>
+          <el-button @click="signList()" :disabled="classList.length <= 0">打印学生签到表</el-button>
+          <el-button @click="certList()" :disabled="classList.length <= 0">打印学生证书</el-button>
+          <el-button @click="classLesson()" :disabled="classList.length <= 0">打印班级课表</el-button> -->
         </el-form-item>
       </el-form>
       <template>
-        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
-          <el-table-column type="selection" width="55"> </el-table-column>
-          <el-table-column prop="batch" label="批次"> </el-table-column>
-          <el-table-column prop="name" label="班级名称" show-overflow-tooltip> </el-table-column>
-        </el-table>
-        <!-- <div style="margin-top: 20px">
-          <el-button @click="nameList()">打印学生名签</el-button>
-          <el-button @click="signList()">打印学生签到表</el-button>
-          <el-button @click="certList()">打印学生证书</el-button>
-          <el-button @click="classLesson()">打印班级课表</el-button>
-        </div> -->
+        <data-table
+          :fields="fields"
+          :data="tableData"
+          :opera="opera"
+          @name="nameList"
+          @cert="certList"
+          @sign="signList"
+          @lesson="classLesson"
+          :usePage="false"
+        ></data-table>
       </template>
     </list-frame>
+    <detail-frame title="学生名签" v-if="view == 'nameList'" :returns="toReturns">
+      <name-card :list="studList"></name-card>
+    </detail-frame>
+    <detail-frame title="学生报道表" v-if="view == 'signList'" :returns="toReturns">
+      <sign-list :list="studList"></sign-list>
+    </detail-frame>
   </div>
 </template>
 
 <script>
+import _ from 'lodash';
+import signList from './parts/print-sign';
+import dataTable from '@frame/components/filter-page-table';
+import nameCard from '@/views/student/namCard.vue';
 import listFrame from '@frame/layout/admin/list-frame';
+import detailFrame from '@frame/layout/admin/detail-frame';
 import { mapState, createNamespacedHelpers } from 'vuex';
 const { mapActions: classes } = createNamespacedHelpers('classes');
 const { mapActions: trainplan } = createNamespacedHelpers('trainplan');
+const { mapActions: student } = createNamespacedHelpers('student');
 export default {
   name: 'print',
   props: {},
-  components: { listFrame },
+  components: { listFrame, nameCard, detailFrame, dataTable, signList },
   data: function() {
     return {
+      view: 'list',
       form: {},
       termList: [],
       batchList: [],
       tableData: [],
+      opera: [
+        {
+          label: '打印名签',
+          method: 'name',
+        },
+        {
+          label: '打印证书',
+          method: 'cert',
+        },
+        {
+          label: '打印报到表',
+          method: 'sign',
+        },
+        {
+          label: '打印班级课表',
+          method: 'lesson',
+        },
+      ],
+      fields: [
+        { label: '批次', prop: 'batch' },
+        { label: '班级名称', prop: 'name' },
+      ],
       total: 0,
       classList: [],
+
+      //打印数据
+      studList: [],
     };
   },
   created() {
@@ -62,6 +99,7 @@ export default {
   methods: {
     ...trainplan({ planfetch: 'fetch' }),
     ...classes({ classesquery: 'query' }),
+    ...student({ getStudentList: 'query' }),
     async searchinfo() {
       const res = await this.planfetch(this.defaultOption.planid);
       let terms = res.data.termnum;
@@ -86,18 +124,27 @@ export default {
     handleSelectionChange(val) {
       this.classList = val;
     },
-    nameList() {
-      console.log(this.classList);
+    async nameList({ data }) {
+      let { _id: classid } = data;
+      let res = await this.getStudentList({ classid });
+      if (this.$checkRes(res)) this.$set(this, `studList`, res.data);
+      this.view = 'nameList';
     },
-    signList() {
-      console.log(this.classList);
+    async signList({ data }) {
+      let { _id: classid } = data;
+      let res = await this.getStudentList({ classid });
+      if (this.$checkRes(res)) this.$set(this, `studList`, res.data);
+      this.view = 'signList';
     },
-    certList() {
+    certList({ data }) {
       console.log(this.classList);
     },
-    classLesson() {
+    classLesson({ data }) {
       console.log(this.classList);
     },
+    toReturns() {
+      this.view = 'list';
+    },
   },
   computed: {
     ...mapState(['user', 'defaultOption']),