import { Transfer, Tree } from 'antd';
import React, { useState, useEffect } from 'react';
const generateTree = (treeNodes = [], checkedKeys = []) =>
treeNodes.map(({ children, ...props }) => ({
...props,
disabled: checkedKeys.includes(props.key),
children: generateTree(children, checkedKeys),
}));
const TreeTransferComp = ({ dataSource, targetKeys, ...restProps }) => {
const [newDataSource, setNewDataSource] = useState([]);
useEffect(() => {
setNewDataSource(dataSource);
}, [dataSource]);
const transferDataSource = [];
function flatten(list = []) {
list.forEach((item) => {
transferDataSource.push(item);
flatten(item.children);
});
}
flatten(dataSource);
// 树搜索函数
const onsearchDataSource = (dataSource, val) => {
// 递归查找存在的父级
const deepFilter = (i, val) => {
return (
i.children.filter((o) => {
if (o.title.indexOf(val) > -1) {
return true;
}
if (o.children && o.children.length > 0) {
return deepFilter(o, val);
}
}).length > 0
);
};
const filterMenu = (list, val) => {
return list
.filter((item) => {
if (item.title.indexOf(val) > -1) {
return true;
}
if (item.children && item.children.length > 0) {
return deepFilter(item, val);
}
return false;
})
.map((item) => {
item = Object.assign({}, item);
if (item.children) {
item.children = item.children.filter((res) => res.title.indexOf(val) > -1);
filterMenu(item.children, val);
}
return item;
});
};
return filterMenu(dataSource, val);
}
const dealCheckboxSeleted = ({ e, onItemSelect, onItemSelectAll }, direction) => {
let {
checked,
halfCheckedKeys,
node: { key, children },
} = e;
// 勾选的是父节点
if (children?.length > 0) {
let keys = [];
if (direction === 'left') {
children?.forEach(child => {
keys.push(child.key)
});
onItemSelectAll([...keys, key], checked);
}
if (direction === 'right') {
children?.forEach(child => {
keys.push(child.key)
});
onItemSelectAll([...keys], checked);
}
} else {
// 勾选的是子节点
if (!checked) {
// 查找该元素的父元素
let parentKeys = [];
parentKeys = [halfCheckedKeys?.[0]] || [];
if (parentKeys[0] == undefined) {
// 当一级下的二级全部取消勾选,一级也取消勾选
dataSource.forEach(tree => {
if (tree.children) {
tree.children?.forEach(child => {
if (child?.key === key) {
parentKeys.push(tree?.key)
}
})
}
});
}
onItemSelectAll([...parentKeys, key], checked)
} else {
let parentKey = '';
dataSource.forEach(tree => {
if (tree?.children) {
tree.children?.forEach(child => {
if (child?.key === key) {
parentKey = tree?.key;
}
});
}
});
if (!halfCheckedKeys?.includes(parentKey) && parentKey != '') {
onItemSelectAll([key, parentKey], checked);
} else {
onItemSelect(key, checked);
}
}
}
};
return (
<Transfer
titles={['分组', '仅展示子节点']}
{...restProps}
targetKeys={targetKeys}
dataSource={transferDataSource}
className="tree-transfer"
render={(item) => item.title}
showSelectAll={true}
showSearch
onSearch={(dir, val) => {
if (dir === 'left') { // 左边搜索
if (val !== '') {
const newDeptList = onsearchDataSource(dataSource, val);
setNewDataSource(newDeptList);
} else {
setNewDataSource(dataSource);// 左边没搜索时候的原始数据
}
}
}}
>
{({ direction, onItemSelect, selectedKeys, onItemSelectAll }) => {
if (direction === 'left') {
const checkedKeys = [...selectedKeys, ...targetKeys];
return (
<Tree
blockNode
checkable
defaultExpandAll
checkedKeys={checkedKeys}
treeData={generateTree(newDataSource, targetKeys)}
onCheck={(_, e) => {
dealCheckboxSeleted({ e, onItemSelect, onItemSelectAll }, direction)
}}
onSelect={(_, e) => {
dealCheckboxSeleted({ e, onItemSelect, onItemSelectAll }, direction)
}}
/>
);
}
}}
</Transfer>
);
};
export default TreeTransferComp;
antd Transfer树穿梭框父子节点关联,支持全选、搜索,右侧只展示子节点
最新推荐文章于 2024-09-06 21:42:54 发布