TEAMModelOS/TEAMModelOS/ClientApp/src/common/BaseLayout.vue

<template>
    <div class="layout">
        <!-- 头部菜单栏 -->
        <Header class="header">
            <div class="logo-wrap">
                <img src="../assets/ies5.png" :class="isCollapsed ? 'collapsed-logo-width unit-logo':'collapsed-logo-width  unit-logo'" v-show="isShowLogo" />
            </div>
            <div class="school-wrap">
                <BaseSelectSchool></BaseSelectSchool>
            </div>
            <slot name="header-content"></slot>
        </Header>
        <!-- 侧边菜单栏 -->
        <Sider class="biz-menu" ref="side1" hide-trigger collapsible width="190" :collapsed-width="78" v-model="isCollapsed">
            <div class="collapse-icon-box" @click="changeMenuStatus">
                <Icon :class="rotateIcon" custom="iconfont icon-arrow" style="color:var(--primary-text-color)" @click.stop="changeMenuStatus" size="12" />
            </div>
            <Menu width="auto" :class="['menu-item', isCollapsed ? 'collapsed-menu' : '']" accordion :active-name="activeName" :open-names="openNames">
                <vuescroll :ops="ops">
                    <MenuGroup :title="$t('system.menu.school')">
                        <!-- 暂未提供判断是否购买服务的字段 -->
                        <p class="school-menu-tips" v-if="$store.state.userInfo.schoolPay && !isCollapsed">{{$t('system.menu.noSchool1')}}</p>
                        <p class="school-menu-tips" v-else-if="!$store.state.userInfo.hasSchool && !isCollapsed">{{$t('system.menu.noSchool2')}}</p>
                        <div v-else-if="!$store.state.userInfo.schoolPay && $store.state.userInfo.hasSchool">
                            <div v-for="(item,index) in schoolMenu" :key="index">
                                <Submenu :name="item.subName" v-if="$access.ability(item.role,item.permission).validateAll && item.child.length" v-show="(index == 0 && $store.state.userInfo.hasSchool) || index > 0">
                                    <template slot="title">
                                        <Tooltip :content="item.name" placement="right" transfer v-show="isCollapsed">
                                            <Icon :custom="item.icon" style="width:55px;text-align:left;" :class="isCollapsed ? 'collapse-icon-size':''" size="16" />
                                        </Tooltip>
                                        <Icon v-show="!isCollapsed" :custom="item.icon" :class="isCollapsed ? 'collapse-icon-size':''" size="16" />
                                        <span>{{item.name}}</span>
                                    </template>
                                    <MenuItem :name="menuItem.menuName" :to="menuItem.router" v-for="(menuItem,i) in item.child" :key="i" v-show="$access.ability(menuItem.role,menuItem.permission).validateAll">
                                    <Tooltip :content="menuItem.name" placement="right" transfer v-show="isCollapsed">
                                        <Icon class="sub-menu-icon" :custom="menuItem.icon" size="16" />
                                    </Tooltip>
                                    <Icon v-show="!isCollapsed" class="sub-menu-icon" :custom="menuItem.icon" size="16" />
                                    <span>
                                        {{menuItem.name}}
                                        <span style="color: aqua;margin-left: 2px;font-size: 12px;vertical-align: text-top;">
                                            {{menuItem.tag}}
                                        </span>
                                    </span>
                                    </MenuItem>
                                </Submenu>
                                <MenuItem :name="item.menuName" v-else-if="$access.ability(item.role,item.permission).validateAll" :to="item.router">
                                <Tooltip :content="item.name" placement="right" transfer v-show="isCollapsed">
                                    <Icon :custom="item.icon" style="width:55px;text-align:left;" :class="isCollapsed ? 'collapse-icon-size':''" size="16" />
                                </Tooltip>
                                <Icon v-show="!isCollapsed" :custom="item.icon" :class="isCollapsed ? 'collapse-icon-size':''" size="16" />
                                <span>
                                    {{item.name}}
                                    <span style="color: aqua;margin-left: 2px;font-size: 12px;vertical-align: text-top;">
                                        {{item.tag}}
                                    </span>
                                </span>

                                </MenuItem>
                            </div>
                        </div>
                    </MenuGroup>
                    <MenuGroup :title="$t('system.menu.private')">
                        <div v-for="(item,index) in teacherMenu" :key="index">
                            <Submenu :name="item.subName" v-if="$access.ability(item.role,item.permission).validateAll && item.child.length" v-show="(index == 0 && $store.state.userInfo.hasSchool) || index > 0">
                                <template slot="title">
                                    <Tooltip :content="item.name" placement="right" transfer v-show="isCollapsed">
                                        <Icon :custom="item.icon" style="width:55px;text-align:left;" :class="isCollapsed ? 'collapse-icon-size':''" size="16" />
                                    </Tooltip>
                                    <Icon v-show="!isCollapsed" :custom="item.icon" :class="isCollapsed ? 'collapse-icon-size':''" size="16" />
                                    <span>{{item.name}}</span>
                                </template>
                                <MenuItem :name="menuItem.menuName" :to="menuItem.router" v-for="(menuItem,i) in item.child" :key="i" v-show="$access.ability(menuItem.role,menuItem.permission).validateAll && menuItem.isShow">
                                <Tooltip :content="menuItem.name" placement="right" transfer v-show="isCollapsed">
                                    <Icon class="sub-menu-icon" :custom="menuItem.icon" size="18" />
                                </Tooltip>
                                <Icon v-show="!isCollapsed" class="sub-menu-icon" :custom="menuItem.icon" size="16" />
                                <span>
                                    {{menuItem.name}}
                                    <span style="color: aqua;margin-left: 2px;font-size: 12px;vertical-align: text-top;">
                                        {{menuItem.tag}}
                                    </span>
                                </span>
                                </MenuItem>
                            </Submenu>
                            <MenuItem :name="item.menuName" v-else-if="$access.ability(item.role,item.permission).validateAll && item.isShow" :to="item.router">
                            <Tooltip :content="item.name" placement="right" transfer v-show="isCollapsed">
                                <Icon :custom="item.icon" style="width:55px;text-align:left;" :class="isCollapsed ? 'collapse-icon-size':''" size="16" />
                            </Tooltip>
                            <Icon v-show="!isCollapsed" :custom="item.icon" :class="isCollapsed ? 'collapse-icon-size':''" size="16" />
                            <span>
                                {{item.name}}
                                <span style="color: aqua;margin-left: 2px;font-size: 12px;margin-top:3px">
                                    {{item.tag}}
                                </span>
                            </span>
                            </MenuItem>
                        </div>
                    </MenuGroup>
                </vuescroll>
            </Menu>
            <p class="copyright-info" v-show="!isCollapsed">
                {{$t('system.menu.copyright')}}
            </p>
        </Sider>
        <!-- Body内容部分 -->
        <Layout :class="isCollapsed ?'collapsed-padding content-wrap':'content-wrap'">
            <slot name="content"></slot>
        </Layout>
    </div>
