Skip to content

C
CivManage
Commit 7e522935 authored by 皮倩雯's avatar 皮倩雯
Browse files
Options

fix: '机构管理搜索分页bug修复，修复hover图标多次调用接口问题'

parent 11992942
Pipeline #82897 waiting for manual action with stages
          Hide whitespace changes
          Inline Side-by-side
          Showing with 57 additions and 346 deletions
          src/pages/userCenter/userManage/UserManage.jsx
          View file @ 7e522935
          ......@@ -74,7 +74,6 @@ import {
          import { AddUserAuthSetting, GetUserAuthSet } from '@/services/database/api';
          import TreeComponents from '@/components/ExpendableTree';
          import classnames from 'classnames';
          import DraggleLayout from 'components/DraggleLayout';
          import AddUserModal from './AddUserModal';
          import AddSubOrgModal from './AddSubOrgModal';
          import EditOrgModal from './EditOrgModal';
          ......@@ -82,10 +81,7 @@ import DeleteOrgModal from './DeleteOrgModal';
          import RelateRoleModal from './RelateRoleModal';
          import EditUserModal from './EditUserModal';
          import ChangePasswordModal from './ChangePasswordModal';
          import MapScopeEditModal from '@/components/MapScope';
          import AuthModal from './AuthModal';
          import styles from './UserManage.less';
          import { createGuid } from '@/utils/transformUtil';
          const TdCell = props => {
          // onMouseEnter, onMouseLeave在数据量多的时候，会严重阻塞表格单元格渲染，严重影响性能
          const { onMouseEnter, onMouseLeave, ...restProps } = props;
          ......@@ -93,13 +89,8 @@ const TdCell = props => {
          };
          const UserManage = () => {
          const { TreeNode } = Tree;
          const [form] = Form.useForm();
          const { Item } = Form;
          const [selectValue, setSelctValue] = useState(); // 用户鉴权
          const [width, setWidth] = useState(50);
          const [treeLoading, setTreeLoading] = useState(false);
          const [tableLoading, setTableLoading] = useState(false);
          const [loading, setLoading] = useState(true);
          ......@@ -135,7 +126,6 @@ const UserManage = () => {
          const [authUserVisible, setAuthUserVisible] = useState(false); // 鉴权用户
          const [orgTitle, setOrgTitle] = useState('当前机构'); // 弹框标题
          const [groupId, setGroupId] = useState();
          const [orgTitle1, setOrgTitle1] = useState('当前机构'); // 弹框标题
          const [description, setDescription] = useState(''); // 机构描述信息
          const [selectedRowKeys, setSelectedRowKeys] = useState([]); // 已选用户数,机构改变时重置
          ......@@ -170,7 +160,6 @@ const UserManage = () => {
          const [expendKey, setExpendKey] = useState(''); // 保存默认展开项
          const [expendKeyOrg, setExpendKeyOrg] = useState(''); // 保存默认展开项
          const [menuID, setMenuID] = useState(''); // 选中的树IDs
          const [keepId, setKeepId] = useState('');
          const [flag, setFlag] = useState(1); // 刷新标志
          const userContainer = useRef();
          const flagRef = useRef(1);
          ......@@ -196,22 +185,18 @@ const UserManage = () => {
          title: '登录名',
          dataIndex: 'loginName',
          key: 'loginName',
          // width: 100,
          // fixed: 'left',
          render: item => searchStyle(item),
          },
          {
          title: '用户姓名',
          dataIndex: 'userName',
          key: 'userName',
          // width: 100,
          render: item => searchStyle(item),
          },
          {
          title: '所在机构',
          dataIndex: 'groupLevel',
          key: 'groupLevel',
          // width: 150,
          ellipsis: true,
          render: (text, record) => {
          let arr = text?.split('/');
          ......@@ -244,38 +229,6 @@ const UserManage = () => {
          return <span>未绑定</span>;
          },
          },
          // {
          // title: '钉钉账户',
          // dataIndex: 'ddid',
          // key: 'ddid',
          // // width: 150,
          // render: record => {
          // if (record) {
          // return (
          // <Tooltip title={record}>
          // <span style={{ color: '#50aefc', cursor: 'pointer' }}>已绑定</span>
          // </Tooltip>
          // );
          // }
          // return <span>未绑定</span>;
          // },
          // },
          // {
          // title: '微信账户',
          // dataIndex: 'wxid',
          // key: 'wxid',
          // // width: 140,
          // render: record => {
          // if (record) {
          // return (
          // <Tooltip title={record}>
          // <span style={{ color: '#50aefc', cursor: 'pointer' }}>已绑定</span>
          // </Tooltip>
          // );
          // }
          // return <span>未绑定</span>;
          // },
          // },
          {
          title: '站点权限',
          dataIndex: 'stationCount',
          ......@@ -285,7 +238,6 @@ const UserManage = () => {
          {
          title: '权限设置',
          key: 'action',
          // fixed: 'right',
          width: 150,
          align: 'center',
          render: record => (
          ......@@ -315,8 +267,7 @@ const UserManage = () => {
          okText="确认"
          cancelText="取消"
          onConfirm={() => {
          console.log(groupId, 'groupId');
          SetGroupManager({ groupId, userId: record.userId }).then(res => {
          SetGroupManager({ groupId: record.groupId, userId: record.userId }).then(res => {
          if (res.code === 0) {
          // eslint-disable-next-line no-unused-expressions
          currentSelectOrg === '-1' ? submitSearchUser() : onSelect([currentSelectOrg]);
          ......@@ -378,55 +329,10 @@ const UserManage = () => {
          {
          title: '操作',
          key: 'action',
          // fixed: 'right',
          width: 100,
          align: 'center',
          render: record => (
          <Space size="middle">
          {/* <Tooltip title="关联权限">
          <IdcardOutlined
          onClick={() => relateRole(record)}
          style={{ fontSize: '16px', color: '#1890FF' }}
          />
          </Tooltip>
          <Tooltip title="更改机构">
          <ApartmentOutlined
          onClick={() => changeOrg(record)}
          style={{ fontSize: '16px', color: '#1890FF' }}
          />
          </Tooltip>
          <Tooltip title="设置为主管">
          <Popconfirm
          placement="bottomRight"
          title={
          <p>
          确定将用户
          <span className={styles.redText}>{voca.stripTags(record.loginName)}</span>
          设置为{orgTitle}主管吗？
          </p>
          }
          okText="确认"
          cancelText="取消"
          onConfirm={() => {
          console.log(groupId, 'groupId');
          SetGroupManager({ groupId, userId: record.userId }).then(res => {
          if (res.code === 0) {
          // eslint-disable-next-line no-unused-expressions
          currentSelectOrg === '-1' ? submitSearchUser() : onSelect([currentSelectOrg]);
          } else {
          notification.error({
          message: '设置失败',
          description: res.msg,
          });
          }
          });
          }}
          >
          <UserOutlined
          style={{ fontSize: '16px', color: record.isManager ? '#FAAD14' : '#1890FF' }}
          />
          </Popconfirm>
          </Tooltip> */}
          <Tooltip title="修改密码">
          <UnlockOutlined
          onClick={() => changePassword(record)}
          ......@@ -483,35 +389,6 @@ const UserManage = () => {
          </Tooltip>
          </>
          )}
          {/* <Tooltip title="用户鉴权">
          <Popconfirm
          placement="bottomRight"
          title={
          <div style={{ width: '130px' }}>
          <Form form={form}>
          <Item>
          <Radio.Group value={selectValue} onChange={onTypeChange}>
          <Space direction="vertical">
          <Radio value={0}>访客</Radio>
          <Radio value={1}>普通用户</Radio>
          <Radio value={2}>管理员</Radio>
          <Radio value={3}>超级管理员</Radio>
          </Space>
          </Radio.Group>
          </Item>
          </Form>
          </div>
          }
          okText="确认"
          cancelText="取消"
          onConfirm={() => authUser(record)}
          >
          <LockOutlined
          onClick={() => jianquan(record)}
          style={{ fontSize: '16px', color: '#1890ff' }}
          />
          </Popconfirm>
          </Tooltip> */}
          {record.loginName == 'panda' || record.loginName == 'admin' ? (
          <DeleteOutlined style={{ fontSize: '16px', color: '#e86060' }} disabled />
          ) : (
          ......@@ -538,8 +415,9 @@ const UserManage = () => {
          ];
          useEffect(() => {
          setExpendKey(menuID);
          console.log(expendKey);
          if (!searchWord) {
          setExpendKey(menuID);
          }
          }, [menuID]);
          // 获取用户机构树
          useEffect(() => {
          ......@@ -616,13 +494,11 @@ const UserManage = () => {
          if (newres.code === 0) {
          let res = newres.data.list;
          setTreeDataCopy(res);
          console.log(res);
          let aa = [];
          res.map(i => {
          if (i.children.length > 0) {
          aa.push(i.id);
          }
          console.log(i.id);
          aa = i.id;
          });
          setExpendKeyOrg(aa.toString());
          ......@@ -643,8 +519,6 @@ const UserManage = () => {
          const rowSelection = {
          selectedRowKeys,
          onChange: (RowKeys, Rows) => {
          console.log(RowKeys);
          console.log(Rows);
          setSelectedRowKeys(RowKeys);
          getCheckList(RowKeys);
          setUserIDs(RowKeys.toString()); // 数组转字符串，逗号连接
          ......@@ -724,7 +598,6 @@ const UserManage = () => {
          onMouseEnter={e => {
          setOrgID(org);
          setOrgTitle1(org.text);
          getDescription(org.id);
          // getMapSetByGroupID(org.id);
          setCurrentSelectOrg1(org.id);
          setId(org.text);
          ......@@ -753,39 +626,13 @@ const UserManage = () => {
          // 重新渲染树
          const updateTrees = e => {
          setTreeLoading(true);
          // getUserTree(-1, -1)
          // .then(res => {
          // if (res.length > 0) {
          // setTreeLoading(false);
          // setTreeData(res);
          // setTreeDataCopy(res);
          // // 第一次加载，默认选择第一个组织
          // if (treeState) {
          // onSelect([res[0].id], false);
          // setTreeState(false);
          // }
          // } else {
          // setTreeLoading(false);
          // notification.error({
          // message: '获取失败',
          // description: res.message,
          // });
          // }
          // })
          // .catch(err => {
          // setTreeLoading(false);
          // message.error(err);
          // });
          GetOUTreeNew({ groupId: -1, keyword: e })
          .then(newres => {
          setTreeLoading(false);
          if (newres.code === 0) {
          let res = newres.data.list;
          setTreeDataTotal(newres.data.count);
          console.log(res);
          setTreeData(res);
          // setTreeDataCopy(res);
          let aa = [];
          res.forEach(i => {
          aa.push(i.id);
          ......@@ -813,7 +660,6 @@ const UserManage = () => {
          };
          const updateTrees1 = e => {
          console.log(e);
          setTreeLoading(true);
          GetOUTreeNew({ groupId: -1 })
          .then(newres => {
          ......@@ -829,7 +675,6 @@ const UserManage = () => {
          aa.push(i.id);
          });
          setKeepTree(aa);
          console.log(e);
          setMenuID(e.toString());
          setExpendKey(e);
          } else {
          ......@@ -868,7 +713,6 @@ const UserManage = () => {
          groupID: props[0],
          }).then(res => {
          if (res.code === 0) {
          console.log(res);
          if (res.code.MapRange != null) {
          setCurrentOrgArea(res.data.MapRange);
          setCurrentOrgDistinct(res.data.AreeName);
          ......@@ -878,11 +722,8 @@ const UserManage = () => {
          setOrgID(props[0] || currentSelectOrg);
          // 树节点变化（即props不为空）时才请求，避免重复请求
          if (props[0]) {
          console.log(props[0]);
          setMenuID(props[0]);
          // eslint-disable-next-line no-console
          setGroupId(props[0]);
          let sizedata = '';
          let currentData = '';
          if (currentSelectOrg !== props[0]) {
          ......@@ -942,81 +783,6 @@ const UserManage = () => {
          }
          };
          // // 添加用户刷新表数据
          // const onSelect1 = () => {
          // console.log(orgID);
          // setTableLoading(true);
          // // eslint-disable-next-line no-console
          // getOneOUUserListNew(orgID.id || currentSelectOrg, pageSize, currentPage)
          // .then(res => {
          // setCurrentOrgOperate(false); // 重置禁用当前机构操作为false
          // setMultiOperate(true); // 重新禁止用户批量操作
          // setSelectedRowKeys([]); // 重置选中用户数
          // if (res.code === 0) {
          // setTableLoading(false);
          // setSearchWord(''); // 搜索框置空
          // setOrgTitle(res.data.GroupName);
          // // setDescription(res.data.Description);
          // // 返回用户表数据结构处理，扁平化
          // let temp = res.data.data;
          // // const temp = flatten(getUsers(res.data));
          // // 设置过滤字段
          // let arr = temp.map(item => item.groupName);
          // arr = arr.filter((value, index) => arr.indexOf(value) === index);
          // setOrgFilters(arr.map(item => ({ text: item, value: item })));
          // setTableLength(temp.length);
          // const table = temp.map((item, index) => {
          // item.key = index;
          // return item;
          // });
          // setShowSearchStyle(false);
          // setTableData(table);
          // } else {
          // setTableLoading(false);
          // }
          // })
          // .catch(err => {
          // setTableLoading(false);
          // message.error(err);
          // });
          // };
          const getDescription = e => {
          getOneOUUserListNew(e, pageSize, currentPage).then(res => {
          if (res.code === 0) {
          setDescription(res.data.Description);
          }
          });
          };
          const getMapSetByGroupID = e => {
          GetMapSetByGroupID({
          groupID: e,
          }).then(res => {
          if (res.code === 0) {
          console.log(res);
          setCurrentOrgArea(res.data.MapRange);
          setCurrentOrgDistinct(res.data.AreeName);
          }
          });
          };
          // 返回用户表数据结构处理，扁平化
          // const getUsers = orgObj => {
          // let result = orgObj.Users;
          // result.map(item => {
          // item.OUID = orgObj.GroupId;
          // item.OUName = orgObj.GroupName;
          // return item;
          // });
          // if (orgObj.Childs.length > 0) result = [...result, ...orgObj.Childs.map(o => getUsers(o))];
          // return result;
          // };
          const flatten = arr => {
          while (arr.some(item => Array.isArray(item))) {
          arr = [].concat(...arr);
          }
          return arr;
          };
          // 添加用户
          const addUser = e => {
          setUserVisible(true);
          ......@@ -1037,25 +803,12 @@ const UserManage = () => {
          // 删除机构
          const deleteOrg = () => {
          setDeleteOrgVisible(true);
          console.log(orgID);
          console.log(keep1);
          if (orgID.id == keep1) {
          setTreeState(true);
          } else {
          setTreeState(false);
          }
          };
          // 编辑机构范围
          const EditOrgScope = () => {
          setEditOrgExtentVisible(true);
          };
          // 在currentUser变化后获取角色列表
          // useEffect(() => {
          // if (currentUser && currentUser.userId) {
          // getRoleList();
          // }
          // }, [currentUser]);
          /** ***用户批量操作****** */
          // 关联角色
          ......@@ -1082,7 +835,6 @@ const UserManage = () => {
          const relateRole = record => {
          // getEmptyRoleList(record.userId);
          setMult('No');
          console.log(record);
          getRoleList(record);
          setRoleVisible(true);
          setCurrentUser(record);
          ......@@ -1110,12 +862,10 @@ const UserManage = () => {
          };
          // 冻结用户
          const freezeUser = record => {
          console.log(currentUser);
          // setFreezeUserVisible(true);
          setCurrentUser(record);
          setSelectColor(record);
          let state = '';
          console.log(record);
          if (record.state === '0' || record.state === null) {
          state = '1';
          } else {
          ......@@ -1145,7 +895,6 @@ const UserManage = () => {
          };
          // 删除用户
          const deleteUser = record => {
          console.log(record.userName);
          setCurrentUser(record.userName);
          setSelectColor(record);
          DeleteUserNew({
          ......@@ -1172,80 +921,60 @@ const UserManage = () => {
          });
          };
          // 用户鉴权
          // useEffect(() => {
          // currentUser.userId
          // GetUserAuthSet({
          // UserId: currentUser.userId
          // }).then(
          // res => {
          // if(res.code == 0){
          // setSelctValue(res.data)
          // console.log(selectValue);
          // console.log(res.data);
          // }
          // }
          // )
          // }, [currentUser])
          const jianquan = record => {
          GetUserAuthSet({
          UserId: record.userId,
          }).then(res => {
          if (res.code === 0) {
          setSelctValue(res.data);
          console.log(res.data);
          }
          });
          };
          const onTypeChange = value => {
          setSelctValue(value.target.value);
          };
          const authUser = record => {
          setCurrentUser(record);
          console.log(selectValue);
          AddUserAuthSetting({
          userId: record.userId,
          userLevel: selectValue,
          }).then(res => {
          if (res.code === 0) {
          message.info('提交成功');
          }
          });
          };
          // 查找用户
          const submitSearchUser = () => {
          setCurrentPage(1);
          if (!searchWord || searchWord.trim(' ').length == 0) {
          message.warning('请输入搜索内容');
          return;
          const submitSearchUser = (size, current) => {
          setMenuID('');
          if (!current) {
          setCurrentPage(1);
          }
          setTableLoading(true);
          let data = searchWord != '' ? { key: searchWord } : '';
          GetUserByKeyNew(data)
          let data = current ? current : 1;
          let newSize = size ? size : 20;
          if (!searchWord) {
          setMenuID(treeDataCopy[0].id);
          }
          getOneOUUserListNew(0, newSize, data, searchWord)
          .then(res => {
          setSearchFlag(1);
          setTableLoading(false);
          if (res.code === 0) {
          setTotalSearch(res.data.length);
          setTotal(res.data.count);
          setSelectedRowKeys([]); // 重置选中用户数
          setCurrentOrgOperate(true); // 禁止当前机构操作
          setMultiOperate(true); // 禁用批量操作
          setOrgTitle('全部机构搜索结果'); // 设置表头
          setCurrentSelectOrg('-1'); // 清空选中机构
          console.log(res.data);
          setShowSearchStyle(true);
          setTableData(res.data);
          setTableLength(res.data.length);
          // 返回用户表数据结构处理，扁平化
          let temp = res.data.data;
          // 设置过滤字段
          let arr = temp.map(item => item.groupName);
          arr = arr.filter((value, index) => arr.indexOf(value) === index);
          setOrgFilters(arr.map(item => ({ text: item, value: item })));
          setTableLength(temp.length);
          let datalist = [];
          const table = temp.map((item, index) => {
          if (item.loginName == 'panda' || item.loginName == 'admin') {
          datalist.push(item.userId);
          }
          item.key = index;
          return item;
          });
          setKeepDataList(datalist);
          setTableData(table);
          } else {
          setTableLoading(false);
          notification.error({
          message: '提示',
          duration: 3,
          message: '获取失败',
          description: res.msg,
          });
          }
          })
          .catch(err => {
          setTableLoading(false);
          message.error(err);
          });
          };
          ......@@ -1256,16 +985,12 @@ const UserManage = () => {
          setLoading(true);
          GetUserRelationListNew({ userId: e.userId })
          .then(res => {
          console.log(111);
          if (res.code === 0) {
          const { roleList, stationList } = res.data;
          console.log(roleList);
          setRolelist(roleList);
          setStationlist(stationList);
          setLoading(false);
          } else {
          console.log(res);
          setLoading(false);
          }
          })
          ......@@ -1280,14 +1005,12 @@ const UserManage = () => {
          setLoading(true);
          GetUserRelationListNew({ userId: 0 })
          .then(res => {
          console.log(222);
          if (res.code === 0) {
          const { roleList, stationList } = res.data;
          setRolelist(roleList);
          setStationlist(stationList);
          setLoading(false);
          } else {
          console.log(res.msg);
          setLoading(false);
          }
          })
          ......@@ -1299,7 +1022,6 @@ const UserManage = () => {
          };
          const getCheckList = e => {
          console.log(e);
          let aa = [];
          let bb = [];
          loadAllUserRole(e).then(res => {
          ......@@ -1316,8 +1038,6 @@ const UserManage = () => {
          bb.push(item1);
          });
          }
          console.log(aa);
          console.log(bb);
          setMultiRoleList(aa);
          setMultiStationList(bb);
          }
          ......@@ -1346,7 +1066,6 @@ const UserManage = () => {
          // .catch(err => {
          // message.error(err);
          // });
          console.log(currentUser);
          JumpToAnotherOUNew({
          userId: currentUser.userId,
          oldOUID: currentUser.groupId,
          ......@@ -1488,12 +1207,10 @@ const UserManage = () => {
          keepDataList.length > 0 &&
          keepDataList.map(i => {
          let aa = userIDs.split(',').indexOf(i);
          console.log(aa);
          if (aa !== -1) {
          data.push(aa);
          }
          });
          console.log(data);
          if (data.length > 0) {
          notification.error({
          message: '操作失败',
          ......@@ -1557,10 +1274,6 @@ const UserManage = () => {
          // 更改机构范围
          const submitExtent = (extent, areaName, flags) => {
          setTreeLoading(true);
          console.log(extent);
          console.log(areaName);
          console.log(flags);
          console.log(currentSelectOrg1);
          if (flags === 0) {
          setTreeLoading(false);
          notification.warn({
          ......@@ -1599,15 +1312,12 @@ const UserManage = () => {
          };
          // 树的拖拽
          const handleDrop = infos => {
          console.log(infos);
          const dropKey = infos.node.key;
          const dragKey = infos.dragNode.key;
          const dropPos = infos.node.pos.split('-');
          const dropPosition = infos.dropPosition - Number(dropPos[dropPos.length - 1]);
          const datas = JSON.parse(JSON.stringify(treeData));
          console.log(dropKey, 'dropKey');
          console.log(dragKey, 'dragKey');
          // 找到拖拽的元素
          let dragObj;
          let dropObj;
          ......@@ -1624,7 +1334,6 @@ const UserManage = () => {
          });
          // 将节点插入到正确的位置
          if (!infos.dropToGap) {
          console.log('33333333333');
          dropObj.children = dropObj.children || [];
          // 在哪里插入,示例添加到头部，可以是随意位置
          dropObj.children.unshift(dragObj);
          ......@@ -1723,7 +1432,11 @@ const UserManage = () => {
          const paginationChange = (page, pageSizes) => {
          setCurrentPage(page);
          setPageSize(pageSizes);
          onSelect([currentSelectOrg], '', pageSizes, page);
          if (searchWord) {
          submitSearchUser(pageSizes, page);
          } else {
          onSelect([currentSelectOrg], '', pageSizes, page);
          }
          };
          return (
          ......@@ -1845,7 +1558,7 @@ const UserManage = () => {
          <Search
          style={{ width: 260, marginRight: '15px' }}
          placeholder="搜索登录名/用户姓名/手机号"
          onSearch={submitSearchUser}
          onSearch={e => submitSearchUser()}
          onChange={e => handleSearch(e)}
          enterButton
          value={searchWord}
          ......@@ -1898,21 +1611,19 @@ const UserManage = () => {
          marginRight: '5px',
          }}
          >
          {searchFlag === 0 && (
          <Pagination
          total={total}
          showTotal={(totals, range) => `第${range[0]}-${range[1]} 条/共 ${totals} 条`}
          defaultPageSize={pageSize}
          defaultCurrent={1}
          showSizeChanger
          pageSizeOptions={[10, 20, 50, 100]}
          current={currentPage}
          onChange={paginationChange}
          style={{ marginBottom: '10px' }}
          size="small"
          showQuickJumper
          />
          )}
          <Pagination
          total={total}
          showTotal={(totals, range) => `第${range[0]}-${range[1]} 条/共 ${totals} 条`}
          defaultPageSize={pageSize}
          defaultCurrent={1}
          showSizeChanger
          pageSizeOptions={[10, 20, 50, 100]}
          current={currentPage}
          onChange={paginationChange}
          style={{ marginBottom: '10px' }}
          size="small"
          showQuickJumper
          />
          </div>
          </div>
          ......
          Markdown is supported
          0% or
          You are about to add 0 people to the discussion. Proceed with caution.
          Finish editing this message first!
          Please register or to comment