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

src/views/Home/kqnr/kqgl/KqglCreate.vue

@@ -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()+'号'"
+            :label="textYearMonth+day.toString()+'号'"
-            width="60"
+            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){
+  for (const item of dataUser) {
-    const data : KqdataVO = {
+    await getMonthListDate();
-      id:null,
+    await getQjglToData(item);
-      userId:item.id,
+    await getJbglToData(item);
-      userName:item.nickname,
+    await computeMonthlyWorkStatus();
-      deptId:item.deptId,
+    const data = {
-      deptName:item.deptName,
+      id: null,
-      dayStatus:dayStatus.join(','),
+      userId: item.id,
-      tokey:dateKey.value,
+      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){
+  await Promise.all(
-    const data : KqdataVO = {
+    listData.value.map(item => {
-      id:item.id,
+        const data: KqdataVO = {
-      userId:item.userId,
+          id: item.id,
-      userName:item.userName,
+          userId: item.userId,
-      deptId:item.deptId,
+          userName: item.userName,
-      deptName:item.deptName,
+          deptId: item.deptId,
-      dayStatus: Array.isArray(item.dayStatus)
+          deptName: item.deptName,
-        ? item.dayStatus.join(',')
+          dayStatus: Array.isArray(item.dayStatus) ? item.dayStatus.join(',') : String(item.dayStatus),
-        : String(item.dayStatus), // 处理非数组情况
+          tokey: item.tokey,
-      tokey:item.tokey,
+          workDay: item.workDay,
-      workDay: item.workDay,
+          overDay: item.overDay,
-      overDay: item.overDay,
+          yoverDay: item.yoverDay,
-      yoverDay: item.yoverDay,
+        };
-    }
+        return KqdataApi.updateKqdata(data);
-    // console.log(data)
+      }
-    await 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 {
-      //创建的我就新建数据,还有新建标识,把标识传递过去
+      buttonShow.value = true
-      await createUser()
-      await getList(dateKey.value)
     }
     await changeStatus()//把字符串工作状态更改为数组
     await getWorkDay()//获取工作日信息
@@ -456,6 +614,7 @@ const resetForm = () => {
     deptId: undefined,
     deptName: undefined,
     date: 0,
+    tableDate: undefined
   }
   formRef.value?.resetFields()
 }

src/views/Home/kqnr/kqgl/KqglDetail.vue

@@ -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()+'号'"
+            :label="textYearMonth+day.toString()+'号'"
-            width="60"
+            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-->
-<!--//   }-->
-<!--// }-->