<!-- NoticeAnnouncement：公告详情只读面板 -->
|
<template>
|
<el-descriptions :column="2" border>
|
<el-descriptions-item label="公告编号">{{ row.noticeNo || "—" }}</el-descriptions-item>
|
<el-descriptions-item label="发布状态">
|
<el-tag :type="statusTag" size="small">{{ statusText }}</el-tag>
|
</el-descriptions-item>
|
<el-descriptions-item label="公告类型">
|
<span class="type-badge" :style="{ color: noticeTypeColor(row.noticeType) }">
|
{{ noticeTypeLabel(row.noticeType) }}
|
</span>
|
</el-descriptions-item>
|
<el-descriptions-item label="优先级">
|
<el-tag :type="priorityTag(row.priority)" size="small">{{ priorityLabel(row.priority) }}</el-tag>
|
</el-descriptions-item>
|
<el-descriptions-item label="标题" :span="2">{{ row.title || "—" }}</el-descriptions-item>
|
<el-descriptions-item label="发布日期">{{ row.publishDate || "—" }}</el-descriptions-item>
|
<el-descriptions-item label="过期日期">{{ row.expireDate || "长期有效" }}</el-descriptions-item>
|
<el-descriptions-item label="阅读范围">{{ readScopeLabel(row.readScope) }}</el-descriptions-item>
|
<el-descriptions-item label="需阅读确认">{{ row.requireReadConfirm ? "是" : "否" }}</el-descriptions-item>
|
<el-descriptions-item label="发布人">{{ row.publisherName || "—" }}</el-descriptions-item>
|
<el-descriptions-item label="发布时间">{{ row.publishTime || "—" }}</el-descriptions-item>
|
<el-descriptions-item label="阅读量">{{ row.readCount ?? 0 }}</el-descriptions-item>
|
</el-descriptions>
|
|
<el-divider content-position="left">公告内容</el-divider>
|
<div v-if="row.priority === 'urgent'" class="urgent-banner">
|
<el-alert title="紧急通知" type="error" :closable="false" show-icon />
|
</div>
|
<div v-if="row.contentHtml" class="notice-html-body" v-html="row.contentHtml" />
|
<el-empty v-else description="暂无内容" :image-size="48" />
|
</template>
|
|
<script setup>
|
import { computed } from "vue";
|
import {
|
noticeTypeLabel,
|
noticeTypeColor,
|
priorityLabel,
|
priorityTag,
|
publishStatusLabel,
|
publishStatusTag,
|
readScopeLabel,
|
isExpired,
|
} from "../noticeAnnouncementUtils.js";
|
|
const props = defineProps({
|
row: { type: Object, default: () => ({}) },
|
});
|
|
const statusText = computed(() => {
|
if (isExpired(props.row) && props.row.publishStatus === "published") return "已过期";
|
return publishStatusLabel(props.row.publishStatus);
|
});
|
|
const statusTag = computed(() => {
|
if (isExpired(props.row) && props.row.publishStatus === "published") return "";
|
return publishStatusTag(props.row.publishStatus);
|
});
|
</script>
|
|
<style scoped>
|
.type-badge {
|
font-weight: 600;
|
}
|
.urgent-banner {
|
margin-bottom: 12px;
|
}
|
.notice-html-body {
|
padding: 12px;
|
background: var(--el-fill-color-light);
|
border-radius: 6px;
|
max-height: 400px;
|
overflow-y: auto;
|
line-height: 1.7;
|
}
|
</style>
|
