三级菜单效果修改

sub-government-affairs-service/src/layouts/component/Hamburger/index.vue

@@ -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>

sub-government-affairs-service/src/layouts/component/Menu/Icon.vue

@@ -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>

sub-government-affairs-service/src/layouts/component/Menu/Link.vue

@@ -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 />

sub-government-affairs-service/src/layouts/component/Menu/SubItem.vue

@@ -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 + '1' }}</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>

sub-government-affairs-service/src/layouts/component/Sider/index.vue

@@ -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>

sub-government-affairs-service/src/layouts/index.vue

@@ -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"

sub-government-affairs-service/src/views/inputSuppliesManage/useSupervise/index.vue

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