@@ -0,0 +1,854 @@
< template >
< div class = "attendance-general-container" >
< el-card >
< template # header >
< div class = "card-header" >
< span class = "title" > 综合部考勤 < / span >
< div class = "header-right" >
< el-date-picker
v-model = "dateRange"
type = "month"
placeholder = "选择月份"
:default-time = "defaultTime"
:shortcuts = "dateShortcuts"
@change ="handleDateChange"
style = "width: 200px; margin-right: 8px;"
/ >
< el-input
v-model = "searchKeyword"
placeholder = "请输入姓名搜索"
clearable
@input ="handleSearch"
style = "width: 200px; margin-right: 8px;"
>
< template # prefix >
< el-icon > < Search / > < / el-icon >
< / template >
< / el-input >
< / div >
< / div >
< / template >
< el-table
:data = "attendanceList"
style = "width: 100%"
height = "calc(100vh - 280px)"
border
stripe
: header -cell -style = " {
background : ' # f5f7fa ' ,
color : ' # 606266 ' ,
fontWeight : ' bold ' ,
textAlign : ' center ' ,
padding : ' 12px 0 '
} "
: cell -style = " {
padding : ' 8px 0 '
} "
>
< el-table-column label = "头像" width = "80" align = "center" fixed = "left" >
< template # default = "scope" >
< el-avatar :size = "40" :src = "scope.row.avatar" / >
< / template >
< / el-table-column >
< el-table-column prop = "name" label = "姓名" width = "100" show -overflow -tooltip fixed = "left" / >
< el-table-column prop = "workDays" label = "工作天数" width = "100" align = "center" / >
< el-table-column prop = "status" label = "状态" width = "100" align = "center" >
< template # default = "scope" >
< el-tag : type = "scope.row.status === 0 ? 'success' : 'warning'" size = "small" >
{ { scope . row . status === 0 ? '正式' : '试用' } }
< / el-tag >
< / template >
< / el-table-column >
< el-table-column prop = "personalLeave" label = "事假" width = "100" align = "center" show -overflow -tooltip / >
< el-table-column prop = "sickLeave" label = "病假" width = "100" align = "center" show -overflow -tooltip / >
< el-table-column prop = "maternityLeave" label = "产假" width = "100" align = "center" show -overflow -tooltip / >
< el-table-column prop = "paternityLeave" label = "陪产假" width = "100" align = "center" show -overflow -tooltip / >
< el-table-column prop = "marriageLeave" label = "婚假" width = "100" align = "center" show -overflow -tooltip / >
< el-table-column prop = "bereavementLeave" label = "丧假" width = "100" align = "center" show -overflow -tooltip / >
< el-table-column prop = "annualLeave" label = "年休假" width = "100" align = "center" show -overflow -tooltip / >
< el-table-column prop = "managementAnnualLeave" label = "年休假(管理岗)" width = "120" align = "center" show -overflow -tooltip / >
< el-table-column prop = "compensatoryLeave" label = "调休假" width = "100" align = "center" show -overflow -tooltip / >
< el-table-column prop = "early" label = "早退次数" width = "100" align = "center" show -overflow -tooltip / >
< el-table-column prop = "late" label = "迟到次数" width = "100" align = "center" show -overflow -tooltip / >
< el-table-column prop = "seriousLate" label = "严重迟到" width = "100" align = "center" show -overflow -tooltip / >
< el-table-column prop = "absenteeism" label = "旷工次数" width = "100" align = "center" show -overflow -tooltip / >
< el-table-column prop = "missedCount" label = "缺卡次数" width = "100" align = "center" show -overflow -tooltip / >
< el-table-column prop = "absenceCount" label = "缺勤次数" width = "100" align = "center" show -overflow -tooltip / >
< el-table-column prop = "missingLogCount" label = "未提交日志" width = "100" align = "center" show -overflow -tooltip / >
< el-table-column prop = "workdayOvertime" label = "工作日加班" width = "120" align = "center" show -overflow -tooltip / >
< el-table-column prop = "restdayOvertime" label = "休息日加班" width = "120" align = "center" show -overflow -tooltip / >
< el-table-column prop = "holidayOvertime" label = "节假日加班" width = "120" align = "center" show -overflow -tooltip / >
< el-table-column prop = "annualPerformance" label = "年度绩效" width = "100" align = "center" show -overflow -tooltip / >
< el-table-column prop = "monthlyPerformance" label = "月度绩效" width = "100" align = "center" show -overflow -tooltip / >
< el-table-column prop = "penaltyAmount" label = "违纪扣奖" width = "100" align = "center" show -overflow -tooltip / >
< el-table-column prop = "flag" label = "审批状态" width = "100" align = "center" >
< template # default = "scope" >
< el-tag :type = "getFlagTagType(scope.row.flag)" size = "small" >
{ { getFlagLabel ( scope . row . flag ) } }
< / el-tag >
< / template >
< / el-table-column >
< el-table-column label = "操作" width = "200" fixed = "right" align = "center" >
< template # default = "scope" >
< el-button
type = "primary"
link
size = "small"
@click ="handleViewAbnormal(scope.row)"
>
异常考勤
< / el-button >
< el-button
type = "success"
link
size = "small"
@click ="handleApprove(scope.row)"
v-if = "scope.row.flag === 0"
>
审批
< / el-button >
< / template >
< / el-table-column >
< / el-table >
< / el-card >
<!-- 修改对话框 -- >
< el-dialog
v-model = "editDialogVisible"
title = "修改考勤"
width = "800px"
>
< el-form
:model = "editForm"
:rules = "editRules"
ref = "editFormRef"
label -width = " 120px "
>
< el-row :gutter = "20" >
< el-col :span = "12" >
< el-form-item label = "事假" prop = "personalLeave" >
< el-input-number v-model = "editForm.personalLeave" :min="0" :precision="1" :step="0.5" / >
< / el-form-item >
< / el-col >
< el-col :span = "12" >
< el-form-item label = "病假" prop = "sickLeave" >
< el-input-number v-model = "editForm.sickLeave" :min="0" :precision="1" :step="0.5" / >
< / el-form-item >
< / el-col >
< el-col :span = "12" >
< el-form-item label = "产假" prop = "maternityLeave" >
< el-input-number v-model = "editForm.maternityLeave" :min="0" :precision="1" :step="0.5" / >
< / el-form-item >
< / el-col >
< el-col :span = "12" >
< el-form-item label = "陪产假" prop = "paternityLeave" >
< el-input-number v-model = "editForm.paternityLeave" :min="0" :precision="1" :step="0.5" / >
< / el-form-item >
< / el-col >
< el-col :span = "12" >
< el-form-item label = "婚假" prop = "marriageLeave" >
< el-input-number v-model = "editForm.marriageLeave" :min="0" :precision="1" :step="0.5" / >
< / el-form-item >
< / el-col >
< el-col :span = "12" >
< el-form-item label = "丧假" prop = "bereavementLeave" >
< el-input-number v-model = "editForm.bereavementLeave" :min="0" :precision="1" :step="0.5" / >
< / el-form-item >
< / el-col >
< el-col :span = "12" >
< el-form-item label = "年休假" prop = "annualLeave" >
< el-input-number v-model = "editForm.annualLeave" :min="0" :precision="1" :step="0.5" / >
< / el-form-item >
< / el-col >
< el-col :span = "12" >
< el-form-item label = "年休假(管理岗)" prop = "managementAnnualLeave" >
< el-input-number v-model = "editForm.managementAnnualLeave" :min="0" :precision="1" :step="0.5" / >
< / el-form-item >
< / el-col >
< el-col :span = "12" >
< el-form-item label = "调休假" prop = "compensatoryLeave" >
< el-input-number v-model = "editForm.compensatoryLeave" :min="0" :precision="1" :step="0.5" / >
< / el-form-item >
< / el-col >
< el-col :span = "12" >
< el-form-item label = "早退次数" prop = "early" >
< el-input-number v-model = "editForm.early" :min="0" :precision="0" :step="1" / >
< / el-form-item >
< / el-col >
< el-col :span = "12" >
< el-form-item label = "迟到次数" prop = "late" >
< el-input-number v-model = "editForm.late" :min="0" :precision="0" :step="1" / >
< / el-form-item >
< / el-col >
< el-col :span = "12" >
< el-form-item label = "严重迟到" prop = "seriousLate" >
< el-input-number v-model = "editForm.seriousLate" :min="0" :precision="0" :step="1" / >
< / el-form-item >
< / el-col >
< el-col :span = "12" >
< el-form-item label = "旷工次数" prop = "absenteeism" >
< el-input-number v-model = "editForm.absenteeism" :min="0" :precision="0" :step="1" / >
< / el-form-item >
< / el-col >
< el-col :span = "12" >
< el-form-item label = "缺卡次数" prop = "missedCount" >
< el-input-number v-model = "editForm.missedCount" :min="0" :precision="0" :step="1" / >
< / el-form-item >
< / el-col >
< el-col :span = "12" >
< el-form-item label = "缺勤次数" prop = "absenceCount" >
< el-input-number v-model = "editForm.absenceCount" :min="0" :precision="0" :step="1" / >
< / el-form-item >
< / el-col >
< el-col :span = "12" >
< el-form-item label = "未提交日志" prop = "missingLogCount" >
< el-input-number v-model = "editForm.missingLogCount" :min="0" :precision="0" :step="1" / >
< / el-form-item >
< / el-col >
< el-col :span = "12" >
< el-form-item label = "工作日加班" prop = "workdayOvertime" >
< el-input-number v-model = "editForm.workdayOvertime" :min="0" :precision="1" :step="0.5" / >
< / el-form-item >
< / el-col >
< el-col :span = "12" >
< el-form-item label = "休息日加班" prop = "restdayOvertime" >
< el-input-number v-model = "editForm.restdayOvertime" :min="0" :precision="1" :step="0.5" / >
< / el-form-item >
< / el-col >
< el-col :span = "12" >
< el-form-item label = "节假日加班" prop = "holidayOvertime" >
< el-input-number v-model = "editForm.holidayOvertime" :min="0" :precision="1" :step="0.5" / >
< / el-form-item >
< / el-col >
< el-col :span = "12" >
< el-form-item label = "年度绩效" prop = "annualPerformance" >
< el-input-number v-model = "editForm.annualPerformance" :min="0" :max="100" :precision="1" :step="0.5" / >
< / el-form-item >
< / el-col >
< el-col :span = "12" >
< el-form-item label = "月度绩效" prop = "monthlyPerformance" >
< el-input-number v-model = "editForm.monthlyPerformance" :min="0" :max="100" :precision="1" :step="0.5" / >
< / el-form-item >
< / el-col >
< el-col :span = "12" >
< el-form-item label = "违纪扣奖" prop = "penaltyAmount" >
< el-input-number v-model = "editForm.penaltyAmount" :min="0" :precision="2" :step="100" / >
< / el-form-item >
< / el-col >
< / el-row >
< / el-form >
< template # footer >
< span class = "dialog-footer" >
< el-button @click ="editDialogVisible = false" > 取消 < / el -button >
< el-button type = "primary" @click ="handleEditSubmit" > 确定 < / el -button >
< / span >
< / template >
< / el-dialog >
<!-- 异常考勤详情对话框 -- >
< el-dialog
v-model = "abnormalDialogVisible"
title = "异常考勤详情"
width = "800px"
>
< div v-for = "(records, date) in abnormalList" :key="date" class="abnormal-date-group" >
< div class = "date-header" > { { date } } < / div >
< el-table
:data = "records"
style = "width: 100%"
border
stripe
>
< el-table-column prop = "type" label = "异常类型" width = "120" >
< template # default = "scope" >
< el-tag :type = "getAbnormalTypeTag(scope.row.type)" >
{ { getAbnormalTypeLabel ( scope . row . type ) } }
< / el-tag >
< / template >
< / el-table-column >
< el-table-column label = "异常详情" min -width = " 200 " >
< template # default = "scope" >
< template v-if = "scope.row.type === 'abnormal'" >
< div > 考勤类型 ： { { scope . row . checkType === 'OnDuty' ? '上班' : '下班' } } < / div >
< div class = "result-row" >
考勤结果 ：
< el-select
v-model = "scope.row.realResult"
size = "small"
style = "width: 100px; margin: 0 8px;"
@change ="handleUpdateAbnormal(scope.row)"
>
< el-option label = "正常" value = "Normal" / >
< el-option label = "早退" value = "Early" / >
< el-option label = "迟到" value = "Late" / >
< el-option label = "严重迟到" value = "SeriousLate" / >
< el-option label = "旷工迟到" value = "Absenteeism" / >
< el-option label = "未打卡" value = "NotSigned" / >
< / el-select >
< / div >
< / template >
< template v-else-if = "scope.row.type === 'checkin'" >
< div > 缺卡次数 ： { { scope . row . missedCount } } 次 < / div >
< / template >
< template v-else-if = "scope.row.type === 'report'" >
< div > 日志状态 ： { { scope . row . reportCount === 0 ? '未提交' : '已提交' } } < / div >
< / template >
< / template >
< / el-table-column >
< el-table-column label = "修改记录" min -width = " 300 " >
< template # default = "scope" >
< div v-if = "scope.row.modifications && scope.row.modifications.length > 0" >
< div v-for = "(mod, index) in scope.row.modifications" :key="index" class="modification-item" >
< div > 修改人 ： { { mod . modifiedBy } } < / div >
< div > 修改时间 ： { { mod . modifiedAt } } < / div >
< div > 修改前 ： { { mod . originalValue } } < / div >
< div > 修改后 ： { { mod . modifiedValue } } < / div >
< div v-if = "mod.isFinally" class="finally-tag" > 最终修改 < / div >
< / div >
< / div >
< span v-else > 无修改记录 < / span >
< / template >
< / el -table -column >
< / el-table >
< / div >
< / el-dialog >
< / div >
< / template >
< script setup >
import { ref , onMounted } from "vue" ;
import { ElMessage , ElMessageBox } from "element-plus" ;
import { Search } from '@element-plus/icons-vue' ;
import dayjs from 'dayjs' ;
import {
getGeneralAttendanceList ,
updateAttendanceDetail ,
approveAttendance ,
getAbnormalAttendanceDetail ,
updateAbnormalAttendance ,
} from "../../../../api/modules/index" ;
// 权限检查
const userInfo = JSON . parse ( sessionStorage . getItem ( "userInfo" ) || "{}" ) ;
// if (userInfo.role !== 2) {
// ElMessage.error("您没有权限访问此页面");
// window.history.back();
// }
// 列表数据
const attendanceList = ref ( [ ] ) ;
const originalList = ref ( [ ] ) ;
const searchKeyword = ref ( '' ) ;
// 日期范围
const dateRange = ref ( null ) ;
const defaultTime = new Date ( 2000 , 1 , 1 , 0 , 0 , 0 ) ;
// 日期快捷选项
const dateShortcuts = [
{
text : '上个月' ,
value : ( ) => {
const now = new Date ( ) ;
return new Date ( now . getFullYear ( ) , now . getMonth ( ) - 1 , 1 ) ;
} ,
} ,
{
text : '本月' ,
value : ( ) => {
const now = new Date ( ) ;
return new Date ( now . getFullYear ( ) , now . getMonth ( ) , 1 ) ;
} ,
} ,
{
text : '下个月' ,
value : ( ) => {
const now = new Date ( ) ;
return new Date ( now . getFullYear ( ) , now . getMonth ( ) + 1 , 1 ) ;
} ,
} ,
] ;
// 设置默认日期范围（上个月）
const setDefaultDateRange = ( ) => {
const now = new Date ( ) ;
dateRange . value = new Date ( now . getFullYear ( ) , now . getMonth ( ) - 1 , 1 ) ;
} ;
// 处理日期变化
const handleDateChange = ( val ) => {
if ( val ) {
fetchList ( ) ;
}
} ;
// 修改对话框
const editDialogVisible = ref ( false ) ;
const editFormRef = ref ( null ) ;
const editForm = ref ( {
id : '' ,
personalLeave : 0 ,
sickLeave : 0 ,
maternityLeave : 0 ,
paternityLeave : 0 ,
marriageLeave : 0 ,
bereavementLeave : 0 ,
annualLeave : 0 ,
managementAnnualLeave : 0 ,
compensatoryLeave : 0 ,
early : 0 ,
late : 0 ,
seriousLate : 0 ,
absenteeism : 0 ,
missedCount : 0 ,
absenceCount : 0 ,
missingLogCount : 0 ,
workdayOvertime : 0 ,
restdayOvertime : 0 ,
holidayOvertime : 0 ,
annualPerformance : 0 ,
monthlyPerformance : 0 ,
penaltyAmount : 0
} ) ;
// 表单校验规则
const editRules = {
personalLeave : [ { type : 'number' , message : '请输入数字' } ] ,
sickLeave : [ { type : 'number' , message : '请输入数字' } ] ,
maternityLeave : [ { type : 'number' , message : '请输入数字' } ] ,
paternityLeave : [ { type : 'number' , message : '请输入数字' } ] ,
marriageLeave : [ { type : 'number' , message : '请输入数字' } ] ,
bereavementLeave : [ { type : 'number' , message : '请输入数字' } ] ,
annualLeave : [ { type : 'number' , message : '请输入数字' } ] ,
managementAnnualLeave : [ { type : 'number' , message : '请输入数字' } ] ,
compensatoryLeave : [ { type : 'number' , message : '请输入数字' } ] ,
early : [ { type : 'number' , message : '请输入数字' } ] ,
late : [ { type : 'number' , message : '请输入数字' } ] ,
seriousLate : [ { type : 'number' , message : '请输入数字' } ] ,
absenteeism : [ { type : 'number' , message : '请输入数字' } ] ,
missedCount : [ { type : 'number' , message : '请输入数字' } ] ,
absenceCount : [ { type : 'number' , message : '请输入数字' } ] ,
missingLogCount : [ { type : 'number' , message : '请输入数字' } ] ,
workdayOvertime : [ { type : 'number' , message : '请输入数字' } ] ,
restdayOvertime : [ { type : 'number' , message : '请输入数字' } ] ,
holidayOvertime : [ { type : 'number' , message : '请输入数字' } ] ,
annualPerformance : [ { type : 'number' , message : '请输入数字' } ] ,
monthlyPerformance : [ { type : 'number' , message : '请输入数字' } ] ,
penaltyAmount : [ { type : 'number' , message : '请输入数字' } ]
} ;
// 获取列表数据
const fetchList = async ( ) => {
try {
const params = { } ;
if ( dateRange . value ) {
params . year = dateRange . value . getFullYear ( ) ;
params . month = dateRange . value . getMonth ( ) + 1 ; // 月份从0开始，需要+1
}
const res = await getGeneralAttendanceList ( params ) ;
if ( res . errcode === 0 ) {
originalList . value = res . result ;
attendanceList . value = res . result ;
}
} catch ( error ) {
ElMessage . error ( "获取列表失败" ) ;
}
} ;
// 搜索
const handleSearch = ( ) => {
if ( ! searchKeyword . value ) {
attendanceList . value = originalList . value ;
return ;
}
attendanceList . value = originalList . value . filter ( item =>
item . name . toLowerCase ( ) . includes ( searchKeyword . value . toLowerCase ( ) )
) ;
} ;
// 获取类型标签
const getTypeLabel = ( type ) => {
const typeMap = {
1 : '正常' ,
2 : '迟到' ,
3 : '早退' ,
4 : '缺勤' ,
5 : '请假'
} ;
return typeMap [ type ] || '未知' ;
} ;
// 获取类型标签样式
const getTypeTagType = ( type ) => {
const typeMap = {
1 : 'success' ,
2 : 'warning' ,
3 : 'warning' ,
4 : 'danger' ,
5 : 'info'
} ;
return typeMap [ type ] || '' ;
} ;
// 获取状态标签
const getStatusLabel = ( status ) => {
const statusMap = {
0 : '待审批' ,
1 : '已通过' ,
2 : '已驳回'
} ;
return statusMap [ status ] || '未知' ;
} ;
// 获取状态标签样式
const getStatusTagType = ( status ) => {
const statusMap = {
0 : 'warning' ,
1 : 'success' ,
2 : 'danger'
} ;
return statusMap [ status ] || '' ;
} ;
// 获取审批状态标签
const getFlagLabel = ( flag ) => {
const flagMap = {
0 : '待审批' ,
1 : '已通过' ,
2 : '已驳回'
} ;
return flagMap [ flag ] || '未知' ;
} ;
// 获取审批状态标签样式
const getFlagTagType = ( flag ) => {
const flagMap = {
0 : 'warning' ,
1 : 'success' ,
2 : 'danger'
} ;
return flagMap [ flag ] || '' ;
} ;
// 修改
const handleEdit = ( row ) => {
editForm . value = {
id : row . id ,
personalLeave : row . personalLeave || 0 ,
sickLeave : row . sickLeave || 0 ,
maternityLeave : row . maternityLeave || 0 ,
paternityLeave : row . paternityLeave || 0 ,
marriageLeave : row . marriageLeave || 0 ,
bereavementLeave : row . bereavementLeave || 0 ,
annualLeave : row . annualLeave || 0 ,
managementAnnualLeave : row . managementAnnualLeave || 0 ,
compensatoryLeave : row . compensatoryLeave || 0 ,
early : row . early || 0 ,
late : row . late || 0 ,
seriousLate : row . seriousLate || 0 ,
absenteeism : row . absenteeism || 0 ,
missedCount : row . missedCount || 0 ,
absenceCount : row . absenceCount || 0 ,
missingLogCount : row . missingLogCount || 0 ,
workdayOvertime : row . workdayOvertime || 0 ,
restdayOvertime : row . restdayOvertime || 0 ,
holidayOvertime : row . holidayOvertime || 0 ,
annualPerformance : row . annualPerformance || 0 ,
monthlyPerformance : row . monthlyPerformance || 0 ,
penaltyAmount : row . penaltyAmount || 0
} ;
editDialogVisible . value = true ;
} ;
// 提交修改
const handleEditSubmit = async ( ) => {
if ( ! editFormRef . value ) return ;
await editFormRef . value . validate ( async ( valid ) => {
if ( valid ) {
try {
const res = await updateAttendanceDetail ( editForm . value ) ;
if ( res . errcode === 0 ) {
ElMessage . success ( "修改成功" ) ;
editDialogVisible . value = false ;
fetchList ( ) ;
}
} catch ( error ) {
ElMessage . error ( "修改失败" ) ;
}
}
} ) ;
} ;
// 审批
const handleApprove = ( row ) => {
ElMessageBox . confirm (
'确认审批通过该考勤记录？' ,
'提示' ,
{
confirmButtonText : '确定' ,
cancelButtonText : '取消' ,
type : 'warning' ,
}
) . then ( async ( ) => {
try {
const res = await approveAttendance ( [ row . id ] ) ;
if ( res . errcode === 0 ) {
ElMessage . success ( "审批成功" ) ;
fetchList ( ) ;
}
} catch ( error ) {
ElMessage . error ( "审批失败" ) ;
}
} ) . catch ( ( ) => {
ElMessage . info ( '已取消审批' ) ;
} ) ;
} ;
// 异常考勤对话框
const abnormalDialogVisible = ref ( false ) ;
const abnormalList = ref ( [ ] ) ;
// 获取异常类型标签
const getAbnormalTypeLabel = ( type ) => {
const typeMap = {
'abnormal' : '考勤异常' ,
'checkin' : '签到签退' ,
'report' : '日志异常'
} ;
return typeMap [ type ] || '未知' ;
} ;
// 获取异常类型标签样式
const getAbnormalTypeTag = ( type ) => {
const typeMap = {
'abnormal' : 'danger' ,
'checkin' : 'warning' ,
'report' : 'info'
} ;
return typeMap [ type ] || '' ;
} ;
// 获取异常结果标签
const getAbnormalResultLabel = ( result ) => {
const resultMap = {
'Normal' : '正常' ,
'Early' : '早退' ,
'Late' : '迟到' ,
'SeriousLate' : '严重迟到' ,
'Absenteeism' : '旷工迟到' ,
'NotSigned' : '未打卡'
} ;
return resultMap [ result ] || '未知' ;
} ;
// 获取异常结果标签样式
const getAbnormalResultTag = ( result ) => {
const resultMap = {
'Normal' : 'success' ,
'Early' : 'warning' ,
'Late' : 'warning' ,
'SeriousLate' : 'danger' ,
'Absenteeism' : 'danger' ,
'NotSigned' : 'danger'
} ;
return resultMap [ result ] || '' ;
} ;
// 查看异常考勤
const handleViewAbnormal = async ( row ) => {
try {
const year = dateRange . value . getFullYear ( ) ;
const month = dateRange . value . getMonth ( ) + 1 ;
const res = await getAbnormalAttendanceDetail ( row . userid , year , month ) ;
if ( res . errcode === 0 ) {
abnormalList . value = res . result ;
abnormalDialogVisible . value = true ;
} else {
ElMessage . error ( res . errmsg || '获取异常考勤失败' ) ;
}
} catch ( error ) {
ElMessage . error ( '获取异常考勤失败' ) ;
}
} ;
// 修改异常考勤
const handleUpdateAbnormal = async ( record ) => {
try {
const year = dateRange . value . getFullYear ( ) ;
const month = dateRange . value . getMonth ( ) + 1 ;
const data = {
id : record . id ,
userid : record . userid ,
year ,
month ,
data : {
realResult : record . realResult
}
} ;
const res = await updateAbnormalAttendance ( data ) ;
if ( res . errcode === 0 ) {
ElMessage . success ( "修改成功" ) ;
// 重新获取异常考勤数据
const detailRes = await getAbnormalAttendanceDetail ( record . userid , year , month ) ;
if ( detailRes . errcode === 0 ) {
abnormalList . value = detailRes . result ;
}
} else {
ElMessage . error ( res . errmsg || "修改失败" ) ;
}
} catch ( error ) {
ElMessage . error ( "修改失败" ) ;
}
} ;
// 页面加载时设置默认日期范围并获取数据
onMounted ( ( ) => {
setDefaultDateRange ( ) ;
fetchList ( ) ;
} ) ;
< / script >
< style lang = "scss" scoped >
. attendance - general - container {
height : calc ( 100 vh - 120 px ) ;
padding : 20 px ;
background - color : var ( -- el - bg - color - page ) ;
: deep ( . el - card ) {
height : 100 % ;
display : flex ;
flex - direction : column ;
border - radius : 8 px ;
box - shadow : var ( -- el - box - shadow - light ) ;
. el - card _ _body {
flex : 1 ;
overflow : hidden ;
padding : 0 ;
display : flex ;
flex - direction : column ;
}
}
: deep ( . el - table ) {
flex : 1 ;
. el - table _ _body - wrapper {
height : 100 % ;
}
. el - table _ _cell {
padding : 8 px 0 ;
}
. el - table _ _header {
th {
background - color : # f5f7fa ;
font - weight : bold ;
color : # 606266 ;
height : 48 px ;
padding : 12 px 0 ;
}
}
. el - table _ _row {
height : 56 px ;
}
. el - table _ _fixed - right {
height : 100 % ! important ;
box - shadow : - 2 px 0 8 px rgba ( 0 , 0 , 0 , 0.15 ) ;
}
. el - table _ _fixed {
height : 100 % ! important ;
box - shadow : 2 px 0 8 px rgba ( 0 , 0 , 0 , 0.15 ) ;
}
}
. card - header {
display : flex ;
justify - content : space - between ;
align - items : center ;
padding : 16 px 20 px ;
border - bottom : 1 px solid var ( -- el - border - color - light ) ;
background - color : var ( -- el - bg - color ) ;
. title {
font - size : 16 px ;
font - weight : 600 ;
color : var ( -- el - text - color - primary ) ;
}
. header - right {
display : flex ;
align - items : center ;
gap : 8 px ;
}
}
}
: deep ( . el - dialog _ _body ) {
padding : 20 px ;
}
: deep ( . el - dialog _ _header ) {
margin : 0 ;
padding : 20 px ;
border - bottom : 1 px solid var ( -- el - border - color - light ) ;
background - color : var ( -- el - bg - color ) ;
}
: deep ( . el - dialog _ _footer ) {
padding : 20 px ;
border - top : 1 px solid var ( -- el - border - color - light ) ;
background - color : var ( -- el - bg - color ) ;
}
: deep ( . el - dialog ) {
border - radius : 8 px ;
overflow : hidden ;
}
. abnormal - date - group {
margin - bottom : 20 px ;
. date - header {
font - size : 16 px ;
font - weight : bold ;
margin - bottom : 10 px ;
padding : 8 px ;
background - color : # f5f7fa ;
border - radius : 4 px ;
}
. modification - item {
padding : 8 px ;
border - bottom : 1 px solid # ebeef5 ;
position : relative ;
& : last - child {
border - bottom : none ;
}
. finally - tag {
position : absolute ;
top : 8 px ;
right : 8 px ;
background - color : # 67 c23a ;
color : white ;
padding : 2 px 6 px ;
border - radius : 4 px ;
font - size : 12 px ;
}
}
}
. result - row {
display : flex ;
align - items : center ;
margin - top : 4 px ;
}
< / style >
1147680382@qq.com