feat(leave): 实现批量请假时段功能

添加多时段请假表单支持，允许用户一次提交多个请假时段
重构表单数据结构为数组格式，支持动态增减时段
实现批量提交逻辑，自动处理成功和失败情况
添加时段校验规则和样式优化

klp-ui/src/views/wms/hrm/apply/leave.vue

@@ -9,8 +9,6 @@
           <!-- 左侧是新增表单 -->
           <el-form ref="form" :model="form" :rules="rules" label-width="80px" v-loading="loading">
             <el-form-item label="审批部门" prop="applicantDeptName">
-              <!-- <dict-select v-model="form.applicantDeptName" dict-type="hrm_department"
-                placeholder="请选择审批部门"></dict-select> -->
               <el-select v-model="form.applicantDeptName" placeholder="请选择审批部门" filterable @change="getDeptLeader">
                 <el-option v-for="item in deptOptions" :key="item.deptId"
                   :label="item.deptName + '(' + (item.leader || '无负责人') + ')'" :value="item.deptName"></el-option>
@@ -26,28 +24,54 @@
               <dict-select v-model="form.applicantName" dict-type="hrm_leave_employee"
                 placeholder="请选择请假人姓名"></dict-select>
             </el-form-item>
-            <el-form-item label="开始时间" prop="startTime">
+
-              <el-date-picker clearable v-model="form.startTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
+            <!-- 批量请假时段区域 -->
-                placeholder="请选择请假开始时间">
+            <div v-for="(item, index) in form.list" :key="index" class="leave-item">
-              </el-date-picker>
+              <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
-            </el-form-item>
+                <span style="font-weight: 600;">请假时段 {{ index + 1 }}</span>
-            <el-form-item label="结束时间" prop="endTime">
+                <!-- 只有多行时显示删除按钮 -->
-              <el-date-picker clearable v-model="form.endTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
+                <el-button 
-                placeholder="请选择请假结束时间">
+                  v-if="form.list.length > 1" 
-              </el-date-picker>
+                  type="text" 
-            </el-form-item>
+                  icon="el-icon-delete" 
-            <el-form-item label="请假班次" prop="leaveShift">
+                  size="mini" 
-              <el-select v-model="form.leaveShift" placeholder="请选择请假班次">
+                  @click="removeLeaveItem(index)"
-                <el-option v-for="dict in dict.type.hrm_leave_shift" :key="dict.value" :label="dict.label"
+                  style="color: #f56c6c;"
-                  :value="dict.value"></el-option>
+                >删除</el-button>
-              </el-select>
+              </div>
-            </el-form-item>
+              <!-- 注意：prop需要指定数组索引，支持嵌套校验 -->
-            <el-form-item label="请假天数" prop="leaveDays">
+              <el-form-item label="开始时间" :prop="`list[${index}].startTime`" :rules="rules.listItem.startTime">
-              <el-input v-model="form.leaveDays" placeholder="选择时间后自动计算，也可手动修改" />
+                <el-date-picker clearable v-model="item.startTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
-            </el-form-item>
+                  placeholder="请选择请假开始时间" @change="calculateLeaveDays(index)">
-            <el-form-item label="请假原因" prop="leaveReason">
+                </el-date-picker>
-              <el-input v-model="form.leaveReason" type="textarea" placeholder="请输入内容" />
+              </el-form-item>
+              <el-form-item label="结束时间" :prop="`list[${index}].endTime`" :rules="rules.listItem.endTime">
+                <el-date-picker clearable v-model="item.endTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
+                  placeholder="请选择请假结束时间" @change="calculateLeaveDays(index)">
+                </el-date-picker>
+              </el-form-item>
+              <el-form-item label="请假班次" :prop="`list[${index}].leaveShift`" :rules="rules.listItem.leaveShift">
+                <el-select v-model="item.leaveShift" placeholder="请选择请假班次">
+                  <el-option v-for="dict in dict.type.hrm_leave_shift" :key="dict.value" :label="dict.label"
+                    :value="dict.value"></el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item label="请假天数" :prop="`list[${index}].leaveDays`" :rules="rules.listItem.leaveDays">
+                <el-input v-model="item.leaveDays" placeholder="选择时间后自动计算，也可手动修改" />
+              </el-form-item>
+              <el-form-item label="请假原因" :prop="`list[${index}].leaveReason`" :rules="rules.listItem.leaveReason">
+                <el-input v-model="item.leaveReason" type="textarea" placeholder="请输入内容" />
+              </el-form-item>
+              <el-divider v-if="index < form.list.length - 1"></el-divider>
+            </div>
+
+            <!-- 新增请假时段按钮 -->
+            <el-form-item>
+              <el-button type="dashed" icon="el-icon-plus" @click="addLeaveItem" style="width: 100%;">
+                新增请假时段
+              </el-button>
             </el-form-item>
