aizuda-web-vue3/src/views/approve/approved/detail.vue

<template>
	<el-dialog class="le-dialog" v-model="visibleDialog" title="查看详情" @close="handleCancel">
		<div>
			<!--title-->
			<div>
				<div class="content-title">{{ formOptions.title }}</div>
				<span>发布人：{{ formOptions.createBy }} 发布时间： {{ formOptions.createTime }}</span>

				<div class="content-title mbt20">
					<el-tag v-if="formOptions.category === 0" size="small" effect="plain">通知公告</el-tag>
					<el-tag v-if="formOptions.category === 1" size="small" type="info" effect="plain">系统消息</el-tag>
					<el-tag v-if="formOptions.category === 2" size="small" type="warning" effect="plain">待办通知</el-tag>
				</div>
				<span>通知时间： - </span>
				<br />
				<br />
				<span>通知内容：{{ formOptions.content }}</span>
			</div>
			<!--content-->
		</div>
	</el-dialog>
</template>

<script setup>
import { computed, ref } from 'vue'
import message from '@/api/system/message'

// 同步值
const $myEmit = defineEmits(['update:modelValue'])

const myProps = defineProps({
	modelValue: {
		type: Boolean,
		default: false
	},
	messageId: {
		type: String,
		default: null
	}
})

const formOptions = ref({})
const handleCancel = () => {
	$myEmit('update:modelValue', false)
}

const getMessageInfoDetail = async () => {
	const { messageId } = myProps
	const res = await message.getMessageInfoById(messageId)
	formOptions.value = res
}

getMessageInfoDetail()

// computed
const visibleDialog = computed({
	get() {
		return myProps.modelValue
	},
	set(val) {
		$myEmit('update:modelValue', val)
	}
})
</script>

<style scoped lang="scss">
.content-title {
	overflow: hidden;
	color: #000000d9;
	font-weight: 500;
	font-size: 16px;
	white-space: nowrap;
	text-overflow: ellipsis;
	margin-bottom: 20px;
	&.mbt20 {
		margin-top: 20px;
	}
}
</style>