</template>
<script>
export default {
    data() {
        return {
            openNames: [],
            activeName: '',
            tipsOpt: {
                offset: [0, 20]
            },
            ops: {
                bar: { opacity: 0 }
            },
            isCollapsed: false,
            menuTree: [],
            schoolMenu: [],
            teacherMenu: [],
            isShowLogo: true
        }
    },
    methods: {
        initMenu() {
            //判断当前学校是否购买服务 暂未提供字段
            this.schoolMenu = !this.$store.state.userInfo.schoolPay ? [
                // 学校管理
                {
                    icon: 'iconfont icon-school',
                    name: this.$t('system.menu.schoolMgt'),
                    router: '',
                    subName: 'schoolMgt',
                    role: 'admin',
                    permission: 'schoolSetting-read|teacher-read|student-read|classroom-read|auth-read|course-read|syllabus-read|content-read|exercise-read|knowledge-read',
                    child: [
                        // 基础设置
                        {
                            icon: 'iconfont icon-basic-setting',
                            name: this.$t('system.menu.baseSetting'),
                            router: '/home/system',
                            tag: '',
                            role: 'admin',
                            permission: 'schoolSetting-read|schoolSetting-upd',
                            menuName: 'system'
                        },
                        // 教师管理
                        {
                            icon: 'iconfont icon-teacher-mgt',
                            name: this.$t('system.menu.teacherMgt'),
                            router: '/home/teachermgmt',
                            tag: '',
                            role: 'admin',
                            permission: 'teacher-read|teacher-upd',
                            menuName: 'teachermgmt'
                        },
                        // 学生管理
                        {
                            icon: 'iconfont icon-student-mgt',
                            name: this.$t('system.menu.stuMgt'),
                            router: '/home/studentAccount',
                            tag: '',
                            role: 'admin',
                            permission: 'student-upd|student-read',
                            menuName: 'studentAccount'
                        },
                        // // 教室管理
                        {
                            icon: 'iconfont icon-class-mgt',
                            name: this.$t('system.menu.classMgt'),
                            router: '/home/classroom',
                            tag: '',
                            role: 'admin',
                            permission: 'classroom-upd|classroom-read',
                            menuName: 'classroom'
                        },
                        // 课程管理
                        {
                            icon: 'iconfont icon-kecheng',
                            name: this.$t('system.menu.cusMgt'),
                            router: '/home/NewCusMgt',
                            tag: '',
                            role: 'admin',
                            permission: 'course-read|course-upd',
                            menuName: 'NewCusMgt'
                        },
                        // 授权管理
                        {
                            icon: 'iconfont icon-auth',
                            name: this.$t('system.menu.authMgt'),
                            router: '/home/serviceDriveAuth',
                            tag: this.$t('system.menu.preview'),
                            role: 'admin',
                            permission: 'auth-read|auth-upd',
                            menuName: 'serviceDriveAuth'
                        }
                    ]
                },
                // 学校资源
                {
                    icon: 'iconfont icon-textbook',
                    name: this.$t('system.menu.schoolRes'),
                    router: '',
                    subName: 'schoolRes',
                    role: 'admin|teacher',
                    permission: 'schoolSetting-read|teacher-read|student-read|classroom-read|auth-read|course-read|syllabus-read|content-read|exercise-read|knowledge-read',
                    child: [
                        // 校本课纲
                        {
                            icon: 'iconfont icon-syllabus',
                            name: this.$t('system.menu.scSyllabus'),
                            router: '/home/syllabus',
                            tag: this.$t('system.menu.preview'),
                            role: 'admin|teacher',
                            permission: 'syllabus-read|syllabus-upd',
                            menuName: 'syllabus'
                        },
                        // 校本内容
                        {
                            icon: 'iconfont icon-file',
                            name: this.$t('system.menu.scContent'),
                            router: '/home/schoolcontent',
                            tag: '',
                            role: 'admin|teacher',
                            permission: 'content-read|content-upd',
                            menuName: 'schoolcontent'
                        },
                        // 校本题库
                        {
                            icon: 'iconfont icon-question-bank',
                            name: this.$t('system.menu.scQuBack'),
                            router: '/home/evaluation/schoolBank',
                            tag: '',
                            role: 'admin|teacher',
                            permission: 'exercise-read|exercise-upd',
                            menuName: 'schoolBank'
                        },
                        // 知识点库
                        {
                            icon: 'iconfont icon-k-point',
                            name: this.$t('system.menu.kdBack'),
                            router: '/home/knowledge',
                            tag: '',
                            role: 'admin|teacher',
                            permission: 'knowledge-read|knowledge-upd',
                            menuName: 'knowledge'
                        }
                    ]
                },
                // 校园活动
                {
                    icon: 'iconfont icon-activityS',
                    name: this.$t('system.menu.scAc'),
                    router: '',
                    role: 'admin',
                    permission: 'schoolAc-read|schoolAc-upd',
                    subName: 'scAc',
                    child: [
                        {
                            icon: 'iconfont icon-test',
                            name: this.$t('system.menu.scEv'),
                            router: '/home/schoolEvaluation',
                            tag: '',
                            role: 'admin',
                            permission: 'schoolAc-read|schoolAc-upd',
                            menuName: 'schoolEvaluation'
                        },
                        {
                            icon: 'iconfont icon-vote',
                            name: this.$t('system.menu.scVote'),
                            router: '/home/manageVote',
                            tag: '',
                            role: 'admin',
                            permission: 'schoolAc-read|schoolAc-upd',
                            menuName: 'manageVote'
                        },
                        {
                            icon: 'iconfont icon-questionnaire',
                            name: this.$t('system.menu.scQu'),
                            router: '/home/manageQuestionnaire',
                            tag: '',
                            role: 'admin',
                            permission: 'schoolAc-read|schoolAc-upd',
                            menuName: 'manageQuestionnaire'
                        },
                    ]
                },
                // 统计分析 暂时隐藏，只保留学情分析
                // {
                //     icon: 'iconfont icon-analysis',
                //     name: this.$t('system.menu.staAna'),
                //     router: '',
                //     role: 'admin',
                //     subName: 'analysis',
                //     permission: 'analysis-read|scboard-read',
                //     child: [
                //         // 学情分析
                //         {
                //             icon: 'iconfont icon-xueqing',
                //             name: this.$t('system.menu.evAna'),
                //             router: '/totalIndex',
                //             tag: '',
                //             role: 'admin',
                //             permission: 'analysis-read',
                //             menuName: 'totalIndex'
                //         },
                //         // 校园分析
                //         {
                //             icon: 'iconfont icon-school-analysis',
                //             name: this.$t('system.menu.scAna'),
                //             router: '/home/scboard',
                //             tag: this.$t('system.menu.preview'),
                //             role: 'admin',
                //             permission: 'scboard-read',
                //             menuName: 'scboard'
                //         }
                //     ]
                // },

                // 学情分析
                {
                    icon: 'iconfont icon-xueqing',
                    name: this.$t('system.menu.evAna'),
                    router: '/totalIndex',
                    tag: '',
                    role: 'admin',
                    permission: 'analysis-read',
                    menuName: 'totalIndex',
                    child: []
                },

            ] : []
            this.teacherMenu = [
                // 我的班级
                {
                    icon: 'iconfont icon-class-self',
                    name: this.$t('system.menu.myClass'),
                    router: '/home/manageClass',
                    tag: '',
                    role: 'teacher',
                    permission: '',
                    child: [],
                    menuName: 'manageClass',
                    isShow: this.$store.state.userInfo.hasSchool && this.$store.state.userInfo.isHeadmaster
                },
                // 我的课程
                {
                    icon: 'iconfont icon-course-self',
                    name: this.$t('system.menu.myCus'),
                    router: '/home/myCourse',
                    tag: '',
                    role: 'teacher',
                    permission: '',
                    child: [],
                    menuName: 'myCourse',
                    isShow: true
                },
                // 我的资源
                {
                    icon: 'iconfont icon-textbook',
                    name: this.$t('system.menu.cusContent'),
                    router: '',
                    role: 'teacher',
                    permission: '',
                    subName: 'cusContent',
                    child: [
                        {
                            icon: 'iconfont icon-syllabus',
                            name: this.$t('system.menu.prtSyllabus'),
                            router: '/home/personalSyllabus',
                            tag: this.$t('system.menu.preview'),
                            role: 'teacher|admin',
                            permission: '',
                            menuName: 'personalSyllabus',
                            isShow: true
                        },
                        {
                            icon: 'iconfont icon-file',
                            name: this.$t('system.menu.prtContent'),
                            router: '/home/personalcontent',
                            tag: '',
                            role: 'teacher|admin',
                            permission: '',
                            menuName: 'personalcontent',
                            isShow: true
                        },
                        {
                            icon: 'iconfont icon-question-bank',
                            name: this.$t('system.menu.prtQuBack'),
                            router: '/home/evaluation/personalBank',
                            tag: '',
                            role: 'teacher|admin',
                            permission: '',
                            menuName: 'personalBank',
                            isShow: true
                        }
                    ]
                },
                // 学习活动
                {
                    icon: 'iconfont icon-activityT',
                    name: this.$t('system.menu.stuAc'),
                    router: '',
                    role: 'teacher|admin',
                    permission: '',
                    subName: 'stuAc',
                    child: [
                        {
                            icon: 'iconfont icon-test',
                            name: this.$t('system.menu.prtEv'),
                            router: '/home/privateEvaluation',
                            tag: '',
                            role: 'teacher|admin',
                            permission: '',
                            menuName: 'privateEvaluation',
                            isShow: true
                        },
                        {
                            icon: 'iconfont icon-vote',
                            name: this.$t('system.menu.prtVote'),
                            router: '/home/personalVote',
                            tag: '',
                            role: 'teacher|admin',
                            permission: '',
                            menuName: 'personalVote',
                            isShow: true
                        },
                        {
                            icon: 'iconfont icon-questionnaire',
                            name: this.$t('system.menu.prtQu'),
                            router: '/home/personalSurvey',
                            tag: '',
                            role: 'teacher|admin',
                            permission: '',
                            menuName: 'personalSurvey',
                            isShow: true
                        },
                        // 自主学习和作业活动暂时隐藏
                        // {
                        //     icon: 'iconfont icon-learning-self',
                        //     name: this.$t('system.menu.selfLearn'),
                        //     router: '/home/SelfLearn',
                        //     tag: this.$t('system.menu.preview'),
                        //     role: 'teacher|admin',
                        //     permission: '',
                        //     menuName: 'selfLearn',
                        // isShow:true
                        // },
                        // {
                        //     icon: 'iconfont icon-hw',
                        //     name: this.$t('system.menu.homework'),
                        //     router: '/home/manageHomeWork',
                        //     tag: this.$t('system.menu.preview'),
                        //     role: 'teacher|admin',
                        //     permission: '',
                        //     menuName: 'manageHomeWork',
                        // isShow:true
                        // }
                    ]
                },

                // 任务列表（暂时隐藏）
                {
                    icon: 'iconfont icon-task',
                    name: this.$t('system.menu.taskList'),
                    router: '/home/taskList',
                    tag: '预览',
                    role: 'teacher',
                    permission: '',
                    child: [],
                    menuName: 'taskList',
                    isShow: this.$store.state.userInfo.hasSchool
                }
            ]
        },
        changeMenuStatus() {
            this.$refs.side1.toggleCollapse()
            this.$EventBus.$emit('onCollapseChange', this.isCollapsed)
        }
    },
    computed: {
        rotateIcon() {
            return ["collapse-icon", this.isCollapsed ? "rotate-icon" : ""]
        }
    },
    created() {
        this.initMenu()
        let cloudSetting = localStorage.getItem('cloudSetting')
        if (cloudSetting) {
            cloudSetting = JSON.parse(cloudSetting)
            if (cloudSetting.menuStatus == 'close') {
                this.isCollapsed = true
            }
            this.isShowLogo = cloudSetting.logoStatus === 'open'
        }
    },
    mounted() {
        this.$EventBus.$off('onLogoStatusChange')
        this.$EventBus.$on('onLogoStatusChange', val => {
            this.isShowLogo = val === 'open'
        })
    },
    watch: {
        $route: {
            handler(val, oldval) {
                if (this.schoolMenu.length == 0) {
                    this.initMenu()
                }
                let metaName = val.meta.activeName
                this.activeName = metaName
                this.openNames = []
                for (let i in this.schoolMenu) {
                    if (this.schoolMenu[i].child.length) {
                        for (let j in this.schoolMenu[i].child) {
                            if (this.schoolMenu[i].child[j].menuName == metaName) {
                                this.activeName = metaName
                                this.openNames.push(this.schoolMenu[i].subName)
                                break
                            }
                        }
                    }
                }
                for (let i in this.teacherMenu) {
                    if (this.teacherMenu[i].child.length) {
                        for (let j in this.teacherMenu[i].child) {
                            if (this.teacherMenu[i].child[j].menuName == metaName) {
                                this.activeName = metaName
                                this.openNames.push(this.teacherMenu[i].subName)
                                break
                            }
                        }
                    }
                }
            },
            // 深度观察监听
            deep: true,
            //立即执行
            immediate: true
        },
        '$i18n.locale'(n, o) {
            this.initMenu()
        }
    }

};
</script>
<style lang="less" scoped>
@import "./BaseLayout.less";
</style>
<style lang="less">
.biz-menu .ivu-menu-vertical .ivu-menu-item-group-title {
    font-size: 12px;
    line-height: 30px;
    height: 30px;
    position: relative;
    color: white;
}
.ivu-menu-item-group{
    position: relative;
}
.biz-menu .ivu-menu-vertical .ivu-menu-item-group::after {
    content: "";
    width: 100%;
    height: 1px;
    background: #303030;
    position: absolute;
    right: 0px;
    bottom: -10px;
    box-shadow:0px 12px 8px -12px #000;
}
.biz-menu  .ivu-menu-item-group:nth-child(2)::after {
    background: transparent;
}
.biz-menu  .ivu-menu-item-group:nth-child(2) {
    margin-top: 30px;
}


