github
/
vue-manage-system
mirror of https://github.com/lin-xin/vue-manage-system
1
0
Fork 0
Code Issues Releases Wiki Activity

Merge 6f59762aff into f70c93715b

pull/352/merge
Sophea 2023-06-23 15:20:24 +07:00 committed by GitHub
parent f70c93715b 6f59762aff
commit 0eab6c0b65
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 2346 additions and 430 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1885
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

45
src/components/header.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="header"> <div class="header">
<!-- 折叠按钮 --> <!-- 折叠按钮 -->
<div class="collapse-btn" @click="collapseChage"> <div class="collapse-btn" @click="collapseChange">
<el-icon v-if="sidebar.collapse"><Expand /></el-icon> <el-icon v-if="sidebar.collapse"><Expand /></el-icon>
<el-icon v-else><Fold /></el-icon> <el-icon v-else><Fold /></el-icon>
</div> </div>
@ -31,11 +31,16 @@
</span> </span>
<template #dropdown> <template #dropdown>
<el-dropdown-menu> <el-dropdown-menu>
<a href="https://github.com/lin-xin/vue-manage-system" target="_blank"> <a
href="https://github.com/lin-xin/vue-manage-system"
target="_blank"
>
<el-dropdown-item>项目仓库</el-dropdown-item> <el-dropdown-item>项目仓库</el-dropdown-item>
</a> </a>
<el-dropdown-item command="user">个人中心</el-dropdown-item> <el-dropdown-item command="user">个人中心</el-dropdown-item>
<el-dropdown-item divided command="loginout">退出登录</el-dropdown-item> <el-dropdown-item divided command="loginout"
>退出登录</el-dropdown-item
>
</el-dropdown-menu> </el-dropdown-menu>
</template> </template>
</el-dropdown> </el-dropdown>
@ -44,34 +49,42 @@
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { onMounted } from 'vue'; import { onMounted } from "vue";
import { useSidebarStore } from '../store/sidebar'; import { useSidebarStore } from "../store/sidebar";
import { useRouter } from 'vue-router'; import { useRouter } from "vue-router";
import imgurl from '../assets/img/img.jpg'; import imgurl from "../assets/img/img.jpg";
const username: string | null = localStorage.getItem('ms_username'); const username: string | null = localStorage.getItem("ms_username");
const message: number = 2; const message: number = 2;
const sidebar = useSidebarStore(); const sidebar = useSidebarStore();
// 侧边栏折叠 // 侧边栏折叠
const collapseChage = () => { const collapseChange = () => {
sidebar.handleCollapse(); sidebar.handleCollapse();
}; };
onMounted(() => { const onCollapse = () => {
if (document.body.clientWidth < 1500) { if (document.body.clientWidth < 1500) {
collapseChage(); sidebar.collapse = false;
collapseChange();
} else {
sidebar.collapse = true;
collapseChange();
} }
};
onMounted(() => {
window.addEventListener("resize", onCollapse);
}); });
// 用户名下拉菜单选择事件 // 用户名下拉菜单选择事件
const router = useRouter(); const router = useRouter();
const handleCommand = (command: string) => { const handleCommand = (command: string) => {
if (command == 'loginout') { if (command == "loginout") {
localStorage.removeItem('ms_username'); localStorage.removeItem("ms_username");
router.push('/login'); router.push("/login");
} else if (command == 'user') { } else if (command == "user") {
router.push('/user'); router.push("/user");
} }
}; };
</script> </script>

43
src/components/tags.vue
View File

@ -7,8 +7,12 @@
:class="{ active: isActive(item.path) }" :class="{ active: isActive(item.path) }"
:key="index" :key="index"
> >
<router-link :to="item.path" class="tags-li-title">{{ item.title }}</router-link> <router-link :to="item.path" class="tags-li-title">{{
<el-icon @click="closeTags(index)"><Close /></el-icon> item.title
}}</router-link>
<el-icon v-if="item.title != '系统首页'" @click="closeTags(index)"
><Close
/></el-icon>
</li> </li>
</ul> </ul>
<div class="tags-close-box"> <div class="tags-close-box">
@ -31,8 +35,8 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { useTagsStore } from '../store/tags'; import { useTagsStore } from "../store/tags";
import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router'; import { onBeforeRouteUpdate, useRoute, useRouter } from "vue-router";
const route = useRoute(); const route = useRoute();
const router = useRouter(); const router = useRouter();
@ -49,43 +53,58 @@ const closeTags = (index: number) => {
if (item) { if (item) {
delItem.path === route.fullPath && router.push(item.path); delItem.path === route.fullPath && router.push(item.path);
} else { } else {
router.push('/'); router.push("/");
} }
}; };
// 设置标签 // 设置标签
const setTags = (route: any) => { const setTags = (route: any) => {
const isExist = tags.list.some(item => { const isExist = tags.list.some((item) => {
return item.path === route.fullPath; return item.path === route.fullPath;
}); });
const isDashboard = tags.list.some((item) => item.path === "/dashboard");
if (!isExist) { 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({ tags.setTagsItem({
name: route.name, name: route.name,
title: route.meta.title, title: route.meta.title,
path: route.fullPath path: route.fullPath,
}); });
} }
}; };
setTags(route); setTags(route);
onBeforeRouteUpdate(to => { onBeforeRouteUpdate((to) => {
setTags(to); setTags(to);
}); });
// 关闭全部标签 // 关闭全部标签
const closeAll = () => { const closeAll = () => {
tags.clearTags(); tags.clearTags();
router.push('/'); tags.setTagsItem({
name: "dashboard",
title: "系统首页",
path: "/dashboard",
});
router.push("/");
}; };
// 关闭其他标签 // 关闭其他标签
const closeOther = () => { const closeOther = () => {
const curItem = tags.list.filter(item => { const curItem = tags.list.filter((item) => {
return item.path === route.fullPath; return item.path === route.fullPath;
}); });
tags.closeTagsOther(curItem); tags.closeTagsOther(curItem);
}; };
const handleTags = (command: string) => { const handleTags = (command: string) => {
command === 'other' ? closeOther() : closeAll(); command === "other" ? closeOther() : closeAll();
}; };
// 关闭当前页面的标签页 // 关闭当前页面的标签页

