|
|
@@ -1,26 +1,35 @@
|
|
|
<template>
|
|
|
<aside class="sidebar-container sidebar" id="aside" :class="{ collapse: isMenuHidden }">
|
|
|
<el-scrollbar style="height: calc(100vh - 75px); overflow: hidden;" wrap-class="scrollbar-wrapper">
|
|
|
- <el-menu :collapse="isCollapse" :router="true" default-active="/" :collapse-transition="false">
|
|
|
+ <el-menu
|
|
|
+ :collapse="isCollapse"
|
|
|
+ :router="true"
|
|
|
+ default-active="/"
|
|
|
+ background-color="#004EA2"
|
|
|
+ text-color="#fff"
|
|
|
+ active-text-color="#312520"
|
|
|
+ :collapse-transition="false"
|
|
|
+
|
|
|
+ >
|
|
|
<template v-for="(item, index) in menus">
|
|
|
<el-menu-item v-if="!item.children" :index="item.url" :key="item.id">
|
|
|
- <i :class="'icon-before icon-'+item.icon" style="padding-top: 5px; margin-right: 15px;"></i>
|
|
|
+ <i :class="'icon-before icon-'+item.icon" style="padding-top: 5px; margin-right: 10px; color: #fff"></i>
|
|
|
<span slot="title">{{ item.name }}</span>
|
|
|
</el-menu-item>
|
|
|
|
|
|
<el-submenu v-if="item.children" :index="item.name" :key="item.id" class="">
|
|
|
<template slot="title">
|
|
|
- <i :class="'icon-before icon-'+item.icon" style="padding-top: 5px; margin-right: 15px;"></i>
|
|
|
+ <i :class="'icon-before icon-'+item.icon" style="padding-top: 5px; margin-right: 10px; color: #fff"></i>
|
|
|
<span slot="title">{{ item.name }}</span>
|
|
|
</template>
|
|
|
- <template v-if="item.children" v-for="sub in item.children">
|
|
|
- <el-menu-item v-if="!sub.children" :index="sub.url" :key="sub.id">
|
|
|
- <i style="padding-top: 5px; margin-right: 15px;"></i>
|
|
|
+ <template v-if="item.children" v-for="sub in item.children" >
|
|
|
+ <el-menu-item v-if="!sub.children" :index="sub.url" :key="sub.id">
|
|
|
+ <!--<i :class="'icon-before icon-'+sub.icon" style="padding-top: 5px; margin-right: 10px;"></i>-->
|
|
|
<span slot="title">{{ sub.name }}</span>
|
|
|
</el-menu-item>
|
|
|
<el-submenu v-if="sub.children" :index="sub.name" :key="sub.id">
|
|
|
<template slot="title">
|
|
|
- <i :class="'icon-before icon-'+sub.icon" style="padding-top: 5px; margin-right: 15px;"></i>
|
|
|
+ <i :class="'icon-before icon-'+sub.icon" style="padding-top: 5px; margin-right: 10px; color: #fff"></i>
|
|
|
<span slot="title">{{ sub.name }}</span>
|
|
|
</template>
|
|
|
<el-menu-item v-for="sub2 in sub.children" :index="sub2.url" :key="sub2.id">
|
|
|
@@ -35,146 +44,136 @@
|
|
|
</el-scrollbar>
|
|
|
|
|
|
<footer class="footer">
|
|
|
- <el-button size="mini" type="text" icon="icon-before icon-circle-right" circle v-if="isCollapse == true"
|
|
|
- @click="floderMenu"></el-button>
|
|
|
- <el-button size="mini" type="text" icon="icon-before icon-circle-left" circle v-if="isCollapse == false"
|
|
|
- @click="floderMenu"></el-button>
|
|
|
- <div v-if="!isCollapse" class="copyright">©大数华创</div>
|
|
|
+ <el-button size="mini" type="text" icon="icon-before icon-circle-right" circle v-if="isCollapse == true" @click="floderMenu"></el-button>
|
|
|
+ <el-button size="mini" type="text" icon="icon-before icon-circle-left" circle v-if="isCollapse == false" @click="floderMenu"></el-button>
|
|
|
+ <div v-if="!isCollapse" class="copyright">大数华创 DASHOO</div>
|
|
|
</footer>
|
|
|
</aside>
|
|
|
</template>
|
|
|
|
|
|
|
|
|
<script>
|
|
|
- import Vue from 'vue'
|
|
|
- import {
|
|
|
- mapActions
|
|
|
- } from 'vuex'
|
|
|
- import Component, {
|
|
|
- Getter,
|
|
|
- namespace
|
|
|
- } from 'class-component'
|
|
|
- import MenuList from '@/components/MenuList'
|
|
|
-
|
|
|
- const MenuGetter = namespace('menu', Getter)
|
|
|
-
|
|
|
- @Component({
|
|
|
- components: {
|
|
|
- MenuList
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- isCollapse: false
|
|
|
+import Vue from 'vue'
|
|
|
+import { mapActions } from 'vuex'
|
|
|
+import Component, {Getter, namespace } from 'class-component'
|
|
|
+import MenuList from '@/components/MenuList'
|
|
|
+
|
|
|
+const MenuGetter = namespace('menu', Getter)
|
|
|
+
|
|
|
+@Component({
|
|
|
+ components: {
|
|
|
+ MenuList
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ isCollapse: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ ...mapActions(['toggleMenu']),
|
|
|
+ toolfun_gettreejson(rows, idFieldName, pidFieldName, fileds) {
|
|
|
+ // 工具方法，将扁平数据转化成tree格式数据
|
|
|
+ function nodejsonexists(rows, ParentId) {
|
|
|
+ for (var i = 0; i < rows.length; i++) {
|
|
|
+ if (rows[i][idFieldName] === ParentId) {
|
|
|
+ return true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return false
|
|
|
}
|
|
|
- },
|
|
|
- methods: {
|
|
|
- ...mapActions(['toggleMenu']),
|
|
|
- toolfun_gettreejson(rows, idFieldName, pidFieldName, fileds) {
|
|
|
- // 工具方法，将扁平数据转化成tree格式数据
|
|
|
- function nodejsonexists(rows, ParentId) {
|
|
|
- for (var i = 0; i < rows.length; i++) {
|
|
|
- if (rows[i][idFieldName] === ParentId) {
|
|
|
- return true
|
|
|
+ let nodes = []
|
|
|
+ // get the top level nodes
|
|
|
+ for (let i = 0; i < rows.length; i++) {
|
|
|
+ let row = rows[i]
|
|
|
+ if (!nodejsonexists(rows, row[pidFieldName])) {
|
|
|
+ var data = {
|
|
|
+ id: row[idFieldName]
|
|
|
+ }
|
|
|
+ let arrFiled = fileds.split(',')
|
|
|
+ for (var j = 0; j < arrFiled.length; j++) {
|
|
|
+ if (arrFiled[j] !== idFieldName) {
|
|
|
+ data[arrFiled[j]] = row[arrFiled[j]]
|
|
|
}
|
|
|
}
|
|
|
- return false
|
|
|
+ nodes.push(data)
|
|
|
}
|
|
|
- let nodes = []
|
|
|
- // get the top level nodes
|
|
|
+ }
|
|
|
+ let toDo = []
|
|
|
+ for (let i = 0; i < nodes.length; i++) {
|
|
|
+ toDo.push(nodes[i])
|
|
|
+ }
|
|
|
+ while (toDo.length) {
|
|
|
+ let node = toDo.shift() // the parent node
|
|
|
+ // get the children nodes
|
|
|
for (let i = 0; i < rows.length; i++) {
|
|
|
let row = rows[i]
|
|
|
- if (!nodejsonexists(rows, row[pidFieldName])) {
|
|
|
- var data = {
|
|
|
+ if (row[pidFieldName] === node.id) {
|
|
|
+ let child = {
|
|
|
id: row[idFieldName]
|
|
|
}
|
|
|
let arrFiled = fileds.split(',')
|
|
|
- for (var j = 0; j < arrFiled.length; j++) {
|
|
|
+ for (let j = 0; j < arrFiled.length; j++) {
|
|
|
if (arrFiled[j] !== idFieldName) {
|
|
|
- data[arrFiled[j]] = row[arrFiled[j]]
|
|
|
+ child[arrFiled[j]] = row[arrFiled[j]]
|
|
|
}
|
|
|
}
|
|
|
- nodes.push(data)
|
|
|
- }
|
|
|
- }
|
|
|
- let toDo = []
|
|
|
- for (let i = 0; i < nodes.length; i++) {
|
|
|
- toDo.push(nodes[i])
|
|
|
- }
|
|
|
- while (toDo.length) {
|
|
|
- let node = toDo.shift() // the parent node
|
|
|
- // get the children nodes
|
|
|
- for (let i = 0; i < rows.length; i++) {
|
|
|
- let row = rows[i]
|
|
|
- if (row[pidFieldName] === node.id) {
|
|
|
- let child = {
|
|
|
- id: row[idFieldName]
|
|
|
- }
|
|
|
- let arrFiled = fileds.split(',')
|
|
|
- for (let j = 0; j < arrFiled.length; j++) {
|
|
|
- if (arrFiled[j] !== idFieldName) {
|
|
|
- child[arrFiled[j]] = row[arrFiled[j]]
|
|
|
- }
|
|
|
- }
|
|
|
- if (node.children) {
|
|
|
- node.children.push(child)
|
|
|
- } else {
|
|
|
- node.children = [child]
|
|
|
- }
|
|
|
- toDo.push(child)
|
|
|
+ if (node.children) {
|
|
|
+ node.children.push(child)
|
|
|
+ } else {
|
|
|
+ node.children = [child]
|
|
|
}
|
|
|
+ toDo.push(child)
|
|
|
}
|
|
|
}
|
|
|
- return nodes
|
|
|
- },
|
|
|
- floderMenu() {
|
|
|
- this.isCollapse = !this.isCollapse
|
|
|
- this.toggleMenu()
|
|
|
}
|
|
|
+ return nodes
|
|
|
},
|
|
|
- watch: {
|
|
|
- isMenuHidden: function (val) {
|
|
|
- this.isCollapse = this.isMenuHidden
|
|
|
- },
|
|
|
+ floderMenu() {
|
|
|
+ this.isCollapse = !this.isCollapse
|
|
|
+ this.toggleMenu()
|
|
|
}
|
|
|
- })
|
|
|
- export default class Sidebar extends Vue {
|
|
|
- @Getter isMenuHidden
|
|
|
- @MenuGetter menus
|
|
|
-
|
|
|
- async beforeMount() {
|
|
|
- // 暂时从本地取菜单
|
|
|
- let {
|
|
|
- data: menus1
|
|
|
- } = await this.$axios.get('users/getusermoduletree')
|
|
|
- let menus = this.toolfun_gettreejson(menus1, 'id', 'pId', 'id,name,url,icon')
|
|
|
- if (menus[0].id == '30000000') {
|
|
|
- menus = menus[0].children
|
|
|
- }
|
|
|
- window.menusjson = menus
|
|
|
- if (Array.isArray(menus) && menus.length) {
|
|
|
- // 暂时菜单不加多语言处理
|
|
|
- // this.$store.dispatch('menu/addAll', this.translateMenus(menus))
|
|
|
- this.$store.dispatch('menu/addAll', menus)
|
|
|
- }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ isMenuHidden: function (val) {
|
|
|
+ this.isCollapse = this.isMenuHidden
|
|
|
+ },
|
|
|
+ }
|
|
|
+})
|
|
|
+export default class Sidebar extends Vue {
|
|
|
+ @Getter isMenuHidden
|
|
|
+ @MenuGetter menus
|
|
|
+
|
|
|
+ async beforeMount () {
|
|
|
+ // 暂时从本地取菜单
|
|
|
+ let {data: menus1} = await this.$axios.get('users/getusermoduletree')
|
|
|
+ let menus = this.toolfun_gettreejson(menus1, 'id', 'pId', 'id,name,url,icon')
|
|
|
+ if (menus[0].id == '30000000') {
|
|
|
+ menus = menus[0].children
|
|
|
}
|
|
|
-
|
|
|
- //菜单多语言支持
|
|
|
- translateMenus(menus) {
|
|
|
- return menus.map((menu) => {
|
|
|
- const subMenus = menu.children
|
|
|
- if (Array.isArray(subMenus) && subMenus.length) {
|
|
|
- this.translateMenus(subMenus)
|
|
|
- }
|
|
|
- menu.name = this.$t(menu.name + '' || '')
|
|
|
- return menu
|
|
|
- })
|
|
|
+ window.menusjson = menus
|
|
|
+ if (Array.isArray(menus) && menus.length) {
|
|
|
+ // 暂时菜单不加多语言处理
|
|
|
+ // this.$store.dispatch('menu/addAll', this.translateMenus(menus))
|
|
|
+ this.$store.dispatch('menu/addAll', menus)
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ //菜单多语言支持
|
|
|
+ translateMenus (menus) {
|
|
|
+ return menus.map((menu) => {
|
|
|
+ const subMenus = menu.children
|
|
|
+ if (Array.isArray(subMenus) && subMenus.length) {
|
|
|
+ this.translateMenus(subMenus)
|
|
|
+ }
|
|
|
+ menu.name = this.$t(menu.name + '' || '')
|
|
|
+ return menu
|
|
|
+ })
|
|
|
+ }
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
- // base color
|
|
|
+
|
|
|
$blue:#324157;
|
|
|
$light-blue:#3A71A8;
|
|
|
$red:#C03639;
|
|
|
@@ -189,24 +188,16 @@
|
|
|
$menuActiveText:#409EFF;
|
|
|
$subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951*/
|
|
|
|
|
|
- $menuBg:#E6F7FF;
|
|
|
- $menuHover:#ECF5FF;
|
|
|
+ $menuBg:#004EA2;
|
|
|
+ $menuHover:#004EA2;
|
|
|
|
|
|
- $subMenuBg:#E6F7FF;
|
|
|
- $subMenuHover:#ECF5FF;
|
|
|
+ $subMenuBg:#004EA2;
|
|
|
+ $subMenuHover:#004EA2;
|
|
|
|
|
|
$sideBarWidth: 200px;
|
|
|
|
|
|
// 侧边栏 Sidebar container
|
|
|
.sidebar-container {
|
|
|
- /*transition: width 0.28s;
|
|
|
- width: $sideBarWidth !important;
|
|
|
- height: 100%;
|
|
|
- position: fixed;
|
|
|
- font-size: 0px;
|
|
|
- top: 0;
|
|
|
- bottom: 0;
|
|
|
- left: 0;*/
|
|
|
z-index: 1001;
|
|
|
overflow: hidden;
|
|
|
|
|
|
@@ -257,17 +248,16 @@
|
|
|
width: 100% !important;
|
|
|
}
|
|
|
|
|
|
- // menu hover
|
|
|
.submenu-title-noDropdown,
|
|
|
- .el-submenu__title {
|
|
|
- &:hover {
|
|
|
- background-color: $menuHover !important;
|
|
|
- }
|
|
|
- }
|
|
|
+
|
|
|
+ // .el-submenu__title {
|
|
|
+ // &:hover {
|
|
|
+ // background-color: $menuHover !important;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
|
|
|
//self-defined
|
|
|
- .el-menu-item,
|
|
|
- .el-submenu__title {
|
|
|
+ .el-menu-item, .el-submenu__title {
|
|
|
height: 40px;
|
|
|
line-height: 40px;
|
|
|
}
|
|
|
@@ -284,6 +274,9 @@
|
|
|
&:hover {
|
|
|
background-color: $subMenuHover !important;
|
|
|
}
|
|
|
+ // &:focus {
|
|
|
+ // background-color: #F0F1F3 !important;
|
|
|
+ // }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -327,6 +320,9 @@
|
|
|
display: none;
|
|
|
}
|
|
|
}
|
|
|
+ // &:focus {
|
|
|
+ // background-color: #F0F1F3 !important;
|
|
|
+ // }
|
|
|
}
|
|
|
|
|
|
.el-menu--collapse {
|
|
|
@@ -340,6 +336,9 @@
|
|
|
display: inline-block;
|
|
|
}
|
|
|
}
|
|
|
+ //&:focus {
|
|
|
+ // background-color: #F0F1F3 !important;
|
|
|
+ // }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -378,25 +377,26 @@
|
|
|
|
|
|
// when menu collapsed
|
|
|
.el-menu--vertical {
|
|
|
- &>.el-menu {
|
|
|
+ & > .el-menu {
|
|
|
.svg-icon {
|
|
|
margin-right: 16px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .nest-menu .el-submenu>.el-submenu__title,
|
|
|
+ .nest-menu .el-submenu > .el-submenu__title,
|
|
|
.el-menu-item {
|
|
|
height: 30px;
|
|
|
line-height: 30px;
|
|
|
-
|
|
|
&:hover {
|
|
|
- // you can use $subMenuHover
|
|
|
background-color: $menuHover !important;
|
|
|
}
|
|
|
+ // &:focus {
|
|
|
+ // background-color: #F0F1F3 !important;
|
|
|
+ // }
|
|
|
}
|
|
|
|
|
|
// the scroll bar appears when the subMenu is too long
|
|
|
- >.el-menu--popup {
|
|
|
+ > .el-menu--popup {
|
|
|
max-height: 100vh;
|
|
|
overflow-y: auto;
|
|
|
|
shihang
