排班管理接口对接

This commit is contained in:
re-JZzzz
2025-09-23 20:15:50 +08:00
parent 07c5dcde11
commit 30f5941202
6 changed files with 828 additions and 327 deletions

View File

@ -52,7 +52,8 @@
管理考勤
</el-button>
</div>
<renyuanpaiban @edit-schedule="handleEditSchedule"></renyuanpaiban>
<renyuanpaiban @edit-schedule="handleEditSchedule" :schedule-list="scheduleList">
</renyuanpaiban>
</el-card>
</div>
</el-col>
@ -69,12 +70,9 @@
</el-col>
</el-row>
<!-- 人员排班弹窗组件 -->
<renyuanguanliDialog
v-model:manageAttendDialogVisible="manageAttendDialogVisible"
@confirm="handleAttendConfirm"
:personnel-list="paibanRenYuanList"
/>
<renyuanguanliDialog v-model:manageAttendDialogVisible="manageAttendDialogVisible"
@confirm="handleAttendConfirm" :personnel-list="paibanRenYuanList" :type-list="scheduleTypes" />
<!-- 编辑排班弹窗 -->
<el-dialog v-model="editScheduleDialogVisible" title="修改排班" width="400">
<el-form :model="editScheduleForm" label-width="100px">
@ -89,11 +87,12 @@
</el-form-item>
<el-form-item label="修改为">
<el-select v-model="editScheduleForm.newShift" placeholder="请选择排班类型" style="width: 100%;">
<el-option v-for="option in shiftOptions" :key="option.value" :label="option.label" :value="option.value"></el-option>
<el-option v-for="option in editscheduleTypes" :key="option.id" :label="option.schedulingName"
:value="option.id"></el-option>
</el-select>
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="editScheduleDialogVisible = false">取消</el-button>
@ -114,102 +113,266 @@ import calendar from '@/views/integratedManage/attendManage/components/rightBox/
import totalView from '@/views/integratedManage/attendManage/components/totalView.vue'
import renyuanpaiban from '@/views/integratedManage/attendManage/components/renyuanpaiban.vue'
import renyuanguanliDialog from '@/views/integratedManage/attendManage/components/renyuanguanliDialog.vue'
import { getPaibanRenYuanList } from '@/api/renyuan/paiban';
import { ref, onMounted } from 'vue';
import { getPaibanRenYuanList, getPaibanRiLiList, savePaiban, updatePaiban, deletePaiban } from '@/api/renyuan/paiban';
import { SchedulingVO } from '@/api/renyuan/paiban/types';
import { listSchedulingDate } from '@/api/renyuan/schedulingDate';
import { ref, onMounted, watch, onUnmounted } from 'vue';
import { getCurrentMonthDates } from '@/utils/getDate';
const currentMonthDates = getCurrentMonthDates();
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
// 导入用户store
import { useUserStore } from '@/store/modules/user';
// 初始化用户store
const userStore = useUserStore();
// 排班人员列表
const paibanRenYuanList = ref([]);
// 获取排班人员列表
const fetchPaibanRenYuanList = async (deptId?: string) => {
try {
// 如果没有提供deptId默认使用当前登录用户的部门ID
const targetDeptId = deptId || userStore.deptId;
if (!targetDeptId) {
console.warn('未提供部门ID无法获取排班人员列表');
return;
}
const response = await getPaibanRenYuanList(targetDeptId);
// 格式化人员列表数据确保每个人员对象包含label和value属性
paibanRenYuanList.value = response.data?.map((user: any) => ({
label: user.nickName || user.userName || '未知用户',
value: user.userId || user.id || ''
})) || [];
console.log('获取排班人员列表成功:', paibanRenYuanList.value);
} catch (error) {
console.error('获取排班人员列表失败:', error);
// 错误情况下提供模拟数据,确保功能可用
paibanRenYuanList.value = [
{ label: '张三', value: '1' },
{ label: '李四', value: '2' },
{ label: '王五', value: '3' },
{ label: '赵六', value: '4' },
{ label: '钱七', value: '5' }
];
}
};
// 排班人员数据
const scheduleList = ref<SchedulingVO[]>([]);
// 排班类型
const scheduleTypes = ref([]);
// 修改弹出框的类型下拉
const editscheduleTypes = ref([]);
// 编辑排班弹窗
const editScheduleDialogVisible = ref(false);
// 人员排班弹窗
const manageAttendDialogVisible = ref(false);
// 处理考勤管理确认
const handleAttendConfirm = (formData: any) => {
console.log('考勤表单数据:', formData);
// 这里可以添加表单提交逻辑
// 获取排班人员列表
const fetchPaibanRenYuanList = async (deptId?: string) => {
try {
// 如果没有提供deptId默认使用当前登录用户的部门ID
const targetDeptId = deptId || userStore.deptId;
if (!targetDeptId) {
console.warn('未提供部门ID无法获取排班人员列表');
return;
}
const response = await getPaibanRenYuanList(targetDeptId);
// console.log('获取排班人员:', response);
paibanRenYuanList.value = response.data?.map((user: any) => ({
label: user.nickName,
value: user.userId,
deptId: user.deptId,
})) || [];
} catch (error) {
console.error('获取排班人员列表失败:', error);
}
};
// 编辑排班弹窗
const editScheduleDialogVisible = ref(false);
// 获取排班数据
const getscheduleData = async (query?: SchedulingVO) => {
try {
if (userStore.selectedProject && userStore.selectedProject.id) {
const res = await getPaibanRiLiList(query);
if (res.code === 200) {
scheduleList.value = res.data || [];
} else {
proxy?.$modal.msgError(res.msg || '获取排班数据失败');
}
}
} catch (error) {
proxy?.$modal.msgError('获取排班数据失败');
}
}
// 获取排班类型
const getTypeList = async () => {
try {
const res = await listSchedulingDate({ projectId: userStore.selectedProject?.id, pageNum: 1, pageSize: 10 });
if (res.code === 200) {
scheduleTypes.value = res.rows || [];
// 在scheduleTypes基础上新增休息字段
editscheduleTypes.value = [
...(res.rows || []),
{ id: 'rest', schedulingName: '休息' }
];
} else {
proxy?.$modal.msgError(res.msg || '获取排班类型失败');
// 如果获取失败,至少保留休息选项
editscheduleTypes.value = [{ id: 'rest', schedulingName: '休息' }];
}
} catch (error) {
console.error('获取排班类型出错:', error);
proxy?.$modal.msgError('获取排班类型失败');
// 异常情况下也保留休息选项
editscheduleTypes.value = [{ id: 'rest', schedulingTypeName: '休息' }];
}
}
// 安排人员排班
const arrangePaiban = async (formData: any) => {
try {
// 添加projectId到表单数据中
const dataWithProjectId = {
...formData,
projectId: userStore.selectedProject?.id
};
const res = await savePaiban(dataWithProjectId);
if (res.code === 200) {
proxy?.$modal.msgSuccess('排班成功');
// 刷新排班数据
refreshScheduleData(userStore.selectedProject.id);
// 关闭弹窗
manageAttendDialogVisible.value = false;
} else {
proxy?.$modal.msgError(res.msg || '排班失败');
}
} catch (error) {
proxy?.$modal.msgError('排班失败');
}
}
// 修改排班
const updateSchedule = async (formData: any) => {
try {
const res = await updatePaiban(formData);
if (res.code === 200) {
proxy?.$modal.msgSuccess('修改排班成功');
// 刷新排班数据
refreshScheduleData(userStore.selectedProject.id);
// 关闭弹窗
editScheduleDialogVisible.value = false;
} else {
proxy?.$modal.msgError(res.msg || '修改排班失败');
}
} catch (error) {
proxy?.$modal.msgError('修改排班失败');
}
}
// 删除排班
const deleteSchedule = async (ID: any) => {
try {
const res = await deletePaiban(ID);
if (res.code === 200) {
proxy?.$modal.msgSuccess('删除排班成功');
// 刷新排班数据
refreshScheduleData(userStore.selectedProject.id);
// 关闭弹窗
editScheduleDialogVisible.value = false;
} else {
proxy?.$modal.msgError(res.msg || '删除排班失败');
}
} catch (error) {
proxy?.$modal.msgError('删除排班失败');
}
}
// 处理考勤管理确认
const handleAttendConfirm = (formData: any) => {
// console.log('考勤表单数据:', formData);
// 这里可以添加表单提交逻辑
arrangePaiban(formData);
};
// 编辑排班表单数据
const editScheduleForm = ref({
name: '',
date: '',
currentShift: '',
newShift: ''
opsUserId: '', // 新增opsUserId字段
name: '',
date: '',
currentShift: '',
newShift: '',
id: '' // 新增scheduledId字段用于存储排班的id
});
// 排班类型选项
const shiftOptions = [
{ label: '早班', value: '早班' },
{ label: '中班', value: '中班' },
{ label: '晚班', value: '晚班' },
{ label: '休息', value: '休息' }
];
// 格式化排班文本,用于显示当前排班
const formatShiftDisplay = (shiftData: any): string => {
if (!shiftData) return '休息';
// 如果是字符串,直接返回
if (typeof shiftData === 'string') {
return shiftData;
}
// 如果是数组,返回第一个排班类型的名称
if (Array.isArray(shiftData) && shiftData.length > 0) {
if (typeof shiftData[0] === 'object' && shiftData[0].schedulingTypeName) {
return shiftData[0].schedulingTypeName;
}
return shiftData[0].toString();
}
// 如果是对象,返回排班类型名称
if (typeof shiftData === 'object' && shiftData.schedulingTypeName) {
return shiftData.schedulingTypeName;
}
// 如果是对象但没有schedulingTypeName属性尝试返回其字符串表示
if (typeof shiftData === 'object') {
return JSON.stringify(shiftData);
}
return '休息';
};
// 处理编辑排班
const handleEditSchedule = (rowData: any, columnData: any) => {
// 设置表单数据
editScheduleForm.value = {
name: rowData.name,
date: `${columnData.fullDate}`,
currentShift: '',
newShift: ''
};
// 查找当前排班
Object.keys(rowData).forEach(key => {
if (key.startsWith('day')) {
const dayIndex = parseInt(key.replace('day', '')) - 1;
if (dayIndex === columnData.index) {
editScheduleForm.value.currentShift = rowData[key];
editScheduleForm.value.newShift = rowData[key];
}
}
});
// 显示弹窗
editScheduleDialogVisible.value = true;
// 设置表单数据
editScheduleForm.value = {
opsUserId: rowData.opsUserId || '', // 从opsUserId字段获取用户ID
name: rowData.name,
date: `${columnData.fullDate}`,
currentShift: '',
newShift: '',
id: ''
};
// 查找当前排班
Object.keys(rowData).forEach(key => {
if (key.startsWith('day')) {
const dayIndex = parseInt(key.replace('day', '')) - 1;
if (dayIndex === columnData.index) {
const formattedShift = formatShiftDisplay(rowData[key]);
editScheduleForm.value.currentShift = formattedShift;
editScheduleForm.value.newShift = formattedShift;
// 如果不是休息状态则获取id并赋值到表单中
if (formattedShift !== '休息' && rowData[key]) {
// 处理rowData[key]为数组的情况
if (Array.isArray(rowData[key]) && rowData[key].length > 0 && rowData[key][0].id) {
editScheduleForm.value.id = rowData[key][0].id;
}
// 同时处理rowData[key]为对象的情况作为兼容
else if (typeof rowData[key] === 'object' && rowData[key].id) {
editScheduleForm.value.id = rowData[key].id;
}
}
}
}
});
// 显示弹窗
editScheduleDialogVisible.value = true;
};
// 确认修改排班
const handleConfirmEditSchedule = () => {
console.log('修改排班数据:', editScheduleForm.value);
// 这里可以添加修改排班的逻辑
editScheduleDialogVisible.value = false;
// 按照要求的格式准备数据
const submitData = {
projectId: userStore.selectedProject?.id,
opsUserId: editScheduleForm.value.opsUserId,
schedulingType: editScheduleForm.value.newShift,
schedulingDate: editScheduleForm.value.date,
id: editScheduleForm.value.id
};
console.log('提交的排班数据格式:', submitData);
if (submitData.schedulingType == 'rest') {
deleteSchedule(submitData.id);
} else {
updateSchedule(submitData);
}
};
// 出勤数据 - 用于attendTrend组件
@ -366,11 +529,42 @@ const calendarData = ref({
});
// 初始化用户store
const userStore = useUserStore();
// 封装刷新排班数据的方法
const refreshScheduleData = (projectId: string) => {
// 获取排班数据
getscheduleData({
projectId: projectId,
schedulingStartDate: currentMonthDates[0].fullDate,
schedulingEndDate: currentMonthDates[currentMonthDates.length - 1].fullDate,
});
// 获取排班类型
getTypeList();
};
// 监听projectId变化
const projectIdWatcher = watch(
() => userStore.selectedProject?.id,
(newProjectId, oldProjectId) => {
if (newProjectId && newProjectId !== oldProjectId) {
refreshScheduleData(newProjectId);
}
},
{ immediate: false, deep: true }
);
onMounted(() => {
fetchPaibanRenYuanList(String(userStore.deptId));
// 刷新排班数据
refreshScheduleData(userStore.selectedProject.id);
// 获取可以排班的人员列表
fetchPaibanRenYuanList(String(userStore.deptId));
});
// 组件卸载时移除监听器
onUnmounted(() => {
if (projectIdWatcher) {
projectIdWatcher();
}
});
</script>