先看样子
组件代码：
import React, {
useState, useEffect } from 'react'
import {
Row, Col, Modal, Spin, Input, Button, message, Form } from 'antd'
import {
LockOutlined, EyeTwoTone, EyeInvisibleOutlined } from '@ant-design/icons'
import * as Serve from '@/serve/Serve/Serve'
// 添加弹窗
import {
history } from 'umi'
export default function ({
modalViPassword, onCancelPassword, firstLoginFlag = false }) {
const [form] = Form.useForm()
// 修改密码
const [loadingPassword, setloadingPassword] = useState(false)
const iconRender = visible => (visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />)
const modalCancelPassword = () => {
form.resetFields()
setloadingPassword(false)
}
const goLoginFun = () => {
IPServe.systemlLogout()
const href = '/AAAA/mainlogin'
history.push({
pathname: href,
})
}
const onOkPassword = async () => {
form.validateFields().then(async values => {
let {
oldPassword, newPassword, } = form.getFieldsValue()
modalCancelPassword()
})
}
return (
modalViPassword && (
<Modal visible={
modalViPassword} footer={
null} destroyOnClose closable={
false} width={
600} title={
'密码修改'} onCancel={
modalCancelPassword}>
<Spin spinning={
loadingPassword}>
<Form initialValues={
{
}} labelCol={
{
span: 6 }} wrapperCol={
{
span: 18 }} form={
form} autoComplete="off" colon={
false}>
{
!firstLoginFlag && (
<Row style={
{
width: '88%', margin: '0px auto 10px', display: 'flex', alignItems: 'center' }}>
<Col span={
24}>
<Form.Item
name="oldPassword"
label="原密码："
rules={
[
{
required: true,
message: '请输入原密码!',
},
]}
>
<Input.Password
size="large"
placeholder="请输入原密码"
prefix={
<LockOutlined style={
{
color: '#ec5e59' }} />}
iconRender={
iconRender}
/>
</Form.Item>
</Col>
</Row>
)}
<Row style={
{
width: '88%', margin: '0px auto 10px', display: 'flex', alignItems: 'center' }}>
<Col span={
24}>
<Form.Item
name="newPassword"
label="新密码："
rules={
[
{
required: true,
message: '请输入新密码!',
},
{
pattern: /(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[^a-zA-Z0-9]).{8,20}/,
message: '请输入8-20位数的密码，其中包含大小写字母、数字和特殊符号四种'
},
]}
>
<Input.Password
size="large"
placeholder="请输入新密码"
prefix={
<LockOutlined style={
{
color: '#ec5e59' }} />}
iconRender={
iconRender}
/>
</Form.Item>
</Col>
</Row>
<Row style={
{
width: '88%', margin: '0px auto 10px', display: 'flex', alignItems: 'center' }}>
<Col span={
24}>
<Form.Item
name="newPassword2"
label="复输新密码："
rules={
[
{
required: true,
message: '请再次输入新密码!',
},
{
pattern: /(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[^a-zA-Z0-9]).{8,20}/,
message: '请输入8-20位数的密码，其中包含大小写字母、数字和特殊符号四种'
},
({
getFieldValue }) => ({
validator(_, value) {
if (
!value ||
(getFieldValue('newPassword') && getFieldValue('newPassword').trim()) === (value && value.trim())
) {
return Promise.resolve()
}
return Promise.reject(new Error('两次新密码请保持一致！'))
},
}),
]}
>
<Input.Password
size="large"
placeholder="请再次输入新密码"
prefix={
<LockOutlined style={
{
color: '#ec5e59' }} />}
iconRender={
iconRender}
/>
</Form.Item>
</Col>
</Row>
</Form>
<Row justify="end" style={
{
marginTop: '15px' }}>
<Button type="primary" style={
{
marginRight: '15px' }} onClick={
onOkPassword}>
修改
</Button>
<Button type="ghost" style={
{
backgroundColor: '#fff' }} onClick={
modalCancelPassword}>
取消
</Button>
</Row>
</Spin>
</Modal>
)
)
}
