From da89c2499b1f0ead39310e53d47feaf8e95be550 Mon Sep 17 00:00:00 2001
From: BianLzhaoMin <11485688+bianliangzhaomin123@user.noreply.gitee.com>
Date: Sun, 17 Aug 2025 18:23:07 +0800
Subject: [PATCH] =?UTF-8?q?=E8=80=83=E5=8B=A4=E7=94=B3=E8=AF=B7=E6=A8=A1?=
 =?UTF-8?q?=E5=9D=97=E8=B0=83=E8=AF=95=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../card-replacement-apply.js                 |  56 +++
 src/components/AttendanceCalendar/index.vue   | 427 +++++++++---------
 .../attendance-count/attendance-details.vue   |   6 +-
 .../card-replacement-apply/add-apply-form.vue | 272 +++++++++++
 .../card-replacement-apply/config.js          |  52 +++
 .../card-replacement-apply/index.vue          | 265 ++++++++++-
 .../select-person-and-date.vue                | 303 +++++++++++++
 7 files changed, 1153 insertions(+), 228 deletions(-)
 create mode 100644 src/api/construction-person/attendance-manage/card-replacement-apply.js
 create mode 100644 src/views/construction-person/attendance-manage/card-replacement-apply/add-apply-form.vue
 create mode 100644 src/views/construction-person/attendance-manage/card-replacement-apply/config.js
 create mode 100644 src/views/construction-person/attendance-manage/card-replacement-apply/select-person-and-date.vue

diff --git a/src/api/construction-person/attendance-manage/card-replacement-apply.js b/src/api/construction-person/attendance-manage/card-replacement-apply.js
new file mode 100644
index 0000000..53f89f7
--- /dev/null
+++ b/src/api/construction-person/attendance-manage/card-replacement-apply.js
@@ -0,0 +1,56 @@
+import request from '@/utils/request'
+import requestFormData from '@/utils/request_formdata'
+
+// 新增补卡申请
+export const addCardReplacementApplyAPI = (data) => {
+    return requestFormData({
+        url: '/bmw/cardApply/saveRepairCardApply',
+        method: 'POST',
+        data,
+    })
+}
+
+// 获取补卡人员列表接口
+export const getCardReplacementPersonListAPI = (data) => {
+    return request({
+        url: '/bmw/cardApply/workPersonList',
+        method: 'GET',
+        params: data,
+    })
+}
+
+// 获取补卡人员考勤记录
+export const getCardReplacementPersonCheckRecordAPI = (data) => {
+    return request({
+        url: '/bmw/cardApply/getCheckRecord',
+        method: 'GET',
+        params: data,
+    })
+}
+
+// 修改补卡申请
+export const editCardReplacementApplyAPI = (data) => {
+    return request({
+        url: '/bmw/pmAttDevice/updatePmAttDevice',
+        method: 'POST',
+        data,
+    })
+}
+
+// 删除补卡申请
+export const deleteCardReplacementApplyAPI = (data) => {
+    return request({
+        url: '/bmw/pmAttDevice/delPmAttDevice',
+        method: 'POST',
+        data,
+    })
+}
+
+// 获取补卡申请列表
+export const getCardReplacementApplyListAPI = (data) => {
+    return request({
+        url: '/bmw/cardApply/list',
+        method: 'GET',
+        params: data,
+    })
+}
diff --git a/src/components/AttendanceCalendar/index.vue b/src/components/AttendanceCalendar/index.vue
index 225fa31..beea920 100644
--- a/src/components/AttendanceCalendar/index.vue
+++ b/src/components/AttendanceCalendar/index.vue
@@ -1,76 +1,78 @@
 <template>
     <div class="attendance-calendar">
-        <!-- 月份导航 -->
-        <div class="calendar-header">
-            <button @click="prevMonth">
-                <i class="el-icon-arrow-left"></i>
-            </button>
-            <h3>{{ currentYear }}年 {{ currentMonth }}月</h3>
-            <button @click="nextMonth">
-                <i class="el-icon-arrow-right"></i>
-            </button>
-        </div>
-
-        <!-- 星期标题 -->
-        <div class="week-days">
-            <div class="week-day" v-for="day in weekDays" :key="day">{{
-                day
-            }}</div>
-        </div>
-
-        <!-- 日历主体 -->
-        <div class="calendar-grid">
-            <!-- 上月日期占位 -->
-            <div
-                class="calendar-day prev-month"
-                v-for="day in prevMonthDays"
-                :key="'prev-' + day"
-            >
-                {{ day }}
-            </div>
-
-            <!-- 本月日期 -->
-            <div
-                class="calendar-day current-month"
-                v-for="day in currentMonthDays"
-                :key="day"
-                :class="getAttendanceClass(day)"
-                @click="handleDateClick(day)"
-            >
-                <span class="day-number">{{ day }}</span>
-                <span
-                    class="attendance-mark"
-                    v-if="getAttendanceStatus(day)"
-                ></span>
-            </div>
-
-            <!-- 下月日期占位 -->
-            <div
-                class="calendar-day next-month"
-                v-for="day in nextMonthDays"
-                :key="'next-' + day"
-            >
-                {{ day }}
-            </div>
-        </div>
-
         <!-- 图例说明 -->
-        <div class="legend">
+        <div class="legend" v-if="isShowLegend">
             <div class="legend-item">
-                <span class="legend-mark normal"></span>
-                <span>正常</span>
+                <span class="legend-mark active"></span>
+                <span>已打卡</span>
             </div>
             <div class="legend-item">
-                <span class="legend-mark late"></span>
-                <span>迟到</span>
+                <span class="legend-mark inactive"></span>
+                <span>未打卡</span>
             </div>
             <div class="legend-item">
