树搜索优化

src/components/TreeRender/index.jsx

@@ -4,11 +4,28 @@ import { MinusSquareOutlined, FormOutlined, PlusSquareOutlined, ArrowDownOutline
 import getPrem from '@/utils/getPrem';
 import { useRequest } from 'ahooks';
 import { doFetch } from '@/utils/doFetch';
+import { useEffect } from 'react';
+import Login from '@/pages/user/Login';
 
 const ReachableContext = createContext(null);
 let { Search } = Input,
     { TreeNode } = Tree;
-
+const getParentKey = (key, tree) => {
+    let parentKey;
+    for (let i = 0; i < tree.length; i++) {
+        const node = tree[i];
+        if (node.children) {
+            if (node.children.some((item) => {
+                return item.key === key
+            })) {
+                parentKey = node.key;
+            } else if (getParentKey(key, node.children)) {
+                parentKey = getParentKey(key, node.children);
+            }
+        }
+    }
+    return parentKey;
+};
 
 
 
@@ -21,10 +38,9 @@ function TreeRender({ url, deleteurl, saveurl, onselected, params, noaction, max
     const [expandall, setexpandall] = useState(false);
     const [expandedKeys, onExpand] = useState();
     const { data, loading, refresh } = useRequest(() => {
-        return doFetch({ url, params: params ?? { title: search } })
-    }, {
-        refreshDeps: [search]
+        return doFetch({ url, params: params ?? {} })
     });
+    const [autoExpandParent, setAutoExpandParent] = useState(true);
 
     const allkeys = useMemo(() => {
         let res = [];
@@ -37,7 +53,6 @@ function TreeRender({ url, deleteurl, saveurl, onselected, params, noaction, max
         fn(data?.data?.dataList ?? []);
         return res.filter(it => it.children).map(it => it.key)
     }, [data])
-
     const alldata = useMemo(() => {
         let res = [];
         const fn = (source) => {
@@ -49,22 +64,27 @@ function TreeRender({ url, deleteurl, saveurl, onselected, params, noaction, max
         fn(data?.data?.dataList ?? []);
         return res
     }, [data])
-
-
-
-    const ref1 = useRef(), ref2 = useRef();
     const treeData = useMemo(() => {
         let res = data?.data?.dataList ?? [];
         return [
             {
                 title: "全部",
-                key: "",
+                key: "00000000",
                 children: res
             }
         ]
     }, [data]);
-
-
+    const onChange = (e) => {
+        const { value } = e.target;
+        const newExpandedKeys = alldata.map((item) => {
+            if (item.title.indexOf(value) > -1) {
+                return getParentKey(item.key, treeData);
+            }
+            return null;
+        }).filter((item, i, self) => item && self.indexOf(item) === i);
+        onExpand(newExpandedKeys);
+        setsearch(value);
+    };
     const loop = data => data.map(item => {
         const index = item.title.indexOf(search);
         const beforeStr = item.title.substr(0, index);
@@ -157,10 +177,10 @@ function TreeRender({ url, deleteurl, saveurl, onselected, params, noaction, max
                         </Popconfirm>
                     }
                     {/* {
-                        item.key === "" && <Divider type='vertical' style={{ margin: "0 6px" }}></Divider>
+                        item.key === "00000000" && <Divider type='vertical' style={{ margin: "0 6px" }}></Divider>
                     } */}
                     {/* {
-                        item.key === "" && <Tooltip title={expandall ? "收起" : "展开"} onClick={(e) => {
+                        item.key === "00000000" && <Tooltip title={expandall ? "收起" : "展开"} onClick={(e) => {
                             e.stopPropagation();
                             setexpandall(!expandall)
                             onExpand(expandall ? [] : allkeys)
@@ -172,8 +192,7 @@ function TreeRender({ url, deleteurl, saveurl, onselected, params, noaction, max
 
             </div>
         )
-
-        if (item.key === "") {
+        if (item.key === "00000000") {
             title = (
                 <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", flex: 1 }}>
                     {title}
@@ -181,6 +200,7 @@ function TreeRender({ url, deleteurl, saveurl, onselected, params, noaction, max
                         e.stopPropagation();
                         setexpandall(!expandall)
                         onExpand(expandall ? [] : allkeys)
+                        setAutoExpandParent(!expandall)
                     }}>
                         {expandall ? <ArrowDownOutlined /> : <ArrowRightOutlined />}
                     </Tooltip>
@@ -197,14 +217,30 @@ function TreeRender({ url, deleteurl, saveurl, onselected, params, noaction, max
         //     );
         // }
         // return <TreeNode key={item.key} title={title} />;
-        return (
-            <TreeNode key={item.key} title={noaction ? title : actiontitle}>
-                {item.children && loop(item.children)}
-            </TreeNode>
-        );
-    });
-
+        // return (
+        //     <TreeNode key={item.key} title={noaction ? title : actiontitle}>
+        //         {item.children && loop(item.children)}
+        //     </TreeNode>
+        // );
 
+        if (item.children) {
+            return {
+                title: noaction ? title : actiontitle,
+                key: item.key,
+                children: loop(item.children),
+                level: item.level
+            };
+        }
+        return {
+            title: noaction ? title : actiontitle,
+            key: item.key,
+            level: item.level
+        };
+    });
+    useEffect(() => {
+        setexpandall(true);
+        onExpand(allkeys)
+    }, [allkeys])
     return (
         <div>
             <Modal
@@ -284,22 +320,27 @@ function TreeRender({ url, deleteurl, saveurl, onselected, params, noaction, max
                         </div>
                 }
             </Modal>
-            <Search value={search} style={{ margin: '16px 0 8px 0' }} placeholder="搜索" onChange={(e) => {
-                setsearch(e.target.value)
-            }} />
+            <Search value={search} style={{ margin: '16px 0 8px 0' }} placeholder="搜索" onChange={onChange} />
 
             <Tree
                 onSelect={(selectedKeys, e) => {
                     onselected?.(selectedKeys, e, alldata)
                 }}
-                autoExpandParent={true}
+                autoExpandParent={autoExpandParent}
                 defaultExpandAll={true}
                 expandedKeys={expandedKeys}
-                onExpand={(expandedKeys) => {
-                    onExpand(expandedKeys)
+                onExpand={(expandedKeys, {expanded: bool, node}) => {
+                    onExpand(expandedKeys);
+                    setAutoExpandParent(false);
+                    if(!bool && node.key=="00000000"){
+                        setexpandall(false)
+                    }else{
+                        setexpandall(true)
+                    }
                 }}
+                treeData={loop(treeData ?? [])}
             >
-                {loop(treeData ? treeData : [])}
+                {/* {loop(treeData ? treeData : [])} */}
             </Tree>
         </div>
 

src/pages/findstore/Storesearch/index.jsx

@@ -63,7 +63,7 @@ const Storesearch = (props) => {
                         Modal.info({
                             title: "库存信息",
                             width: 1200,
-                            okText:"知道了",
+                            okText: "知道了",
                             content: (
                                 <div>
                                     <AutoTable
@@ -179,7 +179,8 @@ const Storesearch = (props) => {
                                     setselect(selectedKeys[0] ? {
                                         title: e.node.title,
                                         selectedKeys: selectedKeys[0],
-                                        level: alldata.filter(it => it.key == selectedKeys[0])[0]?.level
+                                        level: alldata.filter(it => it.key == selectedKeys[0])[0]?.level,
+                                        key: e.node.key
                                     } : {
 
                                         })
@@ -212,7 +213,9 @@ const Storesearch = (props) => {
                         }}
                     >
                         <Breadcrumb.Item>物料库存</Breadcrumb.Item>
-                        <Breadcrumb.Item style={{ maxWidth: 600 }}>{select.title}</Breadcrumb.Item>
+                        {
+                            select.key != "00000000" && <Breadcrumb.Item style={{ maxWidth: 600 }}>{select.title}</Breadcrumb.Item>
+                        }
                     </Breadcrumb>
                     <div
                         className={styles.sitelayoutbackground}