.biz-menu .ivu-menu-item-group:first-child {
    margin-top: 0px;
}
.biz-menu .ivu-menu-item-group {
    margin-top: 10px;
}
.layout .ivu-layout-header {
    padding: 0px;
}

.biz-menu .ivu-menu-light {
    // background: var(--side-bg);
    background: #1d1e23;
    color: var(--primary-textColor);
}

.biz-menu .ivu-menu-vertical.ivu-menu-light:after {
    width: 0px;
}

.biz-menu
    .ivu-menu-light.ivu-menu-vertical
    .ivu-menu-item-active:not(.ivu-menu-submenu) {
    background: #33343a;
    color: white;
    z-index: 2;
}

.collapsed-menu span {
    position: absolute;
    opacity: 0;
    float: right;
    width: 0px;
}
.menu-item span {
    display: inline-block;
    white-space: nowrap;
    font-size: 15px;
    // position: absolute;
    width: ~"calc(100% - 50px)";
    max-width: 150px;
    vertical-align: top;
    transition: width 0.2s;
    font-family: Roboto, -apple-system, BlinkMacSystemFont, Segoe UI,
        Microsoft JhengHei !important;
}

.menu-item i {
    margin-right: 10px;
    transform: translateX(0px);
    transition: font-size 0.5s ease, transform 0.5s ease;
    font-size: 16px;
}

