|
@ -1,11 +1,12 @@ |
|
|
import React, { useEffect, FC } from 'react' |
|
|
|
|
|
|
|
|
import React, { useEffect, FC, useState } from 'react' |
|
|
import { useHistory } from 'react-router-dom' |
|
|
import { useHistory } from 'react-router-dom' |
|
|
import { Menu, Dropdown, Layout } from 'antd' |
|
|
|
|
|
|
|
|
import { Menu, Dropdown, Layout, Modal, Form, Input, Button, notification } from 'antd' |
|
|
import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons' |
|
|
import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons' |
|
|
import Breadcrumb from '@/components/BreadCrumb' |
|
|
import Breadcrumb from '@/components/BreadCrumb' |
|
|
import { connect } from 'react-redux' |
|
|
import { connect } from 'react-redux' |
|
|
import * as actions from '@/store/actions' |
|
|
import * as actions from '@/store/actions' |
|
|
import style from './Header.module.less' |
|
|
import style from './Header.module.less' |
|
|
|
|
|
import api from '@/api' |
|
|
|
|
|
|
|
|
interface Props extends ReduxProps { } |
|
|
interface Props extends ReduxProps { } |
|
|
|
|
|
|
|
@ -13,6 +14,9 @@ const Header: FC<Props> = ({ |
|
|
storeData: { collapsed, theme, userInfo }, |
|
|
storeData: { collapsed, theme, userInfo }, |
|
|
setStoreData |
|
|
setStoreData |
|
|
}) => { |
|
|
}) => { |
|
|
|
|
|
|
|
|
|
|
|
const [form] = Form.useForm() |
|
|
|
|
|
const [visible, setVisible] = useState(false) |
|
|
const history = useHistory() |
|
|
const history = useHistory() |
|
|
const { userName = '-' } = userInfo |
|
|
const { userName = '-' } = userInfo |
|
|
const firstWord = userName.slice(0, 1) |
|
|
const firstWord = userName.slice(0, 1) |
|
@ -26,8 +30,25 @@ const Header: FC<Props> = ({ |
|
|
setStoreData('SET_THEME', themes) |
|
|
setStoreData('SET_THEME', themes) |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const onFinish = async (values) => { |
|
|
|
|
|
const res: any = await api.change_loginPwd(values) |
|
|
|
|
|
if (res.code === 0) { |
|
|
|
|
|
form.resetFields() |
|
|
|
|
|
setVisible(false) |
|
|
|
|
|
notification.success({ |
|
|
|
|
|
message: '修改成功,请重新登录' |
|
|
|
|
|
}) |
|
|
|
|
|
await setStoreData('SET_USERINFO', {}) |
|
|
|
|
|
localStorage.setItem('permissions', '') |
|
|
|
|
|
history.replace({ pathname: '/login' }) |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
const menu = ( |
|
|
const menu = ( |
|
|
<Menu> |
|
|
<Menu> |
|
|
|
|
|
<Menu.Item onClick={() => setVisible(true)}> |
|
|
|
|
|
<span>修改密码</span> |
|
|
|
|
|
</Menu.Item> |
|
|
<Menu.Item onClick={logout}> |
|
|
<Menu.Item onClick={logout}> |
|
|
<span>退出登录</span> |
|
|
<span>退出登录</span> |
|
|
</Menu.Item> |
|
|
</Menu.Item> |
|
@ -71,25 +92,54 @@ const Header: FC<Props> = ({ |
|
|
}, [theme]) |
|
|
}, [theme]) |
|
|
|
|
|
|
|
|
return ( |
|
|
return ( |
|
|
<Layout.Header className={style.header}> |
|
|
|
|
|
<div className={style.toggleMenu} onClick={toggle}> |
|
|
|
|
|
{collapsed ? ( |
|
|
|
|
|
<MenuUnfoldOutlined className={style.trigger} /> |
|
|
|
|
|
) : ( |
|
|
|
|
|
<MenuFoldOutlined className={style.trigger} /> |
|
|
|
|
|
)} |
|
|
|
|
|
</div> |
|
|
|
|
|
<Breadcrumb /> |
|
|
|
|
|
<Dropdown className={`fr ${style.content}`} overlay={menu}> |
|
|
|
|
|
<span className={style.user}> |
|
|
|
|
|
<span className="avart">{firstWord}</span> |
|
|
|
|
|
<span>{userName}</span> |
|
|
|
|
|
</span> |
|
|
|
|
|
</Dropdown> |
|
|
|
|
|
<Dropdown overlay={changeMenu}> |
|
|
|
|
|
<div title="更换主题" className="fr webTheme" /> |
|
|
|
|
|
</Dropdown> |
|
|
|
|
|
</Layout.Header> |
|
|
|
|
|
|
|
|
<> |
|
|
|
|
|
<Layout.Header className={style.header}> |
|
|
|
|
|
<div className={style.toggleMenu} onClick={toggle}> |
|
|
|
|
|
{collapsed ? ( |
|
|
|
|
|
<MenuUnfoldOutlined className={style.trigger} /> |
|
|
|
|
|
) : ( |
|
|
|
|
|
<MenuFoldOutlined className={style.trigger} /> |
|
|
|
|
|
)} |
|
|
|
|
|
</div> |
|
|
|
|
|
<Breadcrumb /> |
|
|
|
|
|
<Dropdown className={`fr ${style.content}`} overlay={menu}> |
|
|
|
|
|
<span className={style.user}> |
|
|
|
|
|
<span className="avart">{firstWord}</span> |
|
|
|
|
|
<span>{userName}</span> |
|
|
|
|
|
</span> |
|
|
|
|
|
</Dropdown> |
|
|
|
|
|
<Dropdown overlay={changeMenu}> |
|
|
|
|
|
<div title="更换主题" className="fr webTheme" /> |
|
|
|
|
|
</Dropdown> |
|
|
|
|
|
</Layout.Header> |
|
|
|
|
|
<Modal visible={visible} onCancel={() => setVisible(false)} title="修改密码" footer={() => null}> |
|
|
|
|
|
<Form form={form} onFinish={onFinish}> |
|
|
|
|
|
<Form.Item label="旧密码" rules={[{ required: true, message: '请输入旧密码' }]} name="old_password"> |
|
|
|
|
|
<Input.Password placeholder='请输入旧密码' /> |
|
|
|
|
|
</Form.Item> |
|
|
|
|
|
<Form.Item label="新密码" rules={[{ required: true, message: '请输入新密码' }]} name="new_password"> |
|
|
|
|
|
<Input.Password placeholder='请输入新密码' /> |
|
|
|
|
|
</Form.Item> |
|
|
|
|
|
<Form.Item label="确认密码" rules={[{ required: true, message: '确认新密码' }, ({ getFieldValue }) => ({ |
|
|
|
|
|
validator(_, value) { |
|
|
|
|
|
if (!value || getFieldValue('new_password') === value) { |
|
|
|
|
|
return Promise.resolve(); |
|
|
|
|
|
} |
|
|
|
|
|
return Promise.reject(new Error('两个密码不匹配!')); |
|
|
|
|
|
}, |
|
|
|
|
|
}),]} name="confrim_password"> |
|
|
|
|
|
<Input.Password placeholder='确认新密码' /> |
|
|
|
|
|
</Form.Item> |
|
|
|
|
|
<Form.Item label='操作' style={{ display: 'flex' }}> |
|
|
|
|
|
<Button onClick={() => { |
|
|
|
|
|
setVisible(false) |
|
|
|
|
|
form.resetFields() |
|
|
|
|
|
}}>取消</Button> |
|
|
|
|
|
<Button htmlType='submit' type='primary' style={{ marginLeft: 20 }}>确认</Button> |
|
|
|
|
|
</Form.Item> |
|
|
|
|
|
</Form> |
|
|
|
|
|
</Modal> |
|
|
|
|
|
</> |
|
|
) |
|
|
) |
|
|
} |
|
|
} |
|
|
export default connect( |
|
|
export default connect( |
|
|