fix: 修改自定义筛选框数据范围问题
This commit is contained in:
		
							parent
							
								
									77901e4f3e
								
							
						
					
					
						commit
						a6bd972beb
					
				@ -1,23 +1,48 @@
 | 
			
		||||
import React, { useEffect, useState } from 'react';
 | 
			
		||||
import { AutoComplete as AntdAutoComplete } from 'antd';
 | 
			
		||||
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) => {
 | 
			
		||||
  const fieldSchema = useFieldSchema();
 | 
			
		||||
  const { fieldNames, options: defultOptions } = fieldSchema['x-component-props'];
 | 
			
		||||
  const defultValue = defultOptions.map((item) => {
 | 
			
		||||
    item['label'] = item[fieldNames.label];
 | 
			
		||||
    item['value'] = item[fieldNames.value];
 | 
			
		||||
    return item;
 | 
			
		||||
  });
 | 
			
		||||
  const [options, setOptions] = useState([...defultValue]);
 | 
			
		||||
  const { fieldNames } = fieldSchema['x-component-props'];
 | 
			
		||||
  const fieldFilter = fieldSchema['x-component-props']['params'];
 | 
			
		||||
  const filter = fieldFilter ? JSON.stringify(fieldFilter.filter) : {};
 | 
			
		||||
  const [defultValue, setDefultValue] = useState([]);
 | 
			
		||||
  const api = useAPIClient();
 | 
			
		||||
  const [options, setOptions] = useState([]);
 | 
			
		||||
  const [value, setValue] = useState('');
 | 
			
		||||
  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']) {
 | 
			
		||||
    form.values['custom'] = {};
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  const onSearch = (data) => {
 | 
			
		||||
    if (data) {
 | 
			
		||||
      const searchValue = defultValue.filter((item) => item[fieldNames.label].includes(data));
 | 
			
		||||
@ -40,16 +65,5 @@ export const AutoComplete = (props) => {
 | 
			
		||||
      setOptions(defultValue);
 | 
			
		||||
    }
 | 
			
		||||
  };
 | 
			
		||||
 | 
			
		||||
  return (
 | 
			
		||||
    <AntdAutoComplete
 | 
			
		||||
      value={value}
 | 
			
		||||
      options={options}
 | 
			
		||||
      onSearch={(value) => {
 | 
			
		||||
        onSearch(value);
 | 
			
		||||
      }}
 | 
			
		||||
      onChange={(data) => onSearch(data)}
 | 
			
		||||
      allowClear
 | 
			
		||||
    />
 | 
			
		||||
  );
 | 
			
		||||
  return <AntdAutoComplete value={value} options={options} onSearch={onSearch} onChange={onSearch} allowClear />;
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
@ -7,7 +7,8 @@ import { Select as AntdSelect, Empty, Spin, Tag } from 'antd';
 | 
			
		||||
import React, { useEffect, useMemo, useState } from 'react';
 | 
			
		||||
import { ReadPretty } from './ReadPretty';
 | 
			
		||||
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> & {
 | 
			
		||||
  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 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) => {
 | 
			
		||||
    if (isEmptyObject(v)) {
 | 
			
		||||
      return;
 | 
			
		||||
 | 
			
		||||
@ -119,15 +119,6 @@ export const FilterCustomItemInitializer: React.FC<{
 | 
			
		||||
    });
 | 
			
		||||
    const { name, title, component, collection } = values;
 | 
			
		||||
    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(
 | 
			
		||||
      gridRowColWrap({
 | 
			
		||||
        'x-component': component,
 | 
			
		||||
@ -141,7 +132,6 @@ export const FilterCustomItemInitializer: React.FC<{
 | 
			
		||||
        'x-decorator-props': collection,
 | 
			
		||||
        'x-component-props': {
 | 
			
		||||
          ...(defaultSchema['x-component-props'] || {}),
 | 
			
		||||
          options: option,
 | 
			
		||||
          fieldNames: {
 | 
			
		||||
            label: 'name',
 | 
			
		||||
            value: 'id',
 | 
			
		||||
@ -166,7 +156,7 @@ export const FilterItemCustomDesigner: React.FC = () => {
 | 
			
		||||
  const { t } = useTranslation();
 | 
			
		||||
  const fieldSchema = useFieldSchema();
 | 
			
		||||
  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 field = useField();
 | 
			
		||||
  const { dn } = useDesignable();
 | 
			
		||||
@ -177,16 +167,18 @@ export const FilterItemCustomDesigner: React.FC = () => {
 | 
			
		||||
      <EditDefaultValue />
 | 
			
		||||
      <SchemaSettingsDataScope
 | 
			
		||||
        collectionName={name}
 | 
			
		||||
        defaultFilter={fieldSchema?.['x-decorator-props']?.params?.filter || {}}
 | 
			
		||||
        defaultFilter={fieldSchema?.['x-component-props']?.params?.filter || {}}
 | 
			
		||||
        form={form}
 | 
			
		||||
        onSubmit={({ filter }) => {
 | 
			
		||||
          filter = removeNullCondition(filter);
 | 
			
		||||
          _.set(fieldSchema, 'x-decorator-props.params.filter', filter);
 | 
			
		||||
          field.decoratorProps.params = { ...fieldSchema['x-decorator-props'].params };
 | 
			
		||||
          _.set(field.componentProps, 'params', {
 | 
			
		||||
            ...field.componentProps?.params,
 | 
			
		||||
            filter,
 | 
			
		||||
          });
 | 
			
		||||
          fieldSchema['x-component-props']['params'] = field.componentProps.params;
 | 
			
		||||
          dn.emit('patch', {
 | 
			
		||||
            schema: {
 | 
			
		||||
              ['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