hjq/PixelAI-admin
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

附件管理bug修复

Browse Source
This commit is contained in:
Double-_-Z 2025-01-12 11:39:54 +08:00
parent 3d9b804f62
commit 19fa389986
2 changed files with 30 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/views/attachment/component/detail.vue
View File

@ -5,17 +5,17 @@
<el-row :gutter="35"> <el-row :gutter="35">
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20"> <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
<el-form-item label="模块名称："> <el-form-item label="模块名称：">
{{ state.data.moduleName }} {{ state.data.moduleName || '暂无' }}
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20"> <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
<el-form-item label="标签名称："> <el-form-item label="标签名称：">
{{ state.data.labelName }} {{ state.data.labelName || '暂无' }}
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20"> <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
<el-form-item label="附件名称："> <el-form-item label="附件名称：">
{{ state.data.name }} {{ state.data.name || '暂无' }}
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20"> <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
@ -30,8 +30,9 @@
</video> </video>
</div> </div>
<div v-else-if="fileType === 'image'"> <div v-else-if="fileType === 'image'">
<img <el-image
:src="encodeURI(viteUrl + state.data.path)" :preview-src-list="[jpgFormatter(state)]"
:src="jpgFormatter(state)"
alt="附件图片" alt="附件图片"
style="width: 100%; height: auto; border-radius: 4px" style="width: 100%; height: auto; border-radius: 4px"
/> />
@ -105,14 +106,16 @@ const textContent = ref<string>('');
const determineFileType = async () => { const determineFileType = async () => {
console.log(state.data); console.log(state.data);
if (!state.data.path) return; if (!state.data.path) return;
const normalizedPath = state.data.path.replace(/\\/g, '/'); // 替换反斜杠为正斜杠 const normalizedPath = encodeURI(state.data.path); // 替换反斜杠为正斜杠
const extension = normalizedPath.split('.').pop()?.toLowerCase(); // const extension = normalizedPath.split('.').pop()?.toLowerCase();
const extension = normalizedPath?.toLowerCase();
console.log(extension); console.log(extension);
if (['mp4', 'avi', 'mov'].includes(extension || '')) {
if (/\.(mp4|avi|mov)/.test(extension)) {
fileType.value = 'video'; fileType.value = 'video';
} else if (['jpg', 'jpeg', 'png', 'gif', 'bmp'].includes(extension || '')) { } else if (/\.(jpg|jpeg|png|gif|bmp)/.test(extension)) {
fileType.value = 'image'; fileType.value = 'image';
} else if (['txt', 'log', 'md'].includes(extension || '')) { } else if (/\.(txt|log|md)/.test(extension)) {
fileType.value = 'text'; fileType.value = 'text';
try { try {
const response = await fetch(viteUrl + normalizedPath); const response = await fetch(viteUrl + normalizedPath);
@ -166,6 +169,14 @@ const getAttachmentDetailById = async (id: number) => {
} }
}; };
// 图片链接格式化
const jpgFormatter = (row: any) => {
let newPath = row?.data ? row.data.path : row.path;
newPath = newPath.includes('://')?newPath : encodeURI(newPath);
return `${newPath}`;
}
// 获取模块列表 // 获取模块列表
const getModuleList = async () => { const getModuleList = async () => {
try { try {

13
src/views/attachment/index.vue
View File

@ -43,10 +43,10 @@
ref="tableRef" ref="tableRef"
> >
<el-table-column type="selection" width="55" /> <el-table-column type="selection" width="55" />
<el-table-column prop="name" label="附件名称" show-overflow-tooltip></el-table-column> <el-table-column prop="name" label="附件名称" :formatter="dateCommonFormatter" show-overflow-tooltip></el-table-column>
<el-table-column prop="moduleName" label="模块" show-overflow-tooltip></el-table-column> <el-table-column prop="moduleName" label="模块" :formatter="dateCommonFormatter" show-overflow-tooltip></el-table-column>
<el-table-column prop="labelName" label="标签" show-overflow-tooltip></el-table-column> <el-table-column prop="labelName" label="标签" :formatter="dateCommonFormatter" show-overflow-tooltip></el-table-column>
<el-table-column prop="name" label="上传者" show-overflow-tooltip></el-table-column> <el-table-column prop="uploadName" label="上传者" :formatter="dateCommonFormatter" show-overflow-tooltip></el-table-column>
<el-table-column prop="createtime" label="创建时间" :formatter="dateFormatter" show-overflow-tooltip></el-table-column> <el-table-column prop="createtime" label="创建时间" :formatter="dateFormatter" show-overflow-tooltip></el-table-column>
<el-table-column label="操作"> <el-table-column label="操作">
<template #default="scope"> <template #default="scope">
@ -194,6 +194,11 @@ const toShowDetail = (row: any) => {
router.push({ path: '/attachment/detail', query: { id: row.id, moduleName: row.moduleName, labelName: row.labelName } }); router.push({ path: '/attachment/detail', query: { id: row.id, moduleName: row.moduleName, labelName: row.labelName } });
}; };
// 通用格式化
const dateCommonFormatter = (row: any, column: TableColumnCtx<String>) => {
return row[column.property] || '暂无';
};
// 日期格式化 // 日期格式化
const dateFormatter = (row: any, column: TableColumnCtx<String>) => { const dateFormatter = (row: any, column: TableColumnCtx<String>) => {
let date = new Date(row.createtime); let date = new Date(row.createtime);