119 lines
2.5 KiB
Vue
119 lines
2.5 KiB
Vue
|
<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>
|