<template>
?? ?<el-menu class="el-menu-demo" mode="horizontal" background-color="#334157" text-color="#fff" active-text-color="#fff">
?? ??? ?<el-button class="buttonimg">
?? ??? ??? ?<img class="showimg" :src="collapsed?imgshow:imgsq" @click="doToggle()">
?? ??? ??? ?<!-- :src="collapsed?imgshow:imgsq" @click="doToggle()" -->
?? ??? ?</el-button>
?? ??? ?<el-submenu index="2" class="submenu">
?? ??? ??? ?<template slot="title">當(dāng)前用戶【{{username}}】身份認(rèn)證:{{usertype}}</template>
?? ??? ??? ?<el-menu-item index="2-1">設(shè)置</el-menu-item>
?? ??? ??? ?<el-menu-item index="2-2" @click="mya()">個(gè)人中心</el-menu-item>
?? ??? ??? ?<el-menu-item @click="exit()" index="2-3">退出</el-menu-item>
?? ??? ?</el-submenu>
?? ?</el-menu>
</template>
?
<script>
?? ?export default {
?? ??? ?name: 'LeftAside',
?? ??? ?data: function() {
?? ??? ??? ?return {
?? ??? ??? ??? ?collapsed: false, //是否折疊
?? ??? ??? ??? ?imgshow: require('../assets/img/show.png'),
?? ??? ??? ??? ?imgsq: require('../assets/img/sq.png'),
?? ??? ??? ??? ?username:sessionStorage.getItem("username"),
?? ??? ??? ??? ?usertype:sessionStorage.getItem("deptment")
?? ??? ??? ?};
?? ??? ?},
?? ??? ?methods: {
?? ??? ??? ?doToggle() {
?? ??? ??? ??? ?this.collapsed = !this.collapsed;
?? ??? ??? ??? ?console.log("TopNav的collapsed=%s", this.collapsed);
?? ??? ??? ??? ?this.$emit('top-click', this.collapsed);
?? ??? ??? ?},
?? ??? ??? ?exit() {
?? ??? ??? ??? ?this.$confirm('親，請(qǐng)不要走，留下好不好？', '提示', {
?? ??? ??? ??? ??? ?confirmButtonText: '殘忍離開',
?? ??? ??? ??? ??? ?cancelButtonText: '留下~',
?? ??? ??? ??? ??? ?type: 'warning'
?? ??? ??? ??? ?}).then(() => {
?? ??? ??? ??? ??? ?this.$router.push('/');
?
?? ??? ??? ??? ?}).catch(() => {});
?? ??? ??? ?},
? ? ? mya(){
? ? ? ? /* this.$router.push('/userCenter'); */
? ? ? ? ?/* this.$router.push('/system/UserCenter'); */
? ? ? }
?? ??? ?}
?? ?}
</script>
?
<style scoped>
?? ?.el-menu-vertical-demo:not(.el-menu--collapse) {
?? ??? ?border: none;
?? ?}
?
?? ?.submenu {
?? ??? ?float: right;
?? ?}
?
?? ?.buttonimg {
?? ??? ?height: 60px;
?? ??? ?background-color: transparent;
?? ??? ?border: none;
?? ?}
?
?? ?.showimg {
?? ??? ?width: 26px;
?? ??? ?height: 26px;
?? ??? ?position: absolute;
?? ??? ?top: 17px;
?? ??? ?left: 17px;
?? ?}
?
?? ?.showimg:active {
?? ??? ?border: none;
?? ?}
</style>

