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

@@ -0,0 +1,119 @@
<template>
<div class="file-list-container">
<el-table
:data="fileList"
border
size="small"
v-loading="loading"
style="width: 100%;"
>
<el-table-column
label="文件名"
prop="originalName"
min-width="200"
>
<template slot-scope="scope">
<i class="el-icon-document" style="margin-right: 8px;"></i>
{{ scope.row.originalName }}
</template>
</el-table-column>
<el-table-column
label="操作"
width="100"
align="center"
>
<template slot-scope="scope">
<el-button
type="text"
icon="el-icon-download"
@click="downloadFile(scope.row)"
size="small"
>
下载
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 空数据提示 -->
<div v-if="fileList.length === 0 && !loading" class="empty-tip">
<el-empty description="暂无文件数据"></el-empty>
</div>
</div>
</template>
<script>
import { listByIds } from "@/api/system/oss";
export default {
name: "FileList",
props: {
ossIds: {
type: String,
default: '',
},
},
data() {
return {
fileList: [],
loading: false // 加载状态
}
},
watch: {
ossIds: {
handler(val) {
if (val) {
this.getFileList();
} else {
this.fileList = []; // 清空文件列表
}
},
immediate: true,
}
},
methods: {
async getFileList() {
if (!this.ossIds) return;
this.loading = true;
try {
let res = await listByIds(this.ossIds);
this.fileList = res.data || [];
} catch (error) {
this.$message.error('获取文件列表失败:' + (error.message || '未知错误'));
this.fileList = [];
} finally {
this.loading = false;
}
},
// 文件下载方法
downloadFile(file) {
if (!file || !file.ossId) {
this.$message.warning('文件下载地址不存在');
return;
}
this.$download.oss(file.ossId);
}
}
}
</script>
<style scoped>
.file-list-container {
width: 100%;
min-height: 100px;
}
.empty-tip {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
}
::v-deep .el-table {
--el-table-header-text-color: #606266;
--el-table-row-hover-bg-color: #f5f7fa;
}
</style>