修改密码

src/pages/UserManage/index.jsx

@@ -7,6 +7,7 @@ import className from 'classnames';
 import Cell from '../../components/Cell';
 import Style from './style.less';
 import { fetch, apis } from '../../utils/request';
+import PasswordText from './passwordText';
 
 const { Meta } = Card;
 
@@ -33,6 +34,8 @@ const ABCol = (props) => (
 export default (props) => {
   const [members, setMembers] = useState([]);
   const [pageNavi, setPageNavi] = useState({ current: 1, pageSize: 10, total: 0 })
+  const [submitting, setSubmitting] = useState(false)
+  const [visibleData, setVisibleData] = useState({ visible: false, userId: '', oldPassword:'', newPassword: '', confirmPassword: '' })
 
   useEffect(() => {
     getMembers({ params: { pageNum: pageNavi.current, pageSize: pageNavi.pageSize } }).then((dt) => {
@@ -51,6 +54,24 @@ export default (props) => {
     }))
   }
 
+  /**
+   *回调事件
+   *
+   */
+  function onModalChange() {
+    // getList()
+    // setVisibleData({ visible: false, userId: '', oldPassword:'', newPassword: '', confirmPassword: '' })
+  }
+
+  /**
+   *打开编辑页
+   *
+   * @param {*} record
+   */
+  const editPassword = (record) => () => {
+    setVisibleData({ visible: true, userId: record.userId, oldPasswod: '', newPassword: '', confirmPassword: '',submitting:submitting})
+  }
+
   const CardBody = (cbProps) => {
     const handleSwitch = (on) => () => {
       if (!on) {
@@ -133,6 +154,7 @@ export default (props) => {
   }
 
   return (
+    <>
     <PageHeaderWrapper extra={<Button type="primary" icon="plus" onClick={createUser}>新建</Button>}>
       <div className={Style['flex-box']}>
         {
@@ -150,7 +172,7 @@ export default (props) => {
                       <Icon type="setting" key="rights" onClick={gotoDetail(member, 3)}/>
                     </Tooltip>,
                     <Tooltip title="重置密码">
-                      <Icon type="block" key="resetpass" onClick={resetPassword(member)}/>
+                      <Icon type="block" key="resetpass" onClick={editPassword(member)}/>
                     </Tooltip>
                   ]}
                 >
@@ -170,5 +192,7 @@ export default (props) => {
         onShowSizeChange={handleSizeChange}
       />
     </PageHeaderWrapper>
+    <PasswordText visibleData={visibleData} key="PasswordText" onSuccess={() => onModalChange()}/>
+    </>
   )
 }

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

src/services/apis.js

@@ -19,6 +19,11 @@ const apis = {
       action: 'center',
       logout: true
     },
+    changePassword: {
+      url: `${prefix}/changePassword`,
+      method: 'POST',
+      action: 'center'
+    }
   },
   member: {
     list: {