Skip to content

S
sage-front-framework
提交 c78b458c 作者: 郁骅焌
操作

个人中心

上级 14373d7a
正在显示 包含 144 行增加 和 42 行删除
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 0 → 100644
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 0 → 100644
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 0 → 100644
.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()
}
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论