yudao-team/oa-ui
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

考勤管理结合请假加班数据

Browse Source
This commit is contained in:
XaoLi717 2025-02-14 10:23:54 +08:00
parent fad3e7c369
commit 4a05c21035
2 changed files with 228 additions and 158 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

239
src/views/Home/kqnr/kqgl/KqglCreate.vue
View File

@ -36,15 +36,18 @@
disabled
/>
</el-form-item>
<el-form-item label="考勤表单">
<el-form-item v-if="buttonShow" label="数据创建">
<el-button type="success" @click="createKqglFormData()">点击生成考勤表单数据</el-button>
</el-form-item>
<el-form-item label="考勤表单" v-loading="TableLoading" prop="tableDate">
<el-table :data="listData" border style="width: 100%">
<el-table-column fixed prop="userName" label="姓名" width="80" />
<!-- 动态生成 1-31 天的列 -->
<el-table-column
v-for="day in 31"
v-for="day in monthMaxDay"
:key="day"
:label="day.toString()+'号'"
width="60"
:label="textYearMonth+day.toString()+'号'"
width="120"
>
<template #default="{$index, row}">
<span
@ -89,6 +92,9 @@ import * as DefinitionApi from '@/api/bpm/definition'
import * as UserApi from '@/api/system/user'
import {useTagsViewStore} from "@/store/modules/tagsView";
import {FormProcessMappingApi} from "@/api/bpm/formprocessmapping";
import {CalendarApi} from "@/api/home/calendar";
import {QjglDataApi, QjglDataVO} from "@/api/home/qjgldata";
import {JbglDataApi, JbglDataVO} from "@/api/home/jbgldata";
/** 考勤管理 表单 */
defineOptions({ name: 'KqglCreate' })
@ -108,12 +114,14 @@ const formData = ref({
deptId: undefined,
deptName: undefined,
date: 0,
tableDate: undefined as boolean | undefined,
})
const formRules = reactive({
userId: [{ required: true, message: '用户id不能为空', trigger: 'blur' }],
title: [{ required: true, message: '标题不能为空', trigger: 'blur' }],
deptId: [{ required: true, message: '部门id不能为空', trigger: 'blur' }],
date: [{ required: true, message: '考勤日期不能为空', trigger: 'blur' }],
tableDate: [{ required: true, message: '考勤表单不能为空', trigger: 'blur' }],
})
const pop = ref(false)//第一次打开弹窗加载span标签而不是pop组件快一点
const dateKey = ref(0);
@ -145,7 +153,7 @@ const queryParamsUser = reactive({
createTime: []
})
//默认的工作状态
const dayStatus = [
let monthDayStatus = [
1,1,1,1,1,3,3,1,1,1,1,1,3,3,
1,1,1,1,1,3,3,1,1,1,1,1,3,3,1,1,1
]
@ -172,7 +180,10 @@ const userInfo = ref('') // 用户名字
//计算属性更新传递时间
const computedDate = computed(() => {
return formData.value.date? formData.value.date : dateKey.value;
const date = formData.value.date || dateKey.value;
textYearMonth.value = getTextYearMonth(date);
monthMaxDay.value = getMonthMaxDay(date);
return date;
})
// 指定审批人
@ -235,44 +246,47 @@ const createUser = async ()=>{
queryParamsUser.deptId = formData.value.deptId
const user = await getUserPageKQ(queryParamsUser)
const dataUser = user.list
for (let item of dataUser){
const data : KqdataVO = {
id:null,
userId:item.id,
userName:item.nickname,
deptId:item.deptId,
deptName:item.deptName,
dayStatus:dayStatus.join(','),
tokey:dateKey.value,
for (const item of dataUser) {
await getMonthListDate();
await getQjglToData(item);
await getJbglToData(item);
await computeMonthlyWorkStatus();
const data = {
id: null,
userId: item.id,
userName: item.nickname,
deptId: item.deptId,
deptName: item.deptName,
dayStatus: monthDayStatus.join(','),
tokey: dateKey.value,
workDay: 0,
overDay: 0,
yoverDay: 0,
}
// console.log(data)
await KqdataApi.createKqdata(data)
};
await KqdataApi.createKqdata(data);
}
}
//更新信息
const updateUser = async ()=>{
for (let item of listData.value){
const data : KqdataVO = {
id:item.id,
userId:item.userId,
userName:item.userName,
deptId:item.deptId,
deptName:item.deptName,
dayStatus: Array.isArray(item.dayStatus)
? item.dayStatus.join(',')
: String(item.dayStatus), // 处理非数组情况
tokey:item.tokey,
workDay: item.workDay,
overDay: item.overDay,
yoverDay: item.yoverDay,
}
// console.log(data)
await KqdataApi.updateKqdata(data);
}
await Promise.all(
listData.value.map(item => {
const data: KqdataVO = {
id: item.id,
userId: item.userId,
userName: item.userName,
deptId: item.deptId,
deptName: item.deptName,
dayStatus: Array.isArray(item.dayStatus) ? item.dayStatus.join(',') : String(item.dayStatus),
tokey: item.tokey,
workDay: item.workDay,
overDay: item.overDay,
yoverDay: item.yoverDay,
};
return KqdataApi.updateKqdata(data);
}
)
);
}
/** 查询列表 */
@ -292,12 +306,158 @@ const changeStatus = async ()=>{
item.dayStatus = item.dayStatus.split(',').map(Number);
}
}
// console.log(listData.value)
} finally {
formLoading.value = false
}
};
// 定义数据类型
interface WorkDay {
date: string; // 假设 date 是字符串类型
isWorkDay: number; // 假设 isWorkDay 是布尔类型
}
const textYearMonth = ref('') // 字符串形式的年月
const monthMaxDay = ref(); // 当前月份最大天数
const buttonShow = ref(false); // 创建数据按钮是否显示
const TableLoading = ref(false) // 表格数据加载
const monthDataStatus = ref<WorkDay[]>([]); //本月天数状态
const MonthData = ref(); // 当前月份工作数据
const queryParamsDate = reactive({
pageNo: 1,
pageSize: 1,
id: undefined,
date: [textYearMonth.value+"01",textYearMonth.value+"31"],//只获取本年的数据
isWorkday: undefined,
content: undefined,
createTime: [],
})
const qjglToData = ref<QjglDataVO[]>([]) // 请假数据工作数据
const queryParamsQjglData = reactive({
pageNo: 1,
pageSize: 10,
id: undefined,
userName: undefined,
userId: undefined as number | undefined,
deptName: undefined,
deptId: undefined as number | undefined,
leaveDate: [textYearMonth.value+"01",textYearMonth.value+"31"],
leaveType: undefined,
leaveDays: undefined,
createTime: [],
})
const jbglToData = ref<JbglDataVO[]>([]) // 列表的数据
const queryParamsJbglData = reactive({
pageNo: 1,
pageSize: 10,
id: undefined,
userName: undefined,
userId: undefined as number | undefined,
deptName: undefined,
deptId: undefined as number | undefined,
overtimeDate: [textYearMonth.value+"01",textYearMonth.value+"31"],
overtimeType: undefined,
overtimeDays: undefined,
createTime: [],
})
/*创建表单数据*/
const createKqglFormData = async () => {
TableLoading.value = true
try {
await createUser();
await getList(dateKey.value);
await changeStatus(); // 把字符串工作状态更改为数组
await getWorkDay(); // 获取工作日信息
formData.value.tableDate = true
} catch (e) {
buttonShow.value = false
TableLoading.value = false
console.error(`createKqglFormDataErr: ${e}`);
} finally {
buttonShow.value = false
TableLoading.value = false
}
}
/** 查询当前月份工作数据列表 */
const getMonthListDate = async () => {
try {
// 获取请假数据
queryParamsDate.date = [textYearMonth.value+"01",textYearMonth.value+"31"];
const data = await CalendarApi.getPublicCalendarPage(queryParamsDate);
MonthData.value = data.list
}catch (e) {
console.error(`getMonthListDateErr: ${e}`);
}
}
/*查询当前月份请假数据列表*/
const getQjglToData= async (item?) => {
try {
queryParamsQjglData.leaveDate = [textYearMonth.value + "01", textYearMonth.value + "31"];
queryParamsQjglData.userId = item.id; queryParamsQjglData.deptId = item.deptId;
const QjglData = await QjglDataApi.getPublicQjglDataPage(queryParamsQjglData)
qjglToData.value = QjglData.list
}catch (e) {
console.error(`getQjglToDataErr: ${e}`);
}
}
/*查询当前月份请假数据列表*/
const getJbglToData= async (item?) => {
try {
queryParamsJbglData.overtimeDate = [textYearMonth.value + "01", textYearMonth.value + "31"];
queryParamsJbglData.userId = item.id; queryParamsJbglData.deptId = item.deptId;
const JbglData = await JbglDataApi.getPublicJbglDataPage(queryParamsJbglData)
jbglToData.value = JbglData.list
}catch (e) {
console.error(`getJbglToDataErr: ${e}`);
}
}
/*处理工作数据请假数据加班数据方法*/
const computeMonthlyWorkStatus = async () => {
monthDayStatus = []; // 设置默认数据为空
monthDataStatus.value = MonthData.value.map((item) => ({date: item.date, isWorkDay: item.isWorkday,}))
if (qjglToData.value) {
qjglToData.value.forEach(item => {
const matchingDate = monthDataStatus.value.find(status => status.date === item.leaveDate);
if (matchingDate && matchingDate.isWorkDay === 1) {
matchingDate.isWorkDay = 2;
}
});
}
if (jbglToData.value) {
jbglToData.value.forEach(item => {
const matchingDate = monthDataStatus.value.find(status => status.date === item.overtimeDate);
if (matchingDate && matchingDate.isWorkDay === 0) {
matchingDate.isWorkDay = 4;
}
})
}
// 获取处理后的基础数据的工作状态
monthDayStatus = monthDataStatus.value.map((item: WorkDay) => {return item.isWorkDay === 0 ? 3 : item.isWorkDay;});
// 反转数组
monthDayStatus.reverse();
}
// 获取日期时间年月
function getTextYearMonth(dat: number|Date) {
const date = new Date(dat)
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以加1
return `${year}-${month}-`;
}
// 获取当月最大天数
function getMonthMaxDay(dat: number|Date) {
const date = new Date(dat)
const year = date.getFullYear();
const firstDayNextMonth = new Date(year, date.getMonth() + 1, 1); // 下个月的第一天
const lastDayThisMonth = new Date(firstDayNextMonth.getTime() - 1); // 上个月的最后一天
return lastDayThisMonth.getDate(); // 获取最后一天的日期，即本月的最大天数
}
//流程
const { query } = useRoute() // 查询参数
const queryId = query.id as unknown as number // 从 URL 传递过来的 id 编号
@ -316,9 +476,7 @@ const open = async () => {
formData.value = await KqglApi.getKqgl(queryId)
await getList() //如果是修改那么我获取列表标识使用有的标识
} else {
//创建的我就新建数据,还有新建标识,把标识传递过去
await createUser()
await getList(dateKey.value)
buttonShow.value = true
}
await changeStatus()//把字符串工作状态更改为数组
await getWorkDay()//获取工作日信息
@ -456,6 +614,7 @@ const resetForm = () => {
deptId: undefined,
deptName: undefined,
date: 0,
tableDate: undefined
}
formRef.value?.resetFields()
}