197
src/router/index.ts
View File

@ -1,176 +1,179 @@
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'; import {
import { usePermissStore } from '../store/permiss'; createRouter,
import Home from '../views/home.vue'; // createWebHashHistory,
RouteRecordRaw,
createWebHistory,
} from "vue-router";
import { usePermissStore } from "../store/permiss";
import Home from "../views/home.vue";
const routes: RouteRecordRaw[] = [ const routes: RouteRecordRaw[] = [
{ {
path: '/', path: "/",
redirect: '/dashboard', redirect: "/dashboard",
}, },
{ {
path: '/', path: "/",
name: 'Home', name: "Home",
component: Home, component: Home,
children: [ children: [
{ {
path: '/dashboard', path: "/dashboard",
name: 'dashboard', name: "dashboard",
meta: { meta: {
title: '系统首页', title: "系统首页",
permiss: '1', permiss: "1",
}, },
component: () => import(/* webpackChunkName: "dashboard" */ '../views/dashboard.vue'), component: () =>
import(/* webpackChunkName: "dashboard" */ "../views/dashboard.vue"),
}, },
{ {
path: '/table', path: "/table",
name: 'basetable', name: "basetable",
meta: { meta: {
title: '表格', title: "表格",
permiss: '2', permiss: "2",
}, },
component: () => import(/* webpackChunkName: "table" */ '../views/table.vue'), component: () =>
import(/* webpackChunkName: "table" */ "../views/table.vue"),
}, },
{ {
path: '/charts', path: "/charts",
name: 'basecharts', name: "basecharts",
meta: { meta: {
title: '图表', title: "图表",
permiss: '11', permiss: "11",
}, },
component: () => import(/* webpackChunkName: "charts" */ '../views/charts.vue'), component: () =>
import(/* webpackChunkName: "charts" */ "../views/charts.vue"),
}, },
{ {
path: '/form', path: "/form",
name: 'baseform', name: "baseform",
meta: { meta: {
title: '表单', title: "表单",
permiss: '5', permiss: "5",
}, },
component: () => import(/* webpackChunkName: "form" */ '../views/form.vue'), component: () =>
import(/* webpackChunkName: "form" */ "../views/form.vue"),
}, },
{ {
path: '/tabs', path: "/tabs",
name: 'tabs', name: "tabs",
meta: { meta: {
title: 'tab标签', title: "tab标签",
permiss: '3', permiss: "3",
}, },
component: () => import(/* webpackChunkName: "tabs" */ '../views/tabs.vue'), component: () =>
import(/* webpackChunkName: "tabs" */ "../views/tabs.vue"),
}, },
{ {
path: '/donate', path: "/donate",
name: 'donate', name: "donate",
meta: { meta: {
title: '鼓励作者', title: "鼓励作者",
permiss: '14', permiss: "14",
}, },
component: () => import(/* webpackChunkName: "donate" */ '../views/donate.vue'), component: () =>
import(/* webpackChunkName: "donate" */ "../views/donate.vue"),
}, },
{ {
path: '/permission', path: "/permission",
name: 'permission', name: "permission",
meta: { meta: {
title: '权限管理', title: "权限管理",
permiss: '13', permiss: "13",
}, },
component: () => import(/* webpackChunkName: "permission" */ '../views/permission.vue'), component: () =>
import(
/* webpackChunkName: "permission" */ "../views/permission.vue"
),
}, },
{ {
path: '/upload', path: "/upload",
name: 'upload', name: "upload",
meta: { meta: {
title: '上传插件', title: "上传插件",
permiss: '6', permiss: "6",
}, },
component: () => import(/* webpackChunkName: "upload" */ '../views/upload.vue'), component: () =>
import(/* webpackChunkName: "upload" */ "../views/upload.vue"),
}, },
{ {
path: '/icon', path: "/icon",
name: 'icon', name: "icon",
meta: { meta: {
title: '自定义图标', title: "自定义图标",
permiss: '10', permiss: "10",
}, },
component: () => import(/* webpackChunkName: "icon" */ '../views/icon.vue'), component: () =>
import(/* webpackChunkName: "icon" */ "../views/icon.vue"),
}, },
{ {
path: '/user', path: "/user",
name: 'user', name: "user",
meta: { meta: {
title: '个人中心', title: "个人中心",
}, },
component: () => import(/* webpackChunkName: "user" */ '../views/user.vue'), component: () =>
import(/* webpackChunkName: "user" */ "../views/user.vue"),
}, },
{ {
path: '/editor', path: "/editor",
name: 'editor', name: "editor",
meta: { meta: {
title: '富文本编辑器', title: "富文本编辑器",
permiss: '8', permiss: "8",
}, },
component: () => import(/* webpackChunkName: "editor" */ '../views/editor.vue'), component: () =>
import(/* webpackChunkName: "editor" */ "../views/editor.vue"),
}, },
{ {
path: '/markdown', path: "/markdown",
name: 'markdown', name: "markdown",
meta: { meta: {
title: 'markdown编辑器', title: "markdown编辑器",
permiss: '9', permiss: "9",
}, },
component: () => import(/* webpackChunkName: "markdown" */ '../views/markdown.vue'), component: () =>
}, import(/* webpackChunkName: "markdown" */ "../views/markdown.vue"),
{
path: '/export',
name: 'export',
meta: {
title: '导出Excel',
permiss: '2',
},
component: () => import(/* webpackChunkName: "export" */ '../views/export.vue'),
},
{
path: '/import',
name: 'import',
meta: {
title: '导入Excel',
permiss: '2',
},
component: () => import(/* webpackChunkName: "import" */ '../views/import.vue'),
}, },
], ],
}, },
{ {
path: '/login', path: "/login",
name: 'Login', name: "Login",
meta: { meta: {
title: '登录', title: "登录",
}, },
component: () => import(/* webpackChunkName: "login" */ '../views/login.vue'), component: () =>
import(/* webpackChunkName: "login" */ "../views/login.vue"),
}, },
{ {
path: '/403', path: "/403",
name: '403', name: "403",
meta: { meta: {
title: '没有权限', title: "没有权限",
}, },
component: () => import(/* webpackChunkName: "403" */ '../views/403.vue'), component: () => import(/* webpackChunkName: "403" */ "../views/403.vue"),
}, },
]; ];
const router = createRouter({ const router = createRouter({
history: createWebHashHistory(), // history: createWebHashHistory(),
history: createWebHistory(),
routes, routes,
}); });
router.beforeEach((to, from, next) => { router.beforeEach((to, from, next) => {
document.title = `${to.meta.title} | vue-manage-system`; document.title = `${to.meta.title} | vue-manage-system`;
const role = localStorage.getItem('ms_username'); const role = localStorage.getItem("ms_username");
const permiss = usePermissStore(); const permiss = usePermissStore();
if (!role && to.path !== '/login') { if (!role && to.path !== "/login") {
next('/login'); next("/login");
} else if (to.meta.permiss && !permiss.key.includes(to.meta.permiss)) { } else if (to.meta.permiss && !permiss.key.includes(to.meta.permiss)) {
// 如果没有权限，则进入403 // 如果没有权限，则进入403
next('/403'); next("/403");
} else { } else {
next(); next();
} }

28
src/store/tags.ts
View File

@ -1,4 +1,4 @@
import { defineStore } from 'pinia'; import { defineStore } from "pinia";
interface ListItem { interface ListItem {
name: string; name: string;
@ -6,19 +6,19 @@ interface ListItem {
title: string; title: string;
} }
export const useTagsStore = defineStore('tags', { export const useTagsStore = defineStore("tags", {
state: () => { state: () => {
return { return {
list: <ListItem[]>[] list: <ListItem[]>[],
}; };
}, },
getters: { getters: {
show: state => { show: (state) => {
return state.list.length > 0; return state.list.length > 0;
}, },
nameList: state => { nameList: (state) => {
return state.list.map(item => item.name); return state.list.map((item) => item.name);
} },
}, },
actions: { actions: {
delTagsItem(index: number) { delTagsItem(index: number) {
@ -32,6 +32,14 @@ export const useTagsStore = defineStore('tags', {
}, },
closeTagsOther(data: ListItem[]) { closeTagsOther(data: ListItem[]) {
this.list = data; this.list = data;
const isExist = data.find((ele) => ele.path === "/dashboard");
if (!isExist) {
this.list.unshift({
name: "dashboard",
title: "系统首页",
path: "/dashboard",
});
}
}, },
closeCurrentTag(data: any) { closeCurrentTag(data: any) {
for (let i = 0, len = this.list.length; i < len; i++) { for (let i = 0, len = this.list.length; i < len; i++) {
@ -42,12 +50,12 @@ export const useTagsStore = defineStore('tags', {
} else if (i > 0) { } else if (i > 0) {
data.$router.push(this.list[i - 1].path); data.$router.push(this.list[i - 1].path);
} else { } else {
data.$router.push('/'); data.$router.push("/");
} }
this.list.splice(i, 1); this.list.splice(i, 1);
break; break;
} }
} }
} },
} },
}); });