|
|
@@ -1,232 +1,266 @@
|
|
|
<template>
|
|
|
- <el-container id="app">
|
|
|
- <el-aside :width="collapse ? '65px' : '200px'" class="aside">
|
|
|
- <div class="logo-wrapper">
|
|
|
- <img src="../assets/logo_baise.png" alt>
|
|
|
- </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>
|
|
|
- </el-aside>
|
|
|
- <el-container>
|
|
|
- <el-header class="header">
|
|
|
- <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-container id="app">
|
|
|
+ <el-aside :width="collapse ? '65px' : '200px'" class="aside">
|
|
|
+ <div class="logo-wrapper">
|
|
|
+ <img src="../assets/logo_baise.png" alt>
|
|
|
+ </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>
|
|
|
+ </el-aside>
|
|
|
+ <el-container>
|
|
|
+ <el-header class="header">
|
|
|
+ <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">
|
|
|
- <i class="fas fa-expand" style="font-size: 20px;"></i>
|
|
|
- </div>
|
|
|
- </el-tooltip>
|
|
|
-
|
|
|
- <el-dropdown @command="onCommand" style="margin-left: 20px;">
|
|
|
- <img :src="userInfo ? userInfo.icon || require('../assets/default-avatar.png') : require('../assets/default-avatar.png')" class="avatar"/>
|
|
|
- <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-container>
|
|
|
+ <el-tooltip
|
|
|
+ effect="dark"
|
|
|
+ :content="isFullscreen ? '退出全屏' : '全屏'"
|
|
|
+ placement="bottom"
|
|
|
+ :open-delay="1000"
|
|
|
+ >
|
|
|
+ <div class="header-btn" @click="toggleFullScreen" ref="fullscreen">
|
|
|
+ <i class="fas fa-expand" style="font-size: 20px;"></i>
|
|
|
+ </div>
|
|
|
+ </el-tooltip>
|
|
|
|
|
|
+ <el-dropdown @command="onCommand" style="margin-left: 20px;">
|
|
|
+ <img
|
|
|
+ :src="userInfo ? userInfo.icon || require('../assets/default-avatar.png') : require('../assets/default-avatar.png')"
|
|
|
+ class="avatar"
|
|
|
+ >
|
|
|
+ <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-container>
|
|
|
+ </el-container>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import SysMenu from '../components/SysMenu'
|
|
|
- import {mapState} from 'vuex'
|
|
|
-
|
|
|
- export default {
|
|
|
- name: 'App',
|
|
|
- created() {
|
|
|
- this.getMenus();
|
|
|
- let fn = () => {
|
|
|
- this.isFullscreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
|
|
|
+import SysMenu from "../components/SysMenu";
|
|
|
+import { mapState } from "vuex";
|
|
|
|
|
|
- };
|
|
|
- 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
|
|
|
+export default {
|
|
|
+ name: "App",
|
|
|
+ created() {
|
|
|
+ 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
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState(["userInfo"])
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ findActiveMenu() {
|
|
|
+ this.activeMenu = "";
|
|
|
+ this.menuPath = [];
|
|
|
+ let path = this.$route.path;
|
|
|
+ let pathWithParams = path;
|
|
|
+ let params = [];
|
|
|
+ for (let key in this.$route.query) {
|
|
|
+ params.push(key + "=" + this.$route.query[key]);
|
|
|
+ }
|
|
|
+ if (params.length) {
|
|
|
+ pathWithParams += "?" + params.join("&");
|
|
|
+ }
|
|
|
+ const findActiveMenu = (parents, childMenus) => {
|
|
|
+ childMenus.forEach(i => {
|
|
|
+ let parents_copy = [...parents];
|
|
|
+ if (
|
|
|
+ i.href === path ||
|
|
|
+ (i.href.indexOf("?") > -1 && i.href === pathWithParams)
|
|
|
+ ) {
|
|
|
+ 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);
|
|
|
}
|
|
|
- },
|
|
|
- computed: {
|
|
|
- ...mapState(['userInfo'])
|
|
|
- },
|
|
|
- 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
|
|
|
- }
|
|
|
- }).then(res => {
|
|
|
- if (res.success) {
|
|
|
- this.rawMenus = res.data;
|
|
|
- this.menus = res.data;
|
|
|
- this.findActiveMenu();
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- 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);
|
|
|
- }
|
|
|
- },
|
|
|
- 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');
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- 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();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ };
|
|
|
+ findActiveMenu([], this.rawMenus);
|
|
|
+ },
|
|
|
+ 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();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ 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);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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");
|
|
|
}
|
|
|
- },
|
|
|
- components: {
|
|
|
- SysMenu
|
|
|
- }
|
|
|
+ });
|
|
|
+ }
|
|
|
}
|
|
|
+ },
|
|
|
+ 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();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ SysMenu
|
|
|
+ }
|
|
|
+};
|
|
|
</script>
|
|
|
<style lang="less">
|
|
|
- .aside {
|
|
|
- .el-menu {
|
|
|
- border: none !important;
|
|
|
- &:not(.el-menu--collapse) {
|
|
|
- width: 200px;
|
|
|
- }
|
|
|
- }
|
|
|
+.aside {
|
|
|
+ .el-menu {
|
|
|
+ border: none !important;
|
|
|
+ &:not(.el-menu--collapse) {
|
|
|
+ width: 200px;
|
|
|
}
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
|
|
<style lang="less" scoped>
|
|
|
- #app {
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
+#app {
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
|
|
|
- .header {
|
|
|
- color: #303133;
|
|
|
- background: #fff;
|
|
|
- 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;
|
|
|
- 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%;
|
|
|
- }
|
|
|
- a {
|
|
|
- &:visited {
|
|
|
- color: #303133;
|
|
|
- }
|
|
|
- }
|
|
|
+.header {
|
|
|
+ color: #303133;
|
|
|
+ background: #fff;
|
|
|
+ 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;
|
|
|
+ transition: all 0.3s;
|
|
|
+ & > div {
|
|
|
+ transition: all 0.3s;
|
|
|
}
|
|
|
-
|
|
|
- .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;
|
|
|
- font-size: 20px;
|
|
|
- font-weight: 700;
|
|
|
- background: fade(black, 20%);
|
|
|
- }
|
|
|
+ &:hover {
|
|
|
+ background: fade(black, 10%);
|
|
|
}
|
|
|
-
|
|
|
- .aside::-webkit-scrollbar {
|
|
|
- display: none
|
|
|
+ }
|
|
|
+ .avatar {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ border: 1px solid #ebebeb;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ a {
|
|
|
+ &:visited {
|
|
|
+ color: #303133;
|
|
|
}
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.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;
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 700;
|
|
|
+ background: fade(black, 20%);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.aside::-webkit-scrollbar {
|
|
|
+ display: none;
|
|
|
+}
|
|
|
</style>
|
