LittleBeePlatform/src/views/Layout/index.vue

<!--
 * @Author: your name
 * @Date: 2021-11-18 17:27:08
 * @LastEditTime: 2021-11-29 09:45:11
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: /ansu-business/src/views/Layout/index.vue
-->
<template>
    <a-layout id="components-layout-demo-custom-trigger">
        <a-layout-sider v-model="collapsed" :trigger="null" collapsible>
            <div class="logo"><img class="m1" src="../../assets/images/logo.png" /><span class="s1" v-if="!collapsed">小蜜蜂SaaS</span></div>
            <yMenu :csd="collapsed"></yMenu>
        </a-layout-sider>
        <a-layout>
            <a-layout-header style="background: #fff; padding: 0; height: 42px">
                <div class="h-d1">
                    <a-icon class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'" @click="() => (collapsed = !collapsed)" />
                    <a-breadcrumb>
                        <a-breadcrumb-item v-for="(item,index) in tags" :key="index"><a class="abt" @click="handlerBread(item)">{{item.meta.title}}</a></a-breadcrumb-item>
                    </a-breadcrumb>
                </div>
                <div class="h-d2">
                    <a-icon class="h-d2-c" @click="onQuit" style="color: #e27473" type="logout" />
                    <a-icon class="h-d2-c" style="color: #b7b7b7" type="question-circle" />
                    <a-icon class="h-d2-c" type="alert" />
                    <a-icon class="h-d2-c" style="color: #979a96;margin-right: 7px;" type="user" />
                    <span class="h-d2-s">{{Info.director}}</span>
                </div>
            </a-layout-header>
            <a-layout-content :style="{ margin: '10px'}">
                <router-view></router-view>
            </a-layout-content>
        </a-layout>
    </a-layout>
</template>
<script>
import yMenu from "./yMenu";
import {quit} from "@/api/public/login"
export default {
	components: {
		yMenu,
	},
	mounted(){
		this.$router.push({ name: sessionStorage.getItem('routerName') });
        this.Info = JSON.parse(sessionStorage.getItem('info'));
		// this.tagActive = Number(sessionStorage.getItem('index'))
		// userInfo().then(res =>{
		// 	this.Info = res.data
		// 	sessionStorage.setItem('info',JSON.stringify(this.Info))
		// })
	},
	watch: {
		$route: {
			handler(val) {
				this.tags = val.matched;
				sessionStorage.setItem('routerName',val.name)
			},
			immediate: true,
		},
		tagActive:{
			handler(val) {
				// console.log(val);
				sessionStorage.setItem('modal',this.menuTags[val].value)
			},
			immediate: true,
		}
	},
	data() {
		return {
			Info:{
				director:'',
				type:undefined,//1.平台超级管理员，2.平台普通管理员，3.平台入驻公司管理账号
			},
			collapsed: false,
			tagActive: 0,
			menuTags: [
				{
					label: "基础功能",
					value: "a",
				},
				{
					label: "缴费管理",
					value: "b",
				},
				{
					label: "智慧商城",
					value: "c",
				},
				{
					label: "运营管理",
					value: "d",
				},
				{
					label: "设置",
					value: "e",
				},
			],
		};
	},
	methods: {
		handlerBread(row) {
			let path = row.path || "/";
			this.$router.push(path);
		},
		handlerTags(n) {
			this.tagActive = n;
		},
        onQuit() {
            this.$confirm({
                    title: "是否要退出登录？",
                    icon:'close',
                    onOk:async()=>{
                    let res = await quit();
                    if (res.code === 200) {
                        this.$message.success(res.msg);
                        this.$router.push('/login')
                    } else {
                        this.$message.error(res.msg);
                    }
                },
            })
        }
	},
};
</script>
<style lang="less" scoped>
#components-layout-demo-custom-trigger .trigger {
    font-size: 18px;
    padding: 0 24px;
    cursor: pointer;
    transition: color 0.3s;
}

#components-layout-demo-custom-trigger .trigger:hover {
    color: #1890ff;
}

#components-layout-demo-custom-trigger .logo {
    height: 42px;
    display: flex;
    justify-content: center;
    align-items: center;
    .m1 {
        height: 24px;
        background: #fff;
        padding: 3px;
        border-radius: 2px;
    }
    .s1 {
        display: block;
        color: #d6d6d6;
        font-size: 16px;
        margin-left: 10px;
        font-weight: 500;
    }
}
.h-d1 {
    height: 100%;
    display: flex;
    justify-content: flex-start;
    line-height: 1;
    align-items: center;
    .h-d1-item {
        width: 102px;
        height: 100%;
        text-align: center;
        line-height: 42px;
        cursor: pointer;
        .s1 {
            display: inline-block;
            height: 100%;
            border-bottom: 2px solid transparent;
        }
    }
    .h-d1-item-active {
        .s1 {
            border-bottom: 2px solid #5679b1;
        }
    }
}
.h-d2 {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .h-d2-c {
        display: inline-block;
        margin-left: 24px;
        font-size: 16px;
        font-weight: 500;
        cursor: pointer;
    }
    .h-d2-s {
        display: inline-block;
        margin-right: 24px;
    }
}

.l-h-d1 {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 10px;
}
.abt {
    cursor: pointer;
}
</style>