先看样子
组件代码：
javascript
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>
)
)
}