<script lang="ts" setup>
|
import type { OaNoticeApi } from '#/api/bpm/oa/notice';
|
|
import { computed, onMounted, ref } from 'vue';
|
import { useRoute, useRouter } from 'vue-router';
|
|
import { Page } from '@vben/common-ui';
|
|
import { Card, Descriptions, message, Spin, Tag } from 'ant-design-vue';
|
import { IconifyIcon } from '@vben/icons';
|
|
import { getNotice } from '#/api/bpm/oa/notice';
|
|
import {
|
NOTICE_STATUS_OPTIONS,
|
NOTICE_STATUS_TAG,
|
NOTICE_TYPE_OPTIONS,
|
NOTICE_TYPE_TAG,
|
SEND_SCOPE_MAP,
|
} from './data';
|
|
defineOptions({ name: 'OANoticeDetail' });
|
|
const route = useRoute();
|
const router = useRouter();
|
|
const loading = ref(false);
|
const formData = ref<OaNoticeApi.NoticeVO>();
|
|
function getStatusLabel(status: number) {
|
return NOTICE_STATUS_OPTIONS.find((o) => o.value === status)?.label || '-';
|
}
|
|
function getTypeLabel(type: number) {
|
return NOTICE_TYPE_OPTIONS.find((o) => o.value === type)?.label || '-';
|
}
|
|
const noticeId = computed(() => Number(route.query.id));
|
|
async function loadDetail() {
|
if (!noticeId.value) {
|
message.error('通知公告 ID 不存在');
|
router.back();
|
return;
|
}
|
loading.value = true;
|
try {
|
formData.value = await getNotice(noticeId.value);
|
} finally {
|
loading.value = false;
|
}
|
}
|
|
onMounted(() => {
|
loadDetail();
|
});
|
</script>
|
|
<template>
|
<Page auto-content-height>
|
<Spin :spinning="loading" tip="加载中...">
|
<template v-if="formData">
|
<div class="flex items-center gap-2 px-4 pt-3 pb-2">
|
<a-button type="text" size="small" @click="router.back()">
|
<template #icon>
|
<IconifyIcon icon="ant-design:arrow-left-outlined" />
|
</template>
|
</a-button>
|
<span class="text-lg font-bold">{{ formData.title }}</span>
|
<Tag :color="NOTICE_TYPE_TAG[formData.type]">
|
{{ getTypeLabel(formData.type) }}
|
</Tag>
|
<Tag :color="NOTICE_STATUS_TAG[formData.status]">
|
{{ getStatusLabel(formData.status) }}
|
</Tag>
|
</div>
|
|
<div class="px-4 pb-4">
|
<Card size="small" class="mb-3">
|
<Descriptions :column="2" bordered size="small">
|
<Descriptions.Item label="发送范围">
|
{{ SEND_SCOPE_MAP[formData.sendScope] || '-' }}
|
</Descriptions.Item>
|
<Descriptions.Item label="是否置顶">
|
<Tag v-if="formData.isTop === 1" color="red">置顶</Tag>
|
<span v-else>否</span>
|
</Descriptions.Item>
|
<Descriptions.Item label="发布时间">
|
{{ formData.publishTime || '-' }}
|
</Descriptions.Item>
|
<Descriptions.Item label="创建时间">
|
{{ formData.createTime || '-' }}
|
</Descriptions.Item>
|
<Descriptions.Item
|
v-if="formData.sendScope === 2 && formData.userIds?.length"
|
label="指定人员"
|
:span="2"
|
>
|
{{ formData.userIds?.join(', ') }}
|
</Descriptions.Item>
|
</Descriptions>
|
</Card>
|
|
<Card size="small" title="内容">
|
<div
|
class="min-h-40 rounded bg-gray-50 p-4"
|
v-dompurify-html="formData.content"
|
/>
|
</Card>
|
</div>
|
</template>
|
</Spin>
|
</Page>
|
</template>
|
