51 lines
1.2 KiB
JavaScript
51 lines
1.2 KiB
JavaScript
|
import { TreeSelect } from "antd";
|
||
|
|
import { getTreeNodePaths } from "../../../utils";
|
||
|
|
|
||
|
|
function BasicSelectTree(props) {
|
||
|
|
const {
|
||
|
|
onSelect,
|
||
|
|
onGetNodePaths,
|
||
|
|
onGetNodePathsIsIncludeOneself = true,
|
||
|
|
placeholder = "",
|
||
|
|
treeData = [],
|
||
|
|
nameKey = "name",
|
||
|
|
idKey = "id",
|
||
|
|
childrenKey = "childrenList",
|
||
|
|
...restProps
|
||
|
|
} = props;
|
||
|
|
|
||
|
|
const handleSelect = (value, node, extra) => {
|
||
|
|
if (value.length > 0) {
|
||
|
|
const parentNodes = getTreeNodePaths({
|
||
|
|
data: treeData,
|
||
|
|
targetId: value,
|
||
|
|
idKey,
|
||
|
|
childrenKey,
|
||
|
|
isIncludeOneself: onGetNodePathsIsIncludeOneself
|
||
|
|
});
|
||
|
|
onGetNodePaths?.(parentNodes);
|
||
|
|
}
|
||
|
|
onSelect?.(value, node, extra);
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<TreeSelect
|
||
|
|
showSearch
|
||
|
|
style={{ width: "100%" }}
|
||
|
|
styles={{
|
||
|
|
popup: { root: { maxHeight: 400, overflow: "auto" } },
|
||
|
|
}}
|
||
|
|
placeholder={`请选择${placeholder}`}
|
||
|
|
onSelect={handleSelect}
|
||
|
|
allowClear
|
||
|
|
treeData={treeData}
|
||
|
|
fieldNames={{ label: nameKey, value: idKey, children: childrenKey }}
|
||
|
|
{...restProps}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
BasicSelectTree.displayName = "BasicSelectTree";
|
||
|
|
|
||
|
|
export default BasicSelectTree;
|