elementui plus 更新菜单失败

<!--
 * @Author: huangtao
 * @Date: 2021-08-11 11:27:24
 * @LastEditTime: 2021-08-11 11:32:47
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /dunshan/source/kenan/WebRoot/src/components/home.vue
-->
<template>
    <el-container class="basic-layout">
        <el-header class="navTopWrp">
            <!-- 系统LOGO 头部菜单-->
            <CLHeader></CLHeader>
        </el-header>
        <el-container>
            <el-aside :class="['nav-side', isCollapse ? 'fold' : 'unfold']" v-show="sideBarStatus">
                <!-- 导航菜单 -->
                <el-menu
                    :unique-opened="true"
                    class="nav-menu"
                    active-text-color="##2E62B8"
                    background-color="#fff"
                    text-color="##2E62B8"
                    :collapse-transition="collapse"
                    :default-openeds="['100000']"
                    router
                    :default-active="activePath"
                    v-if="showDom"
                >
                    <div v-for="mainItem in userMenu" :key="mainItem.id">
                        <el-submenu v-if="mainItem.children && mainItem.children.length" :key="mainItem.id" :index="mainItem.id" :permission="mainItem.permission">
                            <template #title>
                                <span>
                                    <img class="subNavMenuIcon" :src="mainItem.icon" />
                                    {{ mainItem.name }}
                                </span>
                            </template>
                            <el-menu-item
                                style="margin: 0px"
                                v-for="subItem in mainItem.children"
                                :key="subItem.id"
                                :index="subItem.routeName"
                                :permission="subItem.permission"
                                :title="subItem.routeName"
                            >
                                <router-link :to="{ name: subItem.routeName }">
                                    <span>{{ subItem.name }}</span>
                                </router-link>
                            </el-menu-item>
                        </el-submenu>
                        <el-menu-item v-else :permission="mainItem.permission" :index="mainItem.routeName">
                            <router-link :to="{ name: mainItem.routeName }">
                                <el-icon>
                                    <img class="subNavMenuIcon" :src="mainItem.icon" />
                                </el-icon>
                                <span>{{ mainItem.name }}</span>
                            </router-link>
                        </el-menu-item>
                    </div>
                </el-menu>
            </el-aside>
            <!-- 右边主体内容 -->
            <el-main :class="['content-right', isCollapse ? 'fold' : 'unfold']">
                <div class="wrapper">
                    <router-view></router-view>
                </div>
            </el-main>
            <a target="_blank" :href="user_href" class="floatBall">
                使用
                <br />
                手册
            </a>
        </el-container>
    </el-container>
</template>