+
             <el-form-item label="附件" prop="attachmentUrls">
               <FileUpload v-model="form.attachmentUrls" :max-count="1" :show-file-list="true" />
             </el-form-item>
@@ -56,8 +80,7 @@
             </el-form-item>
           </el-form>
           <div style="text-align: center;">
-            <el-button type="primary" @click="handleSubmit" v-loading="loading">{{ form.leaveId ? '更新申请' : '提交申请'
+            <el-button type="primary" @click="handleSubmit" v-loading="buttonLoading">{{ form.leaveId ? '更新申请' : '批量提交申请' }}</el-button>
-              }}</el-button>
             <el-button @click="handleReset">重置表单</el-button>
           </div>
         </el-card>
@@ -108,7 +131,6 @@
               <template slot-scope="scope" v-if="scope.row.approvalStatus === '待审批'">
                 <el-button icon="el-icon-edit" size="mini" @click="handleEdit(scope.row)">修改</el-button>
                 <el-button icon="el-icon-delete" size="mini" @click="handleWithdraw(scope.row)">撤回</el-button>
-                <!-- <el-button type="primary" size="mini" @click="handleApprove(scope.row)">删除</el-button> -->
               </template>
             </el-table-column>
           </el-table>
@@ -137,7 +159,15 @@ export default {
   data() {
     return {
       // 表单参数
-      form: {},
+      form: {
+        list: [{  // 初始化默认一行请假时段
+          startTime: undefined,
+          endTime: undefined,
+          leaveShift: undefined,
+          leaveDays: undefined,
+          leaveReason: undefined
+        }]
+      },
       loading: false,
       buttonLoading: false,
       leaveRequestList: [],
@@ -149,37 +179,25 @@ export default {
         applyType: 'leave',
         createBy: this.$store.getters.name,
       },
-      // 表单校验规则【核心新增：完整必填校验】
+      // 表单校验规则【适配数组嵌套校验】
       rules: {
-        leaveTitle: [{ required: true, message: '请假原因不能为空', trigger: ['blur', 'change'] }],
         leaveType: [{ required: true, message: '请假类型不能为空', trigger: 'change' }],
         applicantName: [{ required: true, message: '请假人姓名不能为空', trigger: 'change' }],
-        startTime: [{ required: true, message: '开始时间不能为空', trigger: 'change' }],
-        endTime: [{ required: true, message: '结束时间不能为空', trigger: 'change' }],
-        leaveShift: [{ required: true, message: '请假班次不能为空', trigger: 'change' }],
-        leaveDays: [
-          { required: true, message: '请假天数不能为空', trigger: ['blur', 'change'] },
-        ],
         applicantDeptName: [{ required: true, message: '审批部门不能为空', trigger: 'change' }],
+        attachmentUrls: [{ required: false }],
+        remark: [{ required: false }],
+        // 数组项的校验规则
+        listItem: {
+          startTime: [{ required: true, message: '开始时间不能为空', trigger: 'change' }],
+          endTime: [{ required: true, message: '结束时间不能为空', trigger: 'change' }],
+          leaveShift: [{ required: true, message: '请假班次不能为空', trigger: 'change' }],
+          leaveDays: [{ required: true, message: '请假天数不能为空', trigger: ['blur', 'change'] }],
+          leaveReason: [{ required: true, message: '请假原因不能为空', trigger: ['blur', 'change'] }]
+        }
       },
       deptOptions: []
     }
   },
-  // 核心新增：监听开始/结束时间变化，自动计算天数
-  watch: {
-    'form.startTime': {
-      handler() {
-        this.calculateLeaveDays()
-      },
-      immediate: false
-    },
-    'form.endTime': {
-      handler() {
-        this.calculateLeaveDays()
-      },
-      immediate: false
-    },
-  },
   created() {
     this.getList();
     this.getDeptList();
@@ -218,6 +236,24 @@ export default {
         this.loading = false;
       });
     },
