<template>
|
<el-dialog v-model="dialogVisible" title="附件" width="40%" :before-close="handleClose">
|
<el-table :data="tableData" border height="40vh">
|
<el-table-column label="附件名称" prop="name" min-width="400" show-overflow-tooltip />
|
<el-table-column fixed="right" label="操作" width="150" align="center">
|
<template #default="scope">
|
<el-button link type="primary" size="small" @click="downLoadFile(scope.row)">下载</el-button>
|
<el-button link type="primary" size="small" @click="lookFile(scope.row)">预览</el-button>
|
<el-button link type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-dialog>
|
<filePreview ref="filePreviewRef" />
|
</template>
|
|
<script setup>
|
import { ref } from 'vue'
|
import filePreview from '@/components/filePreview/index.vue'
|
import { ElMessageBox, ElMessage } from 'element-plus'
|
import { delCommonFile } from '@/api/publicApi/commonFile.js'
|
|
const dialogVisible = ref(false)
|
const tableData = ref([])
|
const { proxy } = getCurrentInstance();
|
const filePreviewRef = ref()
|
const handleClose = () => {
|
dialogVisible.value = false
|
}
|
const open = (list) => {
|
dialogVisible.value = true
|
tableData.value = list
|
}
|
const downLoadFile = (row) => {
|
proxy.$download.name(row.url);
|
|
}
|
const lookFile = (row) => {
|
filePreviewRef.value.open(row.url)
|
}
|
// 删除附件
|
const handleDelete = (row) => {
|
ElMessageBox.confirm(`确认删除附件"${row.name}"吗？`, '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
delCommonFile([row.id]).then(() => {
|
ElMessage.success('删除成功')
|
// 从列表中移除已删除的附件
|
const index = tableData.value.findIndex(item => item.id === row.id)
|
if (index !== -1) {
|
tableData.value.splice(index, 1)
|
}
|
}).catch(() => {
|
ElMessage.error('删除失败')
|
})
|
}).catch(() => {
|
ElMessage.info('已取消删除')
|
})
|
}
|
defineExpose({
|
open
|
})
|
</script>
|
|
<style></style>
|
