From f91ab6d45f269d5ba0e2a2fd70943d4e4a44a4d6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A0=82=E7=B3=96?= <qq2178503051@163.com>
Date: Wed, 25 Feb 2026 10:53:06 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=B8=BA=E5=AE=A1=E6=89=B9=E5=92=8C?=
 =?UTF-8?q?=E4=BB=BB=E5=8A=A1=E9=A1=B5=E9=9D=A2=E6=96=B0=E5=A2=9E=E6=96=87?=
 =?UTF-8?q?=E4=BB=B6=E9=A2=84=E8=A7=88=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

添加文件预览组件到印章、报销、差旅审批详情页和任务详情页
移除旧版附件展示代码，统一使用新的文件预览组件
更新版本号至5.2.2
---
 components/hrm/detailPanels/reimburse.vue |   7 +
 components/hrm/detailPanels/seal.vue      |   8 +
 components/hrm/detailPanels/travel.vue    |   9 +
 components/oa/oa-file-list/index.vue      | 227 ++++++++++++++++++++++
 pages/workbench/task/reportTaskDetail.vue |  19 +-
 version.md                                |   5 +-
 6 files changed, 271 insertions(+), 4 deletions(-)
 create mode 100644 components/oa/oa-file-list/index.vue

diff --git a/components/hrm/detailPanels/reimburse.vue b/components/hrm/detailPanels/reimburse.vue
index b93648a..255acdd 100644
--- a/components/hrm/detailPanels/reimburse.vue
+++ b/components/hrm/detailPanels/reimburse.vue
@@ -42,6 +42,13 @@
 			<view class="item-label">更新人：</view>
 			<view class="item-value">{{ detail.updateBy || '无' }}</view>
 		</view>
+		<view class="detail-item single-item">
+		  <text class="item-icon icon-date"></text>
+		  <view class="item-label">附件：</view>
+		  <view class="item-value">
+				<oa-file-list :files="detail.accessoryApplyIds"></oa-file-list>
+			</view>
+		</view>
 		
 		<view class="detail-item single-item amount-item" @click="openPopup" v-if="detail.projectId">
 			<text class="item-icon icon-creator"></text>
diff --git a/components/hrm/detailPanels/seal.vue b/components/hrm/detailPanels/seal.vue
index bbc55ea..b5ad9d6 100644
--- a/components/hrm/detailPanels/seal.vue
+++ b/components/hrm/detailPanels/seal.vue
@@ -36,6 +36,14 @@
 			<view class="item-label">更新人</view>
 			<view class="item-value">{{ detail.updateBy || '无' }}</view>
 		</view>
+		<view class="detail-item single-item">
+		  <text class="item-icon icon-date"></text>
+		  <view class="item-label">附件：</view>
+		  <view class="item-value">
+				<oa-file-list :files="detail.applyFileIds"></oa-file-list>
+			</view>
+		</view>
+		
 		
 		<view class="detail-item single-item amount-item" @click="openPopup" v-if="detail.projectId">
 			<text class="item-icon icon-creator"></text>
diff --git a/components/hrm/detailPanels/travel.vue b/components/hrm/detailPanels/travel.vue
index 476c318..534b870 100644
--- a/components/hrm/detailPanels/travel.vue
+++ b/components/hrm/detailPanels/travel.vue
@@ -66,6 +66,15 @@
 			<view class="item-label">申请时间</view>
 			<view class="item-value">{{ detail.createTime || '无' }}</view>
 		</view>
+		
+		<view class="detail-item single-item">
+		  <text class="item-icon icon-date"></text>
+		  <view class="item-label">行程附件：</view>
+		  <view class="item-value">
+				<oa-file-list :files="detail.accessoryApplyIds"></oa-file-list>
+			</view>
+		</view>
+		
 		<view class="detail-item single-item amount-item" @click="openPopup" v-if="detail.projectId">
 			<text class="item-icon icon-creator"></text>
 			<view class="item-label">项目名称</view>
