From c0ddafe4d7c83032bcf5f211aa64ef4ddd9c56ec Mon Sep 17 00:00:00 2001
From: lSun <15893999301@qq.com>
Date: Wed, 19 Feb 2025 13:29:41 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9C=88=E6=8A=A5=E8=A1=A8=E3=80=81=E6=9C=88?=
 =?UTF-8?q?=E5=BC=82=E5=B8=B8=E6=8A=A5=E8=A1=A8-=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E6=89=93=E5=8D=A1=E8=AE=B0=E5=BD=95=E5=B1=95=E7=A4=BA=EF=BC=8C?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=A4=87=E6=B3=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/report/monthReport.js           |  10 +
 src/api/report/monthlyError.js          |   9 +
 src/views/report/monthReport/index.vue  |  79 ++-
 src/views/report/monthlyError/index.vue | 882 +++++++++++++-----------
 4 files changed, 582 insertions(+), 398 deletions(-)

diff --git a/src/api/report/monthReport.js b/src/api/report/monthReport.js
index 3d06086..fac4a03 100644
--- a/src/api/report/monthReport.js
+++ b/src/api/report/monthReport.js
@@ -19,3 +19,13 @@ export function exportMonthReport(query) {
     params: query
   })
 }
+
+
+// 查询外出次数查询列表
+export function getClockingRecordListByUserId(query) {
+  return request({
+    url: '/system/attDetails/getClockingRecordListByUserId',
+    method: 'get',
+    params: query
+  })
+}
diff --git a/src/api/report/monthlyError.js b/src/api/report/monthlyError.js
index 9fce7dd..97e1b59 100644
--- a/src/api/report/monthlyError.js
+++ b/src/api/report/monthlyError.js
@@ -30,3 +30,12 @@ export function exportMonthlyError(query) {
     })
 }
 
+// 查询外出次数查询列表
+export function getClockingRecordListByUserId(query) {
+  return request({
+    url: '/system/attDetails/getClockingRecordListByUserId',
+    method: 'get',
+    params: query
+  })
+}
+
diff --git a/src/views/report/monthReport/index.vue b/src/views/report/monthReport/index.vue
index b6092a1..3af13c4 100644
--- a/src/views/report/monthReport/index.vue
+++ b/src/views/report/monthReport/index.vue
@@ -124,6 +124,14 @@
         </template>
       </el-table-column>
 
+      <el-table-column label="打卡记录" align="center" prop="clockingRecordNum">
+        <template slot-scope="scope">
+          <div @click="openAttCountList(scope.row)" style="color: #02a7f0; cursor: pointer">
+            {{ scope.row.clockingRecordNum }}
+          </div>
+        </template>
+      </el-table-column>
+
     </el-table>
 
     <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
@@ -208,16 +216,46 @@
       <pagination v-show="totalTwoOutCount > 0" :total="totalTwoOutCount" :page.sync="queryRecord.pageNum"
         :limit.sync="queryRecord.pageSize" @pagination="getOutCountList" />
     </el-dialog>
