devicesmgt/sgzb-ui/src/App.vue

<template>
    <div id="app">
        <router-view />
        <theme-picker />

        <Notice
            :noticeDialog="noticeDialog"
            :noticeList="noticeList"
            @closeDialog="closeDialog"
        ></Notice>
    </div>
</template>

<script>
import ThemePicker from '@/components/ThemePicker'
import { getHomeNoticeApi } from '@/api/system/notice.js'
import Notice from '@/components/Notice'
import { getToken } from '@/utils/auth'

export default {
    name: 'App',
    components: { ThemePicker, Notice },
    metaInfo() {
        return {
            title:
                this.$store.state.settings.dynamicTitle &&
                this.$store.state.settings.title,
            titleTemplate: (title) => {
                return title
                    ? `${title} - ${process.env.VUE_APP_TITLE}`
                    : process.env.VUE_APP_TITLE
            },
        }
    },
    data() {
        return {
            noticeDialog: {
                outerTitle: '重要通知',
                outerWidth: '70%',
                outerVisible: false,
            },
            noticeList: [],
        }
    },
    updated() {
        // 判断是否需要获取通知信息
        if (
            localStorage.getItem('notice') &&
            getToken() &&
            !this.noticeDialog.outerVisible
        ) {
            this.getHomeNoticeFun()
        }
    },
    methods: {
        // 获取通知公告的信息
        async getHomeNoticeFun() {
            const res = await getHomeNoticeApi()
            if (res.code == 200) {
                if (res.data.length > 0) {
                    this.noticeList = res.data
                    this.noticeDialog.outerVisible = true
                } else {
                    localStorage.removeItem('notice')
                }
            }
        },
        // 关闭弹框
        closeDialog(val) {
            this.noticeDialog.outerVisible = val
            localStorage.removeItem('notice')
        },
    },
}
</script>
<style scoped >
#app .theme-picker {
    display: none;
}
</style>