fix: '修改用户管理界面样式'

src/pages/userCenter/userManage/AddSubOrgModal.jsx

@@ -71,7 +71,8 @@ const AddUserModal = props => {
   };
   const title = (
     <span>
-      在<span style={{ fontWeight: 'bold', color: 'red' }}>{orgTitle1}</span>下添加机构
+      在<span style={{ fontWeight: 'bold', color: 'rgb(24, 144, 255)' }}>【{orgTitle1}】</span>
+      下添加机构
     </span>
   );
   return (

src/pages/userCenter/userManage/AddUserModal.jsx

@@ -95,7 +95,8 @@ const AddUserModal = props => {
   };
   const title = (
     <span>
-      在<span style={{ fontWeight: 'bold', color: 'red' }}>{orgTitle1}</span>下添加用户
+      在<span style={{ fontWeight: 'bold', color: 'rgb(24, 144, 255)' }}>【{orgTitle1}】</span>
+      下添加用户
     </span>
   );
 
@@ -120,13 +121,13 @@ const AddUserModal = props => {
           label="登录名称"
           rules={[
             {
-              pattern: new RegExp(/^[^\u4e00-\u9fa5]+$/),
-              message: '不支持中文',
+              pattern: /^[a-zA-Z0-9_]{0,}$/,
+              message: '不支持中文和特殊字符',
             },
             { required: true },
           ]}
         >
-          <Input placeholder="登录名称不支持中文" />
+          <Input placeholder="登录名称不支持中文与特殊字符" maxLength="64" />
         </Form.Item>
         <Form.Item
           hasFeedback
@@ -135,15 +136,23 @@ const AddUserModal = props => {
           rules={[
             {
               pattern: /^(?=.*[a-zA-Z\d])(?=.*([a-zA-Z].*))(?=.*[0-9].*)[!-~]{6,16}$/,
-              message: '密码长度6-16位，且必须包含数字和字母,不能存在空格',
+              message: '密码长度6-16位，且必须包含数字和字母，不能存在空格',
             },
             { required: true },
           ]}
         >
-          <Input placeholder="请输入账户密码,至少6位" />
+          <Input placeholder="请输入账户密码，至少6位" maxlength="16" />
         </Form.Item>
-        <Form.Item hasFeedback name="userName" label="用户名称" rules={[{ required: true }]}>
-          <Input placeholder="请输入用户姓名" />
+        <Form.Item
+          hasFeedback
+          name="userName"
+          label="用户姓名"
+          rules={[
+            { required: true },
+            { pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+$/, message: '不支持特殊字符' },
+          ]}
+        >
+          <Input placeholder="用户姓名不支持特殊字符" maxLength="40" />
         </Form.Item>
         <Form.Item
           hasFeedback
@@ -151,12 +160,12 @@ const AddUserModal = props => {
           label="手机号码"
           rules={[
             {
-              pattern: new RegExp(/^1(3|4|5|6|7|8|9)\d{9}$/),
-              message: '请输入11位手机号码!',
+              pattern: new RegExp(/^1[0-9]{10}$/),
+              message: '手机号码以1开头11位',
             },
           ]}
         >
-          <Input placeholder="请输入11位手机号码" autoComplete="off" />
+          <Input placeholder="请输入11位手机号码" maxlength="11" autoComplete="off" />
         </Form.Item>
         <Form.Item
           hasFeedback

src/pages/userCenter/userManage/ChangePasswordModal.jsx

@@ -12,7 +12,7 @@ const ChangePasswordModal = props => {
       newPassword: '',
       passwordConfirm: '',
     });
-  }, [currentUser]);
+  }, [visible]);
 
   // 提交-修改密码
   const submitChangePassword = () => {
@@ -75,9 +75,18 @@ const ChangePasswordModal = props => {
       });
     }
   };
