From 7fe78d6c1966742203f4154feed99060254418cb Mon Sep 17 00:00:00 2001
From: zhangjf <zhangjf@example.com>
Date: Mon, 16 Feb 2026 09:57:31 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=87=E4=BB=B6=E4=B8=8A=E4=BC=A0?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86=E6=A8=A1=E5=9D=97=E5=89=8D=E7=AB=AF=E5=AE=9E?=
 =?UTF-8?q?=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

前端实现：
- 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预览
- 文件选择对话框

模块状态：✅ 完整（前端+后端）
---
 fund-admin/src/api/file.js           |  67 +++++
 fund-admin/src/views/system/file.vue | 402 +++++++++++++++++++++++++++
 2 files changed, 469 insertions(+)
 create mode 100644 fund-admin/src/api/file.js
 create mode 100644 fund-admin/src/views/system/file.vue

diff --git a/fund-admin/src/api/file.js b/fund-admin/src/api/file.js
new file mode 100644
index 0000000..e56f0b5
--- /dev/null
+++ b/fund-admin/src/api/file.js
@@ -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'
+  })
+}
diff --git a/fund-admin/src/views/system/file.vue b/fund-admin/src/views/system/file.vue
new file mode 100644
index 0000000..e413b31
--- /dev/null
+++ b/fund-admin/src/views/system/file.vue
@@ -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>