feat:自定义筛选组件,优化用户输入跟踪,在筛选项顶部添加一个用户的原始输入 (#491)
Reviewed-on: daoyoucloud/tachycode#491 Co-authored-by: bai.jingfeng <bai.jingfeng@foxmail.com> Co-committed-by: bai.jingfeng <bai.jingfeng@foxmail.com>
This commit is contained in:
parent
5134a3fce0
commit
4a295a216f
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@hera/plugin-core",
|
"name": "@hera/plugin-core",
|
||||||
"version": "1.6.0",
|
"version": "1.6.1",
|
||||||
"displayName": "Hera platform",
|
"displayName": "Hera platform",
|
||||||
"displayName.zh-CN": "赫拉平台",
|
"displayName.zh-CN": "赫拉平台",
|
||||||
"description": "Hera platform as nocobase plugin.",
|
"description": "Hera platform as nocobase plugin.",
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import React, { useEffect, useState } from 'react';
|
import React, { useState } from 'react';
|
||||||
import { AutoComplete as AntdAutoComplete } from 'antd';
|
import { AutoComplete as AntdAutoComplete } from 'antd';
|
||||||
import { connect, useFieldSchema } from '@formily/react';
|
import { connect, useFieldSchema } from '@formily/react';
|
||||||
import { useAPIClient } from '@nocobase/client';
|
import { useAPIClient } from '@nocobase/client';
|
||||||
@ -8,42 +8,54 @@ import { fuzzysearch } from '../../utils';
|
|||||||
export const AutoComplete = connect((props) => {
|
export const AutoComplete = connect((props) => {
|
||||||
const { fieldNames, params: fieldFilter } = props;
|
const { fieldNames, params: fieldFilter } = props;
|
||||||
const fieldSchema = useFieldSchema();
|
const fieldSchema = useFieldSchema();
|
||||||
const [defultValue, setDefultValue] = useState([]);
|
const targetKey = fieldNames.value;
|
||||||
const api = useAPIClient();
|
const api = useAPIClient();
|
||||||
|
const [defultOptions, setDefultOptions] = useState([]);
|
||||||
const [options, setOptions] = useState([]);
|
const [options, setOptions] = useState([]);
|
||||||
|
|
||||||
|
const getNoDuplicateTextOptions = (rawOptions) => {
|
||||||
|
const targetOptions = rawOptions.filter((option, index, self) => {
|
||||||
|
return self.findIndex((item) => item[targetKey] === option[targetKey]) === index;
|
||||||
|
});
|
||||||
|
return targetOptions;
|
||||||
|
};
|
||||||
|
|
||||||
useAsyncEffect(async () => {
|
useAsyncEffect(async () => {
|
||||||
const defultOptions = await api.request({
|
const {
|
||||||
|
data: { data: rawOptions },
|
||||||
|
} = await api.request({
|
||||||
url: fieldSchema['collectionName'] + ':list',
|
url: fieldSchema['collectionName'] + ':list',
|
||||||
params: {
|
params: {
|
||||||
pageSize: 99999,
|
pageSize: 99999,
|
||||||
filter: fieldFilter ? { ...fieldFilter.filter } : {},
|
filter: fieldFilter ? { ...fieldFilter.filter } : {},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
changLable(defultOptions?.data?.data);
|
const targetOptions = getNoDuplicateTextOptions(rawOptions);
|
||||||
|
setDefultOptions(targetOptions);
|
||||||
|
setOptions(targetOptions);
|
||||||
}, [fieldFilter?.filter, fieldSchema['collectionName']]);
|
}, [fieldFilter?.filter, fieldSchema['collectionName']]);
|
||||||
|
|
||||||
useEffect(() => {
|
const onSearch = (value) => {
|
||||||
changLable(defultValue);
|
// 在筛选项开头跟踪用户的原始输入值
|
||||||
}, [fieldNames?.label]);
|
if (value) {
|
||||||
|
setOptions([
|
||||||
const changLable = (defultOptions) => {
|
{
|
||||||
if (defultOptions) {
|
[targetKey]: value,
|
||||||
const items = [];
|
},
|
||||||
defultOptions.forEach((item) => {
|
...defultOptions,
|
||||||
if (!items.filter((option) => option[fieldNames.value] === item[fieldNames.value]).length) {
|
]);
|
||||||
items.push(item);
|
} else {
|
||||||
}
|
setOptions(defultOptions);
|
||||||
});
|
|
||||||
setDefultValue(items);
|
|
||||||
setOptions(items);
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<AntdAutoComplete
|
<AntdAutoComplete
|
||||||
{...props}
|
{...props}
|
||||||
options={options}
|
options={options}
|
||||||
filterOption={(inputValue, option) => fuzzysearch(inputValue, option[fieldNames.value].toString())}
|
filterOption={(inputValue, option) => fuzzysearch(inputValue, option[targetKey].toString())}
|
||||||
allowClear
|
allowClear
|
||||||
|
onSearch={onSearch}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
Loading…
Reference in New Issue
Block a user