feat: improve code

packages/client/src/collection-manager/ResourceActionProvider.tsx

@@ -18,10 +18,17 @@ const ResourceContext = createContext<any>(null);
 const CollectionResourceActionProvider = (props) => {
   let { collection, request, uid } = props;
   const api = useAPIClient();
+  const record = useRecord();
+  const actionName = request?.action;
+  const others = {};
+  if (actionName === 'get') {
+    others['filterByTk'] = record[collection.targetKey || collection.filterTargetKey || 'id'];
+  }
   const service = useRequest(
     {
       ...request,
       params: {
+        ...others,
         ...request?.params,
         appends: collection.fields.filter((field) => field.target).map((field) => field.name),
       },

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

@@ -1,4 +1,5 @@
 import { useForm } from '@formily/react';
+import { message } from 'antd';
 import { useCollection, useCollectionManager } from '.';
 import { useRequest } from '../api-client';
 import { useRecord } from '../record-provider';
@@ -121,6 +122,22 @@ export const useCreateActionWithoutRefresh = () => {
   };
 };
 
+export const useUpdateViewAction = () => {
+  const form = useForm();
+  const ctx = useActionContext();
+  // const { refresh } = useResourceActionContext();
+  const { resource, targetKey } = useResourceContext();
+  const { [targetKey]: filterByTk } = useRecord();
+  return {
+    async run() {
+      await form.submit();
+      await resource.update({ filterByTk, values: form.values });
+      // refresh();
+      message.success('保存成功');
+    },
+  };
+}
+
 export const useUpdateAction = () => {
   const form = useForm();
   const ctx = useActionContext();
@@ -172,6 +189,14 @@ export const useValuesFromRecord = (options) => {
   });
 };
 
+export const useValuesFromRA = (options) => {
+  const ctx = useResourceActionContext();
+  return useRequest(() => Promise.resolve(ctx.data), {
+    ...options,
+    refreshDeps: [ctx.data],
+  });
+};
+
 export const useCreateActionAndRefreshCM = () => {
   const { run } = useCreateAction();
   const { refreshCM } = useCollectionManager();

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

@@ -16,6 +16,8 @@ import { toArr } from '@formily/shared';
 import { Button, Drawer, Select, Space } from 'antd';
 import React, { createContext, useContext, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useCollectionField } from '../../../collection-manager';
+import { RecordProvider } from '../../../record-provider';
 import { useAttach } from '../../hooks/useAttach';
 import { ActionContext, useActionContext } from '../action';
 
@@ -191,12 +193,15 @@ RecordPicker.SelectedItem = () => {
   const fieldSchema = useFieldSchema();
   const [visible, setVisible] = useState(false);
   const fieldNames = ctx.field.componentProps.fieldNames;
+  const { target } = useCollectionField();
   return (
     <ActionContext.Provider value={{ visible, setVisible }}>
       <a style={{ cursor: 'pointer' }} onClick={() => setVisible(true)}>
         {ctx.record[fieldNames?.label || 'id']}
       </a>
+      <RecordProvider record={ctx.record}>
         <RecursionField onlyRenderProperties schema={fieldSchema}></RecursionField>
+      </RecordProvider>
     </ActionContext.Provider>
   );
 };

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

@@ -1,3 +1,4 @@
+import { ISchema } from '@formily/react';
 import { Switch } from 'antd';
 import React from 'react';
 import { SchemaInitializer } from '../../SchemaInitializer';
@@ -113,6 +114,10 @@ export const LinkToFieldInitializer = (props) => {
               'x-component': 'RecordPicker.SelectedItem',
               properties: {
                 drawer1: {
+                  'x-decorator': 'CollectionProvider',
+                  'x-decorator-props': {
+                    name: item.field.target,
+                  },
                   'x-component': 'Action.Drawer',
                   'x-component-props': {
                     className: 'nb-action-popup',
@@ -148,7 +153,7 @@ export const LinkToFieldInitializer = (props) => {
               },
             },
           },
-        });
+        } as ISchema);
       }}
     >
       <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>

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

