排班管理接口对接
This commit is contained in:
@ -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>
|
||||
|
||||
Reference in New Issue
Block a user