perf: 根据名称搜索产品, 仅显示匹配

dev/2025b
Lei OT 2 months ago
parent 90563d8a1b
commit e5e3a0cf4c

@ -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) {

Loading…
Cancel
Save