应出勤天数组成

src/api/report/monthReport.js

@@ -29,3 +29,13 @@ export function getClockingRecordListByUserId(query) {
     params: query
   })
 }
+
+
+// 查询应出勤天数组成查询列表
+export function getRequiredDaysList(query) {
+  return request({
+    url: '/system/attDetails/getAttMonthDaysMakeUp',
+    method: 'get',
+    params: query
+  })
+}

src/views/report/monthReport/index.vue

@@ -43,7 +43,14 @@
       <el-table-column label="姓名" align="center" prop="userName" />
       <el-table-column label="所属部门" align="center" prop="orgName" />
       <el-table-column label="考勤月份" align="center" prop="attCurrentMonth" />
-      <el-table-column label="应出勤天数" align="center" prop="requiredDays" />
+      <el-table-column label="应出勤天数" align="center" prop="requiredDays" >
+        <template slot-scope="scope">
+          <div @click="openRequiredDaysList(scope.row)" style="color: #02a7f0; cursor: pointer">
+            {{ scope.row.requiredDays }}
+          </div>
+        </template>
+      </el-table-column>
+
       <el-table-column label="工作时间外出次数" align="center" prop="normalNum" width="180">
         <template slot-scope="scope">
           <div @click="openOutCountList(scope.row)" style="color: #02a7f0; cursor: pointer">
@@ -262,12 +269,42 @@
                   :limit.sync="queryAttCount.pageSize" @pagination="getClockingRecordListByUserId" />
     </el-dialog>
 
+
+    <!-- 应出勤天数组成 -->
+    <el-dialog :title="title" :visible.sync="showRequiredDays" width="1200px" height="1000px" append-to-body>
+      <el-form :model="queryRequiredDays" ref="queryFormRecord" size="small" :inline="true" v-show="showSearch"
+               label-width="110px">
+      </el-form>
+
+      <el-table v-loading="loadingTwoRequiredDays" :data="tableDataRequiredDays" width="900px" height="600px" row-key="id">
+        <el-table-column label="序号" align="center" width="80" type="index">
+          <template slot-scope="scope">
+            <span>{{ (queryRequiredDays.pageNum - 1) * queryRequiredDays.pageSize + scope.$index + 1 }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="月份" align="center" prop="attCurrentMonth" sortable />
+        <el-table-column label="应出勤天数" align="center" prop="attDays" sortable />
+        <el-table-column label="所属考勤组" align="center" prop="groupName" sortable />
+        <el-table-column label="考勤规则" align="center" prop="attCurrentDay" width="180" :show-overflow-tooltip="true">
+          <template slot-scope="scope">
+            <span>{{ parseAttendanceRule(scope.row.attRules) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="节假日" align="center" prop="isHaveHoliday" width="180" :show-overflow-tooltip="true" />
+        <el-table-column label="所出勤开始时间" align="center" prop="attStartDate" sortable :show-overflow-tooltip="true" />
+        <el-table-column label="所出勤结束时间" align="center" prop="attEndDate" sortable :show-overflow-tooltip="true" />
+      </el-table>
+
+      <pagination v-show="totalTwoRequiredDays > 0" :total="totalTwoRequiredDays" :page.sync="queryRequiredDays.pageNum"
+                  :limit.sync="queryRequiredDays.pageSize" @pagination="getRequiredDaysList" />
+    </el-dialog>
+
   </div>
 </template>
 
 <script>
 import { getDetail } from "@/api/report/monthlyError";
-import { getMonthAttReport, exportMonthReport , getClockingRecordListByUserId} from "@/api/report/monthReport";
+import { getMonthAttReport, exportMonthReport , getClockingRecordListByUserId,getRequiredDaysList} from "@/api/report/monthReport";
 import { listDeptTree } from "@/api/system/userInfo";
 import Treeselect from "@riophae/vue-treeselect";
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
@@ -369,6 +406,22 @@ export default {
       // 遮罩层
       loadingAttCount: false,
       tableDataAttCount: [],
+
+      queryRequiredDays: {
+        pageNum: 1,
+        pageSize: 10,
+        userId: undefined,
+        attCurrentDay: undefined,
+        userName: undefined,
+        attCurrentMonth: undefined
+      },
+      showRequiredDays: false,
+      totalTwoRequiredDays: 0,
+      // 遮罩层
+      loadingTwoRequiredDays: false,
+      tableDataRequiredDays: [],
+
+
     };
   },
   created() {
@@ -378,6 +431,20 @@ export default {
   },
   methods: {
 
+    parseAttendanceRule(ruleString) {
+      const days = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
+      const needAttend = ruleString.split(',').map(item => item === '1');
+      let result = '';
+
+      needAttend.forEach((attend, index) => {
+        if (attend) {
+          if (result !== '') result += '、';
+          result += days[index].replace('周', '');
+        }
+      });
+      return result || '无';
+    },
+
     formatDate(dateString) {
       const date = new Date(dateString); // 创建日期对象
       const year = date.getFullYear(); // 获取年份
@@ -552,6 +619,26 @@ export default {
       });
     },
 
+
+    openRequiredDaysList(row){
+      this.title = "应出勤天数组成";
+      this.queryRequiredDays.userId = row.userId;
+      this.queryRequiredDays.attCurrentDay = row.attCurrentDay;
+      this.queryRequiredDays.attCurrentMonth = row.attCurrentMonth + '-01';
+      this.showRequiredDays = true;
+      this.getRequiredDaysList();
+    },
+
+    /** 查询应出勤天数组成列表 */
+    getRequiredDaysList() {
+      this.loadingTwoRequiredDays = true;
+      getRequiredDaysList(this.queryRequiredDays).then(response => {
+        this.tableDataRequiredDays = response.rows;
+        this.totalTwoRequiredDays = response.total;
+        this.loadingTwoRequiredDays = false;
+      });
+    },
+
     /** 导出按钮操作 */
     handleExportOutCountList() {
       exportOutCountList(this.queryRecordOutCount).then(res => {