From cc9b67d4676dd51a6b2d88e92607aca2629ee54d Mon Sep 17 00:00:00 2001 From: 疯狂的狮子Li <15040126243@163.com> Date: 星期五, 22 十二月 2023 13:26:26 +0800 Subject: [PATCH] !72 发布 vue 版本 5.1.2 与 cloud 版本 2.1.2 Merge pull request !72 from 疯狂的狮子Li/temp --- src/layout/components/Sidebar/SidebarItem.vue | 132 +++++++++++++++++++++++--------------------- 1 files changed, 69 insertions(+), 63 deletions(-) diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue index c423fb1..4459cdf 100644 --- a/src/layout/components/Sidebar/SidebarItem.vue +++ b/src/layout/components/Sidebar/SidebarItem.vue @@ -1,23 +1,25 @@ <template> <div v-if="!item.hidden"> - <template v-if="hasOneShowingChild(item.children, item) && (!onlyOneChild.children || onlyOneChild.noShowingChildren) && !item.alwaysShow"> + <template v-if="hasOneShowingChild(item, item.children) && (!onlyOneChild.children || onlyOneChild.noShowingChildren) && !item.alwaysShow"> <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path, onlyOneChild.query)"> <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{ 'submenu-title-noDropdown': !isNest }"> - <svg-icon :icon-class="onlyOneChild.meta.icon || (item.meta && item.meta.icon)"/> - <template #title><span class="menu-title" :title="hasTitle(onlyOneChild.meta.title)">{{ onlyOneChild.meta.title }}</span></template> + <svg-icon :icon-class="onlyOneChild.meta.icon || (item.meta && item.meta.icon)" /> + <template #title> + <span class="menu-title" :title="hasTitle(onlyOneChild.meta.title)">{{ onlyOneChild.meta.title }}</span> + </template> </el-menu-item> </app-link> </template> - <el-sub-menu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body> + <el-sub-menu v-else ref="subMenu" :index="resolvePath(item.path)" teleported> <template v-if="item.meta" #title> - <svg-icon :icon-class="item.meta && item.meta.icon" /> - <span class="menu-title" :title="hasTitle(item.meta.title)">{{ item.meta.title }}</span> + <svg-icon :icon-class="item.meta ? item.meta.icon : '' " /> + <span class="menu-title" :title="hasTitle(item.meta?.title)">{{ item.meta?.title }}</span> </template> <sidebar-item - v-for="child in item.children" - :key="child.path" + v-for="(child, index) in item.children" + :key="child.path + index" :is-nest="true" :item="child" :base-path="resolvePath(child.path)" @@ -27,76 +29,80 @@ </div> </template> -<script setup> +<script setup lang="ts"> import { isExternal } from '@/utils/validate' -import AppLink from './Link' +import AppLink from './Link.vue' import { getNormalPath } from '@/utils/ruoyi' +import { RouteOption } from "vue-router"; const props = defineProps({ - // route object - item: { - type: Object, - required: true - }, - isNest: { - type: Boolean, - default: false - }, - basePath: { - type: String, - default: '' - } + // route object + item: { + type: Object as PropType<RouteOption>, + required: true + }, + isNest: { + type: Boolean, + default: false + }, + basePath: { + type: String, + default: '' + } }) -const onlyOneChild = ref({}); +const onlyOneChild = ref<any>({}); -function hasOneShowingChild(children = [], parent) { - if (!children) { - children = []; - } - const showingChildren = children.filter(item => { - if (item.hidden) { - return false - } else { - // Temp set(will be used if only has one showing child) - onlyOneChild.value = item - return true +const hasOneShowingChild = (parent: RouteOption, children?:RouteOption[]) => { + if (!children) { + children = []; } - }) + const showingChildren = children.filter(item => { + if (item.hidden) { + return false + } else { + // Temp set(will be used if only has one showing child) + onlyOneChild.value = item + return true + } + }) - // When there is only one child router, the child router is displayed by default - if (showingChildren.length === 1) { - return true - } + // When there is only one child router, the child router is displayed by default + if (showingChildren.length === 1) { + return true + } - // Show parent if there are no child router to display - if (showingChildren.length === 0) { - onlyOneChild.value = { ...parent, path: '', noShowingChildren: true } - return true - } + // Show parent if there are no child router to display + if (showingChildren.length === 0) { + onlyOneChild.value = { ...parent, path: '', noShowingChildren: true } + if (parent.name === '2222') { + console.log(onlyOneChild.value) + } + return true + } - return false + + return false }; -function resolvePath(routePath, routeQuery) { - if (isExternal(routePath)) { - return routePath - } - if (isExternal(props.basePath)) { - return props.basePath - } - if (routeQuery) { - let query = JSON.parse(routeQuery); - return { path: getNormalPath(props.basePath + '/' + routePath), query: query } - } - return getNormalPath(props.basePath + '/' + routePath) +const resolvePath = (routePath:string, routeQuery?:string): any => { + if (isExternal(routePath)) { + return routePath + } + if (isExternal(props.basePath)) { + return props.basePath + } + if (routeQuery) { + let query = JSON.parse(routeQuery); + return { path: getNormalPath(props.basePath + '/' + routePath), query: query } + } + return getNormalPath(props.basePath + '/' + routePath) } -function hasTitle(title){ - if (title.length > 5) { +const hasTitle = (title: string | undefined): string => { + if(!title || title.length <= 5) { + return ""; + } return title; - } else { - return ""; - } } </script> -- Gitblit v1.9.3