This commit is contained in:
13713575202 2025-05-23 14:33:06 +08:00
commit c6b5b7b94b
7 changed files with 53 additions and 46 deletions

View File

@ -1,10 +1,3 @@
<!--
* @Description:
* @Author: zenghua.wang
* @Date: 2023-06-20 14:29:45
* @LastEditors: zenghua.wang
* @LastEditTime: 2024-01-26 23:04:29
-->
<template>
<div class="layout-hamburger" @click="handleCollapse">
<el-icon v-if="isCollapse" class="icon"><expand /></el-icon>

View File

@ -1,10 +1,3 @@
<!--
* @Description:
* @Author: zenghua.wang
* @Date: 2024-01-27 16:02:43
* @LastEditors: zenghua.wang
* @LastEditTime: 2024-04-12 21:12:01
-->
<template>
<el-icon v-if="icon.includes('icon')" :class="`iconfont ${icon}`" :size="size" />
<el-icon v-else :size="size"> <component :is="icon" /></el-icon>

View File

@ -1,10 +1,3 @@
<!--
* @Description:
* @Author: zenghua.wang
* @Date: 2023-06-20 14:29:45
* @LastEditors: zenghua.wang
* @LastEditTime: 2024-01-27 09:29:36
-->
<template>
<component :is="type" v-bind="linkProps(to)">
<slot />

View File

@ -1,10 +1,3 @@
<!--
* @Description:
* @Author: zenghua.wang
* @Date: 2023-06-20 14:29:45
* @LastEditors: zenghua.wang
* @LastEditTime: 2024-01-27 16:07:37
-->
<template>
<template v-if="!item.hidden">
<template v-if="!item.alwaysShow && hasOneShowingChild(item.children, item)">
@ -15,21 +8,41 @@
</el-menu-item>
</layout-link>
</template>
<template v-else-if="level === 2 && !isCollapse">
<el-dropdown trigger="hover" placement="right-start" :show-timeout="100" @visible-change="(val) => (isDropdownOpen = val)">
<span class="el-dropdown-link el-menu-item" @mouseenter.prevent>
<layout-icon :size="20" :icon="item.meta?.icon" />
<span>{{ item.meta?.title }}</span>
<el-icon class="arrow-icon" v-if="item.children?.length">
<component :is="isDropdownOpen ? 'arrow-left' : 'arrow-right'" />
</el-icon>
</span>
<template #dropdown>
<el-menu class="third-level-menu el-menu--vertical el-menu--popup-container" :default-active="$route.path" @select="$router.push">
<el-menu-item v-for="child in item.children" :key="child.path" :index="child.path">
<layout-icon :size="20" :icon="child.meta?.icon" />
<span>{{ child.meta?.title }}</span>
</el-menu-item>
</el-menu>
</template>
</el-dropdown>
</template>
<el-sub-menu v-else :index="item.path" teleported>
<template #title>
<layout-icon :size="20" :icon="item?.meta?.icon" />
<span>{{ item.meta && item.meta?.title }}</span>
</template>
<sub-item v-for="child in item.children" :key="child.path" :item="child" />
<sub-item v-for="child in item.children" :key="child.path" :item="child" :level="level + 1" />
</el-sub-menu>
</template>
</template>
<script setup name="sub-item">
import { ref } from 'vue';
import { ref, computed } from 'vue';
// import { isExternal } from '@/utils/validate.js';
import LayoutLink from './Link';
import LayoutIcon from './Icon';
import { useSettingStore } from '@/store/modules/setting';
// import path from 'path-browserify';
defineProps({
@ -37,6 +50,10 @@ defineProps({
type: Object,
required: true,
},
level: {
type: Number,
default: 1,
},
basePath: {
type: String,
default: '',
@ -44,6 +61,10 @@ defineProps({
});
const onlyOneChild = ref(null);
const SettingStore = useSettingStore();
const isDropdownOpen = ref(false);
const isCollapse = computed(() => !SettingStore.isCollapse);
const hasOneShowingChild = (children = [], parent) => {
const showingChildren = children.filter((item) => {
//
@ -79,3 +100,25 @@ const hasOneShowingChild = (children = [], parent) => {
// return path.resolve(props.basePath, routePath);
// };
</script>
<style scoped>
.third-level-menu {
background: #fff;
border-radius: 4px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
min-width: 180px;
}
.el-dropdown-link {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
box-sizing: border-box;
}
.arrow-icon {
margin-left: auto;
font-size: 14px;
color: #999;
}
</style>

View File

@ -1,10 +1,3 @@
<!--
* @Description:
* @Author: zenghua.wang
* @Date: 2024-01-27 20:01:45
* @LastEditors: zenghua.wang
* @LastEditTime: 2024-03-30 14:32:07
-->
<template>
<div class="layout-sider" :class="{ 'has-logo': themeConfig.showLogo }">
<Logo v-if="themeConfig.showLogo" :is-collapse="isCollapse" />
@ -19,7 +12,7 @@
:collapse-transition="false"
:collapse="isCollapse"
>
<SubItem v-for="item in permissionRoutes" :key="item.path" :item="item" />
<SubItem v-for="item in permissionRoutes" :key="item.path" :item="item" :level="1" />
</el-menu>
</el-scrollbar>
</div>

View File

@ -1,10 +1,3 @@
<!--
* @Description: layout
* @Author: zenghua.wang
* @Date: 2024-01-26 20:13:37
* @LastEditors: zenghua.wang
* @LastEditTime: 2024-02-05 16:03:31
-->
<template>
<div
class="basic-layout"

View File

@ -4,7 +4,6 @@
ref="crudRef"
v-model:search="searchCondition"
v-model:page="pageData"
:table-loading="_loading"
:option="option"
:data="data"
@search-change="