fix: '角色管理模态关闭清空数据'

src/pages/userCenter/roleManage/RoleManage.jsx

@@ -80,6 +80,7 @@ const SiteManage = () => {
   const [disFlag, setDisFlag] = useState(false);
   const [chileID, setChildID] = useState([]);
   const [descrip, setDescrip] = useState('当前未选中角色');
+  const [expendKey, setExpendKey] = useState(''); // 保存默认展开项
   // const [childData, setChildData] = useState({visibleValue:''})
 
   // 点击树的回调
@@ -93,7 +94,6 @@ const SiteManage = () => {
       let aa = chileID.find(i => i.roleID === id);
       if (id) {
         setSaveTreeId(id);
-        setValueList([...valueList]);
         if (aa) {
           setRoleID('');
           setDescrip('系统分组下的角色不可配置菜单权限也不能被关联');
@@ -102,6 +102,8 @@ const SiteManage = () => {
           setRoleID(id);
           setFlagSearch(1);
         }
+        setValueList([...valueList]);
+        console.log([...valueList]);
       } else {
         // setRoleID(saveTreeId);
         setRoleID('');
@@ -237,6 +239,7 @@ const SiteManage = () => {
             .flat(Infinity)
             .filter(Boolean),
         );
+        console.log(valueList);
         setLoading(false);
       })
       .catch(err => {
@@ -723,6 +726,16 @@ const SiteManage = () => {
     }).then(res => {
       if (res.code === 0) {
         getRoleGroup();
+        if (infos.dragNode.roleID == itemObj.roleID) {
+          if (id == '系统分组') {
+            setRoleID('');
+            setDescrip('系统分组下的角色不可配置菜单权限也不能被关联');
+            setFlagSearch(0);
+          } else {
+            setRoleID(infos.dragNode.roleID);
+            setFlagSearch(1);
+          }
+        }
       }
     });
     console.log(dragList, 'dragList');
@@ -759,6 +772,7 @@ const SiteManage = () => {
                   blockNode
                   draggable
                   onDrop={handleDrop}
+                  // setExpendKey={expendKey}
                 />
               </div>
             )}

src/pages/userCenter/roleManage/RoleManage.less

-.cardBox{
+.cardBox {
   min-height: calc(100vh - 74px);
   max-height: calc(100vh - 74px);
   overflow-y: scroll;
@@ -10,29 +10,29 @@
   margin-right: 10px;
   position: relative;
   // transition: left,width 10s;
-  transition-property:width,left;
+  transition-property: width, left;
   transition-duration: 0.5s;
   white-space: nowrap;
-  .ant-tree-node-content-wrapper{
+  .ant-tree-node-content-wrapper {
     display: flex;
     align-items: center;
-    .ant-tree-iconEle{
+    .ant-tree-iconEle {
       display: flex;
       align-items: center;
       width: 18px;
     }
   }
 }
-.hideBox{
+.hideBox {
   left: 0px;
   top: 0;
   width: 20px;
 }
-.hideH{
+.hideH {
   width: 100%;
 }
 
-.ant-tree-node-content-wrapper-open{
+.ant-tree-node-content-wrapper-open {
   display: flex;
   align-items: center;
 }
@@ -48,43 +48,42 @@
     display: block;
   }
 }
-.titleBox{
+.titleBox {
   display: flex;
   // flex-wrap: wrap;
   justify-content: space-around;
   align-items: center;
 }
-.cardBoxR{
+.cardBoxR {
   min-height: calc(100vh - 144px);
   max-height: calc(100vh - 144px);
   min-width: 870px;
   overflow-y: scroll;
 }
-:global{
-  .ant-tree-switcher{
+:global {
+  .ant-tree-switcher {
     display: flex;
     align-items: center;
     margin-right: -8px;
     // color:#1890FF;
-    .ant-tree-switcher-line-icon{
+    .ant-tree-switcher-line-icon {
       // margin-left: 5px;
     }
   }
 }
 
-.hide{
+.hide {
   display: block;
   position: absolute;
   font-size: 18px;
-  color: #1890FF!important;
+  color: #1890ff !important;
   top: 45%;
   right: -3px;
-  transform: translate(0%,-50%);
+  transform: translate(0%, -50%);
   z-index: 2;
 }
 
-
-.boxR{
+.boxR {
   width: 100%;
   position: relative;
   transition: width 2s;
@@ -93,35 +92,35 @@
 //   vertical-align: 0.125em;
 //   color:#1890FF;
 // }
-.content{
+.content {
   width: 100%;
   display: flex;
   position: relative;
 }
-.title{
+.title {
   display: flex;
   align-items: center;
+  justify-content: space-between;
   width: 100%;
 }
-.tip{
+.tip {
   display: none;
 }
-.title:hover{
-  .tip{
+.title:hover {
+  .tip {
     display: flex;
     align-items: center;
     justify-content: flex-end;
     width: 100%;
   }
 }
-.fs{
+.fs {
   font-size: 18px;
   margin-left: 10px;
 }
-.titleTop{
-  width: 12rem;
-  overflow:hidden;
-  white-space:nowrap;
-  text-overflow:ellipsis;
-
+.titleTop {
+  width: 20rem;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }

src/pages/userCenter/userManage/AddSubOrgModal.jsx

@@ -80,6 +80,11 @@ const AddUserModal = props => {
       visible={visible}
       onCancel={onCancel}
       onOk={submitAddOrg}
+      destroyOnClose
+      afterClose={() => {
+        addOrgForm.resetFields();
+      }}
+      maskClosable={false}
       okText="确认"
       cancelText="取消"
     >

src/pages/userCenter/userManage/AddUserModal.jsx

@@ -104,12 +104,16 @@ const AddUserModal = props => {
       title={title}
       visible={visible}
       onCancel={onCancel}
+      maskClosable={false}
+      destroyOnClose
+      afterClose={() => {
+        addUserForm.resetFields();
+      }}
       onOk={submitAddUser}
       okText="确认"
       cancelText="取消"
     >
       <Form form={addUserForm} labelCol={{ span: 4 }}>
-        <span style={{ position: 'absolute', top: '21%', color: 'red', fontSize: '16px' }}>*</span>
         <Form.Item
           hasFeedback
           name="loginName"
@@ -119,44 +123,26 @@ const AddUserModal = props => {
               pattern: new RegExp(/^[^\u4e00-\u9fa5]+$/),
               message: '不支持中文',
             },
-            {
-              pattern: new RegExp(/^[^\s]*$/),
-              message: '不能为空',
-            },
+            { required: true },
           ]}
         >
           <Input placeholder="登录名称不支持中文" />
         </Form.Item>
-        <span style={{ position: 'absolute', top: '35%', color: 'red', fontSize: '16px' }}>*</span>
         <Form.Item
           hasFeedback
           name="password"
           label="账户密码"
           rules={[
             {
-              pattern: /^[^\s]*$/,
-              message: '不能为空',
-            },
-            {
-              pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,}$/,
-              message: '密码长度必须大于6，且必须包含数字和字母',
+              pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z][^ ]{6,16}$/,
+              message: '密码长度6-16位，且必须包含数字和字母,不能存在空格',
             },
+            { required: true },
           ]}
         >
           <Input placeholder="请输入账户密码,至少6位" />
         </Form.Item>
-        <span style={{ position: 'absolute', top: '49%', color: 'red', fontSize: '16px' }}>*</span>
-        <Form.Item
-          hasFeedback
-          name="userName"
-          label="用户名称"
-          rules={[
-            {
-              pattern: /^[^\s]*$/,
-              message: '不能为空',
-            },
-          ]}
-        >
+        <Form.Item hasFeedback name="userName" label="用户名称" rules={[{ required: true }]}>
           <Input placeholder="请输入用户姓名" />
         </Form.Item>
         <Form.Item

src/pages/userCenter/userManage/ChangePasswordModal.jsx

@@ -3,14 +3,7 @@ import { Modal, Form, Input, notification, message } from 'antd';
 import { updateUserPassword } from '@/services/userManage/api';
 
 const ChangePasswordModal = props => {
-  const {
-    visible,
-    currentUser,
-    currentSelectOrg,
-    submitSearchUser,
-    onSelect,
-    onCancel,
-  } = props;
+  const { visible, currentUser, currentSelectOrg, submitSearchUser, onSelect, onCancel } = props;
   const [passwordForm] = Form.useForm(); // 修改密码
 
   useEffect(() => {
@@ -42,9 +35,7 @@ const ChangePasswordModal = props => {
           if (res.code === 0) {
             onCancel();
             // eslint-disable-next-line no-unused-expressions
-            currentSelectOrg === '-1'
-              ? submitSearchUser()
-              : onSelect([currentSelectOrg]);
+            currentSelectOrg === '-1' ? submitSearchUser() : onSelect([currentSelectOrg]);
             notification.success({
               message: '提交成功',
               duration: 2,
@@ -89,6 +80,11 @@ const ChangePasswordModal = props => {
       title="修改密码"
       visible={visible}
       onOk={submitChangePassword}
+      maskClosable={false}
+      destroyOnClose
+      afterClose={() => {
+        passwordForm.resetFields();
+      }}
       onCancel={() => {
         passwordForm.setFieldsValue({
           oldPassword: currentUser.password,
@@ -109,22 +105,14 @@ const ChangePasswordModal = props => {
           label="新密码"
           rules={[{ required: true, message: '不能为空' }]}
         >
-          <Input
-            placeholder="请输入新密码"
-            type="password"
-            autoComplete="off"
-          />
+          <Input placeholder="请输入新密码" type="password" autoComplete="off" />
         </Form.Item>
         <Form.Item
           name="passwordConfirm"
           label="确认密码"
           rules={[{ required: true, message: '不能为空' }]}
         >
-          <Input
-            placeholder="再次确认新密码"
-            type="password"
-            autoComplete="off"
-          />
+          <Input placeholder="再次确认新密码" type="password" autoComplete="off" />
         </Form.Item>
       </Form>
     </Modal>

src/pages/userCenter/userManage/DeleteOrgModal.jsx

+/*
+ * @Description:
+ * @Author: leizhe
+ * @Date: 2022-01-13 17:26:14
+ * @LastEditTime: 2022-03-10 14:31:30
+ * @LastEditors: leizhe
+ */
 import React from 'react';
 import { Modal, notification, message } from 'antd';
 import { deleteOrg } from '@/services/userManage/api';
 import { Margin } from 'gojs';
 
 const DeleteOrgModal = props => {
-  const { title, visible, orgID, onCancel, updateTrees, orgTitle} = props;
+  const { title, visible, orgID, onCancel, updateTrees, orgTitle } = props;
 
   // 提交-删除机构
   const submitDeleteOrg = () =>
     deleteOrg(orgID.id)
       .then(res => {
-        if (res.msg==='') {
+        if (res.msg === '') {
           onCancel();
           notification.success({
             message: '提交成功',
@@ -33,11 +40,14 @@ const DeleteOrgModal = props => {
       title={title}
       visible={visible}
       onCancel={onCancel}
+      maskClosable={false}
       onOk={submitDeleteOrg}
       okText="确认"
       cancelText="取消"
     >
-      <p style={{marginLeft:'17px'}}>即将删除<span style={{color:'red'}}>{orgTitle}</span>，是否确认删除？</p>
+      <p style={{ marginLeft: '17px' }}>
+        即将删除<span style={{ color: 'red' }}>{orgTitle}</span>，是否确认删除？
+      </p>
     </Modal>
   );
 };

src/pages/userCenter/userManage/EditOrgModal.jsx

@@ -2,7 +2,7 @@
  * @Description:
  * @Author: leizhe
  * @Date: 2022-01-13 17:26:14
- * @LastEditTime: 2022-03-07 18:50:03
+ * @LastEditTime: 2022-03-10 14:46:39
  * @LastEditors: leizhe
  */
 import React, { useEffect } from 'react';
@@ -68,6 +68,11 @@ const EditOrgModal = props => {
       title={title}
       visible={visible}
       onCancel={onCancel}
+      maskClosable={false}
+      destroyOnClose
+      afterClose={() => {
+        editOrgForm.resetFields();
+      }}
       onOk={submitEditOrg}
       okText="确认"
       cancelText="取消"

src/pages/userCenter/userManage/EditUserModal.jsx

@@ -4,14 +4,7 @@ import voca from 'voca';
 import { editUser } from '@/services/userManage/api';
 
 const EditUserModal = props => {
-  const {
-    visible,
-    currentUser,
-    currentSelectOrg,
-    onCancel,
-    onSelect,
-    submitSearchUser,
-  } = props;
+  const { visible, currentUser, currentSelectOrg, onCancel, onSelect, submitSearchUser } = props;
   const [editUserForm] = Form.useForm(); // 编辑用户
   /** ***正则验证**** */
   const noChinese = new RegExp(/^[^\u4e00-\u9fa5]+$/); // 不能包含中文
@@ -72,13 +65,11 @@ const EditUserModal = props => {
     ) {
       editUser(currentUser.userID, loginName, userName, phone, email)
         .then(res => {
-          if (res.msg==='') {
+          if (res.msg === '') {
             onCancel();
             // 重新获取用户表
             // eslint-disable-next-line no-unused-expressions
-            currentSelectOrg === '-1'
-              ? submitSearchUser()
-              : onSelect([currentSelectOrg]);
+            currentSelectOrg === '-1' ? submitSearchUser() : onSelect([currentSelectOrg]);
             notification.success({
               message: '提交成功',
               duration: 2,
@@ -105,6 +96,11 @@ const EditUserModal = props => {
     <Modal
       title="编辑用户"
       visible={visible}
+      maskClosable={false}
+      destroyOnClose
+      afterClose={() => {
+        editUserForm.resetFields();
+      }}
       onOk={submitEditUser}
       onCancel={() => {
         onCancel();
@@ -119,20 +115,10 @@ const EditUserModal = props => {
       cancelText="取消"
     >
       <Form form={editUserForm} labelCol={{ span: 4 }}>
-        <Form.Item
-          hasFeedback
-          name="loginName"
-          label="登录名称"
-          rules={[{ message: '不能为空' }]}
-        >
+        <Form.Item hasFeedback name="loginName" label="登录名称" rules={[{ message: '不能为空' }]}>
           <Input placeholder="请输入登录名称" />
         </Form.Item>
-        <Form.Item
-          hasFeedback
-          name="userName"
-          label="用户姓名"
-          rules={[{  message: '不能为空' }]}
-        >
+        <Form.Item hasFeedback name="userName" label="用户姓名" rules={[{ message: '不能为空' }]}>
           <Input placeholder="请输入用户姓名" />
         </Form.Item>
         <Form.Item

src/pages/userCenter/userManage/RelateRoleModal.jsx

@@ -137,6 +137,8 @@ const RelateRoleModal = props => {
         title={title}
         visible={visible}
         onOk={submitRoles}
+        maskClosable={false}
+        destroyOnClose
         onCancel={onCancel}
         okText="确认"
         cancelText="取消"
@@ -184,6 +186,7 @@ const RelateRoleModal = props => {
       visible={visible}
       onOk={multiRelateRoles ? submitRoles : submitRole}
       onCancel={onCancel}
+      maskClosable={false}
       okText="确认"
       cancelText="取消"
       width="500px"

src/pages/userCenter/userManage/UserManage.jsx

@@ -1557,6 +1557,7 @@ const UserManage = () => {
           title="更改机构"
           visible={changeOrgVisible}
           onOk={multiChangeOrgs ? submitChangeOrgs : submitChangeOrg}
+          maskClosable={false}
           onCancel={() => {
             setChangeOrgVisible(false);
             setMultiChangeOrgs(false);
@@ -1623,6 +1624,7 @@ const UserManage = () => {
           title="确认删除用户"
           visible={deleteUserVisible}
           onOk={multiDelete ? submitDeleteUsers : submitDeleteUser}
+          maskClosable={false}
           onCancel={() => {
             setDeleteUserVisible(false);
             setMultiDelete(false);

src/pages/userCenter/userManage/UserManage.less

@@ -211,7 +211,7 @@
       }
     }
     .titleText {
-      width: 12rem;
+      width: 20rem;
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;