DeXun/klp-oa
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(attendance): 优化考勤记录导出功能支持部门选择

Browse Source 
- 修改后端接口参数名称从 deptname 改为 enames
- 实现前端多员工选择下拉框组件
- 添加部门联动员工动态加载功能
- 重构导出逻辑支持按员工列表精确过滤
- 修复数组参数序列化导致的逗号编码问题
- 新增获取部门列表和按部门查询员工的API接口
- 实现导出表单验证和异步处理机制
This commit is contained in:
Joshi
2026-07-06 10:54:57 +08:00
parent 660e8049cd
commit 55ae4ad332
9 changed files with 180 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
klp-ui/src/api/wms/attendance.js
View File

@@ -63,6 +63,19 @@ export function exportAttendanceReport(params) {
url: '/wms/attendanceRecords/exportReport',
method: 'post',
params: params,
responseType: 'blob'
responseType: 'blob',
// enames 是数组，需要特殊序列化避免逗号被二次编码
paramsSerializer: params => {
const searchParams = new URLSearchParams();
Object.keys(params).forEach(key => {
const val = params[key];
if (Array.isArray(val)) {
searchParams.append(key, val.join(','));
} else if (val !== undefined && val !== null && val !== '') {
searchParams.append(key, val);
}
});
return searchParams.toString();
}
})
}

17
klp-ui/src/api/wms/employeeInfo.js
View File

@@ -42,3 +42,20 @@ export function delEmployeeInfo(infoId) {
method: 'delete'
})
}
// 获取所有不重复的部门名称
export function getDepts() {
return request({
url: '/wms/employeeInfo/depts',
method: 'get'
})
}
// 根据部门查询在职员工
export function getEmployeesByDept(dept) {
return request({
url: '/wms/employeeInfo/employeesByDept',
method: 'get',
params: { dept }
})
}

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

@@ -211,7 +211,14 @@
<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-select v-model="exportFormData.deptname" placeholder="请选择部门（可选）" clearable filterable @change="handleDeptChange" style="width: 100%">
<el-option v-for="dept in deptList" :key="dept" :label="dept" :value="dept" />
</el-select>
</el-form-item>
<el-form-item label="员工" prop="enames" v-if="exportFormData.deptname">
<el-select v-model="exportFormData.enames" placeholder="请选择员工（可选，不选则导出整个部门）" multiple clearable filterable style="width: 100%">
<el-option v-for="emp in employeeList" :key="emp.name" :label="emp.name + ' (' + emp.jobType + ')'" :value="emp.name" />
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
@@ -224,6 +231,7 @@
<script>
import { listRecords, getRecords, delRecords, addRecords, updateRecords, syncRecords, exportAttendanceReport } from "@/api/wms/attendance";
import { getDepts, getEmployeesByDept } from "@/api/wms/employeeInfo";
export default {
name: "Records",
@@ -247,12 +255,17 @@ export default {
exportDialogVisible: false,
// 导出loading
exportLoading: false,
// 部门列表
deptList: [],
// 员工列表（根据部门动态加载）
employeeList: [],
// 导出表单
exportFormData: {
dateRange: [],
pin: "",
ename: "",
deptname: ""
deptname: "",
enames: []
},
// 导出表单校验
exportRules: {
@@ -474,6 +487,12 @@ export default {
this.exportFormData.pin = "";
this.exportFormData.ename = "";
this.exportFormData.deptname = "";
this.exportFormData.enames = [];
this.employeeList = [];
// 加载部门列表
getDepts().then(res => {
this.deptList = res.data || [];
});
this.exportDialogVisible = true;
this.$nextTick(() => {
this.$refs.exportForm && this.$refs.exportForm.clearValidate();
@@ -484,35 +503,66 @@ export default {
}
});
},
/** 部门变更时加载对应员工 */
handleDeptChange(dept) {
this.exportFormData.enames = [];
if (dept) {
getEmployeesByDept(dept).then(res => {
this.employeeList = res.data || [];
});
} else {
this.employeeList = [];
}
},
/** 执行导出考勤记录表 */
doExportReport() {
this.$refs.exportForm.validate(valid => {
if (!valid) return;
const [startDate, endDate] = this.exportFormData.dateRange;
this.exportLoading = true;
exportAttendanceReport({
async doExportReport() {
const valid = await this.$refs.exportForm.validate().catch(() => false);
if (!valid) return;
const [startDate, endDate] = this.exportFormData.dateRange;
this.exportLoading = true;
try {
let enames = undefined;
if (this.exportFormData.deptname) {
// 选了部门：通过 wms_employee_info 查员工姓名来过滤
if (this.exportFormData.enames && this.exportFormData.enames.length > 0) {
enames = this.exportFormData.enames;
} else {
const res = await getEmployeesByDept(this.exportFormData.deptname);
const allEmps = res.data || [];
enames = allEmps.map(e => e.name);
if (enames.length === 0) {
this.$modal.msgWarning('该部门下没有在职员工');
this.exportLoading = false;
return;
}
}
}
const res = await 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;
pin: !enames ? (this.exportFormData.pin || undefined) : undefined,
ename: !enames ? (this.exportFormData.ename || undefined) : undefined,
enames: enames
});
});
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 (e) {
this.exportLoading = false;
}
}
}
};