添加考勤菜单
This commit is contained in:
1147680382@qq.com
@@ -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(100vh - 120px);
|
||||
padding: 20px;
|
||||
background-color: var(--el-bg-color-page);
|
||||
|
||||
:deep(.el-card) {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: 8px;
|
||||
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: 8px 0;
|
||||
}
|
||||
|
||||
.el-table__header {
|
||||
th {
|
||||
background-color: #f5f7fa;
|
||||
font-weight: bold;
|
||||
color: #606266;
|
||||
height: 48px;
|
||||
padding: 12px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.el-table__row {
|
||||
height: 56px;
|
||||
}
|
||||
|
||||
.el-table__fixed-right {
|
||||
height: 100% !important;
|
||||
box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.el-table__fixed {
|
||||
height: 100% !important;
|
||||
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid var(--el-border-color-light);
|
||||
background-color: var(--el-bg-color);
|
||||
|
||||
.title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
.header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-dialog__body) {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
:deep(.el-dialog__header) {
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid var(--el-border-color-light);
|
||||
background-color: var(--el-bg-color);
|
||||
}
|
||||
|
||||
:deep(.el-dialog__footer) {
|
||||
padding: 20px;
|
||||
border-top: 1px solid var(--el-border-color-light);
|
||||
background-color: var(--el-bg-color);
|
||||
}
|
||||
|
||||
:deep(.el-dialog) {
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.abnormal-date-group {
|
||||
margin-bottom: 20px;
|
||||
|
||||
.date-header {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
padding: 8px;
|
||||
background-color: #f5f7fa;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.modification-item {
|
||||
padding: 8px;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
position: relative;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.finally-tag {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
background-color: #67c23a;
|
||||
color: white;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.result-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 4px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user