个人中心

config/cacheRoutes.js

@@ -2,7 +2,8 @@ const routes = [
   '/system/role',
   '/system/menu',
   '/system/dept',
-  '/system/user'
+  '/system/user',
+  '/system/center'
 ]
 
 export default {

config/config.js

@@ -98,6 +98,11 @@ export default defineConfig({
                   icon: 'SolutionOutlined',
                   component: './user/manage',
                 },
+                {
+                  path: '/system/center',
+                  name: 'center',
+                  component: './user/center',
+                },
               ],
             },
             {

src/components/Business/MenuTree/index.jsx

@@ -22,6 +22,7 @@ const MenuTree = (props, ref) => {
   const [halfCheckedKeys, setHalfCheckedKeys] = useState([])
   const [selectedKeys, setSelectedKeys] = useState([]);
   const [autoExpandParent, setAutoExpandParent] = useState(true);
+  const [checkStrictly, setCheckStrictly] = useState(true)
 
   const queryMenu = async () => {
     const res = await getMenu()
@@ -66,13 +67,14 @@ const MenuTree = (props, ref) => {
   useImperativeHandle(ref, () => ({
     setCheckedKeys,
     getCheckedKeys,
-    getHalfCheckedKeys
+    getHalfCheckedKeys,
+    setCheckStrictly
   }))
 
   return (
     <SageTree
       checkable
-      // checkStrictly
+      // checkStrictly={checkStrictly}
       onExpand={onExpand}
       expandedKeys={expandedKeys}
       autoExpandParent={autoExpandParent}

src/components/Common/Message/index.jsx

 import { message } from 'antd'
 
-const sageMessage = {
+const SageMessage = {
   success: (text) => message.success(text)
 }
 
-export default sageMessage
+export default SageMessage

src/components/Common/index.js

@@ -4,7 +4,7 @@ import ActionSet from './ActionSet'
 import SageModal from './Modal'
 import SageForm from './Form'
 import SageTree from './Tree'
-import sageMessage from './Message'
+import SageMessage from './Message'
 import SageLayoutLR from './Layout/LayoutLR'
 
 export {
@@ -15,5 +15,5 @@ export {
   SageModal,
   SageForm,
   SageTree,
-  sageMessage
+  SageMessage
 }

src/components/GlobalHeader/AvatarDropdown.jsx

@@ -31,6 +31,11 @@ class AvatarDropdown extends React.Component {
       return;
     }
 
+    if (key === 'center') {
+      this.props.goCenter()
+      return;
+    }
+
     history.push(`/account/${key}`);
   };
 
@@ -45,12 +50,6 @@ class AvatarDropdown extends React.Component {
     const menuHeaderDropdown = (
       <Menu className={styles.menu} selectedKeys={[]} onClick={this.onMenuClick}>
         {menu && (
-          <Menu.Item key="center">
-            <UserOutlined />
-            个人中心
-          </Menu.Item>
-        )}
-        {menu && (
           <Menu.Item key="settings">
             <SettingOutlined />
             个人设置
@@ -58,6 +57,10 @@ class AvatarDropdown extends React.Component {
         )}
         {menu && <Menu.Divider />}
 
+        <Menu.Item key="center">
+          <UserOutlined />
+          个人中心
+        </Menu.Item>
         <Menu.Item key="logout">
           <LogoutOutlined />
           退出登录

src/components/GlobalHeader/RightContent.jsx

@@ -21,6 +21,10 @@ const GlobalHeaderRight = props => {
     className = `${styles.right}  ${styles.dark}`;
   }
 
+  const goCenter = () => {
+    props.goCenter()
+  }
+
   return (
     <div className={className}>
       {/* <HeaderSearch
@@ -61,7 +65,7 @@ const GlobalHeaderRight = props => {
         //   </a>
         // </Tooltip>
       }
-      <Avatar />
+      <Avatar goCenter={goCenter} />
       {REACT_APP_ENV && (
         <span>
           <Tag color={ENVTagColor[REACT_APP_ENV]}>{REACT_APP_ENV}</Tag>

src/components/TabBar/index.jsx

@@ -161,9 +161,16 @@ const TabBar = (props, ref) => {
     </Menu>
   );
 
+  const getPanes = () => {
+    return panes
+  }
+
   // 暴露外部方法
   useImperativeHandle(ref, () => ({
     onChange,
+    getPanes,
+    setPanes,
+    setActiveKey
   }));
 
   return (

src/config.js

+export default {
+  IconUrl: '//at.alicdn.com/t/font_1873986_zq2zexdsrnm.js'
+}

src/layouts/BasicLayout.jsx

@@ -13,6 +13,7 @@ import RightContent from '@/components/GlobalHeader/RightContent';
 import TabBar from '@/components/TabBar';
 import GlobalFooter from '@/components/GlobalFooter';
 import { getAuthorityFromRouter } from '@/utils/utils';
+import config from '@/config.js'
 import logo from '../assets/logo.svg';
 
 import './BasicLayout.less'
@@ -20,7 +21,7 @@ import './BasicLayout.less'
 const { REACT_APP_ENV } = process.env;
 
 const IconFont = createFromIconfontCN({
-  scriptUrl: '//at.alicdn.com/t/font_1873986_46xeik9dra8.js',
+  scriptUrl: config.IconUrl,
 });
 
 const { SubMenu } = Menu;
@@ -240,7 +241,21 @@ const BasicLayout = (props) => {
    * init variables
    */
 
-  console.log(props.children)
+  // 跳转到个人中心
+  const goCenter = () => {
+    checkMenuOpen('/system/center')
+    handleSelectMenu({key: '/system/center'})
+    // const panes = tabBarRef.current.getPanes()
+    // if (!panes.some(item => item.key === '/system/center')) {
+    //   panes.push({
+    //     title: '个人中心',
+    //     key: '/system/center'
+    //   })
+    //   tabBarRef.current.setPanes(panes);
+    // }
+    // tabBarRef.current.setActiveKey('/system/center');
+    // history.push('/system/center');
+  }
 
   return (
 
@@ -277,9 +292,10 @@ const BasicLayout = (props) => {
                 collapsed ? <MenuUnfoldOutlined style={{ fontSize: '20px' }} /> : <MenuFoldOutlined style={{ fontSize: '20px' }}  />
               }
             </div>
-            <RightContent />
+            <RightContent goCenter={goCenter} />
           </div>
-          <TabBar ref={tabBarRef}
+          <TabBar
+            ref={tabBarRef}
             currentUser={currentUser}
             menuTree={menuTree}
             setSelectedKeys={setSelectedKeys}

src/pages/demo/crud/index.jsx

 import React, { useState, useEffect, useRef } from 'react'
 import { PageHeaderWrapper } from '@ant-design/pro-layout'
-import { SageTable, SageModal, SageButton, sageMessage, ActionSet } from '@/components/Common'
+import { SageTable, SageModal, SageButton, SageMessage, ActionSet } from '@/components/Common'
 import { PlusOutlined, EditOutlined, DeleteOutlined, VerticalAlignBottomOutlined, VerticalAlignTopOutlined } from '@ant-design/icons';
 import moment from 'moment';
 import { getEnumDropDownList } from '@/services/enum'
@@ -199,7 +199,7 @@ const CrudList = () => {
 
     const res = await removeCrud({ idArr: [record.id] })
     if (res.isSuccess) {
-      sageMessage.success('删除成功')
+      SageMessage.success('删除成功')
       tableRef.current.reloadTable()
     }
   }
@@ -426,7 +426,7 @@ const CrudList = () => {
     const rowRecords = tableRef.current.getSelectedRowKeys()
     const res = await removeCrud({ idArr: rowRecords })
     if (res.isSuccess) {
-      sageMessage.success('删除成功')
+      SageMessage.success('删除成功')
       tableRef.current.reloadTable()
     }
   }
@@ -504,7 +504,7 @@ const CrudList = () => {
     setModalLoading(false)
 
     if (res.isSuccess) {
-      sageMessage.success('保存成功')
+      SageMessage.success('保存成功')
       modalRef.current.setVisible(false)
       tableRef.current.reloadTable()
     }

src/pages/dept/index.jsx

 import React, { useState, useEffect, useRef } from 'react'
 import { PageHeaderWrapper } from '@ant-design/pro-layout'
 import { Switch, Modal } from 'antd'
-import { SageTable, SageModal, SageButton, sageMessage, ActionSet } from '@/components/Common'
+import { SageTable, SageModal, SageButton, SageMessage, ActionSet } from '@/components/Common'
 import { PlusOutlined, EditOutlined, SwapOutlined, ExclamationCircleOutlined, DeleteOutlined, VerticalAlignBottomOutlined, VerticalAlignTopOutlined } from '@ant-design/icons';
 import moment from 'moment';
 import { getEnumDropDownList } from '@/services/enum'
@@ -110,7 +110,7 @@ const DeptList = () => {
 
     const res = await removeDept({ id: record.id })
     if (res.isSuccess) {
-      sageMessage.success('删除成功')
+      SageMessage.success('删除成功')
       tableRef.current.reloadTable()
     }
   }
@@ -138,7 +138,7 @@ const DeptList = () => {
           }
           loopChangeStatus(tableData)
           tableRef.current.setDataSource(tableData)
-          sageMessage.success(checked ? '启用成功' : '禁用成功')
+          SageMessage.success(checked ? '启用成功' : '禁用成功')
         }
       },
       onCancel: () => {
@@ -253,7 +253,7 @@ const DeptList = () => {
     const rowRecords = tableRef.current.getSelectedRowKeys()
     const res = await removeDept({ idArr: rowRecords })
     if (res.isSuccess) {
-      sageMessage.success('删除成功')
+      SageMessage.success('删除成功')
       tableRef.current.reloadTable()
     }
   }
@@ -314,7 +314,7 @@ const DeptList = () => {
     setModalLoading(false)
 
     if (res.isSuccess) {
-      sageMessage.success('保存成功')
+      SageMessage.success('保存成功')
       modalRef.current.setVisible(false)
       tableRef.current.reloadTable()
     }

src/pages/menu/index.jsx

 import React, { useState, useEffect, useRef } from 'react'
 import { PageHeaderWrapper } from '@ant-design/pro-layout'
-import { SageTable, SageModal, SageButton, sageMessage, ActionSet } from '@/components/Common'
+import { SageTable, SageModal, SageButton, SageMessage, ActionSet } from '@/components/Common'
 import { createFromIconfontCN, PlusOutlined, EditOutlined, ReloadOutlined, SwapOutlined, DeleteOutlined, VerticalAlignBottomOutlined, VerticalAlignTopOutlined } from '@ant-design/icons';
 import moment from 'moment';
+import config from '@/config'
 import { getEnumDropDownList } from '@/services/enum'
 import { queryMenu, updateMenu, addMenu, removeMenu, getMenuDetail, clearMenu } from './service';
 import CreateForm from './components/CreateForm'
 import UpdateForm from './components/UpdateForm'
 
 const IconFont = createFromIconfontCN({
-  scriptUrl: '//at.alicdn.com/t/font_1873986_46xeik9dra8.js',
+  scriptUrl: config.IconUrl,
 });
 
 // 详情数据
@@ -113,7 +114,7 @@ const MenuList = () => {
 
     const res = await removeMenu({ id: record.id })
     if (res.isSuccess) {
-      sageMessage.success('删除成功')
+      SageMessage.success('删除成功')
       tableRef.current.reloadTable()
     }
   }
@@ -262,7 +263,7 @@ const MenuList = () => {
     const rowRecords = tableRef.current.getSelectedRowKeys()
     const res = await removeMenu({ idArr: rowRecords })
     if (res.isSuccess) {
-      sageMessage.success('删除成功')
+      SageMessage.success('删除成功')
       tableRef.current.reloadTable()
     }
   }
@@ -281,7 +282,7 @@ const MenuList = () => {
   const onRefreshMenu = async () => {
     const res = await clearMenu()
     if (res.isSuccess) {
-      sageMessage.success('菜单更新成功')
+      SageMessage.success('菜单更新成功')
     }
   }
 
@@ -335,7 +336,7 @@ const MenuList = () => {
     setModalLoading(false)
 
     if (res.isSuccess) {
-      sageMessage.success('保存成功')
+      SageMessage.success('保存成功')
       modalRef.current.setVisible(false)
       tableRef.current.reloadTable()
     }

src/pages/role/index.jsx

 import React, { useState, useRef } from 'react'
 import { PageHeaderWrapper } from '@ant-design/pro-layout'
 import { Card, Switch, Modal } from 'antd'
-import { SageLayoutLR, SageTable, SageModal, SageForm, SageButton, sageMessage, ActionSet } from '@/components/Common'
+import { SageLayoutLR, SageTable, SageModal, SageForm, SageButton, SageMessage, ActionSet } from '@/components/Common'
 import { MenuTree } from '@/components/Business'
 import { PlusOutlined, CheckOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
 import { queryRule, updateRule, addRule, removeRule, getRuleDetail, openOrClose } from './service';
@@ -86,7 +86,7 @@ const TableList = () => {
 
     const res = await removeRule({ id: record.id })
     if (res.isSuccess) {
-      sageMessage.success('删除成功')
+      SageMessage.success('删除成功')
       tableRef.current.reloadTable()
     }
   }
@@ -124,7 +124,7 @@ const TableList = () => {
             }
           }
           tableRef.current.setDataSource(tableData)
-          sageMessage.success(checked ? '启用成功' : '禁用成功')
+          SageMessage.success(checked ? '启用成功' : '禁用成功')
         }
       },
       onCancel: () => {
@@ -241,7 +241,7 @@ const TableList = () => {
     setModalLoading(false)
 
     if (res.isSuccess) {
-      sageMessage.success('保存成功')
+      SageMessage.success('保存成功')
       modalRef.current.setVisible(false)
       tableRef.current.reloadTable()
     }
@@ -261,7 +261,7 @@ const TableList = () => {
     const res = await updateRule(pp)
 
     if (res.isSuccess) {
-      sageMessage.success('保存成功')
+      SageMessage.success('保存成功')
     }
   }
 

src/pages/user/center/index.jsx

+import React, { useState, useRef, useEffect } from 'react'
+import { PageHeaderWrapper } from '@ant-design/pro-layout'
+import { Card, Switch, Modal } from 'antd'
+import { connect } from 'umi'
+import { SageLayoutLR, SageTable, SageModal, SageForm, SageButton, SageMessage, ActionSet } from '@/components/Common'
+import { getUserDetail } from '@/pages/user/manage/service'
+
+import style from './style.less'
+
+const Center = (props) => {
+
+  const [userDetail, setUserDetail] = useState({})
+
+  const requestCenterInfo = async () => {
+    const res = await getUserDetail({id: props.user.currentUser.userId})
+    if (res.isSuccess) {
+      setUserDetail(res.data)
+    }
+  }
+
+  useEffect(() => {
+    requestCenterInfo()
+  }, [])
+
+  return (
+    <PageHeaderWrapper>
+
+      <SageLayoutLR
+        leftWidth="300"
+        left={
+          <Card title="个人信息" size="small" style={{ height: '100%' }}>
+            <div>
+              <div className={style["center-avator"]}>
+                <img src="" width="120" height="120" />
+              </div>
+              <div className={style["user-info"]}>
+                <div></div>
+              </div>
+            </div>
+          </Card>
+        }
+        right={
+          <div style={{ paddingLeft: 12, height: '100%' }}>
+            <Card title="基本资料" size="small" style={{ height: '100%' }}>
+              修改密码
+            </Card>
+          </div>
+
+        }
+      />
+
+    </PageHeaderWrapper>
+  )
+}
+
+export default connect(({user}) => ({user}))(Center)

src/pages/user/center/style.less

+.center-avator {
+  margin: 12px 0;
+  text-align: center;
+}

src/pages/user/manage/index.jsx

@@ -2,7 +2,7 @@ import React, { useState, useRef } from 'react'
 import { PageHeaderWrapper } from '@ant-design/pro-layout'
 import { Card, Modal, Switch } from 'antd'
 import moment from 'moment'
-import { SageLayoutLR, SageTable, SageModal, SageForm, SageButton, sageMessage, ActionSet } from '@/components/Common'
+import { SageLayoutLR, SageTable, SageModal, SageForm, SageButton, SageMessage, ActionSet } from '@/components/Common'
 import { DeptTree } from '@/components/Business'
 import { PlusOutlined, RedoOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
 import { queryUser, updateUser, addUser, removeUser, getUserDetail, openOrClose } from './service';
@@ -102,7 +102,7 @@ const TableList = () => {
 
     const res = await removeUser({ id: record.loginId })
     if (res.isSuccess) {
-      sageMessage.success('删除成功')
+      SageMessage.success('删除成功')
       tableRef.current.reloadTable()
     }
   }
@@ -124,7 +124,7 @@ const TableList = () => {
             }
           }
           tableRef.current.setDataSource(tableData)
-          sageMessage.success(checked ? '启用成功' : '禁用成功')
+          SageMessage.success(checked ? '启用成功' : '禁用成功')
         }
       },
       onCancel: () => {
@@ -249,7 +249,7 @@ const TableList = () => {
     setModalLoading(false)
 
     if (res.isSuccess) {
-      sageMessage.success('保存成功')
+      SageMessage.success('保存成功')
       modalRef.current.setVisible(false)
       tableRef.current.reloadTable()
     }