在弹窗中的修改密码页面
(主页面)中引入弹窗
(主页面)显示与隐藏弹窗
(主页面)点击显示弹窗
(主页面)默认隐藏弹窗
弹窗页面
弹窗页面
弹窗页面
弹窗页面
弹窗页面代码
//弹窗页面
import React, { useEffect, useState } from "react";
import { Form, Modal, Input, Radio, message, Row } from 'antd';
import './EditFromindex.less'
import { updatepassword } from '@/service/userService';
interface EditFormProps {
visible: boolean;
onSubmit: () => void;
onCancel: () => void;
dataItem: any;
defaultValue?: any;
roleType: boolean;
}
const EditForm: React.FC<EditFormProps> = (props) => {
const [form] = Form.useForm();
const { dataItem } = props;
const [onSubmitting, setSubmitting] = useState(false);
const mapToModel = (values: any): any => {
return {
id: dataItem?.Id || 0,
...values,
}
}
const onSubmit = (value: any) => {
const server = updatepassword
setSubmitting(true);
server(mapToModel(value)).then((res) => {
const { Success } = res;
if (Success) {
props.onSubmit();
window.location.reload() // 强制页面刷新
} else {
message.error('error');
setSubmitting(false);
}
});
};
return (
<Modal
title={"Change password"}
onOk={() => {
form.submit();
}}
onCancel={() => {
props.onCancel();
window.location.reload() // 强制页面刷新
}}
visible={props.visible}
confirmLoading={onSubmitting}
className='department-editfrom'
>
<Form
form={form}
onFinish={(values: any) => {
onSubmit(mapToModel(values));
}}
>
<Row className="title" gutter={24}>Original password</Row>
<Form.Item name="oldPassword"
rules={[
{
required: true,
message: "Old password is required",
},
]}
hasFeedback
>
<Input.Password placeholder='Original password' visibilityToggle style={{ width: '100%', borderRadius: '4px' }} />
</Form.Item>
<Row className="title" gutter={24}>New password</Row>
<Form.Item name="Password"
rules={[
{
required: true,
message: "New password is required",
},
{
min: 6,
max: 16,
message: "The password must be a string with a minimum length of 6 and a maximum length of 16",
},
{
pattern: new RegExp(
/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{6,16}$/,
'g'
),
message: "The password must include a number, a lowercase letter and a uppercase letter",
},
]}
hasFeedback
>
<Input.Password placeholder='New password' visibilityToggle style={{ width: '100%', borderRadius: '4px' }} />
</Form.Item>
<Row className="title" gutter={24}>New password</Row>
<Form.Item name="ConfirmPassword"
hasFeedback
rules={[
{
required: true,
message: "Confirm password is required",
},
({ getFieldValue }) => ({
validator(_, value) {
if (!value || getFieldValue('Password') === value) {
return Promise.resolve();
}
return Promise.reject(
new Error('The two passwords that you entered do not match')
);
},
})
]}
>
<Input.Password placeholder='New password' visibilityToggle style={{ width: '100%', borderRadius: '4px' }} />
</Form.Item>
</Form>
</Modal >
)
};
export default EditForm;
主页面代码:
import React, { useEffect, useState } from 'react';
import { StateType } from '@/models/login';
import { Menu, Dropdown } from 'antd';
import { history, useIntl, connect, ConnectProps, Dispatch, Link, FormattedMessage } from 'umi';
import { User } from '@/typings';
import { getCurrentUser } from '@/utils/authority';
import EditForm from './components/EditForm'
import { SettingOutlined } from '@ant-design/icons';
// import Profile from '../../pages/Profiles/index'
interface ProfileProps extends ConnectProps {
login: StateType;
ResData: User;
dispatch: Dispatch;
detailTeam: boolean;
}
const Profileheader: React.FC<ProfileProps> = (props: any) => {
useEffect(() => {
dispatch({
type: 'newProfileModle/getByUserId'
})
}, [])
const [profileVisible, setprofileVisible] = useState(false)
const [detailTeam, setdetailTeam] = useState(false)
const { currentUser, dispatch, currentItem } = props;
const menu = (
<Menu>
<Menu.Item onClick={() => {
history.push('/settings/profile')
// setprofileVisible(true)
}}><FormattedMessage
id={'page.profile.profile'}
defaultMessage="Profile"
/></Menu.Item>
<Menu.Item>
<span onClick={() => { setdetailTeam(true); }}>Change password</span>
</Menu.Item>
<Menu.Item>
<Link to="/Settings/Agent">Agent</Link>
</Menu.Item>
<Menu.Item>
<Link to="/logout"><FormattedMessage
id={'page.profile.logout'}
defaultMessage="Logout"
/></Link>
</Menu.Item>
</Menu>
);
return (
<div>
<Dropdown overlay={menu}>
<div className="currentUser_name">{currentUser?.Member?.Name || currentUser?.Name} <em></em></div>
</Dropdown>
{/* {
profileVisible ?
<Profile defaultValue={currentItem} /> :
null
} */}
{
detailTeam &&
<EditForm
visible={detailTeam}
onSubmit={() => {
setdetailTeam(false);
}}
onCancel={() => {
setdetailTeam(false);
}}
dataItem={currentItem} roleType={false} />
}
</div >
);
};
export default connect(({ login, newProfileModle }: { login: StateType, newProfileModle: any }) => ({
...login,
...newProfileModle,
currentUser: getCurrentUser(),
}))(Profileheader);