hzd/salaryAccountingBackend
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加生成工资条功能

Browse Source
This commit is contained in:
1147680382@qq.com
2025-05-29 11:30:31 +08:00
parent 71421052df
commit 943093ed5e
5 changed files with 178 additions and 519 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/performance/attendance/finance/index.vue
+79 -262
View File
@@ -5,47 +5,33 @@
<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;"
>
<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>
<el-icon>
<Search />
</el-icon>
</template>
</el-input>
<el-button type="primary" @click="handleGeneratePayroll" :loading="generating">
生成工资条
</el-button>
</div>
</div>
</template>
<el-table
:data="attendanceList"
style="width: 100%"
height="calc(100vh - 280px)"
border
stripe
<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="{
}" :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" />
@@ -72,7 +58,8 @@
<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="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 />
@@ -84,22 +71,22 @@
<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>
<el-table-column prop="monthlyPerformance" label="月度绩效" width="100" align="center" show-overflow-tooltip></el-table-column>
<el-table-column prop="annualPerformance" label="年度绩效" width="100" align="center"
show-overflow-tooltip></el-table-column>
<el-table-column prop="monthlyPerformance" label="月度绩效" width="100" align="center"
show-overflow-tooltip></el-table-column>
<el-table-column prop="penaltyAmount" label="违纪扣奖" width="100" align="center" show-overflow-tooltip />
<el-table-column label="签名" width="100" align="center">
<template #default="scope">
<div class="signature-cell">
<el-image
v-if="scope.row.signatureImg"
:src="scope.row.signatureImg"
fit="contain"
<el-image v-if="scope.row.signatureImg" :src="scope.row.signatureImg" fit="contain"
style="width: 40px; height: 40px; cursor: pointer;"
@click="handlePreviewSignature(scope.row.signatureImg)"
>
@click="handlePreviewSignature(scope.row.signatureImg)">
<template #error>
<div class="image-slot">
<el-icon><Picture /></el-icon>
<el-icon>
<Picture />
</el-icon>
</div>
</template>
</el-image>
@@ -107,89 +94,18 @@
</div>
</template>
</el-table-column>
<el-table-column label="操作" width="240" fixed="right" align="center">
<el-table-column label="操作" width="120" fixed="right" align="center">
<template #default="scope">
<el-button
type="primary"
link
size="small"
@click="handleViewDetail(scope.row)"
>
<el-button type="primary" link size="small" @click="handleViewDetail(scope.row)">
查看详情
</el-button>
<el-button
type="primary"
link
size="small"
@click="handleViewAbnormal(scope.row)"
>
异常考勤
</el-button>
</template>
</el-table-column>
</el-table>
</el-card>
<!-- 异常考勤详情对话框 -->
<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>考勤时间：{{ scope.row.baseCheckTime }}</div>
<div>考勤结果：{{ getAbnormalResultLabel(scope.row.realResult) }}</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>修改前：{{ getModificationValue(mod.originalValue, scope.row.type) }}</div>
<div>修改后：{{ getModificationValue(mod.modifiedValue, scope.row.type) }}</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>
<!-- 工资条详情对话框 -->
<el-dialog
v-model="detailDialogVisible"
title="考勤详情"
width="800px"
>
<el-dialog v-model="detailDialogVisible" title="考勤详情" width="800px">
<div v-if="currentDetail" class="attendance-detail">
<div class="detail-header">
<div class="employee-info">
@@ -241,15 +157,13 @@
<div class="signature-item">
<div class="label">员工签名：</div>
<div class="signature-image" v-if="currentDetail.signatureImg">
<el-image
:src="currentDetail.signatureImg"
fit="contain"
style="width: 100%; height: 100%;"
@click="handlePreviewSignature(currentDetail.signatureImg)"
>
<el-image :src="currentDetail.signatureImg" fit="contain" style="width: 100%; height: 100%;"
@click="handlePreviewSignature(currentDetail.signatureImg)">
<template #error>
<div class="image-slot">
<el-icon><Picture /></el-icon>
<el-icon>
<Picture />
</el-icon>
</div>
</template>
</el-image>
@@ -262,25 +176,16 @@
</el-dialog>
<!-- 签名预览对话框 -->
<el-dialog
v-model="signaturePreviewVisible"
title="签名预览"
width="500px"
:show-close="true"
:close-on-click-modal="true"
:close-on-press-escape="true"
class="signature-preview-dialog"
>
<el-dialog v-model="signaturePreviewVisible" title="签名预览" width="500px" :show-close="true"
:close-on-click-modal="true" :close-on-press-escape="true" class="signature-preview-dialog">
<div class="signature-preview-content">
<el-image
v-if="currentSignatureImg"
:src="currentSignatureImg"
fit="contain"
style="width: 100%; height: 300px;"
>
<el-image v-if="currentSignatureImg" :src="currentSignatureImg" fit="contain"
style="width: 100%; height: 300px;">
<template #error>
<div class="image-slot">
<el-icon><Picture /></el-icon>
<el-icon>
<Picture />
</el-icon>
</div>
</template>
</el-image>
@@ -296,26 +201,26 @@ import { Search, Picture } from '@element-plus/icons-vue';
import dayjs from 'dayjs';
import {
getFinanceAttendanceList,
getAbnormalAttendanceDetail,
calculatePayrollSheets,
} from "../../../../api/modules/index";
// 格式化金额
const formatMoney = (value) => {
if (value === undefined || value === null) return '0.00';
// 将输入转换为数字
const num = Number(value);
// 检查是否为有效数字
if (isNaN(num)) return '0.00';
// 使用toFixed(2)保留两位小数
const fixedNum = num.toFixed(2);
// 添加千分位分隔符
const parts = fixedNum.split('.');
parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
return parts.join('.');
};
@@ -403,93 +308,11 @@ const handleSearch = () => {
attendanceList.value = originalList.value;
return;
}
attendanceList.value = originalList.value.filter(item =>
attendanceList.value = originalList.value.filter(item =>
item.name.toLowerCase().includes(searchKeyword.value.toLowerCase())
);
};
// 异常考勤对话框
const abnormalDialogVisible = ref(false);
const abnormalList = ref([]);
const currentAbnormalUser = ref({
id: '',
userid: ''
});
// 获取异常类型标签
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 getModificationValue = (value, type) => {
if (type === 'abnormal') {
const resultMap = {
'Normal': '正常',
'Early': '早退',
'Late': '迟到',
'SeriousLate': '严重迟到',
'Absenteeism': '旷工迟到',
'NotSigned': '未打卡'
};
return resultMap[value] || value;
} else if (type === 'checkin') {
return `${value}次`;
} else if (type === 'report') {
return value == 0 ? '未写日志' : '正常';
}
return value;
};
// 查看异常考勤
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) {
currentAbnormalUser.value = {
id: res.result.id,
userid: res.result.userid
};
abnormalList.value = res.result.data;
abnormalDialogVisible.value = true;
} else {
ElMessage.error(res.errmsg || "获取异常考勤数据失败");
}
} catch (error) {
ElMessage.error("获取异常考勤数据失败");
}
};
// 查看详情
const handleViewDetail = (row) => {
currentDetail.value = row;
@@ -502,10 +325,34 @@ const currentSignatureImg = ref('');
const handlePreviewSignature = (url) => {
if (!url) return;
const img = new Image();
img.src = url;
const newWindow = window.open('');
newWindow.document.write(img.outerHTML);
currentSignatureImg.value = url;
signaturePreviewVisible.value = true;
};
// 生成工资条
const generating = ref(false);
const handleGeneratePayroll = async () => {
if (!dateRange.value) {
ElMessage.warning('请选择月份');
return;
}
try {
generating.value = true;
const year = dateRange.value.getFullYear();
const month = dateRange.value.getMonth() + 1;
const res = await calculatePayrollSheets(year, month);
if (res.errcode === 0) {
ElMessage.success('生成工资条成功');
fetchList(); // 刷新列表
} else {
ElMessage.error(res.errmsg || '生成工资条失败');
}
} catch (error) {
ElMessage.error('生成工资条失败');
} finally {
generating.value = false;
}
};
// 页面加载时设置默认日期范围并获取数据
@@ -539,7 +386,7 @@ onMounted(() => {
:deep(.el-table) {
flex: 1;
.el-table__body-wrapper {
height: 100%;
}
@@ -631,37 +478,7 @@ onMounted(() => {
}
.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;
}
}
display: none;
}
:deep(.el-dialog__body) {
@@ -720,7 +537,7 @@ onMounted(() => {
:deep(.el-image-viewer__wrapper) {
z-index: 3000;
.el-image-viewer__canvas {
background: #ffffff;
}
@@ -742,7 +559,7 @@ onMounted(() => {
.el-table__fixed-right {
z-index: 2000;
}
.el-table__fixed {
z-index: 2000;
}
@@ -874,4 +691,4 @@ onMounted(() => {
color: #303133;
}
}
</style>
</style>
src/views/performance/attendance/general/index.vue
+31 -89
View File
@@ -5,47 +5,30 @@
<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;"
>
<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>
<el-icon>
<Search />
</el-icon>
</template>
</el-input>
</div>
</div>
</template>
<el-table
:data="attendanceList"
style="width: 100%"
height="calc(100vh - 280px)"
border
stripe
<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="{
}" :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" />
@@ -67,7 +50,8 @@
<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="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 />
@@ -84,20 +68,10 @@
<el-table-column prop="penaltyAmount" label="违纪扣奖" width="100" align="center" show-overflow-tooltip />
<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 type="primary" link size="small" @click="handleViewAbnormal(scope.row)">
详情
</el-button>
<el-button
type="success"
link
size="small"
@click="handleApprove(scope.row)"
>
<el-button type="success" link size="small" @click="handleApprove(scope.row)">
审批
</el-button>
</template>
@@ -106,17 +80,8 @@
</el-card>
<!-- 修改对话框 -->
<el-dialog
v-model="editDialogVisible"
title="修改考勤"
width="800px"
>
<el-form
:model="editForm"
:rules="editRules"
ref="editFormRef"
label-width="120px"
>
<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">
@@ -229,19 +194,10 @@
</el-dialog>
<!-- 异常考勤详情对话框 -->
<el-dialog
v-model="abnormalDialogVisible"
title="异常考勤详情"
width="800px"
>
<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 :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)">
@@ -256,12 +212,8 @@
<div>考勤时间：{{ scope.row.baseCheckTime }}</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-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" />
@@ -274,26 +226,16 @@
<template v-else-if="scope.row.type === 'checkin'">
<div class="result-row">
缺卡次数：
<el-input-number
v-model="scope.row.missedCount"
size="small"
style="width: 100px; margin: 0 8px;"
:min="0"
:max="10"
@change="handleUpdateAbnormal(scope.row)"
/>
<el-input-number v-model="scope.row.missedCount" size="small" style="width: 100px; margin: 0 8px;"
:min="0" :max="10" @change="handleUpdateAbnormal(scope.row)" />
次
</div>
</template>
<template v-else-if="scope.row.type === 'report'">
<div class="result-row">
日志状态：
<el-select
v-model="scope.row.reportCount"
size="small"
style="width: 100px; margin: 0 8px;"
@change="handleUpdateAbnormal(scope.row)"
>
<el-select v-model="scope.row.reportCount" size="small" style="width: 100px; margin: 0 8px;"
@change="handleUpdateAbnormal(scope.row)">
<el-option label="未写日志" :value="0" />
<el-option label="正常" :value="1" />
</el-select>
@@ -463,7 +405,7 @@ const handleSearch = () => {
attendanceList.value = originalList.value;
return;
}
attendanceList.value = originalList.value.filter(item =>
attendanceList.value = originalList.value.filter(item =>
item.name.toLowerCase().includes(searchKeyword.value.toLowerCase())
);
};
@@ -563,7 +505,7 @@ const handleEdit = (row) => {
// 提交修改
const handleEditSubmit = async () => {
if (!editFormRef.value) return;
await editFormRef.value.validate(async (valid) => {
if (valid) {
try {
@@ -686,7 +628,7 @@ const handleViewAbnormal = async (row) => {
const handleUpdateAbnormal = async (record) => {
// 保存原始值
const originalValue = record.realResult;
try {
await ElMessageBox.confirm(
'确认修改该考勤记录？',
@@ -697,7 +639,7 @@ const handleUpdateAbnormal = async (record) => {
type: 'warning',
}
);
const year = dateRange.value.getFullYear();
const month = dateRange.value.getMonth() + 1;
const data = {
@@ -799,7 +741,7 @@ onMounted(() => {
:deep(.el-table) {
flex: 1;
.el-table__body-wrapper {
height: 100%;
}
@@ -916,4 +858,4 @@ onMounted(() => {
align-items: center;
margin-top: 4px;
}
</style>
</style>
src/views/performance/attendance/manager/index.vue
+32 -91
View File
@@ -5,47 +5,30 @@
<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;"
>
<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>
<el-icon>
<Search />
</el-icon>
</template>
</el-input>
</div>
</div>
</template>
<el-table
:data="attendanceList"
style="width: 100%"
height="calc(100vh - 280px)"
border
stripe
<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="{
}" :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" />
@@ -67,7 +50,8 @@
<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="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 />
@@ -79,33 +63,20 @@
<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>
<el-table-column prop="monthlyPerformance" label="月度绩效" width="100" align="center" show-overflow-tooltip></el-table-column>
<el-table-column prop="annualPerformance" label="年度绩效" width="100" align="center"
show-overflow-tooltip></el-table-column>
<el-table-column prop="monthlyPerformance" label="月度绩效" width="100" align="center"
show-overflow-tooltip></el-table-column>
<el-table-column prop="penaltyAmount" label="违纪扣奖" width="100" align="center" show-overflow-tooltip />
<el-table-column label="操作" width="280" fixed="right" align="center">
<template #default="scope">
<el-button
type="primary"
link
size="small"
@click="handleViewAbnormal(scope.row)"
>
异常考勤
<el-button type="primary" link size="small" @click="handleViewAbnormal(scope.row)">
详情
</el-button>
<el-button
type="success"
link
size="small"
@click="handleApprove(scope.row)"
>
<el-button type="success" link size="small" @click="handleApprove(scope.row)">
审批
</el-button>
<el-button
type="warning"
link
size="small"
@click="handleEditPerformance(scope.row)"
>
<el-button type="warning" link size="small" @click="handleEditPerformance(scope.row)">
修改绩效
</el-button>
</template>
@@ -114,19 +85,10 @@
</el-card>
<!-- 异常考勤详情对话框 -->
<el-dialog
v-model="abnormalDialogVisible"
title="异常考勤详情"
width="800px"
>
<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 :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)">
@@ -168,36 +130,15 @@
</el-dialog>
<!-- 修改绩效对话框 -->
<el-dialog
v-model="performanceDialogVisible"
title="修改绩效"
width="500px"
>
<el-form
ref="performanceFormRef"
:model="performanceForm"
label-width="100px"
:rules="performanceRules"
>
<el-dialog v-model="performanceDialogVisible" title="修改绩效" width="500px">
<el-form ref="performanceFormRef" :model="performanceForm" label-width="100px" :rules="performanceRules">
<el-form-item label="年度绩效" prop="annualPerformance">
<el-input-number
v-model="performanceForm.annualPerformance"
:min="0"
:max="100"
:precision="1"
:step="0.5"
style="width: 200px"
/>
<el-input-number v-model="performanceForm.annualPerformance" :min="0" :max="100" :precision="1" :step="0.5"
style="width: 200px" />
</el-form-item>
<el-form-item label="月度绩效" prop="monthlyPerformance">
<el-input-number
v-model="performanceForm.monthlyPerformance"
:min="0"
:max="100"
:precision="1"
:step="0.5"
style="width: 200px"
/>
<el-input-number v-model="performanceForm.monthlyPerformance" :min="0" :max="100" :precision="1" :step="0.5"
style="width: 200px" />
</el-form-item>
</el-form>
<template #footer>
@@ -300,7 +241,7 @@ const handleSearch = () => {
attendanceList.value = originalList.value;
return;
}
attendanceList.value = originalList.value.filter(item =>
attendanceList.value = originalList.value.filter(item =>
item.name.toLowerCase().includes(searchKeyword.value.toLowerCase())
);
};
@@ -480,7 +421,7 @@ const handleEditPerformance = (row) => {
// 提交绩效表单
const submitPerformanceForm = async () => {
if (!performanceFormRef.value) return;
await performanceFormRef.value.validate(async (valid) => {
if (valid) {
try {
@@ -530,7 +471,7 @@ onMounted(() => {
:deep(.el-table) {
flex: 1;
.el-table__body-wrapper {
height: 100%;
}
@@ -653,4 +594,4 @@ onMounted(() => {
justify-content: flex-end;
gap: 12px;
}
</style>
</style>
src/views/performance/attendance/reviewed/index.vue
+28 -77
View File
@@ -5,47 +5,30 @@
<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;"
>
<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>
<el-icon>
<Search />
</el-icon>
</template>
</el-input>
</div>
</div>
</template>
<el-table
:data="attendanceList"
style="width: 100%"
height="calc(100vh - 280px)"
border
stripe
<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="{
}" :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" />
@@ -67,7 +50,8 @@
<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="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 />
@@ -84,20 +68,10 @@
<el-table-column prop="penaltyAmount" label="违纪扣奖" width="100" align="center" show-overflow-tooltip />
<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 type="primary" link size="small" @click="handleViewAbnormal(scope.row)">
详情
</el-button>
<el-button
type="success"
link
size="small"
@click="handleApprove(scope.row)"
>
<el-button type="success" link size="small" @click="handleApprove(scope.row)">
审批
</el-button>
</template>
@@ -106,19 +80,10 @@
</el-card>
<!-- 异常考勤详情对话框 -->
<el-dialog
v-model="abnormalDialogVisible"
title="异常考勤详情"
width="800px"
>
<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 :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)">
@@ -133,12 +98,8 @@
<div>考勤时间：{{ scope.row.baseCheckTime }}</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-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" />
@@ -151,26 +112,16 @@
<template v-else-if="scope.row.type === 'checkin'">
<div class="result-row">
缺卡次数：
<el-input-number
v-model="scope.row.missedCount"
size="small"
style="width: 100px; margin: 0 8px;"
:min="0"
:max="10"
@change="handleUpdateAbnormal(scope.row)"
/>
<el-input-number v-model="scope.row.missedCount" size="small" style="width: 100px; margin: 0 8px;"
:min="0" :max="10" @change="handleUpdateAbnormal(scope.row)" />
次
</div>
</template>
<template v-else-if="scope.row.type === 'report'">
<div class="result-row">
日志状态：
<el-select
v-model="scope.row.reportCount"
size="small"
style="width: 100px; margin: 0 8px;"
@change="handleUpdateAbnormal(scope.row)"
>
<el-select v-model="scope.row.reportCount" size="small" style="width: 100px; margin: 0 8px;"
@change="handleUpdateAbnormal(scope.row)">
<el-option label="未写日志" :value="0" />
<el-option label="正常" :value="1" />
</el-select>
@@ -289,7 +240,7 @@ const handleSearch = () => {
attendanceList.value = originalList.value;
return;
}
attendanceList.value = originalList.value.filter(item =>
attendanceList.value = originalList.value.filter(item =>
item.name.toLowerCase().includes(searchKeyword.value.toLowerCase())
);
};
@@ -440,7 +391,7 @@ const handleViewAbnormal = async (row) => {
const handleUpdateAbnormal = async (record) => {
// 保存原始值
const originalValue = record.realResult;
try {
await ElMessageBox.confirm(
'确认修改该考勤记录？',
@@ -451,7 +402,7 @@ const handleUpdateAbnormal = async (record) => {
type: 'warning',
}
);
const year = dateRange.value.getFullYear();
const month = dateRange.value.getMonth() + 1;
const data = {
@@ -533,7 +484,7 @@ onMounted(() => {
:deep(.el-table) {
flex: 1;
.el-table__body-wrapper {
height: 100%;
}
@@ -650,4 +601,4 @@ onMounted(() => {
align-items: center;
margin-top: 4px;
}
</style>
</style>