Skip to content

C
CivManage
Commit 54a41d0d authored by 皮倩雯's avatar 皮倩雯
Browse files
Options

fix: '角色管理角色树手写搜索功能'

parent 3c1bf7cc
Pipeline #65835 passed with stages
          Show whitespace changes
          Inline Side-by-side
          Showing with 104 additions and 44 deletions
          src/pages/bsmanager/base/tablemanager/filedConfig/filedConfig.jsx
          View file @ 54a41d0d
          ......@@ -113,7 +113,7 @@ const AddModal = props => {
          title: '字段名',
          dataIndex: 'name',
          key: 'name',
          align: 'center',
          align: 'left',
          width: 300,
          onCell: () => ({
          style: {
          ......
          src/pages/userCenter/roleManage/RoleManage.jsx
          View file @ 54a41d0d
          ......@@ -12,8 +12,9 @@ import {
          Empty,
          message,
          Tabs,
          Tree,
          } from 'antd';
          import Tree from '@/components/ExpendableTree';
          import TreeComponents from '@/components/ExpendableTree';
          import PageContainer from '@/components/BasePageContainer';
          import {
          DoubleLeftOutlined,
          ......@@ -87,6 +88,8 @@ const SiteManage = () => {
          const [descrip, setDescrip] = useState('当前未选中角色');
          const [keepTree, setKeepTree] = useState([]);
          const [keyValue, setKeyValue] = useState('0');
          const [keepTreeData, setKeepTreeData] = useState([]);
          const [searchTreeValue, setSearchTreeValue] = useState('');
          // const [childData, setChildData] = useState({visibleValue:''})
          // 点击树的回调
          ......@@ -128,22 +131,6 @@ const SiteManage = () => {
          setCurrentSelectId(saveCurId);
          }
          };
          // useEffect(() => {
          // setSpinLoading(true);
          // getRoleGroupList({ userID: '1' }).then(res => {
          // setSpinLoading(false);
          // if (res.code === 0) {
          // const { roleList } = res.data;
          // let arr = transTree(roleList);
          // console.log(roleList);
          // console.log(arr);
          // setTreeData(arr);
          // }
          // });
          // return () => {
          // setItemObj('');
          // };
          // }, [flag]);
          useEffect(() => {
          getRoleGroup();
          }, []);
          ......@@ -163,7 +150,8 @@ const SiteManage = () => {
          }
          });
          console.log(list);
          let arr = transTree(list);
          setKeepTreeData([...list]);
          let arr = transTree(JSON.parse(JSON.stringify(list)), '');
          setTreeData(arr);
          let aa = [];
          arr.forEach(i => {
          ......@@ -235,7 +223,7 @@ const SiteManage = () => {
          setGroupVisible(true);
          };
          // 树形数据转换;
          const transTree = val => {
          const transTree = (val, search) => {
          let arr = val;
          console.log(arr);
          let newArr = [];
          ......@@ -284,9 +272,20 @@ const SiteManage = () => {
          itemRole.icon = <BarsOutlined />;
          itemRole.roleList.map(i => {
          i.title = i.roleName;
          const indexsearch = i.title.indexOf(search);
          const beforeStr = i.title.substring(0, indexsearch);
          const afterStr = i.title.slice(indexsearch + search.length);
          i.title = (
          <div className={styles.title}>
          {i.title.includes(search) && search != '' ? (
          <div className={styles.titleTop}>
          {beforeStr}
          <span className={styles.titleSearch}>{search}</span>
          {afterStr}
          </div>
          ) : (
          <div className={styles.titleTop}>{i.title}</div>
          )}
          <div className={styles.tip}>
          {i.roleID && (
          <>
          ......@@ -345,7 +344,6 @@ const SiteManage = () => {
          });
          itemRole.children = itemRole.roleList;
          } else {
          console.log(itemRole.BuiltInRole);
          itemRole.title = itemRole.roleName;
          itemRole.key = itemRole.roleID;
          itemRole.subSystemValue = item.visibleValue;
          ......@@ -359,9 +357,20 @@ const SiteManage = () => {
          // setCurrentSelectId(roleID);
          }
          }
          const indexsearch = itemRole.title.indexOf(search);
          const beforeStr = itemRole.title.substring(0, indexsearch);
          const afterStr = itemRole.title.slice(indexsearch + search.length);
          itemRole.title = (
          <div className={styles.title}>
          {itemRole.title.includes(search) && search != '' ? (
          <div className={styles.titleTop}>
          {beforeStr}
          <span className={styles.titleSearch}>{search}</span>
          {afterStr}
          </div>
          ) : (
          <div className={styles.titleTop}>{itemRole.title}</div>
          )}
          <div className={styles.tip}>
          {itemRole.roleID && (
          <>
          ......@@ -485,7 +494,6 @@ const SiteManage = () => {
          };
          // 新增角色
          const addsUser = (e, record) => {
          console.log(e, record, 'sdfalkfjasdgj');
          e.stopPropagation();
          setItemObj(record);
          setModalVisible(true);
          ......@@ -514,25 +522,16 @@ const SiteManage = () => {
          };
          // 编辑弹窗回调
          const editModal = prop => {
          console.log(keyValue);
          // setEditVisible(false);
          // setFlag(flag + 1);
          getRoleGroup();
          console.log(currentSelectId);
          console.log(itemObj);
          console.log(roleID);
          console.log(prop);
          let aa = itemObj;
          aa.BuiltInRole = prop;
          setItemObj(aa);
          if (itemObj.roleID === currentSelectId[0]) {
          if (prop == true) {
          if (keyValue == 0) {
          console.log(12);
          setRoleID(currentSelectId);
          setFlagSearch(1);
          } else {
          console.log(34);
          setRoleID('');
          setDescrip('内置角色不可配置菜单权限');
          setFlagSearch(0);
          ......@@ -623,8 +622,6 @@ const SiteManage = () => {
          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;
          ......@@ -633,7 +630,6 @@ const SiteManage = () => {
          let canDrop = false;
          // 保存拖拽到的节点信息
          loop(datas, dropKey, -1, (item, index, arr) => {
          console.log(arr, index, 'arrarr');
          // 拖拽节点的下一个节点是否是菜单组
          if (arr[index + 1] && !arr[index + 1].groupflag) {
          canDrop = true;
          ......@@ -682,16 +678,13 @@ const SiteManage = () => {
          console.log('二级单组不能拖拽');
          return;
          }
          console.log('1111111111');
          // 将节点插入到正确的位置
          if (!infos.dropToGap) {
          console.log('22222222222');
          // 插入到第一个子节点
          // 子菜单不能拖拽到二级菜单组上方
          if (dropObj.roleList[0] && dropObj.roleList[0].groupflag) {
          return;
          }
          console.log(dropObj, '33333333333');
          dropObj.children = dropObj.children || [];
          // 在哪里插入,示例添加到头部，可以是随意位置
          dropObj.children.unshift(dragObj);
          ......@@ -753,15 +746,11 @@ const SiteManage = () => {
          }
          }
          });
          console.log(dragList, 'dragList');
          };
          const handleParChange = key => {
          setKeyValue(key);
          const { roleID: id } = itemObj;
          console.log(key);
          console.log(key == 1);
          console.log(itemObj.BuiltInRole);
          if (id) {
          if (itemObj.BuiltInRole === true && key == 1) {
          setRoleID('');
          ......@@ -777,6 +766,42 @@ const SiteManage = () => {
          setFlagSearch(0);
          }
          };
          const onSearch = value => {
          setSearchTreeValue(value);
          if (value !== '') {
          let data = getNewData(JSON.parse(JSON.stringify(keepTreeData)), value);
          let lastdata = JSON.parse(JSON.stringify(data));
          lastdata.map(i => {
          if (i.child.length > 0) {
          i.child = i.child.filter(ele => ele.roleList.length > 0);
          }
          });
          let last = lastdata.filter(ele => ele.roleList.length > 0 || ele.child.length > 0);
          console.log(last);
          let arr = transTree(JSON.parse(JSON.stringify(last)), value);
          console.log(arr);
          setTreeData(arr);
          } else {
          let arr = transTree(JSON.parse(JSON.stringify(keepTreeData)), '');
          setTreeData(arr);
          }
          };
          // 获取搜索tree数据
          const getNewData = (treedata, value) => {
          treedata.map(i => {
          if (i.roleList.length > 0) {
          i.roleList = i.roleList.filter(ele => ele.roleName.includes(value));
          }
          if (i.child.length > 0) {
          i.child.map(j => {
          j.roleList = j.roleList.filter(ele => ele.roleName.includes(value));
          });
          }
          });
          return treedata;
          };
          return (
          <PageContainer>
          <div
          ......@@ -795,7 +820,7 @@ const SiteManage = () => {
          [styles.hideBox]: !mulu,
          })}
          >
          <div style={{ marginLeft: '20px' }}>
          <div style={{ marginLeft: '6px' }}>
          <span
          style={{
          fontSize: '15px ',
          ......@@ -805,10 +830,40 @@ const SiteManage = () => {
          选择角色
          </span>
          </div>
          <hr style={{ width: '95%', color: '#eeecec', marginLeft: '15px' }} />
          <hr style={{ width: '95%', color: '#eeecec' }} />
          <Search
          style={{
          marginBottom: 8,
          width: '95%',
          marginLeft: '7px',
          }}
          placeholder="快速搜索角色"
          onSearch={onSearch}
          />
          {searchTreeValue !== '' ? (
          <>
          {treeData && treeData.length > 0 && (
          <div style={{ height: 'calc(100% - 40px)', overflowY: 'scroll' }}>
          <div style={{ height: 'calc(100% - 60px)', overflowY: 'scroll' }}>
          <Tree
          showIcon
          onSelect={handleTreeSelect}
          defaultExpandAll
          treeData={treeData}
          selectedKeys={currentSelectId}
          blockNode
          draggable
          onDrop={handleDrop}
          keepTree={keepTree}
          // setExpendKey={expendKey}
          />
          </div>
          )}
          </>
          ) : (
          <>
          {treeData && treeData.length > 0 && (
          <div style={{ height: 'calc(100% - 60px)', overflowY: 'scroll' }}>
          <TreeComponents
          showIcon
          onSelect={handleTreeSelect}
          autoExpandParent
          ......@@ -822,6 +877,8 @@ const SiteManage = () => {
          />
          </div>
          )}
          </>
          )}
          <AddModal
          visible={modalVisible}
          ......
          src/pages/userCenter/roleManage/RoleManage.less
          View file @ 54a41d0d
          ......@@ -183,3 +183,6 @@
          text-overflow: ellipsis;
          padding-left: 10px;
          }
          .titleSearch {
          color: #f50;
          }
          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