Commit 9114be88 by qinjianhui

feat: saas 菜单页面

parent fae68cde
......@@ -18,6 +18,11 @@ import {
Option,
Cascader,
Radio,
Menu,
Submenu,
MenuItem,
MenuItemGroup,
Tag,
} from 'element-ui'
const components = [
......@@ -35,6 +40,11 @@ const components = [
Option,
Cascader,
Radio,
Menu,
MenuItem,
Submenu,
MenuItemGroup,
Tag,
]
export default {
......
......@@ -42,3 +42,9 @@
background-color: #1565C0;
border-color: #1565C0;
}
.card {
padding: 10px;
background-color: #fff;
border-radius: 8px;
}
......@@ -11,6 +11,16 @@ Vue.config.productionTip = false
Vue.use(element)
Vue.use(vxeTable)
router.afterEach((to, from) => {
if (to.path === '/login') return
store.commit('tags/add', {
name: to.name,
path: to.fullPath,
title: to.meta?.title || to.name,
})
store.commit('tags/setActive', to.name)
})
new Vue({
router,
store,
......
import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
import HomeView from '../views/home/HomeView.vue'
import SaasManage from '@/views/saasManage/indexPage.vue'
import LoginPage from '@/views/LoginPage.vue'
import menu from '@/views/menu'
import menuPage from '@/views/menu.vue'
export const DEFAULT_DASHBOARD = 'saasManage'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'home',
component: HomeView,
},
{
path: '/login',
name: 'login',
component: LoginPage,
},
{
path: '/saas/manage',
name: 'saasManage',
component: SaasManage,
},
{
path: '/saas/menu',
component: menu,
name: 'saasMenu',
path: '/',
name: 'home',
component: HomeView,
redirect: '/saas/manage',
children: [
{
path: '/saas/manage',
name: 'saasManage',
meta: { title: 'SaaS管理页面' },
component: SaasManage,
},
{
path: '/saas/menu',
component: menuPage,
name: 'saasMenu',
meta: { title: '菜单管理' },
},
],
},
]
......
import Vue from 'vue'
import Vuex from 'vuex'
import tags from './tags'
Vue.use(Vuex)
export default new Vuex.Store({
......@@ -18,5 +20,7 @@ export default new Vuex.Store({
commit('setKeyCode', msg)
},
},
modules: {},
modules: {
tags,
},
})
const lastSavedTags =
JSON.parse(localStorage.getItem('tags')) || []
let tagId = lastSavedTags.reduce(
(a, c) => Math.max(a, c.id),
0,
)
/**
* @type {import('vuex').StoreOptions}
*/
const tags = {
namespaced: true,
state: {
tags: lastSavedTags,
activeTag: undefined,
},
getters: {
currentTag(state) {
return state.tags.find(
(e) => e.name === state.activeTag,
)
},
},
mutations: {
add(state, tag) {
const item = {
...tag,
id: ++tagId,
}
const index = state.tags.findIndex(
(t) => t.name === tag.name,
)
if (index === -1) {
state.tags.push(item)
}
localStorage.setItem(
'tags',
JSON.stringify(state.tags),
)
return item.id
},
setActive(state, name) {
if (!state.tags.some((e) => e.name === name)) return
state.activeTag = name
},
remove(state, name) {
const index = state.tags.findIndex(
(e) => e.name === name,
)
if (index === -1) return
state.tags.splice(index, 1)
// 如果关闭的是当前的 tag,就转到前一个标签
if (state.activeTag === name) {
let prevIndex = index - 1
if (prevIndex < 0) prevIndex = 0
if (state.tags.length === 0) {
state.activeTag = undefined
} else {
state.activeTag = state.tags[prevIndex].name
}
}
localStorage.setItem(
'tags',
JSON.stringify(state.tags),
)
},
},
}
export default tags
<template>
<div class="home"></div>
</template>
<script>
// @ is an alias to /src
export default {
name: 'HomeView',
created() {
this.$router.push('/saas/manage')
},
}
</script>
<template>
<div class="login-page">
<div class="system-name">SaaS 管理平台</div>
<div class="system-name">SAAS 管理平台</div>
<div class="login-view">
<h2>登录</h2>
<el-form :model="loginForm" class="login-form">
......
<template>
<div class="home-header">
<page-tags />
<div class="user-area">
<span class="user-name">系统管理员</span>
<el-button type="text">注销</el-button>
</div>
</div>
</template>
<script>
import pageTags from './pageTags.vue'
export default {
components: { pageTags },
name: 'HomeHeader',
}
</script>
<style lang="scss" scoped>
.home-header {
display: flex;
overflow: hidden;
}
.page-tags {
flex: 1;
overflow: auto hidden;
}
.user-area {
display: flex;
align-items: center;
flex-shrink: 0;
padding-right: 16px;
.user-name {
margin-right: 10px;
}
}
</style>
<template>
<div class="home">
<nav-menu></nav-menu>
<div class="right">
<home-header />
<div class="content">
<router-view></router-view>
</div>
</div>
</div>
</template>
<script>
import NavMenu from './navMenu.vue'
import HomeHeader from './HomeHeader.vue'
// @ is an alias to /src
export default {
name: 'HomeView',
components: {
NavMenu,
HomeHeader,
},
created() {
// this.$router.push('/saas/manage')
},
data() {
return {}
},
}
</script>
<style lang="scss" scoped>
.home {
height: 100%;
display: flex;
overflow: hidden;
&::v-deep {
.el-menu {
height: 100%;
}
}
}
.nav-menu {
height: 100%;
width: 240px;
}
.right {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
}
.home-header {
height: 50px;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
flex-shrink: 0;
z-index: 100;
}
.content {
flex: 1;
padding: 10px 10px 0px 10px;
background-color: #f1f1f1;
}
</style>
<template>
<div class="nav-menu">
<div class="header-logo">
<span>SAAS 管理平台</span>
</div>
<el-menu
ref="menu"
router
:default-active="this.$route.path"
class="el-menu-vertical-demo"
text-color="#fff"
background-color="#1565C0"
@click.native="onClickMenus"
active-text-color="#ffd04b"
>
<div
class="menu-list"
v-for="nav in menuList"
:key="nav.id"
>
<el-menu-item
v-if="nav.children.length === 0"
:index="nav.index"
>
<template slot="title">
<i :class="nav.icon"></i>
<span class="label">{{ nav.label }}</span>
</template>
</el-menu-item>
<el-submenu v-else :index="nav.index">
<template slot="title">
<i :class="nav.icon"></i>
<span class="label">{{ nav.label }}</span>
</template>
<el-menu-item
:index="subs.index"
v-for="subs in nav.children"
:key="subs.id"
>
<template slot="title">
<i :class="subs.icon"></i>
<span class="label">{{
subs.label
}}</span></template
>
</el-menu-item>
</el-submenu>
</div>
</el-menu>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
name: 'navMenu',
data() {
return {
menuList: [
{
id: 1,
path: '',
label: 'SaaS管理页面',
icon: 'el-icon-menu',
index: '/saas/manage',
children: [],
},
{
id: 2,
path: '',
label: '系统管理',
icon: 'el-icon-setting',
index: '/system',
children: [
{
id: 3,
path: '',
label: '菜单管理',
icon: '',
index: '/saas/menu',
children: [],
},
],
},
],
}
},
computed: {
...mapGetters('tags', ['currentTag']),
},
watch: {
currentTag(v) {
if (!v) return
const parent = this.menuList.find((e) => {
if (e.path === v.path) return true
if (e.children) {
return e.children.some((ee) => ee.path === v.path)
}
return false
})
if (parent) {
this.$refs.menu.open(parent.path)
}
},
},
methods: {
onClickMenus() {},
},
}
</script>
<style lang="scss" scoped>
.nav-menu {
&::v-deep {
.el-submenu__title i {
color: #fff;
}
}
i {
color: #fff;
}
}
.header-logo {
font-size: 20px;
color: #fff;
font-weight: bold;
padding: 12px 20px;
font-style: italic;
border-right: 1px solid #e6e6e6;
background-color: #1565C0;
}
.label {
font-size: 16px;
}
</style>
<template>
<div class="page-tags">
<div
v-for="t in tags"
:key="t.id"
class="page-tag"
:class="{ active: activeTag === t.name }"
@click="switchTag(t)"
>
<span class="page-tag-title">{{ t.title }}</span>
<span
v-if="t.name !== DEFAULT_DASHBOARD"
class="page-tag-close"
@click.stop="closeTag(t)"
><i class="el-icon-close"></i
></span>
</div>
</div>
</template>
<script>
import { mapGetters, mapState } from 'vuex'
import { DEFAULT_DASHBOARD } from '@/router'
export default {
name: 'pageTags',
data() {
return {
DEFAULT_DASHBOARD,
}
},
computed: {
...mapState('tags', ['tags', 'activeTag']),
...mapGetters('tags', ['currentTag']),
},
methods: {
switchTag(t) {
this.$store.commit('tags/setActive', t.name)
this.$router.push(t.path)
},
closeTag(t) {
this.$store.commit('tags/remove', t.name)
if (this.currentTag) {
// 切换到前一个标签页
if (this.$route.fullPath !== this.currentTag.path) {
this.$router.push({
path: this.currentTag.path,
})
}
}
},
},
}
</script>
<style lang="scss" scoped>
.page-tags {
display: flex;
padding-left: 10px;
align-items: center;
}
.page-tag {
position: relative;
display: flex;
align-items: center;
padding: 0 8px;
line-height: 30px;
line-height: 30px;
border: 1px solid #e0e0e0;
border-radius: 4px;
font-size: 14px;
cursor: pointer;
transition: all 0.3s;
&:hover {
background-color: #f5f5f5;
}
&:not(:last-child) {
&:after {
content: '';
position: absolute;
right: 0;
top: 15px;
bottom: 15px;
border-right: solid 1px #ddd;
}
}
&.active {
background-color: #1565C0;
color: #fff;
border: 1px solid #1565C0;
}
}
.page-tag:not(:last-child) {
margin-right: 6px;
}
.page-tag-close {
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
&:hover {
background-color: #fff;
color: #409eff;
}
}
.page-tag-title {
margin-right: 6px;
}
</style>
<template>
<div class="system-menu">
<div class="system-menu card">
<div class="header">
<el-form
size="mini"
......
<template>
<div class="saas-manage">
<div class="saas-manage card">
<div class="search">
<el-form
:model="searchForm"
......@@ -125,53 +125,71 @@
<el-table-column
label="域名"
prop="domain"
min-width="180"
header-align="center"
:show-overflow-tooltip="true"
></el-table-column>
<el-table-column
label="公司名称"
prop="companyName"
header-align="center"
align="center"
width="160"
:show-overflow-tooltip="true"
></el-table-column>
<el-table-column
label="负责人"
prop="headName"
header-align="center"
align="center"
width="140"
:show-overflow-tooltip="true"
></el-table-column>
<el-table-column
label="联系电话"
prop="contactPhone"
header-align="center"
align="center"
width="140"
:show-overflow-tooltip="true"
></el-table-column>
<el-table-column
label="套餐"
prop="packages"
header-align="center"
align="center"
width="140"
:show-overflow-tooltip="true"
></el-table-column>
<el-table-column
label="资费"
prop="charges"
header-align="center"
align="center"
width="140"
:show-overflow-tooltip="true"
></el-table-column>
<el-table-column
label="数据库地址"
prop="dataHost"
header-align="center"
align="center"
width="160"
:show-overflow-tooltip="true"
></el-table-column>
<el-table-column
label="数据库名称"
prop="databaseName"
header-align="center"
width="160"
:show-overflow-tooltip="true"
></el-table-column>
<el-table-column
label="状态"
header-align="center"
align="center"
width="120"
:show-overflow-tooltip="true"
>
<template slot-scope="scope">
<el-switch
......@@ -187,18 +205,23 @@
prop="createTime"
header-align="center"
align="center"
width="160"
:show-overflow-tooltip="true"
></el-table-column>
<el-table-column
label="过期时间"
prop="expireTime"
header-align="center"
align="center"
width="160"
:show-overflow-tooltip="true"
></el-table-column>
<el-table-column
label="操作"
header-align="center"
align="center"
width="55"
fixed="right"
>
<template slot-scope="scope">
<i
......@@ -673,7 +696,6 @@ export default {
height: 100%;
overflow: hidden;
display: flex;
padding: 20px 20px 0px 20px;
flex-direction: column;
&::v-deep {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment