|
| 1 | +/** |
| 2 | + * 获取该字段Checkbox的indeterminate属性 |
| 3 | + * @param record 字段项 |
| 4 | + * @param primaryKey 键名称 |
| 5 | + * @param selected 当前选中的字段值集合 |
| 6 | + * @returns indeterminate属性值 |
| 7 | + */ |
| 8 | +const getCheckedProps = (record: any, primaryKey: string, selected: any[]) => { |
| 9 | + if (record.children?.length) { |
| 10 | + const childrenDataSource = record.children |
| 11 | + const selectedChildren = childrenDataSource.filter((item) => |
| 12 | + selected?.includes(item[primaryKey]) |
| 13 | + ) |
| 14 | + return { |
| 15 | + // checked受控，此处配置在rowSelection并不会生效，供getFinalTreeKeys使用 |
| 16 | + checked: selectedChildren.length === childrenDataSource.length, |
| 17 | + indeterminate: !!( |
| 18 | + selectedChildren.length && |
| 19 | + selectedChildren.length !== childrenDataSource.length |
| 20 | + ), |
| 21 | + } |
| 22 | + } |
| 23 | + return {} |
| 24 | +} |
| 25 | + |
| 26 | +/** |
| 27 | + * 获取树列表某个键值的集合 |
| 28 | + * @param tree 树列表 |
| 29 | + * @param primaryKey 键名称 |
| 30 | + * @returns 键值数组集合 |
| 31 | + */ |
| 32 | +const getTreeKeys = (tree: any[] = [], primaryKey: string) => |
| 33 | + tree.reduce( |
| 34 | + (prev, current) => [ |
| 35 | + ...prev, |
| 36 | + current[primaryKey], |
| 37 | + ...getTreeKeys(current?.children, primaryKey), |
| 38 | + ], |
| 39 | + [] |
| 40 | + ) |
| 41 | + |
| 42 | +/** |
| 43 | + * 获取最终选中值（添加选中所有子元素的父元素，或移除未选中所有子元素的父元素） |
| 44 | + * @param tree 树列表 |
| 45 | + * @param primaryKey 键名称 |
| 46 | + * @param selectedRowKeys 当前选中的字段值集合 |
| 47 | + * @returns 最终选中的字段值集合 |
| 48 | + */ |
| 49 | +const getFinalTreeKeys = ( |
| 50 | + tree: any[] = [], |
| 51 | + primaryKey: string, |
| 52 | + selectedRowKeys: any[] |
| 53 | +) => { |
| 54 | + let finalSelectedRowKeys = [...selectedRowKeys] |
| 55 | + |
| 56 | + tree.forEach((item) => { |
| 57 | + if (item.children?.length) { |
| 58 | + // 优先递归子元素 |
| 59 | + finalSelectedRowKeys = getFinalTreeKeys( |
| 60 | + item.children, |
| 61 | + primaryKey, |
| 62 | + finalSelectedRowKeys |
| 63 | + ) |
| 64 | + if (getCheckedProps(item, primaryKey, finalSelectedRowKeys)?.checked) { |
| 65 | + // 如果该元素的子元素全部选中，则也选中该项（即包含全选子元素的父元素） |
| 66 | + finalSelectedRowKeys = [ |
| 67 | + ...new Set([...finalSelectedRowKeys, item[primaryKey]]), |
| 68 | + ] |
| 69 | + } else { |
| 70 | + // 如果该元素的子元素未全部选中，则移除该项 |
| 71 | + finalSelectedRowKeys = finalSelectedRowKeys.filter( |
| 72 | + (key) => key !== item[primaryKey] |
| 73 | + ) |
| 74 | + } |
| 75 | + } |
| 76 | + }) |
| 77 | + |
| 78 | + return finalSelectedRowKeys |
| 79 | +} |
| 80 | + |
| 81 | +interface ICheckSlackly { |
| 82 | + ( |
| 83 | + selectedRowKeys: any[], |
| 84 | + selected: any[], |
| 85 | + primaryKey: string, |
| 86 | + flatDataSource: any[] |
| 87 | + ): { |
| 88 | + selectedRowKeys: any[] |
| 89 | + records: any[] |
| 90 | + } |
| 91 | +} |
| 92 | + |
| 93 | +const useCheckSlackly: ICheckSlackly = ( |
| 94 | + selectedRowKeys, |
| 95 | + selected, |
| 96 | + primaryKey, |
| 97 | + flatDataSource |
| 98 | +) => { |
| 99 | + const isSelected = selectedRowKeys.length > selected.length |
| 100 | + const currentKey = [...selectedRowKeys, ...selected].find( |
| 101 | + (key) => !(selectedRowKeys.includes(key) && selected.includes(key)) |
| 102 | + ) |
| 103 | + const currentRecords = flatDataSource.find( |
| 104 | + (item) => item[primaryKey] === currentKey |
| 105 | + ) |
| 106 | + const currentTreeKeys = getTreeKeys([currentRecords], primaryKey) |
| 107 | + let newSelectedRowKeys = [] |
| 108 | + |
| 109 | + if (isSelected) { |
| 110 | + newSelectedRowKeys = [...new Set([...selected, ...currentTreeKeys])] |
| 111 | + } else { |
| 112 | + newSelectedRowKeys = selected.filter( |
| 113 | + (key) => !currentTreeKeys.includes(key) |
| 114 | + ) |
| 115 | + } |
| 116 | + // 添加选中所有子元素的父元素，或移除未选中所有子元素的父元素 |
| 117 | + newSelectedRowKeys = getFinalTreeKeys( |
| 118 | + flatDataSource, |
| 119 | + primaryKey, |
| 120 | + newSelectedRowKeys |
| 121 | + ) |
| 122 | + |
| 123 | + return { |
| 124 | + selectedRowKeys: newSelectedRowKeys, |
| 125 | + records: flatDataSource.filter((item) => |
| 126 | + newSelectedRowKeys.includes(item[primaryKey]) |
| 127 | + ), |
| 128 | + } |
| 129 | +} |
| 130 | + |
| 131 | +export { useCheckSlackly, getCheckedProps } |
0 commit comments