diff --git a/src/views/system/SettingManage.vue b/src/views/system/SettingManage.vue index 96c957d..aa8a699 100644 --- a/src/views/system/SettingManage.vue +++ b/src/views/system/SettingManage.vue @@ -322,12 +322,32 @@ />
-
- {{ fileInfo.realName || fileInfo.saveName }} - 文件ID: {{ settingForm.value }} - {{ formatFileSize(fileInfo.size) }} +
+ +
+ +
+ +
+
+ +
+
+ + +
+ {{ fileInfo.realName || fileInfo.saveName }} + 文件ID: {{ settingForm.value }} + {{ formatFileSize(fileInfo.size) }} + + +
+ + +
+ 删除 +
- 删除
+ +
+ +
+ +
+
+ +
+
+ +
{{ fileInfo.realName || fileInfo.saveName }} 文件ID: {{ fileInfo.id }} - {{ formatFileSize(fileInfo.size) }} + + +
+ + +
+ 删除
- 删除
@@ -431,6 +468,11 @@ 确定 + + + + +
@@ -568,6 +610,8 @@ const fileInfo = ref(null) const fileUploading = ref(false) const fileListInfo = ref([]) const newStringItem = ref('') +const imageViewerVisible = ref(false) +const currentViewImage = ref('') // 格式化日期时间 const formatDate = (dateString) => { @@ -855,9 +899,34 @@ const handleEditSetting = async (row) => { } else if (data.type === 'float') { settingForm.value = parseFloat(data.value) || 0 } else if (data.type === 'file') { - fileInfo.value = null // 如果需要获取文件信息，可以调用文件详情接口 + // 处理单个文件类型，获取文件信息 + if (data.parsedValue && typeof data.parsedValue === 'string') { + fileInfo.value = { + id: data.value, + url: processImageUrl(data.parsedValue), // 使用processImageUrl处理URL + realName: '文件', + saveName: 'file', + size: 0 + } + } else { + fileInfo.value = null + } } else if (data.type === 'file_list') { - fileListInfo.value = [] // 如果需要获取文件信息，可以调用文件详情接口 + // 处理文件列表类型，使用parsedValue来获取文件信息 + if (data.parsedValue && Array.isArray(data.parsedValue)) { + fileListInfo.value = data.parsedValue.map((url, index) => { + const fileIds = getFileList(data.value) + return { + id: fileIds[index] || `file_${index}`, + url: processImageUrl(url), // 使用processImageUrl处理URL + realName: `文件${index + 1}`, + saveName: `file_${index}`, + size: 0 + } + }) + } else { + fileListInfo.value = [] + } } else if (data.type === 'string_list') { newStringItem.value = '' } @@ -925,7 +994,12 @@ const handleFileChange = async (file) => { if (res.data.code === 200 && res.data.data.length > 0) { const uploadedFile = res.data.data[0] settingForm.value = String(uploadedFile.id) - fileInfo.value = uploadedFile + + // 确保上传的文件URL也经过处理 + fileInfo.value = { + ...uploadedFile, + url: processImageUrl(uploadedFile.url || uploadedFile.realName) + } ElMessage.success('文件上传成功') } else { ElMessage.error(res.data.message || '文件上传失败') @@ -952,7 +1026,46 @@ const formatFileSize = (bytes) => { } const previewFile = (fileId) => { - ElMessage.info(`文件ID: ${fileId}`) + // 这里可以实现文件预览逻辑 + console.log('预览文件:', fileId) + ElMessage.info('文件预览功能待实现') +} + +const previewUrl = (url) => { + window.open(url, '_blank') +} + +// 检查是否为图片文件 +const isImageFile = (url) => { + if (!url) return false + const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp', '.svg'] + // 使用相同的URL处理逻辑 + const processedUrl = processImageUrl(url) + const extension = processedUrl.toLowerCase().substring(processedUrl.lastIndexOf('.')) + return imageExtensions.includes(extension) +} + +// 处理图片URL，确保正确显示 +const processImageUrl = (url) => { + if (!url) return '' + // 先处理转义字符：将 \u0026 替换为 & + let processedUrl = url.replace(/\\u0026/g, '&') + // 再进行URL解码 + return decodeURIComponent(processedUrl) +} + +// 图片预览 +const previewImage = (url) => { + // 使用图片查看器对话框 + currentViewImage.value = processImageUrl(url) + imageViewerVisible.value = true +} + +// 处理图片加载失败 +const handleImageError = (event) => { + // 图片加载失败时，可以隐藏图片或显示占位符 + console.log('图片加载失败:', event.target.src) + // 这里可以添加更多的错误处理逻辑 } const getFileList = (value) => { @@ -980,7 +1093,13 @@ const handleFileListChange = async (file) => { const currentFileIds = getFileList(settingForm.value) currentFileIds.push(String(uploadedFile.id)) settingForm.value = currentFileIds.join(',') - fileListInfo.value.push(uploadedFile) + + // 确保新上传的文件URL也经过处理 + const processedFile = { + ...uploadedFile, + url: processImageUrl(uploadedFile.url || uploadedFile.realName) + } + fileListInfo.value.push(processedFile) ElMessage.success('文件上传成功') } else { ElMessage.error(res.data.message || '文件上传失败') @@ -1149,6 +1268,88 @@ onMounted(() => { margin-left: 8px; } +/* 文件预览样式 */ +.file-preview { + margin-top: 8px; +} + +.preview-image { + width: 80px; + height: 80px; + border-radius: 4px; + cursor: pointer; + transition: transform 0.2s ease; + border: 1px solid #e1e8ed; + object-fit: cover; +} + +.preview-image:hover { + transform: scale(1.1); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); +} + +.file-preview-link { + margin-top: 8px; +} + +.file-item { + border: 1px solid #e1e8ed; + border-radius: 4px; + padding: 12px; + margin-bottom: 8px; + background: #fafbfc; + display: flex; + align-items: center; + gap: 12px; +} + +.file-preview { + flex-shrink: 0; +} + +.file-placeholder { + width: 80px; + height: 80px; + border-radius: 4px; + border: 1px solid #e1e8ed; + background: #f5f7fa; + display: flex; + align-items: center; + justify-content: center; + color: #909399; + font-size: 24px; +} + +.file-details { + display: flex; + flex-direction: column; + gap: 4px; + flex: 1; +} + +.file-actions { + display: flex; + flex-direction: column; + gap: 8px; + align-items: flex-end; + flex-shrink: 0; +} + +.file-name { + font-weight: 500; + color: #303133; +} + +.file-id { + font-size: 12px; + color: #909399; +} + +.file-size { + font-size: 12px; + color: #909399; +} + /* 表格行样式 */ :deep(.setting-tree-table .el-table__row--level-1) { background-color: #fafbfc;