77 lines
1.8 KiB
JavaScript
77 lines
1.8 KiB
JavaScript
import { TreeSelect } from "antd";
|
|
import { useEffect } from "react";
|
|
import { getTreeNodePaths, processTreeDataByLevel } from "../../../utils";
|
|
|
|
/**
|
|
* 基础下拉树组件（不建议直接使用此组件，二次继承使用）
|
|
*/
|
|
function BasicSelectTree(props) {
|
|
const {
|
|
onGetData,
|
|
onChange,
|
|
onGetLabel,
|
|
onGetNodePaths,
|
|
onGetNodePathsIsIncludeOneself = true,
|
|
placeholder = "",
|
|
treeData = [],
|
|
nameKey = "name",
|
|
idKey = "id",
|
|
childrenKey = "childrenList",
|
|
level,
|
|
...restProps
|
|
} = props;
|
|
|
|
// 根据 level 处理树数据
|
|
const processedTreeData = level
|
|
? processTreeDataByLevel({
|
|
data: treeData,
|
|
level,
|
|
childrenKey,
|
|
currentLevel: 1,
|
|
})
|
|
: treeData;
|
|
|
|
const handleChange = (value, label, extra) => {
|
|
if (value) {
|
|
const parentNodes = getTreeNodePaths({
|
|
data: treeData,
|
|
targetId: value,
|
|
idKey,
|
|
childrenKey,
|
|
isIncludeOneself: onGetNodePathsIsIncludeOneself,
|
|
});
|
|
onGetNodePaths?.(parentNodes);
|
|
onGetLabel?.(parentNodes[parentNodes.length - 1][nameKey]);
|
|
}
|
|
else {
|
|
onGetNodePaths?.([]);
|
|
onGetLabel?.("");
|
|
}
|
|
onChange?.(value, label, extra);
|
|
};
|
|
|
|
useEffect(() => {
|
|
onGetData?.(treeData, processedTreeData);
|
|
}, [treeData, processedTreeData]);
|
|
|
|
return (
|
|
<TreeSelect
|
|
showSearch
|
|
style={{ width: "100%" }}
|
|
styles={{
|
|
popup: { root: { maxHeight: 400, overflow: "auto" } },
|
|
}}
|
|
placeholder={`请选择${placeholder}`}
|
|
onChange={handleChange}
|
|
allowClear
|
|
treeData={processedTreeData}
|
|
fieldNames={{ label: nameKey, value: idKey, children: childrenKey }}
|
|
{...restProps}
|
|
/>
|
|
);
|
|
}
|
|
|
|
BasicSelectTree.displayName = "BasicSelectTree";
|
|
|
|
export default BasicSelectTree;
|