feat(HRM): 添加附件显示组件并优化表单逻辑

添加FileList组件用于显示附件列表
在请假和外出申请详情页中显示附件
优化审批部门选择逻辑,仅在新增时显示
修复请假申请编辑时的审批类型校验问题
This commit is contained in:
砂糖
2026-03-11 16:48:44 +08:00
parent f561b4eb0b
commit 5b6286326b
4 changed files with 159 additions and 25 deletions

View File

@@ -8,7 +8,7 @@
</template>
<!-- 左侧是新增表单 -->
<el-form ref="form" :model="form" :rules="rules" label-width="80px" v-loading="loading">
<el-form-item label="审批部门" prop="deptId">
<el-form-item v-if="!form.outId" label="审批部门" prop="deptId">
<el-select v-model="form.deptId" placeholder="请选择审批部门" filterable @change="getDeptLeader">
<el-option v-for="item in deptOptions" :key="item.deptId"
:label="item.deptName + '(' + (item.leaderNickName || '无负责人') + ')'" :value="item.deptId"></el-option>

View File

@@ -8,7 +8,7 @@
</template>
<!-- 左侧是新增表单 -->
<el-form ref="form" :model="form" :rules="rules" label-width="80px" v-loading="loading">
<el-form-item label="审批部门" prop="deptId">
<el-form-item label="审批部门" prop="deptId" v-if="!form.leaveId">
<el-select v-model="form.deptId" placeholder="请选择审批部门" filterable @change="getDeptLeader">
<el-option v-for="item in deptOptions" :key="item.deptId"
:label="item.deptName + '(' + (item.leaderNickName || '无负责人') + ')'" :value="item.deptId"></el-option>
@@ -29,14 +29,8 @@
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
<span style="font-weight: 600;">请假时段 {{ index + 1 }}</span>
<!-- 只有多行时显示删除按钮 -->
<el-button
v-if="form.list.length > 1"
type="text"
icon="el-icon-delete"
size="mini"
@click="removeLeaveItem(index)"
style="color: #f56c6c;"
>删除</el-button>
<el-button v-if="form.list.length > 1" type="text" icon="el-icon-delete" size="mini"
@click="removeLeaveItem(index)" style="color: #f56c6c;">删除</el-button>
</div>
<!-- 注意prop需要指定数组索引支持嵌套校验 -->
<el-form-item label="开始时间" :prop="`list[${index}].startTime`" :rules="rules.listItem.startTime">
@@ -79,7 +73,9 @@
</el-form-item>
</el-form>
<div style="text-align: center;">
<el-button type="primary" @click="handleSubmit" v-loading="buttonLoading">{{ form.leaveId ? '更新申请' : '批量提交申请' }}</el-button>
<el-button type="primary" @click="handleSubmit" v-loading="buttonLoading">{{ form.leaveId ? '更新申请' :
'批量提交申请'
}}</el-button>
<el-button @click="handleReset">重置表单</el-button>
</div>
</el-card>
@@ -107,7 +103,8 @@
<el-table-column label="审批情况" align="center" prop="approverName">
<template slot-scope="scope">
<!-- 每行一个不要出现换行将英文映射成中文 -->
<el-tag v-for="task in scope.row.tasks" :key="task.taskId" :type="getTaskStatusTagType(task.taskStatus)" style="margin-right: 8px;">
<el-tag v-for="task in scope.row.tasks" :key="task.taskId" :type="getTaskStatusTagType(task.taskStatus)"
style="margin-right: 8px;">
<!-- taskStatus包括pending, approved, rejected, 根据状态设置不同的标签类型 -->
{{ task.approverName }} {{ getTaskStatusText(task.taskStatus) }}
</el-tag>
@@ -307,7 +304,8 @@ export default {
endTime: data.endTime,
leaveShift: data.leaveShift,
leaveDays: data.leaveDays,
leaveReason: data.leaveReason
leaveReason: data.leaveReason,
oldApprovalType: data.approvalType,
}]
};
});
@@ -327,7 +325,7 @@ export default {
this.buttonLoading = true;
const { list, ...commonFields } = this.form; // 拆分公共字段和时段列表
let successCount = 0;
let failCount = 0;
let failCount = 0;
const failReasons = [];
// 2. 循环处理每个时段,逐个发送请求
@@ -342,21 +340,23 @@ export default {
leaveDays: item.leaveDays,
leaveReason: item.leaveReason,
// 生成单条记录的标题
leaveTitle: `${commonFields.applicantName}-${commonFields.leaveType}-时段${i+1}-${item.startTime}-${item.leaveReason || ''}`,
leaveTitle: `${commonFields.applicantName}-${commonFields.leaveType}-时段${i + 1}-${item.startTime}-${item.leaveReason || ''}`,
approvalType: approvalType,
};
try {
if (commonFields.leaveId != null) {
if (singleRequestData.oldApprovalType !== approvalType) {
this.$message.warning('请假时长变动过大,请撤销后重新发起');
failCount++;
continue;
}
await updateLeaveRequest({ ...singleRequestData, leaveId: commonFields.leaveId });
successCount++;
// 编辑模式:仅支持修改单条(因为后端是单条记录)
if (list.length > 1) {
this.$message.warning('编辑模式仅支持单条修改,已自动取第一行数据');
await updateLeaveRequest({ ...singleRequestData, leaveId: commonFields.leaveId });
successCount++;
break; // 编辑时只处理第一条
} else {
await updateLeaveRequest({ ...singleRequestData, leaveId: commonFields.leaveId });
successCount++;
}
} else {
// 新增模式:批量提交多条
@@ -365,19 +365,23 @@ export default {
}
} catch (error) {
failCount++;
failReasons.push(`时段${i+1}提交失败:${error.message || '未知错误'}`);
failReasons.push(`时段${i + 1}提交失败:${error.message || '未知错误'}`);
// 失败后继续提交下一条,不中断批量操作
continue;
}
}
// 3. 提交完成后反馈结果
if (failCount === 0) {
this.$modal.msgSuccess(`批量提交成功!共提交${successCount}条请假申请`);
} else {
this.$modal.msgWarning(`批量提交完成!成功${successCount},失败${failCount}\n失败原因${failReasons.join('')}`);
console.log(commonFields.leaveId);
if (commonFields.leaveId == null) {
if (failCount === 0) {
this.$modal.msgSuccess(`批量提交成功!共提交${successCount}请假申请`);
} else {
this.$modal.msgWarning(`批量提交完成!成功${successCount}条,失败${failCount}\n失败原因${failReasons.join('')}`);
}
}
// 4. 刷新列表并重置表单
this.getList();
this.reset();

View File

@@ -182,6 +182,9 @@
<el-descriptions-item label="请假天数">{{ currentDetail.leaveDays || '-' }}</el-descriptions-item>
<el-descriptions-item label="请假原因">{{ currentDetail.leaveReason || '-' }}</el-descriptions-item>
<el-descriptions-item label="备注">{{ currentDetail.remark || '-' }}</el-descriptions-item>
<el-descriptions-item label="附件">
<FileList :ossIds="currentDetail.attachmentUrls" />
</el-descriptions-item>
</el-descriptions>
</div>
@@ -196,6 +199,9 @@
<el-descriptions-item label="外出地点">{{ currentDetail.outPlace || '-' }}</el-descriptions-item>
<el-descriptions-item label="外出原因">{{ currentDetail.outReason || '-' }}</el-descriptions-item>
<el-descriptions-item label="备注">{{ currentDetail.remark || '-' }}</el-descriptions-item>
<el-descriptions-item label="附件">
<FileList :ossIds="currentDetail.attachmentUrls" />
</el-descriptions-item>
</el-descriptions>
</div>
@@ -208,9 +214,14 @@
<script>
import { listApprovalTask, rejectApprovalTask, resolveApprovalTask } from '@/api/wms/approvalTask'
import FileList from '@/components/FileList/index.vue'
export default {
name: 'TodoList',
components: {
FileList,
},
data() {
return {
// 查询参数