nebula/pages/admin.vue

227 lines
5.8 KiB
Vue
Raw Permalink Normal View History

<template>
<el-row type="flex" justify="center" :gutter="8">
<el-col v-if="hasPermissions" :span="20">
<el-col :span="4" v-if="menus">
<el-menu
:default-active="activeMenu"
class="el-menu-vertical-demo"
@select="handleSelectMenu">
2022-03-03 11:26:42 +08:00
<template v-for="menu in menus">
<el-menu-item v-if="!(menu.isEdit)||false" :key="menu.name" :index="menu.name">
2022-03-03 11:26:42 +08:00
<i :class="menu.icon"></i>
<span slot="title">{{ menu.title }}</span>
</el-menu-item>
</template>
</el-menu>
</el-col>
<el-col :span="20">
2024-02-19 18:39:37 +08:00
<el-card>
<el-row>
<el-tabs :value="editableTabsValue" type="card" @tab-remove="handleRemoveTab" @tab-click="handleClick">
<el-tab-pane
:key="item.name"
v-for="(item, index) in editableTabs"
:label="item.title"
:name="item.name"
:closable="item.closable">
</el-tab-pane>
</el-tabs>
</el-row>
<el-row>
2022-11-25 15:12:19 +08:00
<nuxt-child keep-alive
:keep-alive-props="{include: editableTabs}"/>
2024-02-19 18:39:37 +08:00
</el-row>
</el-card>
</el-col>
</el-col>
<el-col v-else class="text-center">
<el-alert
title="用户无权限"
type="warning"
center
show-icon
:closable="false">
</el-alert>
</el-col>
</el-row>
</template>
<script>
2022-03-03 11:26:42 +08:00
import _ from 'lodash'
import {mapState} from 'vuex';
2022-03-03 11:26:42 +08:00
export default {
name: "Admin",
2022-10-27 23:22:46 +08:00
middleware: 'auth',
2022-03-03 11:26:42 +08:00
data() {
return {
menus: [
{
title: 'Dashboard',
name: 'admin-dashboard',
path: '/admin/dashboard',
icon: 'el-icon-s-data',
closable: false
},
{
title: '文章管理',
name: 'admin-articles',
path: '/admin/articles',
icon: 'el-icon-tickets',
2022-03-03 11:26:42 +08:00
closable: true
},
{
title: '评论管理',
name: 'admin-comments',
path: '/admin/comments',
icon: 'el-icon-chat-line-square',
2022-03-03 11:26:42 +08:00
closable: true
},
{
title: '用户管理',
name: 'admin-users',
path: '/admin/users',
icon: 'el-icon-s-custom',
closable: true
},
{
title: '角色管理',
name: 'admin-roles',
path: '/admin/roles',
icon: 'el-icon-s-check',
closable: true
},
{
title: '专题管理',
name: 'admin-topics',
path: '/admin/topics',
icon: 'el-icon-postcard',
closable: true
},
{
title: '标签管理',
name: 'admin-tags',
path: '/admin/tags',
icon: 'el-icon-price-tag',
closable: true
},
{
title: '银行管理',
name: 'admin-banks',
path: '/admin/banks',
icon: 'el-icon-office-building',
closable: true
},
{
title: '银行卡管理',
name: 'admin-bank-accounts',
path: '/admin/bank-accounts',
icon: 'el-icon-bank-card',
closable: true
},
{
title: '货币规则',
name: 'admin-currency-rules',
path: '/admin/currency-rules',
icon: 'el-icon-document',
closable: true
2022-07-25 06:45:33 +08:00
},
{
title: '产品管理',
2024-03-18 15:45:01 +08:00
name: 'admin-products',
path: '/admin/products',
2022-07-25 06:45:33 +08:00
icon: 'el-icon-box',
closable: true
},
{
title: '产品编辑',
name: 'admin-product-post-product_id',
path: '/admin/product/post/:id?',
icon: 'el-icon-postcard',
closable: true,
isEdit: true
2022-03-03 11:26:42 +08:00
}
]
}
},
computed: {
...mapState({
editableTabs() {
return this.$store.state.admin.tabs;
},
editableTabsValue() {
2022-03-03 11:26:42 +08:00
return this.$store.state.admin.activeTab;
},
activeMenu: state => state.activeMenu,
hasPermissions() {
return this.$auth.hasScope('admin') || this.$auth.hasScope('blog_admin');
}
})
2022-03-03 11:26:42 +08:00
},
methods: {
handleRemoveTab(targetName) {
let tabs = this.editableTabs;
let activeName = this.editableTabsValue;
if (activeName === targetName) {
tabs.forEach((tab, index) => {
if (tab.name === targetName) {
let nextTab = tabs[index + 1] || tabs[index - 1];
if (nextTab) {
activeName = nextTab.name;
}
2022-03-03 11:26:42 +08:00
}
});
}
this.$store.commit('admin/updateTags', tabs.filter(tab => tab.name !== targetName))
this.handleSelectMenu(activeName)
2022-03-03 11:26:42 +08:00
},
handleClick(item) {
this.handleSelectMenu(item.name)
2022-03-03 11:26:42 +08:00
},
handleSelectTab(item) {
let _ts = this
this.$store.commit('admin/updateActiveTab', item);
2022-06-21 08:33:33 +08:00
let reset = '0'
2022-03-03 11:26:42 +08:00
let result = _.findIndex(_ts.editableTabs, function (tab) {
return tab.name === item;
})
if (result === -1) {
let index = _.findIndex(_ts.menus, function (menu) {
return menu.name === item;
})
_ts.$store.commit('admin/pushTags', _ts.menus[index])
2022-06-21 08:33:33 +08:00
reset = '1'
2022-03-03 11:26:42 +08:00
}
let params = _ts.$route.params
params.reset = reset
let query = _ts.$route.query
2022-03-03 11:26:42 +08:00
_ts.$router.push({
2022-06-21 08:33:33 +08:00
name: item,
params,
query
2022-03-03 11:26:42 +08:00
})
},
handleSelectMenu(item) {
let _ts = this;
let activeMenu = _ts.$store.state.activeMenu;
if (activeMenu !== item) {
_ts.$store.commit('setActiveMenu', item);
_ts.handleSelectTab(item)
}
}
},
mounted() {
this.handleSelectMenu(this.$route.name)
}
2022-03-03 11:26:42 +08:00
}
</script>
<style scoped>
</style>