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