@@ -0,0 +1,68 @@
+import { FormOutlined } from '@ant-design/icons';
+import { ISchema } from '@formily/react';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { SchemaInitializer } from '../..';
+import { useCollection } from '../../../collection-manager';
+
+const createSchema = (collectionName) => {
+  const schema: ISchema = {
+    type: 'void',
+    'x-decorator': 'ResourceActionProvider',
+    'x-decorator-props': {
+      collection: collectionName,
+      request: {
+        resource: collectionName,
+        action: 'get',
+        params: {},
+      },
+    },
+    'x-designer': 'Form.Designer',
+    'x-component': 'CardItem',
+    properties: {
+      form: {
+        type: 'void',
+        'x-decorator': 'Form',
+        'x-decorator-props': {
+          useValues: '{{ cm.useValuesFromRA }}',
+        },
+        properties: {
+          actions: {
+            type: 'void',
+            'x-initializer': 'RecordDetailsActionInitializers',
+            'x-component': 'ActionBar',
+            'x-component-props': {
+              style: {
+                marginBottom: 24,
+              },
+            },
+            properties: {},
+          },
+          grid: {
+            type: 'void',
+            'x-component': 'Grid',
+            'x-read-pretty': true,
+            'x-initializer': 'GridFormItemInitializers',
+            properties: {},
+          },
+        },
+      },
+    },
+  };
+  return schema;
+};
+
+export const RecordDetailsBlockInitializer = (props) => {
+  const { insert } = props;
+  const { name } = useCollection();
+  const { t } = useTranslation();
+  return (
+    <SchemaInitializer.Item
+      {...props}
+      icon={<FormOutlined />}
+      onClick={({ item }) => {
+        insert(createSchema(name));
+      }}
+    />
+  );
+};

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

