<!-- 审批详情：基础信息 + 填报内容 -->
|
<template>
|
<div class="approve-detail-panel">
|
<div class="detail-block">
|
<div class="detail-block-title">基本信息</div>
|
<el-descriptions :column="2"
|
border>
|
<el-descriptions-item label="业务单号">{{ row.bizId || row.id || "—" }}</el-descriptions-item>
|
<el-descriptions-item label="审批状态">
|
<el-tag :type="approvalStatusTagType(row.approvalStatus)"
|
size="small"
|
effect="plain">
|
{{ approvalStatusLabel(row.approvalStatus) }}
|
</el-tag>
|
</el-descriptions-item>
|
<el-descriptions-item label="审批类型">
|
<span class="approve-type-cell"
|
:style="approvalTypeStyle(row.approvalType)">
|
{{ approvalTypeLabel(row.approvalType) }}
|
</span>
|
</el-descriptions-item>
|
<el-descriptions-item label="申请人编号">{{ row.applicantNo || "—" }}</el-descriptions-item>
|
<el-descriptions-item label="申请人名称">{{ row.applicantName || "—" }}</el-descriptions-item>
|
<el-descriptions-item label="申请摘要">{{ row.summary || "—" }}</el-descriptions-item>
|
<el-descriptions-item v-if="row.rejectReason"
|
label="驳回原因"
|
:span="2">
|
<span class="reject-text">{{ row.rejectReason }}</span>
|
</el-descriptions-item>
|
<el-descriptions-item label="创建时间"
|
:span="2">
|
{{ formatDisplayTime(row.createTime) }}
|
</el-descriptions-item>
|
</el-descriptions>
|
</div>
|
<div class="detail-block">
|
<div class="detail-block-title">填报内容</div>
|
<FormPayloadFields :fields="formResolved.fields"
|
:form-payload="formResolved.formPayload"
|
readonly />
|
</div>
|
<div v-if="attachmentList.length"
|
class="detail-block">
|
<div class="detail-block-title">附件列表</div>
|
<div class="attachment-list">
|
<div v-for="file in attachmentList"
|
:key="file.id"
|
class="attachment-item">
|
<el-icon class="file-icon">
|
<Paperclip />
|
</el-icon>
|
<span class="file-name"
|
:title="file.name || file.originalFilename">
|
{{ file.name || file.originalFilename }}
|
</span>
|
<div class="file-actions">
|
<el-link v-if="file.previewURL || file.url"
|
type="primary"
|
:underline="false"
|
@click="openFile(file.previewURL || file.url)">预览</el-link>
|
<el-divider v-if="(file.previewURL || file.url) && file.downloadURL"
|
direction="vertical" />
|
<el-link v-if="file.downloadURL"
|
type="primary"
|
:underline="false"
|
@click="openFile(file.downloadURL)">下载</el-link>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import { computed } from "vue";
|
import { Paperclip } from "@element-plus/icons-vue";
|
import { formatDisplayTime } from "../../approve-template/approveTemplateConstants.js";
|
import {
|
approvalTypeLabel,
|
approvalTypeStyle,
|
approvalStatusLabel,
|
approvalStatusTagType,
|
resolveInstanceFormFields,
|
} from "../approveListConstants.js";
|
import FormPayloadFields from "./FormPayloadFields.vue";
|
|
const props = defineProps({
|
row: { type: Object, default: () => ({}) },
|
});
|
|
const formResolved = computed(() => resolveInstanceFormFields(props.row));
|
|
const attachmentList = computed(() => {
|
const list = props.row.storageBlobVOList || props.row.storageBlobDTOs || [];
|
return Array.isArray(list) ? list : [];
|
});
|
|
function openFile(url) {
|
if (!url) return;
|
window.open(url, "_blank");
|
}
|
</script>
|
|
<style scoped>
|
.approve-detail-panel {
|
display: flex;
|
flex-direction: column;
|
gap: 20px;
|
}
|
.detail-block-title {
|
font-size: 14px;
|
font-weight: 600;
|
color: var(--el-text-color-primary);
|
margin: 0 0 12px;
|
padding-left: 10px;
|
border-left: 3px solid var(--el-color-primary);
|
line-height: 1.4;
|
}
|
.approve-type-cell {
|
display: inline-block;
|
padding: 2px 10px;
|
border-radius: 4px;
|
font-size: 13px;
|
line-height: 1.5;
|
}
|
.reject-text {
|
color: var(--el-color-danger);
|
}
|
|
.attachment-list {
|
display: grid;
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
gap: 12px;
|
}
|
.attachment-item {
|
display: flex;
|
align-items: center;
|
padding: 10px 12px;
|
background-color: var(--el-fill-color-light);
|
border-radius: 6px;
|
border: 1px solid var(--el-border-color-lighter);
|
transition: all 0.3s;
|
}
|
.attachment-item:hover {
|
border-color: var(--el-color-primary-light-5);
|
background-color: var(--el-color-primary-light-9);
|
}
|
.file-icon {
|
font-size: 18px;
|
color: var(--el-text-color-secondary);
|
margin-right: 10px;
|
}
|
.file-name {
|
flex: 1;
|
font-size: 13px;
|
color: var(--el-text-color-primary);
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
margin-right: 12px;
|
}
|
.file-actions {
|
display: flex;
|
align-items: center;
|
flex-shrink: 0;
|
}
|
</style>
|
