diff --git a/src/layouts/Index.tsx b/src/layouts/Index.tsx
index 1bac49f..09a4b13 100644
--- a/src/layouts/Index.tsx
+++ b/src/layouts/Index.tsx
@@ -1,14 +1,34 @@
-import React from 'react';
+import React, { useEffect } from 'react';
// import Header from './Header';
import { Layout, Breadcrumb } from 'antd';
-const { Header, Footer, Sider, Content } = Layout;
+ import { useLocation, useIntl, Link, connect } from 'umi';
+
+import type { ConnectProps, Dispatch } from 'umi';
+const { Header, Sider, Content } = Layout;
//导入logo图片
import HeaderComponent from './Header';
import SiderMenu from './SiderMenu';
import './layout.less';
+import type { BreadcrumbModelState } from '@/models/breadcrumb';
+
+interface LayoutIndexProps extends ConnectProps {
+ breadcrumb: BreadcrumbModelState;
+ dispatch: Dispatch;
+}
+
+const LayoutIndex: React.FC
= (props) => {
+ const { children, breadcrumb, dispatch } = props;
+ const location = useLocation();
+ const intl = useIntl();
+ // 当路由变化时更新面包屑
+ useEffect(() => {
+ console.log(location)
+ dispatch({
+ type: 'breadcrumb/updateBreadcrumbs',
+ payload: { pathname: location.pathname, intl },
+ });
+ }, [location.pathname, intl, dispatch]);
-const LayoutIndex: React.FC = (props) => {
- const { children } = props;
return (
<>
@@ -21,9 +41,15 @@ const LayoutIndex: React.FC = (props) => {
- Home
- List
- App
+ {breadcrumb.breadcrumbs.map((breadcrumbItem, index) => (
+
+ {index < breadcrumb.breadcrumbs.length - 1 ? (
+ {breadcrumbItem.breadcrumbName}
+ ) : (
+ breadcrumbItem.breadcrumbName
+ )}
+
+ ))}
{children}
@@ -33,4 +59,6 @@ const LayoutIndex: React.FC = (props) => {
);
};
-export default LayoutIndex;
+export default connect(({ breadcrumb }: { breadcrumb: BreadcrumbModelState }) => ({
+ breadcrumb,
+}))(LayoutIndex);
diff --git a/src/layouts/SiderMenu.tsx b/src/layouts/SiderMenu.tsx
index d5fbfe6..2320312 100644
--- a/src/layouts/SiderMenu.tsx
+++ b/src/layouts/SiderMenu.tsx
@@ -1,5 +1,5 @@
import React, { useEffect, useState } from 'react';
-import { Menu } from 'antd';
+import { Menu, Tooltip } from 'antd';
import { useIntl, Link, useHistory } from 'umi';
import IconFont from '@/components/IconFont/IconFont';
import routerConfig from '../../config/router.config';
@@ -46,7 +46,7 @@ const generateMenuItems = (): IMenuItem[] => {
// 创建菜单项
const menuItem: IMenuItem = {
label: route.meta?.title ? `menu.${route.meta.title}` : `menu.${route.name || ''}`,
- key: route.name || '',
+ key: route.path || '',
path: routePath,
icon: route.meta?.icon || 'icon-liebiaomoshi',
};
@@ -84,10 +84,11 @@ const SiderMenu: React.FC = (props: any) => {
useEffect(() => {
// 获取当前激活菜单
const path = history.location.pathname;
- if (path.split('/').length > 1) {
- setCurrent(path.split('/')[path.split('/').length - 1]);
- return;
- }
+ setCurrent(path);
+ // if (path.split('/').length > 1) {
+ // setCurrent(path.split('/')[path.split('/').length - 1]);
+ // return;
+ // }
}, [history.location.pathname]);
// 递归渲染菜单项
@@ -95,15 +96,21 @@ const SiderMenu: React.FC = (props: any) => {
return menuItems.map((item: IMenuItem) =>
item.children && item.children.length > 0 ? (
+ <>{intl.formatMessage({ id: item.label })}
+
+ }
icon={}
>
{renderMenuItems(item.children)}
) : (
- }>
- {intl.formatMessage({ id: item.label })}
+ }>
+
+ {intl.formatMessage({ id: item.label })}
+
),
);
diff --git a/src/locales/en-US/menu.ts b/src/locales/en-US/menu.ts
index 4d22626..d3d12cc 100644
--- a/src/locales/en-US/menu.ts
+++ b/src/locales/en-US/menu.ts
@@ -18,6 +18,13 @@ export default {
'menu.评价审批详情': 'Evaluation Approval Detail',
'menu.年度审查': 'Annual Review',
+ // 数据统计模块
+ 'menu.数据统计': 'Data Statistics',
+ 'menu.供应商评价情况统计': 'Supplier Evaluation Statistics',
+ 'menu.供应商年审情况统计': 'Supplier Annual Review Statistics',
+ 'menu.供应商资质预警统计': 'Supplier Qualification Warning Statistics',
+ 'menu.供应商清退情况统计': 'Supplier Exit Statistics',
+
// 供应商年审模块
'menu.供应商年审': 'Supplier Annual Review',
'menu.年审模板管理': 'Annual Review Template Management',
diff --git a/src/locales/zh-CN/menu.ts b/src/locales/zh-CN/menu.ts
index 1f585f0..f36e3b6 100644
--- a/src/locales/zh-CN/menu.ts
+++ b/src/locales/zh-CN/menu.ts
@@ -17,6 +17,13 @@ export default {
'menu.评价结果审批': '评价结果审批',
'menu.评价审批详情': '评价审批详情',
+ // 数据统计模块
+ 'menu.数据统计': '数据统计',
+ 'menu.供应商评价情况统计': '供应商评价情况统计',
+ 'menu.供应商年审情况统计': '供应商年审情况统计',
+ 'menu.供应商资质预警统计': '供应商资质预警统计',
+ 'menu.供应商清退情况统计': '供应商清退情况统计',
+
// 供应商年审模块
'menu.供应商年审': '供应商年审',
'menu.年审模板管理': '年审模板管理',
diff --git a/src/models/breadcrumb.ts b/src/models/breadcrumb.ts
new file mode 100644
index 0000000..88e5601
--- /dev/null
+++ b/src/models/breadcrumb.ts
@@ -0,0 +1,136 @@
+import { Effect, Reducer } from 'umi';
+
+export interface BreadcrumbItem {
+ path: string;
+ breadcrumbName: string;
+}
+
+export interface BreadcrumbModelState {
+ breadcrumbs: BreadcrumbItem[];
+}
+
+export interface BreadcrumbModelType {
+ namespace: 'breadcrumb';
+ state: BreadcrumbModelState;
+ effects: {
+ updateBreadcrumbs: Effect;
+ };
+ reducers: {
+ saveBreadcrumbs: Reducer;
+ };
+}
+
+/**
+ * 生成面包屑数据
+ * @param pathname 当前路径
+ * @param intl 国际化对象
+ */
+const generateBreadcrumbs = (pathname: string, intl: any): BreadcrumbItem[] => {
+ // 如果是首页，直接返回首页
+ if (pathname === '/' || pathname === '/index') {
+ return [
+ {
+ path: '/',
+ breadcrumbName: intl.formatMessage({ id: 'menu.首页' }, { defaultMessage: '首页' }),
+ },
+ ];
+ }
+
+ // 构建面包屑数据
+ const breadcrumbs = [
+ {
+ path: '/',
+ breadcrumbName: intl.formatMessage({ id: 'menu.首页' }, { defaultMessage: '首页' }),
+ },
+ ];
+
+ // 按照斜杠分割路径
+ const pathSegments = pathname.split('/').filter(segment => segment);
+ let currentPath = '';
+
+ // 构建每一级的路径和对应的面包屑名称
+ for (let i = 0; i < pathSegments.length; i++) {
+ const segment = pathSegments[i];
+ currentPath += `/${segment}`;
+
+ // 尝试使用多语言配置
+ // 先尝试完整路径的多语言配置
+ let menuKey = `menu.${pathSegments.slice(0, i + 1).join('/')}`;
+ let menuName = intl.formatMessage({ id: menuKey }, { defaultMessage: '' });
+
+ // 如果完整路径没有对应的多语言，则尝试使用当前段的多语言
+ if (!menuName) {
+ menuKey = `menu.${segment}`;
+ menuName = intl.formatMessage({ id: menuKey }, { defaultMessage: '' });
+ }
+
+ // 如果仍然没有找到多语言配置，尝试使用特定页面的多语言配置
+ if (!menuName) {
+ // 处理特殊情况，如数据统计下的子页面
+ if (pathSegments[0] === 'dataStatistics') {
+ switch (segment) {
+ case 'supplierEvaluateStatistics':
+ menuName = intl.formatMessage({ id: 'menu.供应商评价情况统计' }, { defaultMessage: '供应商评价情况统计' });
+ break;
+ case 'supplierAnnualStatistics':
+ menuName = intl.formatMessage({ id: 'menu.供应商年审情况统计' }, { defaultMessage: '供应商年审情况统计' });
+ break;
+ case 'supplierQualificationWarningStatistics':
+ menuName = intl.formatMessage({ id: 'menu.供应商资质预警统计' }, { defaultMessage: '供应商资质预警统计' });
+ break;
+ case 'supplierExitStatistics':
+ menuName = intl.formatMessage({ id: 'menu.供应商清退情况统计' }, { defaultMessage: '供应商清退情况统计' });
+ break;
+ default:
+ menuName = segment;
+ }
+ } else if (pathSegments[0] === 'supplierEvaluate') {
+ // 处理供应商评价模块
+ menuName = intl.formatMessage({ id: `menu.${segment}` }, { defaultMessage: segment });
+ } else if (pathSegments[0] === 'supplierAnnual') {
+ // 处理供应商年审模块
+ menuName = intl.formatMessage({ id: `menu.${segment}` }, { defaultMessage: segment });
+ } else {
+ menuName = segment;
+ }
+ }
+
+ breadcrumbs.push({
+ path: currentPath,
+ breadcrumbName: menuName || segment,
+ });
+ }
+
+ return breadcrumbs;
+};
+
+const BreadcrumbModel: BreadcrumbModelType = {
+ namespace: 'breadcrumb',
+
+ state: {
+ breadcrumbs: [],
+ },
+
+ effects: {
+ *updateBreadcrumbs({ payload }, { put }) {
+ const { pathname, intl } = payload;
+ console.log(pathname)
+ const breadcrumbs = generateBreadcrumbs(pathname, intl);
+ yield put({
+ type: 'saveBreadcrumbs',
+ payload: breadcrumbs,
+ });
+ },
+ },
+
+ reducers: {
+ saveBreadcrumbs(state, { payload }) {
+ return {
+ ...state,
+ breadcrumbs: payload,
+ };
+ },
+ },
+};
+
+export default BreadcrumbModel;
diff --git a/src/models/readme.md b/src/models/readme.md
index abcffd4..a649421 100644
--- a/src/models/readme.md
+++ b/src/models/readme.md
@@ -3,4 +3,6 @@ dva 模块
supplierAnnualTaskManage 年审任务功能模块
-supplierTaskManage 年审任务功能模块
\ No newline at end of file
+supplierTaskManage 年审任务功能模块
+
+breadcrumb 面包屑导航模块
diff --git a/src/pages/supplierEvaluateManage/supplierTemplateManage/supplierTemplateManageAdd.tsx b/src/pages/supplierEvaluateManage/supplierTemplateManage/supplierTemplateManageAdd.tsx
index 01807ff..f26106a 100644
--- a/src/pages/supplierEvaluateManage/supplierTemplateManage/supplierTemplateManageAdd.tsx
+++ b/src/pages/supplierEvaluateManage/supplierTemplateManage/supplierTemplateManageAdd.tsx
@@ -238,7 +238,6 @@ const SupplierTemplateManageAdd: React.FC = () => {
return (
-
{isEdit ? '编辑评价模板' : '新增评价模板'}
@@ -392,7 +391,6 @@ const SupplierTemplateManageAdd: React.FC = () => {
</Space>
</div>
</Form>
- </Card>
</div>
);
};