@@ -23,7 +23,9 @@ const createSchema = (collectionName) => {
       form: {
         type: 'void',
         'x-decorator': 'Form',
-        'x-decorator-props': {},
+        'x-decorator-props': {
+          useValues: '{{ cm.useValuesFromRA }}',
+        },
         properties: {
           grid: {
             type: 'void',
@@ -33,7 +35,7 @@ const createSchema = (collectionName) => {
           },
           actions: {
             type: 'void',
-            'x-initializer': 'FormActionInitializers',
+            'x-initializer': 'RecordFormActionInitializers',
             'x-component': 'ActionBar',
             'x-component-props': {
               layout: 'one-column',
@@ -41,7 +43,17 @@ const createSchema = (collectionName) => {
                 marginTop: 24,
               },
             },
-            properties: {},
+            properties: {
+              submit: {
+                title: '{{ t("Submit") }}',
+                'x-action': 'submit',
+                'x-component': 'Action',
+                'x-component-props': {
+                  type: 'primary',
+                  useAction: '{{ cm.useUpdateViewAction }}',
+                },
+              },
+            },
           },
         },
       },

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

@@ -7,6 +7,7 @@ export * from './FormBlockInitializer';
 export * from './GeneralInitializer';
 export * from './LinkToCollectionFieldInitializer';
 export * from './MarkdownBlockInitializer';
+export * from './RecordDetailsBlockInitializer';
 export * from './RecordFormBlockInitializer';
 export * from './RecordRelationBlockInitializer';
 export * from './SubTableFieldInitializer';

packages/client/src/schema-initializer/Initializers/RecordBlockInitializers.tsx

@@ -36,7 +36,7 @@ export const RecordBlockInitializers = (props: any) => {
             {
               type: 'item',
               title: 'Details',
-              component: 'RecordFormBlockInitializer',
+              component: 'RecordDetailsBlockInitializer',
             },
             {
               type: 'item',

packages/client/src/schema-initializer/Initializers/RecordDetailsActionInitializers.tsx

@@ -0,0 +1,81 @@
+// 普通表单的操作配置
+export const RecordDetailsActionInitializers = {
+  style: {
+    marginLeft: 8,
+  },
+  title: '{{t("Configure actions")}}',
+  items: [
+    {
+      type: 'itemGroup',
+      title: '{{t("Enable actions")}}',
+      children: [
+        {
+          type: 'item',
+          title: '{{t("Edit")}}',
+          component: 'ActionInitializer',
+          schema: {
+            title: '{{t("Edit")}}',
+            type: 'void',
+            'x-action': 'update',
+            'x-designer': 'Action.Designer',
+            'x-component': 'Action',
+            'x-component-props': {
+              type: 'primary',
+            },
+            properties: {
+              drawer: {
+                type: 'void',
+                'x-decorator': 'Form',
+                'x-decorator-props': {
+                  useValues: '{{ cm.useValuesFromRA }}',
+                },
+                'x-component': 'Action.Drawer',
+                title: '{{ t("Edit record") }}',
+                properties: {
+                  grid: {
+                    type: 'void',
+                    'x-component': 'Grid',
+                    'x-initializer': 'GridFormItemInitializers',
+                    properties: {},
+                  },
+                  footer: {
+                    type: 'void',
+                    'x-component': 'Action.Drawer.Footer',
+                    properties: {
+                      actions: {
+                        type: 'void',
+                        'x-component': 'ActionBar',
+                        'x-component-props': {
+                          layout: 'one-column',
+                        },
+                        properties: {
+                          cancel: {
+                            title: '{{ t("Cancel") }}',
+                            'x-action': 'cancel',
+                            'x-component': 'Action',
+                            'x-component-props': {
+                              useAction: '{{ cm.useCancelAction }}',
+                            },
+                          },
+                          submit: {
+                            title: '{{ t("Submit") }}',
+                            'x-action': 'submit',
+                            'x-component': 'Action',
+                            'x-component-props': {
+                              type: 'primary',
+                              useAction: '{{ cm.useUpdateAction }}',
+                            },
+                          },
+                        },
+                      },
+                    },
+                  },
+                },
+              },
+            },
+          },
+        },
+      ],
+    },
+  ],
+};

packages/client/src/schema-initializer/Initializers/RecordFormActionInitializers.tsx

@@ -0,0 +1,27 @@
+// 普通表单的操作配置
+export const RecordFormActionInitializers = {
+  title: '{{t("Configure actions")}}',
+  items: [
+    {
+      type: 'itemGroup',
+      title: '{{t("Enable actions")}}',
+      children: [
+        {
+          type: 'item',
+          title: '{{t("Submit")}}',
+          component: 'ActionInitializer',
+          schema: {
+            title: '{{t("Submit")}}',
+            'x-action': 'submit',
+            'x-align': 'left',
+            'x-component': 'Action',
+            'x-component-props': {
+              type: 'primary',
+              useAction: '{{ cm.useUpdateViewAction }}',
+            },
+          },
+        },
+      ],
+    },
+  ],
+};

packages/client/src/schema-initializer/Initializers/index.tsx

@@ -6,6 +6,8 @@ import { GridFormItemInitializers } from './GridFormItemInitializers';
 import * as Items from './Items';
 import { PopupFormActionInitializers } from './PopupFormActionInitializers';
 import { RecordBlockInitializers } from './RecordBlockInitializers';
+import { RecordDetailsActionInitializers } from './RecordDetailsActionInitializers';
+import { RecordFormActionInitializers } from './RecordFormActionInitializers';
 import { TableActionInitializers } from './TableActionInitializers';
 import { TableColumnInitializers } from './TableColumnInitializers';
 import { TableFieldRecordActionInitializers } from './TableFieldRecordActionInitializers';
@@ -39,4 +41,8 @@ export const initializes = {
   TableFieldRecordActionInitializers,
   // 添加标签页
   TabPaneInitializers,
+
+  RecordDetailsActionInitializers,
+
+  RecordFormActionInitializers,
 };

packages/database/src/collection.ts

@@ -67,7 +67,7 @@ export class Collection<
   private sequelizeModelOptions() {
     const { name, tableName } = this.options;
     return {
-      ..._.omit(this.options, ['name', 'fields', 'model']),
+      ..._.omit(this.options, ['name', 'fields', 'model', 'targetKey']),
       modelName: name,
       sequelize: this.context.database.sequelize,
       tableName: tableName || name,

packages/plugin-acl/src/collections/roles.ts

@@ -5,6 +5,8 @@ export default {
   title: '{{t("Roles")}}',
   autoGenId: false,
   model: 'RoleModel',
+  filterTargetKey: 'name',
+  // targetKey: 'name',
   fields: [
     {
       type: 'uid',