improve tags
Sophea Vann
parent
9fac817ac5
commit
fef3426276
|
|
@ -7,8 +7,12 @@
|
|||
:class="{ active: isActive(item.path) }"
|
||||
:key="index"
|
||||
>
|
||||
<router-link :to="item.path" class="tags-li-title">{{ item.title }}</router-link>
|
||||
<el-icon @click="closeTags(index)"><Close /></el-icon>
|
||||
<router-link :to="item.path" class="tags-li-title">{{
|
||||
item.title
|
||||
}}</router-link>
|
||||
<el-icon v-if="item.title != '系统首页'" @click="closeTags(index)"
|
||||
><Close
|
||||
/></el-icon>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tags-close-box">
|
||||
|
|
@ -31,8 +35,8 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useTagsStore } from '../store/tags';
|
||||
import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router';
|
||||
import { useTagsStore } from "../store/tags";
|
||||
import { onBeforeRouteUpdate, useRoute, useRouter } from "vue-router";
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
|
@ -49,43 +53,58 @@ const closeTags = (index: number) => {
|
|||
if (item) {
|
||||
delItem.path === route.fullPath && router.push(item.path);
|
||||
} else {
|
||||
router.push('/');
|
||||
router.push("/");
|
||||
}
|
||||
};
|
||||
|
||||
// 设置标签
|
||||
const setTags = (route: any) => {
|
||||
const isExist = tags.list.some(item => {
|
||||
const isExist = tags.list.some((item) => {
|
||||
return item.path === route.fullPath;
|
||||
});
|
||||
const isDashboard = tags.list.some((item) => item.path === "/dashboard");
|
||||
if (!isExist) {
|
||||
if (tags.list.length >= 8) tags.delTagsItem(0);
|
||||
if (!isDashboard) {
|
||||
if (route.fullPath !== "/dashboard") {
|
||||
tags.setTagsItem({
|
||||
name: "dashboard",
|
||||
title: "系统首页",
|
||||
path: "/dashboard",
|
||||
});
|
||||
}
|
||||
}
|
||||
if (tags.list.length >= 8) tags.delTagsItem(1);
|
||||
tags.setTagsItem({
|
||||
name: route.name,
|
||||
title: route.meta.title,
|
||||
path: route.fullPath
|
||||
path: route.fullPath,
|
||||
});
|
||||
}
|
||||
};
|
||||
setTags(route);
|
||||
onBeforeRouteUpdate(to => {
|
||||
onBeforeRouteUpdate((to) => {
|
||||
setTags(to);
|
||||
});
|
||||
|
||||
// 关闭全部标签
|
||||
const closeAll = () => {
|
||||
tags.clearTags();
|
||||
router.push('/');
|
||||
tags.setTagsItem({
|
||||
name: "dashboard",
|
||||
title: "系统首页",
|
||||
path: "/dashboard",
|
||||
});
|
||||
router.push("/");
|
||||
};
|
||||
// 关闭其他标签
|
||||
const closeOther = () => {
|
||||
const curItem = tags.list.filter(item => {
|
||||
const curItem = tags.list.filter((item) => {
|
||||
return item.path === route.fullPath;
|
||||
});
|
||||
tags.closeTagsOther(curItem);
|
||||
};
|
||||
const handleTags = (command: string) => {
|
||||
command === 'other' ? closeOther() : closeAll();
|
||||
command === "other" ? closeOther() : closeAll();
|
||||
};
|
||||
|
||||
// 关闭当前页面的标签页
|
||||
|
|
|
|||
|
|
@ -1,12 +1,18 @@
|
|||
import {createRouter, createWebHashHistory, RouteRecordRaw} from "vue-router";
|
||||
import { usePermissStore } from '../store/permiss'
|
||||
import {
|
||||
createRouter,
|
||||
// createWebHashHistory,
|
||||
RouteRecordRaw,
|
||||
createWebHistory,
|
||||
} from "vue-router";
|
||||
import { usePermissStore } from "../store/permiss";
|
||||
import Home from "../views/home.vue";
|
||||
|
||||
const routes: RouteRecordRaw[] = [
|
||||
{
|
||||
path: '/',
|
||||
redirect: '/dashboard'
|
||||
}, {
|
||||
path: "/",
|
||||
redirect: "/dashboard",
|
||||
},
|
||||
{
|
||||
path: "/",
|
||||
name: "Home",
|
||||
component: Home,
|
||||
|
|
@ -15,130 +21,159 @@ const routes:RouteRecordRaw[] = [
|
|||
path: "/dashboard",
|
||||
name: "dashboard",
|
||||
meta: {
|
||||
title: '系统首页',
|
||||
permiss: '1'
|
||||
title: "系统首页",
|
||||
permiss: "1",
|
||||
},
|
||||
component: () => import ( /* webpackChunkName: "dashboard" */ "../views/dashboard.vue")
|
||||
}, {
|
||||
component: () =>
|
||||
import(/* webpackChunkName: "dashboard" */ "../views/dashboard.vue"),
|
||||
},
|
||||
{
|
||||
path: "/table",
|
||||
name: "basetable",
|
||||
meta: {
|
||||
title: '表格',
|
||||
permiss: '2'
|
||||
title: "表格",
|
||||
permiss: "2",
|
||||
},
|
||||
component: () => import ( /* webpackChunkName: "table" */ "../views/table.vue")
|
||||
}, {
|
||||
component: () =>
|
||||
import(/* webpackChunkName: "table" */ "../views/table.vue"),
|
||||
},
|
||||
{
|
||||
path: "/charts",
|
||||
name: "basecharts",
|
||||
meta: {
|
||||
title: '图表',
|
||||
permiss: '11'
|
||||
title: "图表",
|
||||
permiss: "11",
|
||||
},
|
||||
component: () => import ( /* webpackChunkName: "charts" */ "../views/charts.vue")
|
||||
}, {
|
||||
component: () =>
|
||||
import(/* webpackChunkName: "charts" */ "../views/charts.vue"),
|
||||
},
|
||||
{
|
||||
path: "/form",
|
||||
name: "baseform",
|
||||
meta: {
|
||||
title: '表单',
|
||||
permiss: '5'
|
||||
title: "表单",
|
||||
permiss: "5",
|
||||
},
|
||||
component: () => import ( /* webpackChunkName: "form" */ "../views/form.vue")
|
||||
}, {
|
||||
component: () =>
|
||||
import(/* webpackChunkName: "form" */ "../views/form.vue"),
|
||||
},
|
||||
{
|
||||
path: "/tabs",
|
||||
name: "tabs",
|
||||
meta: {
|
||||
title: 'tab标签',
|
||||
permiss: '3'
|
||||
title: "tab标签",
|
||||
permiss: "3",
|
||||
},
|
||||
component: () => import ( /* webpackChunkName: "tabs" */ "../views/tabs.vue")
|
||||
}, {
|
||||
component: () =>
|
||||
import(/* webpackChunkName: "tabs" */ "../views/tabs.vue"),
|
||||
},
|
||||
{
|
||||
path: "/donate",
|
||||
name: "donate",
|
||||
meta: {
|
||||
title: '鼓励作者',
|
||||
permiss: '14'
|
||||
title: "鼓励作者",
|
||||
permiss: "14",
|
||||
},
|
||||
component: () => import ( /* webpackChunkName: "donate" */ "../views/donate.vue")
|
||||
}, {
|
||||
component: () =>
|
||||
import(/* webpackChunkName: "donate" */ "../views/donate.vue"),
|
||||
},
|
||||
{
|
||||
path: "/permission",
|
||||
name: "permission",
|
||||
meta: {
|
||||
title: '权限管理',
|
||||
permiss: '13'
|
||||
title: "权限管理",
|
||||
permiss: "13",
|
||||
},
|
||||
component: () => import ( /* webpackChunkName: "permission" */ "../views/permission.vue")
|
||||
}, {
|
||||
component: () =>
|
||||
import(
|
||||
/* webpackChunkName: "permission" */ "../views/permission.vue"
|
||||
),
|
||||
},
|
||||
{
|
||||
path: "/upload",
|
||||
name: "upload",
|
||||
meta: {
|
||||
title: '上传插件',
|
||||
permiss: '6'
|
||||
title: "上传插件",
|
||||
permiss: "6",
|
||||
},
|
||||
component: () => import ( /* webpackChunkName: "upload" */ "../views/upload.vue")
|
||||
}, {
|
||||
component: () =>
|
||||
import(/* webpackChunkName: "upload" */ "../views/upload.vue"),
|
||||
},
|
||||
{
|
||||
path: "/icon",
|
||||
name: "icon",
|
||||
meta: {
|
||||
title: '自定义图标',
|
||||
permiss: '10'
|
||||
title: "自定义图标",
|
||||
permiss: "10",
|
||||
},
|
||||
component: () => import ( /* webpackChunkName: "icon" */ "../views/icon.vue")
|
||||
}, {
|
||||
path: '/user',
|
||||
name: 'user',
|
||||
component: () =>
|
||||
import(/* webpackChunkName: "icon" */ "../views/icon.vue"),
|
||||
},
|
||||
{
|
||||
path: "/user",
|
||||
name: "user",
|
||||
meta: {
|
||||
title: '个人中心'
|
||||
title: "个人中心",
|
||||
},
|
||||
component: () => import (/* webpackChunkName: "user" */ '../views/user.vue')
|
||||
}, {
|
||||
path: '/editor',
|
||||
name: 'editor',
|
||||
component: () =>
|
||||
import(/* webpackChunkName: "user" */ "../views/user.vue"),
|
||||
},
|
||||
{
|
||||
path: "/editor",
|
||||
name: "editor",
|
||||
meta: {
|
||||
title: '富文本编辑器',
|
||||
permiss: '8'
|
||||
title: "富文本编辑器",
|
||||
permiss: "8",
|
||||
},
|
||||
component: () => import (/* webpackChunkName: "editor" */ '../views/editor.vue')
|
||||
}, {
|
||||
path: '/markdown',
|
||||
name: 'markdown',
|
||||
component: () =>
|
||||
import(/* webpackChunkName: "editor" */ "../views/editor.vue"),
|
||||
},
|
||||
{
|
||||
path: "/markdown",
|
||||
name: "markdown",
|
||||
meta: {
|
||||
title: 'markdown编辑器',
|
||||
permiss: '9'
|
||||
title: "markdown编辑器",
|
||||
permiss: "9",
|
||||
},
|
||||
component: () => import (/* webpackChunkName: "markdown" */ '../views/markdown.vue')
|
||||
}
|
||||
]
|
||||
}, {
|
||||
component: () =>
|
||||
import(/* webpackChunkName: "markdown" */ "../views/markdown.vue"),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: "/login",
|
||||
name: "Login",
|
||||
meta: {
|
||||
title: '登录'
|
||||
title: "登录",
|
||||
},
|
||||
component: () => import ( /* webpackChunkName: "login" */ "../views/login.vue")
|
||||
}, {
|
||||
path: '/403',
|
||||
name: '403',
|
||||
component: () =>
|
||||
import(/* webpackChunkName: "login" */ "../views/login.vue"),
|
||||
},
|
||||
{
|
||||
path: "/403",
|
||||
name: "403",
|
||||
meta: {
|
||||
title: '没有权限'
|
||||
title: "没有权限",
|
||||
},
|
||||
component: () => import (/* webpackChunkName: "403" */ '../views/403.vue')
|
||||
component: () => import(/* webpackChunkName: "403" */ "../views/403.vue"),
|
||||
},
|
||||
];
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHashHistory(),
|
||||
routes
|
||||
// history: createWebHashHistory(),
|
||||
history: createWebHistory(),
|
||||
routes,
|
||||
});
|
||||
|
||||
router.beforeEach((to, from, next) => {
|
||||
document.title = `${to.meta.title} | vue-manage-system`;
|
||||
const role = localStorage.getItem('ms_username');
|
||||
const role = localStorage.getItem("ms_username");
|
||||
const permiss = usePermissStore();
|
||||
if (!role && to.path !== '/login') {
|
||||
next('/login');
|
||||
if (!role && to.path !== "/login") {
|
||||
next("/login");
|
||||
} else if (to.meta.permiss && !permiss.key.includes(to.meta.permiss)) {
|
||||
// 如果没有权限，则进入403
|
||||
next('/403');
|
||||
next("/403");
|
||||
} else {
|
||||
next();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { defineStore } from 'pinia';
|
||||
import { defineStore } from "pinia";
|
||||
|
||||
interface ListItem {
|
||||
name: string;
|
||||
|
|
@ -6,19 +6,19 @@ interface ListItem {
|
|||
title: string;
|
||||
}
|
||||
|
||||
export const useTagsStore = defineStore('tags', {
|
||||
export const useTagsStore = defineStore("tags", {
|
||||
state: () => {
|
||||
return {
|
||||
list: <ListItem[]>[]
|
||||
list: <ListItem[]>[],
|
||||
};
|
||||
},
|
||||
getters: {
|
||||
show: state => {
|
||||
show: (state) => {
|
||||
return state.list.length > 0;
|
||||
},
|
||||
nameList: state => {
|
||||
return state.list.map(item => item.name);
|
||||
}
|
||||
nameList: (state) => {
|
||||
return state.list.map((item) => item.name);
|
||||
},
|
||||
},
|
||||
actions: {
|
||||
delTagsItem(index: number) {
|
||||
|
|
@ -32,6 +32,14 @@ export const useTagsStore = defineStore('tags', {
|
|||
},
|
||||
closeTagsOther(data: ListItem[]) {
|
||||
this.list = data;
|
||||
const isExist = data.find((ele) => ele.path === "/dashboard");
|
||||
if (!isExist) {
|
||||
this.list.unshift({
|
||||
name: "dashboard",
|
||||
title: "系统首页",
|
||||
path: "/dashboard",
|
||||
});
|
||||
}
|
||||
},
|
||||
closeCurrentTag(data: any) {
|
||||
for (let i = 0, len = this.list.length; i < len; i++) {
|
||||
|
|
@ -42,12 +50,12 @@ export const useTagsStore = defineStore('tags', {
|
|||
} else if (i > 0) {
|
||||
data.$router.push(this.list[i - 1].path);
|
||||
} else {
|
||||
data.$router.push('/');
|
||||
data.$router.push("/");
|
||||
}
|
||||
this.list.splice(i, 1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue