From fda152b544ed0b3ceb8309df5b7eca2de888f3f1 Mon Sep 17 00:00:00 2001
From: chenrui <1187576398@qq.com>
Date: 星期二, 10 六月 2025 11:39:55 +0800
Subject: [PATCH] 开票登记编辑功能开发
---
src/components/TopNav/index.vue | 126 +++++++++++++++++++++++-------------------
1 files changed, 69 insertions(+), 57 deletions(-)
diff --git a/src/components/TopNav/index.vue b/src/components/TopNav/index.vue
index b93f585..56e2803 100644
--- a/src/components/TopNav/index.vue
+++ b/src/components/TopNav/index.vue
@@ -6,13 +6,12 @@
: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
- v-if="item.meta && item.meta.icon && item.meta.icon !== '#'"
- :icon-class="item.meta.icon"
- />
- {{ item.meta.title }}</el-menu-item
- >
+ <el-menu-item :style="{'--theme': theme}" :index="item.path" :key="index" v-if="index < visibleNumber">
+ <svg-icon
+ v-if="item.meta && item.meta.icon && item.meta.icon !== '#'"
+ :icon-class="item.meta.icon"/>
+ {{ item.meta.title }}
+ </el-menu-item>
</template>
<!-- 椤堕儴鑿滃崟瓒呭嚭鏁伴噺鎶樺彔 -->
@@ -22,10 +21,12 @@
<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
- >
+ v-if="index >= visibleNumber">
+ <svg-icon
+ v-if="item.meta && item.meta.icon && item.meta.icon !== '#'"
+ :icon-class="item.meta.icon"/>
+ {{ item.meta.title }}
+ </el-menu-item>
</template>
</el-sub-menu>
</el-menu>
@@ -39,126 +40,127 @@
import usePermissionStore from '@/store/modules/permission'
// 椤堕儴鏍忓垵濮嬫暟
-const visibleNumber = ref(null);
+const visibleNumber = ref(null)
// 褰撳墠婵�娲昏彍鍗曠殑 index
-const currentIndex = ref(null);
+const currentIndex = ref(null)
// 闅愯棌渚ц竟鏍忚矾鐢�
-const hideList = ['/index', '/user/profile'];
+const hideList = ['/index', '/user/profile']
const appStore = useAppStore()
const settingsStore = useSettingsStore()
const permissionStore = usePermissionStore()
-const route = useRoute();
-const router = useRouter();
+const route = useRoute()
+const router = useRouter()
// 涓婚棰滆壊
-const theme = computed(() => settingsStore.theme);
+const theme = computed(() => settingsStore.theme)
// 鎵�鏈夌殑璺敱淇℃伅
-const routers = computed(() => permissionStore.topbarRouters);
+const routers = computed(() => permissionStore.topbarRouters)
// 椤堕儴鏄剧ず鑿滃崟
const topMenus = computed(() => {
- let topMenus = [];
+ let topMenus = []
routers.value.map((menu) => {
if (menu.hidden !== true) {
// 鍏煎椤堕儴鏍忎竴绾ц彍鍗曞唴閮ㄨ烦杞�
- if (menu.path === "/") {
- topMenus.push(menu.children[0]);
+ if (menu.path === '/' && menu.children) {
+ topMenus.push(menu.children[0])
} else {
- topMenus.push(menu);
+ topMenus.push(menu)
}
}
})
- return topMenus;
+ return topMenus
})
// 璁剧疆瀛愯矾鐢�
const childrenMenus = computed(() => {
- let childrenMenus = [];
+ let childrenMenus = []
routers.value.map((router) => {
for (let item in router.children) {
if (router.children[item].parentPath === undefined) {
if(router.path === "/") {
- router.children[item].path = "/" + router.children[item].path;
+ router.children[item].path = "/" + router.children[item].path
} else {
if(!isHttp(router.children[item].path)) {
- router.children[item].path = router.path + "/" + router.children[item].path;
+ router.children[item].path = router.path + "/" + router.children[item].path
}
}
- router.children[item].parentPath = router.path;
+ router.children[item].parentPath = router.path
}
- childrenMenus.push(router.children[item]);
+ childrenMenus.push(router.children[item])
}
})
- return constantRoutes.concat(childrenMenus);
+ return constantRoutes.concat(childrenMenus)
})
// 榛樿婵�娲荤殑鑿滃崟
const activeMenu = computed(() => {
- const path = route.path;
- let activePath = path;
+ const path = route.path
+ let activePath = path
if (path !== undefined && path.lastIndexOf("/") > 0 && hideList.indexOf(path) === -1) {
- const tmpPath = path.substring(1, path.length);
- activePath = "/" + tmpPath.substring(0, tmpPath.indexOf("/"));
+ const tmpPath = path.substring(1, path.length)
if (!route.meta.link) {
- appStore.toggleSideBarHide(false);
+ activePath = "/" + tmpPath.substring(0, tmpPath.indexOf("/"))
+ appStore.toggleSideBarHide(false)
}
} else if(!route.children) {
- activePath = path;
- appStore.toggleSideBarHide(true);
+ activePath = path
+ appStore.toggleSideBarHide(true)
}
- activeRoutes(activePath);
- return activePath;
+ activeRoutes(activePath)
+ return activePath
})
function setVisibleNumber() {
- const width = document.body.getBoundingClientRect().width / 3;
- visibleNumber.value = parseInt(width / 85);
+ const width = document.body.getBoundingClientRect().width / 3
+ visibleNumber.value = parseInt(width / 85)
}
function handleSelect(key, keyPath) {
- currentIndex.value = key;
- const route = routers.value.find(item => item.path === key);
+ currentIndex.value = key
+ const route = routers.value.find(item => item.path === key)
if (isHttp(key)) {
// http(s):// 璺緞鏂扮獥鍙ｆ墦寮�
- window.open(key, "_blank");
+ window.open(key, "_blank")
} else if (!route || !route.children) {
// 娌℃湁瀛愯矾鐢辫矾寰勫唴閮ㄦ墦寮�
- const routeMenu = childrenMenus.value.find(item => item.path === key);
+ const routeMenu = childrenMenus.value.find(item => item.path === key)
if (routeMenu && routeMenu.query) {
- let query = JSON.parse(routeMenu.query);
- router.push({ path: key, query: query });
+ let query = JSON.parse(routeMenu.query)
+ router.push({ path: key, query: query })
} else {
- router.push({ path: key });
+ router.push({ path: key })
}
- appStore.toggleSideBarHide(true);
+ appStore.toggleSideBarHide(true)
} else {
// 鏄剧ず宸︿晶鑱斿姩鑿滃崟
- activeRoutes(key);
- appStore.toggleSideBarHide(false);
+ activeRoutes(key)
+ appStore.toggleSideBarHide(false)
}
}
function activeRoutes(key) {
- let routes = [];
+ let routes = []
if (childrenMenus.value && childrenMenus.value.length > 0) {
childrenMenus.value.map((item) => {
if (key == item.parentPath || (key == "index" && "" == item.path)) {
- routes.push(item);
+ routes.push(item)
}
- });
+ })
}
if(routes.length > 0) {
- permissionStore.setSidebarRouters(routes);
+ permissionStore.setSidebarRouters(routes)
} else {
- appStore.toggleSideBarHide(true);
+ appStore.toggleSideBarHide(true)
}
- return routes;
+ return routes
}
onMounted(() => {
window.addEventListener('resize', setVisibleNumber)
})
+
onBeforeUnmount(() => {
window.removeEventListener('resize', setVisibleNumber)
})
@@ -195,11 +197,21 @@
/* 鑳屾櫙鑹查殣钘� */
.topmenu-container.el-menu--horizontal>.el-menu-item:not(.is-disabled):focus, .topmenu-container.el-menu--horizontal>.el-menu-item:not(.is-disabled):hover, .topmenu-container.el-menu--horizontal>.el-submenu .el-submenu__title:hover {
- background-color: #ffffff !important;
+ background-color: #ffffff;
}
/* 鍥炬爣鍙抽棿璺� */
.topmenu-container .svg-icon {
margin-right: 4px;
}
+
+/* topmenu more arrow */
+.topmenu-container .el-sub-menu .el-sub-menu__icon-arrow {
+ position: static;
+ vertical-align: middle;
+ margin-left: 8px;
+ margin-top: 0px;
+}
+
+
</style>
--
Gitblit v1.9.3