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.onSuccess()
        }).catch(error => {
          // openNotificationWithIcon('error', error.message)
        })
      }
    });
  }

  // 弹框取消按钮
  function handlePopCancel(e) {
    props.onCancel()
  }

  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>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <Button onClick={(e) => handlePopCancel(e)}>取消</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.onReset()
  };

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

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