исправлена функция выбора дт и кт
This commit is contained in:
parent
22d5733d16
commit
2812897858
@ -34,10 +34,6 @@ export const TreeFilterDropdown: React.FC<TreeFilterDropdownProps> = ({
|
|||||||
const [checkedKeys, setCheckedKeys] = useState<string[]>(selectedKeys);
|
const [checkedKeys, setCheckedKeys] = useState<string[]>(selectedKeys);
|
||||||
const [expandedKeys, setExpandedKeys] = useState<string[]>([]);
|
const [expandedKeys, setExpandedKeys] = useState<string[]>([]);
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
setCheckedKeys(selectedKeys);
|
|
||||||
}, [selectedKeys]);
|
|
||||||
|
|
||||||
const filteredTreeData = useMemo(() => {
|
const filteredTreeData = useMemo(() => {
|
||||||
if (!query) return treeData;
|
if (!query) return treeData;
|
||||||
|
|
||||||
@ -51,7 +47,11 @@ export const TreeFilterDropdown: React.FC<TreeFilterDropdownProps> = ({
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (isMatch || filteredChildren.length > 0) {
|
if (isMatch || filteredChildren.length > 0) {
|
||||||
return { ...node, children: filteredChildren.length > 0 ? filteredChildren : undefined };
|
return {
|
||||||
|
...node,
|
||||||
|
// ВАЖНО: мы оставляем родителя, но обрезаем его детей до найденных
|
||||||
|
children: filteredChildren.length > 0 ? filteredChildren : undefined,
|
||||||
|
};
|
||||||
}
|
}
|
||||||
return null;
|
return null;
|
||||||
};
|
};
|
||||||
@ -98,8 +98,68 @@ export const TreeFilterDropdown: React.FC<TreeFilterDropdownProps> = ({
|
|||||||
onClose();
|
onClose();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
function checkHandler(keys: string[], info: { node: OptionType; checked: boolean }) {
|
||||||
|
const newKeys = new Set([...keys, ...selectedKeys]);
|
||||||
|
|
||||||
|
const getAllDescendants = (node: OptionType): string[] => {
|
||||||
|
let res: string[] = [];
|
||||||
|
if (node?.children) {
|
||||||
|
node.children.forEach((child) => {
|
||||||
|
res.push(child.key);
|
||||||
|
res = [...res, ...getAllDescendants(child)];
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return res;
|
||||||
|
};
|
||||||
|
const findNodeByKey = (nodes: OptionType[], key: string): OptionType | undefined => {
|
||||||
|
for (const node of nodes) {
|
||||||
|
if (node.key === key) return node;
|
||||||
|
if (node.children) {
|
||||||
|
const found = findNodeByKey(node.children, key);
|
||||||
|
if (found) return found;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return undefined;
|
||||||
|
};
|
||||||
|
function findParentByKey(nodes: OptionType[], targetKey: string, parent: OptionType | null = null): OptionType | undefined {
|
||||||
|
for (const node of nodes) {
|
||||||
|
if (node.key === targetKey) {
|
||||||
|
return parent || undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (node.children) {
|
||||||
|
const foundParent = findParentByKey(node.children, targetKey, node);
|
||||||
|
if (foundParent) {
|
||||||
|
return foundParent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return undefined;
|
||||||
|
}
|
||||||
|
const node = findNodeByKey(treeData, info.node.key);
|
||||||
|
const childrens = getAllDescendants(node as OptionType);
|
||||||
|
if (node?.key) {
|
||||||
|
if (info.checked) {
|
||||||
|
newKeys.add(node.key);
|
||||||
|
childrens?.forEach((elem) => newKeys.add(elem));
|
||||||
|
} else {
|
||||||
|
const parentNode = findParentByKey(treeData, node.key);
|
||||||
|
if (parentNode?.key) {
|
||||||
|
newKeys.delete(parentNode?.key);
|
||||||
|
}
|
||||||
|
newKeys.delete(node.key);
|
||||||
|
childrens?.forEach((elem) => newKeys.delete(elem));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
setCheckedKeys(Array.from(newKeys));
|
||||||
|
}
|
||||||
|
useEffect(() => {
|
||||||
|
setCheckedKeys(selectedKeys);
|
||||||
|
}, [selectedKeys]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div style={{ padding: 12, width: 380 }}>
|
<div className='filterTree' style={{ padding: 12, width: 380 }}>
|
||||||
<div style={{ fontWeight: 600, marginBottom: 12, fontSize: 16 }}>{title}</div>
|
<div style={{ fontWeight: 600, marginBottom: 12, fontSize: 16 }}>{title}</div>
|
||||||
{warningBlock}
|
{warningBlock}
|
||||||
<div style={{ fontSize: 12, marginBottom: 4 }}>Поиск</div>
|
<div style={{ fontSize: 12, marginBottom: 4 }}>Поиск</div>
|
||||||
@ -122,16 +182,7 @@ export const TreeFilterDropdown: React.FC<TreeFilterDropdownProps> = ({
|
|||||||
selectable={false}
|
selectable={false}
|
||||||
treeData={filteredTreeData}
|
treeData={filteredTreeData}
|
||||||
checkedKeys={visibleCheckedKeys}
|
checkedKeys={visibleCheckedKeys}
|
||||||
onCheck={(keys) => {
|
onCheck={(keys, test) => checkHandler(keys as string[], test)}
|
||||||
const newChecked = Array.isArray(keys) ? keys : keys.checked;
|
|
||||||
|
|
||||||
const allVisibleKeys = getAllNodeKeys(filteredTreeData);
|
|
||||||
const hiddenKeys = checkedKeys.filter((k) => !allVisibleKeys.includes(k));
|
|
||||||
|
|
||||||
const finalKeys = Array.from(new Set([...newChecked.map(String), ...hiddenKeys]));
|
|
||||||
|
|
||||||
setCheckedKeys(finalKeys);
|
|
||||||
}}
|
|
||||||
expandedKeys={expandedKeys}
|
expandedKeys={expandedKeys}
|
||||||
onExpand={(keys) => setExpandedKeys(keys as string[])}
|
onExpand={(keys) => setExpandedKeys(keys as string[])}
|
||||||
/>
|
/>
|
||||||
|
|||||||
@ -6,6 +6,6 @@
|
|||||||
.chessTable .ant-table-cell-fix {
|
.chessTable .ant-table-cell-fix {
|
||||||
background-color: #f8fafc !important;
|
background-color: #f8fafc !important;
|
||||||
}
|
}
|
||||||
.resRow {
|
.chessTable .resRow {
|
||||||
background-color: #e6f4ea !important ;
|
background-color: #e6f4ea !important ;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
.empty-cell {
|
.chessTable .empty-cell {
|
||||||
background-color: #f2f4f7;
|
background-color: #f2f4f7;
|
||||||
}
|
}
|
||||||
.chessTable .ant-table-tbody > tr:hover > td.empty-cell {
|
.chessTable .ant-table-tbody > tr:hover > td.empty-cell {
|
||||||
|
|||||||
@ -151,6 +151,7 @@ export const ConsolidationChessTableFilter: React.FC<ConsolidationChessTableFilt
|
|||||||
className='custom-select-selection-item '
|
className='custom-select-selection-item '
|
||||||
popupRender={() => (
|
popupRender={() => (
|
||||||
<TreeFilterDropdown
|
<TreeFilterDropdown
|
||||||
|
|
||||||
title='Компании'
|
title='Компании'
|
||||||
placeholder='Введите название компании'
|
placeholder='Введите название компании'
|
||||||
treeData={companyTreeData}
|
treeData={companyTreeData}
|
||||||
@ -177,7 +178,7 @@ export const ConsolidationChessTableFilter: React.FC<ConsolidationChessTableFilt
|
|||||||
showSearch={false}
|
showSearch={false}
|
||||||
popupMatchSelectWidth={false}
|
popupMatchSelectWidth={false}
|
||||||
options={flattenTree(debitTreeData)}
|
options={flattenTree(debitTreeData)}
|
||||||
className='custom-select-selection-item '
|
className='custom-select-selection-item'
|
||||||
popupRender={() => (
|
popupRender={() => (
|
||||||
<TreeFilterDropdown
|
<TreeFilterDropdown
|
||||||
title='Дебетовые счета'
|
title='Дебетовые счета'
|
||||||
@ -208,6 +209,7 @@ export const ConsolidationChessTableFilter: React.FC<ConsolidationChessTableFilt
|
|||||||
showSearch={false}
|
showSearch={false}
|
||||||
popupMatchSelectWidth={false}
|
popupMatchSelectWidth={false}
|
||||||
options={flattenTree(creditTreeData)}
|
options={flattenTree(creditTreeData)}
|
||||||
|
className='custom-select-selection-item'
|
||||||
popupRender={() => (
|
popupRender={() => (
|
||||||
<TreeFilterDropdown
|
<TreeFilterDropdown
|
||||||
title='Кредитовые счета'
|
title='Кредитовые счета'
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user