增加个人中心页面

config/router.config.ts

@@ -39,6 +39,12 @@ export default [
         icon: 'icon-shouye',
         component: '@/pages/index',
       },
+      {
+        path: '/PersonalInfo',
+        name: "个人中心",
+        icon: 'icon-shouye',
+        component: '@/pages/PersonalInfo',
+      },
       // 供应商评价分组
       {
         name: '供应商评价',

src/layouts/BasicLayout.tsx

@@ -168,7 +168,16 @@ const BasicLayout: React.FC<BasicLayoutProps> = (props) => {
       const menus = JSON.parse(menuStr);
       const filteredMenus = filterMenusByLocalConfig(routes, menus);
       console.log(filteredMenus,'filteredMenus');
-      
+      const hasPersonalInfo = filteredMenus.some(item => item.path === '/PersonalInfo');
+      if (!hasPersonalInfo) {
+        filteredMenus.push({
+          path: '/PersonalInfo',
+          name: "个人中心",
+          icon: 'icon-shouye',
+          component: '@/pages/PersonalInfo',
+          hideInMenu: true
+        });
+      }
       setMenuRoutes(convertMenuData(filteredMenus));
     }
   }, []);

src/layouts/User.tsx

@@ -55,9 +55,7 @@ const User: React.FC<PageProps> = ({ user, dispatch }) => {
         },
       });
     } else if(e.key === 'profile') {
-      console.log(111);
-      
-      // history.push('/profile');
+      history.push('/PersonalInfo');
     }
   };
   return (

src/locales/en-US/menu.ts

@@ -1,6 +1,6 @@
 export default {
   'menu.首页': 'Home',
-
+  'menu.个人中心': 'Personal Center',
   // 供应商评价模块
   'menu.供应商评价': 'Supplier Evaluation',
   'menu.模板管理': 'Template Management',

src/locales/zh-CN/menu.ts

@@ -1,5 +1,6 @@
 export default {
   'menu.首页': '首页',
+  'menu.个人中心': '个人中心',
 
   // 供应商评价模块
   'menu.供应商评价': '供应商评价',

src/pages/PersonalInfo/index.tsx

@@ -0,0 +1,65 @@
+import React, { useEffect, useState } from 'react';
+import { Descriptions, Spin, message } from 'antd';
+import { useIntl } from 'umi';
+import { getUserInfo } from './services';
+
+// 性别转中文
+const getGenderLabel = (sex: string | number | undefined) => {
+  if (sex === '1' || sex === 1) return '男';
+  if (sex === '0' || sex === 0) return '女';
+  return '';
+};
+
+const PersonalInfo: React.FC = () => {
+  const intl = useIntl();
+  const [userInfo, setUserInfo] = useState<any>({});
+  const [loading, setLoading] = useState<boolean>(true);
+
+  useEffect(() => {
+    setLoading(true);
+    getUserInfo()
+      .then(res => {
+        if (res.code === 200 && res.data) {
+          setUserInfo(res.data);
+        } else {
+          message.error('获取用户信息失败');
+        }
+      })
+      .catch(() => {
+        message.error('获取用户信息失败');
+      })
+      .finally(() => {
+        setLoading(false);
+      });
+  }, []);
+
+  return (
+
+     <div className="common-container">
+      <Spin spinning={loading}>
+        <Descriptions bordered column={2} labelStyle={{ width: '120px' }}>
+          <Descriptions.Item label={intl.formatMessage({ id: 'page.workbench.personal.name' })}>
+            {userInfo.contactsName || '-'}
+          </Descriptions.Item>
+          <Descriptions.Item label={intl.formatMessage({ id: 'page.workbench.personal.gender' })}>
+            {getGenderLabel(userInfo.sex)}
+          </Descriptions.Item>
+          <Descriptions.Item label={intl.formatMessage({ id: 'page.workbench.personal.phone' })}>
+            {userInfo.mobile || userInfo.contactsPhone || '-'}
+          </Descriptions.Item>
+          <Descriptions.Item label={intl.formatMessage({ id: 'page.workbench.personal.email' })}>
+            {userInfo.contactsEmail || '-'}
+          </Descriptions.Item>
+          <Descriptions.Item label={intl.formatMessage({ id: 'page.workbench.personal.department' })}>
+            {userInfo.orgName || '-'}
+          </Descriptions.Item>
+          <Descriptions.Item label={intl.formatMessage({ id: 'page.workbench.personal.position' })}>
+            {userInfo.position || '-'}
+          </Descriptions.Item>
+        </Descriptions>
+      </Spin>
+    </div> 
+  );
+};
+
+export default PersonalInfo;

src/pages/PersonalInfo/services.ts

@@ -0,0 +1,11 @@
+import request from '@/utils/request';
+
+/**
+ * 用户信息
+ */
+export async function getUserInfo() {
+  return request('/coscoSupplierUser/user/info', {
+    method: 'GET'
+  });
+}
+