feat(file): 将文件管理页面预览按钮替换为下载按钮

- 移除预览按钮及相关的handlePreview函数
- 新增下载按钮,使用download图标
- 实现handleDownload函数,支持直接下载文件
- 添加权限控制,需要FILE.LIST权限才能显示下载按钮
- 优化表格列对齐方式,统一使用center对齐
- 下载功能支持原始文件名保持,提升用户体验
This commit is contained in:
Leo 2025-07-08 23:15:50 +08:00
parent 6ecd41e379
commit d1371cc5c0

View File

@ -314,7 +314,7 @@ import {
} from '@/service/api/system/file'
import type { SysFileQueryBo, SysFileSearchForm, SysFileVo } from '@/service/api/system/file'
import IconParkOutlineDelete from '~icons/icon-park-outline/delete'
import IconParkOutlinePreviewOpen from '~icons/icon-park-outline/preview-open'
import IconParkOutlineDownload from '~icons/icon-park-outline/download'
//
const StarIcon = () => h('span', { class: 'text-yellow-500' }, '✨')
@ -400,6 +400,7 @@ const columns: DataTableColumns<SysFileVo> = [
{
title: '序号',
key: 'index',
align: 'center',
width: 80,
render: (_, index) => {
return (pagination.value.page - 1) * pagination.value.pageSize + index + 1
@ -409,6 +410,7 @@ const columns: DataTableColumns<SysFileVo> = [
title: '文件原始名称',
key: 'fileName',
width: 200,
align: 'center',
ellipsis: {
tooltip: true,
},
@ -417,6 +419,7 @@ const columns: DataTableColumns<SysFileVo> = [
title: '文件新名称',
key: 'newName',
width: 200,
align: 'center',
ellipsis: {
tooltip: true,
},
@ -425,6 +428,7 @@ const columns: DataTableColumns<SysFileVo> = [
title: '文件后缀',
key: 'fileSuffix',
width: 100,
align: 'center',
render: (row) => {
return h(NTag, {
type: 'primary',
@ -436,6 +440,7 @@ const columns: DataTableColumns<SysFileVo> = [
title: '文件上传路径',
key: 'fileUpload',
width: 250,
align: 'center',
ellipsis: {
tooltip: true,
},
@ -444,6 +449,7 @@ const columns: DataTableColumns<SysFileVo> = [
title: '文件回显路径',
key: 'filePath',
width: 200,
align: 'center',
ellipsis: {
tooltip: true,
},
@ -471,6 +477,7 @@ const columns: DataTableColumns<SysFileVo> = [
{
title: '文件服务类型',
key: 'fileService',
align: 'center',
width: 120,
render: (row) => {
const serviceMap: Record<string, { type: 'success' | 'info' | 'warning', text: string }> = {
@ -488,6 +495,7 @@ const columns: DataTableColumns<SysFileVo> = [
{
title: '创建时间',
key: 'createTime',
align: 'center',
width: 160,
render: (row) => {
return row.createTime ? new Date(row.createTime).toLocaleString() : '--'
@ -502,17 +510,19 @@ const columns: DataTableColumns<SysFileVo> = [
render: (row) => {
const buttons = []
//
buttons.push(h(NButton, {
type: 'primary',
size: 'small',
onClick: () => handlePreview(row),
}, {
icon: () => h(NIcon, { size: 14, style: 'transform: translateY(-1px)' }, {
default: () => h(IconParkOutlinePreviewOpen),
}),
default: () => '预览',
}))
//
if (hasPermission(PERMISSIONS.FILE.LIST)) {
buttons.push(h(NButton, {
type: 'primary',
size: 'small',
onClick: () => handleDownload(row),
}, {
icon: () => h(NIcon, { size: 14, style: 'transform: translateY(-1px)' }, {
default: () => h(IconParkOutlineDownload),
}),
default: () => '下载',
}))
}
//
if (hasPermission(PERMISSIONS.FILE.DELETE)) {
@ -648,10 +658,23 @@ async function handleBatchDelete() {
}
}
//
function handlePreview(row: SysFileVo) {
//
function handleDownload(row: SysFileVo) {
if (row.filePath) {
handleImagePreview(row.filePath, row.fileName)
const link = document.createElement('a')
link.href = row.filePath
link.download = row.fileName || '下载文件'
link.target = '_blank'
// DOM
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
coiMsgSuccess('文件下载已开始')
}
else {
coiMsgError('文件路径不存在,无法下载')
}
}