+
+
+    <!-- 打卡次数记录 -->
+    <el-dialog :title="title" :visible.sync="showAttCount" width="1200px" height="1000px" append-to-body>
+      <el-form :model="queryAttCount" ref="queryFormRecordAtt" size="small" :inline="true" v-show="showSearch"
+               label-width="110px">
+        <el-form-item>
+        </el-form-item>
+      </el-form>
+
+      <el-table v-loading="loadingAttCount" :data="tableDataAttCount" width="900px" height="600px" row-key="id">
+        <el-table-column label="序号" align="center" width="80" type="index">
+          <template slot-scope="scope">
+            <span>{{ (queryAttCount.pageNum - 1) * queryAttCount.pageSize + scope.$index + 1 }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="考勤日期" align="center" prop="attCurrentDay" :show-overflow-tooltip="true">
+          <template slot-scope="scope">
+            <span>{{ formatDate(scope.row.attCurrentDay) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="考勤时间" align="center" prop="attCurrentTime" sortable :show-overflow-tooltip="true" />
+        <el-table-column label="打卡地址" align="center" prop="attAddress" sortable :show-overflow-tooltip="true" />
+        <el-table-column label="备注" align="center" prop="remark" sortable :show-overflow-tooltip="true" />
+      </el-table>
+
+      <pagination v-show="totalAttCount > 0" :total="totalAttCount" :page.sync="queryAttCount.pageNum"
+                  :limit.sync="queryAttCount.pageSize" @pagination="getClockingRecordListByUserId" />
+    </el-dialog>
+
   </div>
 </template>
 
 <script>
 import { getDetail } from "@/api/report/monthlyError";
-import { getMonthAttReport, exportMonthReport } from "@/api/report/monthReport";
+import { getMonthAttReport, exportMonthReport , getClockingRecordListByUserId} from "@/api/report/monthReport";
 import { listDeptTree } from "@/api/system/userInfo";
 import Treeselect from "@riophae/vue-treeselect";
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
-import { getOutCountList, exportOutCountList } from "@/api/report/attReport";
+import { getOutCountList, exportOutCountList } from '@/api/report/attReport'
 
 var monstr = "";
 export default {
@@ -242,7 +280,7 @@ export default {
       typeList: [],
       // 弹出层标题
       title: "",
-      title1: "打卡记录",
+      title1: "正常打卡天数",
       title2: "迟到记录",
       title3: "早退记录",
       title4: "旷工记录",
@@ -252,6 +290,7 @@ export default {
       title8: "轮休记录",
       title9: "临时外出记录",
       title10: "出差天数",
+      title11: "打卡记录",
       // 是否显示弹出层
       open: false,
       showRecord: false,
@@ -299,6 +338,19 @@ export default {
       // 遮罩层
       loadingTwo: false,
       tableDataOutCount: [],
+
+
+      queryAttCount: {
+        pageNum: 1,
+        pageSize: 10,
+        month: undefined,
+        userName: undefined,
+      },
+      showAttCount: false,
+      totalAttCount: 0,
+      // 遮罩层
+      loadingAttCount: false,
+      tableDataAttCount: [],
     };
   },
   created() {
@@ -384,7 +436,7 @@ export default {
       this.queryRecord.userId = row.userId;
       this.queryRecord.attCurrentMonth = row.attCurrentMonth;
       this.attCurrentMonth = row.attCurrentMonth;
-      if (titleBoss == '打卡记录') {
+      if (titleBoss == '正常打卡天数') {
         this.queryRecord.attStatis = 1;
       } else if (titleBoss == '迟到记录') {
         this.queryRecord.attStatis = 2;
@@ -489,6 +541,25 @@ export default {
       })
     },
 
+    //打开打卡次数记录
+    openAttCountList(row) {
+      this.title = "打卡记录";
+      this.queryAttCount.month = row.attCurrentMonth;
+      this.queryAttCount.userName = row.userName;
+      this.showAttCount = true;
+      this.getClockingRecordListByUserId();
+    },
+
+    /** 查询打卡次数记录列表 */
+    getClockingRecordListByUserId() {
+      this.loadingAttCount = true;
+      getClockingRecordListByUserId(this.queryAttCount).then(response => {
+        this.tableDataAttCount = response.rows;
+        this.totalAttCount = response.total;
+        this.loadingAttCount = false;
+      });
+    },
+
   }
 };
 </script>
diff --git a/src/views/report/monthlyError/index.vue b/src/views/report/monthlyError/index.vue
index 5ef24b9..32c7bad 100644
--- a/src/views/report/monthlyError/index.vue
+++ b/src/views/report/monthlyError/index.vue
@@ -1,150 +1,174 @@
 <template>
-    <div class="app-container" id="monthlyError">
-      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="80px">
-        <el-form-item label="选择月份" prop="attCurrentMonth">
-          <!-- <el-date-picker
-            v-model="queryParams.attCurrentMonth"
-            style="width: 240px"
-            placeholder="请选择月份"
-            type="month"
-            value-format="yyyy-MM"
-          ></el-date-picker> -->
-          <el-date-picker v-model="queryParams.attCurrentMonth" type="monthrange" range-separator="至" start-placeholder="开始月份"
-          end-placeholder="结束月份" value-format="yyyy-MM" :clearable="false" :editable="false">
+  <div class="app-container" id="monthlyError">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="80px">
+      <el-form-item label="选择月份" prop="attCurrentMonth">
+        <!-- <el-date-picker
+          v-model="queryParams.attCurrentMonth"
+          style="width: 240px"
+          placeholder="请选择月份"
+          type="month"
+          value-format="yyyy-MM"
+        ></el-date-picker> -->
+        <el-date-picker v-model="queryParams.attCurrentMonth" type="monthrange" range-separator="至"
+                        start-placeholder="开始月份"
+                        end-placeholder="结束月份" value-format="yyyy-MM" :clearable="false" :editable="false"
+        >
         </el-date-picker>
-        </el-form-item>
-        <el-form-item label="部门" prop="orgId">
-            <treeselect v-model="queryParams.orgId" :options="deptOptions" :normalizer="normalizer" @select="handleSelect" placeholder="选择部门" style="width: 240px"/>
-        </el-form-item>
-        <el-form-item label="姓名:"  prop="name">
-          <el-input
-            v-model="queryParams.name"
-            placeholder="请输入姓名"
-            clearable
-            @keyup.enter.native="handleQuery"
-            maxlength="20"
-          />
-        </el-form-item>
-        <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="reset">重置</el-button>
-          <el-button
-            type="warning"
-            plain
-            icon="el-icon-download"
-            size="mini"
-            @click="handleExport"
-            v-hasPermi="['att:detail:export']"
-          >导出数据</el-button>
-        </el-form-item>
-      </el-form>
+      </el-form-item>
+      <el-form-item label="部门" prop="orgId">
+        <treeselect v-model="queryParams.orgId" :options="deptOptions" :normalizer="normalizer" @select="handleSelect"
+                    placeholder="选择部门" style="width: 240px"
+        />
+      </el-form-item>
+      <el-form-item label="姓名:" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入姓名"
+          clearable
+          @keyup.enter.native="handleQuery"
+          maxlength="20"
+        />
+      </el-form-item>
+      <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="reset">重置</el-button>
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+          v-hasPermi="['att:detail:export']"
+        >导出数据
+        </el-button>
+      </el-form-item>
+    </el-form>
 
 
-      <el-table v-loading="loading" :data="tableData" ref="multipleTable" row-key="id" >
-        <el-table-column label="序号" align="center" width="80" type="index">
+    <el-table v-loading="loading" :data="tableData" ref="multipleTable" row-key="id">
+      <el-table-column label="序号" align="center" width="80" type="index">
         <template slot-scope="scope">
           <span>{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</span>
         </template>
       </el-table-column>
-        <el-table-column label="姓名" align="center" prop="name" sortable/>
-        <el-table-column label="所属部门" align="center" prop="orgName"  sortable/>
-        <el-table-column label="考勤月份" align="center" prop="attCurrentMonth"  sortable/>
-        <el-table-column label="应出勤天数" align="center" prop="requiredDays" sortable/>
-        <el-table-column label="正常打卡天数" align="center" prop="normalNum" sortable>
-          <template slot-scope="scope">
-            <div
-            @click="openRecord(scope.row,title1)" style="color: #02a7f0; cursor: pointer">
-                {{ scope.row.normalNum}}
-            </div>
+      <el-table-column label="姓名" align="center" prop="name" sortable/>
+      <el-table-column label="所属部门" align="center" prop="orgName" sortable/>
+      <el-table-column label="考勤月份" align="center" prop="attCurrentMonth" sortable/>
+      <el-table-column label="应出勤天数" align="center" prop="requiredDays" sortable/>
+      <el-table-column label="正常打卡天数" align="center" prop="normalNum" sortable>
+        <template slot-scope="scope">
+          <div
+            @click="openRecord(scope.row,title1)" style="color: #02a7f0; cursor: pointer"
+          >
+            {{ scope.row.normalNum }}
+          </div>
         </template>
-        </el-table-column>
-        <el-table-column label="迟到次数" align="center" prop="lateNum" sortable>
-          <template slot-scope="scope">
-            <div
-            @click="openRecord(scope.row,title2)" style="color: #02a7f0; cursor: pointer">
-                {{ scope.row.lateNum}}
-            </div>
+      </el-table-column>
+      <el-table-column label="迟到天数" align="center" prop="lateNum" sortable>
+        <template slot-scope="scope">
+          <div
+            @click="openRecord(scope.row,title2)" style="color: #02a7f0; cursor: pointer"
+          >
+            {{ scope.row.lateNum }}
+          </div>
         </template>
-        </el-table-column>
-        <el-table-column label="早退次数" align="center" prop="earlyNum" sortable>
-          <template slot-scope="scope">
-            <div
-            @click="openRecord(scope.row,title3)" style="color: #02a7f0; cursor: pointer">
-                {{ scope.row.earlyNum}}
-            </div>
+      </el-table-column>
+      <el-table-column label="早退天数" align="center" prop="earlyNum" sortable>
+        <template slot-scope="scope">
+          <div
+            @click="openRecord(scope.row,title3)" style="color: #02a7f0; cursor: pointer"
+          >
+            {{ scope.row.earlyNum }}
+          </div>
         </template>
-        </el-table-column>
-        <el-table-column label="旷工次数" align="center" prop="skippingNum" sortable>
-          <template slot-scope="scope">
-            <div
-            @click="openRecord(scope.row,title4)" style="color: #02a7f0; cursor: pointer">
-                {{ scope.row.skippingNum}}
-            </div>
+      </el-table-column>
+      <el-table-column label="旷工天数" align="center" prop="skippingNum" sortable>
+        <template slot-scope="scope">
+          <div
+            @click="openRecord(scope.row,title4)" style="color: #02a7f0; cursor: pointer"
+          >
+            {{ scope.row.skippingNum }}
+          </div>
         </template>
-        </el-table-column>
-        <el-table-column label="打卡地异常次数" align="center" prop="addressErrorNum" sortable>
-          <template slot-scope="scope">
-            <div
-            @click="openRecord(scope.row,title5)" style="color: #02a7f0; cursor: pointer">
-                {{ scope.row.addressErrorNum}}
-            </div>
+      </el-table-column>
+      <el-table-column label="打卡地异常天数" align="center" prop="addressErrorNum" sortable>
+        <template slot-scope="scope">
+          <div
+            @click="openRecord(scope.row,title5)" style="color: #02a7f0; cursor: pointer"
+          >
+            {{ scope.row.addressErrorNum }}
+          </div>
         </template>
-        </el-table-column>
-<!--        <el-table-column label="出入异常次数" align="center" prop="einErrorNum" sortable>
-          <template slot-scope="scope">
-            <div
-            @click="openRecord(scope.row,title6)" style="color: #02a7f0; cursor: pointer">
-                {{ scope.row.einErrorNum}}
-            </div>
+      </el-table-column>
+      <!--        <el-table-column label="出入异常天数" align="center" prop="einErrorNum" sortable>
+                <template slot-scope="scope">
+                  <div
+                  @click="openRecord(scope.row,title6)" style="color: #02a7f0; cursor: pointer">
+                      {{ scope.row.einErrorNum}}
+                  </div>
+              </template>
+              </el-table-column>-->
+      <el-table-column label="请假天数" align="center" prop="leaveNum" sortable>
+        <template slot-scope="scope">
+          <div
+            @click="openRecord(scope.row,title7)" style="color: #02a7f0; cursor: pointer"
+          >
+            {{ scope.row.leaveNum }}
+          </div>
         </template>
-        </el-table-column>-->
-        <el-table-column label="请假天数" align="center" prop="leaveNum" sortable>
-          <template slot-scope="scope">
-            <div
-            @click="openRecord(scope.row,title7)" style="color: #02a7f0; cursor: pointer">
-                {{ scope.row.leaveNum}}
-            </div>
-        </template>
-        </el-table-column>
-      </el-table>
+      </el-table-column>
 
-      <pagination
-        v-show="total>0"
-        :total="total"
-        :page.sync="queryParams.pageNum"
-        :limit.sync="queryParams.pageSize"
-        @pagination="getList"
-      />
+      <el-table-column label="打卡记录" align="center" prop="clockingRecordNum">
+        <template slot-scope="scope">
+          <div @click="openAttCountList(scope.row)" style="color: #02a7f0; cursor: pointer">
+            {{ scope.row.clockingRecordNum }}
+          </div>
+        </template>
+      </el-table-column>
 
-      <!-- 相关记录 -->
-      <el-dialog :title="title" :visible.sync="showRecord" width="1200px" height="1000px" append-to-body @close="cancelRecord">
-        <el-form :model="queryRecord" ref="queryFormRecord" size="small" :inline="true" v-show="showSearch" label-width="110px">
-        <el-form-item  label="选择考勤时间段">
+    </el-table>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 相关记录 -->
+    <el-dialog :title="title" :visible.sync="showRecord" width="1200px" height="1000px" append-to-body
+               @close="cancelRecord"
+    >
+      <el-form :model="queryRecord" ref="queryFormRecord" size="small" :inline="true" v-show="showSearch"
+               label-width="110px"
+      >
+        <el-form-item label="选择考勤时间段">
           <el-date-picker
-          v-model="dateRange"
-          style="width: 240px"
-          value-format="yyyy-MM-dd"
-          type="daterange"
-          range-separator="-"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-          :picker-options="pickerOptions"
+            v-model="dateRange"
+            style="width: 240px"
+            value-format="yyyy-MM-dd"
+            type="daterange"
+            range-separator="-"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            :picker-options="pickerOptions"
 
-        ></el-date-picker>
+          ></el-date-picker>
         </el-form-item>
         <el-form-item>
           <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQueryRecord">查询</el-button>
           <el-button icon="el-icon-refresh" size="mini" @click="resetRecord">重置</el-button>
         </el-form-item>
-        </el-form>
+      </el-form>
 
-      <el-table v-loading="loadingTwo" :data="tableDataRecord" width="900px" height = "600px" row-key="id">
+      <el-table v-loading="loadingTwo" :data="tableDataRecord" width="900px" height="600px" row-key="id">
         <el-table-column label="序号" align="center" width="80" type="index">
-        <template slot-scope="scope">
-          <span>{{ (queryRecord.pageNum - 1) * queryRecord.pageSize + scope.$index + 1 }}</span>
-        </template>
-      </el-table-column>
-        <el-table-column label="id" align="center" prop="id" v-if="false" />
+          <template slot-scope="scope">
+            <span>{{ (queryRecord.pageNum - 1) * queryRecord.pageSize + scope.$index + 1 }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="id" align="center" prop="id" v-if="false"/>
         <el-table-column label="姓名" align="center" prop="name" width="80" sortable/>
         <el-table-column label="所属部门" align="center" prop="orgName" sortable/>
         <el-table-column label="考勤日期" align="center" prop="attCurrent" width="100" sortable>\
@@ -154,16 +178,16 @@
         </el-table-column>
         <el-table-column label="上班打卡时间" align="center" prop="goWorkTime" width="140" sortable/>
         <el-table-column label="上班状态" align="center" prop="goWorkStatus" width="100" sortable>
-              <template slot-scope="scope">
-                <dict-tag :options="dict.type.att_status" :value="scope.row.goWorkStatus"/>
-              </template>
+          <template slot-scope="scope">
+            <dict-tag :options="dict.type.att_status" :value="scope.row.goWorkStatus"/>
+          </template>
         </el-table-column>
         <el-table-column label="上班打卡地址" align="center" prop="goWorkAddress" sortable/>
         <el-table-column label="下班打卡时间" align="center" prop="offWorkTime" width="140" sortable/>
         <el-table-column label="下班状态" align="center" prop="offWorkStatus" width="100" sortable>
-              <template slot-scope="scope">
-                <dict-tag :options="dict.type.att_status" :value="scope.row.offWorkStatus"/>
-              </template>
+          <template slot-scope="scope">
+            <dict-tag :options="dict.type.att_status" :value="scope.row.offWorkStatus"/>
+          </template>
         </el-table-column>
         <el-table-column label="下班打卡地址" align="center" prop="offWorkAddress" sortable/>
       </el-table>
@@ -176,285 +200,355 @@
         @pagination="getListRecord"
       />
 
-      </el-dialog>
+    </el-dialog>
 
-    </div>
-  </template>
 
-  <script>
-  import { listMonthlyError,getDetail,exportMonthlyError} from "@/api/report/monthlyError";
-  import {listDeptTree} from "@/api/system/userInfo";
-  import { downloadFile } from '@/utils/download'
-  import Treeselect from "@riophae/vue-treeselect";
-  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
-  // import { getEngineeringList } from "@/api/select";
-  import { getToken } from '@/utils/auth'
-  export default {
-    name: "MonthlyError",
-    dicts: ['att_status'],
-    // dicts: ['sys_normal_disable','sys_voltage_level','sys_org_name','sys_pro_type','sys_pro_status',
-    // 'sys_yz_manage','sys_sg_manage','sys_jl_manage','sys_device_type'],
-    components: { Treeselect },
-    data() {
-      return {
-        showAttribute:false,
-        // 遮罩层
-        loading: false,
-        // 遮罩层
-        loadingTwo: false,
-        // 选中数组
-        ids: [],
-        // 部门树选项
-        deptOptions: [],
-        // 显示搜索条件
-        showSearch: true,
-        showRecord:false,
-        maxLength:100,//已选列表上限，防止数据过多请求报错
-        // 总条数
-        total: 0,
-        totalTwo: 0,
-        // 表格数据
-        tableData: [],
-        tableDataRecord: [],
-        // 弹出层标题
-        title: "",
-        title1: "打卡记录",
-        title2: "迟到记录",
-        title3: "早退记录",
-        title4: "旷工记录",
-        title5: "打卡地异常记录",
-        title6: "出入异常记录",
-        title7: "请假记录",
-        // 是否显示弹出层
-        open: false,
-        dateRange: [],
-        startDate:undefined,
-        endDate:undefined,
+    <!-- 打卡次数记录 -->
+    <el-dialog :title="title" :visible.sync="showAttCount" width="1200px" height="1000px" append-to-body>
+      <el-form :model="queryAttCount" ref="queryFormRecordAtt" size="small" :inline="true" v-show="showSearch"
+               label-width="110px">
+        <el-form-item>
+        </el-form-item>
+      </el-form>
 
-        queryParams: {
-          pageNum: 1,
-          pageSize: 10,
-          attCurrentMonth:undefined,
-          name:undefined,
-          orgName: undefined,
-          orgId: undefined,
-        },
+      <el-table v-loading="loadingAttCount" :data="tableDataAttCount" width="900px" height="600px" row-key="id">
 
-        queryRecord: {
-          pageNum: 1,
-          pageSize: 10,
-          userId: undefined,
-          attStatis: undefined,
-          attCurrent: undefined,
-        },
-        // 表单参数
-       pickerOptions: {
-       disabledDate: this.disabledDate,
-      }
 
-      };
-    },
-    computed: {
-    },
-    created() {
+        <el-table-column label="序号" align="center" width="80" type="index">
+          <template slot-scope="scope">
+            <span>{{ (queryAttCount.pageNum - 1) * queryAttCount.pageSize + scope.$index + 1 }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="考勤日期" align="center" prop="attCurrentDay" :show-overflow-tooltip="true">
+          <template slot-scope="scope">
+            <span>{{ formatDate(scope.row.attCurrentDay) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="考勤时间" align="center" prop="attCurrentTime" sortable :show-overflow-tooltip="true" />
+        <el-table-column label="打卡地址" align="center" prop="attAddress" sortable :show-overflow-tooltip="true" />
+        <el-table-column label="备注" align="center" prop="remark" sortable :show-overflow-tooltip="true" />
+      </el-table>
 
-      this.getMonth();
-      this.getDeptList();
-      if(this.$route.query.param){
-        console.log(this.$route.query.param)
-        this.queryParams.attCurrentMonth=this.$route.query.param
-      }
-      this.getList();
-    },
-    mounted(){
-    },
-    methods: {
-      disabledDate(time) {
-          const str=this.queryRecord.attCurrent+'-01';
-          // 获取当前日期
-          var currentDate = new Date(str);
-          // 获取当前月份的第一天
-          var firstDayOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1);
-          // 获取当前月份的最后一天
-          var lastDayOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0);
-          return time < firstDayOfMonth || time > lastDayOfMonth;
-        },
-        // defaultTime(){
-        //   // ['2023-04-01', '2023-04-10']
-        //   console.log(11111111111111)
-        //   const str=this.queryRecord.attCurrent+'-01';
-        //   var currentDate = new Date(str);
-        //   // 获取当前月份的第一天
-        //   var firstDayOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1);
-        //   // 获取当前月份的最后一天
-        //   var lastDayOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0);
-        //   const strTemp=[firstDayOfMonth,lastDayOfMonth]
-        //   return strTemp;
-        // },
-      getMonth(){
-          // 默认当月
-          var nowDate = new Date();
-          var date = {
-            year: nowDate.getFullYear(),
-            month: nowDate.getMonth() + 1,
-            day: nowDate.getDate()
-          };
-          const dayDate = date.year + "-" + (date.month >= 10 ? date.month : "0" + date.month);
-          // var date = new Date();
-          this.$set(this.queryParams, "attCurrentMonth", [dayDate.toString(),dayDate.toString()]);
-        },
-        formatDate(dateString){
-          const date = new Date(dateString); // 创建日期对象
-          const year = date.getFullYear(); // 获取年份
-          const month = String(date.getMonth() + 1).padStart(2, '0'); // 获取月份（注意：月份从0开始）
-          const day = String(date.getDate()).padStart(2, '0'); // 获取日期
-          const weekdays = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']; // 星期几数组
-          const weekday = weekdays[date.getDay()]; // 获取星期几
+      <pagination v-show="totalAttCount > 0" :total="totalAttCount" :page.sync="queryAttCount.pageNum"
+                  :limit.sync="queryAttCount.pageSize" @pagination="getClockingRecordListByUserId" />
+    </el-dialog>
 
-          return `${year}-${month}-${day} ${weekday}`; // 组合成所需格式
-        },
+  </div>
+</template>
 
-        getDeptList(){
-            listDeptTree().then(response => {
-                this.deptOptions = this.handleTree(response.data, "id");
-            });
-        },
-        /** 转换部门数据结构 */
-        normalizer(node) {
-            if (node.children && !node.children.length) {
-                delete node.children;
-            }
-            return {
-                id: node.id,
-                label: node.orgName,
-                children: node.children
-            };
-        },
+<script>
+import { listMonthlyError, getDetail, exportMonthlyError,getClockingRecordListByUserId } from '@/api/report/monthlyError'
+import { listDeptTree } from '@/api/system/userInfo'
+import { downloadFile } from '@/utils/download'
+import Treeselect from '@riophae/vue-treeselect'
+import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+// import { getEngineeringList } from "@/api/select";
+import { getToken } from '@/utils/auth'
 
-        handleSelect(value, instanceId) {
-            console.log('Selected:', value);
-            // 在这里处理选择事件
-            this.queryParams.orgName=value.orgName;
-        },
 
-        /** 查询月异常列表 */
-        getList() {
-            this.loading = true;
-            let query = _.cloneDeep(this.queryParams);
-            query.startMonth = query.attCurrentMonth[0];
-            query.endMonth = query.attCurrentMonth[1];
-            delete query['attCurrentMonth'];
-            console.log(query)
-            listMonthlyError(query).then(response => {
-              this.tableData = response.rows;
-              this.total = response.total;
-              this.loading = false;
-            });
-        },
+export default {
+  name: 'MonthlyError',
+  dicts: ['att_status'],
+  // dicts: ['sys_normal_disable','sys_voltage_level','sys_org_name','sys_pro_type','sys_pro_status',
+  // 'sys_yz_manage','sys_sg_manage','sys_jl_manage','sys_device_type'],
+  components: { Treeselect },
+  data() {
+    return {
+      showAttribute: false,
+      // 遮罩层
+      loading: false,
+      // 遮罩层
+      loadingTwo: false,
+      // 选中数组
+      ids: [],
+      // 部门树选项
+      deptOptions: [],
+      // 显示搜索条件
+      showSearch: true,
+      showRecord: false,
+      maxLength: 100,//已选列表上限，防止数据过多请求报错
+      // 总条数
+      total: 0,
+      totalTwo: 0,
+      // 表格数据
+      tableData: [],
+      tableDataRecord: [],
+      // 弹出层标题
+      title: '',
+      title1: '打卡记录',
+      title2: '迟到记录',
+      title3: '早退记录',
+      title4: '旷工记录',
+      title5: '打卡地异常记录',
+      title6: '出入异常记录',
+      title7: '请假记录',
+      // 是否显示弹出层
+      open: false,
+      dateRange: [],
+      startDate: undefined,
+      endDate: undefined,
 
-        /** 搜索按钮操作 */
-        handleQuery() {
-        this.queryParams.pageNum = 1;
-        this.getList();
-        },
-
-        // 表单重置
-        reset() {
-            this.queryForm = {};
-            this.resetForm("queryForm");
-            this.getList();
-        },
-        // 表单重置
-        resetRecord() {
-            // this.queryFormRecord = {};
-            this.dateRange = [];
-            this.resetForm("queryFormRecord");
-            this.getListRecord();
-        },
-
-        //打开月异常详情页面
-        openRecord(row,titleBoss){
-          this.id = row.id;
-          this.title = titleBoss;
-          this.queryRecord.userId = row.userId;
-          this.queryRecord.orgId = row.orgId;
-          this.queryRecord.attCurrent = row.attCurrentMonth;
-          if(titleBoss=='打卡记录'){
-            this.queryRecord.attStatis=1;
-          }else if(titleBoss=='迟到记录'){
-            this.queryRecord.attStatis=2;
-          }else if(titleBoss=='早退记录'){
-            this.queryRecord.attStatis=4;
-          }else if(titleBoss=='旷工记录'){
-            this.queryRecord.attStatis=3;
-          }else if(titleBoss=='打卡地异常记录'){
-            this.queryRecord.attStatis=9;
-          }else if(titleBoss=='出入异常记录'){
-            this.queryRecord.attStatis=8;
-          }else if(titleBoss=='请假记录'){
-            this.queryRecord.attStatis=6;
-          }
-          this.showRecord = true;
-          this.getListRecord();
-        },
-
-        /** 查询月异常详情列表 */
-        getListRecord() {
-          this.loadingTwo = true;
-          getDetail(this.addDateRange(this.queryRecord, this.dateRange)).then(response => {
-            this.tableDataRecord = response.rows;
-            this.totalTwo = response.total;
-            this.loadingTwo = false;
-          });
-        },
-
-        /** 搜索按钮操作 */
-        handleQueryRecord() {
-        this.queryRecord.pageNum = 1;
-        this.getListRecord();
-        },
-
-        cancelRecord() {
-            this.showRecord = false;
-            this.resetRecord();
-        },
-
-        /** 导出按钮操作 */
-        handleExport() {
-          let query = _.cloneDeep(this.queryParams);
-          query.startMonth = query.attCurrentMonth[0];
-          query.endMonth = query.attCurrentMonth[1];
-          delete query['attCurrentMonth'];
-          console.log(query)
-        exportMonthlyError(query).then(res => {
-          downloadFile({ fileName: `月异常报表_${new Date().getTime()}.xlsx`, fileData: res, fileType: 'application/vnd.ms-excel;charset=utf-8' })
-        })
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        attCurrentMonth: undefined,
+        name: undefined,
+        orgName: undefined,
+        orgId: undefined
       },
 
-    }
-  };
-  </script>
+      queryRecord: {
+        pageNum: 1,
+        pageSize: 10,
+        userId: undefined,
+        attStatis: undefined,
+        attCurrent: undefined
+      },
+      // 表单参数
+      pickerOptions: {
+        disabledDate: this.disabledDate
+      },
 
-  <style lang="scss" scoped>
-  .uploadImg {
-    padding-top: 20px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  .deviceCode {
-      margin-top: 10px;
-      padding-bottom: 20px;
-      font-size: 18px;
-  }
-  ::v-deep.el-table .fixed-width .el-button--mini {
-      width: 60px !important;
-      margin-bottom: 10px;
-  }
-  //隐藏图片上传框的css
-  ::v-deep.disabled {
-      .el-upload--picture-card {
-          display: none;
+      queryAttCount: {
+        pageNum: 1,
+        pageSize: 10,
+        month: undefined,
+        userName: undefined
+      },
+      showAttCount: false,
+      totalAttCount: 0,
+      // 遮罩层
+      loadingAttCount: false,
+      tableDataAttCount: []
+
+    }
+  },
+  computed: {},
+  created() {
+
+    this.getMonth()
+    this.getDeptList()
+    if (this.$route.query.param) {
+      console.log(this.$route.query.param)
+      this.queryParams.attCurrentMonth = this.$route.query.param
+    }
+    this.getList()
+  },
+  mounted() {
+  },
+  methods: {
+    disabledDate(time) {
+      const str = this.queryRecord.attCurrent + '-01'
+      // 获取当前日期
+      var currentDate = new Date(str)
+      // 获取当前月份的第一天
+      var firstDayOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1)
+      // 获取当前月份的最后一天
+      var lastDayOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0)
+      return time < firstDayOfMonth || time > lastDayOfMonth
+    },
+    // defaultTime(){
+    //   // ['2023-04-01', '2023-04-10']
+    //   console.log(11111111111111)
+    //   const str=this.queryRecord.attCurrent+'-01';
+    //   var currentDate = new Date(str);
+    //   // 获取当前月份的第一天
+    //   var firstDayOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1);
+    //   // 获取当前月份的最后一天
+    //   var lastDayOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0);
+    //   const strTemp=[firstDayOfMonth,lastDayOfMonth]
+    //   return strTemp;
+    // },
+    getMonth() {
+      // 默认当月
+      var nowDate = new Date()
+      var date = {
+        year: nowDate.getFullYear(),
+        month: nowDate.getMonth() + 1,
+        day: nowDate.getDate()
       }
+      const dayDate = date.year + '-' + (date.month >= 10 ? date.month : '0' + date.month)
+      // var date = new Date();
+      this.$set(this.queryParams, 'attCurrentMonth', [dayDate.toString(), dayDate.toString()])
+    },
+    formatDate(dateString) {
+      const date = new Date(dateString) // 创建日期对象
+      const year = date.getFullYear() // 获取年份
+      const month = String(date.getMonth() + 1).padStart(2, '0') // 获取月份（注意：月份从0开始）
+      const day = String(date.getDate()).padStart(2, '0') // 获取日期
+      const weekdays = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'] // 星期几数组
+      const weekday = weekdays[date.getDay()] // 获取星期几
+
+      return `${year}-${month}-${day} ${weekday}` // 组合成所需格式
+    },
+
+    getDeptList() {
+      listDeptTree().then(response => {
+        this.deptOptions = this.handleTree(response.data, 'id')
+      })
+    },
+    /** 转换部门数据结构 */
+    normalizer(node) {
+      if (node.children && !node.children.length) {
+        delete node.children
+      }
+      return {
+        id: node.id,
+        label: node.orgName,
+        children: node.children
+      }
+    },
+
+    handleSelect(value, instanceId) {
+      console.log('Selected:', value)
+      // 在这里处理选择事件
+      this.queryParams.orgName = value.orgName
+    },
+
+    /** 查询月异常列表 */
+    getList() {
+      this.loading = true
+      let query = _.cloneDeep(this.queryParams)
+      query.startMonth = query.attCurrentMonth[0]
+      query.endMonth = query.attCurrentMonth[1]
+      delete query['attCurrentMonth']
+      console.log(query)
+      listMonthlyError(query).then(response => {
+        this.tableData = response.rows
+        this.total = response.total
+        this.loading = false
+      })
+    },
+
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1
+      this.getList()
+    },
+
+    // 表单重置
+    reset() {
+      this.queryForm = {}
+      this.resetForm('queryForm')
+      this.getList()
+    },
+    // 表单重置
+    resetRecord() {
+      // this.queryFormRecord = {};
+      this.dateRange = []
+      this.resetForm('queryFormRecord')
+      this.getListRecord()
+    },
+
+    //打开月异常详情页面
+    openRecord(row, titleBoss) {
+      this.id = row.id
+      this.title = titleBoss
+      this.queryRecord.userId = row.userId
+      this.queryRecord.orgId = row.orgId
+      this.queryRecord.attCurrent = row.attCurrentMonth
+      if (titleBoss == '打卡记录') {
+        this.queryRecord.attStatis = 1
+      } else if (titleBoss == '迟到记录') {
+        this.queryRecord.attStatis = 2
+      } else if (titleBoss == '早退记录') {
+        this.queryRecord.attStatis = 4
+      } else if (titleBoss == '旷工记录') {
+        this.queryRecord.attStatis = 3
+      } else if (titleBoss == '打卡地异常记录') {
+        this.queryRecord.attStatis = 9
+      } else if (titleBoss == '出入异常记录') {
+        this.queryRecord.attStatis = 8
+      } else if (titleBoss == '请假记录') {
+        this.queryRecord.attStatis = 6
+      }
+      this.showRecord = true
+      this.getListRecord()
+    },
+
+    /** 查询月异常详情列表 */
+    getListRecord() {
+      this.loadingTwo = true
+      getDetail(this.addDateRange(this.queryRecord, this.dateRange)).then(response => {
+        this.tableDataRecord = response.rows
+        this.totalTwo = response.total
+        this.loadingTwo = false
+      })
+    },
+
+    /** 搜索按钮操作 */
+    handleQueryRecord() {
+      this.queryRecord.pageNum = 1
+      this.getListRecord()
+    },
+
+    cancelRecord() {
+      this.showRecord = false
+      this.resetRecord()
+    },
+
+    /** 导出按钮操作 */
+    handleExport() {
+      let query = _.cloneDeep(this.queryParams)
+      query.startMonth = query.attCurrentMonth[0]
+      query.endMonth = query.attCurrentMonth[1]
+      delete query['attCurrentMonth']
+      console.log(query)
+      exportMonthlyError(query).then(res => {
+        downloadFile({
+          fileName: `月异常报表_${new Date().getTime()}.xlsx`,
+          fileData: res,
+          fileType: 'application/vnd.ms-excel;charset=utf-8'
+        })
+      })
+    },
+
+    //打开打卡次数记录
+    openAttCountList(row) {
+      this.title = '打卡记录'
+      this.queryAttCount.month = row.attCurrentMonth
+      this.queryAttCount.userName = row.name
+      this.showAttCount = true
+      this.getClockingRecordListByUserId()
+    },
+
+    /** 查询打卡次数记录列表 */
+    getClockingRecordListByUserId() {
+      this.loadingAttCount = true
+      getClockingRecordListByUserId(this.queryAttCount).then(response => {
+        this.tableDataAttCount = response.rows
+        this.totalAttCount = response.total
+        this.loadingAttCount = false
+      })
+    }
+
   }
-  </style>
+}
+</script>
+
+<style lang="scss" scoped>
+.uploadImg {
+  padding-top: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.deviceCode {
+  margin-top: 10px;
+  padding-bottom: 20px;
+  font-size: 18px;
+}
+
+::v-deep.el-table .fixed-width .el-button--mini {
+  width: 60px !important;
+  margin-bottom: 10px;
+}
+
+//隐藏图片上传框的css
+::v-deep.disabled {
+  .el-upload--picture-card {
+    display: none;
+  }
+}
+</style>