feat(attendance): 新增考勤记录表导出功能

- 在前端API中添加exportAttendanceReport方法用于导出考勤记录
- 在AttendanceRecordsController中添加exportReport接口支持考勤表导出
- 在AttendanceRecordsServiceImpl中实现完整的考勤记录表Excel导出逻辑
- 添加员工分组、按日期汇总打卡时间的业务处理
- 创建多种Excel样式包括标题、表头、日期列和明细行样式
- 在前端页面中新增导出按钮和导出参数设置对话框
- 实现导出前确认同步状态的交互逻辑
- 支持按工号、姓名、部门筛选条件进行考勤表导出

klp-ui/src/api/wms/attendance.js

@@ -56,3 +56,13 @@ export function syncRecords({ starttime, endtime }) {
     }
   })
 }
+
+// 导出考勤记录表
+export function exportAttendanceReport(params) {
+  return request({
+    url: '/wms/attendanceRecords/exportReport',
+    method: 'post',
+    params: params,
+    responseType: 'blob'
+  })
+}

klp-ui/src/views/wms/hrm/attendance/sync.vue

@@ -69,6 +69,7 @@
         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
         <el-button type="warning" icon="el-icon-upload" size="mini" @click="handleSync">同步</el-button>
+        <el-button type="success" icon="el-icon-download" size="mini" @click="handleExportReport">导出考勤表</el-button>
       </el-form-item>
     </el-form>
 
@@ -187,11 +188,42 @@
         <el-button @click="syncDialogVisible = false">取消</el-button>
       </div>
     </el-dialog>
+
+    <!-- 导出考勤表对话框 -->
+    <el-dialog title="导出考勤记录表" :visible.sync="exportDialogVisible" width="480px" append-to-body>
+      <el-form ref="exportForm" :model="exportFormData" :rules="exportRules" label-width="90px">
+        <el-form-item label="考勤时间" prop="dateRange">
+          <el-date-picker
+            v-model="exportFormData.dateRange"
+            type="daterange"
+            range-separator="~"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            value-format="yyyy-MM-dd"
+            :picker-options="pickerOptions"
+            style="width: 100%">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="员工编号" prop="pin">
+          <el-input v-model="exportFormData.pin" placeholder="请输入员工编号（可选）" clearable />
+        </el-form-item>
+        <el-form-item label="姓名" prop="ename">
+          <el-input v-model="exportFormData.ename" placeholder="请输入姓名（可选）" clearable />
+        </el-form-item>
+        <el-form-item label="部门" prop="deptname">
+          <el-input v-model="exportFormData.deptname" placeholder="请输入部门（可选）" clearable />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button :loading="exportLoading" type="primary" @click="doExportReport">确定导出</el-button>
+        <el-button @click="exportDialogVisible = false">取消</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import { listRecords, getRecords, delRecords, addRecords, updateRecords, syncRecords } from "@/api/wms/attendance";
+import { listRecords, getRecords, delRecords, addRecords, updateRecords, syncRecords, exportAttendanceReport } from "@/api/wms/attendance";
 
 export default {
   name: "Records",
@@ -211,6 +243,41 @@ export default {
       syncRules: {
         syncMonth: [{ required: true, message: "请选择同步月份", trigger: "change" }]
       },
+      // 导出弹窗
+      exportDialogVisible: false,
+      // 导出loading
+      exportLoading: false,
+      // 导出表单
+      exportFormData: {
+        dateRange: [],
+        pin: "",
+        ename: "",
+        deptname: ""
+      },
+      // 导出表单校验
+      exportRules: {
+        dateRange: [{ required: true, message: "请选择考勤时间范围", trigger: "change" }]
+      },
+      // 日期选择器快捷选项
+      pickerOptions: {
+        shortcuts: [{
+          text: '本月',
+          onClick(picker) {
+            const now = new Date();
+            const start = new Date(now.getFullYear(), now.getMonth(), 1);
+            const end = new Date(now.getFullYear(), now.getMonth() + 1, 0);
+            picker.$emit('pick', [start, end]);
+          }
+        }, {
+          text: '上月',
+          onClick(picker) {
+            const now = new Date();
+            const start = new Date(now.getFullYear(), now.getMonth() - 1, 1);
+            const end = new Date(now.getFullYear(), now.getMonth(), 0);
+            picker.$emit('pick', [start, end]);
+          }
+        }]
+      },
       // 遮罩层
       loading: true,
       // 选中数组
@@ -391,6 +458,61 @@ export default {
       this.download('wms/records/export', {
         ...this.queryParams
       }, `records_${new Date().getTime()}.xlsx`)
+    },
+    /** 导出考勤记录表 */
+    handleExportReport() {
+      this.$modal.confirm(
+        '导出前请先确保已同步最新的考勤数据，是否继续导出？',
+        '提示',
+        {
+          confirmButtonText: '已同步，继续导出',
+          cancelButtonText: '去同步',
+          type: 'info'
+        }
+      ).then(() => {
+        this.exportFormData.dateRange = [];
+        this.exportFormData.pin = "";
+        this.exportFormData.ename = "";
+        this.exportFormData.deptname = "";
+        this.exportDialogVisible = true;
+        this.$nextTick(() => {
+          this.$refs.exportForm && this.$refs.exportForm.clearValidate();
+        });
+      }).catch(action => {
+        if (action === 'cancel') {
+          this.handleSync();
+        }
+      });
+    },
+    /** 执行导出考勤记录表 */
+    doExportReport() {
+      this.$refs.exportForm.validate(valid => {
+        if (!valid) return;
+        const [startDate, endDate] = this.exportFormData.dateRange;
+        this.exportLoading = true;
+        exportAttendanceReport({
+          startTime: startDate,
+          endTime: endDate,
+          pin: this.exportFormData.pin || undefined,
+          ename: this.exportFormData.ename || undefined,
+          deptname: this.exportFormData.deptname || undefined
+        }).then(res => {
+          const blob = new Blob([res], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
+          const url = window.URL.createObjectURL(blob);
+          const link = document.createElement('a');
+          link.href = url;
+          link.download = `考勤记录表_${startDate}_${endDate}.xlsx`;
+          document.body.appendChild(link);
+          link.click();
+          document.body.removeChild(link);
+          window.URL.revokeObjectURL(url);
+          this.$modal.msgSuccess("导出成功");
+          this.exportLoading = false;
+          this.exportDialogVisible = false;
+        }).catch(() => {
+          this.exportLoading = false;
+        });
+      });
     }
   }
 };