首页样式修改

src/main/vue/src/components/MenuItem.vue

@@ -81,7 +81,24 @@ export default {
                     return;
                 }
             } else {
+                console.log(this.menu)
                 this.$router.push(this.menu.href)
+                var loginHistory = this.$store.state.loginHistory
+                var isHave = false
+                loginHistory.forEach(item => {
+                    if (item.name == this.menu.href) {
+                        isHave = true
+                    }
+                });
+                if (!isHave) {
+                    loginHistory.push({
+                        name: this.menu.href,
+                        title: this.menu.name
+                    })
+                }
+
+                this.$store.commit('updateLoginHistory', loginHistory)
+                this.$store.commit('updateChooseLogin', this.menu.href)
             }
         }
     },

src/main/vue/src/pages/Admin.vue

@@ -1,23 +1,18 @@
 <template>
     <el-container id="app">
-        <el-aside class="aside">
-            <div class="logo-wrapper">Logo</div>
-            <!-- <el-menu :collapse="collapse" background-color="#324157" text-color="#BFCBD9" active-text-color="#20A0FF" :unique-opened="true" :router="true" :default-active="activeMenu" style="border-right: 1px solid #545c64" class="el-menu-vertical-demo">
-                <sys-menu v-for="item in menus" :menu="item" :key="item.id"></sys-menu>
-            </el-menu> -->
-            <nav-menu :menus="menus" :activeId="activeMenu" :collapse="collapse" :width="220" theme="#324157">
-            </nav-menu>
-        </el-aside>
-        <el-container>
-            <el-header class="header">
+        <el-header class="header" height='68px'>
+            <div class="logo-wrapper">
+                <img src="../assets/logo.png" alt="">
+            </div>
+                <div style="flex-grow: 1; margin-left: 20px;">
+                    <router-link :to="{name:'dashboard'}">牧业2.0系统</router-link>
+                </div>
+
                 <div class="header-btn" @click="collapse=!collapse">
                     <div :style="{transform: collapse ? 'rotate(90deg)' : ''}">
                         <i class="fas fa-bars" style="font-size: 20px;"></i>
                     </div>
                 </div>
-                <div style="flex-grow: 1; margin-left: 20px;">
-                    <router-link :to="{name:'dashboard'}">一个很厉害的后台管理</router-link>
-                </div>
 
                 <el-tooltip effect="dark" :content="isFullscreen ? '退出全屏' : '全屏'" placement="bottom" :open-delay="1000">
                     <div class="header-btn" @click="toggleFullScreen" ref="fullscreen">
@@ -26,200 +21,336 @@
                 </el-tooltip>
 
                 <el-dropdown @command="onCommand" style="margin-left: 20px;">
-                    <img :src="userInfo ? userInfo.icon || '' : ''" class="avatar"/>
+                    <!-- <img :src="userInfo ? userInfo.icon || '' : ''" class="avatar"/> -->
+                    <div class="header-btn">
+                        <div>
+                            <i class="fas fa-cog fa-fw" style="font-size: 20px;color:#fff"></i>
+                        </div>
+                    </div>
+
                     <el-dropdown-menu slot="dropdown">
                         <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                     </el-dropdown-menu>
                 </el-dropdown>
-            </el-header>
-            <el-main>
-                <router-view></router-view>
-            </el-main>
+        </el-header>
+        <el-container>
+            <el-aside class="aside">
+
+                <div class="userInfo" :style="{height:collapse?'100px':'220px'}">
+                    <img :style="{height:collapse?'30px':'70px',width:collapse?'30px':'70px'}" :src="userInfo ? userInfo.icon || '' : ''" class="avatar"/>
+                    <div v-if="!collapse" class="name">{{userInfo.username}}</div>
+                    <div v-if="!collapse" class="workNumber">{{userInfo.workNumber}}</div>
+                </div>
+
+                <!-- <el-menu :collapse="collapse" background-color="#324157" text-color="#BFCBD9" active-text-color="#20A0FF" :unique-opened="true" :router="true" :default-active="activeMenu" style="border-right: 1px solid #545c64" class="el-menu-vertical-demo">
+                <sys-menu v-for="item in menus" :menu="item" :key="item.id"></sys-menu>
+            </el-menu> -->
+                <nav-menu :menus="menus" :activeId="activeMenu" :collapse="collapse" :width="220" theme="#232E3B">
+                </nav-menu>
+            </el-aside>
+            <el-container style="background-color:#F2F4F5;">
+                <el-header height='40px' style='padding:0'>
+                    <el-tabs class="head-tabs" height='40px' v-model="editableTabsValue2" type="card" closable @tab-remove="removeTab" @tab-click="chooseOne">
+                        <el-tab-pane v-for="(item, index) in loginHistory" :key="item.name" :label="item.title" :name="item.name">
+
+                        </el-tab-pane>
+                    </el-tabs>
+                </el-header>
+                <el-main >
+
+                    <router-view></router-view>
+                </el-main>
+            </el-container>
         </el-container>
 
     </el-container>
 </template>
 
 <script>
