😎优化文件管理页面

This commit is contained in:
zuohuaijun 2025-02-18 12:27:10 +08:00
parent 5cdc2494bf
commit 30173fd517

View File

@ -49,7 +49,9 @@
<el-empty :image-size="200" /> <el-empty :image-size="200" />
</template> </template>
<template #row_suffix="{ row }"> <template #row_suffix="{ row }">
<el-tag round>{{ row.suffix }}</el-tag> <!-- <el-tag round>{{ row.suffix }}</el-tag> -->
<el-tag v-if="row.suffix === '.png' || row.suffix === '.jpg' || row.suffix === '.jpeg' || row.suffix === '.gif' || row.suffix === '.bmp'" type="success">{{ row.suffix }}</el-tag>
<el-tag v-else type="danger">{{ row.suffix }}</el-tag>
</template> </template>
<template #row_isPublic="{ row }"> <template #row_isPublic="{ row }">
<el-tag v-if="row.isPublic === true" type="success"></el-tag> <el-tag v-if="row.isPublic === true" type="success"></el-tag>
@ -191,7 +193,7 @@ const state = reactive({
excelUrl: '', excelUrl: '',
pdfUrl: '', pdfUrl: '',
fileName: '', fileName: '',
fileType: '', fileType: '相关文件',
isPublic: false, isPublic: false,
previewList: [] as string[], previewList: [] as string[],
}); });
@ -206,20 +208,20 @@ const options = useVxeTable<SysFile>(
columns: [ columns: [
// { type: 'checkbox', width: 40, fixed: 'left' }, // { type: 'checkbox', width: 40, fixed: 'left' },
{ field: 'seq', type: 'seq', title: '序号', width: 60, fixed: 'left' }, { field: 'seq', type: 'seq', title: '序号', width: 60, fixed: 'left' },
{ field: 'fileName', title: '名称', minWidth: 200, showOverflow: 'tooltip' }, { field: 'fileName', title: '名称', minWidth: 220, headerAlign: 'center', align: 'left', showOverflow: 'tooltip' },
{ field: 'url', title: '预览', minWidth: 100, slots: { default: 'row_url' } }, { field: 'url', title: '预览', minWidth: 80, slots: { default: 'row_url' } },
{ field: 'sizeKb', title: '大小(KB)', minWidth: 100, showOverflow: 'tooltip' }, { field: 'sizeKb', title: '大小(KB)', minWidth: 80, showOverflow: 'tooltip' },
{ field: 'suffix', title: '后缀', minWidth: 80, showOverflow: 'tooltip', slots: { default: 'row_suffix' } }, { field: 'suffix', title: '后缀', minWidth: 80, showOverflow: 'tooltip', slots: { default: 'row_suffix' } },
{ field: 'contentType', title: 'MIME类型', minWidth: 180, showOverflow: 'tooltip' }, { field: 'contentType', title: 'MIME类型', minWidth: 220, headerAlign: 'center', align: 'left', showOverflow: 'tooltip' },
{ field: 'bucketName', title: '存储位置', minWidth: 180, showOverflow: 'tooltip' },
{ field: 'id', title: '存储标识', minWidth: 120, showOverflow: 'tooltip' }, { field: 'id', title: '存储标识', minWidth: 120, showOverflow: 'tooltip' },
{ field: 'isPublic', title: '是否公开', minWidth: 140, showOverflow: 'tooltip', slots: { default: 'row_isPublic' } }, { field: 'bucketName', title: '存储位置', minWidth: 100, showOverflow: 'tooltip' },
{ field: 'fileType', title: '文件类型', minWidth: 140, showOverflow: 'tooltip' }, { field: 'isPublic', title: '是否公开', minWidth: 80, showOverflow: 'tooltip', slots: { default: 'row_isPublic' } },
{ field: 'relationName', title: '关联对象名称', minWidth: 150, showOverflow: 'tooltip' }, { field: 'createTime', title: '创建时间', minWidth: 150, showOverflow: 'tooltip' },
{ field: 'relationId', title: '关联对象ID', minWidth: 150, showOverflow: 'tooltip' }, { field: 'fileType', title: '类别', minWidth: 140, showOverflow: 'tooltip' },
{ field: 'relationName', title: '关联对象名称', minWidth: 120, showOverflow: 'tooltip' },
{ field: 'relationId', title: '关联对象ID', minWidth: 120, showOverflow: 'tooltip' },
{ field: 'belongId', title: '所属ID', minWidth: 120, showOverflow: 'tooltip' }, { field: 'belongId', title: '所属ID', minWidth: 120, showOverflow: 'tooltip' },
// { field: 'userName', title: '', minWidth: 150, showOverflow: 'tooltip', sortable: true }, // { field: 'userName', title: '', minWidth: 150, showOverflow: 'tooltip', sortable: true },
{ field: 'createTime', title: '创建时间', minWidth: 150, showOverflow: 'tooltip' },
{ field: 'remark', title: '备注', minWidth: 200, showOverflow: 'tooltip' }, { field: 'remark', title: '备注', minWidth: 200, showOverflow: 'tooltip' },
{ field: 'buttons', title: '操作', fixed: 'right', width: 150, showOverflow: true, slots: { default: 'row_buttons' } }, { field: 'buttons', title: '操作', fixed: 'right', width: 150, showOverflow: true, slots: { default: 'row_buttons' } },
], ],
@ -268,7 +270,7 @@ const resetQuery = async () => {
const showUpload = () => { const showUpload = () => {
state.fileList = []; state.fileList = [];
state.visible = true; state.visible = true;
state.isPublic = false; state.isPublic = true;
}; };
// onChanne // onChanne