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

2026-05-17 22:07:34 +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,183 @@
+import { useRoute, useRouter } from "vue-router";
+import { ref, watch, onMounted, onUnmounted, resolveComponent, nextTick, defineComponent } from "vue";
+import * as _ from "lodash-es";
+import BScroll from "better-scroll";
+import "./index.less";
+import { utils } from "@fast-crud/fast-crud";
+import { routerUtils } from "/@/utils/util.router";
+
+defineOptions()
+
+export default defineComponent({
+  name: "FsMenu",
+  inheritAttrs: true,
+  props: {
+    menus: {},
+    expandSelected: {
+      default: false
+    },
+    scroll: {}
+  },
+  setup(props, ctx) {
+    async function onSelect(item: any) {
+      await routerUtils.open(item.key);
+    }
+
+    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;
+    }
+    items.value = buildItemMenus(props.menus);
+    console.log("items", items.value);
+    const fsIcon = resolveComponent("FsIcon");
+
+    const buildMenus = (children: any) => {
+      const slots: any = [];
+      if (children == null) {
+        return slots;
+      }
+      for (const sub of children) {
+        if (sub.meta?.show != null) {
+          if (sub.meta.show === false || (typeof sub.meta.show === "function" && !sub.meta.show())) {
+            continue;
+          }
+        }
+        const title: any = () => {
+          const icon = sub.icon || sub?.meta?.icon;
+          if (icon) {
+            // @ts-ignore , anticon必须要有，不然不能折叠
+            return (
+              <div class={"menu-item-title"}>
+                <fsIcon class={"anticon"} icon={icon} />
+                <span>{sub.title}</span>
+              </div>
+            );
+          }
+          return sub.title;
+        };
+        if (sub.children && sub.children.length > 0) {
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          const subSlots = {
+            default: () => {
+              return buildMenus(sub.children);
+            },
+            title
+          };
+          function onTitleClick() {
+            if (sub.path && ctx.attrs.mode === "horizontal") {
+              open(sub.path);
+            }
+          }
+          slots.push(<a-sub-menu key={sub.path} v-slots={subSlots} />);
+        } else {
+          slots.push(
+            <a-menu-item key={sub.path} title={sub.title}>
+              {title}
+            </a-menu-item>
+          );
+        }
+      }
+      return slots;
+    };
+    const slots = {
+      default() {
+        return buildMenus(props.menus);
+      }
+    };
+    const selectedKeys = ref([]);
+    const openKeys = ref([]);
+
+    const route = useRoute();
+    const router = useRouter();
+
+    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;
+    }
+
+    // const { asideMenuRef, onOpenChange } = useBetterScroll(props.scroll as any);
+
+    watch(
+      () => {
+        return route.fullPath;
+      },
+      (path) => {
+        // path = route.fullPath;
+        selectedKeys.value = [path];
+        const changed = openSelectedParents(path);
+        if (changed) {
+          // onOpenChange();
+        }
+      },
+      {
+        immediate: true
+      }
+    );
+    return () => {
+      const menu = (
+        <a-menu
+          mode={"inline"}
+          theme={"light"}
+          // v-slots={slots}
+          // onClick={onSelect}
+          // onOpenChange={onOpenChange}
+          v-models={[
+            [openKeys.value, "openKeys"],
+            [selectedKeys.value, "selectedKeys"]
+          ]}
+          items={items.value}
+          inlineCollapsed={!props.expandSelected}
+        />
+      );
+      const classNames = { "fs-menu-wrapper": true, "fs-menu-better-scroll": props.scroll };
+      return <div>{menu}</div>;
+    };
+  }
+});