Compare commits
No commits in common. "6836bc59b78ee3f8e2791f849931735a344ae475" and "0f98692b254d4af0433bea478cc33f587903037c" have entirely different histories.
6836bc59b7
...
0f98692b25
@ -1,395 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="coi-image-viewer">
|
|
||||||
<!-- 缩略图展示 -->
|
|
||||||
<div
|
|
||||||
class="thumbnail-container"
|
|
||||||
:style="{ width: `${width}px`, height: `${height}px` }"
|
|
||||||
@click="handlePreview"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
v-if="!imageError && src"
|
|
||||||
:src="src"
|
|
||||||
:alt="alt || 'image'"
|
|
||||||
class="thumbnail-image"
|
|
||||||
@load="handleImageLoad"
|
|
||||||
@error="handleImageError"
|
|
||||||
>
|
|
||||||
<div v-else class="error-placeholder">
|
|
||||||
<NIcon size="16" class="error-icon">
|
|
||||||
<IconParkOutlinePic />
|
|
||||||
</NIcon>
|
|
||||||
<span class="error-text">加载失败</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 悬停遮罩层 -->
|
|
||||||
<div class="hover-overlay">
|
|
||||||
<NIcon size="18" class="preview-icon">
|
|
||||||
<IconParkOutlinePreviewOpen />
|
|
||||||
</NIcon>
|
|
||||||
<span class="preview-text">点击预览</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 加载状态 -->
|
|
||||||
<div v-if="loading" class="loading-overlay">
|
|
||||||
<NSpin size="small" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 大图预览弹框 -->
|
|
||||||
<NModal
|
|
||||||
v-model:show="previewVisible"
|
|
||||||
preset="card"
|
|
||||||
:title="modalTitle"
|
|
||||||
:style="{ width: '90%', maxWidth: '1200px' }"
|
|
||||||
:mask-closable="true"
|
|
||||||
:closable="true"
|
|
||||||
:auto-focus="false"
|
|
||||||
:trap-focus="false"
|
|
||||||
>
|
|
||||||
<div class="preview-container">
|
|
||||||
<img
|
|
||||||
v-if="!previewError"
|
|
||||||
:src="src"
|
|
||||||
:alt="alt || 'preview'"
|
|
||||||
class="preview-image"
|
|
||||||
@load="handlePreviewLoad"
|
|
||||||
@error="handlePreviewError"
|
|
||||||
>
|
|
||||||
<div v-else class="preview-error">
|
|
||||||
<NIcon size="48" class="error-icon">
|
|
||||||
<IconParkOutlinePic />
|
|
||||||
</NIcon>
|
|
||||||
<p class="error-message">
|
|
||||||
图片加载失败
|
|
||||||
</p>
|
|
||||||
<p class="error-url">
|
|
||||||
{{ src }}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 预览加载状态 -->
|
|
||||||
<div v-if="previewLoading" class="preview-loading">
|
|
||||||
<NSpin size="large" />
|
|
||||||
<p class="loading-text">
|
|
||||||
图片加载中...
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 弹框底部操作 -->
|
|
||||||
<template #action>
|
|
||||||
<NSpace justify="space-between">
|
|
||||||
<NSpace>
|
|
||||||
<NButton size="small" @click="handleDownload">
|
|
||||||
<template #icon>
|
|
||||||
<NIcon><IconParkOutlineDownload /></NIcon>
|
|
||||||
</template>
|
|
||||||
下载图片
|
|
||||||
</NButton>
|
|
||||||
<NButton size="small" @click="handleCopyUrl">
|
|
||||||
<template #icon>
|
|
||||||
<NIcon><IconParkOutlineCopy /></NIcon>
|
|
||||||
</template>
|
|
||||||
复制链接
|
|
||||||
</NButton>
|
|
||||||
</NSpace>
|
|
||||||
<NButton type="primary" @click="previewVisible = false">
|
|
||||||
关闭
|
|
||||||
</NButton>
|
|
||||||
</NSpace>
|
|
||||||
</template>
|
|
||||||
</NModal>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { coiMsgError, coiMsgSuccess } from '@/utils/coi'
|
|
||||||
import IconParkOutlinePic from '~icons/icon-park-outline/pic'
|
|
||||||
import IconParkOutlinePreviewOpen from '~icons/icon-park-outline/preview-open'
|
|
||||||
import IconParkOutlineDownload from '~icons/icon-park-outline/download'
|
|
||||||
import IconParkOutlineCopy from '~icons/icon-park-outline/copy'
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
/** 图片链接 */
|
|
||||||
src: string | undefined
|
|
||||||
/** 图片描述 */
|
|
||||||
alt?: string
|
|
||||||
/** 缩略图宽度 */
|
|
||||||
width?: number
|
|
||||||
/** 缩略图高度 */
|
|
||||||
height?: number
|
|
||||||
/** 是否可以预览 */
|
|
||||||
previewable?: boolean
|
|
||||||
/** 预览弹框标题 */
|
|
||||||
title?: string
|
|
||||||
}
|
|
||||||
|
|
||||||
const props = withDefaults(defineProps<Props>(), {
|
|
||||||
alt: '',
|
|
||||||
width: 50,
|
|
||||||
height: 40,
|
|
||||||
previewable: true,
|
|
||||||
title: '图片预览',
|
|
||||||
})
|
|
||||||
|
|
||||||
// 缩略图状态
|
|
||||||
const loading = ref(true)
|
|
||||||
const imageError = ref(false)
|
|
||||||
|
|
||||||
// 预览状态
|
|
||||||
const previewVisible = ref(false)
|
|
||||||
const previewLoading = ref(false)
|
|
||||||
const previewError = ref(false)
|
|
||||||
|
|
||||||
// 计算弹框标题
|
|
||||||
const modalTitle = computed(() => {
|
|
||||||
return props.title || props.alt || '图片预览'
|
|
||||||
})
|
|
||||||
|
|
||||||
// 缩略图加载完成
|
|
||||||
function handleImageLoad() {
|
|
||||||
loading.value = false
|
|
||||||
imageError.value = false
|
|
||||||
}
|
|
||||||
|
|
||||||
// 缩略图加载错误
|
|
||||||
function handleImageError() {
|
|
||||||
loading.value = false
|
|
||||||
imageError.value = true
|
|
||||||
}
|
|
||||||
|
|
||||||
// 点击预览
|
|
||||||
function handlePreview() {
|
|
||||||
if (!props.previewable || imageError.value) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
previewVisible.value = true
|
|
||||||
previewLoading.value = true
|
|
||||||
previewError.value = false
|
|
||||||
}
|
|
||||||
|
|
||||||
// 预览图片加载完成
|
|
||||||
function handlePreviewLoad() {
|
|
||||||
previewLoading.value = false
|
|
||||||
previewError.value = false
|
|
||||||
}
|
|
||||||
|
|
||||||
// 预览图片加载错误
|
|
||||||
function handlePreviewError() {
|
|
||||||
previewLoading.value = false
|
|
||||||
previewError.value = true
|
|
||||||
}
|
|
||||||
|
|
||||||
// 下载图片
|
|
||||||
async function handleDownload() {
|
|
||||||
try {
|
|
||||||
const link = document.createElement('a')
|
|
||||||
link.href = props.src
|
|
||||||
link.download = props.alt || 'image'
|
|
||||||
link.target = '_blank'
|
|
||||||
document.body.appendChild(link)
|
|
||||||
link.click()
|
|
||||||
document.body.removeChild(link)
|
|
||||||
coiMsgSuccess('下载已开始')
|
|
||||||
}
|
|
||||||
catch {
|
|
||||||
coiMsgError('下载失败，请重试')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 复制图片链接
|
|
||||||
async function handleCopyUrl() {
|
|
||||||
try {
|
|
||||||
await navigator.clipboard.writeText(props.src)
|
|
||||||
coiMsgSuccess('链接已复制到剪贴板')
|
|
||||||
}
|
|
||||||
catch {
|
|
||||||
coiMsgError('复制失败，请手动复制')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 重置状态（当src变化时）
|
|
||||||
watch(
|
|
||||||
() => props.src,
|
|
||||||
() => {
|
|
||||||
loading.value = true
|
|
||||||
imageError.value = false
|
|
||||||
previewError.value = false
|
|
||||||
},
|
|
||||||
{ immediate: true },
|
|
||||||
)
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.coi-image-viewer {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.thumbnail-container {
|
|
||||||
position: relative;
|
|
||||||
border-radius: 8px;
|
|
||||||
overflow: hidden;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
background: var(--card-color);
|
|
||||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.thumbnail-container:hover {
|
|
||||||
transform: translateY(-2px);
|
|
||||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
||||||
}
|
|
||||||
|
|
||||||
.thumbnail-image {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
object-fit: cover;
|
|
||||||
transition: transform 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.thumbnail-container:hover .thumbnail-image {
|
|
||||||
transform: scale(1.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 当组件被设置为100%宽高时的样式调整 */
|
|
||||||
.coi-image-viewer.w-full.h-full .thumbnail-container {
|
|
||||||
width: 100% !important;
|
|
||||||
height: 100% !important;
|
|
||||||
border-radius: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.error-placeholder {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
background: var(--card-color);
|
|
||||||
color: var(--text-color-3);
|
|
||||||
border: 1px dashed var(--border-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.error-icon {
|
|
||||||
margin-bottom: 4px;
|
|
||||||
color: var(--text-color-3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.error-text {
|
|
||||||
font-size: 10px;
|
|
||||||
color: var(--text-color-3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hover-overlay {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
background: rgba(0, 0, 0, 0.6);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
opacity: 0;
|
|
||||||
transition: opacity 0.3s ease;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.thumbnail-container:hover .hover-overlay {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.preview-icon {
|
|
||||||
margin-bottom: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.preview-text {
|
|
||||||
font-size: 10px;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loading-overlay {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
background: var(--card-color);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.preview-container {
|
|
||||||
position: relative;
|
|
||||||
min-height: 300px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
background: var(--body-color);
|
|
||||||
border-radius: 8px;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.preview-image {
|
|
||||||
max-width: 100%;
|
|
||||||
max-height: 70vh;
|
|
||||||
object-fit: contain;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.preview-error {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
color: var(--text-color-3);
|
|
||||||
text-align: center;
|
|
||||||
padding: 40px 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.error-message {
|
|
||||||
font-size: 16px;
|
|
||||||
margin: 16px 0 8px 0;
|
|
||||||
color: var(--text-color-2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.error-url {
|
|
||||||
font-size: 12px;
|
|
||||||
color: var(--text-color-3);
|
|
||||||
word-break: break-all;
|
|
||||||
max-width: 500px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.preview-loading {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
background: var(--modal-color);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loading-text {
|
|
||||||
margin-top: 16px;
|
|
||||||
color: var(--text-color-2);
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 响应式适配 */
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.preview-container {
|
|
||||||
min-height: 200px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.preview-image {
|
|
||||||
max-height: 50vh;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -59,14 +59,12 @@ export interface FileUploadResult {
|
|||||||
// 文件服务类型枚举
|
// 文件服务类型枚举
|
||||||
export enum FileServiceType {
|
export enum FileServiceType {
|
||||||
LOCAL = 'LOCAL', // 本地存储
|
LOCAL = 'LOCAL', // 本地存储
|
||||||
MINIO = 'MINIO', // MinIO对象存储
|
|
||||||
OSS = 'OSS', // 阿里云对象存储
|
OSS = 'OSS', // 阿里云对象存储
|
||||||
}
|
}
|
||||||
|
|
||||||
// 文件服务类型映射（用于数据库存储）
|
// 文件服务类型映射（用于数据库存储）
|
||||||
export const FileServiceTypeMapping = {
|
export const FileServiceTypeMapping = {
|
||||||
LOCAL: '1',
|
LOCAL: '1',
|
||||||
MINIO: '2',
|
|
||||||
OSS: '3',
|
OSS: '3',
|
||||||
} as const
|
} as const
|
||||||
|
|
||||||
@ -97,13 +95,11 @@ export const FILE_TYPE_OPTIONS = [
|
|||||||
// 文件服务类型选项
|
// 文件服务类型选项
|
||||||
export const FILE_SERVICE_OPTIONS = [
|
export const FILE_SERVICE_OPTIONS = [
|
||||||
{ label: '本地存储', value: FileServiceType.LOCAL },
|
{ label: '本地存储', value: FileServiceType.LOCAL },
|
||||||
{ label: 'MinIO存储', value: FileServiceType.MINIO },
|
|
||||||
{ label: '阿里云OSS', value: FileServiceType.OSS },
|
{ label: '阿里云OSS', value: FileServiceType.OSS },
|
||||||
]
|
]
|
||||||
|
|
||||||
// 文件服务类型数据库值选项（用于搜索）
|
// 文件服务类型数据库值选项（用于搜索）
|
||||||
export const FILE_SERVICE_DB_OPTIONS = [
|
export const FILE_SERVICE_DB_OPTIONS = [
|
||||||
{ label: '本地存储', value: '1' },
|
{ label: '本地存储', value: '1' },
|
||||||
{ label: 'MinIO存储', value: '2' },
|
|
||||||
{ label: '阿里云OSS', value: '3' },
|
{ label: '阿里云OSS', value: '3' },
|
||||||
]
|
]
|
||||||
|
|||||||
@ -59,7 +59,6 @@ export interface PictureUploadResult {
|
|||||||
// 图片服务类型枚举
|
// 图片服务类型枚举
|
||||||
export enum PictureServiceType {
|
export enum PictureServiceType {
|
||||||
LOCAL = '1', // 本地存储
|
LOCAL = '1', // 本地存储
|
||||||
MINIO = '2', // MinIO对象存储
|
|
||||||
OSS = '3', // 阿里云对象存储
|
OSS = '3', // 阿里云对象存储
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -90,6 +89,5 @@ export const PICTURE_TYPE_OPTIONS = [
|
|||||||
// 图片服务类型选项
|
// 图片服务类型选项
|
||||||
export const PICTURE_SERVICE_OPTIONS = [
|
export const PICTURE_SERVICE_OPTIONS = [
|
||||||
{ label: '本地存储', value: PictureServiceType.LOCAL },
|
{ label: '本地存储', value: PictureServiceType.LOCAL },
|
||||||
{ label: 'MinIO存储', value: PictureServiceType.MINIO },
|
|
||||||
{ label: '阿里云OSS', value: PictureServiceType.OSS },
|
{ label: '阿里云OSS', value: PictureServiceType.OSS },
|
||||||
]
|
]
|
||||||
|
|||||||
@ -433,15 +433,9 @@ async function handleAvatarChange(event: Event) {
|
|||||||
uploading.value = true
|
uploading.value = true
|
||||||
const result = await uploadAvatar(file, 2)
|
const result = await uploadAvatar(file, 2)
|
||||||
if (result.isSuccess) {
|
if (result.isSuccess) {
|
||||||
// 智能处理头像访问URL
|
// 使用配置文件中的服务地址构建头像访问URL
|
||||||
let avatarUrl = result.data.fileUploadPath
|
|
||||||
|
|
||||||
// 如果返回的不是完整URL（如本地存储返回相对路径），则添加服务地址前缀
|
|
||||||
if (!avatarUrl.startsWith('http://') && !avatarUrl.startsWith('https://')) {
|
|
||||||
const baseUrl = serviceConfig[import.meta.env.MODE].url
|
const baseUrl = serviceConfig[import.meta.env.MODE].url
|
||||||
avatarUrl = `${baseUrl}${avatarUrl}`
|
const avatarUrl = `${baseUrl}${result.data.fileUploadPath}`
|
||||||
}
|
|
||||||
// 如果返回的是完整URL（如MinIO、OSS），直接使用
|
|
||||||
|
|
||||||
basicForm.value.avatar = avatarUrl
|
basicForm.value.avatar = avatarUrl
|
||||||
personalData.value.avatar = avatarUrl
|
personalData.value.avatar = avatarUrl
|
||||||
|
|||||||
@ -217,7 +217,6 @@
|
|||||||
:options="[
|
:options="[
|
||||||
{ label: 'LOCAL', value: 'LOCAL' },
|
{ label: 'LOCAL', value: 'LOCAL' },
|
||||||
{ label: 'OSS', value: 'OSS' },
|
{ label: 'OSS', value: 'OSS' },
|
||||||
{ label: 'MINIO', value: 'MINIO' },
|
|
||||||
]"
|
]"
|
||||||
/>
|
/>
|
||||||
</n-form-item>
|
</n-form-item>
|
||||||
@ -272,16 +271,36 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</CoiDialog>
|
</CoiDialog>
|
||||||
|
|
||||||
|
<!-- 图片预览弹框 -->
|
||||||
|
<n-modal
|
||||||
|
v-model:show="imagePreviewVisible"
|
||||||
|
preset="card"
|
||||||
|
title="图片预览"
|
||||||
|
:style="{ width: '80%', maxWidth: '800px' }"
|
||||||
|
:mask-closable="true"
|
||||||
|
>
|
||||||
|
<div class="text-center">
|
||||||
|
<img
|
||||||
|
v-if="previewImageUrl"
|
||||||
|
:src="previewImageUrl"
|
||||||
|
:alt="previewImageName"
|
||||||
|
class="max-w-full max-h-96 mx-auto"
|
||||||
|
>
|
||||||
|
<div class="mt-2 text-sm text-gray-500">
|
||||||
|
{{ previewImageName }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</n-modal>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { h, onMounted, ref } from 'vue'
|
import { h, onMounted, ref } from 'vue'
|
||||||
import { NButton, NIcon, NP, NPopconfirm, NSpace, NTag, NText, NUpload, NUploadDragger } from 'naive-ui'
|
import { NButton, NIcon, NImage, NP, NPopconfirm, NSpace, NTag, NText, NUpload, NUploadDragger } from 'naive-ui'
|
||||||
import type { DataTableColumns, DataTableInst, FormInst, UploadFileInfo, UploadInst } from 'naive-ui'
|
import type { DataTableColumns, DataTableInst, FormInst, UploadFileInfo, UploadInst } from 'naive-ui'
|
||||||
import CoiEmpty from '@/components/common/CoiEmpty.vue'
|
import CoiEmpty from '@/components/common/CoiEmpty.vue'
|
||||||
import CoiPagination from '@/components/common/CoiPagination.vue'
|
import CoiPagination from '@/components/common/CoiPagination.vue'
|
||||||
import CoiImageViewer from '@/components/common/CoiImageViewer.vue'
|
|
||||||
import { coiMsgBox, coiMsgError, coiMsgSuccess, coiMsgWarning } from '@/utils/coi'
|
import { coiMsgBox, coiMsgError, coiMsgSuccess, coiMsgWarning } from '@/utils/coi'
|
||||||
import { usePermission } from '@/hooks/usePermission'
|
import { usePermission } from '@/hooks/usePermission'
|
||||||
import { PERMISSIONS } from '@/constants/permissions'
|
import { PERMISSIONS } from '@/constants/permissions'
|
||||||
@ -341,6 +360,11 @@ const searchForm = ref<SysFileSearchForm>({
|
|||||||
fileType: '0', // 默认全部
|
fileType: '0', // 默认全部
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// 图片预览相关
|
||||||
|
const imagePreviewVisible = ref(false)
|
||||||
|
const previewImageUrl = ref('')
|
||||||
|
const previewImageName = ref('')
|
||||||
|
|
||||||
// 文件上传相关
|
// 文件上传相关
|
||||||
const uploadFileList = ref<UploadFileInfo[]>([])
|
const uploadFileList = ref<UploadFileInfo[]>([])
|
||||||
const uploading = ref(false)
|
const uploading = ref(false)
|
||||||
@ -434,13 +458,14 @@ const columns: DataTableColumns<SysFileVo> = [
|
|||||||
)
|
)
|
||||||
|
|
||||||
if (isImage && row.filePath) {
|
if (isImage && row.filePath) {
|
||||||
return h(CoiImageViewer, {
|
return h(NImage, {
|
||||||
src: row.filePath,
|
src: row.filePath,
|
||||||
alt: row.fileName,
|
width: 45,
|
||||||
width: 50,
|
height: 30,
|
||||||
height: 40,
|
objectFit: 'cover',
|
||||||
previewable: true,
|
previewDisabled: true,
|
||||||
title: `文件预览 - ${row.fileName}`,
|
onClick: () => handleImagePreview(row.filePath!, row.fileName),
|
||||||
|
class: 'cursor-pointer rounded border',
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -456,7 +481,6 @@ const columns: DataTableColumns<SysFileVo> = [
|
|||||||
render: (row) => {
|
render: (row) => {
|
||||||
const serviceMap: Record<string, { type: 'success' | 'info' | 'warning', text: string }> = {
|
const serviceMap: Record<string, { type: 'success' | 'info' | 'warning', text: string }> = {
|
||||||
1: { type: 'success', text: '本地存储' },
|
1: { type: 'success', text: '本地存储' },
|
||||||
2: { type: 'info', text: 'MinIO存储' },
|
|
||||||
3: { type: 'warning', text: '阿里云OSS' },
|
3: { type: 'warning', text: '阿里云OSS' },
|
||||||
}
|
}
|
||||||
const config = serviceMap[row.fileService] || { type: 'info', text: '未知' }
|
const config = serviceMap[row.fileService] || { type: 'info', text: '未知' }
|
||||||
@ -652,6 +676,13 @@ function handleDownload(row: SysFileVo) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 图片预览
|
||||||
|
function handleImagePreview(url: string, name: string) {
|
||||||
|
previewImageUrl.value = url
|
||||||
|
previewImageName.value = name
|
||||||
|
imagePreviewVisible.value = true
|
||||||
|
}
|
||||||
|
|
||||||
// 文件上传相关函数
|
// 文件上传相关函数
|
||||||
|
|
||||||
// 打开上传弹框
|
// 打开上传弹框
|
||||||
|
|||||||
@ -191,16 +191,13 @@
|
|||||||
<template #trigger>
|
<template #trigger>
|
||||||
<div class="picture-card group relative bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden hover:shadow-md transition-shadow cursor-pointer">
|
<div class="picture-card group relative bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden hover:shadow-md transition-shadow cursor-pointer">
|
||||||
<!-- 图片预览 -->
|
<!-- 图片预览 -->
|
||||||
<div class="aspect-square relative overflow-hidden bg-gray-100 flex items-center justify-center">
|
<div class="aspect-square relative overflow-hidden bg-gray-100">
|
||||||
<CoiImageViewer
|
<img
|
||||||
:src="picture.picturePath"
|
:src="picture.picturePath"
|
||||||
:alt="picture.pictureName"
|
:alt="picture.pictureName"
|
||||||
:width="200"
|
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200"
|
||||||
:height="200"
|
@error="handleImageError"
|
||||||
:previewable="true"
|
>
|
||||||
:title="`图片预览 - ${picture.pictureName}`"
|
|
||||||
class="w-full h-full"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 图片信息 -->
|
<!-- 图片信息 -->
|
||||||
@ -347,7 +344,6 @@
|
|||||||
:options="[
|
:options="[
|
||||||
{ label: 'LOCAL', value: 'LOCAL' },
|
{ label: 'LOCAL', value: 'LOCAL' },
|
||||||
{ label: 'OSS', value: 'OSS' },
|
{ label: 'OSS', value: 'OSS' },
|
||||||
{ label: 'MINIO', value: 'MINIO' },
|
|
||||||
]"
|
]"
|
||||||
/>
|
/>
|
||||||
</n-form-item>
|
</n-form-item>
|
||||||
@ -406,12 +402,11 @@
|
|||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { h, onMounted, ref } from 'vue'
|
import { h, onMounted, ref } from 'vue'
|
||||||
import { NButton, NIcon, NP, NPopconfirm, NSpace, NSpin, NTag, NText, NTooltip, NUpload, NUploadDragger } from 'naive-ui'
|
import { NButton, NIcon, NImage, NP, NPopconfirm, NSpace, NSpin, NTag, NText, NTooltip, NUpload, NUploadDragger } from 'naive-ui'
|
||||||
import type { DataTableColumns, DataTableInst, FormInst, UploadFileInfo, UploadInst } from 'naive-ui'
|
import type { DataTableColumns, DataTableInst, FormInst, UploadFileInfo, UploadInst } from 'naive-ui'
|
||||||
import CoiEmpty from '@/components/common/CoiEmpty.vue'
|
import CoiEmpty from '@/components/common/CoiEmpty.vue'
|
||||||
import CoiDialog from '@/components/common/CoiDialog.vue'
|
import CoiDialog from '@/components/common/CoiDialog.vue'
|
||||||
import CoiPagination from '@/components/common/CoiPagination.vue'
|
import CoiPagination from '@/components/common/CoiPagination.vue'
|
||||||
import CoiImageViewer from '@/components/common/CoiImageViewer.vue'
|
|
||||||
import { coiMsgBox, coiMsgError, coiMsgSuccess, coiMsgWarning } from '@/utils/coi'
|
import { coiMsgBox, coiMsgError, coiMsgSuccess, coiMsgWarning } from '@/utils/coi'
|
||||||
import { usePermission } from '@/hooks/usePermission'
|
import { usePermission } from '@/hooks/usePermission'
|
||||||
import { PERMISSIONS } from '@/constants/permissions'
|
import { PERMISSIONS } from '@/constants/permissions'
|
||||||
@ -575,13 +570,13 @@ const columns: DataTableColumns<SysPictureVo> = [
|
|||||||
},
|
},
|
||||||
render: (row) => {
|
render: (row) => {
|
||||||
if (row.picturePath) {
|
if (row.picturePath) {
|
||||||
return h(CoiImageViewer, {
|
return h(NImage, {
|
||||||
src: row.picturePath,
|
src: row.picturePath,
|
||||||
alt: row.pictureName,
|
width: 45,
|
||||||
width: 50,
|
height: 30,
|
||||||
height: 40,
|
objectFit: 'cover',
|
||||||
previewable: true,
|
previewDisabled: true,
|
||||||
title: `图片预览 - ${row.pictureName}`,
|
class: 'rounded border',
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
return '--'
|
return '--'
|
||||||
@ -595,7 +590,6 @@ const columns: DataTableColumns<SysPictureVo> = [
|
|||||||
render: (row) => {
|
render: (row) => {
|
||||||
const serviceMap: Record<string, { type: 'success' | 'info' | 'warning', text: string }> = {
|
const serviceMap: Record<string, { type: 'success' | 'info' | 'warning', text: string }> = {
|
||||||
1: { type: 'success', text: '本地存储' },
|
1: { type: 'success', text: '本地存储' },
|
||||||
2: { type: 'info', text: 'MinIO存储' },
|
|
||||||
3: { type: 'warning', text: '阿里云OSS' },
|
3: { type: 'warning', text: '阿里云OSS' },
|
||||||
}
|
}
|
||||||
const config = serviceMap[row.pictureService] || { type: 'info', text: '未知' }
|
const config = serviceMap[row.pictureService] || { type: 'info', text: '未知' }
|
||||||
@ -801,11 +795,16 @@ function handleDownload(row: SysPictureVo) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 图片加载错误处理
|
||||||
|
function handleImageError(e: Event) {
|
||||||
|
const img = e.target as HTMLImageElement
|
||||||
|
img.src = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0IiBmaWxsPSIjRjVGNUY1Ii8+CjxwYXRoIGQ9Ik0yMCAyMEw0NCA0NEwyMCA0NFYyMFoiIGZpbGw9IiNEOUQ5RDkiLz4KPGNpcmNsZSBjeD0iMjgiIGN5PSIyOCIgcj0iNCIgZmlsbD0iI0Q5RDlEOSIvPgo8L3N2Zz4K'
|
||||||
|
}
|
||||||
|
|
||||||
// 获取图片服务类型文本
|
// 获取图片服务类型文本
|
||||||
function getPictureServiceText(serviceType: string): string {
|
function getPictureServiceText(serviceType: string): string {
|
||||||
const serviceMap: Record<string, string> = {
|
const serviceMap: Record<string, string> = {
|
||||||
1: '本地存储',
|
1: '本地存储',
|
||||||
2: 'MinIO存储',
|
|
||||||
3: '阿里云OSS',
|
3: '阿里云OSS',
|
||||||
}
|
}
|
||||||
return serviceMap[serviceType] || '未知'
|
return serviceMap[serviceType] || '未知'
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user