Skip to content

W
wms
Commit 69bcea8a authored by 左玲玲's avatar 左玲玲 😬
Browse files
Options

树搜索优化

parent d669e2cb
Hide whitespace changes
Inline Side-by-side
Showing with 85 additions and 41 deletions
src/components/TreeRender/index.jsx
View file @ 69bcea8a
......@@ -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
View file @ 69bcea8a
......@@ -63,7 +63,7 @@ const Storesearch = (props) => {
Modal.info({
title: "库存信息",
width: 1200,
okText:"知道了",
okText: "知道了",
content: (
<div>
<AutoTable
......@@ -159,13 +159,13 @@ const Storesearch = (props) => {
}}
/>
) : (
<MenuFoldOutlined
style={{ cursor: "pointer", fontSize: 20 }}
onClick={() => {
setCollapsed(!collapsed)
}}
/>
)}
<MenuFoldOutlined
style={{ cursor: "pointer", fontSize: 20 }}
onClick={() => {
setCollapsed(!collapsed)
}}
/>
)}
</div>
{
!collapsed ?
......@@ -179,10 +179,11 @@ 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}
......
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