+  const title = (
+    <span>
+      修改用户
+      <span style={{ fontWeight: 'bold', color: 'rgb(24, 144, 255)' }}>
+        【{currentUser.userName}】
+      </span>
+      的密码
+    </span>
+  );
   return (
     <Modal
-      title="修改密码"
+      title={title}
       visible={visible}
       onOk={submitChangePassword}
       maskClosable={false}
@@ -103,16 +112,28 @@ const ChangePasswordModal = props => {
         <Form.Item
           name="newPassword"
           label="新密码"
-          rules={[{ required: true, message: '不能为空' }]}
+          rules={[
+            {
+              pattern: /^(?=.*[a-zA-Z\d])(?=.*([a-zA-Z].*))(?=.*[0-9].*)[!-~]{6,16}$/,
+              message: '密码长度6-16位，且必须包含数字和字母,不能存在空格',
+            },
+            { required: true },
+          ]}
         >
-          <Input placeholder="请输入新密码" type="password" autoComplete="off" />
+          <Input placeholder="请输入新密码" autoComplete="off" maxLength="16" />
         </Form.Item>
         <Form.Item
           name="passwordConfirm"
           label="确认密码"
-          rules={[{ required: true, message: '不能为空' }]}
+          rules={[
+            {
+              pattern: /^(?=.*[a-zA-Z\d])(?=.*([a-zA-Z].*))(?=.*[0-9].*)[!-~]{6,16}$/,
+              message: '密码长度6-16位，且必须包含数字和字母,不能存在空格',
+            },
+            { required: true },
+          ]}
         >
-          <Input placeholder="再次确认新密码" type="password" autoComplete="off" />
+          <Input placeholder="再次确认新密码" autoComplete="off" maxLength="16" />
         </Form.Item>
       </Form>
     </Modal>

src/pages/userCenter/userManage/EditOrgModal.jsx

@@ -2,7 +2,7 @@
  * @Description:
  * @Author: leizhe
  * @Date: 2022-01-13 17:26:14
- * @LastEditTime: 2022-03-10 14:46:39
+ * @LastEditTime: 2022-03-11 15:54:02
  * @LastEditors: leizhe
  */
 import React, { useEffect } from 'react';
@@ -10,24 +10,16 @@ import { Modal, Form, Input, notification, message } from 'antd';
 import { editOrgInfo } from '@/services/userManage/api';
 
 const EditOrgModal = props => {
-  const {
-    visible,
-    orgID,
-    orgTitle,
-    description,
-    onCancel,
-    updateTrees,
-    onSelect,
-    orgTitle1,
-  } = props;
+  const { visible, orgID, description, onCancel, updateTrees, onSelect, orgTitle1 } = props;
   const [editOrgForm] = Form.useForm(); // 添加用户
 
   useEffect(() => {
+    console.log(orgTitle1);
     editOrgForm.setFieldsValue({
-      OUName: orgTitle,
+      OUName: orgTitle1,
       description,
     });
-  }, [orgTitle, description]);
+  }, [visible]);
 
   // 提交-编辑当前机构
   const submitEditOrg = () =>
@@ -60,7 +52,7 @@ const EditOrgModal = props => {
       });
   const title = (
     <span>
-      编辑<span style={{ fontWeight: 'bold', color: 'red' }}>{orgTitle1}</span>
+      编辑<span style={{ fontWeight: 'bold', color: '#1890ff' }}>【{orgTitle1}】</span>信息
     </span>
   );
   return (
@@ -70,9 +62,9 @@ const EditOrgModal = props => {
       onCancel={onCancel}
       maskClosable={false}
       destroyOnClose
-      afterClose={() => {
-        editOrgForm.resetFields();
-      }}
+      // afterClose={() => {
+      //   editOrgForm.resetFields();
+      // }}
       onOk={submitEditOrg}
       okText="确认"
       cancelText="取消"

src/pages/userCenter/userManage/EditUserModal.jsx

@@ -14,13 +14,14 @@ const EditUserModal = props => {
   ); // 邮箱
 
   useEffect(() => {
+    console.log(currentUser);
     editUserForm.setFieldsValue({
       loginName: voca.stripTags(currentUser.loginName),
       userName: voca.stripTags(currentUser.userName),
       phone: voca.stripTags(currentUser.phone) || '',
       email: currentUser.email || '',
     });
-  }, [currentUser]);
+  }, [visible]);
 
   // 提交-编辑用户
   const submitEditUser = () => {
@@ -92,15 +93,24 @@ const EditUserModal = props => {
         });
     }
   };
