diff --git a/packages/client/src/collection-manager/hooks/useCollectionField.ts b/packages/client/src/collection-manager/hooks/useCollectionField.ts
index 10771ee27..4d7c51f4d 100644
--- a/packages/client/src/collection-manager/hooks/useCollectionField.ts
+++ b/packages/client/src/collection-manager/hooks/useCollectionField.ts
@@ -16,6 +16,7 @@ export const useCollectionField = () => {
}
const resourceName = `${ctx?.collectionName || collection?.name}.${ctx.name}`;
const resource = api?.resource(resourceName, record[ctx.sourceKey]);
+ debugger;
return {
...ctx,
uiSchema: compile(ctx.uiSchema),
diff --git a/packages/client/src/schema-component/antd/calendar/Filter.tsx b/packages/client/src/schema-component/antd/calendar/Filter.tsx
index 437868425..8299b2258 100644
--- a/packages/client/src/schema-component/antd/calendar/Filter.tsx
+++ b/packages/client/src/schema-component/antd/calendar/Filter.tsx
@@ -1,14 +1,12 @@
-import { FormButtonGroup, Submit } from '@formily/antd';
import { createForm } from '@formily/core';
-import { FormProvider, observer, useFieldSchema } from '@formily/react';
-import { Button, Popover } from 'antd';
+import { observer, useFieldSchema } from '@formily/react';
import flatten from 'flat';
import React, { useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { SchemaComponent } from '../../core';
import { useDesignable } from '../../hooks';
import { useCompile } from '../../hooks/useCompile';
-import { IconPicker } from '../icon-picker';
+import { FilterContext } from '../filter/context';
export const Filter = observer((props: any) => {
const { t } = useTranslation();
@@ -25,45 +23,19 @@ export const Filter = observer((props: any) => {
properties[p.name] = p;
});
return (
-
-
-
-
- {
- const { filter } = form.values;
- console.log('Table.Filter', form.values);
- setVisible(false);
- }}
- >
- {t('Submit')}
-
-
-
-
- }
- >
- }>
- {count > 0 ? t('{{count}} filter items', { count }) : compile(filedSchema.title)}
-
-
-
+
+
+
);
});
diff --git a/packages/client/src/schema-component/antd/calendar/demos/demo3.tsx b/packages/client/src/schema-component/antd/calendar/demos/demo3.tsx
index 22389a530..1b949d102 100644
--- a/packages/client/src/schema-component/antd/calendar/demos/demo3.tsx
+++ b/packages/client/src/schema-component/antd/calendar/demos/demo3.tsx
@@ -7,6 +7,7 @@ import { uid } from '@formily/shared';
import {
AntdSchemaComponentProvider,
CollectionField,
+ CollectionManagerProvider,
CollectionProvider,
SchemaComponent,
SchemaComponentProvider,
@@ -56,6 +57,13 @@ const schema = {
'x-action': 'calendar:viewSelect',
'x-align': 'right',
},
+ filter: {
+ type: 'void',
+ title: '过滤',
+ 'x-align': 'right',
+ 'x-component': 'Calendar.Filter',
+ 'x-action': 'calendar:filter',
+ },
},
},
event: {
@@ -98,9 +106,9 @@ const collection = {
type: 'string',
name: 'id',
interface: 'input',
+ title: 'id',
uiSchema: {
type: 'string',
- title: 'id',
'x-component': 'Input',
},
},
@@ -108,9 +116,9 @@ const collection = {
type: 'string',
name: 'title',
interface: 'input',
+ title: '标题',
uiSchema: {
type: 'string',
- title: '标题',
'x-component': 'Input',
},
},
@@ -118,9 +126,9 @@ const collection = {
type: 'string',
name: 'start',
interface: 'datetime',
+ title: '开始时间',
uiSchema: {
type: 'string',
- title: '开始时间',
'x-component': 'DatePicker',
'x-component-props': {
dateFormat: 'YYYY-MM-DD',
@@ -131,9 +139,9 @@ const collection = {
type: 'string',
name: 'end',
interface: 'datetime',
+ title: '结束时间',
uiSchema: {
type: 'string',
- title: '结束时间',
'x-component': 'DatePicker',
'x-component-props': {
dateFormat: 'YYYY-MM-DD',
@@ -144,14 +152,16 @@ const collection = {
};
export default () => {
return (
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
);
};
diff --git a/packages/client/src/schema-component/antd/calendar/utils.ts b/packages/client/src/schema-component/antd/calendar/utils.ts
index 255eb53d1..46887cf6d 100644
--- a/packages/client/src/schema-component/antd/calendar/utils.ts
+++ b/packages/client/src/schema-component/antd/calendar/utils.ts
@@ -2,33 +2,33 @@ import { get } from 'lodash';
import { i18n } from '../../../i18n';
export const fieldsToFilterColumns = (fields: any[], options: any = {}) => {
- // const { fieldNames = [] } = options;
- // const properties = {};
- // fields.forEach((field, index) => {
- // if (fieldNames?.length && !fieldNames.includes(field.name)) {
- // return;
- // }
- // const fieldOption = interfaces.get(field.interface);
- // if (!fieldOption?.operations) {
- // return;
- // }
- // properties[`column${index}`] = {
- // type: 'void',
- // title: field?.uiSchema?.title,
- // 'x-component': 'Filter.Column',
- // 'x-component-props': {
- // operations: fieldOption.operations,
+ // const { fieldNames = [] } = options;
+ // const properties = {};
+ // fields.forEach((field, index) => {
+ // if (fieldNames?.length && !fieldNames.includes(field.name)) {
+ // return;
+ // }
+ // const fieldOption = interfaces.get(field.interface);
+ // if (!fieldOption?.operations) {
+ // return;
+ // }
+ // properties[`column${index}`] = {
+ // type: 'void',
+ // title: field?.uiSchema?.title,
+ // 'x-component': 'Filter.Column',
+ // 'x-component-props': {
+ // operations: fieldOption.operations,
+ // },
+ // properties: {
+ // [field.name]: {
+ // ...field.uiSchema,
+ // 'x-decorator': 'FormilyFormItem',
+ // title: null,
// },
- // properties: {
- // [field.name]: {
- // ...field.uiSchema,
- // 'x-decorator': 'FormilyFormItem',
- // title: null,
- // },
- // },
- // };
- // });
- // return properties;
+ // },
+ // };
+ // });
+ // return properties;
};
export const toEvents = (data: any[], fieldNames: any) => {
diff --git a/packages/client/src/schema-component/antd/filter/Filter.Action.tsx b/packages/client/src/schema-component/antd/filter/Filter.Action.tsx
new file mode 100644
index 000000000..4eedfc1c1
--- /dev/null
+++ b/packages/client/src/schema-component/antd/filter/Filter.Action.tsx
@@ -0,0 +1,86 @@
+import { FilterOutlined } from '@ant-design/icons';
+import { FormButtonGroup, Submit } from '@formily/antd';
+import { createForm } from '@formily/core';
+import { FieldContext, FormContext, observer, useFieldSchema } from '@formily/react';
+import { uid } from '@formily/shared';
+import { Button, Popover } from 'antd';
+import flatten from 'flat';
+import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useCollection, useCollectionManager } from '../../../collection-manager';
+import { SchemaComponent } from '../../core';
+import { useDesignable } from '../../hooks';
+import { useCompile } from '../../hooks/useCompile';
+import { useFilterContext } from './hooks';
+
+export const FilterAction = observer((props: any) => {
+ const { t } = useTranslation();
+ const compile = useCompile();
+ const { DesignableBar } = useDesignable();
+ const filedSchema = useFieldSchema();
+ const form = useMemo(() => createForm(), []);
+ const { visible, setVisible } = useFilterContext();
+ const obj = flatten(form.values.filter || {});
+ const count = Object.values(obj).filter((i) => (Array.isArray(i) ? i.length : i)).length;
+ const { fields } = useCollection();
+ const { getInterface } = useCollectionManager();
+ const properties = {};
+ fields?.forEach((field) => {
+ const { operators } = getInterface(field.interface);
+ properties[uid()] = {
+ type: 'void',
+ title: field?.uiSchema?.title ?? field.title,
+ 'x-component': 'Filter.Column',
+ 'x-component-props': {
+ operations: [...operators],
+ },
+ properties: {
+ [field.name ?? uid()]: { ...field?.uiSchema },
+ },
+ };
+ });
+ const schema = {
+ type: 'void',
+ properties: {
+ filter: {
+ type: 'array',
+ 'x-component': 'Filter',
+ properties,
+ },
+ },
+ };
+ return (
+
+
+
+
+
+ {
+ const { filter } = form.values;
+ console.log('Table.Filter====', form.values);
+ debugger;
+ setVisible(false);
+ }}
+ >
+ {t('Submit')}
+
+
+
+
+
+ }
+ >
+ }>
+ {count > 0 ? t('{{count}} filter items', { count }) : compile(filedSchema.title)}
+
+
+
+ );
+});
diff --git a/packages/client/src/schema-component/antd/filter/Filter.DynamicValue.tsx b/packages/client/src/schema-component/antd/filter/Filter.DynamicValue.tsx
new file mode 100644
index 000000000..09b1e1673
--- /dev/null
+++ b/packages/client/src/schema-component/antd/filter/Filter.DynamicValue.tsx
@@ -0,0 +1,61 @@
+import { createForm, onFieldValueChange } from '@formily/core';
+import type { ISchema, Schema } from '@formily/react';
+import { connect } from '@formily/react';
+import deepmerge from 'deepmerge';
+import React, { useMemo } from 'react';
+import { SchemaComponent } from '../../core';
+
+interface DynamicValueProps {
+ value?: any;
+ onChange?: any;
+ schema?: Schema;
+ operation?: any;
+}
+
+export const FilterDynamicValue = connect((props: DynamicValueProps) => {
+ const { onChange, value, operation } = props;
+ const fieldName = Object.keys(props?.schema?.properties || {}).shift() ?? 'value';
+ const fieldSchema = Object.values(props?.schema?.properties || {}).shift();
+ const form = useMemo(
+ () =>
+ createForm({
+ initialValues: {
+ [fieldName]: value,
+ },
+ effects(form) {
+ onFieldValueChange(fieldName, (field) => {
+ onChange(field.value);
+ });
+ },
+ }),
+ [],
+ );
+ const extra: ISchema = deepmerge(
+ {
+ required: false,
+ 'x-read-pretty': false,
+ name: fieldName,
+ default: value,
+ 'x-decorator': 'FormilyFormItem',
+ 'x-decorator-props': {
+ asterisk: true,
+ feedbackLayout: 'none',
+ },
+ 'x-component-props': {
+ style: {
+ minWidth: '150px',
+ },
+ },
+ },
+ operation?.schema || {},
+ );
+ const schema = {
+ type: 'object',
+ properties: {
+ [fieldName]: deepmerge(fieldSchema, extra, {
+ arrayMerge: (target, source) => source,
+ }) as any,
+ },
+ };
+ return ;
+});
diff --git a/packages/client/src/schema-component/antd/filter/Filter.tsx b/packages/client/src/schema-component/antd/filter/Filter.tsx
index 00644b5b5..fd5a577e5 100644
--- a/packages/client/src/schema-component/antd/filter/Filter.tsx
+++ b/packages/client/src/schema-component/antd/filter/Filter.tsx
@@ -1,14 +1,15 @@
import { LoadingOutlined } from '@ant-design/icons';
-import { createForm, onFieldValueChange } from '@formily/core';
-import { connect, FieldContext, FormContext, ISchema, mapProps, mapReadPretty, Schema } from '@formily/react';
-import deepmerge from 'deepmerge';
-import React, { useMemo } from 'react';
-import { SchemaComponent } from '../../core';
+import { connect, mapProps, mapReadPretty } from '@formily/react';
+import React from 'react';
+import { FilterAction } from './Filter.Action';
+import { FilterDynamicValue } from './Filter.DynamicValue';
import { FilterGroup } from './FilterGroup';
import './style.less';
export const Filter: any = connect(
- (props) => ,
+ (props) => {
+ return ;
+ },
mapProps((props, field) => {
return {
...props,
@@ -20,65 +21,7 @@ export const Filter: any = connect(
}),
);
-interface DynamicValueProps {
- value?: any;
- onChange?: any;
- schema?: Schema;
- operation?: any;
-}
-
-Filter.DynamicValue = connect((props: DynamicValueProps) => {
- const { onChange, value, operation } = props;
- const fieldName = Object.keys(props?.schema?.properties || {}).shift() ?? 'value';
- const fieldSchema = Object.values(props?.schema?.properties || {}).shift();
- const form = useMemo(
- () =>
- createForm({
- initialValues: {
- [fieldName]: value,
- },
- effects(form) {
- onFieldValueChange(fieldName, (field) => {
- onChange(field.value);
- });
- },
- }),
- [],
- );
- const extra: ISchema = deepmerge(
- {
- required: false,
- 'x-read-pretty': false,
- name: fieldName,
- default: value,
- 'x-decorator': 'FormilyFormItem',
- 'x-decorator-props': {
- asterisk: true,
- feedbackLayout: 'none',
- },
- 'x-component-props': {
- style: {
- minWidth: '150px',
- },
- },
- },
- operation?.schema || {},
- );
- const schema = {
- type: 'object',
- properties: {
- [fieldName]: deepmerge(fieldSchema, extra, {
- arrayMerge: (target, source) => source,
- }) as any,
- },
- };
- return (
-
-
-
-
-
- );
-});
+Filter.DynamicValue = FilterDynamicValue;
+Filter.Action = FilterAction;
export default Filter;
diff --git a/packages/client/src/schema-component/antd/filter/context.ts b/packages/client/src/schema-component/antd/filter/context.ts
new file mode 100644
index 000000000..25ac6b27a
--- /dev/null
+++ b/packages/client/src/schema-component/antd/filter/context.ts
@@ -0,0 +1,8 @@
+import { createContext } from 'react';
+
+export const FilterContext = createContext({});
+
+export interface FilterContextProps {
+ visible?: boolean;
+ setVisible?: (v: boolean) => void;
+}
diff --git a/packages/client/src/schema-component/antd/filter/hooks.ts b/packages/client/src/schema-component/antd/filter/hooks.ts
new file mode 100644
index 000000000..3f7798d17
--- /dev/null
+++ b/packages/client/src/schema-component/antd/filter/hooks.ts
@@ -0,0 +1,9 @@
+import { useContext } from 'react';
+import { FilterContext } from './context';
+
+export const useFilterContext = () => {
+ const ctx = useContext(FilterContext);
+ return {
+ ...ctx,
+ };
+};
diff --git a/packages/client/src/schema-component/antd/icon-picker/IconPicker.tsx b/packages/client/src/schema-component/antd/icon-picker/IconPicker.tsx
index 8dcd882bd..bf1935b95 100644
--- a/packages/client/src/schema-component/antd/icon-picker/IconPicker.tsx
+++ b/packages/client/src/schema-component/antd/icon-picker/IconPicker.tsx
@@ -65,6 +65,7 @@ export const IconPicker = connect(
mapProps((props, field) => {
return {
...props,
+ value: props.type,
suffix: {field?.['loading'] || field?.['validating'] ? : props.suffix},
};
}),