fix: 机构管理密码强度规则修改

src/pages/userCenter/userManage/AddUserModal.jsx

 import React, { useEffect, useState } from 'react';
 import { Modal, Form, Input, notification, message, TreeSelect } from 'antd';
 import { addUser, GetUserRelationListNew } from '@/services/userManage/api';
+import classNames from 'classnames';
 import { ok } from '../../../assets/images/icons/ok.svg';
 import styles from './AddUserModal.less';
 const { SHOW_CHILD } = TreeSelect;
@@ -16,7 +17,7 @@ const AddUserModal = props => {
   ); // 邮箱
   const [value, setValue] = useState(['0-1-1']);
   const [treeData, setTreeData] = useState([]);
-  const [passwordLevel, setPasswordLevel] = useState('弱'); // 密码等级
+  const [passwordLevel, setPasswordLevel] = useState(''); // 密码等级
   const onChange = newValue => {
     console.log('onChange ', value);
     setValue(newValue);
@@ -163,25 +164,23 @@ const AddUserModal = props => {
     switch (modes) {
       case 1:
         setPasswordLevel('弱');
-        // return 1;
         break;
       case 2:
+        if (sValue.length > 8) {
+          setPasswordLevel('中');
+        } else {
           setPasswordLevel('弱');
+        }
         break;
       case 3:
         if (sValue.length > 8) {
-          setPasswordLevel('中');
+          setPasswordLevel('强');
         } else {
-          setPasswordLevel('弱');
+          setPasswordLevel('中');
         }
         break;
       case 4:
-        if (sValue.length < 10) {
-          setPasswordLevel('中');
-        } else {
         setPasswordLevel('强');
-        }
-
         break;
     }
   };
@@ -213,7 +212,7 @@ const AddUserModal = props => {
       destroyOnClose
       afterClose={() => {
         addUserForm.resetFields();
-        setPasswordLevel('弱');
+        setPasswordLevel('');
       }}
       onOk={submitAddUser}
       okText="确认"
@@ -235,6 +234,7 @@ const AddUserModal = props => {
           >
             <Input placeholder="请输入登录名称（小于16位）" maxLength="16" />
           </Form.Item>
+          <div className={styles.formBox}>
             <Form.Item
               hasFeedback
               name="password"
@@ -247,8 +247,19 @@ const AddUserModal = props => {
                 { required: true },
               ]}
             >
-            <Input placeholder="请输入账号密码（6~16位）" maxlength="16" suffix={passwordLevel} />
+              <Input placeholder="请输入账号密码（6~16位）" maxlength="16" />
             </Form.Item>
+            <div
+              className={classNames(styles.tipsText, {
+                [styles.tipsRed]: passwordLevel === '弱',
+                [styles.tipsOrange]: passwordLevel === '中',
+                [styles.tipsGreen]: passwordLevel === '强',
+              })}
+            >
+              {passwordLevel}
+            </div>
+          </div>
+
           <Form.Item
             hasFeedback
             name="userName"

src/pages/userCenter/userManage/AddUserModal.less

@@ -5,4 +5,28 @@
   .ant-form-item-feedback-icon {
     margin-left: 10px;
   }
+
+  .formBox {
+    position: relative;
+
+    .tipsText {
+      position: absolute;
+      right: 40px;
+      top: 5px;
+      z-index: 11;
+    }
+
+    .tipsGreen {
+      color: limegreen;
+    }
+
+    .tipsRed {
+      color: red;
+    }
+
+    .tipsOrange {
+      color: coral;
+    }
+  }
+
 }
\ No newline at end of file

src/pages/userCenter/userManage/ChangePasswordModal.jsx

@@ -2,12 +2,14 @@
 import React, { useEffect, useState } from 'react';
 import { Modal, Form, Input, notification, message } from 'antd';
 import { updateUserPassword } from '@/services/userManage/api';
+import classNames from 'classnames';
+import styles from './AddUserModal.less';
 
 const ChangePasswordModal = props => {
   const { visible, currentUser, currentSelectOrg, submitSearchUser, onSelect, onCancel } = props;
   const [passwordForm] = Form.useForm(); // 修改密码
-  const [newPasswordLevel, setNewPasswordLevel] = useState('弱');
-  const [passwordConfirmLevel, setPasswordConfirmLevel] = useState('弱');
+  const [newPasswordLevel, setNewPasswordLevel] = useState('');
+  const [passwordConfirmLevel, setPasswordConfirmLevel] = useState('');
   useEffect(() => {
     console.log(currentUser);
     if (visible) {
@@ -104,17 +106,16 @@ const ChangePasswordModal = props => {
       case 1:
         return '弱';
       case 2:
-        return '弱';
-      case 3:
         if (sValue.length > 8) {
           return '中';
         }
         return '弱';
-
-      case 4:
-        if (sValue.length < 10) {
-          return '中';
+      case 3:
+        if (sValue.length > 8) {
+          return '强';
         }
+        return '中';
+      case 4:
         return '强';
     }
   };
@@ -143,15 +144,19 @@ const ChangePasswordModal = props => {
           newPassword: '',
           passwordConfirm: '',
         });
+        setNewPasswordLevel('');
+        setPasswordConfirmLevel('');
         onCancel();
       }}
       okText="确认"
       cancelText="取消"
     >
+      <div className={styles.modalContent}>
         <Form form={passwordForm} labelCol={{ span: 4 }} onFieldsChange={changeValue}>
           <Form.Item name="oldPassword" label="原始密码">
             <Input disabled />
           </Form.Item>
+          <div className={styles.formBox}>
             <Form.Item
               name="newPassword"
               label="新密码"
@@ -163,13 +168,19 @@ const ChangePasswordModal = props => {
                 { required: true },
               ]}
             >
-          <Input
-            placeholder="请输入新密码"
-            autoComplete="off"
-            maxLength="16"
-            suffix={newPasswordLevel}
-          />
+              <Input placeholder="请输入新密码" autoComplete="off" maxLength="16" />
             </Form.Item>
+            <div
+              className={classNames(styles.tipsText, {
+                [styles.tipsRed]: newPasswordLevel === '弱',
+                [styles.tipsOrange]: newPasswordLevel === '中',
+                [styles.tipsGreen]: newPasswordLevel === '强',
+              })}
+            >
+              {newPasswordLevel}
+            </div>
+          </div>
+          <div className={styles.formBox}>
             <Form.Item
               name="passwordConfirm"
               label="确认密码"
@@ -181,14 +192,20 @@ const ChangePasswordModal = props => {
                 { required: true },
               ]}
             >
-          <Input
-            placeholder="再次确认新密码"
-            autoComplete="off"
-            maxLength="16"
-            suffix={passwordConfirmLevel}
-          />
+              <Input placeholder="再次确认新密码" autoComplete="off" maxLength="16" />
             </Form.Item>
+            <div
+              className={classNames(styles.tipsText, {
+                [styles.tipsRed]: passwordConfirmLevel === '弱',
+                [styles.tipsOrange]: passwordConfirmLevel === '中',
+                [styles.tipsGreen]: passwordConfirmLevel === '强',
+              })}
+            >
+              {passwordConfirmLevel}
+            </div>
+          </div>
         </Form>
+      </div>
     </Modal>
   );
 };