<template>
? <el-menu router :default-active="$route.path" class="el-menu-vertical-demo" background-color="#334157" text-color="#fff"
? ? active-text-color="#ffd04b" :collapse="leftCollapsed">
? ? <!-- <el-menu default-active="2" :collapse="collapsed" collapse-transition router :default-active="$route.path" unique-opened class="el-menu-vertical-demo" background-color="#334157" text-color="#fff" active-text-color="#ffd04b"> -->
? ? <div class="logobox">
? ? ? <img class="logoimg" src="../assets/img/logo.png" alt="">
? ? </div>
? ? <!--
?? ??? ? 第一級(jí)菜單
?? ??? ? el-submenu屬性：
?? ??? ? index：用于菜單折疊，不能重復(fù)
?? ??? ? key:菜單項(xiàng)的唯一標(biāo)識(shí)，不可重復(fù)
?? ??? ? -->
? ? <el-menu-item index="/Home" key="Home">
? ? ? <i class="el-icon-house"></i>
? ? ? <span slot="title">首頁(yè)</span>
? ? </el-menu-item>
? ? <!-- <el-menu-item index="/Page1" key="Page1">
?? ??? ??? ?<i class="el-icon-menu"></i>
?? ??? ??? ?<span slot="title">Page1</span>
?? ??? ?</el-menu-item>
?? ??? ?<el-menu-item index="/Page2" key="Page2">
?? ??? ??? ?<i class="el-icon-menu"></i>
?? ??? ??? ?<span slot="title">Page2</span>
?? ??? ?</el-menu-item> -->
? ? <el-submenu v-for="root in treenode" :index="'index-'+root.dictId" :key="'key-'+root.dictId">
? ? ? <template slot="title">
? ? ? ? <i :class="root.dictIcon"></i>
? ? ? ? <span slot="title">{{root.dictText}}</span>
? ? ? </template>
? ? ? <!-- 第二級(jí)菜單 -->
? ? ? <!--
?? ??? ??? ?el-menu-item屬性：
?? ??? ??? ?index：用于跳轉(zhuǎn)頁(yè)面，不能重復(fù)
?? ??? ??? ?key:菜單項(xiàng)的唯一標(biāo)識(shí)，不可重復(fù)
?? ??? ??? ? -->
?
? ? ? <el-menu-item @click="addTab(node.dictUrl,node.dictText)" v-for="node in root.children" :index="node.dictUrl"
? ? ? ? :key="'key-'+node.dictId">
? ? ? ? <i class="el-icon-menu"></i>
? ? ? ? <span slot="title">{{node.dictText}}</span>
? ? ? </el-menu-item>
? ? </el-submenu>
? </el-menu>
</template>
<script>
? export default {
? ? name: 'LeftAside',
? ? props: ['leftCollapsed'],
? ? data: function() {
? ? ? return {
? ? ? ? treenode: ''
? ? ? };
? ? },
? ? methods: {
? ? ? addTab: function(url, text) {
? ? ? ? console.log(url, text);
? ? ? ? //調(diào)用vuex中的addTab方法，將點(diǎn)擊的菜單對(duì)應(yīng)的組件信息添加到已打開的openTabs中
? ? ? ? this.$store.commit('addTab', {
? ? ? ? ? title: text, //Tab頁(yè)簽標(biāo)題
? ? ? ? ? name: url //組件的路由
? ? ? ? });
? ? ? ? //設(shè)置當(dāng)前Tab面板為選中狀態(tài)
? ? ? ? this.$store.commit('setTabActive', url);
? ? ? }
? ? },
? ? created() {
? ? ? //獲取請(qǐng)求路徑
? ? ? /* let url = this.axios.urls.SYSTEM_TREENODE; */
? ? ? let url = this.axios.urls.SYSTEM_QUERY;
? ? ? /* ?,{username:sessionStorage.getItem("username")} */
? ? ? console.log(url);
? ? ? //發(fā)送axios請(qǐng)求
? ? ? this.axios.post(url, {
? ? ? ? username: sessionStorage.getItem("username")
? ? ? }).then(resp => {
? ? ? ? console.log(resp.data);
? ? ? ? this.treenode = resp.data.data;
? ? ? }).catch(resp => {});
? ? ? //設(shè)置首頁(yè)默認(rèn)顯示
? ? ? // this.$router.push('/Home');
? ? }
? }
</script>

