bsdgy-front/src/pages/Home.vue

<template>
    <div class="layout">
        <Layout :style="{minHeight: '100vh'}">
            <Sider collapsible :collapsed-width="78" v-model="isCollapsed"  :hide-trigger="true" >

                <div style="margin: 40px 0 20px 10px;font-weight: bold;font-size: 30px;color: #ffffff;">
                    <Poptip placement="bottom-start" width="200" :offset="-8">
                        <img src="../../static/img/avatar.png" style="width: 32px;vertical-align: middle;cursor: pointer"/>
                        <div slot="content">
                            <div style="cursor: pointer;" @click="logoutClick">
                                <span class="logout-span">退出登录</span>
                                <img class="logout-img" src="../../static/img/logout.png"/>
                            </div>
                        </div>
                    </Poptip>
                    <span class="project-title">优客后台管理</span>
                </div>

                <Menu ref="menu" :active-name="selectedItemName" :open-names="openName" theme="dark" width="auto"
                      @on-select="onSelectLister" :accordion="true">

                    <Submenu :name="item.id" v-for="item in onePermissionList" :key="item.id">
                        <template slot="title">
                            <Icon type="ios-paper"/>
                            {{item.name}}
                        </template>
                        <MenuItem :name="cItem.id" :to="cItem.resource" v-for="cItem in item.subMenuList"
                                  :key="cItem.id" :target="cItem.name === '大屏' ? '_blank' : '_self'">
                            {{cItem.name}}
                        </MenuItem>
                    </Submenu>
                </Menu>
            </Sider>
            <Layout>
                <!--        <Header :style="{background: '#fff', boxShadow: '0 2px 3px 2px rgba(0,0,0,.1)'}"></Header>-->
                <Content :style="{padding: '0 16px 16px'}">
                    <Breadcrumb :style="{margin: '16px 0'}">
                        <BreadcrumbItem><span style="cursor: pointer" @click="breadcrumbClick">{{selectedMenu}}</span></BreadcrumbItem>
                        <BreadcrumbItem>{{selectedSubMenu}}</BreadcrumbItem>
                    </Breadcrumb>
                    <Card>
                        <div :style="{'min-height':mHeight + 'px'}">
                            <router-view/>
                        </div>
                    </Card>
                </Content>
            </Layout>
        </Layout>
    </div>
