taoge_xiaodi/maintenance_system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor ts

Browse Source
This commit is contained in:
LiuHao
2023-04-02 01:01:56 +08:00
parent 5c87f1cb2c
commit 251d2411f2
264 changed files with 15432 additions and 13015 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
src/components/TopNav/index.vue
View File

@ -1,44 +1,15 @@
<template>
<el-menu
:default-active="activeMenu"
mode="horizontal"
@select="handleSelect"
:ellipsis="false"
>
<template v-for="(item, index) in topMenus">
<el-menu-item :style="{'--theme': theme}" :index="item.path" :key="index" v-if="index < visibleNumber"
><svg-icon :icon-class="item.meta.icon" />
{{ item.meta.title }}</el-menu-item
>
</template>
<!-- 顶部菜单超出数量折叠 -->
<el-sub-menu :style="{'--theme': theme}" index="more" v-if="topMenus.length > visibleNumber">
<template #title>更多菜单</template>
<template v-for="(item, index) in topMenus">
<el-menu-item
:index="item.path"
:key="index"
v-if="index >= visibleNumber"
><svg-icon :icon-class="item.meta.icon" />
{{ item.meta.title }}</el-menu-item
>
</template>
</el-sub-menu>
</el-menu>
</template>
<script setup>
import { constantRoutes } from "@/router"
import { isHttp } from '@/utils/validate'
import useAppStore from '@/store/modules/app'
import useSettingsStore from '@/store/modules/settings'
import usePermissionStore from '@/store/modules/permission'
<script setup lang="ts">
import { constantRoutes } from '@/router';
import { isHttp } from '@/utils/validate';
import useAppStore from '@/store/modules/app';
import useSettingsStore from '@/store/modules/settings';
import usePermissionStore from '@/store/modules/permission';
import { RouteOption } from 'vue-router';
// 顶部栏初始数
const visibleNumber = ref(null);
const visibleNumber = ref<number>(-1);
// 当前激活菜单的 index
const currentIndex = ref(null);
const currentIndex = ref<string>();
// 隐藏侧边栏路由
const hideList = ['/index', '/user/profile'];
@ -55,12 +26,12 @@ const routers = computed(() => permissionStore.topbarRouters);
// 顶部显示菜单
const topMenus = computed(() => {
let topMenus = [];
let topMenus:RouteOption[] = [];
routers.value.map((menu) => {
if (menu.hidden !== true) {
// 兼容顶部栏一级菜单内部跳转
if (menu.path === "/") {
topMenus.push(menu.children[0]);
topMenus.push(menu.children? menu.children[0] : menu);
} else {
topMenus.push(menu);
}
@ -71,21 +42,21 @@ const topMenus = computed(() => {
// 设置子路由
const childrenMenus = computed(() => {
let childrenMenus = [];
let childrenMenus:RouteOption[] = [];
routers.value.map((router) => {
for (let item in router.children) {
if (router.children[item].parentPath === undefined) {
router.children?.forEach((item) => {
if (item.parentPath === undefined) {
if(router.path === "/") {
router.children[item].path = "/" + router.children[item].path;
item.path = "/" + item.path;
} else {
if(!isHttp(router.children[item].path)) {
router.children[item].path = router.path + "/" + router.children[item].path;
if(!isHttp(item.path)) {
item.path = router.path + "/" + item.path;
}
}
router.children[item].parentPath = router.path;
item.parentPath = router.path;
}
childrenMenus.push(router.children[item]);
}
childrenMenus.push(item);
})
})
return constantRoutes.concat(childrenMenus);
})
@ -108,12 +79,12 @@ const activeMenu = computed(() => {
return activePath;
})
function setVisibleNumber() {
const setVisibleNumber = () => {
const width = document.body.getBoundingClientRect().width / 3;
visibleNumber.value = parseInt(width / 85);
visibleNumber.value = parseInt(String(width / 85));
}
function handleSelect(key, keyPath) {
const handleSelect = (key: string, keyPath: string[]) => {
currentIndex.value = key;
const route = routers.value.find(item => item.path === key);
if (isHttp(key)) {
@ -121,7 +92,7 @@ function handleSelect(key, keyPath) {
window.open(key, "_blank");
} else if (!route || !route.children) {
// 没有子路由路径内部打开
router.push({ path: key });
router.push({ path: key, fullPath: '' });
appStore.toggleSideBarHide(true);
} else {
// 显示左侧联动菜单
@ -130,8 +101,8 @@ function handleSelect(key, keyPath) {
}
}
function activeRoutes(key) {
let routes = [];
const activeRoutes = (key: string) => {
let routes:RouteOption[] = [];
if (childrenMenus.value && childrenMenus.value.length > 0) {
childrenMenus.value.map((item) => {
if (key == item.parentPath || (key == "index" && "" == item.path)) {
@ -159,6 +130,26 @@ onMounted(() => {
})
</script>
<template>
<el-menu :default-active="activeMenu" mode="horizontal" @select="handleSelect" :ellipsis="false">
<template v-for="(item, index) in topMenus">
<el-menu-item :style="{'--theme': theme}" :index="item.path" :key="index" v-if="index < visibleNumber"
><svg-icon :icon-class="item.meta ? item.meta.icon : '' " /> {{ item.meta?.title }}</el-menu-item
>
</template>
<!-- 顶部菜单超出数量折叠 -->
<el-sub-menu :style="{'--theme': theme}" index="more" v-if="topMenus.length > visibleNumber">
<template #title>更多菜单</template>
<template v-for="(item, index) in topMenus">
<el-menu-item :index="item.path" :key="index" v-if="index >= visibleNumber"
><svg-icon :icon-class="item.meta ? item.meta.icon : '' " /> {{ item.meta?.title }}</el-menu-item
>
</template>
</el-sub-menu>
</el-menu>
</template>
<style lang="scss">
.topmenu-container.el-menu--horizontal > .el-menu-item {
float: left;