BusinessBenchmark/src/views/homePage.vue

<template>
    <div class="homePage">
        <div class="frameMain" :style="allHeight">
            <div class="menuList">
                <el-menu :default-active="$route.path" router :unique-opened="true" :default-openeds="openeds"
                    @select="handleNodeClick" text-color="#fff" background-color="#184FB4" active-text-color="#fff">
                    <!-- 引入组件 -->
                    <menu-tree :menuData="forecastDatas"></menu-tree>
                </el-menu>
            </div>
            <div class="homeMain" :style="mainHeight">
                <div class="homeMain_tag">
                    <div style="width: 90%;overflow: hidden;">
                        <el-tag v-for="tag in routeTags" :key="tag.index" closable size="large" class="tagArr"
                            effect="dark" :type="tag.index === $route.path ? '': 'info'" @close="handleClose(tag)"
                            @click="handleShowPage(tag)">
                            <span>{{ tag.name }}</span>
                        </el-tag>
                    </div>
                    <div class="settingMsg">
                        <span>{{userName}}</span>
                        <img :src="closeBtn" @click="closeSys">
                    </div>
                </div>
                <div class="mainMessage" :style="$route.path === '/home' ? '': 'padding: 0 10px;'">
                    <router-view></router-view>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import MenuTree from '../components/menuTreeconfig.vue'
    import homeImg from '../assets/menuImg/home.png'
    import taskImg from '../assets/menuImg/task.png'
    import yewuImg from '../assets/menuImg/yewu.png'
    import tixiImg from '../assets/menuImg/tixi.png'
    import zhishikuImg from '../assets/menuImg/zhishiku.png'
    import quanxianImg from '../assets/menuImg/quanxian.png'
    import tonggaoImg from '../assets/menuImg/tonggao.png'
    import benbuImg from '../assets/menuImg/benbu.png'
    import renyuanImg from '../assets/menuImg/renyuan.png'
    import closeBtn from '../assets/getwayImg/closeBtn.png'

    import {
        getToken,
        removeToken
    } from '../api/auth'
    import {
        apiPostremoveByToken,
        apiGetMenuData
    } from '../api/api'
    export default {
        components: {
            MenuTree
        },
        // inject: ['reload'],
        data() {
            return {
                forecastDatas: [],
                expendData: ['0'],
                openeds: [],
                routeTags: [],
                defaultProps: {
                    children: 'children',
                    label: 'label',
                },
                closeBtn: closeBtn,
                userName: ''
            }
        },
        created() {
            this.getMenuData()
            // this.forecastDatas = [{
            //         index: '/home',
            //         name: '考评首页',
            //         img: homeImg
            //     },
            //     {
            //         index: '/taskCenter',
            //         name: '任务中心',
            //         img: taskImg
            //     },
            //     {
            //         index: '/notification',
            //         name: '通告管理',
            //         img: tonggaoImg
            //     },
            //     {
            //         index: '1',
            //         name: '考评体系配置',
            //         img: tixiImg,
            //         children: [{
            //                 index: '/evaluationSystem/evaluationIndex',
            //                 name: '考评指标管理',
            //             },
            //             {
            //                 index: '/evaluationSystem/evaluationRules',
            //                 name: '考评规则配置',
            //             },
            //             {
            //                 index: '/evaluationSystem/company',
            //                 name: '单位权重配置',
            //             },
            //             {
            //                 index: '/baseInfomation/moreBrand',
            //                 name: '单位营业收入',
            //             },
            //             {
            //                 index: '/evaluationSystem/achievementK',
            //                 name: '业绩考核系数配置',
            //             },
            //             {
            //                 index: '/evaluationSystem/partyBuildingK',
            //                 name: '党建考核系数配置',
            //             },
            //             {
            //                 index: '/evaluationSystem/multiSequence',
            //                 name: '多序列计算指标',
            //             },
            //             {
            //                 index: '/evaluationSystem/department',
            //                 name: '部门考评配置',
            //             },
            //             {
            //                 index: '/evaluationSystem/personnel',
            //                 name: '人员考评配置',
            //             },
            //         ]
            //     },
            //     {
            //         index: '2',
            //         name: '单位考评业务',
            //         img: yewuImg,
            //         children: [{
            //                 index: '/assessment/evaluationStart',
            //                 name: '单位考评目标启动',
            //             },
            //             {
            //                 index: '/assessment/evaluationAmendment',
            //                 name: '单位考评目标修订',
            //             },
            //             {
            //                 index: '/assessment/evaluationMonth',
            //                 name: '单位月度考评'
            //             },
            //             {
            //                 index: '/assessment/evaluationQuarter',
            //                 name: '单位季度考评'
            //             },
            //             {
            //                 index: '/assessment/evaluationYear',
            //                 name: '单位年度考评'
            //             },
            //             {
            //                 index: '/assessment/evaluationBenchmarkingIndic',
            //                 name: '考评对标分析'
            //             },
            //             {
            //                 index: '/assessment/evaluationWarning',
            //                 name: '考评预警'
            //             },
            //             {
            //                 index: '/assessment/evaluationUnitRating',
            //                 name: '单位考评评级'
            //             },
            //             {
            //                 index: '/assessment/evaluationReport',
            //                 name: '考评报告'
            //             },
            //         ]
            //     },
            //     {
            //         index: '3',
            //         name: '本部考评业务',
            //         img: benbuImg,
            //         children: [{
            //                 index: '/assessment/evaluationDeptStart',
            //                 name: '业绩指标计划',
            //             },
            //             {
            //                 index: '/assessment/evaluationDeptBusiness',
            //                 name: '业绩指标考评'
            //             },
            //             {
            //                 index: '/assessment/evaluationDeptRating',
            //                 name: '部门考评评级'
            //             },
            //             {
            //                 index: '/assessment/assessmentApplication',
            //                 name: '绩效结果考核申报'
            //             }
            //         ]
            //     },
            //     {
            //         index: '5',
            //         name: '基础信息配置',
            //         img: quanxianImg,
            //         children: [{
            //                 index: '',
            //                 href: '',
            //                 name: '人员权限配置',
            //             },
            //             {
            //                 index: '',
            //                 name: '工作流程配置',
            //             }
            //         ]
            //     },
            //     {
            //         index: '6',
            //         name: '对标考评知识库',
            //         img: zhishikuImg,
            //         children: [{
            //                 index: '/evaluationknowledge/scoringRules',
            //                 name: '考评得分规则',
            //             },
            //             {
            //                 index: '/evaluationknowledge/evalRatingRules',
            //                 name: '考评评级规则',
            //             },
            //             {
            //                 index: '/evaluationknowledge/earlyWarningRule',
            //                 name: '考评预警规则',
            //             }
            //         ]
            //     },
            // ]
            if (window.sessionStorage.getItem('routeTags')) {
                this.routeTags = JSON.parse(window.sessionStorage.getItem('routeTags'))
                if (this.$route?.path === '/') {
                    this.$router.push({
                        path: this.routeTags[0].index
                    })
                }
            } else {
                this.routeTags = [{
                    index: '/home',
                    name: '考评首页'
                }]
                this.$router.push({
                    path: this.routeTags[0].index
                })
                window.sessionStorage.setItem('routeTags', JSON.stringify(this.routeTags))
            }
            if (window.sessionStorage.getItem('user')) {
                let obj = JSON.parse(window.sessionStorage.getItem('user'))
                this.userName = obj.name
            }
        },
        mounted() {

        },
        computed: {
            mainHeight() {
                return {
                    // 'height': document.documentElement.clientHeight-50 + 'px'
                    'height': '100vh'
                }
            },
            allHeight() {
                return {
                    'width': '100%',
                    // 'height': document.documentElement.clientHeight-40 + 'px'
                    'height': '100vh'
                }
            },
            viewHeight() {
                return {
                    'width': '100%',
                    // 'height': document.documentElement.clientHeight-40 + 'px'
                    'height': '91vh'
                }
            }
        },
        methods: {
            // 获取菜单数据
            getMenuData() {
                let that = this
                apiGetMenuData().then(datas => {
                    if (datas && datas.data) {
                        let arr = []
                        for (let i = 0; i < datas.data.length; i++) {
                            let item = datas.data[i]
                            let obj = {
                                index: item.href,
                                name: item.name
                            }
                            if (item.name === '考评首页') {
                                obj.img = homeImg
                            } else if (item.name === '任务中心') {
                                obj.img = taskImg
                            } else if (item.name === '通告管理') {
                                obj.img = tonggaoImg
                            } else if (item.name === '考评体系配置') {
                                obj.img = tixiImg
                                obj.children = that.changeMenuData(item.children)
                            } else if (item.name === '单位考评业务') {
                                obj.img = yewuImg
                                obj.children = that.changeMenuData(item.children)
                            } else if (item.name === '本部考评业务') {
                                obj.img = benbuImg
                                obj.children = that.changeMenuData(item.children)
                            } else if (item.name === '本部人员考评') {
                                obj.img = renyuanImg
                                obj.children = that.changeMenuData(item.children)
                            } else if (item.name === '基础信息配置') {
                                obj.img = quanxianImg
                                obj.children = that.changeMenuData(item.children)
                            } else if (item.name === '对标考评知识库') {
                                obj.img = zhishikuImg
                                obj.children = that.changeMenuData(item.children)
                            }
                            arr.push(obj)
                        }
                        that.forecastDatas = arr
                    }
                })
            },
            changeMenuData(data) {
                let childArr = []
                data.forEach(item => {
                    let obj = {
                        index: item.href,
                        name: item.name
                    }
                    childArr.push(obj)
                })
                return childArr
            },
            getBac(val) {
                let strWea = ''
                debugger
                if (val) {
                    strWea = 'changeBacksty'
                } else {
                    strWea = 'defaultBacksty'
                }
                return strWea
            },
            changeRoute(item) {
                if (item.index) {
                    this.$router.push({
                        path: item.index
                    })
                }
            },
            closeSys() {
                let that = this
                apiPostremoveByToken(window.localStorage.getItem('token')).then(datas => {
                    if (datas.code === 200) {
                        // removeToken('token')
                        // removeToken('code')
                        // removeToken('purview')
                        window.localStorage.removeItem('code')
                        window.localStorage.removeItem('purview')
                        window.localStorage.removeItem('token')
                        window.sessionStorage.clear()
                        that.$router.push({
                            path: "/login"
                        })
                    }
                })
            },
            handleNodeClick(index, indexPath) {
                if (indexPath) {
                    this.forecastDatas.forEach(it => {
                        if (it.index !== '') {
                            if (it.index === indexPath[0]) {
                                if (!it.children) {
                                    let showM = 0
                                    this.routeTags.forEach(item => {
                                        if (item.name === it.name) {
                                            showM++
                                        }
                                    })
                                    if (showM === 0) {
                                        let obj = {
                                            index: it.index,
                                            name: it.name
                                        }
                                        this.routeTags.push(obj)
                                    }
                                } else {
                                    it.children.forEach(iv => {
                                        if (iv.index !== '') {
                                            if (iv.index === indexPath[1]) {
                                                let showM = 0
                                                this.routeTags.forEach(item => {
                                                    if (item.name === iv.name) {
                                                        showM++
                                                    }
                                                })
                                                if (showM === 0) {
                                                    this.routeTags.push(iv)
                                                }
                                            }
                                        }
                                    })
                                }
                            }
                        }
                    })
                    window.sessionStorage.setItem('routeTags', JSON.stringify(this.routeTags))
                }
            },
            handleClose(tag) {
                if (this.routeTags.length > 1) {
                    this.routeTags.splice(this.routeTags.indexOf(tag), 1)
                    this.$router.push({
                        path: this.routeTags[this.routeTags.length - 1].index
                    })
                    window.sessionStorage.setItem('routeTags', JSON.stringify(this.routeTags))
                }
            },
            handleShowPage(tag) {
                this.$router.push({
                    path: tag.index
                })
            }
        }
    }
