魏熙美 5 лет назад
Родитель
Сommit
6a408eff8e

+ 31
- 6
src/components/GlobalHeader/AvatarDropdown.jsx Просмотреть файл

@@ -5,8 +5,15 @@ import { connect } from 'dva';
5 5
 import router from 'umi/router';
6 6
 import HeaderDropdown from '../HeaderDropdown';
7 7
 import styles from './index.less';
8
+import ShowPassword from './ShowPassword'
8 9
 
9 10
 class AvatarDropdown extends React.Component {
11
+
12
+  constructor(props) {
13
+    super()
14
+    this.state = { visible: false }
15
+  }
16
+
10 17
   onMenuClick = event => {
11 18
     const { key } = event;
12 19
 
@@ -22,9 +29,18 @@ class AvatarDropdown extends React.Component {
22 29
       return;
23 30
     }
24 31
 
32
+    if (key === 'updatePassword') {
33
+      this.setState({ visible: true })
34
+      return;
35
+    }
36
+
25 37
     router.push(`/account/${key}`);
26 38
   };
27 39
 
40
+  onCancel = (e) => {
41
+    this.setState({ visible: false })
42
+  }
43
+
28 44
   render() {
29 45
     const {
30 46
       currentUser = {
@@ -49,6 +65,10 @@ class AvatarDropdown extends React.Component {
49 65
         )}
50 66
         {menu && <Menu.Divider />}
51 67
 
68
+        <Menu.Item key="updatePassword">
69
+          <Icon type="key" />
70
+          <FormattedMessage id="menu.account.updatePassword" defaultMessage="updatePassword" />
71
+        </Menu.Item>
52 72
         <Menu.Item key="logout">
53 73
           <Icon type="logout" />
54 74
           <FormattedMessage id="menu.account.logout" defaultMessage="logout" />
@@ -56,12 +76,17 @@ class AvatarDropdown extends React.Component {
56 76
       </Menu>
57 77
     );
58 78
     return currentUser && currentUser.userName ? (
59
-      <HeaderDropdown overlay={menuHeaderDropdown}>
60
-        <span className={`${styles.action} ${styles.account}`}>
61
-          <Avatar size="small" className={styles.avatar} src={currentUser.avatar} alt="avatar" />
62
-          <span className={styles.name}>{currentUser.userName}</span>
63
-        </span>
64
-      </HeaderDropdown>
79
+      <>
80
+        <HeaderDropdown overlay={menuHeaderDropdown}>
81
+            <span className={`${styles.action} ${styles.account}`}>
82
+              <Avatar size="small" className={styles.avatar} src={currentUser.avatar} alt="avatar" />
83
+              <span className={styles.name}>{currentUser.userName}</span>
84
+            </span>
85
+        </HeaderDropdown>
86
+
87
+        {/* 修改密码 */}
88
+       <ShowPassword visible={this.state.visible} onCancel={(e) => this.onCancel(e)} />
89
+      </>
65 90
     ) : (
66 91
       <Spin
67 92
         size="small"

+ 99
- 0
src/components/GlobalHeader/ShowPassword.jsx Просмотреть файл

@@ -0,0 +1,99 @@
1
+import React, { Component } from 'react'
2
+import { Modal, Button, Form, Input, Icon, notification } from 'antd'
3
+import request from '../../utils/request'
4
+import apis from '../../services/apis'
5
+
6
+
7
+function passwodForm(props) {
8
+
9
+
10
+  const openNotificationWithIcon = (type, message) => {
11
+    notification[type]({
12
+      message,
13
+      description:
14
+        '',
15
+    });
16
+  }
17
+
18
+  function handleSubmit(e) {
19
+    e.preventDefault();
20
+    props.form.validateFieldsAndScroll((err, values) => {
21
+      if (!err) {
22
+        request({ ...apis.user.updatePassword, params: { ...values } }).then(() => {
23
+          openNotificationWithIcon('success', '操作成功!')
24
+          props.form.resetFields()
25
+          props.onSuccess()
26
+        }).catch(error => {
27
+          openNotificationWithIcon('error', error)
28
+        })
29
+      }
30
+    });
31
+  }
32
+
33
+  const { getFieldDecorator } = props.form
34
+  return (
35
+    <>
36
+      <Form layout="horizontal" onSubmit={(e) => handleSubmit(e)}>
37
+        <Form.Item>
38
+            {getFieldDecorator('newPassword', {
39
+              rules: [{ required: true, message: 'Please input your Password!' }],
40
+            })(
41
+              <Input
42
+                prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
43
+                type="password"
44
+                placeholder="Password"
45
+              />,
46
+            )}
47
+          </Form.Item>
48
+          <Form.Item>
49
+            <Button type="primary" htmlType="submit">
50
+                确定
51
+            </Button>
52
+          </Form.Item>
53
+      </Form>
54
+    </>
55
+  )
56
+}
57
+
58
+const WrappedShowPasswordForm = Form.create({ name: 'passwodForm' })(passwodForm)
59
+
60
+export default class ShowPassword extends Component {
61
+
62
+  constructor(props) {
63
+    super(props)
64
+    this.state = { visible: false }
65
+  }
66
+
67
+  componentDidUpdate(prevProps) {
68
+    // 典型用法(不要忘记比较 props):
69
+    console.log('接收值: ', this.props.visible, prevProps.visible)
70
+    if (this.props.visible !== prevProps.visible) {
71
+      // eslint-disable-next-line react/no-did-update-set-state
72
+      this.setState({ visible: this.props.visible })
73
+    }
74
+  }
75
+
76
+  handleOk = e => {
77
+    console.log('关闭了')
78
+    this.props.onCancel()
79
+  };
80
+
81
+  handleCancel = e => {
82
+    console.log('关闭了')
83
+    this.props.onCancel()
84
+  };
85
+
86
+  render() {
87
+    return (
88
+      <>
89
+        <Modal
90
+          title="修改密码"
91
+          visible={this.state.visible}
92
+          onCancel={this.handleCancel}
93
+          footer={null}>
94
+          <WrappedShowPasswordForm onSuccess={(e) => this.handleCancel(e)} />
95
+        </Modal>
96
+      </>
97
+    );
98
+  }
99
+}

+ 1
- 0
src/locales/en-US/menu.js Просмотреть файл

@@ -43,6 +43,7 @@ export default {
43 43
   'menu.account.settings': 'Account Settings',
44 44
   'menu.account.trigger': 'Trigger Error',
45 45
   'menu.account.logout': 'Logout',
46
+  'menu.account.updatePassword': 'update password',
46 47
   'menu.editor': 'Graphic Editor',
47 48
   'menu.editor.flow': 'Flow Editor',
48 49
   'menu.editor.mind': 'Mind Editor',

+ 1
- 0
src/locales/zh-CN/menu.js Просмотреть файл

@@ -43,6 +43,7 @@ export default {
43 43
   'menu.account.settings': '个人设置',
44 44
   'menu.account.trigger': '触发报错',
45 45
   'menu.account.logout': '退出登录',
46
+  'menu.account.updatePassword': '修改密码',
46 47
   'menu.editor': '图形编辑器',
47 48
   'menu.editor.flow': '流程编辑器',
48 49
   'menu.editor.mind': '脑图编辑器',

+ 5
- 0
src/services/apis.js Просмотреть файл

@@ -14,6 +14,11 @@ export default {
14 14
     },
15 15
   },
16 16
   user: {
17
+    updatePassword: {
18
+      method: 'PUT',
19
+      url: `${prefix}/update/password`,
20
+      action: 'admin.update.password',
21
+    },
17 22
     current: {
18 23
       method: 'GET',
19 24
       url: `${prefix}/taUser/current`,