53 lines
1.8 KiB
Vue
53 lines
1.8 KiB
Vue
<template>
|
|
<el-dialog v-model="dialogVisible" title="附件列表" width="45%">
|
|
<el-table :data="fileList" style="width: 100%">
|
|
<el-table-column prop="fileName" label="文件名" />
|
|
<el-table-column prop="type" label="操作">
|
|
<template #default="scope">
|
|
<el-button link type="success" @click="viewFile(scope.row)" icon="View">查看文件</el-button>
|
|
<el-button link type="primary" @click="downloadFile(scope.row)" icon="download">下载文件</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<template #footer>
|
|
<div class="dialog-footer">
|
|
<el-button type="primary" @click="dialogVisible = false"> 关闭 </el-button>
|
|
</div>
|
|
</template>
|
|
</el-dialog>
|
|
<el-dialog width="80%" v-model="viewFileVisible" title="查看文件" append-to-body>
|
|
<iframe :src="fileUrl" frameborder="0" width="100%" height="800"></iframe>
|
|
<template #footer>
|
|
<div class="dialog-footer">
|
|
<el-button @click="viewFileVisible = false" type="primary">关闭</el-button>
|
|
</div>
|
|
</template>
|
|
</el-dialog>
|
|
</template>
|
|
<script setup>
|
|
const { proxy } = getCurrentInstance();
|
|
const dialogVisible = defineModel();
|
|
const props = defineProps(['fileList']);
|
|
const viewFileVisible = ref(false);
|
|
const fileUrl = ref('');
|
|
const downloadFile = async (data) => {
|
|
// 这里可以添加下载文件的逻辑
|
|
await proxy?.downloadFile(data.fileUrl, data.fileName);
|
|
// proxy?.$message({
|
|
// message: '下载成功',
|
|
// type: 'success'
|
|
// });
|
|
};
|
|
const viewFile = (data) => {
|
|
// 这里可以添加查看文件的逻辑
|
|
fileUrl.value = data.fileUrl;
|
|
viewFileVisible.value = true;
|
|
};
|
|
const adjustIframe = () => {
|
|
const iframe = document.querySelector('iframe');
|
|
if (iframe) {
|
|
iframe.style.height = `${iframe.contentWindow.document.body.scrollHeight}px`;
|
|
}
|
|
};
|
|
</script>
|