feat(HRM): 添加附件显示组件并优化表单逻辑
添加FileList组件用于显示附件列表 在请假和外出申请详情页中显示附件 优化审批部门选择逻辑,仅在新增时显示 修复请假申请编辑时的审批类型校验问题
This commit is contained in:
119
klp-ui/src/components/FileList/index.vue
Normal file
119
klp-ui/src/components/FileList/index.vue
Normal 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>
|
||||
Reference in New Issue
Block a user