|
|
@@ -245,47 +245,62 @@
|
|
|
<!-- 附件信息 -->
|
|
|
<div class="detail-section">
|
|
|
<h3 class="section-title">相关附件</h3>
|
|
|
- <div v-loading="attachmentsLoading" class="attachments-container">
|
|
|
- <div v-if="attachmentsList.length > 0" class="attachments-list">
|
|
|
- <div v-for="attachment in attachmentsList" :key="attachment.id" class="attachment-item">
|
|
|
- <div class="attachment-info">
|
|
|
- <i :class="getFileTypeIcon(attachment.fileType)" class="file-icon"></i>
|
|
|
- <div class="file-details">
|
|
|
- <div class="file-name" :title="attachment.fileName">
|
|
|
- {{ attachment.fileName }}
|
|
|
- </div>
|
|
|
- <div class="file-meta">
|
|
|
- <span class="file-size">{{ formatFileSize(attachment.fileSize) }}</span>
|
|
|
- <span class="file-type">{{ attachment.fileType && attachment.fileType.toUpperCase() }}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="attachment-actions">
|
|
|
- <el-button v-if="isImageFile(attachment.fileType)" type="text" size="small"
|
|
|
- icon="el-icon-zoom-in" @click="handlePreviewImage(attachment)">
|
|
|
- 预览
|
|
|
- </el-button>
|
|
|
- <!-- <el-button type="text" size="small" icon="el-icon-view"
|
|
|
- @click="handleViewAttachment(attachment)">
|
|
|
- 查看
|
|
|
- </el-button> -->
|
|
|
- <el-button type="text" size="small" icon="el-icon-download"
|
|
|
- @click="handleDownloadAttachment(attachment)">
|
|
|
- 下载
|
|
|
- </el-button>
|
|
|
- </div>
|
|
|
- <!-- 图片缩略图 -->
|
|
|
- <div v-if="isImageFile(attachment.fileType)" class="image-thumbnail">
|
|
|
- <img :src="attachment.fileUrl" :alt="attachment.fileName"
|
|
|
- @click="handlePreviewImage(attachment)" @error="handleImageError" />
|
|
|
+ <el-table :data="attachmentsList" v-loading="attachmentsLoading" stripe border
|
|
|
+ style="width: 100%" empty-text="暂无相关附件" size="small">
|
|
|
+ <el-table-column prop="fileName" label="文件名称" min-width="100" show-overflow-tooltip>
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span :title="scope.row.fileName">{{ scope.row.fileName }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <!-- 缩略图列 -->
|
|
|
+ <el-table-column label="缩略图" min-width="200" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div class="attachment-thumbnail">
|
|
|
+ <!-- 图片文件显示缩略图 -->
|
|
|
+ <img v-if="isImageFile(scope.row.fileType)" :src="scope.row.fileUrl"
|
|
|
+ :alt="scope.row.fileName" width="50px" class="thumbnail-image"
|
|
|
+ @click="handlePreviewImage(scope.row)" @error="handleImageError" />
|
|
|
+ <!-- 非图片文件显示图标 -->
|
|
|
+ <i v-else :class="getFileTypeIcon(scope.row.fileType)"
|
|
|
+ class="file-type-icon"></i>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div v-else class="no-attachments">
|
|
|
- <i class="el-icon-document"></i>
|
|
|
- <p>暂无相关附件</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column prop="attachType" label="附件类型" width="120" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-tag size="mini" type="info">{{ scope.row.fileType }}</el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column prop="fileSize" label="文件大小" width="100" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ formatFileSize(scope.row.fileSize) }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column prop="createTime" label="上传时间" width="160" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ scope.row.createTime }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column label="操作" width="120" align="center" fixed="right">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <!-- 图片文件显示预览按钮 -->
|
|
|
+ <el-button v-if="isImageFile(scope.row.fileType)" type="text" size="mini"
|
|
|
+ icon="el-icon-view" @click="handlePreviewImage(scope.row)" title="预览">
|
|
|
+ 预览
|
|
|
+ </el-button>
|
|
|
+ <!-- PDF文件不显示预览按钮，只显示下载 -->
|
|
|
+ <el-button type="text" size="mini" icon="el-icon-download"
|
|
|
+ @click="handleDownloadAttachment(scope.row)" title="下载">
|
|
|
+ 下载
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
yz