-                <span class="legend-mark absent"></span>
-                <span>缺勤</span>
+                <span class="legend-mark not-in-range"></span>
+                <span>补卡</span>
             </div>
-            <div class="legend-item">
-                <span class="legend-mark leave"></span>
-                <span>请假</span>
+        </div>
+        <!-- 循环展示每个月份的日历 -->
+        <div
+            v-for="(monthData, index) in monthDataList"
+            :key="index"
+            class="month-calendar"
+        >
+            <!-- 月份标题 -->
+            <div class="calendar-header">
+                <h3>{{ monthData.year }}年 {{ monthData.month }}月</h3>
+            </div>
+
+            <!-- 星期标题 -->
+            <div class="week-days">
+                <div class="week-day" v-for="day in weekDays" :key="day">{{
+                    day
+                }}</div>
+            </div>
+
+            <!-- 日历主体 -->
+            <div class="calendar-grid">
+                <!-- 空白占位（月初） -->
+                <div
+                    class="calendar-day empty"
+                    :key="'empty-start-' + i"
+                    v-for="(empty, i) in getFirstMonthEmptyDays(monthData)"
+                >
+                </div>
+
+                <!-- 本月日期 -->
+                <div
+                    :key="day"
+                    class="calendar-day current-month"
+                    v-for="day in getDaysInMonth(monthData)"
+                    :class="getDayClass(monthData, day)"
+                >
+                    <span class="day-number">{{ day }}</span>
+                    <!-- 当isActive为1时显示复选框 -->
+                    <!-- <el-checkbox
+                        v-if="getDayInfo(monthData, day)?.isActive === 1"
+                        class="day-checkbox"
+                        v-model="
+                            checkedDays[
+                                `${monthData.year}-${monthData.month}-${day}`
+                            ]
+                        "
+                        @change="handleCheckboxChange(monthData, day, $event)"
+                    ></el-checkbox> -->
+
+                    <el-checkbox v-model="checked" />
+                </div>
+
+                <!-- 空白占位（月末） -->
+                <div
+                    class="calendar-day empty"
+                    v-for="(empty, i) in getLastMonthEmptyDays(monthData)"
+                    :key="'empty-end-' + i"
+                >
+                </div>
             </div>
         </div>
     </div>
