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:
-        setPasswordLevel('弱');
-        break;
-      case 3:
         if (sValue.length > 8) {
           setPasswordLevel('中');
         } else {
           setPasswordLevel('弱');
         }
         break;
-      case 4:
-        if (sValue.length < 10) {
-          setPasswordLevel('中');
-        } else {
+      case 3:
+        if (sValue.length > 8) {
           setPasswordLevel('强');
+        } else {
+          setPasswordLevel('中');
         }
-
+        break;
+      case 4:
+        setPasswordLevel('强');
         break;
     }
   };
@@ -213,7 +212,7 @@ const AddUserModal = props => {
       destroyOnClose
       afterClose={() => {
         addUserForm.resetFields();
-        setPasswordLevel('弱');
+        setPasswordLevel('');
       }}
       onOk={submitAddUser}
       okText="确认"
@@ -235,20 +234,32 @@ const AddUserModal = props => {
           >
             <Input placeholder="请输入登录名称（小于16位）" maxLength="16" />
           </Form.Item>
-          <Form.Item
-            hasFeedback
-            name="password"
-            label="账号密码"
-            rules={[
-              {
-                pattern: /^[a-zA-Z0-9_]{6,16}$/,
-                message: '长度6-16位，支持字母与数字，允许下划线',
-              },
-              { required: true },
-            ]}
-          >
-            <Input placeholder="请输入账号密码（6~16位）" maxlength="16" suffix={passwordLevel} />
-          </Form.Item>
+          <div className={styles.formBox}>
+            <Form.Item
+              hasFeedback
+              name="password"
+              label="账号密码"
+              rules={[
+                {
+                  pattern: /^[a-zA-Z0-9_]{6,16}$/,
+                  message: '长度6-16位，支持字母与数字，允许下划线',
+                },
+                { required: true },
+              ]}
+            >
+              <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,52 +144,68 @@ const ChangePasswordModal = props => {
           newPassword: '',
           passwordConfirm: '',
         });
+        setNewPasswordLevel('');
+        setPasswordConfirmLevel('');
         onCancel();
       }}
       okText="确认"
       cancelText="取消"
     >
-      <Form form={passwordForm} labelCol={{ span: 4 }} onFieldsChange={changeValue}>
-        <Form.Item name="oldPassword" label="原始密码">
-          <Input disabled />
-        </Form.Item>
-        <Form.Item
-          name="newPassword"
-          label="新密码"
-          rules={[
-            {
-              pattern: /^[a-zA-Z0-9_]{6,16}$/,
-              message: '长度6-16位，支持字母与数字，允许下划线',
-            },
-            { required: true },
-          ]}
-        >
-          <Input
-            placeholder="请输入新密码"
-            autoComplete="off"
-            maxLength="16"
-            suffix={newPasswordLevel}
-          />
-        </Form.Item>
-        <Form.Item
-          name="passwordConfirm"
-          label="确认密码"
-          rules={[
-            {
-              pattern: /^[a-zA-Z0-9_]{6,16}$/,
-              message: '长度6-16位，支持字母与数字，允许下划线',
-            },
-            { required: true },
-          ]}
-        >
-          <Input
-            placeholder="再次确认新密码"
-            autoComplete="off"
-            maxLength="16"
-            suffix={passwordConfirmLevel}
-          />
-        </Form.Item>
-      </Form>
+      <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="新密码"
+              rules={[
+                {
+                  pattern: /^[a-zA-Z0-9_]{6,16}$/,
+                  message: '长度6-16位，支持字母与数字，允许下划线',
+                },
+                { required: true },
+              ]}
+            >
+              <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="确认密码"
+              rules={[
+                {
+                  pattern: /^[a-zA-Z0-9_]{6,16}$/,
+                  message: '长度6-16位，支持字母与数字，允许下划线',
+                },
+                { required: true },
+              ]}
+            >
+              <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>
   );
 };