封装供应商弹框详情组件

src/layouts/BasicLayout.tsx

@@ -8,8 +8,8 @@ import routes from '../../config/router.config'; // 引入你的自定义路由
 import { ConfigProvider, Breadcrumb } from 'antd';
 import HeaderComponent from './Header';
 import IconFont from '@/components/IconFont/IconFont';
-import { BreadcrumbState } from '@/models/breadcrumb';
-
+import type { BreadcrumbState } from '@/models/breadcrumb';
+import { SupplierDetailModalProvider } from '@/components/SupplierDetailModalContext/SupplierDetailModalContext';
 
 const MenuRender = (item: any, isSubMenu: boolean) => {
   const intl = useIntl();
@@ -35,10 +35,10 @@ const MenuRender = (item: any, isSubMenu: boolean) => {
 };
 
 // 递归交集过滤函数
-function filterMenuByRouter(routes:any, menuRoutes:any) {
-  return routes.reduce((result:any, route:any) => {
+function filterMenuByRouter(routes: any, menuRoutes: any) {
+  return routes.reduce((result: any, route: any) => {
     // 只看有 name 的节点
-    const menu = menuRoutes.find(m => m.name === route.name);
+    const menu = menuRoutes.find((m) => m.name === route.name);
     if (menu) {
       // 匹配到后，递归处理 children
       let children = [];
@@ -56,7 +56,12 @@ function filterMenuByRouter(routes:any, menuRoutes:any) {
   }, []);
 }
 
-const BreadcrumbRender = (routeBreadcrumb: any, intl: any, history: any, dynamicBreadcrumbName: string | null) => {
+const BreadcrumbRender = (
+  routeBreadcrumb: any,
+  intl: any,
+  history: any,
+  dynamicBreadcrumbName: string | null,
+) => {
   const breadcrumbRoutes = routeBreadcrumb?.routes;
   return (
     <Breadcrumb>
@@ -65,22 +70,17 @@ const BreadcrumbRender = (routeBreadcrumb: any, intl: any, history: any, dynamic
           history.push('/');
         }}
       >
-        <span style={{ cursor: 'pointer' }}>
-          {intl.formatMessage({ id: 'menu.首页' })}
-        </span>
+        <span style={{ cursor: 'pointer' }}>{intl.formatMessage({ id: 'menu.首页' })}</span>
       </Breadcrumb.Item>
       {breadcrumbRoutes?.map((item: any, index: number) => {
         // 判断是否是最后一个面包屑项且存在动态名称
-        const isLastItem = index === (breadcrumbRoutes.length - 1);
-        const displayName = (isLastItem && dynamicBreadcrumbName)
-          ? dynamicBreadcrumbName
-          : intl.formatMessage({ id: `menu.${item.breadcrumbName}` || '' });
+        const isLastItem = index === breadcrumbRoutes.length - 1;
+        const displayName =
+          isLastItem && dynamicBreadcrumbName
+            ? dynamicBreadcrumbName
+            : intl.formatMessage({ id: `menu.${item.breadcrumbName}` || '' });
 
-        return (
-          <Breadcrumb.Item key={item.path}>
-            {displayName}
-          </Breadcrumb.Item>
-        );
+        return <Breadcrumb.Item key={item.path}>{displayName}</Breadcrumb.Item>;
       })}
     </Breadcrumb>
   );
@@ -106,47 +106,47 @@ const BasicLayout: React.FC<BasicLayoutProps> = (props) => {
       // routes是本地静态路由，menusFromApi是接口菜单
       const finalMenus = filterMenuByRouter(routes, menusFromApi);
       console.log(finalMenus);
-      
+
       setMenuRoutes(finalMenus);
     }
   }, []);
 
-
   return (
     <ConfigProvider>
-      <ProLayout
-        {...defaultSettings}
-        route={{ routes }}
-        // route={{ routes: menuRoutes }}
-        subMenuItemRender={(menuItemProps, defaultDom) => {
-          return MenuRender(menuItemProps, true);
-        }}
-        menuItemRender={(item, dom) => {
-          return MenuRender(item, false);
-        }}
-        location={location}
-        fixSiderbar
-        layout="mix"
-        headerRender={() => {
-          return <HeaderComponent />;
-        }}
-      >
-        <PageContainer
-          ghost={true}
-          header={{
-            title: false,
-            breadcrumbRender: ({ breadcrumb: routeBreadcrumb }) =>
-              BreadcrumbRender(routeBreadcrumb, intl, history, breadcrumb.breadcrumbName),
+      <SupplierDetailModalProvider>
+        <ProLayout
+          {...defaultSettings}
+          route={{ routes }}
+          // route={{ routes: menuRoutes }}
+          subMenuItemRender={(menuItemProps, defaultDom) => {
+            return MenuRender(menuItemProps, true);
+          }}
+          menuItemRender={(item, dom) => {
+            return MenuRender(item, false);
+          }}
+          location={location}
+          fixSiderbar
+          layout="mix"
+          headerRender={() => {
+            return <HeaderComponent />;
           }}
         >
-          {children}
-        </PageContainer>
-      </ProLayout>
+          <PageContainer
+            ghost={true}
+            header={{
+              title: false,
+              breadcrumbRender: ({ breadcrumb: routeBreadcrumb }) =>
+                BreadcrumbRender(routeBreadcrumb, intl, history, breadcrumb.breadcrumbName),
+            }}
+          >
+            {children}
+          </PageContainer>
+        </ProLayout>
+      </SupplierDetailModalProvider>
     </ConfigProvider>
   );
 };
 
 export default connect(({ breadcrumb }: { breadcrumb: BreadcrumbState }) => ({
-  breadcrumb
+  breadcrumb,
 }))(BasicLayout);
-