131 lines
2.7 KiB
Vue
131 lines
2.7 KiB
Vue
<template>
|
||
<scroll-view class="sidebar" scroll-y="true">
|
||
<uni-data-menu ref="menu" :value="currentMenu" :staticMenu="staticMenu" collection="opendb-admin-menus"
|
||
:page-size="500" :field="field" where="enable==true" orderby="sort asc" active-text-color="#409eff" @select="select">
|
||
</uni-data-menu>
|
||
</scroll-view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
mapState,
|
||
mapActions
|
||
} from 'vuex'
|
||
import config from '@/admin.config.js'
|
||
export default {
|
||
data() {
|
||
return {
|
||
...config.sideBar,
|
||
field: 'url as value, name as text, menu_id, parent_id, sort, icon, permission',
|
||
currentMenu: '/'
|
||
}
|
||
},
|
||
computed: {
|
||
...mapState('app', ['inited', 'navMenu', 'active']),
|
||
userInfo () {
|
||
return this.$uniIdPagesStore.store.userInfo
|
||
}
|
||
},
|
||
|
||
watch: {
|
||
// #ifdef H5
|
||
$route: {
|
||
immediate: true,
|
||
handler(newRoute, oldRoute) {
|
||
const path = newRoute.fullPath
|
||
if (path) {
|
||
this.currentMenu = this.splitFullPath(path)
|
||
}
|
||
}
|
||
},
|
||
// #endif
|
||
userInfo: {
|
||
// immediate: true,
|
||
handler(newVal, oldVal) {
|
||
if (newVal) {
|
||
// 当用户信息发生变化后，重新加载左侧menu
|
||
this.$nextTick(function() {
|
||
this.$refs.menu.load()
|
||
})
|
||
}
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
...mapActions({
|
||
setRoutes: 'app/setRoutes'
|
||
}),
|
||
select(e, routes) {
|
||
let url = e.value
|
||
if (!url) {
|
||
url = this.active
|
||
}
|
||
this.clickMenuItem(url)
|
||
this.setRoutes(routes)
|
||
// #ifdef H5
|
||
// #ifdef VUE3
|
||
uni.hideLeftWindow()
|
||
// #endif
|
||
// #endif
|
||
},
|
||
clickMenuItem(url) {
|
||
// #ifdef H5
|
||
if (url.indexOf('http') === 0) {
|
||
return window.open(url)
|
||
}
|
||
// #endif
|
||
|
||
// url 开头可用有 / ，也可没有
|
||
if (url[0] !== '/' && url.indexOf('http') !== 0) {
|
||
url = '/' + url
|
||
}
|
||
// #ifndef H5
|
||
if (url === "/") {
|
||
url = config.index.url;
|
||
}
|
||
// #endif
|
||
// TODO 后续要调整
|
||
uni.redirectTo({
|
||
url: url,
|
||
fail: () => {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '页面 ' + url + ' 跳转失败',
|
||
showCancel: false
|
||
})
|
||
}
|
||
})
|
||
},
|
||
splitFullPath(path) {
|
||
if (!path) {
|
||
path = '/'
|
||
}
|
||
return path.split('?')[0]
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.sidebar {
|
||
position: fixed;
|
||
// top: var(--top-window-height); // useless
|
||
width: 240px;
|
||
height: calc(100vh - (var(--top-window-height)));
|
||
box-sizing: border-box;
|
||
border-right: 1px solid darken($left-window-bg-color, 8%);
|
||
background-color: $left-window-bg-color;
|
||
padding-bottom: 10px;
|
||
}
|
||
/* #ifdef H5 */
|
||
.sidebar ::-webkit-scrollbar {
|
||
display: none;
|
||
// scrollbar-width: thin;
|
||
}
|
||
/* #endif */
|
||
|
||
.title {
|
||
margin-left: 5px;
|
||
}
|
||
</style>
|