refactor: 简化证书弹窗组件,统一上传和查看模式的UI实现
- 移除查看模式的独立模板代码,统一使用上传模式的UI结构 - 优化报告区域布局,将下载按钮移至标题旁边 - 在查看模式下禁用上传组件,保持界面一致性 - 删除冗余的查看模式样式代码(certificate-display、certificate-item等) - 简化组件结构,减少代码重复,提升可维护性
This commit is contained in:
parent
5cf79a3f7e
commit
2d9a83d68e
@ -188,18 +188,17 @@ const isUploadMode = computed(() => props.mode === 'upload')
|
||||
style="width: 700px"
|
||||
@update:show="handleClose"
|
||||
>
|
||||
<!-- 上传模式 -->
|
||||
<div v-if="isUploadMode" class="certificate-content">
|
||||
<!-- 上传/查看模式 -->
|
||||
<div class="certificate-content">
|
||||
<!-- 报告上传部分 -->
|
||||
<div class="upload-section">
|
||||
<div class="section-title">报告:</div>
|
||||
<div class="section-header">
|
||||
<div class="section-title">报告:</div>
|
||||
<NButton text type="primary" @click="handleDownloadReport">
|
||||
点击下载原版报告
|
||||
</NButton>
|
||||
</div>
|
||||
<div class="upload-content">
|
||||
<div class="download-section">
|
||||
<NButton text type="primary" @click="handleDownloadReport">
|
||||
点击下载原版报告
|
||||
</NButton>
|
||||
</div>
|
||||
|
||||
<NUpload
|
||||
v-model:file-list="reportFileList"
|
||||
:max="5"
|
||||
@ -208,6 +207,7 @@ const isUploadMode = computed(() => props.mode === 'upload')
|
||||
@change="handleReportUploadChange"
|
||||
@remove="handleRemove"
|
||||
:custom-request="customRequest"
|
||||
:disabled="!isUploadMode"
|
||||
show-preview-button
|
||||
show-download-button
|
||||
@download="handleDownload"
|
||||
@ -228,6 +228,7 @@ const isUploadMode = computed(() => props.mode === 'upload')
|
||||
@change="handleCertificateUploadChange"
|
||||
@remove="handleRemove"
|
||||
:custom-request="customRequest"
|
||||
:disabled="!isUploadMode"
|
||||
show-preview-button
|
||||
show-download-button
|
||||
@download="handleDownload"
|
||||
@ -237,90 +238,6 @@ const isUploadMode = computed(() => props.mode === 'upload')
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 查看模式 -->
|
||||
<div v-else class="certificate-content">
|
||||
<!-- 报告查看部分 -->
|
||||
<div class="view-section">
|
||||
<div class="section-title">报告:</div>
|
||||
<div class="view-content">
|
||||
<div class="download-area">
|
||||
<NButton text type="primary" @click="handleDownloadReport">
|
||||
<!-- 临时移除图标 -->
|
||||
<!-- <template #icon>
|
||||
<NIcon :component="DownloadIcon" />
|
||||
</template> -->
|
||||
点击下载原版报告
|
||||
</NButton>
|
||||
</div>
|
||||
|
||||
<div v-if="reportFileList.length > 0" class="file-info">
|
||||
<NText>{{ reportFileList[0]?.name }} 下载</NText>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 证书查看部分 -->
|
||||
<div class="view-section">
|
||||
<div class="section-title">证书:</div>
|
||||
<div class="view-content">
|
||||
<div v-if="certificateFileList.length === 0" class="empty-state">
|
||||
<NText depth="3">暂无证书文件</NText>
|
||||
</div>
|
||||
<div v-else class="certificate-display">
|
||||
<NImageGroup>
|
||||
<div
|
||||
v-for="file in certificateFileList"
|
||||
:key="file.id"
|
||||
class="certificate-item"
|
||||
>
|
||||
<div class="certificate-image">
|
||||
<NImage
|
||||
v-if="file.type?.startsWith('image/')"
|
||||
:src="file.url"
|
||||
width="120"
|
||||
height="120"
|
||||
object-fit="cover"
|
||||
:preview-src="file.url"
|
||||
/>
|
||||
<div v-else class="file-icon" @click="handlePreview(file)">
|
||||
{{ file.name?.split('.').pop()?.toUpperCase() || 'FILE' }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="file-actions">
|
||||
<NButton
|
||||
v-if="file.type?.startsWith('image/')"
|
||||
size="small"
|
||||
type="primary"
|
||||
text
|
||||
@click="() => {}"
|
||||
style="visibility: hidden;"
|
||||
>
|
||||
预览
|
||||
</NButton>
|
||||
<NButton
|
||||
v-else
|
||||
size="small"
|
||||
type="primary"
|
||||
text
|
||||
disabled
|
||||
>
|
||||
不支持预览
|
||||
</NButton>
|
||||
<NButton
|
||||
size="small"
|
||||
type="primary"
|
||||
text
|
||||
@click="handleDownload(file)"
|
||||
>
|
||||
下载
|
||||
</NButton>
|
||||
</div>
|
||||
</div>
|
||||
</NImageGroup>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<div class="modal-footer">
|
||||
@ -353,11 +270,18 @@ const isUploadMode = computed(() => props.mode === 'upload')
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-bottom: 12px;
|
||||
font-weight: normal;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.upload-content {
|
||||
@ -465,57 +389,6 @@ const isUploadMode = computed(() => props.mode === 'upload')
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.certificate-display {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.certificate-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.certificate-image {
|
||||
cursor: pointer;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #e8e8e8;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.certificate-image:hover {
|
||||
border-color: #1890ff;
|
||||
box-shadow: 0 4px 12px rgba(24, 144, 255, 0.15);
|
||||
}
|
||||
|
||||
.file-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
padding: 40px 20px;
|
||||
text-align: center;
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.file-icon {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #f5f5f5;
|
||||
color: #666;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
/* 底部按钮 */
|
||||
.modal-footer {
|
||||
@ -547,12 +420,5 @@ const isUploadMode = computed(() => props.mode === 'upload')
|
||||
width: 95vw !important;
|
||||
}
|
||||
|
||||
.certificate-display {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.certificate-image {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user