+    // 新增请假时段行
+    addLeaveItem() {
+      this.form.list.push({
+        startTime: undefined,
+        endTime: undefined,
+        leaveShift: undefined,
+        leaveDays: undefined,
+        leaveReason: undefined
+      });
+    },
+    // 删除指定索引的请假时段行
+    removeLeaveItem(index) {
+      if (this.form.list.length <= 1) {
+        this.$message.warning('至少保留一行请假时段');
+        return;
+      }
+      this.form.list.splice(index, 1);
+    },
     handleReset() {
       this.reset()
     },
@@ -225,22 +261,19 @@ export default {
     reset() {
       this.form = {
         leaveId: undefined,
-        leaveTitle: undefined,
         leaveType: undefined,
         applicantName: undefined,
         applicantDeptName: undefined,
-        startTime: undefined,
+        approverName: undefined,
-        endTime: undefined,
-        leaveShift: undefined,
-        leaveDays: undefined,
-        leaveReason: undefined,
         attachmentUrls: undefined,
-        createBy: undefined,
+        remark: undefined,
-        createTime: undefined,
+        list: [{  // 重置后保留默认一行
-        updateBy: undefined,
+          startTime: undefined,
-        updateTime: undefined,
+          endTime: undefined,
-        delFlag: undefined,
+          leaveShift: undefined,
-        remark: undefined
+          leaveDays: undefined,
+          leaveReason: undefined
+        }]
       };
       this.resetForm("form");
     },
@@ -261,34 +294,93 @@ export default {
       const leaveId = row.applyId
       getLeaveRequest(leaveId).then(response => {
         this.loading = false;
-        this.form = response.data;
+        const data = response.data;
+        // 编辑时默认填充为单行数据（因为后端是单条记录）
+        this.form = {
+          ...data,
+          list: [{
+            startTime: data.startTime,
+            endTime: data.endTime,
+            leaveShift: data.leaveShift,
+            leaveDays: data.leaveDays,
+            leaveReason: data.leaveReason
+          }]
+        };
       });
     },
-    /** 提交按钮 */
+    /** 批量提交按钮（核心修改） */
-    handleSubmit() {
+    async handleSubmit() {
-      this.form.leaveTitle = `${this.form.applicantName}-${this.form.leaveType}-${this.form.startTime}-${this.form.leaveReason || ''}`
+      try {
-      this.$refs["form"].validate(valid => {
+        // 1. 先校验表单
-        if (valid) {
+        const valid = await new Promise((resolve) => {
-          this.buttonLoading = true;
+          this.$refs["form"].validate((valid) => {
-          if (this.form.leaveId != null) {
+            resolve(valid);
-            updateLeaveRequest(this.form).then(response => {
+          });
-              this.$modal.msgSuccess("修改成功");
+        });
-              this.getList();
+
-              this.reset()
+        if (!valid) return;
-            }).finally(() => {
+
-              this.buttonLoading = false;
+        this.buttonLoading = true;
-            });
+        const { list, ...commonFields } = this.form; // 拆分公共字段和时段列表
-          } else {
+        let successCount = 0;
-            addLeaveRequest(this.form).then(response => {
+        let failCount = 0;
-              this.$modal.msgSuccess("新增成功");
+        const failReasons = [];
-              this.getList();
+
-              this.reset()
+        // 2. 循环处理每个时段，逐个发送请求
-            }).finally(() => {
+        for (let i = 0; i < list.length; i++) {
-              this.buttonLoading = false;
+          const item = list[i];
-            });
+          // 组装单个请求的数据（公共字段 + 当前时段字段）
+          const singleRequestData = {
+            ...commonFields,
+            startTime: item.startTime,
+            endTime: item.endTime,
+            leaveShift: item.leaveShift,
+            leaveDays: item.leaveDays,
+            leaveReason: item.leaveReason,
+            // 生成单条记录的标题
+            leaveTitle: `${commonFields.applicantName}-${commonFields.leaveType}-时段${i+1}-${item.startTime}-${item.leaveReason || ''}`
+          };
+
+          try {
+            if (commonFields.leaveId != null) {
+              // 编辑模式：仅支持修改单条（因为后端是单条记录）
+              if (list.length > 1) {
+                this.$message.warning('编辑模式仅支持单条修改，已自动取第一行数据');
+                await updateLeaveRequest({ ...singleRequestData, leaveId: commonFields.leaveId });
+                successCount++;
+                break; // 编辑时只处理第一条
+              } else {
+                await updateLeaveRequest({ ...singleRequestData, leaveId: commonFields.leaveId });
+                successCount++;
+              }
+            } else {
+              // 新增模式：批量提交多条
+              await addLeaveRequest(singleRequestData);
+              successCount++;
+            }
+          } catch (error) {
+            failCount++;
+            failReasons.push(`时段${i+1}提交失败：${error.message || '未知错误'}`);
+            // 失败后继续提交下一条，不中断批量操作
+            continue;
           }
         }
-      });
+
+        // 3. 提交完成后反馈结果
+        if (failCount === 0) {
+          this.$modal.msgSuccess(`批量提交成功！共提交${successCount}条请假申请`);
+        } else {
+          this.$modal.msgWarning(`批量提交完成！成功${successCount}条，失败${failCount}条\n失败原因：${failReasons.join('；')}`);
+        }
+
+        // 4. 刷新列表并重置表单
+        this.getList();
+        this.reset();
+      } catch (error) {
+        this.$modal.msgError('批量提交异常：' + error.message);
+      } finally {
+        this.buttonLoading = false;
+      }
     },
     handleWithdraw(row) {
       this.$modal.confirm('是否确认撤回请假申请编号为"' + row.applyId + '"的数据项？').then(() => {
@@ -316,7 +408,6 @@ export default {
       }
       return typeMap[status] || 'default'
     },
-
     // 获取审批状态的中文文本
     getStatusText(status) {
       const textMap = {
@@ -327,27 +418,36 @@ export default {
       }
       return textMap[status] || '未知状态'
     },
-    // 核心新增：自动计算请假天数的方法
+    // 计算指定行的请假天数
-    calculateLeaveDays() {
+    calculateLeaveDays(index) {
-      const { startTime, endTime } = this.form;
+      const item = this.form.list[index];
       // 两个时间都选择后才计算
-      if (startTime && endTime) {
+      if (item.startTime && item.endTime) {
         // 转成时间戳
-        const start = new Date(startTime).getTime();
+        const start = new Date(item.startTime).getTime();
-        const end = new Date(endTime).getTime();
+        const end = new Date(item.endTime).getTime();
         // 判断结束时间不能小于开始时间
         if (end < start) {
           this.$modal.msgWarning('结束时间不能早于开始时间，请重新选择！');
-          this.form.leaveDays = undefined;
+          item.leaveDays = undefined;
           return;
         }
         // 计算时间差(毫秒) → 转天 → 保留2位小数
         const diffTime = end - start;
         const diffDays = (diffTime / (1000 * 60 * 60 * 24)).toFixed(2);
-        // 赋值到天数输入框
+        // 赋值到对应行的天数输入框
-        this.form.leaveDays = diffDays;
+        item.leaveDays = diffDays;
       }
     }
   }
 }
-</script>
+</script>
+
+<style scoped>
+.leave-item {
+  margin-bottom: 15px;
+  padding: 10px;
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+}
+</style>