feat: 新增修改密码

src/layouts/RightContent.tsx

 import React, { useState, useEffect, useRef, useCallback, useLayoutEffect } from 'react'
 import { Link, history } from 'umi'
-import { Menu, Dropdown, List, Avatar, Skeleton, Badge} from 'antd'
+import { Menu, Dropdown, List, Avatar, Modal, Badge} from 'antd'
 import { BellOutlined, CaretDownOutlined } from '@ant-design/icons'
 import styles from './index.less'
 import { removeAuth, getAuth } from '@/utils/auth'
@@ -9,22 +9,42 @@ import moment from 'moment';
 import msg_system from '@/asserts/msg_system.png'
 import msg_platform from '@/asserts/msg_platform.png'
 import { SOCKET_URL } from '@/constants';
+import  PwdModal from './components/PwdModal';
+import { encryptedByAES } from '@/utils/cryptoAes'
 
 const RightContent: React.FC<{}> = (props) => {
   const [visible, setVisible] = useState(false);
   const [messageData, setMessageData] = useState<any[]>([]);
   const [unreadMsg, setUnReadMsg] = useState<number>(0);
-  const [loading, setLoading] = useState(true);
-  const ws = useRef<WebSocket | null>(null);
+  const [msgloading, setMsgLoading] = useState(true);
+  const [editPwdVisible, setEditPwdVisible] = useState(false);
+  const [confirmLoading, setConfirmLoading] = useState(false);
 
+  const ws = useRef<WebSocket | null>(null);
   const toLogin = () => {
     removeAuth()
     history.replace('/login')
   }
 
+  const handleChangePwd = useCallback((value: any) => {
+    setConfirmLoading(true)
+    PublicApi.postMemberManageSecurityPswUpdate({
+      oldPassword: encryptedByAES(value.oldPwd),
+      newPassword: encryptedByAES(value.newPwd)
+    }).then((data) => {
+      setEditPwdVisible(false);
+      setConfirmLoading(false);
+    })
+
+  }, [])
+
+  const handleCancel = useCallback(() => {
+    setEditPwdVisible(false)
+  }, [])
+
   const menu = (
     <Menu>
-      <Menu.Item>
+      <Menu.Item onClick={() => setEditPwdVisible(true)}>
         密码修改
       </Menu.Item>
       <Menu.Item onClick={toLogin}>
@@ -36,11 +56,11 @@ const RightContent: React.FC<{}> = (props) => {
   const userInfo = getAuth()
   useEffect(() => {
     if(visible) {
-      setLoading(true)
+      setMsgLoading(true)
       PublicApi.getReportMessagePlatformPage({current: '1', pageSize: '4'})
       .then((data) => {
         if(data.code === 1000) {
-          setLoading(false)
+          setMsgLoading(false)
           setMessageData(data.data.data);
         }
       })
@@ -50,16 +70,16 @@ const RightContent: React.FC<{}> = (props) => {
   const webSocketInit = useCallback(() => {
     console.log(ws.current)
     if (SOCKET_URL && /ws\:\/\//.test(SOCKET_URL) && (!ws.current || ws.current.readyState === 3) && userInfo) {
-      // ws://10.0.0.25:8100
-      const url = `${SOCKET_URL}/report/websocket?memberId=${userInfo.memberId}&roleId=${userInfo.roleId}&token=${userInfo.token}&source=${99}`
+      const url = `${SOCKET_URL}/report/websocket?memberId=${userInfo.memberId}&roleId=${userInfo.memberRoleId}&token=${userInfo.token}&source=${99}`
       ws.current = new WebSocket(url);
       ws.current.onopen = (e) => {
         console.log(e)
       }
       ws.current.onmessage = (e) => {
         console.log(e)
-        if(e.data.type === 1) {
-          setUnReadMsg(e.data.data)
+        const data = JSON.parse(e.data);
+        if(data.type === 1) {
+          setUnReadMsg(data.data)
         }
       };
       ws.current.onclose = (e) => {
@@ -83,7 +103,7 @@ const RightContent: React.FC<{}> = (props) => {
       <div className={styles.header}>消息列表</div>
       <List
         itemLayout="horizontal"
-        loading={loading}
+        loading={msgloading}
         dataSource={messageData}
         footer={
           <a className={styles.messageFooter} href="/message/messageList">
@@ -131,6 +151,12 @@ const RightContent: React.FC<{}> = (props) => {
           </div>
         </div>
       </Dropdown>
+      <PwdModal
+        visible={editPwdVisible}
+        onCancel={handleCancel}
+        onOk={handleChangePwd}
+        confirmLoading={confirmLoading}
+      />
     </div>
   )
 }

src/layouts/components/PwdModal.tsx

+import React from 'react';
+import { Modal, Input } from 'antd';
+import NiceForm from '@/components/NiceForm';
+import { registerValidationRules, createAsyncFormActions, FormEffectHooks } from '@formily/antd';
+const actions = createAsyncFormActions ();
+
+const Password = Input.Password;
+
+registerValidationRules({
+  passwordRule: value => {
+    const pattern = /^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)])+$)^.{8,16}$/;
+    return !pattern.test(value) ? "8-16个字符，由英文字母（区分大小写）、数字组成，请勿使用简单密码。" : ""
+  },
+  passwordIsSame: async (value) => {
+    const newPwd = await actions.getFieldValue('newPwd');
+    return newPwd !== value ? "两次密码不一致" : '';
+  }
+})
+const schema = {
+  type: 'object',
+  properties: {
+    layout: {
+      type: 'object',
+      'x-component': 'mega-layout',
+      "x-component-props": {
+        "labelAlign": "top",
+        "full": true
+      },
+      properties: {
+        oldPwd: {
+          type: 'string',
+          title: '旧密码',
+          'x-component': 'Password',
+          'x-component-props': {
+            style: {
+              width: '100%'
+            }
+          },
+          'x-rules': [
+            {
+              required: true,
+              message: '请填写旧密码'
+            },
+
+          ]
+        },
+        newPwd: {
+          type: 'password',
+          title: '新密码',
+          'x-rules': [
+            {
+              required: true,
+              message: '请填写新密码'
+            },
+            {
+              passwordRule: true,
+            }
+          ]
+        },
+        comfirmPwd: {
+          type: 'password',
+          title: '新密码',
+          'x-rules': [
+            {
+              required: true,
+              message: '请填写新密码'
+            },
+            {
+              passwordIsSame: true
+            }
+          ]
+        }
+      }
+    }
+  }
+}
+
+
+const PwdModal = (props) => {
+  const { visible, onCancel, onOk, confirmLoading } = props;
+  const handleSubmit = (value) => {
+    !!onOk && onOk(value)
+  }
+
+  const handleOk = () => {
+    actions.submit();
+  }
+
+  return (
+    <Modal
+      visible={visible}
+      title="修改密码"
+      onCancel={onCancel}
+      confirmLoading={confirmLoading}
+      onOk={handleOk}
+      maskClosable={false}
+    >
+      {
+        visible
+        ? <NiceForm
+            components={{Password}}
+            schema={schema}
+            actions={actions}
+            onSubmit={handleSubmit}
+          ></NiceForm>
+        : null
+      }
+    </Modal>
+  )
+}
+
+export default React.memo(PwdModal)