-    import SysMenu from '../components/SysMenu'
-    import NavMenu from '../components/NavMenu'
-    import {mapState} from 'vuex'
+import SysMenu from '../components/SysMenu'
+import NavMenu from '../components/NavMenu'
+import { mapState } from 'vuex'
 
-    export default {
-        name: 'App',
-        mounted() {
-            this.getMenus();
-            let fn = () => {
-                this.isFullscreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
+export default {
+    name: 'App',
+    mounted() {
+        this.getMenus();
+        let fn = () => {
+            this.isFullscreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
 
+        };
+        document.addEventListener('fullscreenchange', fn);
+        document.addEventListener('webkitfullscreenchange', fn);
+        document.addEventListener('mozfullscreenchange', fn);
+        document.addEventListener('MSFullscreenChange', fn);
+    },
+    data() {
+        return {
+            rawMenus: [],
+            menus: [],
+            activeMenu: '',
+            menuPath: [],
+            collapse: false,
+            isFullscreen: false,
+            editableTabsValue2: '/dashboard',
+            flag: true
+        }
+    },
+    computed: {
+        ...mapState(['userInfo', 'loginHistory', 'chooseLogin'])
+    },
+    methods: {
+        findActiveMenu() {
+            var list = [...this.loginHistory]
+            this.activeMenu = '';
+            this.menuPath = [];
+            let path = this.$route.path;
+            const findActiveMenu = (parents, childMenus) => {
+                childMenus.forEach(i => {
+                    let parents_copy = [...parents];
+                    if (i.href === path) {
+                        parents_copy.push(i);
+                        this.menuPath = parents_copy.map(i => i.name);
+                        this.activeMenu = i.id;
+                        if (this.flag) {
+                            var flag = false
+                            list.forEach(item => {
+                                if (item.name == i.href) {
+                                    flag = true
+                                }
+                            })
+                            if (!flag) {
+                                list.push({
+                                    name: i.href,
+                                    title: i.name
+                                })
+                                this.$store.commit('updateLoginHistory', list)
+                                this.editableTabsValue2 = i.href
+                            }
+
+                        }
+
+
+                    } else {
+                        if (i.children) {
+                            parents_copy.push(i);
+                            findActiveMenu(parents_copy, i.children);
+                        }
+                    }
+                })
             };
-            document.addEventListener('fullscreenchange', fn);
-            document.addEventListener('webkitfullscreenchange', fn);
-            document.addEventListener('mozfullscreenchange', fn);
-            document.addEventListener('MSFullscreenChange', fn);
+            findActiveMenu([], this.rawMenus);
         },
-        data() {
-            return {
-                rawMenus: [],
-                menus: [],
-                activeMenu: '',
-                menuPath: [],
-                collapse: false,
-                isFullscreen: false
-            }
+        getMenus() {
+            this.$http.get({
+                url: '/sysMenu/userMenuTree',
+                data: {
+                    userId: this.userInfo.id
+                }
+            }).then(res => {
+                if (res.success) {
+                    this.rawMenus = res.data;
+                    this.menus = res.data;
+                    this.findActiveMenu();
+                }
+            })
         },
-        computed: {
-            ...mapState(['userInfo'])
+        toggleFullScreen() {
+            this.isFullscreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
+            let element = document.body;
+            let requestMethod;
+            if (this.isFullscreen) {
+                requestMethod = document.exitFullscreen || document.mozCancelFullScreen || document.webkitExitFullscreen;
+            } else {
+                requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;
+            }
+            if (requestMethod) {
+                requestMethod.call(this.isFullscreen ? document : element);
+            }
         },
-        methods: {
-            findActiveMenu() {
-                this.activeMenu = '';
-                this.menuPath = [];
-                let path = this.$route.path;
-                const findActiveMenu = (parents, childMenus) => {
-                    childMenus.forEach(i => {
-                        let parents_copy = [...parents];
-                        if (i.href === path) {
-                            parents_copy.push(i);
-                            this.menuPath = parents_copy.map(i => i.name);
-                            this.activeMenu = i.id;
-                        } else {
-                            if (i.children) {
-                                parents_copy.push(i);
-                                findActiveMenu(parents_copy, i.children);
-                            }
-                        }
-                    })
-                };
-                findActiveMenu([], this.rawMenus);
-            },
-            getMenus() {
-                this.$http.get({
-                    url: '/sysMenu/userMenuTree',
-                    data: {
-                        userId: this.userInfo.id
-                    }
+        onCommand(command) {
+            if (command === 'logout') {
+                this.$http.post({
+                    url: '/auth/logout'
                 }).then(res => {
                     if (res.success) {
-                        this.rawMenus = res.data;
-                        this.menus = res.data;
-                        this.findActiveMenu();
+                        this.$store.commit('updateUserInfo', null);
+                        this.$router.replace('/login');
                     }
                 })
-            },
-            toggleFullScreen() {
-                this.isFullscreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
-                let element = document.body;
-                let requestMethod;
-                if (this.isFullscreen) {
-                    requestMethod = document.exitFullscreen || document.mozCancelFullScreen || document.webkitExitFullscreen;
-                } else {
-                    requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;
-                }
-                if (requestMethod) {
-                    requestMethod.call(this.isFullscreen ? document : element);
+            }
+        },
+        removeTab(temp) {
+            console.log(temp)
+            var list = [...this.loginHistory]
+
+            list.forEach((item, index) => {
+                if (item.name == temp) {
+                    list.splice(index, 1)
                 }
-            },
-            onCommand(command) {
-                if (command === 'logout') {
-                    this.$http.post({
-                        url: '/auth/logout'
-                    }).then(res => {
-                        if (res.success) {
-                            this.$store.commit('updateUserInfo', null);
-                            this.$router.replace('/login');
-                        }
+            })
+
+            if (list.length == 0) {
+                list.push({
+                    name: '/dashboard',
+                    title: '首页'
+                })
+            }
+
+
+            this.$store.commit('updateLoginHistory', list)
+            setTimeout(() => {
+                if (temp == this.editableTabsValue2) {
+
+                    this.$router.push({
+                        path: list[0].name
                     })
+                    this.$store.commit('updateChooseLogin', list[0].name)
+
                 }
-            }
+
+            }, 100);
         },
-        watch: {
-            $route(val) {
-                this.findActiveMenu(this.rawMenus);
-            },
-            isFullscreen(val) {
-                this.$refs.fullscreen.innerHTML = '';
-                let i = document.createElement('i');
-                i.style.fontSize = '20px';
-                i.className = val ? 'fas fa-compress' : 'fas fa-expand';
-                this.$refs.fullscreen.append(i);
-                FontAwesome.dom.i2svg();
-            }
+        chooseOne(item) {
+            this.$router.push({
+                path: item.name
+            })
+            this.editableTabsValue2 = item.name
+        }
+    },
+    watch: {
+        $route(val) {
+            this.findActiveMenu(this.rawMenus);
+            this.flag = false
         },
-        components: {
-            SysMenu,
-            NavMenu
+        isFullscreen(val) {
+            this.$refs.fullscreen.innerHTML = '';
+            let i = document.createElement('i');
+            i.style.fontSize = '20px';
+            i.className = val ? 'fas fa-compress' : 'fas fa-expand';
+            this.$refs.fullscreen.append(i);
+            FontAwesome.dom.i2svg();
+        },
+        chooseLogin() {
+            if (this.chooseLogin) {
+                this.editableTabsValue2 = this.chooseLogin
+            }
         }
+    },
+    components: {
+        SysMenu,
+        NavMenu
     }
+}
 </script>
 <style lang="less">
-    .aside {
-        width: auto !important;
-        .el-menu {
-            border: none !important;
-            &:not(.el-menu--collapse) {
-                width: 200px;
-            }
+.aside {
+    width: auto !important;
+    .el-menu {
+        border: none !important;
+        &:not(.el-menu--collapse) {
+            width: 200px;
         }
     }
+}
 </style>
 <style lang="less" scoped>
-    #app {
-        height: 100%;
+#app {
+    height: 100%;
+}
+
+.header {
+    color: #fff;
+    background-color: #0096e0;
+    display: flex;
+    align-items: center;
+    padding-left: 0;
+    // border-bottom: 1px solid #dcdfe6;
+    height: 68px;
+
+    .logo-wrapper {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        min-width: 220px;
+        color: white;
+        font-size: 20px;
+        font-weight: 700;
+        // background: fade(black, 20%);
+        background-color: #0096e0;
+        display: flex;
+        align-items: center;
+        img {
+            width: 162px;
+            height: 48px;
+        }
     }
 
-    .header {
-        color: #303133;
-        background: #fff;
+    .header-btn {
+        width: 60px;
+        height: 68px;
         display: flex;
         align-items: center;
-        padding-left: 0;
-        border-bottom: 1px solid #dcdfe6;
-        .header-btn {
-            width: 60px;
-            height: 60px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            cursor: pointer;
+        justify-content: center;
+        cursor: pointer;
+        transition: all 0.3s;
+        & > div {
             transition: all 0.3s;
-            & > div {
-                transition: all 0.3s;
-            }
-            &:hover {
-                background: fade(black, 10%);
-            }
         }
-        .avatar {
-            width: 40px;
-            height: 40px;
-            border: 1px solid #ebebeb;
-            border-radius: 50%;
+        &:hover {
+            background: fade(black, 10%);
         }
-        a {
-            &:visited {
-                color: #303133;
-            }
+    }
+    .avatar {
+        width: 40px;
+        height: 40px;
+        border: 1px solid #ebebeb;
+        border-radius: 50%;
+    }
+    a {
+        &:visited {
+            color: #fff;
+            font-weight: bold;
         }
     }
+}
+
+.aside {
+    background: #232e3b;
+    transition: all 0.4s ease;
+    -ms-overflow-style: none;
 
-    .aside {
-        background: #324157;
-        transition: all 0.4s ease;
-        -ms-overflow-style: none;
-        .logo-wrapper {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            height: 60px;
-            color: white;
+    .userInfo {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        height: 220px;
+        img {
+            width: 70px;
+            height: 70px;
+            border-radius: 100%;
+            margin-top: 20px;
+        }
+
+        .name {
             font-size: 20px;
-            font-weight: 700;
-            background: fade(black, 20%);
+            font-weight: 500;
+            color: rgba(255, 255, 255, 1);
+            line-height: 28px;
+            margin-top: 12px;
         }
-    }
 
-    .aside::-webkit-scrollbar {
-        display: none;
+        .workNumber {
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 1);
+            line-height: 20px;
+        }
     }
+}
+
+.aside::-webkit-scrollbar {
+    display: none;
+}
 </style>

src/main/vue/src/pages/Login.vue

@@ -89,7 +89,7 @@
             color: #20a0ff;
             font-weight: bold;
             width: 350px;
-            line-height: 60px;
+            line-height: 68px;
         }
     }
 </style>

src/main/vue/src/vuex/index.js

@@ -8,7 +8,12 @@ export default new Vuex.Store({
         tableHeight: 0,
         fetchingData: false,
         userInfo: null,
-        farmName: '金山'
+        farmName: '金山',
+        loginHistory: [{
+            name: '/dashboard',
+            title: '首页'
+        }],
+        chooseLogin: 'dashboard'
     },
     mutations: {
         updateTableHeight(state, height) {
@@ -19,7 +24,14 @@ export default new Vuex.Store({
         },
         updateUserInfo(state, userInfo) {
             state.userInfo = userInfo
+        },
+        updateLoginHistory(state, list) {
+            state.loginHistory = list
+        },
+        updateChooseLogin(state, name) {
+            state.chooseLogin = name
         }
     },
     actions: {}
-});
+})
+;