<script>
import { defineComponent, defineAsyncComponent } from 'vue';
import { loginOut } from '@/api/api.js';
import subNavIcon1 from '@/assets/images/subNavIcon1.png';
import subNavIcon2 from '@/assets/images/subNavIcon2.png';
import { DCRoutePermission } from '@/utils/permission.js';
import { onBeforeRouteUpdate } from 'vue-router';
import { ref, getCurrentInstance, onBeforeMount, nextTick, watch } from 'vue';
export default defineComponent({
    name: 'Home',
    components: {
        CLHeader: defineAsyncComponent(() => import('@/components/CLHeader.vue')),
    },
    data() {
        return {
            isCollapse: false,
            userInfo: this.$store.state.userInfo || {},
            collapse: false,
            sideBarStatus: true,
            user_href: '',
        };
    },
    mounted() {
        var sessionPermission = sessionStorage.getItem('dc_pd_closedLoop_permits');
        const DCRoutePermIns = new DCRoutePermission();
        if (sessionPermission) {
            sessionPermission = JSON.parse(sessionPermission);
            DCRoutePermIns.exePermission(sessionPermission);
        }
        this.getHref();
    },
    methods: {
        toggle() {
            this.isCollapse = !this.isCollapse;
        },
        handleLogout(key) {
            loginOut().then((res) => {
                if (key == 'email') return;
                this.$store.commit('saveUserInfo', '');
                this.userInfo = null;
                this.$router.push('/login');
            });
        },
        getHref() {
            //帮助中心文档地址
            const isTest =
                location.hostname == 'localhost' ||
                location.hostname == '127.0.0.1' ||
                location.hostname == '172.16.3.51' ||
                location.hostname == '172.16.0.44' ||
                location.hostname == '172.16.3.81' ||
                location.hostname.indexOf('test-') > -1 ||
                location.hostname.indexOf('dev-') > -1;
            let srcPath = location.protocol + '//' + location.hostname + ':3051';
            if (isTest) {
                srcPath = 'http://172.16.3.81:3051';
            }
            this.user_href = srcPath + '/#/book?id=l6ommvxroq&doc_type=1'; //book路径 如 srcPath + '/#/book?id=l6ommvxroq&doc_type=1'
        },
    },
    setup() {
        // 菜单激活的路由
        const activePath = ref('');
        //菜单
        const userMenu = ref([]);
        let showDom = ref(true);
        //闭环质控配置菜单
        const userMenuLoop = ref([
            {
                name: '门诊闭环节点配置',
                id: '100000',
                icon: subNavIcon1,
                permission: 'dc_80000_50000',
                children: [
                    {
                        id: '100001',
                        name: '门诊处方',
                        icon: 'el-icon-document',
                        routeName: 'outPatient',
                        permission: 'dc_80000_60000',
                    },
                ],
            }
        ]);
        //病历质控闭环配置菜单
        const userMenuRecord = ref([
            {
                name: '门急诊闭环节点配置',
                id: '100000',
                icon: subNavIcon1,
                permission: 'dc_80000_200000',
                children: [
                    {
                        id: '100001',
                        name: '门诊给药闭环节点',
                        icon: 'el-icon-document',
                        routeName: 'outDosing',
                        permission: 'dc_80000_220000',
                    }
                ],
            },
            
        ]);
        const pathName = window.location.hash.split('/');
        activePath.value = pathName[pathName.length - 1];
        userMenu.value = userMenuLoop.value; //菜单默认先赋值闭环质控配置菜单
        const { proxy } = getCurrentInstance();
        // 路由监听
        onBeforeRouteUpdate((to) => {
            //路由到病历质控闭环配置 把菜单赋值是病历质控闭环配置菜单
            if (to.path.indexOf('medicalRecord') > -1) {
                userMenu.value = userMenuRecord.value;
            } else {
                //必须要else不然一直是病历质控闭环配置菜单
                userMenu.value = userMenuLoop.value;
            }
            //把菜单高亮设置成对应的路由
            activePath.value = to.name;
        });
        //上面把菜单高亮设置成对应的路由，但是还是失效，经检查数据更新过去了，所以把问题定位到dom加载及渲染顺序上，很有可能就是因为dom还未更新完成，就重新设置了default-active属性，导致匹配不到相应的导航
        //给二级目录设置v-if （showDom字段控制） watch监听父组件传递过来的数据，在dom更新完成之后改变v-if 就高亮显示默认菜单了
        watch(
            () => userMenu,
            (v1, v2) => {
                showDom.value = false;
                // 在dom更新之后进行渲染
                nextTick().then(function () {
                    showDom.value = true;
                    //要是病历质控闭环配置这边有的没有权限得获取permission属性，但是菜单更新之后获取还是之前的permission属性 所以再来一次nextTick就能删除没有权限的dom
                    nextTick().then(function () {
                        const sessionPermission = sessionStorage.getItem('dc_pd_closedLoop_permits');
                        const permissions = JSON.parse(sessionPermission);
                        const DCRoutePermIns = new DCRoutePermission();
                        //控制显隐
                        DCRoutePermIns.exePermission(permissions);
                    });
                });
            },
            {
                deep: true, // 深度监听的参数
            }
        );
        //因为home是个总页面，点击头部导航闭环质控配置，病历质控闭环配置，只会更新main内容区，左边导航和上面导航就要依靠watch和路由监听来更新数据
        onBeforeMount(() => {
            var path = proxy.$router.options.history.location;
            //停留病历质控闭环配置页面刷新，左边导航菜单回到闭环质控配置，路由还是病历质控闭环配置，所以在组件onBeforeMount里面再把菜单赋值给病历质控闭环配置菜单
            if (path.indexOf('medicalRecord') > -1) {
                userMenu.value = userMenuRecord.value;
            }
        });
        return {
            activePath,
            userMenu,
            showDom,
        };
    },
});
</script>

