添加考勤菜单
This commit is contained in:
1147680382@qq.com
@@ -112,3 +112,47 @@ export function syncUsers() {
|
|||||||
method: "post"
|
method: "post"
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 获取综合部考勤列表
|
||||||
|
export function getGeneralAttendanceList(params) {
|
||||||
|
return service({
|
||||||
|
url: "/performance/attendance/general/list",
|
||||||
|
method: "get",
|
||||||
|
params
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 修改考勤详情
|
||||||
|
export function updateAttendanceDetail(data) {
|
||||||
|
return service({
|
||||||
|
url: "/performance/attendance/detail",
|
||||||
|
method: "PUT",
|
||||||
|
data
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 审批考勤
|
||||||
|
export function approveAttendance(data) {
|
||||||
|
return service({
|
||||||
|
url: "/performance/attendance/general/approve",
|
||||||
|
method: "PUT",
|
||||||
|
data
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取异常考勤详情
|
||||||
|
export const getAbnormalAttendanceDetail = (userId, year, month) => {
|
||||||
|
return service({
|
||||||
|
url: `/abnormal/attendance/detail/${userId}/${year}/${month}`,
|
||||||
|
method: 'get'
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 修改异常考勤
|
||||||
|
export function updateAbnormalAttendance(data) {
|
||||||
|
return service({
|
||||||
|
url: "/performance/attendance/detail",
|
||||||
|
method: "PUT",
|
||||||
|
data
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|||||||
@@ -2,10 +2,10 @@
|
|||||||
<el-dropdown placement="bottom">
|
<el-dropdown placement="bottom">
|
||||||
<div class="flx-center">
|
<div class="flx-center">
|
||||||
<div class="avatar">
|
<div class="avatar">
|
||||||
<img :src="userInfo.avatar" alt="avatar" />
|
<img :src="userInfo.avatar || ''" alt="avatar" />
|
||||||
</div>
|
</div>
|
||||||
<span class="username" :style="{ color: themeConfig.footColor }">{{
|
<span class="username" :style="{ color: themeConfig.footColor }">{{
|
||||||
userInfo.name
|
userInfo.name || ''
|
||||||
}}</span>
|
}}</span>
|
||||||
</div>
|
</div>
|
||||||
<template #dropdown>
|
<template #dropdown>
|
||||||
@@ -27,8 +27,8 @@ const handleClick = () => {
|
|||||||
// eslint-disable-next-line no-alert
|
// eslint-disable-next-line no-alert
|
||||||
alert("button click");
|
alert("button click");
|
||||||
};
|
};
|
||||||
const userInfo = ref(null);
|
const userInfo = ref({});
|
||||||
userInfo.value = JSON.parse(sessionStorage.getItem("userInfo"));
|
userInfo.value = JSON.parse(sessionStorage.getItem("userInfo")) || {}
|
||||||
|
|
||||||
const gotoLogin = () => {
|
const gotoLogin = () => {
|
||||||
sessionStorage.removeItem("token");
|
sessionStorage.removeItem("token");
|
||||||
|
|||||||
@@ -1,4 +1,3 @@
|
|||||||
// 菜单列表改了路由要记得改菜单相互匹配
|
|
||||||
const menuTable = [
|
const menuTable = [
|
||||||
{
|
{
|
||||||
title: "首页",
|
title: "首页",
|
||||||
@@ -10,5 +9,10 @@ const menuTable = [
|
|||||||
url: "/groupManagement",
|
url: "/groupManagement",
|
||||||
icon: "Notebook",
|
icon: "Notebook",
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
title: "综合部初审列表",
|
||||||
|
url: "/performance/attendance/general",
|
||||||
|
icon: "Notebook",
|
||||||
|
},
|
||||||
];
|
];
|
||||||
export default menuTable;
|
export default menuTable;
|
||||||
|
|||||||
@@ -48,5 +48,28 @@ const routerList = [
|
|||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/performance',
|
||||||
|
component: Layout,
|
||||||
|
name: 'Performance',
|
||||||
|
meta: {
|
||||||
|
name: "绩效考勤",
|
||||||
|
title: '绩效考勤',
|
||||||
|
icon: 'el-icon-s-data',
|
||||||
|
roles: [2] // 只有role=2的用户可以查看
|
||||||
|
},
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: 'attendance/general',
|
||||||
|
name: 'AttendanceGeneral',
|
||||||
|
component: () => import('../views/performance/attendance/general/index.vue'),
|
||||||
|
meta: {
|
||||||
|
name: "综合部初审列表",
|
||||||
|
title: '综合部初审列表',
|
||||||
|
roles: [2] // 只有role=2的用户可以查看
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
];
|
];
|
||||||
export default routerList;
|
export default routerList;
|
||||||
|
|||||||
@@ -93,7 +93,7 @@
|
|||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column prop="name" label="姓名" width="100" show-overflow-tooltip />
|
<el-table-column prop="name" label="姓名" width="100" show-overflow-tooltip />
|
||||||
<el-table-column label="角色" align="center">
|
<el-table-column label="角色" align="center" width="220" >
|
||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
<el-select
|
<el-select
|
||||||
v-model="scope.row.role"
|
v-model="scope.row.role"
|
||||||
|
|||||||
@@ -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>
|
||||||
+1
-2
@@ -1,7 +1,6 @@
|
|||||||
import { defineConfig } from "vite";
|
import { defineConfig } from "vite";
|
||||||
import vue from "@vitejs/plugin-vue";
|
import vue from "@vitejs/plugin-vue";
|
||||||
import { viteMockServe } from "vite-plugin-mock";
|
import { viteMockServe } from "vite-plugin-mock";
|
||||||
|
|
||||||
import viteCompression from "vite-plugin-compression";
|
import viteCompression from "vite-plugin-compression";
|
||||||
|
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
@@ -57,5 +56,5 @@ export default defineConfig({
|
|||||||
// additionalData: '@import "src/styles/common.scss";',
|
// additionalData: '@import "src/styles/common.scss";',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
}
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user