perf: 用户操作不跳转且选中行标记

src/pages/userCenter/userManage/ChangePasswordModal.jsx

@@ -3,7 +3,14 @@ import { Modal, Form, Input, notification, message } from 'antd';
 import { updateUserPassword } from '@/services/userCenter/userManage/api';
 
 const ChangePasswordModal = props => {
-  const { visible, currentUser, onSelect, onCancel } = props;
+  const {
+    visible,
+    currentUser,
+    currentSelectOrg,
+    submitSearchUser,
+    onSelect,
+    onCancel,
+  } = props;
   const [passwordForm] = Form.useForm(); // 修改密码
 
   useEffect(() => {
@@ -34,7 +41,10 @@ const ChangePasswordModal = props => {
         .then(res => {
           if (res.code === 0) {
             onCancel();
-            onSelect([`${currentUser.OUID}`]);
+            // eslint-disable-next-line no-unused-expressions
+            currentSelectOrg === '-1'
+              ? submitSearchUser()
+              : onSelect([currentSelectOrg]);
             notification.success({
               message: '提交成功',
               duration: 2,

src/pages/userCenter/userManage/EditUserModal.jsx

@@ -4,7 +4,14 @@ import voca from 'voca';
 import { editUser } from '@/services/userCenter/userManage/api';
 
 const EditUserModal = props => {
-  const { visible, currentUser, onCancel, onSelect } = props;
+  const {
+    visible,
+    currentUser,
+    currentSelectOrg,
+    onCancel,
+    onSelect,
+    submitSearchUser,
+  } = props;
   const [editUserForm] = Form.useForm(); // 编辑用户
   /** ***正则验证**** */
   const noChinese = new RegExp(/^[^\u4e00-\u9fa5]+$/); // 不能包含中文
@@ -68,8 +75,10 @@ const EditUserModal = props => {
           if (res.success) {
             onCancel();
             // 重新获取用户表
-            onSelect([`${currentUser.OUID}`]);
-            // setExpandedKeys([`${currentUser.OUID}`]);
+            // eslint-disable-next-line no-unused-expressions
+            currentSelectOrg === '-1'
+              ? submitSearchUser()
+              : onSelect([currentSelectOrg]);
             notification.success({
               message: '提交成功',
               duration: 2,

src/pages/userCenter/userManage/RelateRoleModal.jsx

@@ -48,8 +48,9 @@ const RelateRoleModal = props => {
         if (res.success) {
           onCancel();
           // 跳转到新组织机构下的用户表
-          onSelect([`${currentUser.OUID}`]);
-          // setExpandedKeys([`${currentUser.OUID}`]);
+          if (currentSelectOrg !== '-1') {
+            onSelect([currentSelectOrg]);
+          }
           notification.success({
             message: '提交成功',
             duration: 2,
@@ -81,8 +82,8 @@ const RelateRoleModal = props => {
       .then(res => {
         if (res.code === 0) {
           onCancel();
-          // 跳转到组织重新请求改机构下用户数据,查找用户时currentSelectOrg为空数组，不需要重新请求
-          if (currentSelectOrg.length !== 0) {
+          // 跳转到组织重新请求该机构下用户数据,查找用户时currentSelectOrg为'-1'，不需要重新请求
+          if (currentSelectOrg !== '-1') {
             onSelect([currentSelectOrg]);
           }
           notification.success({
@@ -100,9 +101,15 @@ const RelateRoleModal = props => {
         message.error(err);
       });
   };
+  const title = (
+    <span>
+      <span style={{ marginRight: '20px' }}>批量关联角色</span>
+      <span style={{ color: 'red' }}>提示：批量关联角色会覆盖原有角色</span>
+    </span>
+  );
   return (
     <Modal
-      title="关联角色"
+      title={multiRelateRoles ? title : '关联角色'}
       visible={visible}
       onOk={multiRelateRoles ? submitRoles : submitRole}
       onCancel={onCancel}

src/pages/userCenter/userManage/UserManage.js

@@ -67,9 +67,10 @@ const UserManage = () => {
   const [treeState, setTreeState] = useState(true); // 树第一次加载
   const [treeVisible, setTreeVisible] = useState(true); // 树是否可见
   const [tableData, setTableData] = useState([]); // 用户表
+  const [selectColor, setSelectColor] = useState({}); // 当前选中颜色,操作时设置
   const [orgFilters, setOrgFilters] = useState([]); // 用户列筛选
   const [searchWord, setSearchWord] = useState(''); // 关键字
-  const [currentSelectOrg, setCurrentSelectOrg] = useState([]); // 左侧机构数-选中组织
+  const [currentSelectOrg, setCurrentSelectOrg] = useState('-1'); // 左侧机构树-选中组织,字符串类型默认全部机构'-1'，注意用户表中的OUID是数字
   const [currentSelectOldOrg, setCurrentSelectOldOrg] = useState([]); // 更改机构时的树-原先选中组织
 
   /** ***Modal弹框,是否可视**** */
@@ -101,13 +102,15 @@ const UserManage = () => {
   const [rolelist, setRolelist] = useState([]); // 角色列表
   const [stationlist, setStationlist] = useState([]); // 站点列表
   const { Search } = Input;
+  const setRowClassName = record =>
+    record.userID === selectColor.userID ? styles.clickRowStyle : '';
   // 用户表列名
   const columns = [
     {
       title: '登录名',
       dataIndex: 'loginName',
       key: 'loginName',
-      fixed: 'left',
+      // fixed: 'left',
       render: item => (
         <div
           ref={r => {
@@ -274,6 +277,7 @@ const UserManage = () => {
       setOrgIDs(Rows.map(item => item.OUID).toString());
       // 选中行数大于0时设置批量操作可行
       if (RowKeys.length > 0) {
+        setSelectColor({});
         setMultiOperate(false);
         setMultiOperateButtonType('primary');
       } else {
@@ -453,32 +457,38 @@ const UserManage = () => {
   const relateRole = record => {
     setRoleVisible(true);
     setCurrentUser(record);
+    setSelectColor(record);
   };
   // 更改机构
   const changeOrg = record => {
     setChangeOrgVisible(true);
     setCurrentUser(record);
+    setSelectColor(record);
     setCurrentSelectOldOrg(record.OUID);
   };
   // 修改密码
   const changePassword = record => {
     setPasswordVisible(true);
     setCurrentUser(record);
+    setSelectColor(record);
   };
   // 编辑用户
   const editUser = record => {
     setEditUserVisible(true);
     setCurrentUser(record);
+    setSelectColor(record);
   };
   // 冻结用户
   const freezeUser = record => {
     setFreezeUserVisible(true);
     setCurrentUser(record);
+    setSelectColor(record);
   };
   // 删除用户
   const deleteUser = record => {
     setDeleteUserVisible(true);
     setCurrentUser(record);
+    setSelectColor(record);
   };
 
   // 查找用户
@@ -490,7 +500,7 @@ const UserManage = () => {
           setCurrentOrgOperate(true); // 禁止当前机构操作
           setMultiOperate(true); // 禁用批量操作
           setOrgTitle('全部机构搜索结果'); // 设置表头
-          setCurrentSelectOrg([]); // 清空机构时选中机构
+          setCurrentSelectOrg('-1'); // 清空选中机构
           setTableData(res.root);
           setTableLength(res.root.length);
         } else {
@@ -506,7 +516,6 @@ const UserManage = () => {
   };
 
   /** ***表单提交相关操作****** */
-
   // 根据当前 userID 获取用户关联角色
   const getRoleList = () => {
     setLoading(true);
@@ -615,8 +624,10 @@ const UserManage = () => {
         if (res.success) {
           setFreezeUserVisible(false);
           // 重新获取用户表
-          onSelect([`${currentUser.OUID}`]);
-          // setExpandedKeys([`${currentUser.OUID}`]);
+          // eslint-disable-next-line no-unused-expressions
+          currentSelectOrg === '-1'
+            ? submitSearchUser()
+            : onSelect([currentSelectOrg]);
           notification.success({
             message: '提交成功',
             duration: 2,
@@ -643,9 +654,10 @@ const UserManage = () => {
             message: '提交成功',
             duration: 2,
           });
-          // 重新获取用户表
-          onSelect([`${currentUser.OUID}`]);
-          // setExpandedKeys([`${currentUser.OUID}`]);
+          // eslint-disable-next-line no-unused-expressions
+          currentSelectOrg === '-1'
+            ? submitSearchUser()
+            : onSelect([currentSelectOrg]);
         } else {
           notification.error({
             message: '提交失败',
@@ -668,9 +680,9 @@ const UserManage = () => {
             message: '提交成功',
             duration: 2,
           });
-          // 重新获取用户表,查找用户时currentSelectOrg为空数组，无需跳转
+          // 重新获取用户表,查找用户时currentSelectOrg为'-1'，无需跳转
           // eslint-disable-next-line no-unused-expressions
-          currentSelectOrg.length === 0
+          currentSelectOrg === '-1'
             ? submitSearchUser()
             : onSelect([currentSelectOrg]);
         } else {
@@ -814,6 +826,7 @@ const UserManage = () => {
               type: 'checkbox',
               ...rowSelection,
             }}
+            rowClassName={setRowClassName}
             size="small"
             rowKey={record => record.userID}
             locale={zhCN}
@@ -920,6 +933,8 @@ const UserManage = () => {
         <ChangePasswordModal
           visible={passwordVisible}
           currentUser={currentUser}
+          submitSearchUser={submitSearchUser}
+          currentSelectOrg={currentSelectOrg}
           onSelect={onSelect}
           onCancel={() => setPasswordVisible(false)}
         />
@@ -927,6 +942,8 @@ const UserManage = () => {
         <EditUserModal
           visible={editUserVisible}
           currentUser={currentUser}
+          submitSearchUser={submitSearchUser}
+          currentSelectOrg={currentSelectOrg}
           onSelect={onSelect}
           onCancel={() => setEditUserVisible(false)}
         />

src/pages/userCenter/userManage/UserManage.less

@@ -186,6 +186,9 @@
                 border-right: white;
                 overflow: auto !important;
             }
+            .clickRowStyle{
+                background: #cfe7fd;
+            }
             .ant-pagination{
                 z-index: 999;
                 border-top: 1px solid #f0eded;