</template>
<script>
    import homeRequest from "../services/home/homeRequest";

    export default {
        provide() {
            return {
                checkParamBlank: this.checkParamBlank,
                setMenuName: this.setMenuName,
            };
        },
        data() {
            return {
                roleCode: JSON.parse(sessionStorage.getItem("loginInfo")).roleCode,
                isCollapsed: false,
                mHeight: 600,
                selectedItemName: "",
                openName: [],
                selectedMenu: '',
                selectedSubMenu: '',
                //权限等级
                onePermissionLevel: 1,
                twoPermissionLevel: 2,
                threePermissionLevel: 3,
                //导航栏权限-1级权限
                onePermissionList: [],
                //2级权限
                twoPermissionList: [],
                //3级权限
                threePermissionList: [],
                //面包屑点击跳转路径
                breadcrumbUrl: "",
            }
        },
        mounted() {
            let that = this;
            this.bus.$on('callBack', function (item) {
                that.callBack(item);
            })
            // this.bus.$on('setHeader', function (data) {
            //     that.setHeader(data);
            // })
        },
        created() {
            // this.mHeight = window.screen.availHeight - 22;

            //获取导航栏权限
            this.listOnePermission(this.onePermissionLevel);
        },
        computed: {

        },
        watch: {
            'selectedItemName' (val) {
                console.log(val);
                let that = this;
                // that.openName = [that.onePermissionList[2]];
                this.$nextTick(() => {
                    that.$refs.menu.updateActiveName();
                });
            }

        },
        methods: {
            // 菜单选中事件
            onSelectLister(val) {
                for (let i = 0; i < this.onePermissionList.length; i++) {
                    let item = this.onePermissionList[i];
                    for (let k = 0; k < item.subMenuList.length; k++) {
                        let cItem = item.subMenuList[k];
                        if (cItem.id === val) {

                            if(cItem.name === '大屏'){
                                this.$router.push("")
                            }


                            this.selectedMenu = item.name;
                            this.selectedSubMenu = cItem.name;
                            this.selectedItemName = cItem.id;
                            this.breadcrumbUrl = cItem.resource;
                            // 3级菜单
                            sessionStorage.setItem("threeLevel",JSON.stringify(cItem.subMenuList));
                        }
                    }
                }
            },
            //对象属性空检查
            checkParamBlank: function (obj) {
                for (let param in obj) {
                    obj[param] = this.checkBlank(obj[param]);
                }
            },
            //数据空检查
            checkBlank: function (data) {
                if (!data && data != 0) {
                    return "--";
                } else {
                    return data;
                }
            },
            //获取导航栏一级权限
            listOnePermission(level) {
                let that = this;
                let userId = JSON.parse(sessionStorage.getItem("loginInfo")).userId;
                let request = {
                    userId: userId,
                    level: level
                };
                homeRequest.listUserLoginPermissionApi(request, function (data) {
                    data = data.data;
                    if (data.code === '0001') {
                        that.$Message.error("查询用户权限出错");
                        return;
                    }
                    if (data.code === '0000') {
                        data = data.results;
                        for (let i = 0; i < data.length; i++) {
                            let row = data[i];
                            row.class = 'head-permission';
                            that.onePermissionList.push(row);
                        }
                        that.listTwoPermission(that.twoPermissionLevel);
                    }

                })
            },
            //获取二级权限
            listTwoPermission(level) {
                let userId = JSON.parse(sessionStorage.getItem("loginInfo")).userId;
                let that = this;
                that.twoPermissionList = [];
                let request = {
                    userId: userId,
                    level: level
                };
                homeRequest.listUserLoginPermissionApi(request, function (data) {
                    data = data.data;
                    if (data.code === '0001') {
                        that.$Message.error("查询用户权限出错");
                        return;
                    }
                    if (data.code === '0000') {
                        data = data.results;
                        that.twoPermissionList = [];
                        for (let i = 0; i < data.length; i++) {
                            let row = data[i];
                            that.twoPermissionList.push(row);
                        }
                        that.listThreePermission(that.threePermissionLevel);
                    }

                })
            },
            //获取三级权限
            listThreePermission(level) {
                let userId = JSON.parse(sessionStorage.getItem("loginInfo")).userId;
                let that = this;
                that.threePermissionList = [];
                let request = {
                    userId: userId,
                    level: level
                };
                homeRequest.listUserLoginPermissionApi(request, function (data) {
                    data = data.data;
                    if (data.code === '0001') {
                        that.$Message.error("查询用户权限出错");
                        return;
                    }
                    if (data.code === '0000') {
                        data = data.results;
                        that.threePermissionList = [];
                        for (let i = 0; i < data.length; i++) {
                            let row = data[i];
                            that.threePermissionList.push(row);
                        }
                        that.twoPermissionList.forEach(function (two) {
                            //把三级导航绑定给第二级导航栏
                            let three = that.threePermissionList.filter(function (data) {
                                return data.pid === two.id
                            });
                            two.subMenuList = three;
                        });
                        that.onePermissionList.forEach(function (one) {
                            //把二级导航绑定给第一级导航栏
                            let two = that.twoPermissionList.filter(function (data) {
                                return data.pid === one.id
                            });
                            one.subMenuList = two;
                        });
                        //展开第一个菜单
                        that.menuInit();
                    }
                })
            },
            //导航栏初始化
            menuInit: function () {
                let that = this;

                that.selectedItemName = that.onePermissionList[0].subMenuList[0].id;
                that.openName = [that.onePermissionList[0].id];

                this.selectedMenu = this.onePermissionList[0].name;
                this.selectedSubMenu = this.onePermissionList[0].subMenuList[0].name;
                sessionStorage.setItem("threeLevel",JSON.stringify(this.onePermissionList[0].subMenuList[0].subMenuList));
                this.$nextTick(() => {
                    this.$refs.menu.updateOpened();
                    // this.$refs.menu.updateActiveName();
                });
                this.$router.push({path: that.onePermissionList[0].subMenuList[0].resource});

            },
            //账户管理页面回调方法
            callBack(item) {
                let that = this;
                this.selectedMenu = "设置管理";
                this.selectedSubMenu = "账户管理";
                this.selectedItemName = this.onePermissionList[2].subMenuList[0].id;
                this.$router.push({path: '/account/manager',query:item});
            },
            setHeader(data){
                let that = this;
                this.selectedSubMenu = data.header;
                this.$nextTick(() => {
                    that.$refs.menu.updateActiveName();
                })
            },
            //手动设置面包屑
            setMenuName: function (menu1, menu2) {
                this.selectedMenu = menu1;
                this.selectedSubMenu = menu2;
            },
            //面包屑点击跳转
            breadcrumbClick: function () {
                if(this.selectedMenu === "首页"){
                    this.selectedSubMenu = "";
                }
                this.$router.push(this.breadcrumbUrl);
            },
            //登出
            logoutClick: function () {
                sessionStorage.setItem("loginInfo", "");
                sessionStorage.setItem("userId", "");
                sessionStorage.setItem("roleCode", "");
                this.$router.push('/login');
                this.$Message.info("登出成功");
            }
        },
    }
</script>
<style scoped>

    .layout-con {
        height: 100%;
        width: 100%;
    }
    /*项目标题*/
    .project-title{
        font-size: 22px;
        margin-left: 15px;
    }
    /*退出登入*/
    .logout-span{
        font-size: 15px;
        vertical-align: middle;
        color: #535353;
    }
    .logout-img{
        vertical-align: middle;
        margin-left: 80px;
    }
</style>