feat: improve filter action initializer

packages/client/src/collection-manager/action-hooks.ts

@@ -1,5 +1,5 @@
 import { useForm } from '@formily/react';
-import { useCollectionManager } from '.';
+import { useCollection, useCollectionManager } from '.';
 import { useRequest } from '../api-client';
 import { useRecord } from '../record-provider';
 import { useActionContext } from '../schema-component';
@@ -16,6 +16,58 @@ export const useCancelAction = () => {
   };
 };
 
+export const useCancelFilterAction = () => {
+  const form = useForm();
+  const ctx = useActionContext();
+  return {
+    async run() {
+      ctx.setVisible(false);
+    },
+  };
+};
+
+export const useCollectionFilterOptions = (collectionName: string) => {
+  const { getCollection, getInterface } = useCollectionManager();
+  const options = [];
+  const collection = getCollection(collectionName);
+  const fields = collection?.fields || [];
+  const field2option = (field) => {
+    const fieldInterface = getInterface(field.interface);
+    const option = {
+      name: field.name,
+      title: field?.uiSchema?.title || field.name,
+      operators: fieldInterface.operators || [],
+    };
+    return option;
+  }
+  fields.forEach(field => {
+    options.push(field2option(field));
+  });
+  return options;
+}
+
+export const useFilterDataSource = (options) => {
+  const { name } = useCollection();
+  const data = useCollectionFilterOptions(name);
+  return useRequest(
+    () =>
+      Promise.resolve({
+        data,
+      }),
+    options,
+  );
+}
+
+export const useFilterAction = () => {
+  const form = useForm();
+  const ctx = useActionContext();
+  return {
+    async run() {
+      ctx.setVisible(false);
+    },
+  };
+}
+
 export const useCreateAction = () => {
   const form = useForm();
   const ctx = useActionContext();

packages/client/src/schema-component/antd/cascader/Cascader.tsx

@@ -41,7 +41,6 @@ export const Cascader = connect(
     });
     // 兼容值为 object[] 的情况
     const toValue = () => {
-      return ['11'];
       return toArr(value).map((item) => {
         if (typeof item === 'object') {
           return item[fieldNames.value];

packages/client/src/schema-component/antd/filter/Filter.tsx

@@ -1,5 +1,5 @@
 import { ObjectField as ObjectFieldModel } from '@formily/core';
-import { observer, useField } from '@formily/react';
+import { observer, useField, useFieldSchema } from '@formily/react';
 import React from 'react';
 import { useRequest } from '../../../api-client';
 import { FilterContext } from './context';
@@ -14,6 +14,7 @@ const useDef = (options) => {
 export const Filter: any = observer((props: any) => {
   const { useDataSource = useDef, dynamicComponent } = props;
   const field = useField<ObjectFieldModel>();
+  const fieldSchema = useFieldSchema();
   useDataSource({
     onSuccess(data) {
       console.log('onSuccess', data?.data);
@@ -22,7 +23,7 @@ export const Filter: any = observer((props: any) => {
   });
   return (
     <div>
-      <FilterContext.Provider value={{ dynamicComponent, options: field.dataSource || [] }}>
+      <FilterContext.Provider value={{ field, fieldSchema, dynamicComponent, options: field.dataSource || [] }}>
         <FilterGroup {...props} />
       </FilterContext.Provider>
       <pre>{JSON.stringify(field.value, null, 2)}</pre>

packages/client/src/schema-component/antd/filter/FilterItem.tsx

@@ -2,6 +2,7 @@ import { CloseCircleOutlined } from '@ant-design/icons';
 import { observer, useField } from '@formily/react';
 import { Cascader, Select, Space } from 'antd';
 import React, { useContext } from 'react';
+import { useCompile } from '../..';
 import { RemoveConditionContext } from './context';
 import { DynamicComponent } from './DynamicComponent';
 import { useValues } from './useValues';
@@ -10,6 +11,7 @@ export const FilterItem = observer((props: any) => {
   const field = useField<any>();
   const remove = useContext(RemoveConditionContext);
   const { option, options, dataIndex, operator, setDataIndex, setOperator, value, setValue } = useValues();
+  const compile = useCompile();
   return (
     <div style={{ marginBottom: 8 }}>
       <Space>
@@ -25,14 +27,14 @@ export const FilterItem = observer((props: any) => {
           changeOnSelect={false}
           key={field.address.toString()}
           value={dataIndex}
-          options={options}
+          options={compile(options)}
           onChange={(value) => {
             setDataIndex(value);
           }}
         />
         <Select
           value={operator}
-          options={option?.operators}
+          options={compile(option?.operators)}
           onChange={(value) => {
             setOperator(value);
           }}

packages/client/src/schema-component/antd/filter/SaveDefaultValue.tsx

@@ -1,10 +1,15 @@
 import { css } from '@emotion/css';
+import { useFieldSchema, useForm } from '@formily/react';
 import { Button } from 'antd';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
+import { useDesignable } from '../../hooks';
 
 export const SaveDefaultValue = (props) => {
   const { t } = useTranslation();
+  const { dn, refresh } = useDesignable();
+  const fieldSchema = useFieldSchema();
+  const form = useForm();
   return (
     <Button
       className={css`
@@ -12,6 +17,22 @@ export const SaveDefaultValue = (props) => {
         color: rgb(241, 139, 98);
       `}
       type={'dashed'}
+      onClick={() => {
+        const filterSchema = fieldSchema?.parent?.parent?.parent?.properties?.filter;
+        if (!filterSchema) {
+          return;
+        }
+        const defaultValue = form.values.filter;
+        dn.emit('patch', {
+          schema: {
+            'x-uid': filterSchema['x-uid'],
+            default: defaultValue,
+          },
+        });
+        dn.refresh();
+        filterSchema.default = defaultValue;
+        console.log('filterSchema', defaultValue);
+      }}
     >
       {t('Save conditions')}
     </Button>

packages/client/src/schema-component/antd/filter/context.ts

@@ -1,4 +1,13 @@
+import { ObjectField } from '@formily/core';
+import { Schema } from '@formily/react';
 import { createContext } from 'react';
 
+export interface FilterContextProps {
+  field?: ObjectField;
+  fieldSchema?: Schema;
+  dynamicComponent?: any;
+  options?: any[];
+}
+
 export const RemoveConditionContext = createContext(null);
-export const FilterContext = createContext(null);
+export const FilterContext = createContext<FilterContextProps>(null);

packages/client/src/schema-component/antd/filter/useValues.ts

@@ -19,10 +19,10 @@ export const useValues = () => {
   }
   const values = flat(field.value || {}, { maxDepth });
   const value = Object.values<any>(values).shift();
-  const findOption = (dataIndex) => {
+  const findOption = (dataIndex = []) => {
     let items = options;
     let option;
-    dataIndex.forEach((name, index) => {
+    dataIndex?.forEach?.((name, index) => {
       const item = items.find((item) => item.name === name);
       if (item) {
         option = item;
@@ -44,6 +44,10 @@ export const useValues = () => {
     component: [Input, {}],
     // 当 dataIndex 变化，value 清空
     setDataIndex(di: string[]) {
+      if (!di) {
+        field.value = {};
+        return;
+      }
       const option = findOption(di);
       const op = option?.operators?.[0]?.value || '$eq';
       field.value = flat.unflatten({

packages/client/src/schema-initializer/Initializers/Items/FilterActionInitializer.tsx

@@ -1,9 +1,73 @@
 import { Switch } from 'antd';
-import flat from 'flat';
 import React from 'react';
 import { SchemaInitializer } from '../../SchemaInitializer';
 import { useCurrentSchema } from '../utils';
 
+const schema = {
+  'x-component': 'Action',
+  'x-component-props': {
+    popover: true,
+  },
+  type: 'void',
+  title: '{{t("Filter")}}',
+  properties: {
+    popover: {
+      type: 'void',
+      'x-decorator': 'Form',
+      'x-decorator-props': {},
+      'x-component': 'Action.Popover',
+      'x-component-props': {
+        trigger: 'click',
+        placement: 'bottomLeft',
+      },
+      properties: {
+        filter: {
+          type: 'object',
+          default: {},
+          'x-component': 'Filter',
+          'x-component-props': {
+            useDataSource: '{{cm.useFilterDataSource}}',
+          },
+        },
+        footer: {
+          type: 'void',
+          'x-component': 'Action.Popover.Footer',
+          properties: {
+            actions: {
+              type: 'void',
+              'x-component': 'ActionBar',
+              properties: {
+                saveDefault: {
+                  type: 'void',
+                  'x-component': 'Filter.SaveDefaultValue',
+                  'x-component-props': {},
+                },
+                cancel: {
+                  type: 'void',
+                  title: '{{t("Cancel")}}',
+                  'x-component': 'Action',
+                  'x-component-props': {
+                    useAction: '{{cm.useCancelFilterAction}}',
+                  },
+                },
+                submit: {
+                  type: 'void',
+                  title: '{{t("Submit")}}',
+                  'x-component': 'Action',
+                  'x-component-props': {
+                    type: 'primary',
+                    useAction: '{{cm.useFilterAction}}',
+                  },
+                },
+              },
+            },
+          },
+        },
+      },
+    },
+  },
+};
+
 export const FilterActionInitializer = (props) => {
   const { item, insert } = props;
   const { exists, remove } = useCurrentSchema(item.schema['x-action'], 'x-action', item.find);
@@ -15,22 +79,8 @@ export const FilterActionInitializer = (props) => {
           return remove();
         }
         insert({
+          ...schema,
           ...item.schema,
-          name: 'filter',
-          type: 'object',
-          default: flat.unflatten({
-            $or: [
-              { 'aa.$eq': 'b' },
-              { 'bb.field.$eq': ['aabb', 'aaa'] },
-              {
-                'bb.field': {
-                  $eq: ['aabb', 'aaa'],
-                },
-              },
-            ],
-          }),
-          'x-component': 'Filter',
-          'x-component-props': {},
         });
       }}
     >