@@ -80,121 +82,112 @@
 export default {
     name: 'AttendanceCalendar',
     props: {
-        // 考勤数据，格式: { date: '2023-10-01', status: 'normal|late|absent|leave' }
-        attendanceData: {
+        // 月份数据列表
+        monthDataList: {
             type: Array,
             default: () => [],
+            required: true,
+        },
+
+        isShowLegend: {
+            type: Boolean,
+            default: false,
         },
     },
     data() {
         return {
-            currentDate: new Date(),
             weekDays: ['日', '一', '二', '三', '四', '五', '六'],
+            checkedDays: {}, // 存储复选框状态
+            checked: false,
         }
     },
-    computed: {
-        // 当前年份
-        currentYear() {
-            return this.currentDate.getFullYear()
-        },
-        // 当前月份 (1-12)
-        currentMonth() {
-            return this.currentDate.getMonth() + 1
-        },
-        // 当月天数
-        currentMonthDays() {
-            return new Date(this.currentYear, this.currentMonth, 0).getDate()
-        },
-        // 当月第一天是星期几 (0-6)
-        firstDayOfMonth() {
-            return new Date(this.currentYear, this.currentMonth - 1, 1).getDay()
-        },
-        // 上月需要显示的天数
-        prevMonthDays() {
-            const prevMonth = this.currentMonth - 1 || 12
-            const prevMonthYear =
-                prevMonth === 12 ? this.currentYear - 1 : this.currentYear
-            const prevMonthTotalDays = new Date(
-                prevMonthYear,
-                prevMonth,
-                0,
-            ).getDate()
-
-            return Array.from({ length: this.firstDayOfMonth }, (_, i) => {
-                return prevMonthTotalDays - this.firstDayOfMonth + i + 1
-            })
-        },
-        // 下月需要显示的天数
-        nextMonthDays() {
-            const totalDays = this.prevMonthDays.length + this.currentMonthDays
-            const nextDaysCount = 7 - (totalDays % 7 || 7)
-            return nextDaysCount < 7
-                ? Array.from({ length: nextDaysCount }, (_, i) => i + 1)
-                : []
-        },
+    created() {
+        // 初始化复选框状态
+        this.initCheckedDays()
     },
     methods: {
-        // 切换到上月
-        prevMonth() {
-            this.currentDate = new Date(
-                this.currentYear,
-                this.currentMonth - 2,
-                1,
-            )
-            this.$emit('month-change', {
-                year: this.currentYear,
-                month: this.currentMonth,
+        // 初始化复选框状态
+        initCheckedDays() {
+            this.monthDataList.forEach((monthData) => {
+                monthData.day.forEach((day) => {
+                    if (day.isActive === 1) {
+                        const key = `${monthData.year}-${monthData.month}-${day.dayIndex}`
+                        this.$set(this.checkedDays, key, false)
+                    }
+                })
             })
         },
-        // 切换到下月
-        nextMonth() {
-            this.currentDate = new Date(this.currentYear, this.currentMonth, 1)
-            this.$emit('month-change', {
-                year: this.currentYear,
-                month: this.currentMonth,
-            })
+
+        // 获取指定月份的天数
+        getDaysInMonth(monthData) {
+            const year = parseInt(monthData.year)
+            const month = parseInt(monthData.month)
+            return new Date(year, month, 0).getDate()
         },
-        // 获取指定日期的考勤状态
-        getAttendanceStatus(day) {
-            const dateStr = `${this.currentYear}-${String(
-                this.currentMonth,
-            ).padStart(2, '0')}-${String(day).padStart(2, '0')}`
-            const record = this.attendanceData.find(
-                (item) => item.date === dateStr,
-            )
-            return record ? record.status : null
+
+        // 获取月份第一天是星期几
+        getFirstDayOfMonth(monthData) {
+            const year = parseInt(monthData.year)
+            const month = parseInt(monthData.month) - 1 // 月份是0-based
+            return new Date(year, month, 1).getDay()
         },
-        // 获取考勤状态对应的样式类
-        getAttendanceClass(day) {
-            const status = this.getAttendanceStatus(day)
+
+        // 计算月初需要的空白格子数量
+        getFirstMonthEmptyDays(monthData) {
+            return this.getFirstDayOfMonth(monthData)
+        },
+
+        // 计算月末需要的空白格子数量
+        getLastMonthEmptyDays(monthData) {
+            const totalDays = this.getDaysInMonth(monthData)
+            const lastDay = new Date(
+                parseInt(monthData.year),
+                parseInt(monthData.month) - 1,
+                totalDays,
+            ).getDay()
+            return 6 - lastDay
+        },
+
+        // 获取某天的信息
+        getDayInfo(monthData, day) {
+            const dayStr = String(day).padStart(2, '0')
+            return monthData.day.find((item) => item.dayIndex === dayStr)
+        },
+
+        // 获取某天的样式类
+        getDayClass(monthData, day) {
+            const dayInfo = this.getDayInfo(monthData, day)
+
+            // 如果没有该天的数据，默认为非考勤范围
+            if (!dayInfo) {
+                return 'not-in-range'
+            }
+
             return {
-                'has-attendance': !!status,
-                normal: status === 'normal',
-                late: status === 'late',
-                absent: status === 'absent',
-                leave: status === 'leave',
+                'not-in-range': !dayInfo.isRange,
+                active: dayInfo.isActive === 1,
+                inactive: dayInfo.isActive === 0,
             }
         },
-        // 点击日期
-        handleDateClick(day) {
-            const date = new Date(this.currentYear, this.currentMonth - 1, day)
-            const dateStr = `${this.currentYear}-${String(
-                this.currentMonth,
-            ).padStart(2, '0')}-${String(day).padStart(2, '0')}`
-            const attendanceInfo = this.attendanceData.find(
-                (item) => item.date === dateStr,
-            )
 
-            this.$emit('date-click', {
-                date,
-                dateStr,
-                attendanceInfo,
+        // 处理复选框变化
+        handleCheckboxChange(monthData, day, checked) {
+            const dayStr = String(day).padStart(2, '0')
+            this.$emit('checkbox-change', {
+                year: monthData.year,
+                month: monthData.month,
+                day: dayStr,
+                checked,
             })
         },
     },
     watch: {
-        currentMonth() {
-            // 月份变化时可以做一些处理
+        // 当月份数据变化时重新初始化复选框
+        monthDataList: {
+            deep: true,
+            handler() {
+                this.initCheckedDays()
+            },
         },
     },
 }
@@ -204,6 +197,7 @@ export default {
 .attendance-calendar {
     font-family: 'Arial', sans-serif;
     max-width: 700px;
+    min-width: 460px;
     margin: 0 auto;
     padding: 20px;
     border: 1px solid #e0e0e0;
@@ -211,29 +205,26 @@ export default {
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
 }
 
+.month-calendar {
+    margin-bottom: 30px;
+    padding-bottom: 20px;
+    border-bottom: 1px solid #f0f0f0;
+}
+
+.month-calendar:last-child {
+    margin-bottom: 0;
+    padding-bottom: 0;
+    border-bottom: none;
+}
+
 .calendar-header {
     display: flex;
-    justify-content: space-between;
+    justify-content: center;
     align-items: center;
     margin-bottom: 20px;
     padding: 0 10px;
 }
 
-.calendar-header button {
-    background: none;
-    border: none;
-    cursor: pointer;
-    font-size: 18px;
-    color: #666;
-    padding: 5px 10px;
-    border-radius: 4px;
-    transition: background-color 0.2s;
-}
-
-.calendar-header button:hover {
-    background-color: #f5f5f5;
-}
-
 .calendar-header h3 {
     margin: 0;
     color: #333;
@@ -262,66 +253,61 @@ export default {
 .calendar-day {
     aspect-ratio: 1;
     display: flex;
-    flex-direction: column;
     align-items: center;
     justify-content: center;
     border-radius: 6px;
     position: relative;
-    cursor: pointer;
-    transition: background-color 0.2s;
     font-size: 14px;
 }
 
-.calendar-day:hover {
-    background-color: #f0f0f0;
-}
-
-.prev-month,
-.next-month {
-    color: #ccc;
-    background-color: #fafafa;
+.empty {
+    background-color: #f9f9f9;
+    border: 1px solid transparent;
 }
 
 .current-month {
-    background-color: #fff;
     border: 1px solid #eee;
+    cursor: pointer;
+}
+
+/* 非考勤范围样式 */
+.not-in-range {
+    background-color: #f0f0f0;
+    color: #999;
+}
+
+/* 已打卡样式 */
+.active {
+    background-color: #19be6b;
+    color: #000;
+}
+
+/* 未打卡样式 */
+.inactive {
+    background-color: #f56c6c;
+    color: #000;
 }
 
 .day-number {
     z-index: 1;
 }
 
-.attendance-mark {
+/* 复选框样式 */
+.day-checkbox {
     position: absolute;
-    bottom: 5px;
-    width: 6px;
-    height: 6px;
-    border-radius: 50%;
-}
-
-.normal .attendance-mark {
-    background-color: #4cd964; /* 正常-绿色 */
-}
-
-.late .attendance-mark {
-    background-color: #ffcc00; /* 迟到-黄色 */
-}
-
-.absent .attendance-mark {
-    background-color: #ff3b30; /* 缺勤-红色 */
-}
-
-.leave .attendance-mark {
-    background-color: #5ac8fa; /* 请假-蓝色 */
+    top: 2px;
+    right: 2px;
+    z-index: 2;
 }
 
+/* 图例样式 */
 .legend {
     display: flex;
     justify-content: center;
     gap: 20px;
-    margin-top: 20px;
-    padding-top: 10px;
-    border-top: 1px solid #eee;
+    margin-bottom: 20px;
+    padding-bottom: 10px;
+    border-bottom: 1px solid #eee;
 }
 
 .legend-item {
@@ -334,24 +320,23 @@ export default {
 
 .legend-mark {
     display: inline-block;
-    width: 10px;
-    height: 10px;
-    border-radius: 50%;
+    width: 36px;
+    height: 36px;
+    border-radius: 3px;
 }
 
-.legend-mark.normal {
-    background-color: #4cd964;
+.legend-mark.active {
+    background-color: #19be6b;
+    /* border: 1px solid #4cd964; */
 }
 
-.legend-mark.late {
-    background-color: #ffcc00;
+.legend-mark.inactive {
+    background-color: #f56c6c;
+    /* border: 1px solid #ff3b30; */
 }
 
-.legend-mark.absent {
-    background-color: #ff3b30;
-}
-
-.legend-mark.leave {
-    background-color: #5ac8fa;
+.legend-mark.not-in-range {
+    background-color: #ff9900;
+    /* border: 1px solid #ddd; */
 }
 </style>
diff --git a/src/views/construction-person/attendance-manage/attendance-count/attendance-details.vue b/src/views/construction-person/attendance-manage/attendance-count/attendance-details.vue
index 0b80bd5..87d9229 100644
--- a/src/views/construction-person/attendance-manage/attendance-count/attendance-details.vue
+++ b/src/views/construction-person/attendance-manage/attendance-count/attendance-details.vue
@@ -55,7 +55,7 @@
         <el-row :gutter="6">
             <!-- 左侧考勤日历 -->
             <el-col :span="12">
-                <AttendanceCalendar />
+                <!-- <AttendanceCalendar /> -->
             </el-col>
 
             <!-- 右侧考勤表格 -->
@@ -109,12 +109,12 @@
 </template>
 
 <script>
-import AttendanceCalendar from '@/components/AttendanceCalendar'
+// import AttendanceCalendar from '@/components/AttendanceCalendar'
 import { getAttendanceDetailsListAPI } from '@/api/construction-person/attendance-manage/attendance-count'
 export default {
     name: 'AttendanceDetails',
     components: {
-        AttendanceCalendar,
+        // AttendanceCalendar,
     },
     props: {
         teamId: {
diff --git a/src/views/construction-person/attendance-manage/card-replacement-apply/add-apply-form.vue b/src/views/construction-person/attendance-manage/card-replacement-apply/add-apply-form.vue
new file mode 100644
index 0000000..b7b59e8
--- /dev/null
+++ b/src/views/construction-person/attendance-manage/card-replacement-apply/add-apply-form.vue
@@ -0,0 +1,272 @@
+<template>
+    <div style="width: 100%">
+        <el-row>
+            <el-col :span="20">
+                <TitleTip
+                    borderBottom="none"
+                    padding="24px 10px"
+                    titleText="补卡人员清单"
+                    justifyContent="flex-start"
+                >
+                    <template name="right">
+                        <span>{{ selectProjectName }}</span>
+                    </template>
+                </TitleTip>
+            </el-col>
+            <el-col :span="4">
+                <el-button
+                    type="primary"
+                    size="mini"
+                    icon="el-icon-plus"
+                    @click="handleSelectPerson"
+                >
+                    选择补卡人员
+                </el-button>
+            </el-col>
+        </el-row>
+
+        <el-table :data="tableData">
+            <el-table-column align="center" label="姓名" prop="name" />
+            <el-table-column align="center" label="身份证" prop="idNumber" />
+            <el-table-column align="center" label="补卡天数" prop="repairDay" />
+            <el-table-column
+                align="center"
+                width="300"
+                label="补卡日期"
+                prop="repairDate"
+                show-overflow-tooltip
+            />
+            <el-table-column align="center" label="补卡工程" prop="proName" />
+            <el-table-column align="center" label="联系方式" prop="phone" />
+            <el-table-column align="center" label="所属班组" prop="teamName" />
+            <el-table-column align="center" label="操作" width="160">
+                <template slot-scope="scope">
+                    <el-button
+                        size="mini"
+                        type="text"
+                        @click="onHandleEdit(scope.row)"
+                    >
+                        修改
+                    </el-button>
+                    <el-button
+                        size="mini"
+                        type="text"
+                        style="color: #f56c6c"
+                        @click="onHandleDelete($scope.index, scope)"
+                    >
+                        删除
+                    </el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+
+        <TitleTip
+            borderBottom="none"
+            padding="24px 10px"
+            titleText="补卡说明"
+            justifyContent="flex-start"
+        />
+
+        <el-form
+            label-width="140px"
+            ref="addOrEditFormRef"
+            :model="addApplyForm"
+        >
+            <el-row>
+                <el-col :span="12">
+                    <el-form-item label="补卡说明" prop="repairRemark">
+                        <el-input
+                            clearable
+                            maxlength="30"
+                            type="textarea"
+                            show-word-limit
+                            placeholder="请输入考勤机编码"
+                            v-model="addParams.repairRemark"
+                            :autosize="{ minRows: 4, maxRows: 8 }"
+                        />
+                    </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                    <el-form-item label="附件">
+                        <UploadFileFormData
+                            :limit="3"
+                            :file-size="20"
+                            :multiple="true"
+                            uploadTip="补卡说明附件上传"
+                            :file-list.sync="addParams.fileList"
+                            :file-type="[
+                                'jpg',
+                                'png',
+                                'jpeg',
+                                'pdf',
+                                'doc',
+                                'docx',
+                            ]"
+                        />
+                    </el-form-item>
+                </el-col>
+            </el-row>
+        </el-form>
+
+        <DialogModel
+            :dialogConfig="dialogConfig"
+            @closeDialogOuter="handleCloseDialogOuter"
+        >
+            <template slot="outerContent">
+                <SelectPersonAndDate
+                    ref="selectPersonAndDateRef"
+                    @onPersonSubmit="onPersonSubmit"
+                    :selectProjectId="selectProjectId"
+                    :selectProjectName="selectProjectName"
+                />
+
+                <el-row class="dialog-footer-btn">
+                    <el-button size="medium" @click="handleCloseDialogOuter">
+                        取消
+                    </el-button>
+                    <el-button
+                        size="medium"
+                        type="primary"
+                        @click="onHandleConfirm"
+                    >
+                        确定
+                    </el-button>
+                </el-row>
+            </template>
+        </DialogModel>
+    </div>
+</template>
+
+<script>
+import DialogModel from '@/components/DialogModel'
+import UploadFileFormData from '@/components/UploadFileFormData'
+import SelectPersonAndDate from './select-person-and-date.vue'
+import { addCardReplacementApplyAPI } from '@/api/construction-person/attendance-manage/card-replacement-apply'
+export default {
+    name: 'AddApplyForm',
+    props: {
+        selectProjectName: {
+            type: String,
+            default: () => '',
+        },
+        selectProjectId: {
+            type: [Number, String],
+            default: () => '',
+        },
+    },
+    components: {
+        DialogModel,
+        SelectPersonAndDate,
+        UploadFileFormData,
+    },
+    data() {
+        return {
+            addApplyForm: {
+                reason: '',
+            },
+            dialogConfig: {
+                outerTitle: '选择补卡人员以及补卡日期',
+                outerWidth: '',
+                minHeight: '90vh',
+                maxHeight: '90vh',
+                outerVisible: false,
+            },
+            tableData: [],
+
+            addParams: {
+                // proId: '', // 工程id
+                // repairNum: '', // 补卡人数
+                // repairDay: '', // 补卡天数
+                repairRemark: '', // 补卡说明
+                repairMonth: '2025-08', // 补卡月份
+                repairCardRecords: [],
+                fileList: [],
+            },
+        }
+    },
+    methods: {
+        handleSelectPerson() {
+            // console.log(this.addApplyForm)
+            this.dialogConfig.outerVisible = true
+        },
+        handleCloseDialogOuter() {
+            this.dialogConfig.outerVisible = false
+        },
+
+        // 确定按钮 ---- 日期已确定，人员已确定
+        onHandleConfirm() {
+            this.$refs.selectPersonAndDateRef.onPersonSubmit()
+            this.dialogConfig.outerVisible = false
+        },
+
+        // 人员选择成功
+        onPersonSubmit(val) {
+            // 已经选中的数据
+            if (val && val.length > 0) {
+                val.forEach((item) => {
+                    console.log(item, 'item----')
+                    this.tableData.push(item)
+                })
+            }
+        },
+
+        // 修改
+        onHandleEdit(row) {
+            console.log(row)
+        },
+
+        // 删除
+        onHandleDelete(index, row) {
+            this.tableData.splice(index, 1)
+        },
+
+        // 补卡信息接口新增
+        async onHandleConfirmFinishFun() {
+            // 组装参数
+            const { repairMonth, repairRemark, fileList } = this.addParams
+            const repairNum = this.tableData.length
+            const formData = new FormData()
+            const fileMsg = []
+            const repairDay = this.tableData.reduce((acc, curr) => {
+                return acc + curr.repairDay
+            }, 0)
+            const params = {
+                proId: this.selectProjectId,
+                repairMonth,
+                repairRemark,
+                repairNum,
+                repairDay,
+                repairCardRecords: this.tableData.map((e) => {
+                    return {
+                        name: e.name,
+                        phone: e.phone,
+                        proId: e.proId,
+                        teamId: e.teamId,
+                        idNumber: e.idNumber,
+                        workerId: e.workerId,
+                        repairDay: e.repairDay,
+                        repairDate: e.repairDate,
+                    }
+                }),
+            }
+
+            if (fileList.length > 0) {
+                fileList.forEach((e) => {
+                    fileMsg.push({
+                        type: 1,
+                        name: '附件',
+                    })
+
+                    formData.append('file', e.raw)
+                })
+            }
+            formData.append('fileMsg', JSON.stringify(fileMsg))
+            formData.append('params', JSON.stringify(params))
+            const res = await addCardReplacementApplyAPI(formData)
+            console.log(res)
+        },
+    },
+}
+</script>
+
+<style></style>
diff --git a/src/views/construction-person/attendance-manage/card-replacement-apply/config.js b/src/views/construction-person/attendance-manage/card-replacement-apply/config.js
new file mode 100644
index 0000000..4286a1b
--- /dev/null
+++ b/src/views/construction-person/attendance-manage/card-replacement-apply/config.js
@@ -0,0 +1,52 @@
+export const formLabel = [
+    {
+        isShow: false, // 是否展示label
+        f_type: 'ipt',
+        f_label: '姓名',
+        f_model: 'deviceCode',
+    },
+    {
+        isShow: false, // 是否展示label
+        f_type: 'ipt',
+        f_label: '工程',
+        f_model: 'deviceName',
+    },
+    {
+        isShow: false, // 是否展示label
+        f_type: 'ipt',
+        f_label: '状态',
+        f_model: 'proName',
+    },
+]
+
+export const columnsList = [
+    { t_props: 'deviceCode', t_label: '工程名称' },
+    { t_props: 'deviceName', t_label: '补卡人数' },
+    { t_props: 'proName', t_label: '补卡天数' },
+    { t_slot: 'isShanghai', t_label: '补卡说明' },
+    {
+        t_label: '申请人',
+        t_slot: 'onLine',
+    },
+    { t_label: '绑定人', t_props: '申请时间' },
+    {
+        t_label: '审核状态',
+        t_props: 'updateTime',
+    },
+    {
+        t_label: '审核人',
+        t_props: 'updateTime',
+    },
+    {
+        t_label: '审核时间',
+        t_props: 'updateTime',
+    },
+]
+
+export const dialogConfig = {
+    outerTitle: '',
+    minHeight: '',
+    maxHeight: '',
+    outerWidth: '40%',
+    outerVisible: false,
+}
diff --git a/src/views/construction-person/attendance-manage/card-replacement-apply/index.vue b/src/views/construction-person/attendance-manage/card-replacement-apply/index.vue
index 3d034a0..ee7866e 100644
--- a/src/views/construction-person/attendance-manage/card-replacement-apply/index.vue
+++ b/src/views/construction-person/attendance-manage/card-replacement-apply/index.vue
@@ -1,11 +1,268 @@
 <template>
+    <!-- 施工人员 ---- 考勤管理 ---- 补卡申请-->
     <div class="app-container">
-        <h1>补卡申请</h1>
+        <TableModel
+            :formLabel="formLabel"
+            :showOperation="true"
+            :showRightTools="true"
+            :columnsList="columnsList"
+            ref="cardReplacementApplyTableRef"
+            :request-api="getCardReplacementApplyListAPI"
+        >
+            <template slot="btn" slot-scope="{ queryParams }">
+                <el-button
+                    plain
+                    size="mini"
+                    type="success"
+                    icon="el-icon-download"
+                    @click="onHandleExportAttendanceMachine(queryParams)"
+                >
+                    导出
+                </el-button>
+
+                <el-button
+                    plain
+                    size="mini"
+                    type="primary"
+                    icon="el-icon-plus"
+                    v-hasPermi="['attendance:machine:add']"
+                    @click="onHandleAddCardReplacementApply(1, null)"
+                >
+                    新增
+                </el-button>
+            </template>
+
+            <template slot="handle" slot-scope="{ data }">
+                <!-- <el-button
+                    plain
+                    size="mini"
+                    type="warning"
+                    icon="el-icon-edit"
+                    v-hasPermi="['attendance:machine:unbind']"
+                    @click="onHandleUnBindAttendanceMachine(data)"
+                >
+                    解绑
+                </el-button> -->
+                <el-button
+                    size="mini"
+                    type="danger"
+                    icon="el-icon-delete"
+                    v-hasPermi="['attendance:machine:delete']"
+                    @click="onHandleDeleteSubBaseInfo(data)"
+                >
+                    删除
+                </el-button>
+            </template>
+        </TableModel>
+
+        <DialogModel
+            :dialogConfig="dialogConfig"
+            @closeDialogOuter="handleCloseDialogOuter"
+        >
+            <template slot="outerContent">
+                <template v-if="dialogConfig.outerTitle === '选择补卡工程'">
+                    <el-form label-width="100px">
+                        <el-form-item label="补卡工程">
+                            <el-select
+                                style="width: 100%"
+                                placeholder="请选择"
+                                v-model="selectProjectId"
+                                @change="handleSelectProject"
+                            >
+                                <el-option
+                                    :key="item.value"
+                                    :label="item.label"
+                                    :value="item.value"
+                                    v-for="item in lotProjectOptions"
+                                />
+                            </el-select>
+                        </el-form-item>
+                    </el-form>
+                    <el-row class="dialog-footer-btn">
+                        <el-button
+                            size="medium"
+                            type="primary"
+                            @click="onHandleNextStep"
+                        >
+                            下一步
+                        </el-button>
+                    </el-row>
+                </template>
+
+                <template v-if="dialogConfig.outerTitle === '新增补卡申请'">
+                    <AddApplyForm
+                        ref="addApplyFormRef"
+                        :selectProjectId="selectProjectId"
+                        :selectProjectName="selectProjectName"
+                    />
+
+                    <el-row class="dialog-footer-btn">
+                        <el-button
+                            size="medium"
+                            @click="handleCloseDialogOuter"
+                        >
+                            取消
+                        </el-button>
+                        <el-button
+                            size="medium"
+                            type="primary"
+                            @click="onHandleConfirmFinish"
+                        >
+                            确定
+                        </el-button>
+                    </el-row>
+                </template>
+            </template>
+        </DialogModel>
     </div>
 </template>
 
 <script>
-export default {}
-</script>
+import TableModel from '@/components/TableModel'
+import DialogModel from '@/components/DialogModel'
 
-<style></style>
+import AddApplyForm from './add-apply-form.vue'
+import { formLabel, columnsList, dialogConfig } from './config'
+import {
+    deleteAttendanceMachineAPI,
+    getCardReplacementApplyListAPI,
+} from '@/api/construction-person/attendance-manage/card-replacement-apply'
+
+import { getLotProjectSelectListCommonFun } from '@/utils/getCommonData'
+export default {
+    name: 'CardReplacementApply',
+    components: {
+        TableModel,
+        DialogModel,
+
+        AddApplyForm,
+    },
+
+    data() {
+        return {
+            formLabel,
+            columnsList,
+            dialogConfig,
+            editFormData: {}, // 修改时回显的数据
+            getCardReplacementApplyListAPI,
+
+            lotProjectOptions: [],
+            selectProjectId: '',
+            selectProjectName: '',
+        }
+    },
+    methods: {
+        // 导出按钮
+        onHandleExportAttendanceMachine(queryParams) {
+            this.download(
+                '/bmw/pmAttDevice/export',
+                {
+                    ...queryParams,
+                },
+                `考勤机列表.xlsx`,
+            )
+        },
+
+        // 新增或修改
+        onHandleAddOrBindAttendanceMachine(type, data) {
+            this.dialogConfig.outerTitle =
+                type === 1 ? '新增考勤机' : '绑定考勤机'
+
+            if (type === 2) {
+                const { proId, deviceCode, deviceName } = data
+
+                this.editFormData = {
+                    isUpdate: true,
+                    proId,
+                    deviceCode,
+                    deviceName,
+                }
+            } else {
+                this.editFormData = {}
+            }
+            this.dialogConfig.outerVisible = true
+        },
+
+        // 新增补卡申请
+        onHandleAddCardReplacementApply(type, data) {
+            this.dialogConfig.outerTitle = '选择补卡工程'
+            this.dialogConfig.outerWidth = '30%'
+            this.dialogConfig.minHeight = ''
+            this.dialogConfig.maxHeight = ''
+            this.dialogConfig.outerVisible = true
+        },
+
+        // 删除
+        onHandleDeleteSubBaseInfo(data) {
+            this.$confirm('确定删除该考勤机吗？', '温馨提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning',
+            })
+                .then(async () => {
+                    const res = await deleteAttendanceMachineAPI({
+                        deviceCode: data.deviceCode,
+                    })
+                    if (res.code === 200) {
+                        this.$modal.msgSuccess('删除成功')
+                        this.$refs.attendanceMachineTableRef.getTableList() // 更新列表
+                    }
+                })
+                .catch(() => {
+                    // console.log('取消')
+                })
+        },
+
+        // 确定按钮
+        onHandleConfirm() {
+            console.log('确定')
+        },
+
+        // 最终的确定按钮
+        async onHandleConfirmFinish() {
+            this.$refs.addApplyFormRef.onHandleConfirmFinishFun()
+            // try {
+            //     await
+            //     this.handleCloseDialogOuter()
+            //     // this.$refs.attendanceMachineTableRef.getTableList()
+            // } catch (error) {
+            //     // console.log('表单提交失败', error)
+            // }
+        },
+
+        // 关闭弹框
+        handleCloseDialogOuter() {
+            this.dialogConfig.outerVisible = false
+        },
+
+        // 下一步
+        onHandleNextStep() {
+            if (!this.selectProjectId) {
+                this.$modal.msgError('请选择补卡工程')
+                return
+            }
+
+            this.dialogConfig.outerTitle = '新增补卡申请'
+            this.dialogConfig.outerWidth = '80%'
+            this.dialogConfig.minHeight = '80vh'
+            this.dialogConfig.maxHeight = '80h'
+            this.dialogConfig.outerVisible = true
+        },
+
+        // 选择补卡工程
+        handleSelectProject() {
+            this.selectProjectName = this.lotProjectOptions.find(
+                (item) => item.value === this.selectProjectId,
+            ).label
+        },
+    },
+
+    async created() {
+        const lot = await getLotProjectSelectListCommonFun()
+        this.lotProjectOptions = lot.map((item) => ({
+            value: item.id,
+            label: item.proName,
+        }))
+    },
+}
+</script>
diff --git a/src/views/construction-person/attendance-manage/card-replacement-apply/select-person-and-date.vue b/src/views/construction-person/attendance-manage/card-replacement-apply/select-person-and-date.vue
new file mode 100644
index 0000000..9f5a034
--- /dev/null
+++ b/src/views/construction-person/attendance-manage/card-replacement-apply/select-person-and-date.vue
@@ -0,0 +1,303 @@
+<template>
+    <!-- 选择补卡人员及补卡日期页面 -->
+    <div style="width: 100%">
+        <el-form :model="queryPersonForm" :inline="true" size="mini">
+            <el-form-item prop="reason">
+                <el-select
+                    style="width: 100%"
+                    placeholder="请选择人员"
+                    @change="onChangePerson"
+                    v-model="queryPersonForm.selectPersonId"
+                >
+                    <el-option
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                        v-for="item in personOptions"
+                    />
+                </el-select>
+            </el-form-item>
+
+            <el-form-item prop="reason">
+                <el-date-picker
+                    type="daterange"
+                    style="width: 240px"
+                    range-separator="至"
+                    value-format="yyyy-MM-dd"
+                    start-placeholder="开始日期"
+                    end-placeholder="结束日期"
+                    v-model="queryPersonForm.time"
+                />
+            </el-form-item>
+
+            <el-form-item prop="reason">
+                <el-button
+                    type="primary"
+                    icon="el-icon-search"
+                    @click="handleQuery"
+                >
+                    查询
+                </el-button>
+                <el-button
+                    plain
+                    type="warning"
+                    icon="el-icon-refresh"
+                    @click="resetQuery"
+                >
+                    重置
+                </el-button>
+            </el-form-item>
+        </el-form>
+
+        <div v-if="idNumber">
+            <span>
+                {{ name }}
+            </span>
+            <span> ({{ idNumber }}) </span>
+        </div>
+
+        <!-- 补卡日历 -->
+        <div class="date-ist" v-if="cardReplacementDateList.length > 0">
+            <div
+                :key="item.currentDate"
+                v-for="(item, index) in cardReplacementDateList"
+                style="
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: center;
+                    align-items: center;
+                    width: 100%;
+                "
+            >
+                <span
+                    style="
+                        padding: 4px 0;
+                        font-size: 16px;
+                        font-weight: bold;
+                        font-family: 'PingFang SC';
+                    "
+                >
+                    {{ item.month }}月
+                </span>
+                <div
+                    class="item"
+                    :ref="`item${index}`"
+                    :style="{
+                        height: initHeight + 'px',
+                        backgroundColor: item.inRange
+                            ? item.isActive == 1
+                                ? '#19be6b'
+                                : '#f56c6c'
+                            : '#999',
+                    }"
+                    :class="{
+                        'item-active': item.isChecked,
+                    }"
+                >
+                    {{ item.date }}
+
+                    <el-checkbox
+                        class="check-box-item"
+                        v-model="item.isChecked"
+                        v-if="item.isActive == 0 && item.inRange"
+                    />
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import {
+    getCardReplacementPersonListAPI,
+    getCardReplacementPersonCheckRecordAPI,
+} from '@/api/construction-person/attendance-manage/card-replacement-apply'
+export default {
+    name: 'SelectPersonAndDate',
+    props: {
+        selectProjectId: {
+            type: [Number, String],
+            default: () => '',
+        },
+        selectProjectName: {
+            type: String,
+            default: () => '',
+        },
+    },
+    components: {
+        // AttendanceCalendar,
+    },
+    data() {
+        return {
+            queryPersonForm: {
+                selectPersonId: '',
+                time: [
+                    new Date().toISOString().split('T')[0],
+                    new Date().toISOString().split('T')[0],
+                ],
+            },
+            personOptions: [],
+            name: '',
+            idNumber: '',
+            initHeight: 0,
+            // 补卡信息列表
+            dateList: [],
+            // 补卡日期列表
+            cardReplacementDateList: [],
+        }
+    },
+    methods: {
+        handleCloseDialogOuter() {
+            this.dialogConfig.outerVisible = false
+        },
+
+        // 获取补卡人员列表
+        async getCardReplacementPersonList() {
+            const { data: res } = await getCardReplacementPersonListAPI({
+                proId: this.selectProjectId,
+            })
+            this.personOptions = res.map((item) => ({
+                ...item,
+                value: item.id,
+                label: item.name,
+            }))
+        },
+        // 查询
+        handleQuery() {
+            this.getCardReplacementPersonCheckRecord()
+        },
+
+        resetQuery() {
+            this.queryPersonForm.selectPersonId = ''
+            this.queryPersonForm.time = [
+                new Date().toISOString().split('T')[0],
+                new Date().toISOString().split('T')[0],
+            ]
+            this.getCardReplacementPersonCheckRecord()
+        },
+
+        // 处理数据
+        onPersonSubmit() {
+            const tempList = this.cardReplacementDateList.filter(
+                (item) => item.isChecked,
+            )
+            if (tempList.length > 0) {
+                const repairDate = tempList.map((item) => item.currentDate)
+                this.dateList[0].repairDate = repairDate.join(',')
+                this.dateList[0].repairDay = repairDate.length
+
+                this.$emit('onPersonSubmit', this.dateList)
+            }
+        },
+
+        // 获取考勤记录
+        async getCardReplacementPersonCheckRecord() {
+            const workerId = this.personOptions.find(
+                (item) => item.value === this.queryPersonForm.selectPersonId,
+            ).id
+            const { data: res } = await getCardReplacementPersonCheckRecordAPI({
+                workerId,
+                proId: this.selectProjectId,
+                startTime: this.queryPersonForm.time[0],
+                endTime: this.queryPersonForm.time[1],
+            })
+
+            const tempList = []
+            if (Object.keys(res).length > 0) {
+                for (const key in res) {
+                    tempList.push({
+                        month: key.split('-')[1],
+                        date: key.split('-')[2],
+                        inRange: res[key].inRange,
+                        isActive: res[key].isActive,
+                        currentDate: key,
+                        isChecked: false,
+                    })
+                }
+            }
+
+            this.cardReplacementDateList = tempList.sort((a, b) => {
+                return a.date - b.date
+            })
+
+            this.$nextTick(() => {
+                this.getInitHeight()
+            })
+        },
+
+        // 当人员选择发生变化时
+        onChangePerson(val) {
+            if (!val) {
+                this.dateList = []
+                return
+            }
+
+            const personInfo = this.personOptions.find(
+                (item) => item.value === val,
+            )
+
+            console.log(personInfo, 'personInfo')
+
+            const { name, idNumber, phone, teamName, id, teamId } = personInfo
+
+            this.dateList = []
+            this.dateList.push({
+                teamName, // 补卡人员姓名
+                name, // 补卡人员所属班组
+                phone, // 补卡人员联系方式
+                idNumber, // 补卡人员身份证号
+                repairDay: '', // 补卡天数
+                repairDate: '', // 补卡日期
+                workerId: id, // 补卡人员id
+                teamId, // 补卡人员所属班组id
+                proName: this.selectProjectName, // 工程名称
+                proId: this.selectProjectId, // 工程id
+            })
+        },
+
+        getInitHeight() {
+            const item = this.$refs[`item0`][0]
+            if (item) {
+                this.initHeight = item.offsetWidth
+            }
+        },
+    },
+
+    created() {
+        this.getCardReplacementPersonList()
+    },
+}
+</script>
+
+<style scoped lang="scss">
+.date-ist {
+    width: 80%;
+    margin: 0 auto;
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: 10px;
+
+    .item {
+        width: 100%;
+        position: relative;
+        padding: 10px;
+        display: flex;
+        border-radius: 5px;
+        align-items: center;
+        border-radius: 6px;
+        justify-content: center;
+        color: #fff;
+        font-size: 18px;
+
+        .check-box-item {
+            position: absolute;
+            right: 6px;
+            top: 6px;
+        }
+    }
+
+    .item-active {
+        background-color: #b58bae !important;
+    }
+}
+</style>