班级考勤部分代码

ruoyi-ui/src/views/benyi/checkinstatisticsclass/index.vue

@@ -16,18 +16,30 @@
       <el-form-item>
         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        <el-button type="primary" plain size="mini" icon="el-icon-printer" @click="prints">打印</el-button>
       </el-form-item>
     </el-form>
 
-    <el-table v-loading="loading" style="width: 100%" border :data="tableData">
-      <template v-for="(item,index) in tableHead">
-        <el-table-column
-          :prop=" item.column_name==''?'day'+(item.sort+1) : item.column_name"
-          :label=" item.column_name==''?(item.sort+1)+'' : item.sort"
-          :key="index"
-        ></el-table-column>
-      </template>
-    </el-table>
+    <div ref="printMe">
+      <h2 style="text-align:center;">儿童考勤表</h2>
+      <h4 style="text-align: left">
+        班级名称：{{ this.bjmc }}------
+        考勤月份：{{ this.month }}------
+        在册人数：{{ this.childcount }}人 ------ 
+        班长姓名：{{ this.jsmc }} ------
+        
+      </h4>
+      <el-table v-loading="loading" style="width: 100%" border :data="tableData">
+        <template v-for="(item,index) in tableHead">
+          <el-table-column
+            :prop=" item.column_name==''?'day'+(item.sort+1) : item.column_name"
+            :fixed="item.column_name!=''"
+            :label=" item.column_name==''?(item.sort+1)+'' : item.sort"
+            :key="index"
+          ></el-table-column>
+        </template>
+      </el-table>
+    </div>
 
     <pagination
       v-show="total>0"
@@ -48,6 +60,12 @@ export default {
   data() {
     return {
       month: "",
+      // 班级名称
+      bjmc: "",
+      // 在册人数:班级学生总数
+      childcount: "",
+      // 班主任名称
+      jsmc: "",
       // 遮罩层
       loading: true,
       // 总条数
@@ -88,8 +106,8 @@ export default {
       ],
       // 查询参数
       queryParams: {
-        month: "",
-      },
+        month: ""
+      }
     };
   },
   created() {
@@ -110,16 +128,17 @@ export default {
       if (this.queryParams.month == "") {
         this.queryParams.month = this.month;
       }
-      await listDatetime(this.queryParams).then((response) => {
+      await listDatetime(this.queryParams).then(response => {
         console.log(response.rows);
         this.tableHead.push({
+          
           column_name: "name",
-          sort: "姓名",
+          sort: "姓名"
         });
-        response.rows.forEach((res) => {
+        response.rows.forEach(res => {
           this.tableHead.push({
             column_name: "",
-            sort: res.sort,
+            sort: res.sort
           });
         });
       });
@@ -131,8 +150,11 @@ export default {
       if (this.queryParams.month == "") {
         this.queryParams.month = this.month;
       }
-      listChildCheck(this.queryParams).then((response) => {
+      listChildCheck(this.queryParams).then(response => {
         console.log(response.rows);
+        this.bjmc =response.rows[0].bjmc;
+        this.childcount = response.rows.length;
+        this.jsmc = response.rows[0].zbjsmc;
         this.tableData = response.rows;
         this.total = response.total;
         this.loading = false;
@@ -148,6 +170,11 @@ export default {
       this.resetForm("queryForm");
       this.handleQuery();
     },
-  },
+    //打印
+    prints() {
+      //console.log(this.$refs.printMe);
+      this.$print(this.$refs.printMe);
+    },
+  }
 };
 </script>