error

src/components/GlobalHeader/ShowPassword.jsx

@@ -0,0 +1,131 @@
+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>
+      </>
+    );
+  }
+}

src/pages/UserManage/passwordText.jsx

@@ -0,0 +1,156 @@
+import React, { useState, useEffect } from 'react';
+import { Form, Icon, Input, Button, DatePicker, Select, Card, Row, Col, Pagination, Alert, Table, Avatar, Radio, Modal, Descriptions, notification } from 'antd';
+import moment from 'moment';
+import request from '../../utils/request'
+import apis from '../../services/apis';
+import Styles from './style.less';
+
+
+const { Option } = Select;
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const { Meta } = Card;
+
+const { TextArea } = Input;
+
+/**
+ * 图片信息
+ *
+ * @param {*} props
+ * @returns
+ */
+class PasswordText extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+       visibleData: [{ visible: false, userId: '', oldPassword:'', newPassword: '', confirmPassword: '' }],
+    }
+  }
+
+  // 挂载之后
+  // componentDidMount() {
+  //
+  // }
+
+  componentDidUpdate(preProps, preState) {
+    if (this.props.visibleData.visible !== preState.visibleData.visible) {
+      console.log(this.props.visibleData)
+      this.setState({ visibleData: this.props.visibleData });
+    }
+  }
+
+  // 弹框确定按钮
+  // eslint-disable-next-line react/sort-comp
+  handleOk() {
+    this.setState({ visibleData: { visible: false, userId: '', oldPassword:'', newPassword: '', confirmPassword: '' } })
+  }
+
+  // 弹框取消按钮
+  handleCancel() {
+    this.setState({ visibleData: { visible: false, userId: '', oldPassword:'', newPassword: '', confirmPassword: '' } })
+  }
+
+  openNotificationWithIcon = (type, message) => {
+    notification[type]({
+      message,
+      description:
+        '',
+    });
+  };
+
+  // 提交
+  handleSubmit(e) {
+    e.preventDefault();
+    this.props.form.validateFields((err, values) => {
+      if (!err) {
+        this.submitData(values)
+      }
+    });
+  }
+
+  submitData(data) {
+    data.userId = this.props.visibleData.userId;
+    data.newPassword = data.newPassword 
+    data.confirmPassword = data.confirmPassword
+    const api = apis.user.changePassword;
+
+    // 网路请求
+    request({ ...api, data: { ...data } }).then(() => {
+      console.log({...data});
+      // eslint-disable-next-line no-unused-expressions
+      // this.openNotificationWithIcon('success', '操作成功')
+      notification.success({message: '设置成功'})
+      // 传递父组件事件
+      // onSuccess() 是自定义
+      // this.props.onSuccess()
+
+      // this.setState({ visibleData: { visible: false, apartmentId: '', buildingId: '' } }, () => console.log('回调：', this.state.visibleData))
+    }).catch(err => {
+      console.log('123213123')
+      // eslint-disable-next-line no-unused-expressions
+      // notification.success({message: ''})
+      // this.openNotificationWithIcon('error', err)
+    })
+  }
+
+  /**
+   * 取消按钮
+   *
+   * @memberof ModalImage
+   */
+  closeModal() {
+    this.setState({ visible: false, userId: '', oldPassword:'', newPassword: '', confirmPassword: '' })
+  }
+
+  render() {
+    const { getFieldDecorator } = this.props.form;
+    return (
+      <>
+        <Modal
+            title="修改密码"
+            width={400}
+            destroyOnClose="true"
+            footer={null}
+            visible={this.state.visibleData.visible}
+            onOk={() => this.handleOk()}
+            onCancel={e => this.handleCancel(e)}
+          >
+            <Form onSubmit={e => this.handleSubmit(e)}>
+              <Form.Item label="登录人" style={{ display: 'none' }}>
+                  {getFieldDecorator('userId')(<Input />)}
+              </Form.Item>
+              <Form.Item label="旧密码">
+                {getFieldDecorator('loginPassword', {
+                  rules: [
+                    { required: true, message: '请填写旧密码' },
+                  ],
+                })(<Input />)}
+              </Form.Item>
+              <Form.Item label="新密码">
+                {getFieldDecorator('newPassword', {
+                  rules: [
+                    { required: true, message: '请填写新密码' }
+                  ],
+                })(<Input />)}
+              </Form.Item>
+              <Form.Item label="确认密码">
+                {getFieldDecorator('confirmPassword', {
+                  rules: [
+                    { required: true, message: '请确认密码' }
+                  ],
+                })(<Input />)}
+              </Form.Item>
+              <Form.Item style={{ width: '400px', margin: 'auto', display: 'flex', justifyContent: 'space-between' }}>
+                <Button type="primary" htmlType="submit">保存</Button>
+                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                <Button onClick={e => this.handleCancel(e)}>取消</Button>
+              </Form.Item>
+            </Form>
+        </Modal>
+      </>
+    );
+  }
+}
+
+const WrappedModalImageForm = Form.create({ name: 'passwordText' })(PasswordText);
+
+export default WrappedModalImageForm