对加班列表和加班申请进行修改

src/api/application/overtimeApplication.js

@@ -35,6 +35,15 @@ export function addOvertimeApplication(data) {
   })
 }
 
+// 批量新增加班申请
+export function addOvertimeApplications(data) {
+  return request({
+    url: '/application/overtimeApplication/batch',
+    method: 'post',
+    data: data
+  })
+}
+
 // 修改加班申请
 export function updateOvertimeApplication(data) {
   return request({

src/views/attendance/overtimeApplication/add.vue

 <template>
   <div class="container">
-
-    <!-- 公司切换按钮 -->
+    <!-- 项目切换按钮，动态显示后端返回的项目名称 -->
     <div class="company-switch">
-    <span
-        v-for="project in projects"
-        :key="project"
-        class="company-name"
-        :class="{ active: selectedCompany === project }"
-        @click="switchCompany(project)"
-    >
-      {{ project }}
-    </span>
+      <span
+          v-for="project in projects"
+          :key="project"
+          class="company-name"
+          :class="{ active: selectedCompany === project }"
+          @click="switchCompany(project)"
+      >
+        {{ project }}
+      </span>
     </div>
     <hr class="xian1"/>
 
@@ -25,32 +24,30 @@
           <span class="small-text1">可填报工时周期：{{ fillablePeriod }}</span>
         </span>
         <span class="total-hours">
-            <label class="sum-time">当前周期总工时：</label>
-            <label class="sum-time2">{{ totalHoursForAllUsers }}</label>
-          </span>
+          <label class="sum-time">当前周期总工时：</label>
+          <label class="sum-time2">{{ totalHoursForAllUsers }}</label>
+        </span>
       </div>
 
       <!-- 工时表格 -->
-      <div v-for="user in users" :key="user.name" class="user-section">
+      <div v-for="user in users" :key="user.employeeName" class="user-section">
         <h4>
-          <span class="user-name-style">{{ user.name }}</span>
-          <span class="responsible">事业部负责人：周鑫</span>
-          <el-button
-              type="text"
-              @click="toggleExpand(user.name)"
-              class="expand-button"
-          >
-            {{ isExpanded[user.name] ? '收起' : '展开' }}
-            <el-icon v-if="isExpanded[user.name]"><ArrowUp /></el-icon>
+          <!-- 显示后端返回的员工姓名 -->
+          <span class="user-name-style">{{ user.employeeName }}</span>
+          <!-- 显示后端返回的部门负责人名称 -->
+          <span class="responsible">事业部负责人：{{ user.departmentLeaderName }}</span>
+          <el-button type="text" @click="toggleExpand(user.employeeName)" class="expand-button">
+            {{ isExpanded[user.employeeName] ? '收起' : '展开' }}
+            <el-icon v-if="isExpanded[user.employeeName]"><ArrowUp /></el-icon>
             <el-icon v-else><ArrowDown /></el-icon>
           </el-button>
         </h4>
 
-        <!-- 分割线-->
+        <!-- 分割线 -->
         <hr class="xian2"/>
-        <span  v-if="isExpanded[user.name]" class="overtime-detail">加班明细</span>
+        <span v-if="isExpanded[user.employeeName]" class="overtime-detail">加班明细</span>
         <!-- 日期工时输入 -->
-        <div v-if="isExpanded[user.name]" class="work-grid">
+        <div v-if="isExpanded[user.employeeName]" class="work-grid">
           <div v-for="(day, index) in user.workDays" :key="index" class="day-cell">
             <span class="day-label">
               <p class="day-label-style">{{ previousMonthDates[index] }}</p>
@@ -60,15 +57,13 @@
             </span>
           </div>
         </div>
-        <!--分割线-->
+        <!-- 分割线 -->
         <hr class="xian3"/>
         <!-- 总工时 -->
         <div class="total-hours1">
           <span class="total-hours-label">总工时：</span>
           <span class="total-value">{{ user.totalHours }}</span>
         </div>
-
-
       </div>
 
       <!-- 底部按钮 -->
@@ -82,163 +77,140 @@
 </template>
 
 <script setup>
-import {ref, computed} from "vue";
-import {useRouter, useRoute} from 'vue-router';
-import {findOvertimeApplication} from "../../../api/application/overtimeApplication.js";
-
-const router = useRouter(); // 创建路由器实例
+import { ref, computed, reactive, onMounted, watch } from 'vue';
+import { useRouter } from 'vue-router';
+import { findOvertimeApplication , addOvertimeApplications } from '../../../api/application/overtimeApplication.js';
+import { ArrowUp, ArrowDown } from '@element-plus/icons-vue';
 
+const router = useRouter();
 
+// 模拟登录信息
 localStorage.setItem('user', JSON.stringify({ username: '甲项目经理' }));
 
-/** 获取上个月的第一天和最后一天 **/
+// 日期工具函数
 const getPreviousMonthRange = () => {
   const now = new Date();
   const year = now.getFullYear();
   const month = now.getMonth();
-
-  // 上个月的第一天
   const firstDay = new Date(year, month - 1, 1);
-  // 上个月的最后一天
   const lastDay = new Date(year, month, 0);
-
-  // 格式化日期为 YYYY/MM/DD
-  const formatDate = (date) => {
-    const year = date.getFullYear();
-    const month = String(date.getMonth() + 1).padStart(2, '0');
-    const day = String(date.getDate()).padStart(2, '0');
-    return `${year}/${month}/${day}`;
+  const formatDate = date => {
+    const y = date.getFullYear();
+    const m = String(date.getMonth() + 1).padStart(2, '0');
+    const d = String(date.getDate()).padStart(2, '0');
+    return `${y}/${m}/${d}`;
   };
-
   return `${formatDate(firstDay)} - ${formatDate(lastDay)}`;
 };
 
-/** 获取上个月的天数 **/
 const getPreviousMonthDates = () => {
   const now = new Date();
   const year = now.getFullYear();
   const month = now.getMonth();
-
-  // 上个月的第一天
   const firstDay = new Date(year, month - 1, 1);
-  // 上个月的最后一天
   const lastDay = new Date(year, month, 0);
-
   const dates = [];
   for (let i = 0; i < lastDay.getDate(); i++) {
     const date = new Date(year, month - 1, i + 1);
-    dates.push(`${String(date.getMonth() + 1).padStart(2, "0")}/${String(date.getDate()).padStart(2, "0")}`);
+    dates.push(`${String(date.getMonth() + 1).padStart(2, '0')}/${String(date.getDate()).padStart(2, '0')}`);
   }
-
   return dates;
 };
 
-/** 获取这个月的1号到7号的日期范围 **/
 const getNextMonthFirstWeekRange = () => {
   const now = new Date();
   const year = now.getFullYear();
-  const month = now.getMonth() ;
-
-  // 这个月的第一天
+  const month = now.getMonth();
   const firstDayOfNextMonth = new Date(year, month, 1);
-  // 这个月的第七天
   const seventhDayOfNextMonth = new Date(year, month, 7);
-
-  // 格式化日期为 YYYY/MM/DD
-  const formatDate = (date) => {
-    const year = date.getFullYear();
-    const month = String(date.getMonth() + 1).padStart(2, '0');
-    const day = String(date.getDate()).padStart(2, '0');
-    return `${year}/${month}/${day}`;
+  const formatDate = date => {
+    const y = date.getFullYear();
+    const m = String(date.getMonth() + 1).padStart(2, '0');
+    const d = String(date.getDate()).padStart(2, '0');
+    return `${y}/${m}/${d}`;
   };
-
   return `${formatDate(firstDayOfNextMonth)} - ${formatDate(seventhDayOfNextMonth)}`;
 };
 
-// 当前选择的公司
-const selectedCompany = ref("东风本田");
-const projects = ["东风本田", "中汽研测评",];
-// 申请工时报填报周期
+// 响应式状态
 const reportPeriod = ref(getPreviousMonthRange());
 const fillablePeriod = ref(getNextMonthFirstWeekRange());
-// 上个月的日期数组
 const previousMonthDates = ref(getPreviousMonthDates());
-// 不同公司对应的用户数据
-const companyData = reactive({
-  "东风本田": [
-    {
-      name: "李冬梅",
-      totalHours: 0,
-      workDays: Array(previousMonthDates.value.length).fill(null),
-    },
-    {
-      name: "马燕燕",
-      totalHours: 0,
-      workDays: Array(previousMonthDates.value.length).fill(null),
-    },
-  ],
-  "中汽研测评": [
-    {
-      name: "张三",
-      totalHours: 8,
-      workDays: Array(previousMonthDates.value.length).fill(null),
-    },
-    {
-      name: "李四",
-      totalHours: 95,
-      workDays: Array(previousMonthDates.value.length).fill(null),
-    },
-  ],
-});
 
+// 存储后端返回的原始数据
+const backendData = ref([]);
 
-// 动态获取当前公司的用户数据
-const users = computed(() => companyData[selectedCompany.value]);
+// 构建项目数据结构，键为项目名称，值为该项目下的所有员工对象
+const companyData = reactive({});
 
-// 处理公司切换
-const switchCompany = (project) => {
-  selectedCompany.value = project;
-};
+// 选中项目名称
+const selectedCompany = ref('');
 
-// 响应式变量，用于控制展开和收起状态
+// 计算项目名称列表（从 companyData 的键中获取）
+const projects = computed(() => Object.keys(companyData));
+
+// 根据选中项目获取对应的用户数据
+const users = computed(() => companyData[selectedCompany.value] || []);
+
+// 控制用户展开/收起状态（使用 employeeName 作为 key）
 const isExpanded = ref({});
-// 处理展开和收起
-const toggleExpand = (userName) => {
-  isExpanded.value[userName] = !isExpanded.value[userName];
+
+// 切换项目
+const switchCompany = project => {
+  selectedCompany.value = project;
 };
-// 初始化展开状态
-users.value.forEach(user => {
-  isExpanded.value[user.name] = true; // 默认展开
-});
 
-// 监听 user.workDays 的变化
-watch(
-    () => users.value,
-    (newUsers) => {
-      newUsers.forEach(user => {
-        // 计算 totalHours
-        const total = user.workDays.reduce((sum, hours) => sum + (parseFloat(hours) || 0), 0);
-        user.totalHours = total;
-      });
-    },
-    { deep: true }
-);
-
-// 计算所有人的总工时
+//计算当前周期总工时
 const totalHoursForAllUsers = computed(() => {
-  return users.value.reduce((sum, user) => sum + user.totalHours, 0);
+  return users.value.reduce((sum, user) => sum + (user.totalHours || 0), 0);
 });
 
-// 在组件挂载时获取并打印用户信息
+
+// 切换展开/收起状态
+const toggleExpand = employeeName => {
+  isExpanded.value[employeeName] = !isExpanded.value[employeeName];
+};
+
+// 监听用户数据变化，计算每个用户的总工时
+watch(users, newUsers => {
+  newUsers.forEach(user => {
+    user.totalHours = user.workDays.reduce((sum, hours) => sum + (parseFloat(hours) || 0), 0);
+  });
+}, { deep: true });
+
+// 获取后端数据
 onMounted(() => {
   const user = JSON.parse(localStorage.getItem('user'));
   if (user) {
-    console.log('当前登录用户:', user.username);
-    // 调用 API 并传递用户名
     findOvertimeApplication({ projectManagerNickName: user.username })
         .then(response => {
-          console.log('API 响应:', response.data);
-          // 处理 API 响应数据
+          // 假设后端返回的数据格式为 response.data 数组
+          backendData.value = response.data;
+          // 根据后端数据构建 companyData
+          backendData.value.forEach(item => {
+            const projectName = item.projectName;
+            if (!companyData[projectName]) {
+              companyData[projectName] = [];
+            }
+            // 将 employeeName 拆分成多个员工
+            const employeeNames = item.employeeName.split(',').map(name => name.trim());
+            employeeNames.forEach(name => {
+              companyData[projectName].push({
+                employeeName: name,
+                departmentLeaderName: item.departmentLeaderName,
+                totalHours: 0,
+                workDays: Array(previousMonthDates.value.length).fill(null),
+              });
+            });
+          });
+          // 默认选中第一个项目（如果存在）
+          if (projects.value.length > 0) {
+            selectedCompany.value = projects.value[0];
+          }
+          // 初始化展开状态
+          users.value.forEach(user => {
+            isExpanded.value[user.employeeName] = true;
+          });
         })
         .catch(error => {
           console.error('API 请求失败:', error);
@@ -247,23 +219,64 @@ onMounted(() => {
     console.log('未找到用户信息');
   }
 });
-// 处理提交
+
+// 提交、保存和取消处理函数
 const handleSubmit = () => {
-  console.log("提交数据", users.value);
+  // 定义一个数组，用来存放所有加班记录（拍平后的）
+  const employees = [];
+
+  // 遍历当前项目下的每个员工，将每个有加班记录的日期转成一个对象
+  users.value.forEach(user => {
+    user.workDays.forEach((hours, index) => {
+      // 转换为数字
+      const overtimeHours = parseFloat(hours);
+      // 如果加班时长大于 0，则保存该记录
+      if (overtimeHours > 0) {
+        // 假设 previousMonthDates 返回格式为 "MM/dd"，需要转换成 "yyyy-MM-dd"
+        const currentYear = new Date().getFullYear();
+        const [month, day] = previousMonthDates.value[index].split('/');
+        const requestDate = `${currentYear}-${month.padStart(2, '0')}-${day.padStart(2, '0')}`;
+        employees.push({
+          uname: user.employeeName,
+          requestDate,
+          overtimeHours: String(overtimeHours) // 转为字符串以匹配 DTO 字段类型
+        });
+      }
+    });
+  });
+
+  // 假设所有员工的部门负责人一致，取第一个员工的部门负责人名称
+  const divisionLeader = users.value.length ? users.value[0].departmentLeaderName : '';
+
+  // 构造最终 payload 对象（注意字段重命名）
+  const payload = {
+    project: selectedCompany.value,
+    divisionLeader,
+    employees // 拍平后的加班记录数组
+  };
+
+  console.log("提交的 payload:", payload);
+
+  // 调用 API 提交数据
+  addOvertimeApplications(payload)
+      .then(response => { console.log('数据提交成功:', response.data); })
+      .catch(error => { console.error('数据提交失败:', error); });
 };
 
-// 处理保存
+
+
+
 const handleSave = () => {
   console.log("保存数据", users.value);
 };
 
-/** 取消按钮操作 **/
 const handleCancel = () => {
   router.push({ path: '/attendance/overtime' });
 };
 </script>
 
 <style scoped>
+/* 样式代码保持不变 */
 .container {
   width: 1622px;
   height: 935px;
@@ -272,21 +285,17 @@ const handleCancel = () => {
   border-radius: 2px;
   margin: 16px 24px 29px 24px;
 }
-
-/* 分割线样式 */
 .xian1 {
   width: 100%;
   height: 1px;
   border: 1px solid #dedede;
 }
-
 .xian2 {
   width: 100%;
   height: 1px;
   border: 1px solid #dedede;
   margin: 10px 0 19px 0;
 }
-/* 展开按钮样式 */
 .expand-button {
   width: 32px;
   height: 12px;
@@ -297,9 +306,8 @@ const handleCancel = () => {
   letter-spacing: 0;
   line-height: 12px;
   margin-left: 1450px;
- margin-top:10px;
+  margin-top:10px;
 }
-/*加班明细样式*/
 .overtime-detail {
   width: 72px;
   height: 12px;
@@ -311,30 +319,24 @@ const handleCancel = () => {
   line-height: 12px;
   margin-bottom: 35px;
 }
-
 .xian3 {
   width: 100%;
   height: 1px;
   border: 1px solid #dedede;
   margin: 24px 0 28px 0;
 }
-
 .work-report {
   padding: 20px;
   background: #fff;
 }
-
 .header h3 {
   font-size: 18px;
   font-weight: bold;
   margin-bottom: 5px;
 }
-
 .header-title {
   margin-top: 10px;
 }
-
-/* 工时填报周期样式 */
 .report-period {
   font-family: 'PingFangSC-Regular', sans-serif;
   font-weight: bold;
@@ -344,14 +346,11 @@ const handleCancel = () => {
   line-height: 12px;
   margin-top: 25px;
 }
-
 .header {
   display: flex;
-  align-items: center; /* 垂直居中对齐 */
-  gap: 16px; /* 设置元素之间的间距 */
+  align-items: center;
+  gap: 16px;
 }
-
-/* 可填报工时周期样式 */
 .small-text {
   width: 348px;
   height: 40px;
@@ -360,11 +359,9 @@ const handleCancel = () => {
   margin-left: 80px;
   margin-top: 5px;
 }
-
 .div1 {
   height: 13px;
 }
-
 .small-text1 {
   width: 320px;
   height: 12px;
@@ -377,12 +374,9 @@ const handleCancel = () => {
   letter-spacing: 0;
   line-height: 12px;
 }
-
 .total-hours {
   margin-left: 400px;
 }
-
-/* 当前工期总工时样式 */
 .sum-time {
   opacity: 0.99;
   font-family: YouSheBiaoTiHei;
@@ -391,8 +385,6 @@ const handleCancel = () => {
   letter-spacing: 0;
   line-height: 12px;
 }
-
-/* 当前工期总工时数值样式 */
 .sum-time2 {
   width: 38px;
   height: 12px;
@@ -402,28 +394,22 @@ const handleCancel = () => {
   letter-spacing: 0;
   line-height: 12px;
 }
-
 .user-section {
   margin-top: 20px;
   padding: 15px;
   border: 1px solid #ddd;
   border-radius: 5px;
 }
-
-
 .day-cell span {
   display: block;
   font-size: 12px;
   color: gray;
 }
-
 .total-hours1 {
   margin-top: 10px;
   font-size: 16px;
   font-weight: bold;
 }
-
-/* 总工时数值样式 */
 .total-value {
   width: 15px;
   height: 12px;
@@ -434,8 +420,6 @@ const handleCancel = () => {
   letter-spacing: 0;
   line-height: 12px;
 }
-
-/* 总工时文字样式 */
 .total-hours-label {
   width: 80px;
   height: 12px;
@@ -446,8 +430,6 @@ const handleCancel = () => {
   letter-spacing: 0;
   line-height: 12px;
 }
-
-/* 用户名样式 */
 .user-name-style {
   width: 60px;
   height: 12px;
@@ -458,8 +440,6 @@ const handleCancel = () => {
   letter-spacing: 0;
   line-height: 12px;
 }
-
-/*  事业部负责人样式 */
 .responsible {
   font-family: 'PingFangSC-Regular', sans-serif;
   font-weight: 400;
@@ -469,31 +449,23 @@ const handleCancel = () => {
   line-height: 12px;
   margin-left: 125px;
 }
-
-/* 工作日样式 */
 .work-grid {
   width: 100%;
   display: grid;
-  grid-template-columns: repeat(16, 1fr); /* 修改为 16 列 */
+  grid-template-columns: repeat(16, 1fr);
   gap: 5px;
   margin-top: 20px;
 }
-
-/* 工作日内容样式 */
 .day-cell {
   text-align: center;
   margin-top:14px;
 }
-
-/* 工作日标签样式 */
 .day-label {
   width: 90px;
   height: 40px;
   background: #F0F0F0;
   border: 1px solid #DEDEDE;
 }
-
-/* 工作日标签数字样式 */
 .day-label-style {
   font-family: PingFangSC-Regular, sans-serif;
   font-weight: 400;
@@ -503,16 +475,12 @@ const handleCancel = () => {
   text-align: center;
   line-height: 12px;
 }
-
-/* 工作日输入框样式 */
 .day-input {
   width: 90px;
   height: 40px;
   background: #FFFFFF;
   border: 1px solid #DEDEDE;
 }
-
-/* 工作日输入框样式 */
 .user-input {
   width: 80px;
   height: 28px;
@@ -521,28 +489,23 @@ const handleCancel = () => {
   border-radius: 2px;
   margin: 6px 5px 6px 5px;
 }
-
-/* 按钮样式 */
 .actions {
   margin-top: 70px;
   text-align: right;
   margin-right: 56px;
 }
-
 .actions .el-button {
   margin-left: 24px;
   width: 116px;
   height: 42px;
 }
-
 .company-switch {
   display: flex;
   gap: 20px;
   margin-bottom: 0;
 }
-
 .company-name {
-  margin: 16px 72px 11px 32px; /* 上 16px, 右 72px, 下 11px, 左 32px */
+  margin: 16px 72px 11px 32px;
   font-family: PingFangSC-Regular, sans-serif;
   font-weight: 400;
   font-size: 16px;
@@ -555,17 +518,15 @@ const handleCancel = () => {
   transition: color 0.3s ease-in-out;
   position: relative;
 }
-
 .company-name.active {
-  color: #007bff; /* 选中后变蓝色 */
+  color: #007bff;
   font-weight: bold;
   position: relative;
 }
-
 .company-name.active::after {
   content: "";
   display: block;
-  width: 80%; /* 让下划线宽度与文字匹配 */
+  width: 80%;
   height: 3px;
   background-color: #007bff;
   position: absolute;

src/views/attendance/overtimeApplication/index.vue

@@ -108,7 +108,7 @@
         <!--        <el-table-column label="id号" align="center" prop="id"/>-->
 <!--        <el-table-column label="加班单号" align="center" prop="overtimeId" width="150px"/>-->
         <el-table-column label="姓名" align="center" prop="uname"/>
-        <el-table-column label="申请日期" align="center" prop="requestDate" >
+        <el-table-column label="加班日期" align="center" prop="requestDate" >
           <template #default="scope">
             <span>{{ parseTime(scope.row.requestDate, '{y}-{m}-{d}') }}</span>
           </template>
@@ -125,7 +125,7 @@
 <!--          </template>-->
 <!--        </el-table-column>-->
 <!--        <el-table-column label="星期" align="center" prop="dayOfWeek"/>-->
-        <el-table-column label="加班时长" align="center" prop="overtimeHours"/>
+        <el-table-column label="加班时长(小时)" align="center" prop="overtimeHours"/>
 <!--        <el-table-column label="加班天数" align="center" prop="overtimeDays"/>-->
         <el-table-column label="归属项目" align="center" prop="project"/>
         <el-table-column label="项目负责人" align="center" prop="projectLeader"/>