diff --git a/components/oa/oa-file-list/index.vue b/components/oa/oa-file-list/index.vue
new file mode 100644
index 0000000..0f34e66
--- /dev/null
+++ b/components/oa/oa-file-list/index.vue
@@ -0,0 +1,227 @@
+<template>
+	<view class="">
+		<view v-if="files" class="attachment-list">
+			<view v-for="(file, index) in attachmentFiles" :key="`${file.ossId}_${index}`" class="attachment-item"
+				@click="previewFile(file)">
+				<view class="file-icon">
+					<u-icon :name="getFileIcon(file.originalName)" size="24" color="#007aff"></u-icon>
+				</view>
+				<view class="file-info">
+					<text class="file-name">{{ getFileName(file.originalName) }}</text>
+					<text class="file-size">{{ formatFileSize(file.fileSize) }}</text>
+				</view>
+				<view class="file-action">
+					<u-icon @click.native.stop="downloadFile(file)" name="download" size="20" color="#007aff"></u-icon>
+				</view>
+			</view>
+		</view>
+		<view v-if="files && attachmentFiles.length === 0" class="no-attachment">
+			暂无附件
+		</view>
+	</view>
+</template>
+
+<script>
+	import {
+		getFilesByIds
+	} from '@/api/common/upload.js'
+
+	export default {
+		props: {
+			files: {
+				type: String,
+				required: true
+			}
+		},
+		data() {
+			return {
+				attachmentFiles: []
+			}
+		},
+		watch: {
+			files: {
+				handler(newVal) {
+					this.loadAttachmentFiles(newVal)
+				},
+				immediate: true,
+			}
+		},
+		methods: {
+			// 加载附件文件信息
+			async loadAttachmentFiles(accessory) {
+				try {
+					const ossIds = accessory.split(',').filter(id => id.trim())
+					if (ossIds.length > 0) {
+						const files = await getFilesByIds(ossIds)
+						this.attachmentFiles = files || []
+					} else {
+						this.attachmentFiles = []
+					}
+				} catch (error) {
+					console.error('加载附件失败:', error)
+					this.attachmentFiles = []
+				}
+			},
+			// 下载文件
+			downloadFile(file) {
+				// 使用uni.downloadFile下载文件
+				uni.downloadFile({
+					url: file.url,
+					success: (res) => {
+						if (res.statusCode === 200) {
+							// 保存文件到本地
+							uni.saveFile({
+								tempFilePath: res.tempFilePath,
+								success: (saveRes) => {
+									uni.showToast({
+										title: '文件已保存到本地',
+										icon: 'success'
+									})
+								},
+								fail: (err) => {
+									console.error('保存文件失败:', err)
+									uni.showToast({
+										title: '保存文件失败',
+										icon: 'none'
+									})
+								}
+							})
+						}
+					},
+					fail: (err) => {
+						console.error('下载文件失败:', err)
+						uni.showToast({
+							title: '下载文件失败',
+							icon: 'none'
+						})
+					}
+				})
+			},
+
+			previewFile(file) {
+				console.log(file)
+				uni.showLoading({
+					title: '正在打开文件',
+				})
+				uni.downloadFile({
+					url: file.url,
+					success(res) {
+						uni.openDocument({
+							filePath: res.tempFilePath,
+							success() {
+								uni.hideLoading()
+							}
+						})
+					},
+					fail() {
+						uni.hideLoading()
+					}
+				})
+			},
+
+			// 获取文件图标
+			getFileIcon(fileName) {
+				const ext = fileName.split('.').pop().toLowerCase()
+				const iconMap = {
+					'pdf': 'file-text',
+					'doc': 'file-text',
+					'docx': 'file-text',
+					'xls': 'file-text',
+					'xlsx': 'file-text',
+					'ppt': 'file-text',
+					'pptx': 'file-text',
+					'txt': 'file-text',
+					'jpg': 'file-text',
+					'jpeg': 'file-text',
+					'png': 'file-text',
+					'gif': 'file-text',
+					'zip': 'folder',
+					'rar': 'folder',
+					'7z': 'folder',
+					'dwg': 'file-text'
+				}
+				return iconMap[ext] || 'file-text'
+			},
+
+			// 获取文件名
+			getFileName(fileName) {
+				if (!fileName) return ''
+				const name = fileName.includes('/') ? fileName.split('/').pop() : fileName
+				// 如果文件名超过20个字符，截取前17个字符并添加省略号
+				if (name.length > 20) {
+					return name.substring(0, 17) + '...'
+				}
+				return name
+			},
+
+			// 格式化文件大小
+			formatFileSize(size) {
+				if (!size) return ''
+				if (size < 1024) {
+					return size + 'B'
+				} else if (size < 1024 * 1024) {
+					return (size / 1024).toFixed(2) + 'KB'
+				} else {
+					return (size / (1024 * 1024)).toFixed(2) + 'MB'
+				}
+			},
+		},
+	}
+</script>
+
+<style>
+	.attachment-list {
+		margin-top: 16rpx;
+	}
+
+	.attachment-item {
+		display: flex;
+		align-items: center;
+		padding: 20rpx;
+		background-color: #f8f9fa;
+		border-radius: 8rpx;
+		margin-bottom: 16rpx;
+		cursor: pointer;
+		transition: background-color 0.2s;
+	}
+
+	.attachment-item:hover {
+		background-color: #e9ecef;
+	}
+
+	.file-icon {
+		margin-right: 16rpx;
+	}
+
+	.file-info {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.file-name {
+		font-size: 28rpx;
+		color: #333;
+		margin-bottom: 8rpx;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		max-width: 400rpx;
+	}
+
+	.file-size {
+		font-size: 24rpx;
+		color: #999;
+	}
+
+	.file-action {
+		margin-left: 16rpx;
+	}
+
+	.no-attachment {
+		text-align: center;
+		color: #999;
+		font-size: 28rpx;
+		padding: 40rpx 0;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/workbench/task/reportTaskDetail.vue b/pages/workbench/task/reportTaskDetail.vue
index 4a98bac..981daf7 100644
--- a/pages/workbench/task/reportTaskDetail.vue
+++ b/pages/workbench/task/reportTaskDetail.vue
@@ -81,12 +81,13 @@
 
 			<!-- 附件展示 -->
 			<view v-if="taskDetail.accessory" class="section-title">附件</view>
-			<view v-if="taskDetail.accessory" class="attachment-list">
+			<oa-file-list v-if="taskDetail.accessory" :files="taskDetail.accessory"></oa-file-list>
+			<!-- <view v-if="taskDetail.accessory" class="attachment-list">
 				<view 
 					v-for="(file, index) in attachmentFiles" 
 					:key="`${file.ossId}_${index}`"
 					class="attachment-item"
-					@click="downloadFile(file)"
+					@click="previewFile(file)"
 				>
 					<view class="file-icon">
 						<u-icon :name="getFileIcon(file.originalName)" size="24" color="#007aff"></u-icon>
@@ -102,7 +103,7 @@
 			</view>
 			<view v-if="taskDetail.accessory && attachmentFiles.length === 0" class="no-attachment">
 				暂无附件
-			</view>
+			</view> -->
 
 			<!-- 新增报工按钮（仅报工任务显示） -->
 			<u-button v-if="isReportTask" type="primary" class="add-btn" @click="openAddPopup">新增报工</u-button>
@@ -309,6 +310,18 @@ export default {
 				}
 			})
 		},
+		
+		previewFile(file) {
+			console.log(file)
+			uni.downloadFile({
+				url: file.url,
+				success(res) {
+					uni.openDocument({
+						filePath: res.tempFilePath,
+					})
+				}
+			})
+		},
 
 		// 获取文件图标
 		getFileIcon(fileName) {
diff --git a/version.md b/version.md
index 7da49f6..dbcaecb 100644
--- a/version.md
+++ b/version.md
@@ -74,4 +74,7 @@
 
 ## 5.2.1
 + HRM办公作为一个独立的tab
-+ 办公审批增加项目的绑定展示
\ No newline at end of file
++ 办公审批增加项目的绑定展示
+
+## 5.2.2
++ 为部分页面新增文件预览功能（审批页面和任务页面）
\ No newline at end of file