+  const title = (
+    <span>
+      编辑用户
+      <span style={{ fontWeight: 'bold', color: 'rgb(24, 144, 255)' }}>
+        【{currentUser.userName}】
+      </span>
+      的信息
+    </span>
+  );
   return (
     <Modal
-      title="编辑用户"
+      title={title}
       visible={visible}
       maskClosable={false}
       destroyOnClose
-      afterClose={() => {
-        editUserForm.resetFields();
-      }}
+      // afterClose={() => {
+      //   editUserForm.resetFields();
+      // }}
       onOk={submitEditUser}
       onCancel={() => {
         onCancel();
@@ -115,11 +125,30 @@ const EditUserModal = props => {
       cancelText="取消"
     >
       <Form form={editUserForm} labelCol={{ span: 4 }}>
-        <Form.Item hasFeedback name="loginName" label="登录名称" rules={[{ message: '不能为空' }]}>
-          <Input placeholder="请输入登录名称" />
+        <Form.Item
+          hasFeedback
+          name="loginName"
+          label="登录名称"
+          rules={[
+            {
+              pattern: /^[a-zA-Z0-9_]{0,}$/,
+              message: '不支持中文和特殊字符',
+            },
+            { required: true },
+          ]}
+        >
+          <Input placeholder="登录名称不支持中文与特殊字符" maxLength="64" />
         </Form.Item>
-        <Form.Item hasFeedback name="userName" label="用户姓名" rules={[{ message: '不能为空' }]}>
-          <Input placeholder="请输入用户姓名" />
+        <Form.Item
+          hasFeedback
+          name="userName"
+          label="用户姓名"
+          rules={[
+            { required: true },
+            { pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+$/, message: '不支持特殊字符' },
+          ]}
+        >
+          <Input placeholder="用户姓名不支持特殊字符" maxLength="40" />
         </Form.Item>
         <Form.Item
           hasFeedback
@@ -127,12 +156,12 @@ const EditUserModal = props => {
           label="手机号码"
           rules={[
             {
-              pattern: new RegExp(/^1(3|4|5|6|7|8|9)\d{9}$/),
-              message: '请输入11位手机号码!',
+              pattern: new RegExp(/^1[0-9]{10}$/),
+              message: '手机号码以1开头11位',
             },
           ]}
         >
-          <Input placeholder="请输入11位手机号码" autoComplete="off" />
+          <Input placeholder="请输入11位手机号码" autoComplete="off" maxlength="11" />
         </Form.Item>
         <Form.Item
           hasFeedback

src/pages/userCenter/userManage/RelateRoleModal.jsx

@@ -127,7 +127,10 @@ const RelateRoleModal = props => {
   const title1 = (
     <span>
       <span>
-        关联角色<span style={{ fontWeight: 'bold', color: 'red' }}>{currentUser.userName}</span>
+        关联角色
+        <span style={{ fontWeight: 'bold', color: 'rgb(24, 144, 255)' }}>
+          【{currentUser.userName}】
+        </span>
       </span>
     </span>
   );

src/pages/userCenter/userManage/UserManage.jsx

@@ -38,6 +38,7 @@ import {
   EllipsisOutlined,
   PlusOutlined,
   SyncOutlined,
+  ClusterOutlined,
 } from '@ant-design/icons';
 import PageContainer from '@/components/BasePageContainer';
 import voca from 'voca';
@@ -389,7 +390,14 @@ const UserManage = () => {
     return {
       title: (
         <div className={styles.title1}>
-          <span className={styles.titleText}>{org.text}</span>
+          <span className={styles.titleText}>
+            {org.children.length == 0 ? (
+              <ApartmentOutlined style={{ fontSize: '14px', color: '#1890FF' }} />
+            ) : (
+              <span />
+            )}
+            <span style={{ marginLeft: '5px' }}>{org.text}</span>
+          </span>
           <span
             className={classnames({
               [styles.tip1]: true,
@@ -405,7 +413,7 @@ const UserManage = () => {
             <Tooltip title="" className={styles.fs1}>
               <Dropdown overlay={orgButtonMenu}>
                 <PlusOutlined
-                  style={{ marginLeft: 20 }}
+                  style={{ marginLeft: 20, lineHeight: '24px' }}
                   onClick={e => e.stopPropagation()}
                   onMouseEnter={e => {
                     setOrgID(org);
@@ -417,7 +425,7 @@ const UserManage = () => {
             </Tooltip>
             <Dropdown overlay={orgButtonMenu1}>
               <EllipsisOutlined
-                style={{ marginLeft: 10, fontSize: '20px' }}
+                style={{ marginLeft: 10, fontSize: '20px', lineHeight: '24px' }}
                 onClick={e => e.stopPropagation()}
                 onMouseEnter={e => {
                   setOrgID(org);
@@ -1332,23 +1340,31 @@ const UserManage = () => {
   // 机构操作
   const orgButtonMenu = (
     <Menu onClick={e => addChange(e)}>
-      <Menu.Item key="1" onClick={addUser} icon={<UserAddOutlined />}>
+      <Menu.Item key="1" onClick={addUser} icon={<UserAddOutlined style={{ marginTop: '5px' }} />}>
         添加用户
       </Menu.Item>
-      <Menu.Item key="2" onClick={addSubOrg} icon={<UsergroupAddOutlined />}>
+      <Menu.Item
+        key="2"
+        onClick={addSubOrg}
+        icon={<ClusterOutlined style={{ marginTop: '5px' }} />}
+      >
         添加下级机构
       </Menu.Item>
     </Menu>
   );
   const orgButtonMenu1 = (
     <Menu onClick={e => addChange(e)}>
-      <Menu.Item key="3" onClick={editOrg} icon={<EditOutlined />}>
+      <Menu.Item key="3" onClick={editOrg} icon={<EditOutlined style={{ marginTop: '5px' }} />}>
         编辑当前机构
       </Menu.Item>
-      <Menu.Item key="4" onClick={deleteOrg} icon={<DeleteOutlined />}>
+      <Menu.Item key="4" onClick={deleteOrg} icon={<DeleteOutlined style={{ marginTop: '5px' }} />}>
         删除当前机构
       </Menu.Item>
-      <Menu.Item key="5" onClick={EditOrgScope} icon={<BorderlessTableOutlined />}>
+      <Menu.Item
+        key="5"
+        onClick={EditOrgScope}
+        icon={<BorderlessTableOutlined style={{ marginTop: '5px' }} />}
+      >
         编辑机构范围
       </Menu.Item>
     </Menu>

src/pages/userCenter/userManage/UserManage.less

@@ -101,9 +101,9 @@
       width: 90%;
     }
   }
-  .anticon svg {
-    margin-top: -3px;
-  }
+  // .anticon svg {
+  //   margin-top: -3px;
+  // }
   .ant-popover-message {
     position: relative;
     padding: 0px 0 0px;
@@ -141,6 +141,9 @@
     .ant-table.ant-table-bordered > .ant-table-container {
       min-width: calc(100vw - 582px);
     }
+    .ant-tree-switcher_close .ant-tree-switcher-icon svg {
+      margin: auto;
+    }
     .orgContainer {
       height: calc(100vh - 74px);
       width: 320px;
@@ -156,7 +159,6 @@
         padding-top: 6px;
         .ant-tree-switcher {
           line-height: 1;
-          margin-right: 0px !important;
           color: #1890ff;
           .ant-tree-switcher-line-icon {
             margin-left: 5px;
@@ -200,14 +202,14 @@
       display: flex;
       align-items: center;
       justify-content: flex-end;
-      width: 100%;
+      width: 25%;
     }
     .title1:hover {
       .tip1 {
         display: flex;
         align-items: center;
         justify-content: flex-end;
-        width: 100%;
+        width: 25%;
       }
     }
     .titleText {
@@ -277,7 +279,6 @@
     .ant-tree-switcher {
       line-height: 1;
       color: #1890ff;
-      margin-right: 0px !important;
     }
     .ant-checkbox-group .ant-checkbox-group-item {
       margin-right: 0px !important;