<style lang="less">
.basic-layout {
    position: relative;
    .navTopWrp {
        display: flex;
        height: 50px;
        line-height: 50px;
        display: flex;
        justify-content: space-between;
        padding: 0 20px;
        background: #4a90e2;
        .nav-left {
            display: flex;
            align-items: center;

            .menu-fold {
                margin-right: 15px;
                font-size: 18px;
            }
        }

        .user-info {
            .notice {
                line-height: 30px;
                margin-right: 15px;
            }

            .user-link {
                cursor: pointer;
                color: #409eff;
            }
        }
    }
    .navTopWrp,
    .navTop {
        flex: 1;
        -webkit-flex: 1;
    }
    .navTop {
        background: none;
        color: #fff;
        .el-menu-item {
            height: 36px;
            line-height: 36px;
            color: #fff;
            font-size: 15px;
        }
    }
    .logo {
        align-items: center;
        font-size: 14px;
        display: inline-block;
        padding-top: 7px;
    }
    .nav-side {
        width: 200px;
        height: 100vh;
        background-color: #fff;
        overflow-y: auto;
        transition: width 0.1s;
        overflow-x: hidden;

        .nav-menu {
            height: calc(100vh - 80px);
            border-right: none;
            a {
                display: inline-block;
                width: 100%;
                height: 100%;
                color: #2e62b8;
                text-decoration: none;
            }
            i {
                color: #2e62b8;
            }
            .el-menu-item.is-active,
            .el-menu-item:hover {
                background: #ebf4ff !important;
                color: #2e62b8;
            }
        }

        // 合并
        &.fold {
            width: 64px;
        }

        // 展开
        &.unfold {
            width: 200px;
        }
    }
    .el-main {
        padding: 0px;
        background: #fff;
        overflow: hidden;
    }
    .content-right {
        .wrapper {
            height: calc(100vh - 50px);
            .main-page {
                background: #fff;
                height: 100%;
            }
        }
    }
}
.nav-side {
    padding: 5px 0;
    border-right: 1px solid #efeeee;
    box-shadow: 0px 2px 8px 1px rgba(0, 0, 0, 0.2) !important;
    .el-menu-item {
        height: 36px !important;
        line-height: 36px !important;
        font-size: 13px;
        border-radius: 0 !important;
        min-width: auto !important;
        a {
            display: block !important;
            span {
                vertical-align: initial;
            }
        }
        &:before {
            content: '·';
            font-size: 14px;
            position: absolute;
            left: 20px;
        }
    }
    .subNavMenuIcon {
        width: 20px;
        position: relative;
        top: -2px;
        right: 5px;
    }
    .el-submenu__title {
        padding-left: 15px !important;
        padding-right: 15px !important;
        font-size: 13px;
        line-height: 34px;
        height: 34px;
        margin-top: 7px;
        margin-bottom: 7px;
    }
    .el-submenu__icon-arrow {
        margin-top: -4px !important;
        right: 10px;
    }
}
.nav-side .el-submenu__title {
    color: #2e62b8 !important;
    &:hover {
        background: #ebf4ff !important;
    }
}
//悬浮球
.floatBall {
    display: block;
    width: 70px;
    height: 70px;
    padding: 5px;
    box-sizing: border-box;
    border-radius: 50%;
    box-shadow: 0 0 15px #0090e2 inset;
    cursor: pointer;
    position: fixed;
    color: #fff;
    top: 45%;
    right: -35px;
    font-size: 0;
    text-align: center;
    overflow: hidden;
    transform: scale(0.5);
    background: url('@/assets/images/useBook.png') no-repeat;
    background-size: 50px;
    background-position: center;
    transition: all 0.3s;
    &:hover {
        transform: scale(1);
        background: #0090e2 radial-gradient(#0090e2, #fff);
        text-decoration: none;
        font-weight: 600;
        font-size: 14px;
        padding-top: 18px;
        right: 0;
    }
}
</style>