2021-08-25 18:47:44 +08:00

89 lines
2.4 KiB
Vue

<template>
<div class="page-setting">
<PageTitle :title="$L(titleNameRoute)"/>
<div class="setting-head">
<div class="setting-titbox">
<div class="setting-title">
<h1>{{$L('设置')}}</h1>
</div>
</div>
</div>
<div class="setting-box">
<div class="setting-menu">
<ul>
<li
v-for="(item, key) in menu"
:key="key"
:class="classNameRoute(item.path, item.divided)"
@click="toggleRoute(item.path)">{{$L(item.name)}}</li>
</ul>
</div>
<div class="setting-content">
<div class="setting-content-title">{{$L(titleNameRoute)}}</div>
<div class="setting-content-view"><router-view class="setting-router-view"></router-view></div>
</div>
</div>
</div>
</template>
<script>
import {mapState} from "vuex";
export default {
data() {
return {
curPath: this.$route.path,
}
},
mounted() {
},
computed: {
...mapState(['userInfo', 'userIsAdmin']),
menu() {
let menu = [
{path: 'personal', name: '个人设置'},
{path: 'password', name: '密码设置'},
]
if (this.userIsAdmin) {
menu.push(...[
{path: 'system', name: '系统设置', divided: true},
{path: 'priority', name: '任务等级'},
])
}
return menu;
},
titleNameRoute() {
const {curPath, menu} = this;
let name = '';
menu.some((item) => {
if ($A.leftExists(curPath, '/manage/setting/' + item.path)) {
name = item.name;
return true;
}
})
return name || '设置';
}
},
watch: {
'$route' (route) {
this.curPath = route.path;
}
},
methods: {
toggleRoute(path) {
this.goForward({path: '/manage/setting/' + path});
},
classNameRoute(path, divided) {
return {
"active": $A.leftExists(this.curPath, '/manage/setting/' + path),
"divided": !!divided
};
},
}
}
</script>