feat(client): improve linkTo field Initializer

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

@@ -39,12 +39,12 @@ export const useCollectionFilterOptions = (collectionName: string) => {
       operators: fieldInterface.operators || [],
     };
     return option;
-  }
+  };
-  fields.forEach(field => {
+  fields.forEach((field) => {
     options.push(field2option(field));
   });
   return options;
-}
+};
 
 export const useFilterDataSource = (options) => {
   const { name } = useCollection();
@@ -56,17 +56,20 @@ export const useFilterDataSource = (options) => {
       }),
     options,
   );
-}
+};
 
 export const useFilterAction = () => {
+  const { run, params } = useResourceActionContext();
   const form = useForm();
   const ctx = useActionContext();
+  const [first, ...others] = params;
   return {
     async run() {
+      run({ ...first, filter: form.values.filter }, ...others);
       ctx.setVisible(false);
     },
   };
-}
+};
 
 export const useCreateAction = () => {
   const form = useForm();

packages/client/src/collection-manager/interfaces/chinaRegion.ts

@@ -14,6 +14,7 @@ export const chinaRegion: IField = {
     type: 'belongsToMany',
     target: 'chinaRegions',
     targetKey: 'code',
+    sortBy: 'level',
     // name,
     uiSchema: {
       type: 'array',

packages/client/src/collection-manager/interfaces/linkTo.ts

@@ -13,10 +13,16 @@ export const linkTo: IField = {
     type: 'belongsToMany',
     // name,
     uiSchema: {
-      type: 'array',
       // title,
       'x-component': 'RecordPicker',
-      'x-component-props': {},
+      'x-component-props': {
+        // mode: 'tags',
+        multiple: true,
+        fieldNames: {
+          label: 'id',
+          value: 'id',
+        },
+      },
     },
   },
   initialize: (values: any) => {

packages/client/src/locale/zh_CN.json

@@ -24,6 +24,7 @@
   "Icon": "图标",
   "Group": "分组",
   "Link": "链接",
+  "Save conditions": "保存筛选条件",
   "Edit menu item": "编辑菜单项",
   "Move to": "移动到",
   "Insert left": "在左边插入",

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

@@ -7,9 +7,12 @@ import { useDesignable } from '../../hooks';
 
 export const SaveDefaultValue = (props) => {
   const { t } = useTranslation();
-  const { dn, refresh } = useDesignable();
+  const { designable, dn, refresh } = useDesignable();
   const fieldSchema = useFieldSchema();
   const form = useForm();
+  if (!designable) {
+    return null;
+  }
   return (
     <Button
       className={css`

packages/client/src/schema-component/antd/record-picker/RecordPicker.tsx

@@ -19,23 +19,26 @@ import { useTranslation } from 'react-i18next';
 import { useAttach } from '../../hooks/useAttach';
 import { ActionContext, useActionContext } from '../action';
 
+const findRowSelection = (fieldSchema) => {
+  return fieldSchema.reduceProperties((buf, s) => {
+    if (s['x-component'] === 'Table.RowSelection') {
+      return s;
+    }
+    const r = findRowSelection(s);
+    if (r) {
+      return r;
+    }
+    return buf;
+  }, null);
+};
+
 const InputRecordPicker: React.FC<any> = (props) => {
-  const { onChange } = props;
+  const { multiple, onChange } = props;
   const fieldNames = { label: 'label', value: 'value', ...props.fieldNames };
   const [visible, setVisible] = useState(false);
   const fieldSchema = useFieldSchema();
   const field = useField<Field>();
-  const s = fieldSchema.reduceProperties((buf, s) => {
+  const s = findRowSelection(fieldSchema);
-    if (s['x-component'] === 'RecordPicker.Options') {
-      return s.reduceProperties((buf, s) => {
-        if (s['x-component'] === 'Table.RowSelection') {
-          return s;
-        }
-        return buf;
-      }, null);
-    }
-    return buf;
-  }, null);
   const [value, setValue] = useState(field.value);
   const form = useMemo(
     () =>
@@ -76,7 +79,7 @@ const InputRecordPicker: React.FC<any> = (props) => {
     <div>
       <Select
         size={props.size}
-        mode={props.mode}
+        mode={multiple ? 'multiple' : props.mode}
         fieldNames={fieldNames}
         onClick={() => {
           setVisible(true);

packages/client/src/schema-component/core/SchemaComponentProvider.tsx

@@ -17,7 +17,6 @@ Schema.silent(true);
 const Registry = {
   silent: true,
   compile(expression: string, scope = {}) {
-    console.log('expression', expression);
     if (Registry.silent) {
       try {
         return new Function('$root', `with($root) { return (${expression}); }`)(scope);

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

@@ -23,7 +23,9 @@ const schema = {
       properties: {
         filter: {
           type: 'object',
-          default: {},
+          default: {
+            $and: [{}],
+          },
           'x-component': 'Filter',
           'x-component-props': {
             useDataSource: '{{cm.useFilterDataSource}}',

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

@@ -0,0 +1,205 @@
+import { Switch } from 'antd';
+import React from 'react';
+import { SchemaInitializer } from '../../SchemaInitializer';
+import { useCurrentSchema } from '../utils';
+
+export const LinkToFieldInitializer = (props) => {
+  const { item, insert } = props;
+  const { exists, remove } = useCurrentSchema(
+    item.schema['x-collection-field'],
+    'x-collection-field',
+    item.find,
+    item.remove,
+  );
+  return (
+    <SchemaInitializer.Item
+      onClick={() => {
+        console.log(item, exists);
+        if (exists) {
+          return remove();
+        }
+        insert({
+          ...item.schema,
+          default: [
+            { id: 1, name: 'name1' },
+            { id: 2, name: 'name2' },
+          ],
+          // 'x-decorator': 'FormItem',
+          'x-component': 'CollectionField',
+          'x-component-props': {
+            mode: 'tags',
+            fieldNames: {
+              label: 'name',
+              value: 'id',
+            },
+          },
+          properties: {
+            options: {
+              'x-component': 'RecordPicker.Options',
+              type: 'void',
+              title: 'Drawer Title',
+              properties: {
+                block: {
+                  type: 'void',
+                  'x-collection': 'collections',
+                  'x-decorator': 'ResourceActionProvider',
+                  'x-decorator-props': {
+                    collection: item.field.target,
+                    request: {
+                      resource: item.field.target,
+                      action: 'list',
+                      params: {
+                        pageSize: 20,
+                        filter: {},
+                        // sort: ['sort'],
+                        appends: [],
+                      },
+                    },
+                  },
+                  'x-designer': 'Table.Void.Designer',
+                  'x-component': 'CardItem',
+                  properties: {
+                    actions: {
+                      type: 'void',
+                      'x-initializer': 'TableActionInitializers',
+                      'x-component': 'ActionBar',
+                      'x-component-props': {
+                        style: {
+                          marginBottom: 16,
+                        },
+                      },
+                      properties: {},
+                    },
+                    table: {
+                      // type: 'void',
+                      'x-component': 'Table.RowSelection',
+                      'x-component-props': {
+                        rowKey: 'id',
+                        objectValue: true,
+                        rowSelection: {
+                          type: 'checkbox',
+                        },
+                        useDataSource: '{{ cm.useDataSourceFromRAC }}',
+                      },
+                      'x-initializer': 'TableColumnInitializers',
+                      properties: {
+                        actions: {
+                          type: 'void',
+                          title: '{{ t("Actions") }}',
+                          'x-decorator': 'Table.Column.ActionBar',
+                          'x-component': 'Table.Column',
+                          'x-designer': 'Table.RowActionDesigner',
+                          'x-initializer': 'TableRecordActionInitializers',
+                          properties: {
+                            actions: {
+                              type: 'void',
+                              'x-decorator': 'DndContext',
+                              'x-component': 'Space',
+                              'x-component-props': {
+                                split: '|',
+                              },
+                              properties: {},
+                            },
+                          },
+                        },
+                      },
+                    },
+                  },
+                },
+                // input: {
+                //   type: 'array',
+                //   title: `编辑模式`,
+                //   'x-component': 'Table.RowSelection',
+                //   'x-component-props': {
+                //     rowKey: 'id',
+                //     objectValue: true,
+                //     rowSelection: {
+                //       type: 'checkbox',
+                //     },
+                //     dataSource: [
+                //       { id: 1, name: 'Name1' },
+                //       { id: 2, name: 'Name2' },
+                //       { id: 3, name: 'Name3' },
+                //     ],
+                //   },
+                //   properties: {
+                //     column1: {
+                //       type: 'void',
+                //       title: 'Name',
+                //       'x-component': 'Table.Column',
+                //       properties: {
+                //         name: {
+                //           type: 'string',
+                //           'x-component': 'Input',
+                //           'x-read-pretty': true,
+                //         },
+                //       },
+                //     },
+                //   },
+                // },
+              },
+            },
+            item: {
+              'x-component': 'RecordPicker.SelectedItem',
+              properties: {
+                drawer1: {
+                  'x-component': 'Action.Drawer',
+                  type: 'void',
+                  title: 'Drawer Title',
+                  properties: {
+                    details: {
+                      type: 'void',
+                      'x-collection': 'collections',
+                      'x-decorator': 'ResourceActionProvider',
+                      'x-decorator-props': {
+                        collection: item.field.target,
+                        request: {
+                          resource: item.field.target,
+                          action: 'get',
+                          params: {},
+                        },
+                      },
+                      'x-designer': 'Form.Designer',
+                      'x-component': 'CardItem',
+                      properties: {
+                        form: {
+                          type: 'void',
+                          'x-decorator': 'Form',
+                          'x-decorator-props': {},
+                          properties: {
+                            actions: {
+                              type: 'void',
+                              'x-initializer': 'FormActionInitializers',
+                              'x-component': 'ActionBar',
+                              'x-component-props': {
+                                layout: 'one-column',
+                                style: {
+                                  marginBottom: 16,
+                                },
+                              },
+                              properties: {},
+                            },
+                            grid: {
+                              type: 'void',
+                              'x-component': 'Grid',
+                              'x-initializer': 'GridFormItemInitializers',
+                              properties: {},
+                            },
+                          },
+                        },
+                      },
+                    },
+                  },
+                },
+              },
+            },
+          },
+        });
+      }}
+    >
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+        {item.title} <Switch style={{ marginLeft: 20 }} size={'small'} checked={exists} />
+      </div>
+    </SchemaInitializer.Item>
+  );
+};

packages/client/src/schema-initializer/Initializers/Items/index.ts

@@ -5,6 +5,7 @@ export * from './CollectionFieldInitializer';
 export * from './FilterActionInitializer';
 export * from './FormBlockInitializer';
 export * from './GeneralInitializer';
+export * from './LinkToCollectionFieldInitializer';
 export * from './MarkdownBlockInitializer';
 export * from './SubTableFieldInitializer';
 export * from './TableBlockInitializer';

packages/client/src/schema-initializer/Initializers/utils.ts

@@ -58,29 +58,58 @@ const findTableColumn = (schema: Schema, key: string, action: string, deepth: nu
 
 export const useTableColumnInitializerFields = () => {
   const { name, fields } = useCollection();
-  return (
+  return fields
-    fields
+    .filter((field) => field?.interface !== 'subTable')
-      // .filter((field) => field?.uiSchema?.title)
+    .map((field) => {
-      .map((field) => {
+      if (field.interface === 'linkTo') {
         return {
+          field,
           type: 'item',
           title: field?.uiSchema?.title || field.name,
+          find: findTableColumn,
+          remove: removeTableColumn,
+          component: 'LinkToFieldInitializer',
           schema: {
             name: field.name,
             'x-collection-field': `${name}.${field.name}`,
             'x-component': 'CollectionField',
           },
-          component: 'CollectionFieldInitializer',
-          find: findTableColumn,
-          remove: removeTableColumn,
         } as SchemaInitializerItemOptions;
-      })
+      }
-  );
+      return {
+        type: 'item',
+        title: field?.uiSchema?.title || field.name,
+        component: 'CollectionFieldInitializer',
+        find: findTableColumn,
+        remove: removeTableColumn,
+        schema: {
+          name: field.name,
+          'x-collection-field': `${name}.${field.name}`,
+          'x-component': 'CollectionField',
+        },
+      } as SchemaInitializerItemOptions;
+    });
 };
 
 export const useFormItemInitializerFields = () => {
   const { name, fields } = useCollection();
   return fields?.map((field) => {
+    if (field.interface === 'linkTo') {
+      return {
+        type: 'item',
+        title: field?.uiSchema?.title || field.name,
+        component: 'LinkToFieldInitializer',
+        remove: removeGridFormItem,
+        field,
+        schema: {
+          name: field.name,
+          'x-designer': 'FormItem.Designer',
+          'x-component': 'CollectionField',
+          'x-decorator': 'FormItem',
+          'x-collection-field': `${name}.${field.name}`,
+        },
+      } as SchemaInitializerItemOptions;
+    }
     if (field.interface === 'subTable') {
       return {
         type: 'item',