@das-fed/ui 1.1.4 → 6.3.0-beta.0

package/packages/business-components/layout-breadcrumb/index.js

@@ -1,61 +1,87 @@
-import { ref, computed, watch, defineComponent, inject, nextTick, openBlock, createElementBlock, createVNode, unref, createCommentVNode } from 'vue';
+import { ref, computed, watch, nextTick, defineComponent, openBlock, createElementBlock, createVNode, createCommentVNode } from 'vue';
 import { withInstall } from '@das-fed/utils';
 import { DasBreadCrumb } from '@das-fed/ui';
-import { flatTree, getUrlParams } from '@das-fed/utils/common-tools';
+import { useRoute } from 'vue-router';
+import { flatTree } from '@das-fed/utils/common-tools';
 import { getSubApps } from '@das-fed/utils/common-info';
-import { getConfig } from '@das-fed/utils/config';
 import { setThemeRule } from '@das-fed/web';
 
 const useBreadcrumb = (props, emit) => {
-  const subApps = getSubApps();
   const menuBreadList = ref([]);
   const breadcrumbList = computed(() => [...menuBreadList.value, ...props.data || []]);
-  const activeMenu = computed(() => subApps?.currentSubApp?.currentMenuCode);
-  const getMenuBreadCrumb = (code) => {
+  const getMenuBreadCrumb = async (path, query) => {
+    await nextTick();
+    const subApps = getSubApps();
     const menuList = [];
+    const menuCode = query.menu || "";
     const currentMenus = subApps.currentSubApp?.menus ?? [];
-    if (currentMenus && currentMenus.length) {
-      const flatMenus = flatTree(currentMenus);
-      const currentMenu = flatMenus.find((item) => item.code === code);
-      if (currentMenu) {
-        const codeArr = currentMenu.code.split(".");
-        if (codeArr.length === 3) {
-          const firstMenuCode = codeArr.slice(0, 2).join(".");
-          const fistMenu = flatMenus.find((item) => item.code === firstMenuCode);
-          menuList.push({ name: fistMenu.name, isMenu: true, disabled: true });
-        }
-        const routeItem = {
-          name: currentMenu.name,
-          routerPath: currentMenu.routeUrl,
-          isMenu: true
-        };
-        menuList.push(routeItem);
+    if (!currentMenus || !currentMenus.length) return;
+    let currentMenu = null;
+    const flatMenus = flatTree(currentMenus);
+    if (!menuCode) {
+      currentMenu = flatMenus.find((item) => item.routeUrl && item.routeUrl === path);
+    } else {
+      currentMenu = flatMenus.find((item) => item.code === menuCode);
+    }
+    if (currentMenu) {
+      const codeArr = currentMenu.code.split(".");
+      if (codeArr.length === 3) {
+        const firstMenuCode = codeArr.slice(0, 2).join(".");
+        const fistMenu = flatMenus.find((item) => item.code === firstMenuCode || item.originalCode === firstMenuCode);
+        menuList.push({ name: fistMenu?.name ?? "", isMenu: true, disabled: true });
       }
-      menuBreadList.value = menuList;
+      const routeItem = {
+        name: currentMenu?.name ?? "",
+        routerPath: currentMenu?.routeUrl ?? "",
+        isMenu: true
+      };
+      menuList.push(routeItem);
     }
+    menuBreadList.value = menuList;
+  };
+  const clickItem = (item) => {
+    if (item.disabled) return;
+    emit("click-item", item);
   };
+  const route = useRoute();
   watch(
-    () => activeMenu.value,
-    (val) => {
-      getMenuBreadCrumb(val);
+    () => route,
+    (newVal) => {
+      const path = newVal.path ?? "";
+      const query = newVal.query ?? {};
+      getMenuBreadCrumb(path, query);
     },
     { immediate: true }
   );
-  const clickItem = (item) => {
-    if (item.disabled)
-      return;
-    emit("click-item", item);
-  };
+  const isShow = ref(false);
+  watch(
+    () => props.data,
+    () => {
+      nextTick(() => {
+        const subApps = getSubApps();
+        const appCode = route.query.app || subApps.currentSubApp.code || "";
+        let menuCode = route.query.menu || "";
+        if (!menuCode) {
+          const currentMenus = subApps.currentSubApp?.menus ?? [];
+          const flatMenus = flatTree(currentMenus);
+          const currentMenu = flatMenus.find((item) => item.routeUrl && item.routeUrl === location.pathname);
+          if (currentMenu) menuCode = currentMenu.code;
+        }
+        const breadcrumbConfig = JSON.parse(sessionStorage.getItem("breadcrumb") || "{}")[appCode];
+        const showList = [];
+        for (let key in breadcrumbConfig) if (breadcrumbConfig[key]) showList.push(key);
+        isShow.value = !!showList.find((item) => menuCode === item);
+      });
+    },
+    { deep: true, immediate: true }
+  );
   return {
+    isShow,
     breadcrumbList,
     clickItem
   };
 };
 
-const _hoisted_1 = {
-  key: 0,
-  class: "layout-breadcrumb"
-};
 const __default__ = {
   name: "LayoutBreadCrumb"
 };
@@ -65,38 +91,16 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     data: { type: Array, required: false, default: () => [] }
   },
   emits: ["click-item"],
-  setup(__props, { emit: __emit }) {
-    const config = getConfig();
+  setup(__props, { expose: __expose, emit: __emit }) {
+    __expose();
     const props = __props;
     const emit = __emit;
-    const { breadcrumbList, clickItem } = useBreadcrumb(props, emit);
-    const isShow = ref(false);
-    inject(`${config.microAppName}-appConfig`);
-    const subApps = getSubApps();
-    getUrlParams(location.href, "app") || "";
-    const appCode = subApps.currentSubAppCode;
-    watch(
-      () => props.data,
-      () => {
-        nextTick(() => {
-          const breadcrumbConfig = JSON.parse(sessionStorage.getItem("breadcrumb") || "{}")[appCode];
-          const showList = [];
-          for (let key in breadcrumbConfig)
-            if (breadcrumbConfig[key])
-              showList.push(key);
-          isShow.value = !!showList.find((item) => getUrlParams(location.href, "menu") === item);
-        });
-      },
-      { deep: true, immediate: true }
-    );
-    return (_ctx, _cache) => {
-      return isShow.value && _ctx.data && _ctx.data.length ? (openBlock(), createElementBlock("div", _hoisted_1, [
-        createVNode(unref(DasBreadCrumb), {
-          data: unref(breadcrumbList),
-          onClickItem: unref(clickItem)
-        }, null, 8, ["data", "onClickItem"])
-      ])) : createCommentVNode("v-if", true);
-    };
+    const { isShow, breadcrumbList, clickItem } = useBreadcrumb(props, emit);
+    const __returned__ = { props, emit, isShow, breadcrumbList, clickItem, get DasBreadCrumb() {
+      return DasBreadCrumb;
+    } };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
   }
 });
 
@@ -108,7 +112,19 @@ var _export_sfc = (sfc, props) => {
   return target;
 };
 
-var LayoutBreadcrumb = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-806272f8"], ["__file", "E:\\company-code\\v6r3\\framework-3\\packages\\das-ui\\packages\\business-components\\layout-breadcrumb\\src\\index.vue"]]);
+const _hoisted_1 = {
+  key: 0,
+  class: "layout-breadcrumb"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return $setup.isShow && $props.data && $props.data.length ? (openBlock(), createElementBlock("div", _hoisted_1, [
+    createVNode($setup["DasBreadCrumb"], {
+      data: $setup.breadcrumbList,
+      onClickItem: $setup.clickItem
+    }, null, 8, ["data", "onClickItem"])
+  ])) : createCommentVNode("v-if", true);
+}
+var LayoutBreadcrumb = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-806272f8"], ["__file", "/Users/xiecp/das/das-fe/framework/packages/das-ui/packages/business-components/layout-breadcrumb/src/index.vue"]]);
 
 var theme = {
   "--das-layout-micro-container-bg-color": "#e2e7ef",