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

src/pages/bsmanager/base/tablemanager/filedConfig/filedConfig.jsx

@@ -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

@@ -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

@@ -183,3 +183,6 @@
   text-overflow: ellipsis;
   padding-left: 10px;
 }
+.titleSearch {
+  color: #f50;
+}