<template style="background-color:floralwhite">
?? ?<el-container class="main-container">
?? ??? ?<el-aside :class="openCollapse">
?? ??? ??? ?<LeftAside :open-collapsed="collapsed"></LeftAside>
?? ??? ?</el-aside>
? ? ? ? //選項(xiàng)卡控件
?? ??? ?<el-container>
?? ??? ??? ?<el-header class="main-header">
?? ??? ??? ??? ?<TopNav @click-collapse="topClick"></TopNav>
?? ??? ??? ?</el-header>
?? ??? ??? ?<el-main class="main-center">
?? ??? ??? ??? ?<el-tabs class="tabs-panel-fit" v-model="activeTab" type="border-card" closable @tab-remove="removeTab">
?? ??? ??? ??? ??? ?<el-tab-pane v-for="item in openTabs" :key="item.name" :label="item.title" :name="item.name">
?? ??? ??? ??? ??? ??? ?<component :is="item.content"></component>
?? ??? ??? ??? ??? ?</el-tab-pane>
?? ??? ??? ??? ?</el-tabs>
?? ??? ??? ?</el-main>
?
? ? ? ?//時(shí)鐘效果
? ? ? <div id="app" style="margin-left: 200px;margin-top: -400px;font-size: 30px;">
? ? ? ? ? {{date}}
? ? ? </div>
?? ??? ?</el-container>
?? ?</el-container>
</template>
?
<script>
?? ?import TopNav from '@/components/TopNav'
?? ?import LeftAside from '@/components/LeftAside'
?? ?export default {
?? ??? ?name: 'Main',
?? ??? ?data: function() {
?? ??? ??? ?return {
?? ??? ??? ??? ?collapsed: false,
? ? ? ? date: new Date()
?? ??? ??? ?};
?? ??? ?},
?? ??? ?methods: {
?? ??? ??? ?topClick: function(collapsed) {
?? ??? ??? ??? ?this.collapsed = collapsed;
?? ??? ??? ?},
?? ??? ??? ?removeTab: function(targetName) {
?? ??? ??? ??? ?//獲取所有已打開的Tabs選項(xiàng)卡
?? ??? ??? ??? ?let tabs = this.$store.getters.openTabs;
?? ??? ??? ??? ?//獲取當(dāng)前激活的Tab選項(xiàng)卡
?? ??? ??? ??? ?let activeName = this.$store.getters.activeTab;
?? ??? ??? ??? ?//判斷當(dāng)前激活的Tab選項(xiàng)卡和當(dāng)前被關(guān)閉的Tab選項(xiàng)卡是否相同
?? ??? ??? ??? ?if (activeName === targetName) {
?? ??? ??? ??? ??? ?//遍歷已打開的選項(xiàng)卡
?? ??? ??? ??? ??? ?tabs.forEach((tab, index) => {
?? ??? ??? ??? ??? ??? ?//判斷是否相同，并獲取就近需要被激活選項(xiàng)卡
?? ??? ??? ??? ??? ??? ?if (tab.name === targetName) {
?? ??? ??? ??? ??? ??? ??? ?let nextTab = tabs[index + 1] || tabs[index - 1];
?? ??? ??? ??? ??? ??? ??? ?if (nextTab) {
?? ??? ??? ??? ??? ??? ??? ??? ?activeName = nextTab.name;
?? ??? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?});
?? ??? ??? ??? ?}
?? ??? ??? ??? ?//激活選項(xiàng)卡
?? ??? ??? ??? ?this.$store.commit('setTabActive', activeName);
?? ??? ??? ??? ?//刪除Tab
?? ??? ??? ??? ?this.$store.commit('delTab', tabs.filter(tab => tab.name !== targetName));
?? ??? ??? ?}
?? ??? ?},
?? ??? ?components: {
?? ??? ??? ?TopNav,
?? ??? ??? ?LeftAside
?? ??? ?},
?? ??? ?computed: {//計(jì)算屬性
?? ??? ??? ?openCollapse: function() {
?? ??? ??? ??? ?return !this.collapsed ? 'main-aside' : 'main-aside-collapsed'
?? ??? ??? ?},
?? ??? ??? ?openTabs: function() {
?? ??? ??? ??? ?let openTabs = this.$store.getters.openTabs;
?? ??? ??? ??? ?let tabs = [];
?? ??? ??? ??? ?if (null == openTabs)
?? ??? ??? ??? ??? ?return tabs;
?? ??? ??? ??? ?else {
?? ??? ??? ??? ??? ?for (let tab of openTabs) {
?? ??? ??? ??? ??? ??? ?let component = resolve => require.ensure([], () => resolve(require('@/views' + tab.name + '.vue')));
?? ??? ??? ??? ??? ??? ?tabs.push({
?? ??? ??? ??? ??? ??? ??? ?title: tab.title,
?? ??? ??? ??? ??? ??? ??? ?name: tab.name,
?? ??? ??? ??? ??? ??? ??? ?content: component
?? ??? ??? ??? ??? ??? ?});
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?return tabs;
?? ??? ??? ??? ?}
?? ??? ??? ?},
?? ??? ??? ?activeTab: {
?? ??? ??? ??? ?get() {
?? ??? ??? ??? ??? ?return this.$store.getters.activeTab;
?? ??? ??? ??? ?},
?? ??? ??? ??? ?set(val) {
?? ??? ??? ??? ??? ?this.$store.commit('setTabActive', val);
?? ??? ??? ??? ?}
?? ??? ??? ?}
?? ??? ?},
? ? ? ? //展示時(shí)鐘的方法
?? ??? ?mounted() {//掛載完成
?? ??? ??? ?console.log(this.$route.path);
?? ??? ??? ?if (this.$route.path == '/Home') {
?? ??? ??? ??? ?this.$store.commit('addTab', {
?? ??? ??? ??? ??? ?title: '首頁(yè)',
?? ??? ??? ??? ??? ?name: '/Home'
?? ??? ??? ??? ?});
?? ??? ??? ??? ?this.$store.commit('setTabActive', '/Home');
?? ??? ??? ?}
?
? ? ? ?let _this = this; // 聲明一個(gè)變量指向Vue實(shí)例this，保證作用域一致
? ? ? ? ? this.timer = setInterval(() => {
? ? ? ? ? ? _this.date = new Date(); // 修改數(shù)據(jù)date
? ? ? ? ? }, 1000)
? ? ? ? },
? ? ? ? beforeDestroy() {
? ? ? ? ? if (this.timer) {
? ? ? ? ? ? clearInterval(this.timer); // 在Vue實(shí)例銷毀前，清除我們的定時(shí)器
? ? ? ? ? }
?? ??? ?}
?? ?}
</script>
?
<style>
?? ?.main-container {
?? ??? ?height: 100%;
?? ??? ?width: 100%;
?? ??? ?box-sizing: border-box;
?? ?}
?
?? ?.main-aside-collapsed {
?? ??? ?/* 在CSS中，通過(guò)對(duì)某一樣式聲明! important ，可以更改默認(rèn)的CSS樣式優(yōu)先級(jí)規(guī)則，使該條樣式屬性聲明具有最高優(yōu)先級(jí) */
?? ??? ?width: 64px !important;
?? ??? ?height: 100%;
?? ??? ?background-color: #334157;
?? ??? ?margin: 0px;
?? ?}
?
?? ?.main-aside {
?? ??? ?width: 240px !important;
?? ??? ?height: 100%;
?? ??? ?background-color: #334157;
?? ??? ?margin: 0px;
?? ?}
?
?? ?.main-header,
?? ?.main-center {
?? ??? ?padding: 0px;
?? ??? ?border-left: 2px solid #333;
?? ??? ?height: 100%;
?? ??? ?object-fit: fill;
?? ?}
?
?? ?.div-pagination {
?? ??? ?margin: 10px 0px;
?? ??? ?width: 100%;
?? ?}
?
?? ?/* 設(shè)置tabs內(nèi)容面板100%填充父容器 */
?? ?.tabs-panel-fit {
?? ??? ?margin: 0;
?? ??? ?padding: 0;
?? ??? ?/* background-color:#1F2D3D; */
?? ??? ?width: 100%;
?? ??? ?height: 100%;
?? ??? ?object-fit: fill;
?? ?}
?
?? ?/* 設(shè)置tabs內(nèi)容面板的內(nèi)邊距為0 */
?? ?.el-tabs--border-card>.el-tabs__content {
?? ??? ?padding: 0;
?? ?}
?
?? ?/* 設(shè)置tab的表框效果（重要） */
?? ?.el-tabs.el-tabs--border-card {
?? ??? ?box-shadow: none;
?? ??? ?border-bottom: none;
?? ??? ?border: 0;
?? ?}
?
?? ?/*設(shè)置選項(xiàng)卡中第一個(gè)首頁(yè)選項(xiàng)卡不能關(guān)閉*/
?? ?.el-tabs>.el-tabs__header .el-tabs__item:first-child>span {
?? ??? ?display: none;
?? ?}
?
?? ?/* elementUI dialog彈出框樣式優(yōu)化 */
?? ?.el-dialog {
?? ??? ?position: absolute;
?? ??? ?top: 50%;
?? ??? ?left: 50%;
?? ??? ?margin: 0 !important;
?? ??? ?transform: translate(-50%, -50%);
?? ??? ?max-height: calc(100% - 30px);
?? ??? ?max-width: calc(100% - 30px);
?? ??? ?display: flex;
?? ??? ?flex-direction: column;
?? ??? ?/* 圓角效果 */
?? ??? ?border-radius: 0.4em;
?? ?}
?
?? ?.el-dialog>.el-dialog__body {
?? ??? ?overflow: auto;
?? ?}
?
?? ?.el-dialog__header {
?? ??? ?background-color: #F5F7FA;
?? ??? ?border-bottom: 1px solid #ccc;
?? ??? ?font-size: 14px;
?? ??? ?font-weight: bold;
?? ??? ?padding: 15px 20px 15px;
?? ??? ?/* 圓角效果 */
?? ??? ?border-radius: 0.4em 0.4em 0em 0em;
?? ?}
?
?? ?.el-dialog__body {
?? ??? ?padding: 20px 15px;
?? ?}
?
?? ?.el-dialog__footer {
?? ??? ?background-color: #F5F7FA;
?? ??? ?border-top: 1px solid #ccc;
?? ??? ?padding: 15px;
?? ??? ?/* 圓角效果 */
?? ??? ?border-radius: 0em 0em 0.4em 0.4em;
?? ?}
?
?? ?.el-form>.el-form-item:last-child {
?? ??? ?margin-bottom: 0px;
?? ?}
?
?? ?/* 更改table表格的高亮背景色*/
?? ?/* .el-table tr.current-row>td {
?? ??? ?background: #FFF68F;
?? ?} */
?? ?.el-table .el-table__body tr:hover>td{
?? ??? ?background: #FFF68F;
?? ??? ?font-weight:bold;
?? ??? ?color:#000000;
?? ?}
?
?? ?/* 分頁(yè)組件 */
?? ?/* .div-pagination {
?? ??? ?margin: 10px 0px;
?? ??? ?width: 100%;
?? ?} */
</style>