147
src/views/Home/kqnr/kqgl/KqglDetail.vue
View File

@ -42,10 +42,10 @@
<el-table-column fixed prop="userName" label="姓名" width="80" />
<!-- 动态生成 1-31 天的列 -->
<el-table-column
v-for="day in 31"
v-for="day in monthMaxDay"
:key="day"
:label="day.toString()+'号'"
width="60"
:label="textYearMonth+day.toString()+'号'"
width="120"
>
<!-- <template #default="{$index, row}">-->
<template #default="{row}">
@ -150,6 +150,8 @@ const workType = ref({
const formRef = ref() // 表单 Ref
const deptInfo = ref('') // 部门信息
const userInfo = ref('') // 用户名字
const textYearMonth = ref('') // 字符串形式的年月
const monthMaxDay = ref<number>(); // 当前月份最大天数
//流程
const { query } = useRoute() // 查询参数
const props = defineProps({
@ -158,9 +160,32 @@ const props = defineProps({
//计算属性更新传递时间
const computedDate = computed(() => {
return formData.value.date? formData.value.date : dateKey.value;
const date = formData.value.date? formData.value.date : dateKey.value
updateDateValues(date);
return date;
})
function updateDateValues(date) {
textYearMonth.value = getTextYearMonth(date);
monthMaxDay.value = getMonthMaxDay(date);
}
// 获取日期时间 年月日
function getTextYearMonth(dat: number|Date) {
const date = new Date(dat)
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以加1
return `${year}-${month}-`;
}
// 获取当月最大日期
function getMonthMaxDay(dat: number|Date) {
const date = new Date(dat)
const year = date.getFullYear();
const firstDayNextMonth = new Date(year, date.getMonth() + 1, 1); // 下个月的第一天
const lastDayThisMonth = new Date(firstDayNextMonth.getTime() - 1); // 上个月的最后一天
return lastDayThisMonth.getDate(); // 获取最后一天的日期，即本月的最大天数
}
const queryId = query.id as unknown as number // 从 URL 传递过来的 id 编号
/** 打开弹窗 设置时间戳为固定信息 */
const open = async () => {
@ -302,117 +327,3 @@ defineExpose({ updateForm }) // 提供 open 方法，用于打开弹窗
<style scoped lang="scss">
</style>
<!--//获取所有员工的搜索条件参数-->
<!--// const queryParamsUser = reactive({-->
<!--// pageNo: 1,-->
<!--// pageSize: undefined,-->
<!--// username: undefined,-->
<!--// mobile: undefined,-->
<!--// status: undefined,-->
<!--// deptId: undefined,-->
<!--// createTime: []-->
<!--// })-->
<!--//默认的工作状态-->
<!--// const dayStatus = [-->
<!--// 1,1,1,1,1,3,3,1,1,1,1,1,3,3,-->
<!--// 1,1,1,1,1,3,3,1,1,1,1,1,3,3,3,3,3-->
<!--// ]-->
<!--//改变状态后更改对应缩影为对应值-->
<!--// const changeDay = async (index:number,day:number,val:number)=>{-->
<!--// let dayStatus = listData.value[index].dayStatus-->
<!--// if (Array.isArray(dayStatus)){-->
<!--// dayStatus[day - 1] = val-->
<!--// }else{-->
<!--// dayStatus = [];-->
<!--// dayStatus[day - 1] = val; // 初始化值-->
<!--// }-->
<!--// await getWorkDay(index)-->
<!--// }-->
<!--//创建用户考勤数据-->
<!--// const createUser = async ()=>{-->
<!--// queryParamsUser.deptId = formData.value.deptId-->
<!--// const user = await getUserPageKQ(queryParamsUser)-->
<!--// const dataUser = user.list-->
<!--// for (let item of dataUser){-->
<!--// const data : KqdataVO = {-->
<!--// id:null,-->
<!--// userId:item.id,-->
<!--// userName:item.nickname,-->
<!--// deptId:item.deptId,-->
<!--// deptName:item.deptName,-->
<!--// dayStatus:dayStatus.join(','),-->
<!--// tokey:dateKey.value,-->
<!--// workDay: 0,-->
<!--// overDay: 0,-->
<!--// yoverDay: 0,-->
<!--// }-->
<!--// // console.log(data)-->
<!--// await KqdataApi.createKqdata(data)-->
<!--// }-->
<!--// }-->
<!--//更新信息-->
<!--// const updateUser = async ()=>{-->
<!--// for (let item of listData.value){-->
<!--// const data : KqdataVO = {-->
<!--// id:item.id,-->
<!--// userId:item.userId,-->
<!--// userName:item.userName,-->
<!--// deptId:item.deptId,-->
<!--// deptName:item.deptName,-->
<!--// dayStatus: Array.isArray(item.dayStatus)-->
<!--// ? item.dayStatus.join(',')-->
<!--// : String(item.dayStatus), // 处理非数组情况-->
<!--// tokey:item.tokey,-->
<!--// workDay: item.workDay,-->
<!--// overDay: item.overDay,-->
<!--// yoverDay: item.yoverDay,-->
<!--// }-->
<!--// console.log(data)-->
<!--// await KqdataApi.updateKqdata(data);-->
<!--// }-->
<!--// }-->
<!--/** 获得数据 */-->
<!--// const getInfo = async () => {-->
<!--// pop.value=false//每次打开渲染span-->
<!--// await getUserInfo()-->
<!--// formLoading.value = true-->
<!--// try {-->
<!--// formData.value = await KqglApi.getKqgl(props.id || queryId)-->
<!--// await getList() //如果是修改那么我获取列表标识使用有的标识-->
<!--// await changeStatus()//把字符串工作状态更改为数组-->
<!--// await getWorkDay()//获取工作日信息-->
<!--// } finally {-->
<!--// formLoading.value = false-->
<!--// }-->
<!--// }-->
<!--// defineExpose({ open }) // 提供 open 方法，用于打开弹窗-->
<!--/** 提交表单 */-->
<!--// const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调-->
<!--// const submitForm = async () => {-->
<!--// // 校验表单-->
<!--// await formRef.value.validate()-->
<!--// // 提交请求-->
<!--// formLoading.value = true-->
<!--// try {-->
<!--// const data = formData.value as unknown as KqglVO-->
<!--// if (formType.value === 'create') {-->
<!--// data.date = dateKey.value //创建后提交的时候才会更新标识-->
<!--// await KqglApi.createKqgl(data)-->
<!--// message.success(t('common.createSuccess'))-->
<!--// } else {-->
<!--// await KqglApi.updateKqgl(data)-->
<!--// message.success(t('common.updateSuccess'))-->
<!--// }-->
<!--// await updateUser() //提交的时候更新考勤数据-->
<!--// dialogVisible.value = false-->
<!--// // 发送操作成功的事件-->
<!--// emit('success')-->
<!--// } finally {-->
<!--// formLoading.value = false-->
<!--// }-->
<!--// }-->