<script lang="ts" setup>
|
import { reactive } from 'vue';
|
|
import { BasicModal, useModalInner } from '@jnpf/ui/modal';
|
import { formatToDateTime } from '@jnpf/utils';
|
|
import { getInfo, readInfo } from '#/api/system/message';
|
import { $t } from '#/locales';
|
|
interface State {
|
dataForm: any;
|
}
|
|
const state = reactive<State>({
|
dataForm: {
|
id: '',
|
title: '',
|
creatorUser: '',
|
creatorTime: '',
|
bodyText: '',
|
files: [],
|
},
|
});
|
const [registerModal, { changeLoading }] = useModalInner(init);
|
|
function init(data) {
|
changeLoading(true);
|
const method = data.type == 1 ? readInfo : getInfo;
|
method(data.id).then((res) => {
|
state.dataForm = res.data || {};
|
state.dataForm.releaseTime = state.dataForm.releaseTime ? formatToDateTime(state.dataForm.releaseTime) : '';
|
state.dataForm.files = state.dataForm.files ? JSON.parse(state.dataForm.files) : [];
|
changeLoading(false);
|
});
|
}
|
</script>
|
<template>
|
<BasicModal v-bind="$attrs" @register="registerModal" :width="800" :title="$t('common.detailText')" :min-height="300" :footer="null" class="notice-modal">
|
<div class="notice-wrapper">
|
<h1 class="title">{{ state.dataForm.title }}</h1>
|
<div class="info">
|
<span v-if="state.dataForm.releaseTime">{{ state.dataForm.releaseTime }}</span>
|
<span>{{ state.dataForm.releaseUser }}</span>
|
</div>
|
<div class="pb-[10px] pt-[20px]">
|
<p class="pb-[8px]" v-if="state.dataForm.excerpt">{{ state.dataForm.excerpt }}</p>
|
<div class="main" v-html="state.dataForm.bodyText"></div>
|
</div>
|
<div class="file-list" v-if="state.dataForm.files.length">
|
<JnpfUploadFile v-model:value="state.dataForm.files" disabled detailed />
|
</div>
|
</div>
|
</BasicModal>
|
</template>
|
<style lang="scss" scoped>
|
.notice-wrapper {
|
.title {
|
margin-bottom: 0;
|
font-size: 18px;
|
font-weight: normal;
|
text-align: center;
|
}
|
|
.info {
|
padding-bottom: 10px;
|
line-height: 35px;
|
color: var(--text-color-label);
|
text-align: center;
|
border-bottom: 1px solid var(--border-color-base1);
|
|
span {
|
padding: 0 10px;
|
}
|
}
|
|
.main {
|
min-height: 300px;
|
overflow: auto;
|
line-height: 22px;
|
}
|
|
.file-list {
|
padding: 10px 0 30px;
|
border-top: 1px solid var(--border-color-base1);
|
}
|
}
|
</style>
|
<style lang="scss">
|
.notice-modal {
|
.ant-modal-body > .scrollbar {
|
padding: 10px 20px 0 !important;
|
}
|
}
|
</style>
|
