feature(打卡统计): 打卡记录数据统计

src/api/report/index.js

@@ -6,4 +6,8 @@ export default {
   getSalesEngineerFollowUpNum(query) {
     return micro_request.postRequest(basePath, 'Home', 'GetSalesEngineerFollowUpNum', query)
   },
+  // 打卡记录数据统计
+  getPunchRecordsNum(query) {
+    return micro_request.postRequest(basePath, 'Home', 'GetPunchRecordsNum', query)
+  },
 }

src/views/report/punch/index.vue

@@ -0,0 +1,92 @@
+<!--
+ * @Author: niezch@dashoo.cn
+ * @Date: 2023-04-03 09:32:08
+ * @LastEditors: niezch@dashoo.cn
+ * @LastEditTime: 2023-04-06 18:07:13
+ * @Description: file content
+ * @FilePath: \opms_frontend\src\views\report\followup\index.vue
+-->
+<template>
+  <div class="detail">
+    <h2 style="text-align: center">打卡记录统计报表</h2>
+    <div style="float: right; margin-bottom: 10px">
+      <p>
+        月份：
+        <el-date-picker v-model="month" type="month" value-format="yyyy-MM-dd" @change="fetchData" />
+      </p>
+    </div>
+
+    <el-table
+      ref="businessTable"
+      v-loading="loading"
+      border
+      :data="tableData"
+      :height="$baseTableHeight(1)"
+      :span-method="objectSpanMethod">
+      <el-table-column
+        v-for="(item, key) in header"
+        :key="key"
+        align="center"
+        :label="item.label"
+        :prop="item.prop"
+        show-overflow-tooltip>
+        <template #default="{ row }">
+          <span>{{ row[item.prop] }}</span>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+  import reportApi from '@/api/report/index'
+  import { parseTime } from '@/utils'
+
+  export default {
+    name: 'FollowUpReport',
+    components: {},
+    data() {
+      return {
+        month: parseTime(new Date()),
+        loading: false,
+        header: undefined,
+        tableData: undefined,
+      }
+    },
+    mounted() {
+      this.fetchData()
+    },
+    methods: {
+      objectSpanMethod({ rowIndex, columnIndex }) {
+        if (columnIndex === 0) {
+          if (rowIndex % 4 === 0) {
+            return {
+              rowspan: 4,
+              colspan: 1,
+            }
+          } else {
+            return {
+              rowspan: 0,
+              colspan: 0,
+            }
+          }
+        }
+      },
+      async fetchData() {
+        this.loading = true
+        const {
+          data: { header, data },
+        } = await reportApi.getPunchRecordsNum({ month: this.month })
+        this.header = header
+        this.tableData = data
+        this.loading = false
+      },
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  .detail {
+    padding: 30px;
+  }
+</style>