增加在线打印。

package.json

@@ -16,6 +16,7 @@
     "hls.js": "^1.0.2",
     "js-cookie": "^2.2.1",
     "nprogress": "0.2.0",
+    "print-js": "^1.6.0",
     "qrcodejs2": "^0.0.2",
     "vue": "^2.6.10",
     "vue-amap": "^0.5.10",

src/main.js

@@ -11,7 +11,6 @@ import PermissionDetect from "@/components/PermissionDetect";
 import AMap from "vue-amap"
 
 Vue.component('permission-detect', PermissionDetect);
-
 Vue.config.productionTip = false
 Vue.use(AxiosPlugin);
 //Vue.use(ConfirmPlugin);

src/utils/page.js

@@ -1,3 +1,5 @@
+import printJS from 'print-js';
+
 function autoAdjustHeight(el) {
     var header = document.querySelector(".el-header");
     var headerHeight = 0;
@@ -11,6 +13,19 @@ function autoAdjustHeight(el) {
     return window.innerHeight - el.offsetTop - headerHeight - 40;
 }
 
+function printTable(tableData, properties, title){
+    printJS({
+        printable: tableData,
+        properties: properties,
+        type: 'json',
+        // style: 'table { border-collapse: collapse }',
+        header: title,
+        headerStyle: 'text-align:center;color:black;width:100%;',
+        scanStyles: false,
+        style: 'table tr td,th { border-collapse: collapse;padding: 15px;border:1px #000 solid; }' // 表格样式
+    })
+}
+
 export default{
-    autoAdjustHeight
+    autoAdjustHeight,printTable
 }

src/views/business/workScheduleAttendance-day-list.vue

@@ -47,103 +47,112 @@
           @click="handleReset('queryForm')"
           >重置</el-button
         >&nbsp;
+        <el-button
+        type="primary"
+        size="mini"
+        plain
+        icon="el-icon-printer"
+        @click="printReport"
+        >打印报表</el-button>
       </el-form-item>
     </el-form>
     <el-divider></el-divider>
     <el-row class="button-group">
       <div v-html="showMessage"></div>
     </el-row>
-    <el-table
-      ref="formTable"
-      stripe
-      :data="tableData"
-      :height="tableHeight"
-      style="min-height: 400px"
-      v-loading="loading"
-      @sort-change="sortChange"
-      @selection-change="handleSelectionChange"
-    >
-      <el-table-column
-        prop="attendanceDate"
-        label="日期"
-        width="180"
-      ></el-table-column>
-      <el-table-column prop="shiftNumbers" label="班次" width="180">
-        <template slot-scope="{ row }">
-          <span
-            v-if="
-              row.onWorkStatus != 1 &&
-              row.onWorkStatus != 1 &&
-              row.onWorkStatus != null
-            "
-          >
-            {{ row.onWorkStatusN }}
-          </span>
-          <span v-else>
-            {{ row.shiftNumbers }}
-          </span>
-        </template>
-      </el-table-column>
-      <el-table-column prop="onWorkRecordTime" label="上班打卡时间" width="180"
-        ><template slot-scope="{ row }">
-          <span v-if="row.onWorkStatus == 1 && row.onWorkResult != 0">
-            {{ row.onWorkRecordTime }}
-          </span>
-          <span v-else></span>
-        </template>
-      </el-table-column>
-      <el-table-column prop="onWorkResult" label="上班打卡状态" width="180">
-        <template slot-scope="{ row }">
-          <span v-if="row.onWorkStatus == 1 && row.onWorkResult == 0">
-            {{ row.onWorkResultN }}
-          </span>
-          <span
-            v-else-if="
-              row.onWorkStatus == 1 &&
-              row.onWorkResult != 1 &&
-              row.onWorkResult != 0
-            "
-          >
-            {{ row.onWorkResultN }} {{ row.onLateLeaveMinuteN }}
-          </span>
-          <span v-else></span>
-        </template>
-      </el-table-column>
-      <el-table-column prop="offWorkRecordTime" label="下班打卡时间" width="180"
-        ><template slot-scope="{ row }">
-          <span v-if="row.offWorkStatus == 1 && row.offWorkResult != 0">
-            {{ row.offWorkRecordTime }}</span
-          >
-          <span v-else> </span> </template
-      ></el-table-column>
-      <el-table-column prop="offWorkResult" label="下班" width="180">
-        <template slot-scope="{ row }">
-          <span v-if="row.offWorkStatus == 1 && row.offWorkResult == 0">
-            {{ row.offWorkResultN }}
-          </span>
-          <span
-            v-if="
-              row.offWorkStatus == 1 &&
-              row.offWorkResult != 1 &&
-              row.offWorkResult != 0
-            "
-          >
-            {{ row.offWorkResultN }} {{ row.OffLateLeaveMinuteN }}
-          </span>
-          <span v-else></span>
-        </template>
-      </el-table-column>
-      <el-table-column
-        prop="absenteeismDays"
-        label="旷工天数"
-        width="180"
-      ></el-table-column>
-      <el-table-column
-        prop="notSwipingNum"
-        label="未打卡次数"
-        width="180"
-      ></el-table-column>
-    </el-table>
+    <section id="printContent">
+      <el-table
+        ref="formTable"
+        stripe
+        :data="tableData"
+        :height="tableHeight"
+        style="min-height: 400px"
+        v-loading="loading"
+        @sort-change="sortChange"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column
+          prop="attendanceDate"
+          label="日期"
+          width="180"
+        ></el-table-column>
+        <el-table-column prop="shiftNumbers" label="班次" width="180">
+          <template slot-scope="{ row }">
+            <span
+              v-if="
+                row.onWorkStatus != 1 &&
+                row.onWorkStatus != 1 &&
+                row.onWorkStatus != null
+              "
+            >
+              {{ row.onWorkStatusN }}
+            </span>
+            <span v-else>
+              {{ row.shiftNumbers }}
+            </span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="onWorkRecordTime" label="上班打卡时间" width="180"
+          ><template slot-scope="{ row }">
+            <span v-if="row.onWorkStatus == 1 && row.onWorkResult != 0">
+              {{ row.onWorkRecordTime }}
+            </span>
+            <span v-else></span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="onWorkResult" label="上班打卡状态" width="180">
+          <template slot-scope="{ row }">
+            <span v-if="row.onWorkStatus == 1 && row.onWorkResult == 0">
+              {{ row.onWorkResultN }}
+            </span>
+            <span
+              v-else-if="
+                row.onWorkStatus == 1 &&
+                row.onWorkResult != 1 &&
+                row.onWorkResult != 0
+              "
+            >
+              {{ row.onWorkResultN }} {{ row.onLateLeaveMinuteN }}
+            </span>
+            <span v-else></span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="offWorkRecordTime" label="下班打卡时间" width="180"
+          ><template slot-scope="{ row }">
+            <span v-if="row.offWorkStatus == 1 && row.offWorkResult != 0">
+              {{ row.offWorkRecordTime }}</span
+            >
+            <span v-else> </span> </template
+        ></el-table-column>
+        <el-table-column prop="offWorkResult" label="下班" width="180">
+          <template slot-scope="{ row }">
+            <span v-if="row.offWorkStatus == 1 && row.offWorkResult == 0">
+              {{ row.offWorkResultN }}
+            </span>
+            <span
+              v-if="
+                row.offWorkStatus == 1 &&
+                row.offWorkResult != 1 &&
+                row.offWorkResult != 0
+              "
+            >
+              {{ row.offWorkResultN }} {{ row.OffLateLeaveMinuteN }}
+            </span>
+            <span v-else></span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="absenteeismDays"
+          label="旷工天数"
+          width="180"
+        ></el-table-column>
+        <el-table-column
+          prop="notSwipingNum"
+          label="未打卡次数"
+          width="180"
+        ></el-table-column>
+      </el-table>
+    </section>
   </div>
 </template>
 <script>
@@ -151,6 +160,7 @@ import Constant from "@/constant";
 import workScheduleAttendanceApi from "@/api/business/workScheduleAttendance";
 import NProgress from "nprogress"; // progress bar
 import "nprogress/nprogress.css"; // progress bar style
+import pageUtil from "@/utils/page";
 
 export default {
   name: "BusinessWorkScheduleAttendanceDayList",
@@ -182,6 +192,64 @@ export default {
     };
   },
   methods: {
+    printReport() {
+      var title = this.personInfo.name + "考勤统计明细";
+
+      var rows = JSON.parse(JSON.stringify(this.tableData));
+
+      rows.forEach(row=>{
+        if(row.onWorkStatus != "1" &&
+           row.onWorkResult != "1" &&
+           row.onWorkStatus != null){
+           rows.shiftNumbers = row.onWorkStatusN;
+        }
+        
+        if(row.onWorkStatus != "1" || row.onWorkResult == "0"){
+          row.onWorkRecordTime = "";
+        }
+
+        if(row.onWorkStatus == "1" && row.onWorkResult == "0"){
+          row.onWorkResult = row.onWorkResultN;
+        }
+        else if(row.onWorkStatus == "1" &&
+                row.onWorkResult != "1" &&
+                row.onWorkResult != "0"){
+          row.onWorkResult = row.onWorkResultN + ' ' + row.onLateLeaveMinuteN;
+        }
+        else{
+          row.onWorkStatus = "";
+        }
+
+        if(row.offWorkStatus=="0"){
+          row.offWorkRecordTime = "";
+        }
+
+        if(row.offWorkStatus == 1 && row.offWorkResult == 0){
+          row.offWorkResult = row.offWorkResultN;
+        }
+        else if(row.offWorkStatus == 1 &&
+                row.offWorkResult != 1 &&
+                row.offWorkResult != 0){
+          row.offWorkResult = row.offWorkResultN + ' ' + row.offLateLeaveMinuteN;
+        }
+      });
+
+      pageUtil.printTable(rows,
+      [
+        { field: 'attendanceDate', displayName: '日期'},
+        { field: 'shiftNumbers', displayName: '班次'},
+        { field: 'onWorkRecordTime', displayName: '上班打卡时间'},
+        { field: 'onWorkResult', displayName: '上班打卡状态'},
+        { field: 'offWorkRecordTime', displayName: '下班打卡时间'},
+        { field: 'lateMinutes', displayName: '下班打卡状态'},
+        { field: 'absenteeismDays', displayName: '迟到次数'},
+        { field: 'leaveEarlyMinutes', displayName: '早退分钟'},
+        { field: 'leaveEarlyNum', displayName: '早退次数'},
+        { field: 'overtime', displayName: '加班小时'},
+        { field: 'absenteeismDays', displayName: '旷工天数'},
+        { field: 'notSwipingNum', displayName: '未打卡次数'}
+      ],title);
+    },
     changePage(pageIndex) {
       var self = this;
 

src/views/business/workScheduleAttendance-list.vue

@@ -83,9 +83,16 @@
         :loading="xlsLoading"
         @click="downloadAll"
         >导出数据</el-button
-      >
+      ><el-button
+        type="primary"
+        size="small"
+        plain
+        icon="el-icon-printer"
+        @click="printReport"
+        >打印报表</el-button>
     </el-row>
     <el-table
+      id="printAttendanceListContent"
       ref="formTable"
       stripe
       :data="tableData"
@@ -104,13 +111,13 @@
       <el-table-column
         prop="personInfo.id"
         label="编号"
-        width="100"
+        width="60"
         fixed="left"
       ></el-table-column>
       <el-table-column
         prop="personInfo.jobNumber"
         label="工号"
-        width="120"
+        width="60"
         fixed="left"
       ></el-table-column>
       <el-table-column
@@ -122,68 +129,67 @@
       <el-table-column
         prop="attendanceDays"
         label="应出勤天数"
-        width="120"
+        width="90"
       ></el-table-column>
       <el-table-column
         prop="totalAttendanceDays"
         label="全勤天数"
-        width="120"
+        width="80"
       ></el-table-column>
       <el-table-column
         prop="lateMinutes"
         label="迟到分钟"
-        width="120"
+        width="80"
       ></el-table-column>
       <el-table-column
         prop="lateNum"
         label="迟到次数"
-        width="120"
+        width="80"
       ></el-table-column>
       <el-table-column
         prop="leaveEarlyMinutes"
         label="早退分钟"
-        width="120"
+        width="80"
       ></el-table-column>
       <el-table-column
         prop="leaveEarlyNum"
         label="早退次数"
-        width="120"
+        width="80"
       ></el-table-column>
       <el-table-column
         prop="overtime"
         label="加班小时"
-        width="120"
+        width="80"
       ></el-table-column>
       <el-table-column
         prop="absenteeismDays"
         label="旷工天数"
-        width="120"
+        width="80"
       ></el-table-column>
       <el-table-column
         prop="notSwipingNum"
         label="未打卡次数"
-        width="120"
+        width="80"
       ></el-table-column>
       <el-table-column
         prop="signNum"
         label="签到次数"
-        width="120"
+        width="80"
       ></el-table-column>
       <el-table-column
         prop="businessTripNum"
         label="出差天数"
-        width="120"
+        width="80"
       ></el-table-column>
       <el-table-column
         prop="leaveNum"
         label="请假天数"
-        width="120"
+        width="80"
       ></el-table-column>
-      <el-table-column label="操作">
+      <el-table-column label="操作" fixed="right">
         <template slot-scope="{ row }">
           <el-link type="primary" :underline="false" @click="handleOpen(row)"
-            >查看明细</el-link
-          >
+            >查看明细</el-link>
         </template>
       </el-table-column>
     </el-table>
@@ -210,6 +216,7 @@ import companyInfoApi from "@/api/base/companyInfo";
 import SelectTree from "@/components/SelectTree";
 import NProgress from "nprogress"; // progress bar
 import "nprogress/nprogress.css"; // progress bar style
+import pageUtil from "@/utils/page";
 
 export default {
   name: "BusinessWorkScheduleAttendanceList",
@@ -488,6 +495,27 @@ export default {
           });
         });
     },
+    printReport() {
+      var title = "考勤统计表";
+      pageUtil.printTable(this.tableData,
+      [
+        { field: 'personInfo.id', displayName: '编号'},
+        { field: 'personInfo.jobNumber', displayName: '工号'},
+        { field: 'personInfo.name', displayName: '姓名'},
+        { field: 'attendanceDays', displayName: '应出勤天数'},
+        { field: 'totalAttendanceDays', displayName: '全勤天数'},
+        { field: 'lateMinutes', displayName: '迟到分钟'},
+        { field: 'lateNum', displayName: '迟到次数'},
+        { field: 'leaveEarlyMinutes', displayName: '早退分钟'},
+        { field: 'leaveEarlyNum', displayName: '早退次数'},
+        { field: 'overtime', displayName: '加班小时'},
+        { field: 'absenteeismDays', displayName: '旷工天数'},
+        { field: 'notSwipingNum', displayName: '未打卡次数'},
+        { field: 'signNum', displayName: '签到次数'},
+        { field: 'businessTripNum', displayName: '出差天数'},
+        { field: 'leaveNum', displayName: '请假天数'}
+      ],title);
+    }
   },
   mounted: function () {
     //this.changePage(1);