<template> <j-modal :title="title" :width="modelStyle.width" :visible="visible" :bodyStyle="bodyStyle" :switchFullscreen="switchFullscreen" @cancel="handleCancel" > <template slot="footer"> <a-button key="back" @click="handleCancel">关闭</a-button> <a-button v-if="record.openType === 'url'" type="primary" @click="toHandle">去处理</a-button> </template> <a-card class="daily-article" :loading="loading"> <a-card-meta :title="record.titile" :description="'发布时间: ' + record.sendTime + ',发布人:' + record.sender"/> <!-- <a-divider/> --> <span v-html="record.msgContent" class="article-content"></span> </a-card> </j-modal> </template> <script> import { getUserList } from '@/api/api' export default { name: 'SysAnnouncementModal', components: {}, data() { return { title: '通知消息', record: {}, labelCol: { xs: { span: 24 }, sm: { span: 5 } }, wrapperCol: { xs: { span: 24 }, sm: { span: 16 } }, visible: false, switchFullscreen: true, loading: false, bodyStyle: { padding: '5', height: window.innerHeight * 0.6 + 'px', 'overflow-y': 'auto' }, modelStyle: { width: '60%', style: { top: '20px' }, fullScreen: false } } }, created() {}, methods: { detail(record) { //update-begin---author:wangshuai ---date:20220107 for:将其它页面传递过来的用户名改成用户真实姓名 if (record.sender) { getUserList({ username: record.sender }).then(res => { if (res.success && res.result.records.length > 0) { record.sender = res.result.records[0].realname } }) } //update-end---author:wangshuai ---date:20220107 for:将其它页面传递过来的用户名改成用户真实姓名 this.visible = true this.record = record }, handleCancel() { this.visible = false }, /** 切换全屏显示 */ handleClickToggleFullScreen() { let mode = !this.modelStyle.fullScreen if (mode) { this.modelStyle.width = '100%' this.modelStyle.style.top = '20px' } else { this.modelStyle.width = '60%' this.modelStyle.style.top = '50px' } this.modelStyle.fullScreen = mode }, toHandle() { if (this.record.openType === 'url') { this.visible = false //链接跳转 this.$router.push({ path: this.record.openPage }) } } } } </script> <style lang="less"> .announcementCustomModal { .ant-modal-header { border: none; display: inline-block; position: absolute; z-index: 1; right: 56px; padding: 0; .ant-modal-title { .custom-btn { width: 56px; height: 56px; border: none; box-shadow: none; } } } .daily-article { border-bottom: 0; } } </style> <style scoped lang="less"> .daily-article { .article-button { font-size: 1.2rem !important; } .ant-card-body { padding: 18px !important; } .ant-card-head { padding: 0 1rem; } .ant-card-meta { margin-bottom: 1rem; } .article-content { p { word-wrap: break-word; word-break: break-all; text-overflow: initial; white-space: normal; font-size: 0.9rem !important; margin-bottom: 0.8rem; } } } </style>