wangys/urbanLifeline
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

组件使用

Browse Source
This commit is contained in:
wangys
2025-12-08 18:05:49 +08:00
parent 19ff3e2a93
commit 4f1f455660
17 changed files with 256 additions and 521 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
urbanLifelineWeb/packages/shared/src/components/fileupload/FileUpload.vue
View File

@@ -6,9 +6,9 @@
<img :src="currentCoverImg" class="image" :class="coverImageClass" @load="handleCoverImageLoad"
alt="封面图片" />
<div class="actions">
<Button variant="danger" size="small" @click="handleRemoveCover">
<ElButton type="danger" size="small" @click="handleRemoveCover">
×
</Button>
</ElButton>
</div>
</div>
@@ -35,64 +35,64 @@
<!-- 弹窗模式 -->
<div v-else-if="mode === 'dialog'" class="file-upload dialog">
<Button @click="showDialog = true" variant="primary">
<ElButton @click="showDialog = true" type="primary">
{{ buttonText || '上传文件' }}
</Button>
</ElButton>
<div v-if="showDialog" class="overlay" @click="closeDialog">
<div class="modal" @click.stop>
<div class="header">
<h3>{{ title || '文件上传' }}</h3>
<Button variant="secondary" size="small" @click="closeDialog">×</Button>
<ElDialog
v-model="showDialog"
:title="title || '文件上传'"
width="500px"
:before-close="handleDialogClose"
>
<div class="dialog-content">
<div class="area" :class="{ dragover: isDragover, disabled: uploading }" @click="triggerFileInput"
@drop.prevent="handleDrop" @dragover.prevent="handleDragOver"
@dragleave.prevent="handleDragLeave">
<div class="icon">
<div class="plus"></div>
</div>
<div class="text">
将文件拖到此处，或<span class="link">点击上传</span>
</div>
<div class="tip">{{ getUploadTip() }}</div>
</div>
<div class="container">
<div class="area" :class="{ dragover: isDragover, disabled: uploading }" @click="triggerFileInput"
@drop.prevent="handleDrop" @dragover.prevent="handleDragOver"
@dragleave.prevent="handleDragLeave">
<div class="icon">
<div class="plus"></div>
<input ref="fileInputRef" type="file" :accept="accept" :multiple="maxCount > 1"
@change="handleFileSelect" hidden />
<!-- 文件列表 -->
<div v-if="selectedFiles.length > 0" class="files">
<div v-for="(file, index) in selectedFiles" :key="index" class="file">
<div class="preview">
<img v-if="isImageFile(file)" :src="getFilePreviewUrl(file)" class="thumb" />
<span v-else class="type-icon">{{ getFileTypeIcon(file) }}</span>
</div>
<div class="text">
将文件拖到此处，或<span class="link">点击上传</span>
<div class="info">
<div class="name">{{ file.name }}</div>
<div class="size">{{ formatFileSize(file.size) }}</div>
</div>
<div class="tip">{{ getUploadTip() }}</div>
</div>
<input ref="fileInputRef" type="file" :accept="accept" :multiple="maxCount > 1"
@change="handleFileSelect" hidden />
<!-- 文件列表 -->
<div v-if="selectedFiles.length > 0" class="files">
<div v-for="(file, index) in selectedFiles" :key="index" class="file">
<div class="preview">
<img v-if="isImageFile(file)" :src="getFilePreviewUrl(file)" class="thumb" />
<span v-else class="type-icon">{{ getFileTypeIcon(file) }}</span>
</div>
<div class="info">
<div class="name">{{ file.name }}</div>
<div class="size">{{ formatFileSize(file.size) }}</div>
</div>
<div class="actions">
<Button variant="danger" size="small" @click="removeFile(index)" :disabled="uploading">
删除
</Button>
</div>
<div class="actions">
<ElButton type="danger" size="small" @click="removeFile(index)" :disabled="uploading">
删除
</ElButton>
</div>
</div>
</div>
<div class="footer">
<Button variant="secondary" @click="closeDialog" :disabled="uploading">取消</Button>
<Button variant="primary" @click="uploadFiles" :loading="uploading"
:disabled="selectedFiles.length === 0">
{{ uploading ? '上传中...' : '确定上传' }}
</Button>
</div>
</div>
</div>
<template #footer>
<div class="dialog-footer">
<ElButton @click="closeDialog" :disabled="uploading">取消</ElButton>
<ElButton type="primary" @click="uploadFiles" :loading="uploading"
:disabled="selectedFiles.length === 0">
{{ uploading ? '上传中...' : '确定上传' }}
</ElButton>
</div>
</template>
</ElDialog>
</div>
<!-- 内容模式 -->
@@ -127,19 +127,19 @@
</div>
<div class="actions">
<Button variant="danger" size="small" @click="removeFile(index)" :disabled="uploading">
<ElButton type="danger" size="small" @click="removeFile(index)" :disabled="uploading">
删除
</Button>
</ElButton>
</div>
</div>
</div>
<!-- 上传按钮 -->
<div v-if="selectedFiles.length > 0" class="actions">
<Button variant="primary" @click="uploadFiles" :loading="uploading"
<ElButton type="primary" @click="uploadFiles" :loading="uploading"
:disabled="selectedFiles.length === 0">
{{ uploading ? '上传中...' : '确定上传' }}
</Button>
</ElButton>
</div>
</div>
</div>
@@ -148,10 +148,10 @@
<script setup lang="ts">
import { ref, computed } from 'vue'
import { Button } from '@/components'
import { FILE_DOWNLOAD_URL } from '@/config'
import { fileAPI } from '@/api/file/file'
import type { TbSysFileDTO } from '@/types/file/file'
import { ElButton, ElDialog } from 'element-plus'
import {
formatFileSize,
isImageFile,
@@ -334,6 +334,15 @@ const closeDialog = () => {
isDragover.value = false
}
// 处理弹窗关闭前的回调
const handleDialogClose = (done: () => void) => {
if (uploading.value) {
return
}
closeDialog()
done()
}
// 上传文件
const uploadFiles = async () => {
if (selectedFiles.value.length === 0) return
@@ -400,5 +409,5 @@ const uploadFiles = async () => {
</script>
<style lang="scss" scoped>
@import './FileUpload.scss';
@import url('./FileUpload.scss');
</style>