1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
import React, { useState } from 'react';
import style from '../index.less'
import DirectoryTree from '@/components/DirectoryTree'
const SearchTree = (props) => {
const { userTree, setProcess } = props
const [expandedKeys, setExpandedKeys] = useState([])
const [autoExpandParent, setAutoExpandParent] = useState(true)
let allUser = []
const initTreeData = (tree) => {
if (!tree || tree?.length === 0) return;
return tree.map(item => {
const users = item?.userList || []
let children = initTreeData(item.subList);
if (users.length > 0) {
const userList = users.map(user => ({
title: user.name,
key: `user-${user.id}`,
id: user.id,
avatarUrl: user.avatarUrl,
selectable: true
}))
children = children?.length > 0 ? children.concat(userList) : userList
allUser = allUser.concat(item.userList)
}
return {
title: item.name,
key: item.id,
id: item.id,
children,
selectable: false
}
})
}
const treeData = initTreeData(userTree)
const onSelect = (selectedKeys, info) => {
console.log('selected', selectedKeys, info);
console.log(`info node is:`, info.node.title)
setProcess(selectedKeys, info)
};
const onExpand = expandedKeys => {
setExpandedKeys(expandedKeys)
setAutoExpandParent(false);
};
console.log(treeData , autoExpandParent)
return (
<div className={style.popover_tree}>
<DirectoryTree
showIcon={false}
placeholder="请输入搜索名称"
directoryData={treeData}
onSelect={onSelect}
autoExpandParent={true}
onExpand={onExpand}
expandedKeys={expandedKeys}
/>
</div>
);
};
export default SearchTree;