fix: 修复左侧菜单收起时无法展开子菜单的bug

2026-05-17 13:57:31 +08:00 · 2024-12-24 17:09:06 +08:00
parent 8ebf95a222
commit 005622307e
21 changed files with 367 additions and 172 deletions
@@ -0,0 +1,118 @@
+<template>
+  <a-menu v-model:open-keys="openKeys" v-model:selected-keys="selectedKeys" class="fs-menu" mode="inline" theme="light" :items="items" @click="onClick" />
+</template>
+
+<script lang="tsx" setup>
+import { ref, watch, defineOptions } from "vue";
+import { routerUtils } from "/@/utils/util.router";
+import { useRoute } from "vue-router";
+import { utils } from "@fast-crud/fast-crud";
+import * as _ from "lodash-es";
+
+defineOptions({
+  name: "FsMenu"
+});
+
+const props = defineProps<{
+  menus: any[];
+  expandSelected: boolean;
+}>();
+
+const items = ref([]);
+
+function buildItemMenus(menus: any) {
+  if (menus == null) {
+    return;
+  }
+  const list: any = [];
+  for (const sub of menus) {
+    const item: any = {
+      key: sub.path,
+      label: sub.title,
+      title: sub.title,
+      icon: () => {
+        return <fsIcon icon={sub.icon ?? sub.meta?.icon} />;
+      }
+    };
+    list.push(item);
+    if (sub.children && sub.children.length > 0) {
+      item.children = buildItemMenus(sub.children);
+    }
+  }
+  return list;
+}
+
+watch(
+  () => props.menus,
+  (menus) => {
+    items.value = buildItemMenus(menus);
+  },
+  { immediate: true }
+);
+
+async function onClick(item: any) {
+  await routerUtils.open(item.key);
+}
+const route = useRoute();
+const selectedKeys = ref([]);
+const openKeys = ref([]);
+
+function openSelectedParents(fullPath: any) {
+  if (!props.expandSelected) {
+    return;
+  }
+  if (props.menus == null) {
+    return;
+  }
+  const keys: any = [];
+  let changed = false;
+  utils.deepdash.forEachDeep(props.menus, (value: any, key: any, parent: any, context: any) => {
+    if (value == null) {
+      return;
+    }
+    if (value.path === fullPath) {
+      _.forEach(context.parents, (item) => {
+        if (item.value instanceof Array) {
+          return;
+        }
+        keys.push(item.value.path);
+      });
+    }
+  });
+  if (keys.length > 0) {
+    for (const key of keys) {
+      if (openKeys.value.indexOf(key) === -1) {
+        openKeys.value.push(key);
+        changed = true;
+      }
+    }
+  }
+  return changed;
+}
+watch(
+  () => {
+    return route.fullPath;
+  },
+  (path) => {
+    // path = route.fullPath;
+    selectedKeys.value = [path];
+    const changed = openSelectedParents(path);
+    if (changed) {
+      // onOpenChange();
+    }
+  },
+  {
+    immediate: true
+  }
+);
+</script>
+<style lang="less">
+.fs-menu {
+  height: 100%;
+  overflow-y: auto;
+  .fs-icon {
+    font-size: 16px !important;
+    min-width: 16px !important;
+  }
+}
+</style>