From ecf1953b5882319e46e37d11fcc0b9e9f48b856d Mon Sep 17 00:00:00 2001
From: zhangwencui <1064582902@qq.com>
Date: 星期一, 25 五月 2026 13:25:08 +0800
Subject: [PATCH] 转正申请、调动申请、离职申请、工作交接、请假申请、加班申请等上传的附件在审批记录中没有展示
---
src/views/officeProcessAutomation/ApproveManage/approve-list/components/ApproveDetailPanel.vue | 175 ++++++++++++++++++++++++++++++++++++++++++----------------
1 files changed, 126 insertions(+), 49 deletions(-)
diff --git a/src/views/officeProcessAutomation/ApproveManage/approve-list/components/ApproveDetailPanel.vue b/src/views/officeProcessAutomation/ApproveManage/approve-list/components/ApproveDetailPanel.vue
index f54c167..6b18f8f 100644
--- a/src/views/officeProcessAutomation/ApproveManage/approve-list/components/ApproveDetailPanel.vue
+++ b/src/views/officeProcessAutomation/ApproveManage/approve-list/components/ApproveDetailPanel.vue
@@ -3,83 +3,160 @@
<div class="approve-detail-panel">
<div class="detail-block">
<div class="detail-block-title">鍩烘湰淇℃伅</div>
- <el-descriptions :column="2" border>
+ <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">
+ <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)">
+ <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">
+ <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">
+ <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
- />
+ <FormPayloadFields :fields="formResolved.fields"
+ :form-payload="formResolved.formPayload"
+ readonly />
+ </div>
+ <div v-if="row.storageBlobVOList && row.storageBlobVOList.length"
+ class="detail-block">
+ <div class="detail-block-title">闄勪欢鍒楄〃</div>
+ <div class="attachment-list">
+ <div v-for="file in row.storageBlobVOList"
+ :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"
+ type="primary"
+ :underline="false"
+ @click="openFile(file.previewURL)">棰勮</el-link>
+ <el-divider v-if="file.previewURL && 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 { formatDisplayTime } from "../../approve-template/approveTemplateConstants.js";
-import {
- approvalTypeLabel,
- approvalTypeStyle,
- approvalStatusLabel,
- approvalStatusTagType,
- resolveInstanceFormFields,
-} from "../approveListConstants.js";
-import FormPayloadFields from "./FormPayloadFields.vue";
+ 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 props = defineProps({
+ row: { type: Object, default: () => ({}) },
+ });
-const formResolved = computed(() => resolveInstanceFormFields(props.row));
+ const formResolved = computed(() => resolveInstanceFormFields(props.row));
+
+ 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);
-}
+ .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>
--
Gitblit v1.9.3