import { LockOutlined, SafetyOutlined, UserOutlined } from '@ant-design/icons';
|
import { ProForm, ProFormCaptcha, ProFormText } from '@ant-design/pro-components';
|
import { Modal } from 'antd';
|
import { forwardRef, useImperativeHandle, useRef } from 'react';
|
import { sendMessage } from './service.js';
|
|
const editPwd = ({ visible, onSave, onCancel }, ref) => {
|
const captchaRef = useRef();
|
const form = useRef();
|
/**
|
* 确定按钮事件
|
*/
|
const okHandle = () => {
|
form.current.validateFields().then((values) => {
|
delete values.oldPassword
|
onSave(values);
|
});
|
};
|
|
useImperativeHandle(ref, () => {
|
return {
|
refreshData: (data) => {
|
form.resetFields();
|
form.setFieldsValue(data);
|
setEditData(data);
|
},
|
clean: () => {
|
form.resetFields();
|
},
|
};
|
});
|
|
return (
|
<Modal
|
getContainer={false}
|
width="25%"
|
destroyOnClose
|
title={'修改密码'}
|
open={visible}
|
onCancel={() => onCancel(false)}
|
onOk={okHandle}
|
>
|
<ProForm
|
title="新建表单"
|
formRef={form}
|
submitter={{
|
render: (props, doms) => {
|
return [];
|
},
|
}}
|
>
|
<ProFormText
|
name="phone"
|
fieldProps={{
|
prefix: <UserOutlined />,
|
}}
|
placeholder="请输入账号"
|
rules={[
|
{
|
required: true,
|
message: '请输入账号',
|
},
|
{ pattern: /^1[0-9][0-9]\d{8}$/, message: '请输入正确的手机号' },
|
]}
|
/>
|
<ProFormCaptcha
|
onGetCaptcha={() => {
|
return new Promise((resolve, reject) => {
|
form.current
|
.validateFields(['phone'])
|
.then(async (value) => {
|
let success = await sendMessage({
|
phone : value.phone,
|
});
|
if (success.code == '200') {
|
resolve();
|
} else {
|
reject();
|
}
|
})
|
.catch((err) => {
|
reject();
|
});
|
});
|
}}
|
onTiming={(count) => {
|
}}
|
placeholder="请输入验证码"
|
rules={[
|
{
|
required: true,
|
message: '请输入验证码',
|
},
|
]}
|
fieldRef={captchaRef}
|
fieldProps={{
|
prefix: <SafetyOutlined />,
|
}}
|
name="phoneCode"
|
/>
|
<ProFormText.Password
|
name="oldPassword"
|
fieldProps={{
|
size: 'large',
|
prefix: <LockOutlined />,
|
}}
|
placeholder="请输入新密码"
|
rules={[
|
{
|
validator: (rule, value) => {
|
return new Promise((resolve, reject) => {
|
if (!value) {
|
reject('请输入新密码');
|
}
|
resolve('');
|
});
|
},
|
},
|
]}
|
/>
|
<ProFormText.Password
|
name="password"
|
fieldProps={{
|
size: 'large',
|
prefix: <LockOutlined />,
|
}}
|
placeholder="请确认新密码"
|
rules={[
|
{
|
validator: (rule, value) => {
|
return new Promise((resolve, reject) => {
|
if (!value) {
|
reject('请再次输入新密码');
|
}
|
if (value != form.current.getFieldValue('oldPassword')) {
|
reject('两次密码请保持一致');
|
}
|
resolve('');
|
});
|
},
|
},
|
]}
|
/>
|
</ProForm>
|
</Modal>
|
);
|
};
|
|
export default forwardRef(editPwd);
|
