pc-center/src/components/GlobalHeader/ShowPassword.jsx

import React, { Component } from 'react'
import { Modal, Button, Form, Input, Icon, notification } from 'antd'
import request from '../../utils/request'
import apis from '../../services/apis'


function passwodForm(props) {


  const openNotificationWithIcon = (type, message) => {
    notification[type]({
      message,
      description:
        '',
    });
  }

  function handleSubmit(e) {
    e.preventDefault();
    props.form.validateFieldsAndScroll((err, values) => {
      // 两次密码比较
      if (values.newPassword !== values.newPasswordToo) {
        openNotificationWithIcon('error', '两次密码输入不一样,请重新输入')
        return
      }
      if (!err) {
        request({ ...apis.user.changePassword, params: { ...values } }).then(() => {
          openNotificationWithIcon('success', '操作成功!')
          props.form.resetFields()
          props.onSuccess()
        }).catch(error => {
          // openNotificationWithIcon('error', error.message)
        })
      }
    });
  }

  const { getFieldDecorator } = props.form
  return (
    <>
      <Form labelCol={{ span: 7 }} wrapperCol={{ span: 12 }} onSubmit={(e) => handleSubmit(e)}>
      <Form.Item label="请输入旧密码">
            {getFieldDecorator('originalPassword', {
              rules: [{ required: true, message: '请输入旧密码' }],
            })(
              <Input
                prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                type="password"
                placeholder="Password"
              />,
            )}
          </Form.Item>
        <Form.Item label="新密码">
            {getFieldDecorator('newPassword', {
              rules: [{ required: true, message: '请输入新密码' }],
            })(
              <Input
                prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                type="password"
                placeholder="Password"
              />,
            )}
          </Form.Item>
          <Form.Item label="确认新密码">
            {getFieldDecorator('newPasswordToo', {
              rules: [{ required: true, message: '请确认新密码' }],
            })(
              <Input
                prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                type="password"
                placeholder="Password"
              />,
            )}
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit">
                确定
            </Button>
          </Form.Item>
      </Form>
    </>
  )
}

const WrappedShowPasswordForm = Form.create({ name: 'passwodForm' })(passwodForm)

export default class ShowPassword extends Component {

  constructor(props) {
    super(props)
    this.state = { visible: false }
  }

  componentDidUpdate(prevProps) {
    // 典型用法（不要忘记比较 props）：
    console.log('接收值: ', this.props.visible, prevProps.visible)
    if (this.props.visible !== prevProps.visible) {
      // eslint-disable-next-line react/no-did-update-set-state
      this.setState({ visible: this.props.visible })
    }
  }

  handleOk = e => {
    console.log('关闭了')
    this.props.onCancel()
  };

  handleCancel = e => {
    console.log('关闭了')
    this.props.onCancel()
  };

  render() {
    return (
      <>
        <Modal
          title="修改密码"
          visible={this.state.visible}
          onCancel={this.handleCancel}
          footer={null}>
          <WrappedShowPasswordForm onSuccess={(e) => this.handleCancel(e)} />
        </Modal>
      </>
    );
  }
}