4 changed files with 219 additions and 0 deletions
@ -0,0 +1,86 @@ |
|||
import type { BasicColumn, FormSchema } from '@/components/Table' |
|||
import { useRender } from '@/components/Table' |
|||
|
|||
export const columns: BasicColumn[] = [ |
|||
{ |
|||
title: '编号', |
|||
dataIndex: 'id', |
|||
width: 100, |
|||
}, |
|||
{ |
|||
title: '文件名', |
|||
dataIndex: 'name', |
|||
width: 200, |
|||
}, |
|||
// {
|
|||
// title: '文件 URL',
|
|||
// dataIndex: 'url',
|
|||
// width: 180,
|
|||
// customRender: ({ text }) => {
|
|||
// return useRender.renderImg(text)
|
|||
// },
|
|||
// },
|
|||
// {
|
|||
// title: '文件路径',
|
|||
// dataIndex: 'path',
|
|||
// width: 180,
|
|||
// },
|
|||
{ |
|||
title: '文件大小', |
|||
dataIndex: 'size', |
|||
width: 120, |
|||
customRender: ({ text }) => { |
|||
const unitArr = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'] |
|||
const srcSize = Number.parseFloat(text) |
|||
const index = Math.floor(Math.log(srcSize) / Math.log(1024)) |
|||
const size = srcSize / 1024 ** index |
|||
return `${size.toFixed(2)} ${unitArr[index]}` |
|||
}, |
|||
}, |
|||
{ |
|||
title: '文件类型', |
|||
dataIndex: 'type', |
|||
width: 100, |
|||
customRender: ({ text }) => { |
|||
return useRender.renderTag(text) |
|||
}, |
|||
}, |
|||
// {
|
|||
// title: '文件内容',
|
|||
// dataIndex: 'content',
|
|||
// width: 180,
|
|||
// customRender: ({ text }) => {
|
|||
// return useRender.renderImg(text)
|
|||
// },
|
|||
// },
|
|||
{ |
|||
title: '上传时间', |
|||
dataIndex: 'createTime', |
|||
width: 180, |
|||
customRender: ({ text }) => { |
|||
return useRender.renderDate(text) |
|||
}, |
|||
}, |
|||
] |
|||
|
|||
export const searchFormSchema: FormSchema[] = [ |
|||
{ |
|||
label: '文件路径', |
|||
field: 'path', |
|||
component: 'Input', |
|||
show: false, |
|||
colProps: { span: 8 }, |
|||
}, |
|||
{ |
|||
label: '文件名', |
|||
field: 'name', |
|||
component: 'Input', |
|||
colProps: { span: 8 }, |
|||
}, |
|||
{ |
|||
label: '创建时间', |
|||
field: 'createTime', |
|||
component: 'RangePicker', |
|||
colProps: { span: 8 }, |
|||
}, |
|||
] |
@ -0,0 +1,130 @@ |
|||
<script lang="ts" setup> |
|||
import { ref } from 'vue' |
|||
import { columns, searchFormSchema } from './file.data' |
|||
import { useI18n } from '@/hooks/web/useI18n' |
|||
import { useMessage } from '@/hooks/web/useMessage' |
|||
import { IconEnum } from '@/enums/appEnum' |
|||
import { BasicUpload } from '@/components/Upload' |
|||
import { BasicTable, TableAction, useTable } from '@/components/Table' |
|||
import { deleteFile, getFilePage } from '@/api/infra/file' |
|||
import { getAccessToken, getTenantId } from '@/utils/auth' |
|||
import { copyText } from '@/utils/copyTextToClipboard' |
|||
import { uploadApi } from '@/api/base/upload' |
|||
import { DocAlert } from '@/components/DocAlert' |
|||
|
|||
defineOptions({ name: 'InfraFile' }) |
|||
|
|||
const { t } = useI18n() |
|||
const { createMessage } = useMessage() |
|||
|
|||
const uploadParams = ref({ |
|||
Authorization: `Bearer ${getAccessToken()}`, |
|||
}) |
|||
|
|||
const [registerTable, { reload }] = useTable({ |
|||
title: '文件列表', |
|||
api: getFilePage, |
|||
columns, |
|||
formConfig: { labelWidth: 120, schemas: searchFormSchema }, |
|||
useSearchForm: true, |
|||
showTableSetting: true, |
|||
showIndexColumn: false, |
|||
actionColumn: { |
|||
width: 160, |
|||
title: t('common.action'), |
|||
dataIndex: 'action', |
|||
fixed: 'right', |
|||
}, |
|||
}) |
|||
|
|||
function handleChange() { |
|||
reload() |
|||
} |
|||
|
|||
function handleCopy(record: Recordable) { |
|||
copyText(record.url) |
|||
} |
|||
function handleDownload(record: Recordable) { |
|||
const link = document.createElement('a') |
|||
link.href = record.url |
|||
link.download = record.name |
|||
document.body.appendChild(link) |
|||
link.click() |
|||
window.URL.revokeObjectURL(link.href) |
|||
document.body.removeChild(link) |
|||
|
|||
// copyText(record.url) |
|||
} |
|||
// /** |
|||
// * 图片及pdf文件直接预览,其他格式文件直接下载 |
|||
// * @param file |
|||
// */ |
|||
// clickFile(file) { |
|||
// let fileType = file.fileType.toLowerCase() |
|||
// if (fileType === 'pdf' || fileType === 'jpg' || fileType === 'png') { |
|||
// let a = document.createElement('a') |
|||
// a.target = '_blank' |
|||
// a.href = file.filePath |
|||
// a.click() |
|||
// } else { |
|||
// fetch(file.filePath) |
|||
// .then((res) => res.blob()) |
|||
// .then((blob) => { |
|||
// const link = document.createElement('a') |
|||
// link.href = URL.createObjectURL(blob) |
|||
// link.download = file.fileName |
|||
// document.body.appendChild(link) |
|||
// link.click() |
|||
// window.URL.revokeObjectURL(link.href) |
|||
// document.body.removeChild(link) |
|||
// }) |
|||
// } |
|||
// } |
|||
|
|||
async function handleDelete(record: Recordable) { |
|||
await deleteFile(record.id) |
|||
createMessage.success(t('common.delSuccessText')) |
|||
reload() |
|||
} |
|||
</script> |
|||
|
|||
<template> |
|||
<div> |
|||
<BasicTable @register="registerTable"> |
|||
<template #toolbar> |
|||
<BasicUpload |
|||
:max-size="20" |
|||
:max-number="10" |
|||
:empty-hide-preview="true" |
|||
:upload-params="uploadParams" |
|||
:api="uploadApi" |
|||
class="my-5" |
|||
:accept="['pdf/*']" |
|||
@change="handleChange" |
|||
/> |
|||
</template> |
|||
<template #bodyCell="{ column, record }"> |
|||
<template v-if="column.key === 'action'"> |
|||
<TableAction |
|||
:actions="[ |
|||
{ icon: IconEnum.VIEW, label: '复制链接', ifShow: false, onClick: handleCopy.bind(null, record) }, |
|||
{ icon: IconEnum.DOWNLOAD, label: '下载文件', onClick: handleDownload.bind(null, record) }, |
|||
|
|||
{ |
|||
icon: IconEnum.DELETE, |
|||
danger: true, |
|||
label: t('action.delete'), |
|||
auth: 'infra:file:delete', |
|||
popConfirm: { |
|||
title: t('common.delMessage'), |
|||
placement: 'left', |
|||
confirm: handleDelete.bind(null, record), |
|||
}, |
|||
}, |
|||
]" |
|||
/> |
|||
</template> |
|||
</template> |
|||
</BasicTable> |
|||
</div> |
|||
</template> |
Loading…
Reference in new issue