devicesmgt/sgzb-ui/src/components/Notice/index.vue

<template>
    <div class="notice-dialog">
        <!-- 消息通知弹框 -->
        <el-dialog
            :title="noticeTitle"
            :width="noticeDialog.outerWidth"
            :visible.sync="noticeDialog.outerVisible"
            v-if="noticeDialog.outerVisible"
            :center="true"
            :before-close="handleCloseDialog"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            top="0vh"
            append-to-body
            custom-class="center-dialog"
        >
            <el-button class="notice-num" type="primary"
                >重要通知({{ unreadNUm }}/{{ noticeNum }})</el-button
            >
            <el-button
                class="notice-known"
                type="primary"
                @click="handleKnow()"
                :loading="loading"
                >我知道了</el-button
            >
            <h2 class="release-time">发布时间：{{ releaseTime }}</h2>
            <div class="notice-content">
                {{ noticeContent }}
            </div>
            <div class="notice-create">{{ releaseCreateName }}</div>
            <div class="notice-footer">{{ releaseTime }}</div>
        </el-dialog>
    </div>
</template>

<script>
import { setQueryNoticeApi } from '@/api/system/notice.js'
export default {
    props: {
        noticeDialog: {
            type: Object,
            default: () => {
                return {}
            },
        },
        noticeList: {
            type: Array,
            default: () => {
                return []
            },
        },
    },
    data() {
        return {
            unreadNum: 1,
            noticeListDoc: [],
            loading: false,
        }
    },
    computed: {
        noticeNum() {
            return this.noticeList.length
        },

        noticeTitle() {
            return this.noticeList[this.unreadNUm - 1].noticeTitle
        },
        noticeContent() {
            return this.removeHTMLTags(
                this.noticeList[this.unreadNUm - 1].noticeContent,
            )
        },
        releaseTime() {
            return this.noticeList[this.unreadNUm - 1].createTime.slice(0, 10)
        },
        releaseCreateName() {
            return this.noticeList[this.unreadNUm - 1].nickName
        },
    },

    created() {
        if (this.noticeList.length > 0) {
            this.noticeListDoc = this.noticeList
        }
    },

    methods: {
        // 清楚内容中的html标签
        removeHTMLTags(text) {
            return text.replace(/<[^>]+>/g, '')
        },
        // 点击我知道了
        async handleKnow() {
            this.loading = true
            const params = {
                noticeId: [],
                userId: sessionStorage.getItem('userId'),
            }
            params.noticeId.push(this.noticeList[this.unreadNUm - 1].noticeId)
            const res = await setQueryNoticeApi(params)
            this.loading = false
            if (res.code == 200) {
                if (this.noticeNum === 1) {
                    this.$emit('closeDialog', false)
                    return
                }
                this.unreadNUm += 1
                // 如果全部点完，则关闭弹框
                if (this.unreadNUm > this.noticeNum) {
                    this.$emit('closeDialog', false)
                }
            }
        },
        // 右上角关闭按钮
        async handleCloseDialog() {
            // 7.8确认需求为，点击关闭，则全部标记为已读
            const params = {
                noticeId: [],
                userId: sessionStorage.getItem('userId'),
            }
            this.noticeList.map((e) => {
                params.noticeId.push(e.noticeId)
            })
            const res = await setQueryNoticeApi(params)
            if (res.code == 200) {
                this.$emit('closeDialog', false)
            }
        },
    },
}
</script>

<style scoped lang="scss">
::v-deep .el-dialog {
    height: 500px;
}

::v-deep .el-dialog__header {
    width: 95%;
    margin: 0 auto;
    border-bottom: 2px solid #999;
}
::v-deep .el-dialog__title {
    font-size: 22px;
    font-weight: bold;
    letter-spacing: 3px;
    color: #409eff;
}

::v-deep .el-dialog__headerbtn {
    position: absolute;
    width: 32px;
    height: 32px;
    top: -15px;
    right: -15px;
    padding: 8px;
    background-color: #409eff;
    border-radius: 50%;
    line-height: 16px;
}

::v-deep .el-dialog__headerbtn .el-dialog__close {
    color: #fff;
}

.notice-num {
    position: absolute;
    top: -38px;
    left: 0;
    height: 38px;
    letter-spacing: 2px;
}

.notice-known {
    position: absolute;
    bottom: -43px;
    right: 0;
    height: 38px;
    letter-spacing: 2px;
}

.notice-content {
    height: 250px;
    text-indent: 4em;
    font-size: 16px;
    letter-spacing: 3px;
    word-wrap: break-word;
    line-height: 3;
}

.release-time {
    font-size: 18px;
    text-align: center;
}
.notice-footer,
.notice-create {
    text-align: right;
    font-size: 16px;
    letter-spacing: 1px;
}
.notice-create {
    margin-bottom: 8px;
}
</style>