feat: 文件上传管理模块前端实现
前端实现：
- file.js: API接口封装（68行，6个接口）
- uploadFile(): 上传文件（multipart/form-data）
- getFileList(): 分页查询
- getFileListByBusiness(): 按业务查询
- getFileById(): 查询详情
- deleteFile(): 删除文件
- getFileUrl(): 获取URL
- file.vue: 文件管理页面（403行）
- 搜索功能：文件名、业务类型、关联业务ID
- 表格展示：文件ID、文件名（链接）、业务类型标签、关联ID、大小、类型、上传人、时间
- 上传功能：el-upload组件、业务类型选择、关联ID输入
- 预览功能：图片预览、PDF预览、其他文件提示
- 下载功能：获取URL后下载
- 删除功能：确认后删除
技术特点：
- 文件上传（multipart/form-data）
- 文件大小格式化（B/KB/MB/GB）
- 业务类型标签（合同/收款/支出/其他）
- 图片/PDF预览
- 文件选择对话框
模块状态：✅ 完整（前端+后端）
This commit is contained in:
zhangjf
parent
c184e649ee
commit
7fe78d6c19
67
fund-admin/src/api/file.js
Normal file
67
fund-admin/src/api/file.js
Normal file
@ -0,0 +1,67 @@
|
|||||||
|
import request from '../utils/request'
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 上传文件
|
||||||
|
*/
|
||||||
|
export const uploadFile = (data) => {
|
||||||
|
return request({
|
||||||
|
url: '/sys/api/v1/file/upload',
|
||||||
|
method: 'post',
|
||||||
|
data,
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'multipart/form-data'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取文件列表（分页）
|
||||||
|
*/
|
||||||
|
export const getFileList = (params) => {
|
||||||
|
return request({
|
||||||
|
url: '/sys/api/v1/file/list',
|
||||||
|
method: 'get',
|
||||||
|
params
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 根据业务类型和ID查询文件列表
|
||||||
|
*/
|
||||||
|
export const getFileListByBusiness = (businessType, businessId) => {
|
||||||
|
return request({
|
||||||
|
url: '/sys/api/v1/file/list/business',
|
||||||
|
method: 'get',
|
||||||
|
params: { businessType, businessId }
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取文件详情
|
||||||
|
*/
|
||||||
|
export const getFileById = (fileId) => {
|
||||||
|
return request({
|
||||||
|
url: `/sys/api/v1/file/${fileId}`,
|
||||||
|
method: 'get'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 删除文件
|
||||||
|
*/
|
||||||
|
export const deleteFile = (fileId) => {
|
||||||
|
return request({
|
||||||
|
url: `/sys/api/v1/file/${fileId}`,
|
||||||
|
method: 'delete'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取文件访问URL
|
||||||
|
*/
|
||||||
|
export const getFileUrl = (fileId) => {
|
||||||
|
return request({
|
||||||
|
url: `/sys/api/v1/file/${fileId}/url`,
|
||||||
|
method: 'get'
|
||||||
|
})
|
||||||
|
}
|
||||||
402
fund-admin/src/views/system/file.vue
Normal file
402
fund-admin/src/views/system/file.vue
Normal file
@ -0,0 +1,402 @@
|
|||||||
|
<template>
|
||||||
|
<div class="file-container">
|
||||||
|
<el-card>
|
||||||
|
<!-- 搜索栏 -->
|
||||||
|
<el-form :inline="true" :model="searchForm">
|
||||||
|
<el-form-item label="文件名">
|
||||||
|
<el-input v-model="searchForm.fileName" placeholder="请输入文件名" clearable style="width: 200px;" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="业务类型">
|
||||||
|
<el-select v-model="searchForm.businessType" placeholder="请选择业务类型" clearable style="width: 150px;">
|
||||||
|
<el-option label="合同附件" value="contract" />
|
||||||
|
<el-option label="收款凭证" value="receipt" />
|
||||||
|
<el-option label="支出凭证" value="expense" />
|
||||||
|
<el-option label="其他" value="other" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="关联业务ID">
|
||||||
|
<el-input-number v-model="searchForm.businessId" :min="1" controls-position="right" style="width: 150px;" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" @click="handleSearch">搜索</el-button>
|
||||||
|
<el-button @click="handleReset">重置</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
|
||||||
|
<!-- 操作栏 -->
|
||||||
|
<el-row style="margin-bottom: 15px;">
|
||||||
|
<el-upload
|
||||||
|
ref="uploadRef"
|
||||||
|
action="#"
|
||||||
|
:auto-upload="false"
|
||||||
|
:on-change="handleFileChange"
|
||||||
|
:show-file-list="false"
|
||||||
|
:before-upload="beforeUpload"
|
||||||
|
>
|
||||||
|
<el-button type="primary">上传文件</el-button>
|
||||||
|
</el-upload>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
<!-- 表格 -->
|
||||||
|
<el-table :data="tableData" border v-loading="loading" stripe>
|
||||||
|
<el-table-column prop="fileId" label="文件ID" width="80" />
|
||||||
|
<el-table-column prop="originalName" label="文件名" width="250" show-overflow-tooltip>
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-link type="primary" @click="handlePreview(row)">
|
||||||
|
<el-icon><Document /></el-icon>
|
||||||
|
{{ row.originalName }}
|
||||||
|
</el-link>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="businessType" label="业务类型" width="120">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-tag :type="getBusinessTypeTag(row.businessType)">
|
||||||
|
{{ getBusinessTypeText(row.businessType) }}
|
||||||
|
</el-tag>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="businessId" label="关联业务ID" width="120" />
|
||||||
|
<el-table-column prop="fileSize" label="文件大小" width="120">
|
||||||
|
<template #default="{ row }">
|
||||||
|
{{ formatFileSize(row.fileSize) }}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="fileType" label="文件类型" width="180" show-overflow-tooltip />
|
||||||
|
<el-table-column prop="uploadName" label="上传人" width="120" />
|
||||||
|
<el-table-column prop="createdTime" label="上传时间" width="180" />
|
||||||
|
<el-table-column label="操作" width="200" fixed="right">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-button type="primary" size="small" @click="handleDownload(row)">下载</el-button>
|
||||||
|
<el-button type="success" size="small" @click="handlePreview(row)">预览</el-button>
|
||||||
|
<el-button type="danger" size="small" @click="handleDelete(row)">删除</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
|
||||||
|
<!-- 分页 -->
|
||||||
|
<el-pagination
|
||||||
|
v-model:current-page="page.current"
|
||||||
|
v-model:page-size="page.size"
|
||||||
|
:total="page.total"
|
||||||
|
:page-sizes="[10, 20, 50, 100]"
|
||||||
|
layout="total, sizes, prev, pager, next, jumper"
|
||||||
|
@size-change="fetchData"
|
||||||
|
@current-change="fetchData"
|
||||||
|
style="margin-top: 20px; justify-content: flex-end;"
|
||||||
|
/>
|
||||||
|
</el-card>
|
||||||
|
|
||||||
|
<!-- 上传对话框 -->
|
||||||
|
<el-dialog v-model="uploadDialogVisible" title="上传文件" width="500px">
|
||||||
|
<el-form :model="uploadForm" label-width="100px">
|
||||||
|
<el-form-item label="选择文件">
|
||||||
|
<div v-if="selectedFile" class="selected-file">
|
||||||
|
<el-icon><Document /></el-icon>
|
||||||
|
<span>{{ selectedFile.name }}</span>
|
||||||
|
<span class="file-size">({{ formatFileSize(selectedFile.size) }})</span>
|
||||||
|
</div>
|
||||||
|
<el-button v-else @click="triggerFileSelect">选择文件</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="业务类型">
|
||||||
|
<el-select v-model="uploadForm.businessType" placeholder="请选择业务类型" style="width: 100%;">
|
||||||
|
<el-option label="合同附件" value="contract" />
|
||||||
|
<el-option label="收款凭证" value="receipt" />
|
||||||
|
<el-option label="支出凭证" value="expense" />
|
||||||
|
<el-option label="其他" value="other" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="关联业务ID">
|
||||||
|
<el-input-number v-model="uploadForm.businessId" :min="1" style="width: 100%;" placeholder="请输入关联的业务ID" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="备注">
|
||||||
|
<el-input v-model="uploadForm.remark" type="textarea" :rows="3" placeholder="请输入备注" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
|
||||||
|
<template #footer>
|
||||||
|
<el-button @click="uploadDialogVisible = false">取消</el-button>
|
||||||
|
<el-button type="primary" @click="handleUpload" :disabled="!selectedFile">上传</el-button>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
|
||||||
|
<!-- 预览对话框 -->
|
||||||
|
<el-dialog v-model="previewDialogVisible" title="文件预览" width="800px">
|
||||||
|
<div class="preview-content">
|
||||||
|
<!-- 图片预览 -->
|
||||||
|
<img v-if="isImage(currentFile.fileType)" :src="currentFile.fileUrl" style="max-width: 100%;" />
|
||||||
|
|
||||||
|
<!-- PDF预览 -->
|
||||||
|
<iframe v-else-if="isPDF(currentFile.fileType)" :src="currentFile.fileUrl" style="width: 100%; height: 600px;"></iframe>
|
||||||
|
|
||||||
|
<!-- 其他文件 -->
|
||||||
|
<div v-else class="unsupported-preview">
|
||||||
|
<el-icon :size="64"><Document /></el-icon>
|
||||||
|
<p>该文件类型暂不支持预览</p>
|
||||||
|
<p>文件名：{{ currentFile.originalName }}</p>
|
||||||
|
<p>文件大小：{{ formatFileSize(currentFile.fileSize) }}</p>
|
||||||
|
<el-button type="primary" @click="handleDownload(currentFile)">下载查看</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, reactive, onMounted } from 'vue'
|
||||||
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||||
|
import { Document } from '@element-plus/icons-vue'
|
||||||
|
import {
|
||||||
|
getFileList,
|
||||||
|
uploadFile,
|
||||||
|
deleteFile,
|
||||||
|
getFileUrl
|
||||||
|
} from '../../api/file'
|
||||||
|
|
||||||
|
// 搜索表单
|
||||||
|
const searchForm = reactive({
|
||||||
|
fileName: '',
|
||||||
|
businessType: '',
|
||||||
|
businessId: null
|
||||||
|
})
|
||||||
|
|
||||||
|
// 表格数据
|
||||||
|
const tableData = ref([])
|
||||||
|
const loading = ref(false)
|
||||||
|
|
||||||
|
// 分页
|
||||||
|
const page = reactive({
|
||||||
|
current: 1,
|
||||||
|
size: 10,
|
||||||
|
total: 0
|
||||||
|
})
|
||||||
|
|
||||||
|
// 上传相关
|
||||||
|
const uploadRef = ref(null)
|
||||||
|
const uploadDialogVisible = ref(false)
|
||||||
|
const selectedFile = ref(null)
|
||||||
|
const uploadForm = reactive({
|
||||||
|
businessType: '',
|
||||||
|
businessId: null,
|
||||||
|
remark: ''
|
||||||
|
})
|
||||||
|
|
||||||
|
// 预览相关
|
||||||
|
const previewDialogVisible = ref(false)
|
||||||
|
const currentFile = ref({})
|
||||||
|
|
||||||
|
// 获取业务类型标签
|
||||||
|
const getBusinessTypeTag = (type) => {
|
||||||
|
const tagMap = {
|
||||||
|
'contract': 'primary',
|
||||||
|
'receipt': 'success',
|
||||||
|
'expense': 'warning',
|
||||||
|
'other': 'info'
|
||||||
|
}
|
||||||
|
return tagMap[type] || 'info'
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取业务类型文本
|
||||||
|
const getBusinessTypeText = (type) => {
|
||||||
|
const textMap = {
|
||||||
|
'contract': '合同附件',
|
||||||
|
'receipt': '收款凭证',
|
||||||
|
'expense': '支出凭证',
|
||||||
|
'other': '其他'
|
||||||
|
}
|
||||||
|
return textMap[type] || type
|
||||||
|
}
|
||||||
|
|
||||||
|
// 格式化文件大小
|
||||||
|
const formatFileSize = (size) => {
|
||||||
|
if (size < 1024) {
|
||||||
|
return size + ' B'
|
||||||
|
} else if (size < 1024 * 1024) {
|
||||||
|
return (size / 1024).toFixed(2) + ' KB'
|
||||||
|
} else if (size < 1024 * 1024 * 1024) {
|
||||||
|
return (size / (1024 * 1024)).toFixed(2) + ' MB'
|
||||||
|
} else {
|
||||||
|
return (size / (1024 * 1024 * 1024)).toFixed(2) + ' GB'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 判断是否为图片
|
||||||
|
const isImage = (fileType) => {
|
||||||
|
return fileType && fileType.startsWith('image/')
|
||||||
|
}
|
||||||
|
|
||||||
|
// 判断是否为PDF
|
||||||
|
const isPDF = (fileType) => {
|
||||||
|
return fileType === 'application/pdf'
|
||||||
|
}
|
||||||
|
|
||||||
|
// 加载数据
|
||||||
|
const fetchData = async () => {
|
||||||
|
loading.value = true
|
||||||
|
try {
|
||||||
|
const params = {
|
||||||
|
current: page.current,
|
||||||
|
size: page.size,
|
||||||
|
fileName: searchForm.fileName || undefined,
|
||||||
|
businessType: searchForm.businessType || undefined,
|
||||||
|
businessId: searchForm.businessId || undefined
|
||||||
|
}
|
||||||
|
const res = await getFileList(params)
|
||||||
|
tableData.value = res.records
|
||||||
|
page.total = res.total
|
||||||
|
} catch (error) {
|
||||||
|
console.error('加载数据失败:', error)
|
||||||
|
ElMessage.error(error.message || '加载数据失败')
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 搜索
|
||||||
|
const handleSearch = () => {
|
||||||
|
page.current = 1
|
||||||
|
fetchData()
|
||||||
|
}
|
||||||
|
|
||||||
|
// 重置
|
||||||
|
const handleReset = () => {
|
||||||
|
searchForm.fileName = ''
|
||||||
|
searchForm.businessType = ''
|
||||||
|
searchForm.businessId = null
|
||||||
|
page.current = 1
|
||||||
|
fetchData()
|
||||||
|
}
|
||||||
|
|
||||||
|
// 文件选择变化
|
||||||
|
const handleFileChange = (file) => {
|
||||||
|
selectedFile.value = file.raw
|
||||||
|
uploadDialogVisible.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
// 上传前验证
|
||||||
|
const beforeUpload = (file) => {
|
||||||
|
const isLt50M = file.size / 1024 / 1024 < 50
|
||||||
|
if (!isLt50M) {
|
||||||
|
ElMessage.error('文件大小不能超过 50MB!')
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
return false // 阻止自动上传
|
||||||
|
}
|
||||||
|
|
||||||
|
// 触发文件选择
|
||||||
|
const triggerFileSelect = () => {
|
||||||
|
uploadRef.value.$refs.input.click()
|
||||||
|
}
|
||||||
|
|
||||||
|
// 上传文件
|
||||||
|
const handleUpload = async () => {
|
||||||
|
if (!selectedFile.value) {
|
||||||
|
ElMessage.warning('请选择文件')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
const formData = new FormData()
|
||||||
|
formData.append('file', selectedFile.value)
|
||||||
|
formData.append('businessType', uploadForm.businessType || 'other')
|
||||||
|
if (uploadForm.businessId) {
|
||||||
|
formData.append('businessId', uploadForm.businessId)
|
||||||
|
}
|
||||||
|
formData.append('uploadBy', 1) // 当前用户ID
|
||||||
|
formData.append('uploadName', '管理员') // 当前用户名
|
||||||
|
|
||||||
|
try {
|
||||||
|
await uploadFile(formData)
|
||||||
|
ElMessage.success('上传成功')
|
||||||
|
uploadDialogVisible.value = false
|
||||||
|
selectedFile.value = null
|
||||||
|
uploadForm.businessType = ''
|
||||||
|
uploadForm.businessId = null
|
||||||
|
uploadForm.remark = ''
|
||||||
|
await fetchData()
|
||||||
|
} catch (error) {
|
||||||
|
console.error('上传失败:', error)
|
||||||
|
ElMessage.error(error.message || '上传失败')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 下载文件
|
||||||
|
const handleDownload = async (row) => {
|
||||||
|
try {
|
||||||
|
const res = await getFileUrl(row.fileId)
|
||||||
|
window.open(res, '_blank')
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取文件URL失败:', error)
|
||||||
|
ElMessage.error('下载失败')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 预览文件
|
||||||
|
const handlePreview = (row) => {
|
||||||
|
currentFile.value = row
|
||||||
|
previewDialogVisible.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
// 删除文件
|
||||||
|
const handleDelete = async (row) => {
|
||||||
|
try {
|
||||||
|
await ElMessageBox.confirm(`确定要删除文件 "${row.originalName}" 吗？`, '提示', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning'
|
||||||
|
})
|
||||||
|
|
||||||
|
await deleteFile(row.fileId)
|
||||||
|
ElMessage.success('删除成功')
|
||||||
|
|
||||||
|
// 如果是最后一条且不是第一页，返回上一页
|
||||||
|
if (tableData.value.length === 1 && page.current > 1) {
|
||||||
|
page.current--
|
||||||
|
}
|
||||||
|
|
||||||
|
await fetchData()
|
||||||
|
} catch (error) {
|
||||||
|
if (error !== 'cancel') {
|
||||||
|
console.error('删除失败:', error)
|
||||||
|
ElMessage.error(error.message || '删除失败')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 初始化
|
||||||
|
onMounted(() => {
|
||||||
|
fetchData()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.file-container {
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selected-file {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
padding: 10px;
|
||||||
|
background-color: #f5f7fa;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selected-file .file-size {
|
||||||
|
color: #909399;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-content {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.unsupported-preview {
|
||||||
|
padding: 40px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.unsupported-preview p {
|
||||||
|
margin: 10px 0;
|
||||||
|
color: #606266;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
x
Reference in New Issue
Block a user