增加考勤概览

src/api/construction-person/attendance-manage/attendance-count.js

@@ -16,6 +16,15 @@ export const getProjectListAPI = (data) => {
         params: data,
     })
 }
+
+// 获取考勤概览列表
+export const getAttOverviewListAPI = (data) => {
+    return request({
+        url: '/workerLight/getWorkerAttByMonth',
+        method: 'GET',
+        params: data,
+    })
+}
 // 获取分包班组列表
 export const getSubTeamListAPI = (data) => {
     return request({

src/views/construction-person/attendance-manage/attendance-count/att-overview.vue

@@ -0,0 +1,276 @@
+<template>
+    <div class="section-container">
+        <div class="table-container">
+            <el-form
+                :inline="true"
+                label-width="auto"
+                :model="queryParams"
+                ref="queryFormRef"
+                style="margin-top: 20px; padding-left: 20px; display: flex"
+            >
+                <el-form-item label="月份" prop="month">
+                    <el-date-picker
+                        type="month"
+                        style="width: 200px"
+                        value-format="yyyy-MM"
+                        v-model="queryParams.month"
+                        placeholder="请选择月份"
+                        @change="handleMonthChange"
+                    />
+                </el-form-item>
+                <el-form-item>
+                    <el-button
+                        size="mini"
+                        type="primary"
+                        icon="el-icon-search"
+                        @click="handleQuery"
+                    >
+                        查询
+                    </el-button>
+                    <el-button
+                        plain
+                        size="mini"
+                        type="warning"
+                        icon="el-icon-refresh"
+                        @click="resetQuery"
+                    >
+                        重置
+                    </el-button>
+                </el-form-item>
+            </el-form>
+            <el-table
+                border
+                stripe
+                style="width: 100%"
+                :data="tableList"
+                :header-cell-style="tableHeaderStyle"
+                :cell-style="tableCellStyle"
+                v-loading="loading"
+            >
+                <el-table-column
+                    align="center"
+                    :key="item.prop"
+                    :prop="item.prop"
+                    :label="item.label"
+                    show-overflow-tooltip
+                    fixed="left"
+                    v-for="item in columnData"
+                />
+                <el-table-column label="出勤统计">
+                    <el-table-column
+                        align="center"
+                        :key="j"
+                        :label="j.toString()"
+                        width="50"
+                        v-for="j in attendanceDays"
+                    >
+                        <template slot-scope="{ row }">
+                            <span
+                                v-if="
+                                    row.attendanceDayList &&
+                                    row.attendanceDayList[j - 1]
+                                "
+                            >
+                                {{ row.attendanceDayList[j - 1].isAtt }}
+                            </span>
+                            <span v-else>-</span>
+                        </template>
+                    </el-table-column>
+                </el-table-column>
+                <el-table-column
+                    align="center"
+                    label="出勤天数"
+                    fixed="right"
+                    prop="attendanceNum"
+                />
+            </el-table>
+        </div>
+    </div>
+</template>
+
+<script>
+import { getAttOverviewListAPI } from '@/api/construction-person/attendance-manage/attendance-count'
+
+export default {
+    name: 'AttOverview',
+    props: {
+        proId: {
+            type: [Number, String],
+            default: '',
+        },
+    },
+    data() {
+        const currentMonth = new Date().toISOString().slice(0, 7)
+        return {
+            loading: false,
+            queryParams: {
+                month: currentMonth,
+                proId: this.proId || '',
+            },
+            tableList: [],
+            columnData: [
+                {
+                    label: '项目名称',
+                    prop: 'proName',
+                },
+                {
+                    label: '分包队伍全称',
+                    prop: 'subName',
+                },
+                {
+                    label: '姓名',
+                    prop: 'userName',
+                },
+                {
+                    label: '身份证号',
+                    prop: 'idCard',
+                },
+                {
+                    label: '职务/工种',
+                    prop: 'workName',
+                },
+            ],
+            attendanceDays: 0,
+        }
+    },
+    watch: {
+        proId: {
+            handler(newVal) {
+                if (newVal) {
+                    this.queryParams.proId = newVal
+                    this.getAttOverviewList()
+                }
+            },
+            immediate: true,
+        },
+    },
+    created() {
+        this.getCurrentMonthDays()
+        this.getAttOverviewList()
+    },
+    methods: {
+        getCurrentMonthDays() {
+            if (!this.queryParams.month) {
+                this.attendanceDays = 0
+                return
+            }
+            const [year, month] = this.queryParams.month.split('-')
+            this.attendanceDays = new Date(
+                parseInt(year),
+                parseInt(month),
+                0,
+            ).getDate()
+        },
+        tableHeaderStyle() {
+            return {
+                backgroundColor: '#f5f7fa',
+                color: '#606266',
+                fontWeight: '500',
+                fontSize: '14px',
+                textAlign: 'center',
+            }
+        },
+        tableCellStyle() {
+            return {
+                fontSize: '14px',
+                color: '#606266',
+                padding: '12px 0',
+            }
+        },
+        handleQuery() {
+            this.getAttOverviewList()
+        },
+        resetQuery() {
+            const currentMonth = new Date().toISOString().slice(0, 7)
+            this.queryParams.month = currentMonth
+            this.queryParams.proId = this.proId || ''
+            this.getCurrentMonthDays()
+            this.getAttOverviewList()
+        },
+        handleMonthChange() {
+            this.getCurrentMonthDays()
+            this.getAttOverviewList()
+        },
+        async getAttOverviewList() {
+            if (!this.queryParams.proId) {
+                return
+            }
+            this.loading = true
+            try {
+                const res = await getAttOverviewListAPI(this.queryParams)
+                if (res.code === 200) {
+                    this.tableList = (res.data || []).map((item) => {
+                        try {
+                            return {
+                                ...item,
+                                attendanceDayList: item.attendanceDay
+                                    ? JSON.parse(item.attendanceDay)
+                                    : [],
+                            }
+                        } catch (error) {
+                            return {
+                                ...item,
+                                attendanceDayList: [],
+                            }
+                        }
+                    })
+                }
+            } catch (error) {
+                console.error('获取考勤概览列表失败:', error)
+                this.tableList = []
+            } finally {
+                this.loading = false
+            }
+        },
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+.section-container {
+    background: #ffffff;
+    border-radius: 12px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    overflow: hidden;
+
+    .table-container {
+        padding: 0;
+
+        ::v-deep .el-table {
+            border: none;
+
+            .el-table__header-wrapper {
+                .el-table__header {
+                    th {
+                        border-bottom: 1px solid #e4e7ed;
+                        border-right: 1px solid #e4e7ed;
+
+                        &:last-child {
+                            border-right: none;
+                        }
+                    }
+                }
+            }
+
+            .el-table__body-wrapper {
+                .el-table__body {
+                    tr {
+                        &:hover {
+                            background-color: #f8f9fa;
+                        }
+
+                        td {
+                            border-bottom: 1px solid #f0f0f0;
+                            border-right: 1px solid #f0f0f0;
+
+                            &:last-child {
+                                border-right: none;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+</style>

src/views/construction-person/attendance-manage/attendance-count/config.js

@@ -21,7 +21,7 @@ export const columnsList = [
 export const dialogConfig = {
     outerVisible: false,
     outerTitle: '工程',
-    outerWidth: '80%',
+    outerWidth: '85%',
     minHeight: '90vh',
     maxHeight: '90vh',
 }

src/views/construction-person/attendance-manage/attendance-count/project-table.vue

@@ -2,7 +2,7 @@
     <!-- 施工人员 ---- 考勤管理 ---- 考勤统计第一级弹框 工程 -->
     <div class="app-container">
         <TableModel
-            :showOperation="false"
+            :showOperation="true"
             :showRightTools="false"
             ref="projectTableRef"
             :formLabel="projectFormLabel"
@@ -42,6 +42,18 @@
             <template v-for="item in slots" :slot="item" slot-scope="{ data }">
                 <span :key="item">{{ data[item] ? data[item] : 0 }}</span>
             </template>
+
+            <!-- 考勤概览 -->
+            <template slot="handle" slot-scope="{ data }">
+                <el-button
+                    size="mini"
+                    type="primary"
+                    icon="el-icon-view"
+                    @click="onHandleCheckAttOverview(data)"
+                >
+                    考勤概览
+                </el-button>
+            </template>
         </TableModel>
 
         <DialogModel
@@ -50,7 +62,18 @@
         >
             <template slot="outerContent">
                 <!-- 分包班组 -->
-                <SubTeamTable :proId="proId" ref="subTeamTableRef" />
+                <SubTeamTable
+                    :proId="proId"
+                    ref="subTeamTableRef"
+                    v-if="projectDialogConfig.outerTitle === '分包班组'"
+                />
+
+                <!-- 考勤概览 -->
+                <AttOverview
+                    :proId="proId"
+                    ref="attOverviewRef"
+                    v-if="projectDialogConfig.outerTitle === '考勤概览'"
+                />
             </template>
         </DialogModel>
     </div>
@@ -60,6 +83,7 @@
 import TableModel from '@/components/TableModel'
 import DialogModel from '@/components/DialogModel'
 import SubTeamTable from './sub-team-table'
+import AttOverview from './att-overview'
 import { getProjectListAPI } from '@/api/construction-person/attendance-manage/attendance-count'
 import {
     projectFormLabel,
@@ -80,6 +104,7 @@ export default {
         TableModel,
         DialogModel,
         SubTeamTable,
+        AttOverview,
     },
 
     data() {
@@ -112,6 +137,7 @@ export default {
         // 点击工程 弹出分包班组弹框
         onHandleCheckProject(data) {
             this.proId = data.proId
+            this.projectDialogConfig.outerTitle = '分包班组'
             this.projectDialogConfig.outerVisible = true
         },
 
@@ -144,6 +170,13 @@ export default {
 
             return 'primary' || ''
         },
+
+        // 点击考勤概览
+        onHandleCheckAttOverview(data) {
+            this.proId = data.proId
+            this.projectDialogConfig.outerTitle = '考勤概览'
+            this.projectDialogConfig.outerVisible = true
+        },
     },
 
     created() {