|
@@ -1,17 +1,16 @@
|
|
|
-<!--<template>
|
|
|
|
|
|
|
+<template>
|
|
|
<aside class="sidebar" id="aside" :class="{ collapse: isMenuHidden }">
|
|
<aside class="sidebar" id="aside" :class="{ collapse: isMenuHidden }">
|
|
|
<nav class="menu" style="overflow:hidden;position: relative;">
|
|
<nav class="menu" style="overflow:hidden;position: relative;">
|
|
|
- <menu-list :items="menus" active-class/>
|
|
|
|
|
|
|
+ <menu-list :items="menus" active-class />
|
|
|
</nav>
|
|
</nav>
|
|
|
<footer class="footer">
|
|
<footer class="footer">
|
|
|
<a class="toggle icon-before icon-circle-left" title="Toggle navigation menu" @click="toggleMenu"></a>
|
|
<a class="toggle icon-before icon-circle-left" title="Toggle navigation menu" @click="toggleMenu"></a>
|
|
|
- <!–<router-link class="copyright" :to="{ name: 'about' }"> </router-link>–>
|
|
|
|
|
- <div class="copyright">©信息中心</div>
|
|
|
|
|
|
|
+ <router-link class="copyright" :to="{ name: 'about' }"> </router-link>
|
|
|
</footer>
|
|
</footer>
|
|
|
</aside>
|
|
</aside>
|
|
|
-</template>-->
|
|
|
|
|
|
|
+</template>
|
|
|
|
|
|
|
|
-<template>
|
|
|
|
|
|
|
+<!--<template>
|
|
|
<aside class="sidebar" id="aside" :class="{ collapse: isMenuHidden }">
|
|
<aside class="sidebar" id="aside" :class="{ collapse: isMenuHidden }">
|
|
|
<div style="height: calc(100vh - 75px); overflow-y: auto; overflow-x: hidden" class="test">
|
|
<div style="height: calc(100vh - 75px); overflow-y: auto; overflow-x: hidden" class="test">
|
|
|
<el-menu
|
|
<el-menu
|
|
@@ -37,7 +36,7 @@
|
|
|
</template>
|
|
</template>
|
|
|
<template v-if="item.children" v-for="sub in item.children" >
|
|
<template v-if="item.children" v-for="sub in item.children" >
|
|
|
<el-menu-item v-if="!sub.children" :index="sub.url" :key="sub.id">
|
|
<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>
|
|
<span slot="title">{{ sub.name }}</span>
|
|
|
</el-menu-item>
|
|
</el-menu-item>
|
|
|
<el-submenu v-if="sub.children" :index="sub.name" :key="sub.id">
|
|
<el-submenu v-if="sub.children" :index="sub.name" :key="sub.id">
|
|
@@ -61,134 +60,144 @@
|
|
|
<div v-if="!isCollapse" class="copyright">©大港油田信息中心</div>
|
|
<div v-if="!isCollapse" class="copyright">©大港油田信息中心</div>
|
|
|
</footer>
|
|
</footer>
|
|
|
</aside>
|
|
</aside>
|
|
|
-</template>
|
|
|
|
|
|
|
+</template> -->
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
<script>
|
|
|
-import Vue from 'vue'
|
|
|
|
|
-import { mapActions } from 'vuex'
|
|
|
|
|
-import Component, {Getter, namespace } from 'class-component'
|
|
|
|
|
-import MenuList from '@/components/MenuList'
|
|
|
|
|
|
|
+ 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)
|
|
|
|
|
|
|
+ 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
|
|
|
|
|
|
|
+ @Component({
|
|
|
|
|
+ components: {
|
|
|
|
|
+ MenuList
|
|
|
|
|
+ },
|
|
|
|
|
+ data() {
|
|
|
|
|
+ return {
|
|
|
|
|
+ isCollapse: false
|
|
|
}
|
|
}
|
|
|
- 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]]
|
|
|
|
|
|
|
+ },
|
|
|
|
|
+ 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
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
- nodes.push(data)
|
|
|
|
|
|
|
+ return false
|
|
|
}
|
|
}
|
|
|
- }
|
|
|
|
|
- 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
|
|
|
|
|
|
|
+ let nodes = []
|
|
|
|
|
+ // get the top level nodes
|
|
|
for (let i = 0; i < rows.length; i++) {
|
|
for (let i = 0; i < rows.length; i++) {
|
|
|
let row = rows[i]
|
|
let row = rows[i]
|
|
|
- if (row[pidFieldName] === node.id) {
|
|
|
|
|
- let child = {
|
|
|
|
|
|
|
+ if (!nodejsonexists(rows, row[pidFieldName])) {
|
|
|
|
|
+ var data = {
|
|
|
id: row[idFieldName]
|
|
id: row[idFieldName]
|
|
|
}
|
|
}
|
|
|
let arrFiled = fileds.split(',')
|
|
let arrFiled = fileds.split(',')
|
|
|
- for (let j = 0; j < arrFiled.length; j++) {
|
|
|
|
|
|
|
+ for (var j = 0; j < arrFiled.length; j++) {
|
|
|
if (arrFiled[j] !== idFieldName) {
|
|
if (arrFiled[j] !== idFieldName) {
|
|
|
- child[arrFiled[j]] = row[arrFiled[j]]
|
|
|
|
|
|
|
+ data[arrFiled[j]] = row[arrFiled[j]]
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
- if (node.children) {
|
|
|
|
|
- node.children.push(child)
|
|
|
|
|
- } else {
|
|
|
|
|
- node.children = [child]
|
|
|
|
|
|
|
+ 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)
|
|
|
}
|
|
}
|
|
|
- toDo.push(child)
|
|
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
+ return nodes
|
|
|
|
|
+ },
|
|
|
|
|
+ floderMenu() {
|
|
|
|
|
+ this.isCollapse = !this.isCollapse
|
|
|
|
|
+ this.toggleMenu()
|
|
|
}
|
|
}
|
|
|
- return nodes
|
|
|
|
|
},
|
|
},
|
|
|
- floderMenu() {
|
|
|
|
|
- this.isCollapse = !this.isCollapse
|
|
|
|
|
- this.toggleMenu()
|
|
|
|
|
|
|
+ watch: {
|
|
|
|
|
+ isMenuHidden: function (val) {
|
|
|
|
|
+ this.isCollapse = this.isMenuHidden
|
|
|
|
|
+ },
|
|
|
}
|
|
}
|
|
|
- },
|
|
|
|
|
- watch: {
|
|
|
|
|
- isMenuHidden: function (val) {
|
|
|
|
|
- this.isCollapse = this.isMenuHidden
|
|
|
|
|
- },
|
|
|
|
|
- }
|
|
|
|
|
-})
|
|
|
|
|
-export default class Sidebar extends Vue {
|
|
|
|
|
- @Getter isMenuHidden
|
|
|
|
|
- @MenuGetter menus
|
|
|
|
|
|
|
+ })
|
|
|
|
|
+ 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
|
|
|
|
|
|
|
+ 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)
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
- 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
|
|
|
|
|
+ })
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- //菜单多语言支持
|
|
|
|
|
- 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>
|
|
</script>
|
|
|
|
|
|
|
|
<style>
|
|
<style>
|
|
|
-.test::-webkit-scrollbar {
|
|
|
|
|
- opacity:0.5;
|
|
|
|
|
-}
|
|
|
|
|
|
|
+ .test::-webkit-scrollbar {
|
|
|
|
|
+ opacity: 0.5;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
.el-menu-vertical-demo:not(.el-menu--collapse) {
|
|
.el-menu-vertical-demo:not(.el-menu--collapse) {
|
|
|
width: 200px;
|
|
width: 200px;
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
</style>
|
|
</style>
|