void;
+ renderSchemaComponent: () => React.JSX.Element;
+}
+
+interface Props {
+ value: any;
+ collectionField?: CollectionFieldOptions_deprecated;
+ onChange: (value: any) => void;
+ style?: React.CSSProperties;
+ componentProps?: any;
+ schema?: any;
+ setScopes?: any;
+ testid?: string;
+ nullable?: boolean;
+ constantAbel?: boolean;
+ changeOnSelect?: boolean;
+ readOnly?: boolean;
+}
+
+export const DynamicComponent = (props: Props) => {
+ const { setScopes, nullable, constantAbel, changeOnSelect, readOnly = false } = props;
+ const { disabled } = useContext(FilterContext) || {};
+ const record = useCollectionRecordData();
+ const variables = useVariables();
+ const localVariables = useLocalVariables();
+ const { getAllCollectionsInheritChain } = useCollectionManager_deprecated();
+ const { collectionField } = props;
+ const component = useCallback((props: DynamicComponentProps) => {
+ return (
+
+ );
+ }, []);
+ const form = useMemo(() => {
+ return createForm({
+ values: {
+ value: props.value,
+ },
+ effects() {
+ onFieldValueChange('value', (field) => {
+ props?.onChange?.(field.value);
+ });
+ },
+ disabled,
+ });
+ }, [JSON.stringify(props.value), props.schema]);
+ const renderSchemaComponent: any = useCallback(() => {
+ const componentProps = merge(props?.schema?.['x-component-props'] || {}, props.componentProps || {});
+
+ return (
+
+
+
+ );
+ }, [props.schema]);
+ return (
+
+
+ {React.createElement(component, {
+ value: props.value,
+ collectionField: props.collectionField,
+ onChange: props?.onChange,
+ renderSchemaComponent,
+ })}
+
+
+ );
+};
+
+export const FilterDynamicComponent = DynamicComponent;
diff --git a/packages/core/client/src/schema-component/antd/linkageFilter/FilterGroup.tsx b/packages/core/client/src/schema-component/antd/linkageFilter/FilterGroup.tsx
new file mode 100644
index 0000000000..4c55b949a2
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/linkageFilter/FilterGroup.tsx
@@ -0,0 +1,124 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { CloseCircleOutlined } from '@ant-design/icons';
+import { ObjectField as ObjectFieldModel } from '@formily/core';
+import { ArrayField, connect, useField } from '@formily/react';
+import { Select, Space } from 'antd';
+import React, { useContext } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import { useToken } from '../__builtins__';
+import { FilterItems } from './FilterItems';
+import { FilterLogicContext, RemoveConditionContext } from './context';
+
+export const FilterGroup = connect((props) => {
+ const { bordered = true, disabled } = props;
+ const field = useField
();
+ const remove = useContext(RemoveConditionContext);
+ const { t } = useTranslation();
+ const { token } = useToken();
+
+ const keys = Object.keys(field.value || {});
+ const logic = keys.includes('$or') ? '$or' : '$and';
+ const setLogic = (value) => {
+ const obj = field.value || {};
+ field.value = {
+ [value]: [...(obj[logic] || [])],
+ };
+ };
+ const mergedDisabled = disabled || field.disabled;
+ return (
+
+
+
+ );
+});
diff --git a/packages/core/client/src/schema-component/antd/linkageFilter/FilterItems.tsx b/packages/core/client/src/schema-component/antd/linkageFilter/FilterItems.tsx
new file mode 100644
index 0000000000..5878eaa22a
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/linkageFilter/FilterItems.tsx
@@ -0,0 +1,33 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { ArrayField as ArrayFieldModel } from '@formily/core';
+import { ObjectField, observer, useField } from '@formily/react';
+import React from 'react';
+import { FilterGroup } from './FilterGroup';
+import { LinkageFilterItem } from './LinkageFilterItem';
+import { RemoveConditionContext } from './context';
+
+export const FilterItems = observer(
+ (props) => {
+ const field = useField();
+ return (
+
+ {field?.value?.filter(Boolean).map((item, index) => {
+ return (
+ field.remove(index)}>
+
+
+ );
+ })}
+
+ );
+ },
+ { displayName: 'FilterItems' },
+);
diff --git a/packages/core/client/src/schema-component/antd/linkageFilter/LinkageFilter.tsx b/packages/core/client/src/schema-component/antd/linkageFilter/LinkageFilter.tsx
new file mode 100644
index 0000000000..eb3003c584
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/linkageFilter/LinkageFilter.tsx
@@ -0,0 +1,65 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { ObjectField as ObjectFieldModel } from '@formily/core';
+import { observer, useField, useFieldSchema } from '@formily/react';
+import React, { useEffect, useState } from 'react';
+import { UseRequestOptions, useRequest } from '../../../api-client';
+import { withDynamicSchemaProps } from '../../../hoc/withDynamicSchemaProps';
+import { useProps } from '../../hooks/useProps';
+import { FilterGroup } from './FilterGroup';
+import { FilterContext } from './context';
+
+const useDef = (options: UseRequestOptions) => {
+ const field = useField();
+ return useRequest(() => Promise.resolve({ data: field.dataSource }), options);
+};
+
+export const LinkageFilter: any = withDynamicSchemaProps(
+ observer((props: any) => {
+ const { useDataSource = useDef } = props;
+
+ // 新版 UISchema（1.0 之后）中已经废弃了 useProps，这里之所以继续保留是为了兼容旧版的 UISchema
+ const { dynamicComponent, className, collectionName } = useProps(props);
+ const [scopes, setScopes] = useState([]);
+
+ const field = useField();
+ const fieldSchema: any = useFieldSchema();
+ useDataSource({
+ onSuccess(data) {
+ field.dataSource = data?.data || [];
+ },
+ });
+
+ useEffect(() => {
+ if (fieldSchema.defaultValue) {
+ field.initialValue = fieldSchema.defaultValue;
+ }
+ }, [fieldSchema.defaultValue]);
+
+ return (
+
+
+
+
+
+ );
+ }),
+ { displayName: 'LinkageFilter' },
+);
diff --git a/packages/core/client/src/schema-component/antd/linkageFilter/LinkageFilterItem.tsx b/packages/core/client/src/schema-component/antd/linkageFilter/LinkageFilterItem.tsx
new file mode 100644
index 0000000000..9f045db7cd
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/linkageFilter/LinkageFilterItem.tsx
@@ -0,0 +1,78 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { CloseCircleOutlined } from '@ant-design/icons';
+import { css } from '@emotion/css';
+import { observer } from '@formily/react';
+import { Select, Space } from 'antd';
+import React, { useCallback, useContext, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useCompile } from '../../hooks';
+import { DynamicComponent } from './DynamicComponent';
+import { RemoveConditionContext } from './context';
+import { useValues } from './useValues';
+import { FilterContext } from './context';
+
+export const LinkageFilterItem = observer(
+ (props: any) => {
+ const { t } = useTranslation();
+ const compile = useCompile();
+ const remove = useContext(RemoveConditionContext);
+ const { setScopes } = useContext(FilterContext) || {};
+ const { schema, operators, operator, setOperator, rightVar, leftVar, setLeftValue, setRightValue } = useValues();
+ const style = useMemo(() => ({ marginBottom: 8 }), []);
+
+ const onOperatorsChange = useCallback(
+ (value) => {
+ setOperator(value);
+ },
+ [setOperator],
+ );
+ const removeStyle = useMemo(() => ({ color: '#bfbfbf' }), []);
+ return (
+ // 添加 nc-filter-item 类名是为了帮助编写测试时更容易选中该元素
+
+
+
+
+ {!operator?.noValue ? (
+
+ ) : null}
+ {!props.disabled && (
+
+
+
+ )}
+
+
{JSON.stringify(field.value, null, 2)}
+ {children}
+
+ );
+});
+
+const useFilterActionProps = (): FilterActionProps => {
+ const field = useField();
+ const { run } = useRequest({ url: 'test' }, { manual: true });
+
+ return {
+ onSubmit: async (values) => {
+ console.log('onSubmit', values);
+
+ // request api
+ run(values);
+
+ field.setValue(values);
+ },
+ onReset: (values) => {
+ console.log('onReset', values);
+ },
+ };
+};
+
+const schema = {
+ type: 'object',
+ 'x-decorator': 'FormV2',
+ 'x-component': 'ShowFormData',
+ properties: {
+ rules: {
+ type: 'array',
+ default: [{}],
+ 'x-component': 'ArrayCollapse',
+ 'x-decorator': 'FormItem',
+ 'x-component-props': {
+ accordion: true,
+ },
+ items: {
+ type: 'object',
+ 'x-component': 'ArrayCollapse.CollapsePanel',
+ 'x-component-props': {
+ // extra: 'linkage rule',
+ },
+ properties: {
+ layout: {
+ type: 'void',
+ 'x-component': 'FormLayout',
+ 'x-component-props': {
+ labelStyle: {
+ marginTop: '6px',
+ },
+ labelCol: 8,
+ wrapperCol: 16,
+ },
+ properties: {
+ conditions: {
+ 'x-component': 'h4',
+ 'x-content': '{{ t("Condition") }}',
+ },
+ condition: {
+ 'x-component': 'LinkageFilter',
+ 'x-use-component-props': () => {
+ return {
+ // options,
+ className: css`
+ position: relative;
+ width: 100%;
+ margin-left: 10px;
+ `,
+ };
+ },
+ },
+ },
+ },
+ remove: {
+ type: 'void',
+ 'x-component': 'ArrayCollapse.Remove',
+ },
+ moveUp: {
+ type: 'void',
+ 'x-component': 'ArrayCollapse.MoveUp',
+ },
+ moveDown: {
+ type: 'void',
+ 'x-component': 'ArrayCollapse.MoveDown',
+ },
+ copy: {
+ type: 'void',
+ 'x-component': 'ArrayCollapse.Copy',
+ },
+ },
+ },
+ properties: {
+ add: {
+ type: 'void',
+ title: '{{ t("Add linkage rule") }}',
+ 'x-component': 'ArrayCollapse.Addition',
+ 'x-reactions': {
+ dependencies: ['rules'],
+ fulfill: {
+ state: {
+ // disabled: '{{$deps[0].length >= 3}}',
+ },
+ },
+ },
+ },
+ },
+ },
+ },
+};
+
+const Demo = () => {
+ return (
+
+ );
+};
+
+class DemoPlugin extends Plugin {
+ async load() {
+ this.app.router.add('root', { path: '/', Component: Demo });
+ }
+}
+
+const app = mockApp({
+ plugins: [DemoPlugin],
+ apis: {
+ test: { data: { data: 'ok' } },
+ },
+});
+
+export default app.getRootComponent();
diff --git a/packages/core/client/src/schema-component/antd/linkageFilter/demos/new-demos/with-data-block.tsx b/packages/core/client/src/schema-component/antd/linkageFilter/demos/new-demos/with-data-block.tsx
new file mode 100644
index 0000000000..887768e243
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/linkageFilter/demos/new-demos/with-data-block.tsx
@@ -0,0 +1,81 @@
+import React from 'react';
+import { useField, observer } from '@formily/react';
+import { FilterActionProps, ISchema, useDataBlockRequest } from '@nocobase/client';
+import { mockApp } from '@nocobase/client/demo-utils';
+import { SchemaComponent, Plugin } from '@nocobase/client';
+
+const ShowFilterData = observer(({ children }) => {
+ const field = useField();
+ return (
+ <>
+ {JSON.stringify(field.value, null, 2)}
+ {children}
+
+ );
+});
+
+const useFilterActionProps = (): FilterActionProps => {
+ const field = useField();
+ const { run } = useDataBlockRequest(); // replace `useRequest`
+
+ return {
+ onSubmit: async (values) => {
+ console.log('onSubmit', values);
+
+ // request api
+ run(values);
+
+ field.setValue(values);
+ },
+ onReset: (values) => {
+ console.log('onReset', values);
+ },
+ };
+};
+
+const schema: ISchema = {
+ type: 'void',
+ name: 'root',
+ 'x-decorator': 'DataBlockProvider',
+ 'x-decorator-props': {
+ collection: 'users',
+ action: 'list',
+ },
+ properties: {
+ test: {
+ name: 'filter',
+ type: 'object',
+ title: 'Filter',
+ 'x-decorator': 'ShowFilterData',
+ 'x-component': 'Filter.Action',
+ 'x-use-component-props': 'useFilterActionProps',
+ },
+ },
+};
+
+const Demo = () => {
+ return (
+
+ );
+};
+
+class DemoPlugin extends Plugin {
+ async load() {
+ this.app.router.add('root', { path: '/', Component: Demo });
+ }
+}
+
+const app = mockApp({
+ plugins: [DemoPlugin],
+ apis: {
+ test: { data: { data: 'ok' } },
+ },
+});
+
+export default app.getRootComponent();
diff --git a/packages/core/client/src/schema-component/antd/linkageFilter/index.en-US.md b/packages/core/client/src/schema-component/antd/linkageFilter/index.en-US.md
new file mode 100644
index 0000000000..43875323ce
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/linkageFilter/index.en-US.md
@@ -0,0 +1,17 @@
+# LinkageFilter
+
+A component used for filtering data, commonly used to filter data in blocks.
+
+```ts
+type FilterActionProps = ActionProps & {
+ options?: any[];
+ form?: Form;
+ onSubmit?: (values: T) => void;
+ onReset?: (values: T) => void;
+}
+```
+
+### Basic Usage
+
+
+