Merge pull request 'fix: 修改自定义筛选框数据范围问题' (#387) from fix_customFilter into @hera/dev
Reviewed-on: daoyoucloud/tachycode#387 Reviewed-by: sealday <zhanglin@daoyoucloud.com>
This commit is contained in:
commit
0d9f13f596
@ -1,23 +1,48 @@
|
|||||||
import React, { useEffect, useState } from 'react';
|
import React, { useEffect, useState } from 'react';
|
||||||
import { AutoComplete as AntdAutoComplete } from 'antd';
|
import { AutoComplete as AntdAutoComplete } from 'antd';
|
||||||
import { useFieldSchema, useForm } from '@formily/react';
|
import { useFieldSchema, useForm } from '@formily/react';
|
||||||
import { useDesigner } from '@nocobase/client';
|
import { useAPIClient, useDesigner, useRequest } from '@nocobase/client';
|
||||||
|
import { useAsyncEffect } from 'ahooks';
|
||||||
|
|
||||||
export const AutoComplete = (props) => {
|
export const AutoComplete = (props) => {
|
||||||
const fieldSchema = useFieldSchema();
|
const fieldSchema = useFieldSchema();
|
||||||
const { fieldNames, options: defultOptions } = fieldSchema['x-component-props'];
|
const { fieldNames } = fieldSchema['x-component-props'];
|
||||||
const defultValue = defultOptions.map((item) => {
|
const fieldFilter = fieldSchema['x-component-props']['params'];
|
||||||
item['label'] = item[fieldNames.label];
|
const filter = fieldFilter ? JSON.stringify(fieldFilter.filter) : {};
|
||||||
item['value'] = item[fieldNames.value];
|
const [defultValue, setDefultValue] = useState([]);
|
||||||
return item;
|
const api = useAPIClient();
|
||||||
});
|
const [options, setOptions] = useState([]);
|
||||||
const [options, setOptions] = useState([...defultValue]);
|
|
||||||
const [value, setValue] = useState('');
|
const [value, setValue] = useState('');
|
||||||
const form = useForm();
|
const form = useForm();
|
||||||
|
|
||||||
|
useAsyncEffect(async () => {
|
||||||
|
const defultOptions = await api.request({
|
||||||
|
url: fieldSchema['collectionName'] + ':list',
|
||||||
|
params: {
|
||||||
|
pageSize: 99999,
|
||||||
|
filter: fieldFilter ? { ...fieldFilter.filter } : {},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
changLable(defultOptions?.data?.data);
|
||||||
|
}, [filter]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
changLable(defultValue);
|
||||||
|
}, [fieldNames.label]);
|
||||||
|
const changLable = (defultOptions) => {
|
||||||
|
if (defultOptions) {
|
||||||
|
const item = defultOptions.map((item) => {
|
||||||
|
item['label'] = item[fieldNames.label];
|
||||||
|
item['value'] = item[fieldNames.value];
|
||||||
|
return item;
|
||||||
|
});
|
||||||
|
setDefultValue(item);
|
||||||
|
setOptions(item);
|
||||||
|
}
|
||||||
|
};
|
||||||
if (!form.values['custom']) {
|
if (!form.values['custom']) {
|
||||||
form.values['custom'] = {};
|
form.values['custom'] = {};
|
||||||
}
|
}
|
||||||
|
|
||||||
const onSearch = (data) => {
|
const onSearch = (data) => {
|
||||||
if (data) {
|
if (data) {
|
||||||
const searchValue = defultValue.filter((item) => item[fieldNames.label].includes(data));
|
const searchValue = defultValue.filter((item) => item[fieldNames.label].includes(data));
|
||||||
@ -40,16 +65,5 @@ export const AutoComplete = (props) => {
|
|||||||
setOptions(defultValue);
|
setOptions(defultValue);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
return <AntdAutoComplete value={value} options={options} onSearch={onSearch} onChange={onSearch} allowClear />;
|
||||||
return (
|
|
||||||
<AntdAutoComplete
|
|
||||||
value={value}
|
|
||||||
options={options}
|
|
||||||
onSearch={(value) => {
|
|
||||||
onSearch(value);
|
|
||||||
}}
|
|
||||||
onChange={(data) => onSearch(data)}
|
|
||||||
allowClear
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
};
|
};
|
||||||
|
@ -7,7 +7,8 @@ import { Select as AntdSelect, Empty, Spin, Tag } from 'antd';
|
|||||||
import React, { useEffect, useMemo, useState } from 'react';
|
import React, { useEffect, useMemo, useState } from 'react';
|
||||||
import { ReadPretty } from './ReadPretty';
|
import { ReadPretty } from './ReadPretty';
|
||||||
import { FieldNames, defaultFieldNames, getCurrentOptions } from './utils';
|
import { FieldNames, defaultFieldNames, getCurrentOptions } from './utils';
|
||||||
import { useCollection_deprecated, useRequest } from '@nocobase/client';
|
import { useAPIClient, useCollection_deprecated, useRequest } from '@nocobase/client';
|
||||||
|
import { useAsyncEffect } from 'ahooks';
|
||||||
|
|
||||||
type Props = SelectProps<any, any> & {
|
type Props = SelectProps<any, any> & {
|
||||||
objectValue?: boolean;
|
objectValue?: boolean;
|
||||||
@ -20,7 +21,38 @@ type Props = SelectProps<any, any> & {
|
|||||||
const isEmptyObject = (val: any) => !isValid(val) || (typeof val === 'object' && Object.keys(val).length === 0);
|
const isEmptyObject = (val: any) => !isValid(val) || (typeof val === 'object' && Object.keys(val).length === 0);
|
||||||
|
|
||||||
const ObjectSelect = (props: Props) => {
|
const ObjectSelect = (props: Props) => {
|
||||||
const { value, options, onChange, fieldNames, mode, loading, rawOptions, defaultValue, ...others } = props;
|
const {
|
||||||
|
value,
|
||||||
|
options: defultValue,
|
||||||
|
onChange,
|
||||||
|
fieldNames,
|
||||||
|
mode,
|
||||||
|
loading,
|
||||||
|
rawOptions,
|
||||||
|
defaultValue,
|
||||||
|
...others
|
||||||
|
} = props;
|
||||||
|
const [options, setOptions] = useState([]);
|
||||||
|
const [defult, setDefult] = useState(false);
|
||||||
|
const fieldSchema = useFieldSchema();
|
||||||
|
const collectionName = fieldSchema['collectionName'];
|
||||||
|
const filterField = fieldSchema['x-component-props']['params'];
|
||||||
|
const filter = filterField ? JSON.stringify(filterField.filter) : {};
|
||||||
|
const api = useAPIClient();
|
||||||
|
|
||||||
|
useAsyncEffect(async () => {
|
||||||
|
if (collectionName) {
|
||||||
|
const defValue = await api.request({
|
||||||
|
url: collectionName + ':list',
|
||||||
|
params: {
|
||||||
|
pageSize: 99999,
|
||||||
|
filter: filterField ? { ...filterField.filter } : {},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
setOptions(defValue?.data?.data);
|
||||||
|
}
|
||||||
|
}, [filter]);
|
||||||
|
|
||||||
const toValue = (v: any) => {
|
const toValue = (v: any) => {
|
||||||
if (isEmptyObject(v)) {
|
if (isEmptyObject(v)) {
|
||||||
return;
|
return;
|
||||||
|
@ -119,15 +119,6 @@ export const FilterCustomItemInitializer: React.FC<{
|
|||||||
});
|
});
|
||||||
const { name, title, component, collection } = values;
|
const { name, title, component, collection } = values;
|
||||||
const defaultSchema = getInterface(component)?.default?.uiSchema || {};
|
const defaultSchema = getInterface(component)?.default?.uiSchema || {};
|
||||||
const res = await api.request({
|
|
||||||
url: collection + ':list',
|
|
||||||
params: {
|
|
||||||
pageSize: 99999,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
const option = res.data.data.map((value) => {
|
|
||||||
return value;
|
|
||||||
});
|
|
||||||
insert(
|
insert(
|
||||||
gridRowColWrap({
|
gridRowColWrap({
|
||||||
'x-component': component,
|
'x-component': component,
|
||||||
@ -141,7 +132,6 @@ export const FilterCustomItemInitializer: React.FC<{
|
|||||||
'x-decorator-props': collection,
|
'x-decorator-props': collection,
|
||||||
'x-component-props': {
|
'x-component-props': {
|
||||||
...(defaultSchema['x-component-props'] || {}),
|
...(defaultSchema['x-component-props'] || {}),
|
||||||
options: option,
|
|
||||||
fieldNames: {
|
fieldNames: {
|
||||||
label: 'name',
|
label: 'name',
|
||||||
value: 'id',
|
value: 'id',
|
||||||
@ -166,7 +156,7 @@ export const FilterItemCustomDesigner: React.FC = () => {
|
|||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
const fieldSchema = useFieldSchema();
|
const fieldSchema = useFieldSchema();
|
||||||
const fieldName = fieldSchema['name'] as string;
|
const fieldName = fieldSchema['name'] as string;
|
||||||
const name = fieldName.includes('custom') ? fieldSchema['x-decorator-props'] : fieldName;
|
const name = fieldName.includes('custom') ? fieldSchema['collectionName'] : fieldName;
|
||||||
const { form } = useFormBlockContext();
|
const { form } = useFormBlockContext();
|
||||||
const field = useField();
|
const field = useField();
|
||||||
const { dn } = useDesignable();
|
const { dn } = useDesignable();
|
||||||
@ -177,16 +167,18 @@ export const FilterItemCustomDesigner: React.FC = () => {
|
|||||||
<EditDefaultValue />
|
<EditDefaultValue />
|
||||||
<SchemaSettingsDataScope
|
<SchemaSettingsDataScope
|
||||||
collectionName={name}
|
collectionName={name}
|
||||||
defaultFilter={fieldSchema?.['x-decorator-props']?.params?.filter || {}}
|
defaultFilter={fieldSchema?.['x-component-props']?.params?.filter || {}}
|
||||||
form={form}
|
form={form}
|
||||||
onSubmit={({ filter }) => {
|
onSubmit={({ filter }) => {
|
||||||
filter = removeNullCondition(filter);
|
_.set(field.componentProps, 'params', {
|
||||||
_.set(fieldSchema, 'x-decorator-props.params.filter', filter);
|
...field.componentProps?.params,
|
||||||
field.decoratorProps.params = { ...fieldSchema['x-decorator-props'].params };
|
filter,
|
||||||
|
});
|
||||||
|
fieldSchema['x-component-props']['params'] = field.componentProps.params;
|
||||||
dn.emit('patch', {
|
dn.emit('patch', {
|
||||||
schema: {
|
schema: {
|
||||||
['x-uid']: fieldSchema['x-uid'],
|
['x-uid']: fieldSchema['x-uid'],
|
||||||
'x-decorator-props': fieldSchema['x-decorator-props'],
|
'x-component-props': fieldSchema['x-component-props'],
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
}}
|
}}
|
||||||
|
Loading…
Reference in New Issue
Block a user