useResource

packages/client/src/hooks/useResource.ts

@@ -0,0 +1,13 @@
+import { useCollectionContext } from '../constate';
+import { Resource } from '../resource';
+
+export const useResource = (options: any = {}) => {
+  const { collection } = useCollectionContext();
+  const resource = Resource.make(collection.name);
+  return {
+    initialValues: {},
+    loading: false,
+    async run() {},
+    resource,
+  };
+};

packages/client/src/schemas/action/index.tsx

@@ -82,7 +82,7 @@ Action.Modal = observer((props: any) => {
   return (
     <Modal
       title={schema.title}
-      // destroyOnClose
+      destroyOnClose
       maskClosable
       footer={
         isFormDecorator

packages/client/src/schemas/add-new/index.tsx

@@ -277,6 +277,7 @@ function generateCardItemSchema(component) {
                       title: '编辑数据',
                       'x-decorator': 'Form',
                       'x-decorator-props': {
+                        useResource: '{{ Table.useResource }}',
                         useValues: '{{ Table.useTableRowRecord }}',
                       },
                       'x-component': 'Action.Modal',
@@ -621,7 +622,7 @@ AddNew.FormItem = observer((props: any) => {
       }}
       overlay={
         <Menu>
-          <Menu.ItemGroup className={'display-fields'} title={`要展示的字段`}>
+          <Menu.ItemGroup className={'display-fields'} title={`字段展示`}>
             {fields?.map((field) => (
               <Menu.Item key={field.key}>
                 <SwitchField
@@ -819,6 +820,7 @@ AddNew.PaneItem = observer((props: any) => {
                   'x-component': 'Form',
                   'x-read-pretty': true,
                   'x-component-props': {
+                    useResource: '{{ Table.useResource }}',
                     useValues: '{{ Table.useTableRowRecord }}',
                   },
                   'x-designable-bar': 'Form.DesignableBar',
@@ -865,6 +867,7 @@ AddNew.PaneItem = observer((props: any) => {
                   'x-decorator': 'CardItem',
                   'x-component': 'Form',
                   'x-component-props': {
+                    useResource: '{{ Table.useResource }}',
                     useValues: '{{ Table.useTableRowRecord }}',
                     showDefaultButtons: true,
                   },

packages/client/src/schemas/form/index.tsx

@@ -30,32 +30,43 @@ import { DesignableBar } from './DesignableBar';
 import { FieldDesignableBar } from './Field.DesignableBar';
 import { createContext } from 'react';
 import { BlockItem } from '../block-item';
-import { Resource } from '../../resource';
 import {
   CollectionProvider,
   useCollectionContext,
   DisplayedMapProvider,
   useDisplayedMapContext,
 } from '../../constate';
+import { useResource as useGeneralResource } from '../../hooks/useResource';
 
-export const Form: any = observer((props: any) => {
+const FormMain = (props: any) => {
   const {
-    useValues = () => ({}),
+    useResource = useGeneralResource,
     showDefaultButtons = false,
     ...others
   } = props;
   const { schema } = useDesignable();
-  const initialValues = useValues();
   const form = useMemo(() => {
     return createForm({
-      initialValues,
       readPretty: schema['x-read-pretty'],
     });
   }, []);
+  const { resource, run } = useResource({
+    onSuccess: (initialValues: any) => {
+      form.setInitialValues(initialValues);
+    },
+  });
   const path = useSchemaPath();
   const scope = useContext(SchemaExpressionScopeContext);
+  const displayed = useDisplayedMapContext();
   const { collection } = useCollectionContext();
-  const content = (
+  useEffect(() => {
+    const keys = [...displayed.map.keys()];
+    if (keys.length) {
+      run({ 'fields[appends]': keys });
+      console.log(displayed.map, 'displayed.map', collection?.name);
+    }
+  }, [displayed.map]);
+  return (
     <FormProvider form={form}>
       {schema['x-decorator'] === 'Form' ? (
         <SchemaField
@@ -89,7 +100,7 @@ export const Form: any = observer((props: any) => {
             onClick={async () => {
               const values = await form.submit();
               console.log({ values });
-              await Resource.make(props.resource).save(values);
+              await resource.save(values);
               message.success('保存成功');
               await form.reset();
             }}
@@ -108,11 +119,17 @@ export const Form: any = observer((props: any) => {
       )}
     </FormProvider>
   );
+};
+
+export const Form: any = observer((props: any) => {
+  const { collection } = useCollectionContext();
   return (
     <CollectionProvider
       collectionName={props.collectionName || collection?.name}
     >
-      <DisplayedMapProvider>{content}</DisplayedMapProvider>
+      <DisplayedMapProvider>
+        <FormMain {...props} />
+      </DisplayedMapProvider>
     </CollectionProvider>
   );
 });

packages/client/src/schemas/select/index.tsx

@@ -17,7 +17,6 @@ import { useState } from 'react';
 import { useDesignable } from '../';
 import { createContext } from 'react';
 import { useContext } from 'react';
-import { SelectedRowKeysContext, useTableContext } from '../table';
 import { isEmpty } from 'lodash';
 import { isField } from '@formily/core';
 
@@ -312,7 +311,7 @@ Select.Drawer = connect(
           onClose={() => setVisible(false)}
           destroyOnClose
         >
-          <SelectedRowKeysContext.Provider value={selectedKeys}>
+          {/* <SelectedRowKeysContext.Provider value={selectedKeys}> */}
             <SelectContext.Provider
               value={{
                 onChange(selectValue) {
@@ -329,7 +328,7 @@ Select.Drawer = connect(
                 }}
               />
             </SelectContext.Provider>
-          </SelectedRowKeysContext.Provider>
+          {/* </SelectedRowKeysContext.Provider> */}
         </Drawer>
       </>
     );
@@ -390,11 +389,9 @@ Select.Options = observer((props) => {
 
 export function useSelect() {
   const { onChange } = useContext(SelectContext);
-  const { data, selectedRowKeys } = useTableContext();
   return {
     async run() {
-      console.log({ data, selectedRowKeys });
-      onChange && onChange(selectedRowKeys);
+      onChange && onChange([]);
     },
   };
 }

packages/client/src/schemas/table/index.md

@@ -64,7 +64,7 @@ group:
 
 ## API
 
-表格的几个重要概念
+表格的几个重要参数
 
 - collection 当前表格的数据表配置信息（主要是字段）
 - resource 当前资源，用于处理 create、update、list、destroy

packages/client/src/schemas/table/index.tsx

@@ -34,6 +34,7 @@ import {
   useCollectionContext,
   useDisplayedMapContext,
 } from '../../constate';
+import { useResource as useGeneralResource } from '../../hooks/useResource';
 
 const SyntheticListenerMapContext = createContext(null);
 
@@ -330,7 +331,7 @@ function AddColumn() {
       onVisibleChange={setVisible}
       overlay={
         <Menu>
-          <Menu.ItemGroup className={'display-fields'} title={'要展示的字段'}>
+          <Menu.ItemGroup className={'display-fields'} title={'字段展示'}>
             {fields.map((field) => (
               <Menu.Item style={{ minWidth: 150 }}>
                 <SwitchField
@@ -494,14 +495,19 @@ const usePagination = (paginationProps?: any) => {
   });
 };
 
-export const Table: any = observer((props: any) => {
-  const { rowKey = 'id', dataRequest, ...others } = props;
+const TableProvider = (props: any) => {
+  const {
+    rowKey = 'id',
+    dataRequest,
+    useResource = useGeneralResource,
+    ...others
+  } = props;
   const { schema } = useDesignable();
   const field = useField<Formily.Core.Models.ArrayField>();
   const [pagination, setPagination] = usePagination(props.pagination);
   const [selectedRowKeys, setSelectedRowKeys] = useState<any>([]);
   const [, refresh] = useState(uid());
-  const resource = Resource.make(props.resource);
+  const { resource } = useResource();
   const service = useRequest(
     (params?: any) => {
       if (!resource) {
@@ -551,13 +557,19 @@ export const Table: any = observer((props: any) => {
         props: { ...others, rowKey, dataRequest },
       }}
     >
-      <CollectionProvider collectionName={props.collectionName}>
-        <DisplayedMapProvider>
-          <TableMain />
-        </DisplayedMapProvider>
-      </CollectionProvider>
+      <TableMain />
     </TableConetxt.Provider>
   );
+};
+
+export const Table: any = observer((props: any) => {
+  return (
+    <CollectionProvider collectionName={props.collectionName}>
+      <DisplayedMapProvider>
+        <TableProvider {...props} />
+      </DisplayedMapProvider>
+    </CollectionProvider>
+  );
 });
 
 const useTotal = () => {
@@ -957,6 +969,28 @@ Table.DesignableBar = observer((props) => {
   );
 });
 
+Table.useResource = ({ onSuccess }) => {
+  const { props } = useTable();
+  const { collection } = useCollectionContext();
+  const ctx = useContext(TableRowContext);
+  const resource = Resource.make({
+    resourceName: collection.name,
+    resourceKey: ctx.record[props.rowKey],
+  });
+  const { data, loading, run } = useRequest(
+    (params?: any) => {
+      console.log('Table.useResource', params);
+      return resource.get(params);
+    },
+    {
+      formatResult: (result) => result?.data,
+      onSuccess,
+      manual: true,
+    },
+  );
+  return { initialValues: data, loading, run, resource };
+};
+
 Table.useTableFilterAction = useTableFilterAction;
 Table.useTableCreateAction = useTableCreateAction;
 Table.useTableUpdateAction = useTableUpdateAction;