diff --git a/src/views/products/Detail/ProductsTree.jsx b/src/views/products/Detail/ProductsTree.jsx index fff21cd..4378482 100644 --- a/src/views/products/Detail/ProductsTree.jsx +++ b/src/views/products/Detail/ProductsTree.jsx @@ -5,7 +5,7 @@ import { CaretDownOutlined } from '@ant-design/icons'; import { useTranslation } from 'react-i18next'; import useProductsStore from '@/stores/Products/Index'; import { useProductsTypes, useProductsAuditStatesMapVal } from '@/hooks/useProductsSets'; -import { groupBy, sortBy } from '@/utils/commons'; +import { groupBy, isEmpty, sortBy } from '@/utils/commons'; import NewProductModal from './NewProductModal'; import ContractRemarksModal from './ContractRemarksModal' @@ -49,7 +49,7 @@ const ProductsTree = ({ onNodeSelect, ...props }) => { const [activeAgency] = useProductsStore((state) => [state.activeAgency]); const productsTypes = useProductsTypes(); - const [treeData, setTreeData] = useState([]); + const [treeData, setTreeData] = useState([]); // render data const [rawTreeData, setRawTreeData] = useState([]); const [flattenTreeData, setFlattenTreeData] = useState([]); const [expandedKeys, setExpandedKeys] = useState([]); @@ -109,6 +109,11 @@ const ProductsTree = ({ onNodeSelect, ...props }) => { const [searchValue, setSearchValue] = useState(''); const onSearch = ({ target: { value } }) => { // const { value } = e.target; + if (isEmpty(value)) { + setTreeData(rawTreeData); + setSearchValue(value); + return; + } const newExpandedKeys = flattenTreeData .filter((item) => item.title.includes(value)) .map((item) => getParentKey(item.key, rawTreeData)) @@ -116,6 +121,11 @@ const ProductsTree = ({ onNodeSelect, ...props }) => { setExpandedKeys(newExpandedKeys); setSearchValue(value); setAutoExpandParent(true); + const matchTree = rawTreeData.map(node1 => { + const _find = node1.children.filter(node2 => node2.title.includes(value)); + return _find.length > 0 ? {...node1, children: _find} : null; + }).filter(node => node); + setTreeData(matchTree); }; const handleNodeSelect = (selectedKeys, { node }) => { if (node._raw) {