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