fix: '用户中心拆分编辑用户喝重置密码功能

src/pages/userCenter/userManage/ChangePasswordModal.jsx

 /* eslint-disable import/no-unresolved */
 import React, { useEffect, useState } from 'react';
-import { Modal, Form, Input, notification, message } from 'antd';
-import { updateUserPassword } from '@/services/userManage/api';
-import sha1 from 'sha1';
+import { Modal, Form, Input, notification, message, Divider } from 'antd';
+import voca from 'voca';
 import classNames from 'classnames';
+import { editUser, updateUserPassword, GetPasswordRegularization } from '@/services/userManage/api';
+import sha1 from 'sha1';
 import styles from './AddUserModal.less';
 
 const ChangePasswordModal = props => {
-  const { visible, currentUser, currentSelectOrg, submitSearchUser, onSelect, onCancel } = props;
+  const { visible, currentUser, currentSelectOrg, onCancel, onSelect, submitSearchUser } = props;
+  const [editUserForm] = Form.useForm(); // 编辑用户
+  /** ***正则验证**** */
+  const noChinese = new RegExp(/^[^\u4e00-\u9fa5]+$/); // 不能包含中文
+  const isPhone = new RegExp(/^1(3|4|5|6|7|8|9)\d{9}$/); // 手机号
+  const isEmail = new RegExp(
+    /^[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*@[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*\.[a-z]{2,}$/,
+  ); // 邮箱
   const [passwordForm] = Form.useForm(); // 修改密码
   const [newPasswordLevel, setNewPasswordLevel] = useState('');
   const [passwordConfirmLevel, setPasswordConfirmLevel] = useState('');
+  const [rules, setRules] = useState();
+
   useEffect(() => {
-    console.log(currentUser);
     if (visible) {
-      console.log(currentUser.password);
+      getPasswordRule();
+      editUserForm.setFieldsValue({
+        loginName: voca.stripTags(currentUser.loginName),
+        userName: voca.stripTags(currentUser.userName),
+        phone: voca.stripTags(currentUser.phone) || '',
+        email: currentUser.email || '',
+      });
       passwordForm.setFieldsValue({
         oldPassword: currentUser.password,
         newPassword: '',
@@ -26,6 +41,69 @@ const ChangePasswordModal = props => {
     }
   }, [visible]);
 
+  const getPasswordRule = () => {
+    GetPasswordRegularization().then(res => {
+      if (res.code === 0) {
+        setRules(res.data);
+      }
+    });
+  };
+
+  // 提交-编辑用户
+  const submitEditUser = () => {
+    const newPassword = passwordForm.getFieldValue('newPassword');
+    const passwordConfirm = passwordForm.getFieldValue('passwordConfirm');
+    passwordForm.validateFields().then(validate => {
+      if (validate) {
+        if ((newPassword && newPassword.length < 6) || (passwordConfirm && passwordConfirm < 6)) {
+          notification.error({
+            message: '提交失败',
+            description: '密码至少为6位!',
+          });
+          return;
+        }
+        if (newPassword !== passwordConfirm) {
+          notification.error({
+            message: '提交失败',
+            description: '确认密码不一致!',
+          });
+          return;
+        }
+        if (newPassword && newPassword) {
+          if (newPasswordLevel === '弱') {
+            notification.error({
+              message: '提交失败',
+              description: '密码强度太弱，加强密码强度',
+            });
+            return;
+          }
+          if (
+            !/^(?=.*[a-zA-Z])(?=.*\d)[\w\S]{6,16}$/.test(newPassword) ||
+            !/^(?!.*(?:SELECT|UPDATE|INSERT|AND|OR|'|"|;|--|\\)).*$/.test(newPassword)
+          ) {
+            notification.error({
+              message: '提交失败',
+              description: '密码验证未通过',
+            });
+            return;
+          }
+        }
+        // 所有验证通过才可以提交,phone/email为空时不验证
+
+        submitChangePassword();
+      }
+    });
+  };
+  const title = (
+    <span>
+      重置用户
+      <span style={{ fontWeight: 'bold', color: 'rgb(24, 144, 255)' }}>
+        【{currentUser.userName}】
+      </span>
+      的密码
+    </span>
+  );
+
   // 提交-修改密码
   const submitChangePassword = () => {
     const oldPassword = passwordForm.getFieldValue('oldPassword');
@@ -39,7 +117,7 @@ const ChangePasswordModal = props => {
       newPassword === passwordConfirm
     ) {
       updateUserPassword({
-        UserId: +currentUser.userID,
+        UserId: +currentUser.userId,
         OldPassWord: oldPassword,
         NewPassWord: sha1(newPassword).toUpperCase(),
       })
@@ -48,14 +126,14 @@ const ChangePasswordModal = props => {
             onCancel();
             // eslint-disable-next-line no-unused-expressions
             currentSelectOrg === '-1' ? submitSearchUser() : onSelect([currentSelectOrg]);
-            notification.success({
-              message: '提交成功',
-              duration: 2,
-            });
+            // notification.success({
+            //   message: '提交成功',
+            //   duration: 2,
+            // });
           } else {
             notification.error({
               message: '提交失败',
-              description: res.message,
+              description: res.msg,
             });
           }
           passwordForm.setFieldsValue({
@@ -67,24 +145,6 @@ const ChangePasswordModal = props => {
         .catch(err => {
           message.error(err);
         });
-    } else if (newPassword === '' || passwordConfirm === '') {
-      notification.error({
-        message: '提交失败',
-        description: '带*号为必填项，不能为空',
-      });
-    } else if (
-      (newPassword && newPassword.length < 6) ||
-      (passwordConfirm && passwordConfirm < 6)
-    ) {
-      notification.error({
-        message: '提交失败',
-        description: '密码至少为6位!',
-      });
-    } else if (newPassword !== passwordConfirm) {
-      notification.error({
-        message: '提交失败',
-        description: '确认密码不一致!',
-      });
     }
   };
   const changeValue = changedFields => {
@@ -123,32 +183,16 @@ const ChangePasswordModal = props => {
         return '强';
     }
   };
-  const title = (
-    <span>
-      修改用户
-      <span style={{ fontWeight: 'bold', color: 'rgb(24, 144, 255)' }}>
-        【{currentUser.userName}】
-      </span>
-      的密码
-    </span>
-  );
   return (
     <Modal
       title={title}
       visible={visible}
-      onOk={submitChangePassword}
       maskClosable={false}
       destroyOnClose
-      afterClose={() => {
-        passwordForm.resetFields();
-      }}
+      onOk={submitEditUser}
       onCancel={() => {
-        passwordForm.setFieldsValue({
-          oldPassword: currentUser.password,
-          newPassword: '',
-          passwordConfirm: '',
-        });
         onCancel();
+        passwordForm.resetFields();
       }}
       okText="确认"
       cancelText="取消"
@@ -163,11 +207,16 @@ const ChangePasswordModal = props => {
               name="newPassword"
               label="新密码"
               rules={[
+                { required: true, message: '请输入密码' },
                 {
-                  pattern: /^[a-zA-Z0-9_]{6,16}$/,
-                  message: '长度6-16位，支持字母与数字，允许下划线',
+                  pattern: rules ? rules.regex : `/^(?=.*[a-zA-Z])(?=.*d)[wS]{6,16}$/`,
+                  message: rules ? rules.tip : '长度6-16位，必须包含数字与字母',
                 },
-                { required: true },
+                {
+                  pattern: /^(?!.*(?:SELECT|UPDATE|INSERT|AND|OR|'|"|;|--|\\)).*$/,
+                  message: '当前密码存在sql注入风险，请重新输入', // 防止sql注入
+                },
+                // { required: true },
               ]}
             >
               <Input.Password
@@ -198,11 +247,15 @@ const ChangePasswordModal = props => {
               name="passwordConfirm"
               label="确认密码"
               rules={[
+                { required: true, message: '请输入密码' },
+                {
+                  pattern: rules ? rules.regex : `/^(?=.*[a-zA-Z])(?=.*d)[wS]{6,16}$/`,
+                  message: rules ? rules.tip : '长度6-16位，必须包含数字与字母',
+                },
                 {
-                  pattern: /^[a-zA-Z0-9_]{6,16}$/,
-                  message: '长度6-16位，支持字母与数字，允许下划线',
+                  pattern: /^(?!.*(?:SELECT|UPDATE|INSERT|AND|OR|'|"|;|--|\\)).*$/,
+                  message: '当前密码存在sql注入风险，请重新输入', // 防止sql注入
                 },
-                { required: true },
               ]}
             >
               <Input.Password

src/pages/userCenter/userManage/EditUserModal.jsx

 /* eslint-disable import/no-unresolved */
 import React, { useEffect, useState } from 'react';
-import { Modal, Form, Input, notification, message, Divider } from 'antd';
+import { Modal, Form, Input, notification, message } from 'antd';
 import voca from 'voca';
 import classNames from 'classnames';
-import { editUser, updateUserPassword, GetPasswordRegularization } from '@/services/userManage/api';
+import { editUser } from '@/services/userManage/api';
 import sha1 from 'sha1';
 import styles from './AddUserModal.less';
 
@@ -16,48 +16,24 @@ const EditUserModal = props => {
   const isEmail = new RegExp(
     /^[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*@[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*\.[a-z]{2,}$/,
   ); // 邮箱
-  const [passwordForm] = Form.useForm(); // 修改密码
-  const [newPasswordLevel, setNewPasswordLevel] = useState('');
-  const [passwordConfirmLevel, setPasswordConfirmLevel] = useState('');
-  const [rules, setRules] = useState();
 
   useEffect(() => {
     if (visible) {
-      getPasswordRule();
       editUserForm.setFieldsValue({
         loginName: voca.stripTags(currentUser.loginName),
         userName: voca.stripTags(currentUser.userName),
         phone: voca.stripTags(currentUser.phone) || '',
         email: currentUser.email || '',
       });
-      passwordForm.setFieldsValue({
-        oldPassword: currentUser.password,
-        newPassword: '',
-        passwordConfirm: '',
-      });
-    } else {
-      setNewPasswordLevel('');
-      setPasswordConfirmLevel('');
     }
   }, [visible]);
 
-  const getPasswordRule = () => {
-    GetPasswordRegularization().then(res => {
-      if (res.code === 0) {
-        setRules(res.data);
-      }
-    });
-  };
-
   // 提交-编辑用户
   const submitEditUser = () => {
     const loginName = voca.stripTags(editUserForm.getFieldValue('loginName'));
     const userName = voca.stripTags(editUserForm.getFieldValue('userName'));
     const phone = voca.stripTags(editUserForm.getFieldValue('phone')) || '';
     const email = editUserForm.getFieldValue('email') || '';
-    const oldPassword = passwordForm.getFieldValue('oldPassword');
-    const newPassword = passwordForm.getFieldValue('newPassword');
-    const passwordConfirm = passwordForm.getFieldValue('passwordConfirm');
     editUserForm.validateFields().then(validate => {
       // 正则验证
       if (loginName === '') {
@@ -95,47 +71,6 @@ const EditUserModal = props => {
         });
         return;
       }
-      // if ((newPassword && passwordConfirm === '') || (passwordConfirm && newPassword === '')) {
-      //   notification.error({
-      //     message: '提交失败',
-      //     description: '请填写密码',
-      //   });
-      //   return;
-      // }
-
-      if ((newPassword && newPassword.length < 6) || (passwordConfirm && passwordConfirm < 6)) {
-        notification.error({
-          message: '提交失败',
-          description: '密码至少为6位!',
-        });
-        return;
-      }
-      if (newPassword !== passwordConfirm) {
-        notification.error({
-          message: '提交失败',
-          description: '确认密码不一致!',
-        });
-        return;
-      }
-      if (newPassword && newPassword) {
-        if (newPasswordLevel === '弱') {
-          notification.error({
-            message: '提交失败',
-            description: '密码强度太弱，加强密码强度',
-          });
-          return;
-        }
-        if (
-          !/^(?=.*[a-zA-Z])(?=.*\d)[\w\S]{6,16}$/.test(newPassword) ||
-          !/^(?!.*(?:SELECT|UPDATE|INSERT|AND|OR|'|"|;|--|\\)).*$/.test(newPassword)
-        ) {
-          notification.error({
-            message: '提交失败',
-            description: '密码验证未通过',
-          });
-          return;
-        }
-      }
       // 所有验证通过才可以提交,phone/email为空时不验证
       if (
         loginName &&
@@ -149,16 +84,14 @@ const EditUserModal = props => {
             if (res.code === 0) {
               onCancel();
               // 重新获取用户表
-              if (!newPassword) {
+
               // eslint-disable-next-line no-unused-expressions
               currentSelectOrg === '-1' ? submitSearchUser() : onSelect([currentSelectOrg]);
-              }
 
               notification.success({
                 message: '提交成功',
                 duration: 2,
               });
-              submitChangePassword();
             } else {
               notification.error({
                 message: '提交失败',
@@ -188,85 +121,6 @@ const EditUserModal = props => {
     </span>
   );
 
-  // 提交-修改密码
-  const submitChangePassword = () => {
-    const oldPassword = passwordForm.getFieldValue('oldPassword');
-    const newPassword = passwordForm.getFieldValue('newPassword');
-    const passwordConfirm = passwordForm.getFieldValue('passwordConfirm');
-    if (
-      newPassword &&
-      newPassword.length >= 6 &&
-      passwordConfirm &&
-      newPassword.length >= 6 &&
-      newPassword === passwordConfirm
-    ) {
-      updateUserPassword({
-        UserId: +currentUser.userId,
-        OldPassWord: oldPassword,
-        NewPassWord: sha1(newPassword).toUpperCase(),
-      })
-        .then(res => {
-          if (res.code === 0) {
-            onCancel();
-            // eslint-disable-next-line no-unused-expressions
-            currentSelectOrg === '-1' ? submitSearchUser() : onSelect([currentSelectOrg]);
-            // notification.success({
-            //   message: '提交成功',
-            //   duration: 2,
-            // });
-          } else {
-            notification.error({
-              message: '提交失败',
-              description: res.message,
-            });
-          }
-          passwordForm.setFieldsValue({
-            oldPassword: currentUser.password,
-            newPassword: '',
-            passwordConfirm: '',
-          });
-        })
-        .catch(err => {
-          message.error(err);
-        });
-    }
-  };
-  const changeValue = changedFields => {
-    if (changedFields[0].name[0] === 'newPassword') {
-      setNewPasswordLevel(checkStrong(changedFields[0].value));
-    }
-    if (changedFields[0].name[0] === 'passwordConfirm') {
-      setPasswordConfirmLevel(checkStrong(changedFields[0].value));
-    }
-  };
-  const checkStrong = sValue => {
-    let modes = 0;
-    // 正则表达式验证符合要求的
-    if (sValue.length < 1) return modes;
-    if (/\d/.test(sValue)) modes++; // 数字
-    if (/[a-z]/.test(sValue)) modes++; // 小写
-    if (/[A-Z]/.test(sValue)) modes++; // 大写
-    if (/[_\W]/.test(sValue)) modes++; // 特殊字符
-    console.log(modes, 'modes');
-    // 逻辑处理
-    // eslint-disable-next-line default-case
-    switch (modes) {
-      case 1:
-        return '弱';
-      case 2:
-        if (sValue.length > 8) {
-          return '中';
-        }
-        return '弱';
-      case 3:
-        if (sValue.length > 8) {
-          return '强';
-        }
-        return '中';
-      case 4:
-        return '强';
-    }
-  };
   return (
     <Modal
       title={title}
@@ -346,100 +200,6 @@ const EditUserModal = props => {
           <Input placeholder="请输入电子邮箱" autoComplete="off" />
         </Form.Item>
       </Form>
-      <Divider
-        orientation="left"
-        style={{
-          borderTopColor: '#99bbe8',
-          color: '#15428b',
-          fontWeight: 700,
-        }}
-      >
-        重置密码（选填）
-      </Divider>
-      <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: rules ? rules.regex : `/^(?=.*[a-zA-Z])(?=.*d)[wS]{6,16}$/`,
-                  message: rules ? rules.tip : '长度6-16位，必须包含数字与字母',
-                },
-                {
-                  pattern: /^(?!.*(?:SELECT|UPDATE|INSERT|AND|OR|'|"|;|--|\\)).*$/,
-                  message: '当前密码存在sql注入风险，请重新输入', // 防止sql注入
-                },
-                // { required: true },
-              ]}
-            >
-              <Input.Password
-                placeholder="请输入新密码"
-                autoComplete="off"
-                maxLength="16"
-                onCopy={e => {
-                  e.preventDefault();
-                }}
-                onPaste={e => {
-                  // 禁止粘贴
-                  e.preventDefault();
-                }}
-              />
-            </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: rules ? rules.regex : `/^(?=.*[a-zA-Z])(?=.*d)[wS]{6,16}$/`,
-                  message: rules ? rules.tip : '长度6-16位，必须包含数字与字母',
-                },
-                {
-                  pattern: /^(?!.*(?:SELECT|UPDATE|INSERT|AND|OR|'|"|;|--|\\)).*$/,
-                  message: '当前密码存在sql注入风险，请重新输入', // 防止sql注入
-                },
-              ]}
-            >
-              <Input.Password
-                placeholder="再次确认新密码"
-                autoComplete="off"
-                maxLength="16"
-                onCopy={e => {
-                  e.preventDefault();
-                }}
-                onPaste={e => {
-                  // 禁止粘贴
-                  e.preventDefault();
-                }}
-              />
-            </Form.Item>
-            <div
-              className={classNames(styles.tipsText, {
-                [styles.tipsRed]: passwordConfirmLevel === '弱',
-                [styles.tipsOrange]: passwordConfirmLevel === '中',
-                [styles.tipsGreen]: passwordConfirmLevel === '强',
-              })}
-            >
-              {passwordConfirmLevel}
-            </div>
-          </div>
-        </Form>
-      </div>
     </Modal>
   );
 };

src/pages/userCenter/userManage/UserManage.jsx

@@ -411,12 +411,12 @@ const UserManage = () => {
               />
             </Popconfirm>
           </Tooltip> */}
-          {/* <Tooltip title="修改密码">
+          <Tooltip title="修改密码">
             <UnlockOutlined
               onClick={() => changePassword(record)}
               style={{ fontSize: '16px', color: '#1890FF' }}
             />
-          </Tooltip> */}
+          </Tooltip>
           {/* <Tooltip title="编辑用户">
             <EditTwoTone onClick={() => editUser(record)} style={{ fontSize: '16px' }} />
           </Tooltip> */}