im-uniapp/components/oa/oa-file-list/index.vue

<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>