fix: 修改自定义筛选框数据范围问题
This commit is contained in:
		
							parent
							
								
									77901e4f3e
								
							
						
					
					
						commit
						a6bd972beb
					
				@ -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