</script>

<style lang="less">
    .homePage {
        display: flex;

        .leftMenu {
            width: 70px;

            .logoSty {
                padding: 10px 0 0 10px;

                img {
                    width: 35px;
                    height: 35px;
                }
            }

            .firstLevel {
                margin-top: 30px;

                .firstLevel_icon {
                    margin-bottom: 30px;
                    cursor: pointer;

                    .firstLevel_img {
                        width: 35px;
                        height: 37px;
                        text-align: center;
                        border-radius: 5px;
                        position: relative;
                        left: 10px;

                        img {
                            position: relative;
                            top: 6px;
                            width: 20px;
                            height: 20px;
                        }

                        &:hover {
                            background: rgba(255, 255, 255, .2);
                        }
                    }

                    .changeBacksty {
                        background: rgba(255, 255, 255, .2);
                    }

                    .defaultBacksty {
                        background: rgba(255, 255, 255, 0);
                    }

                    .firstLevel_title {
                        margin-left: 5px;

                        span {
                            font-size: 12px;
                            color: #fff;
                        }
                    }
                }
            }
        }

        .frameMain {
            // background: #f3f7f8;
            border-radius: 30px;
            display: flex;

            .menuList {
                width: 13vw;
                height: 100vh;
                background-color: #184FB4;

                .el-menu {
                    .el-sub-menu {
                        .el-menu--inline {
                            .el-menu-item {
                                height: 30px;
                                margin-bottom: 10px;
                                border-radius: 15px 0 0 15px;
                                width: 90%;
                                position: relative;
                                left: 12%;
                                padding-left: 15px;
                            }

                            .el-menu-item:hover,
                            .el-menu-item.is-active {
                                background-color: #fff;
                                border-radius: 15px 0 0 15px;
                                color: #2778FF;
                                width: 90%;
                                position: relative;
                                left: 12%;
                                padding-left: 15px;
                            }

                            .el-sub-menu__title:hover {
                                background-color: #1063CB !important;
                            }
                        }
                    }
                }
            }

            .homeMain {
                width: 86vw;

                .homeMain_tag {
                    height: 60px;
                    border-bottom: 1px solid #D6DBEA;
                    display: flex;

                    .tagArr {
                        height: 33px;
                        margin-left: 10px;
                        cursor: pointer;
                        position: relative;
                        top: 28px;
                    }

                    .el-tag--dark {
                        background-color: #184FB4;
                        border: 1px solid #184FB4;
                    }

                    .el-tag--info {
                        background-color: #E6EBF5;
                        border: 1px solid #E6EBF5;
                        color: #9DA5BE;

                        .el-tag__close {
                            color: #9DA5BE;
                        }
                    }

                    .settingMsg {
                        width: 10%;
                        padding-top: 20px;

                        span {
                            // width: 80%;
                            // display: inline-block;
                            position: relative;
                            top: -5px;
                            font-size: 18px;
                            font-family: '微软雅黑';
                            font-weight: bold;
                            color: #171e28;
                        }

                        img {
                            position: relative;
                            left: 10px;
                            cursor: pointer
                        }
                    }
                }

                .mainMessage {
                    width: 100%;
                    height: 91vh;
                    // padding: 0 10px;
                    // background: #fff;
                    border-radius: 20px;
                }
            }
        }
    }
</style>