考勤功能-打卡功能补充

src/views/system/dashboard/components/util.js

@@ -155,7 +155,8 @@ export function buildComponent (name, column, preview, vm) {
                     hasMounted: false,
                     attendanceData: [],
                     scheduleShift: [],
-                    todaySchedule: []
+                    todaySchedule: [],
+                    tempSelectedValue: ''
                 }
             },
             computed: {
@@ -695,8 +696,7 @@ export function buildComponent (name, column, preview, vm) {
                     }
                 },
                 // 打卡处理逻辑
-                handleClock (event, currentTime, dayStart) {
-                    const attendance = event.extendedProps.attendance
+                handleClock (attendance) {
                     if (Object.keys(attendance).length === 0) {
                         this.$message.warning('考勤数据异常！')
                         return
@@ -761,6 +761,71 @@ export function buildComponent (name, column, preview, vm) {
                     const timeDifference = endTime - startTime
                     return timeDifference / (1000 * 60)
                 },
+                // 打卡处理逻辑
+                handleClockFromTab (todaySchedule) {
+                    const today = this.$common.getDateNow()
+                    // 当天仅有一个班次
+                    if (todaySchedule.length == 1) {
+                        const scheduleObj = this.scheduleData.filter(item => item.start == today && item.alias == todaySchedule[0])
+                        const attendance = scheduleObj.attendance
+                        this.handleClock(attendance)
+                    } else {
+                        let scheduleArr = []
+                        for (let i = 0; i < todaySchedule.length; i++) {
+                            const currentSchedule = todaySchedule[i]
+                            const filtered = this.scheduleData.filter(item => item.start === today && item.alias === currentSchedule)
+                            scheduleArr = scheduleArr.concat(filtered)
+                        }
+                        debugger
+                        const h = this.$createElement
+                        const self = this
+                        this.$msgbox({
+                            title: '选择打卡班次',
+                            message: h('div', null, [
+                                h('p', { style: 'margin-bottom: 15px;' }, '请选择一个班次打卡'),
+                                h('el-radio-group', {
+                                    model: {
+                                        value: self.tempSelectedValue,
+                                        callback: (value) => {
+                                            self.tempSelectedValue = value;
+                                        }
+                                    }
+                                }, scheduleArr.map(schedule =>
+                                    h('el-radio', {
+                                        props: {
+                                            label: schedule.alias,
+                                            key: schedule.alias
+                                        },
+                                        style: 'display: block; margin: 10px 0;'
+                                    }, schedule.alias))
+                                )
+                            ]),
+                            showCancelButton: true,
+                            confirmButtonText: '确定',
+                            cancelButtonText: '取消',
+                            beforeClose: (action, instance, done) => {
+                                if (action === 'confirm') {
+                                    if (!this.tempSelectedValue) {
+                                        this.$message.warning('请选择一个班次');
+                                        return false;
+                                    }
+                                    done();
+                                } else {
+                                    done();
+                                }
+                            }
+                        }).then(() => {
+                            const scheduleObj = this.scheduleData.find(item => 
+                                item.start === today && item.alias === this.tempSelectedValue
+                            );
+                            if (scheduleObj?.attendance) {
+                                this.handleClock(scheduleObj.attendance);
+                            }
+                        }).catch(() => {
+                            // 用户取消操作
+                        });
+                    }
+                },
                 showMySchedule () {
                     const scheduleConfig = {
                         height: '100%',
@@ -830,7 +895,7 @@ export function buildComponent (name, column, preview, vm) {
                                 // 绑定点击事件（通过闭包传递当前事件）
                                 button.onclick = (e) => {
                                     e.stopPropagation()
-                                    this.handleClock(event, now, dayStart)
+                                    this.handleClock(event.extendedProps.attendance)
                                 }
                                 const placeholder = content.querySelector('.button-placeholder')
                                 placeholder.replaceWith(button)

src/views/system/dashboard/templates/userInfoTab.vue

@@ -54,6 +54,14 @@
                                 @click="showMySchedule"
                                 style="display: flex; align-items: center; height: 20px;padding: 0 5px;line-height: 19px;margin-left: 4px;"
                             ><i class="el-icon-date"  style="margin-right: 3px;" ></i>我的排班</el-button>
+                            <el-button
+                                type="primary"
+                                size="mini"
+                                plain
+                                v-if="todaySchedule.length > 0 "
+                                @click="handleClockFromTab(todaySchedule)"
+                                style="display: flex; align-items: center; height: 20px;padding: 0 5px;line-height: 19px;margin-left: 4px;"
+                            >打卡</el-button>
                         </div>
                     </div>
                 </div>

src/views/system/homepage/components/banciDialog.vue

@@ -51,8 +51,13 @@
                 <div>
                     <strong class="label">出勤情况：</strong>
                     <div class="dakaBox">
-                        <div>上班: {{ banci.attendance.da_ka_shi_jian_1_ ? (banci.attendance.da_ka_shi_jian_1_ +' '+ (banci.attendance.zhuang_tai_1_=='正常' ? '正常' : banci.attendance.zhuang_tai_1_ + banci.attendance.chi_dao_shi_chang)) : '未打卡' }} </div>
-                        <div>下班：{{ banci.attendance.da_ka_shi_jian_2_ ? (banci.attendance.da_ka_shi_jian_2_ +' '+ banci.attendance.zhuang_tai_2_) : '未打卡' }}</div>
+                        <div>
+                            <span>上班:</span> <span v-html="getAttendanceInfo(banci.attendance.da_ka_shi_jian_1_, banci.attendance.zhuang_tai_1_, banci.attendance.chi_dao_shi_chang)"></span>
+                            <button v-if="banci && banci.attendance && banci.attendance.zhuang_tai_1_!= '正常'" class="clock-btn"> 补卡 </button>
+                        </div>
+                        <div><span>下班:</span> <span v-html="getAttendanceInfo(banci.attendance.da_ka_shi_jian_2_, banci.attendance.zhuang_tai_2_, 0)"></span> 
+                            <button v-if="banci && banci.attendance && banci.attendance.zhuang_tai_2_!= '正常'" class="clock-btn"> 补卡 </button>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -97,6 +102,16 @@ export default {
         openDialog () {
             this.dialogVisible = true
         },
+        getAttendanceInfo (shijian, zhuangTai, chiDaoShiChang) {
+            if (shijian) {
+                if (zhuangTai === '正常') {
+                    return shijian + ' 正常'
+                } else {
+                    return `${shijian} <span style="color: red;">${zhuangTai}${chiDaoShiChang}分钟</span>`
+                }
+            }
+            return '未打卡'
+        },
         closeDialog () {
             this.$emit('closeBanciDialog', 'banci')
         }
@@ -117,6 +132,19 @@ export default {
         flex-direction: column;
         justify-content: start;
         align-items: start;
+            .clock-btn {
+            border: none;
+            color: white;
+            background-color: #409EFF;
+            border-radius: 4px;
+            padding: 2px 8px;
+            cursor: pointer;
+            transition: opacity 0.3s;
+            margin-left: 10px;
+            &:hover {
+                opacity: 0.8;
+            }
+            }
 
     }
      .label {