.menu-item .ivu-menu .ivu-menu-item {
    color: #cccccc;
}
.menu-item .ivu-menu-item {
    color: hsla(0, 0%, 100%, 0.7);
    display: flex;
    align-items: center;
}

.menu-item .ivu-menu-submenu-title {
    color: hsla(0, 0%, 100%, 0.7);
    display: flex;
    align-items: center;
}

.collapsed-menu i {
    transform: translateX(5px);
    transition: font-size 0.2s ease 0.2s, transform 0.2s ease 0.2s;
    vertical-align: middle;
    font-size: 22px;
}

.biz-menu .ivu-icon-ios-arrow-down:before {
    position: absolute;
    top: -6px;
    font-size: 15px;
}

.collapsed-menu .ivu-icon-ios-arrow-down:before {
    right: -20px;
}

.biz-menu .ivu-menu-opened .ivu-icon-ios-arrow-down:before {
    transform: rotate(180deg);
    transition: transform 0.2s;
}

.biz-menu .ivu-icon-ios-arrow-down:before {
    transform: rotate(0deg);
    transition: transform 0.2s;
}

.biz-menu .ivu-menu-submenu-title-icon {
    transform: translateY(-50%) rotate(0deg) !important;
}

.poptop-content-radius .ivu-menu:first-child,
.poptop-content-radius .ivu-menu:first-child .ivu-menu-item {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.poptop-content-radius .ivu-menu:last-child,
.poptop-content-radius .ivu-menu:last-child .ivu-menu-item {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.biz-menu .ivu-menu-vertical .ivu-menu-item,
.biz-menu .ivu-menu-vertical .ivu-menu-submenu-title {
    padding: 13px 24px;
}
.biz-menu .ivu-menu-submenu .ivu-menu-item {
    background: #101117;
    display: flex;
    align-items: center;
}

.biz-menu
    .ivu-menu-light.ivu-menu-vertical
    .ivu-menu-item-active:not(.ivu-menu-submenu) {
    color: #ffffff;
}

.biz-menu
    .ivu-menu-light.ivu-menu-vertical
    .ivu-menu-item-active:not(.ivu-menu-submenu):after {
    // background: transparent;
    background: #1cc0f3;
    width: 1px;
}

// .ivu-menu-submenu-title:hover .ivu-menu-submenu-title-icon::before,.ivu-menu-submenu-title:hover span, .ivu-menu-submenu-title:hover .ivu-icon{
//     color: #fff;
// }
.ivu-menu-submenu-title:hover .ivu-menu-submenu-title-icon::before {
    color: rgb(45, 183, 245);
}
.ivu-menu-item:hover,
.ivu-menu-submenu-title:hover {
    color: white !important;
    .ivu-icon-ios-arrow-down:before {
        color: white !important;
    }
}
</style>