ChangePasswordModal.jsx

import React, { useEffect } from 'react';
import { Modal, Form, Input, notification, message } from 'antd';
import { updateUserPassword } from '@/services/userCenter/userManage/api';

const ChangePasswordModal = props => {
  const { visible, currentUser, onSelect, onCancel } = props;
  const [passwordForm] = Form.useForm(); // 修改密码

  useEffect(() => {
    passwordForm.setFieldsValue({
      oldPassword: currentUser.password,
      newPassword: '',
      passwordConfirm: '',
    });
  }, [currentUser]);

  // 提交-修改密码
  const submitChangePassword = () => {
    const oldPassword = passwordForm.getFieldValue('oldPassword');
    const newPassword = passwordForm.getFieldValue('newPassword');
    const passwordConfirm = passwordForm.getFieldValue('passwordConfirm');
    if (
      newPassword &&
      newPassword.length >= 6 &&
      passwordConfirm &&
      newPassword.length >= 6 &&
      newPassword === passwordConfirm
    ) {
      updateUserPassword({
        UserId: +currentUser.userID,
        OldPassWord: oldPassword,
        NewPassWord: newPassword,
      })
        .then(res => {
          if (res.code === 0) {
            onCancel();
            onSelect([`${currentUser.OUID}`]);
            notification.success({
              message: '提交成功',
              duration: 2,
            });
          } else {
            notification.error({
              message: '提交失败',
              description: res.message,
            });
          }
          passwordForm.setFieldsValue({
            oldPassword: currentUser.password,
            newPassword: '',
            passwordConfirm: '',
          });
        })
        .catch(err => {
          message.error(err);
        });
    } else if (newPassword === '' || passwordConfirm === '') {
      notification.error({
        message: '提交失败',
        description: '带*号为必填项，不能为空',
      });
    } else if (
      (newPassword && newPassword.length < 6) ||
      (passwordConfirm && passwordConfirm < 6)
    ) {
      notification.error({
        message: '提交失败',
        description: '密码至少为6位!',
      });
    } else if (newPassword !== passwordConfirm) {
      notification.error({
        message: '提交失败',
        description: '确认密码不一致!',
      });
    }
  };
  return (
    <Modal
      title="修改密码"
      visible={visible}
      onOk={submitChangePassword}
      onCancel={() => {
        passwordForm.setFieldsValue({
          oldPassword: currentUser.password,
          newPassword: '',
          passwordConfirm: '',
        });
        onCancel();
      }}
      okText="确认"
      cancelText="取消"
    >
      <Form form={passwordForm} labelCol={{ span: 4 }}>
        <Form.Item name="oldPassword" label="原始密码">
          <Input disabled />
        </Form.Item>
        <Form.Item
          name="newPassword"
          label="新密码"
          rules={[{ required: true, message: '不能为空' }]}
        >
          <Input
            placeholder="请输入新密码"
            type="password"
            autoComplete="off"
          />
        </Form.Item>
        <Form.Item
          name="passwordConfirm"
          label="确认密码"
          rules={[{ required: true, message: '不能为空' }]}
        >
          <Input
            placeholder="再次确认新密码"
            type="password"
            autoComplete="off"
          />
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default ChangePasswordModal;