mirrors/nocobase
1
0
Fork 0
mirror of https://github.com/nocobase/nocobase synced 2024-11-15 04:55:44 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: improve code

Browse Source
This commit is contained in:
chenos 2022-02-24 15:16:21 +08:00
parent 1f8c5f510b
commit dc21859d55
42 changed files with 272 additions and 1037 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages/actions/src/actions/list.ts
View File

@ -1,7 +1,6 @@
import { ActionParams } from '@nocobase/resourcer';
import { Context } from '..';
import { getRepositoryFromParams } from './utils';
import { Repository } from '@nocobase/database';
import { ActionParams } from '@nocobase/resourcer';
export const DEFAULT_PAGE = 1;
export const DEFAULT_PER_PAGE = 20;
@ -41,8 +40,8 @@ async function listWithPagination(ctx: Context) {
ctx.body = {
count,
rows,
page,
pageSize,
page: Number(page),
pageSize: Number(pageSize),
totalPage: totalPage(count, pageSize),
};
}

12
packages/client/src/acl/Configuration/schemas/roleCollections.ts
View File

@ -66,7 +66,7 @@ export const roleCollectionsSchema: ISchema = {
table1: {
type: 'void',
'x-uid': 'input',
'x-component': 'VoidTable',
'x-component': 'Table.Void',
'x-component-props': {
rowKey: 'name',
// rowSelection: {
@ -77,8 +77,8 @@ export const roleCollectionsSchema: ISchema = {
properties: {
column1: {
type: 'void',
'x-decorator': 'TableColumnDecorator',
'x-component': 'VoidTable.Column',
'x-decorator': 'Table.Column.Decorator',
'x-component': 'Table.Column',
properties: {
title: {
type: 'number',
@ -89,8 +89,8 @@ export const roleCollectionsSchema: ISchema = {
},
column2: {
type: 'void',
'x-decorator': 'TableColumnDecorator',
'x-component': 'VoidTable.Column',
'x-decorator': 'Table.Column.Decorator',
'x-component': 'Table.Column',
properties: {
name: {
type: 'string',
@ -102,7 +102,7 @@ export const roleCollectionsSchema: ISchema = {
column3: {
type: 'void',
title: 'Actions',
'x-component': 'VoidTable.Column',
'x-component': 'Table.Column',
properties: {
actions: {
type: 'void',

14
packages/client/src/acl/Configuration/schemas/roles.ts
View File

@ -122,9 +122,9 @@ export const roleSchema: ISchema = {
table: {
type: 'void',
'x-uid': 'input',
'x-component': 'VoidTable',
'x-component': 'Table.Void',
'x-component-props': {
rowKey: 'id',
rowKey: 'name',
rowSelection: {
type: 'checkbox',
},
@ -133,8 +133,8 @@ export const roleSchema: ISchema = {
properties: {
column1: {
type: 'void',
'x-decorator': 'TableColumnDecorator',
'x-component': 'VoidTable.Column',
'x-decorator': 'Table.Column.Decorator',
'x-component': 'Table.Column',
properties: {
title: {
type: 'number',
@ -145,8 +145,8 @@ export const roleSchema: ISchema = {
},
column2: {
type: 'void',
'x-decorator': 'TableColumnDecorator',
'x-component': 'VoidTable.Column',
'x-decorator': 'Table.Column.Decorator',
'x-component': 'Table.Column',
properties: {
name: {
type: 'string',
@ -158,7 +158,7 @@ export const roleSchema: ISchema = {
column3: {
type: 'void',
title: 'Actions',
'x-component': 'VoidTable.Column',
'x-component': 'Table.Column',
properties: {
actions: {
type: 'void',

8
packages/client/src/api-client/hooks/useRequest.ts
View File

@ -1,4 +1,5 @@
import { merge } from '@formily/shared';
import { useSetState } from 'ahooks';
import { default as useReq } from 'ahooks/lib/useRequest';
import { Options } from 'ahooks/lib/useRequest/src/types';
import { AxiosRequestConfig } from 'axios';
@ -20,6 +21,9 @@ export function useRequest<P>(
service: AxiosRequestConfig<P> | ResourceActionOptions<P> | FunctionService,
options: Options<any, any> & { uid?: string } = {},
) {
// 缓存用途
const [state, setState] = useSetState({});
console.log('state, setState', state);
const api = useContext(APIClientContext);
if (typeof service === 'function') {
const result = useReq(service, {
@ -31,7 +35,7 @@ export function useRequest<P>(
}
},
});
return result;
return { ...result, state, setState };
}
const result = useReq(
async (params = {}) => {
@ -56,5 +60,5 @@ export function useRequest<P>(
},
},
);
return result;
return { ...result, state, setState };
}

2
packages/client/src/collection-manager/Configuration/AddFieldAction.tsx
View File

@ -1,4 +1,5 @@
import { PlusOutlined } from '@ant-design/icons';
import { ArrayTable } from '@formily/antd';
import { ISchema, useForm } from '@formily/react';
import { uid } from '@formily/shared';
import { Button, Dropdown, Menu } from 'antd';
@ -9,7 +10,6 @@ import { ActionContext, SchemaComponent, useCompile } from '../../schema-compone
import { useCreateAction } from '../action-hooks';
import { useCollectionManager } from '../hooks';
import { IField } from '../interfaces/types';
import { ArrayTable } from './ArrayTable';
import { options } from './interfaces';
const getSchema = (schema: IField): ISchema => {

25
packages/client/src/collection-manager/Configuration/ArrayTable.tsx
View File

@ -1,25 +0,0 @@
import { ArrayBase, ArrayTable as FormilyArrayTable } from '@formily/antd';
import { connect } from '@formily/react';
import React, { Fragment } from 'react';
export const ArrayTable: any = connect((props) => {
const { onChange } = props;
return (
<FormilyArrayTable
{...props}
onChange={(value) => {
console.log('onChange', value);
onChange(value);
}}
/>
);
});
ArrayTable.displayName = 'ArrayTable'
ArrayTable.Column = () => {
return <Fragment />
}
ArrayBase.mixin(ArrayTable)

2
packages/client/src/collection-manager/Configuration/EditFieldAction.tsx
View File

@ -1,3 +1,4 @@
import { ArrayTable } from '@formily/antd';
import { ISchema, useForm } from '@formily/react';
import { uid } from '@formily/shared';
import cloneDeep from 'lodash/cloneDeep';
@ -9,7 +10,6 @@ import { ActionContext, SchemaComponent } from '../../schema-component';
import { useUpdateAction } from '../action-hooks';
import { useCollectionManager } from '../hooks';
import { IField } from '../interfaces/types';
import { ArrayTable } from './ArrayTable';
const getSchema = (schema: IField): ISchema => {
if (!schema) {

23
packages/client/src/collection-manager/Configuration/schemas/collectionFields.ts
View File

@ -73,7 +73,7 @@ export const collectionFieldSchema: ISchema = {
params: {
pageSize: 50,
filter: {},
// sort: ['sort'],
sort: ['sort'],
appends: ['uiSchema'],
},
},
@ -96,12 +96,13 @@ export const collectionFieldSchema: ISchema = {
type: 'void',
title: '{{ t("Delete") }}',
'x-component': 'Action',
"x-component-props": {
'x-component-props': {
useAction: '{{ cm.useBulkDestroyActionAndRefreshCM }}',
confirm: {
title: "{{t('Delete record')}}",
content: "{{t('Are you sure you want to delete it?')}}",
},
}
},
},
create: {
type: 'void',
@ -116,9 +117,9 @@ export const collectionFieldSchema: ISchema = {
table: {
type: 'void',
'x-uid': 'input',
'x-component': 'VoidTable',
'x-component': 'Table.Void',
'x-component-props': {
rowKey: 'id',
rowKey: 'name',
rowSelection: {
type: 'checkbox',
},
@ -128,7 +129,7 @@ export const collectionFieldSchema: ISchema = {
column1: {
type: 'void',
title: '{{ t("Field display name") }}',
'x-component': 'VoidTable.Column',
'x-component': 'Table.Column',
properties: {
'uiSchema.title': {
type: 'number',
@ -139,8 +140,8 @@ export const collectionFieldSchema: ISchema = {
},
column2: {
type: 'void',
'x-decorator': 'TableColumnDecorator',
'x-component': 'VoidTable.Column',
'x-decorator': 'Table.Column.Decorator',
'x-component': 'Table.Column',
properties: {
name: {
'x-component': 'CollectionField',
@ -150,8 +151,8 @@ export const collectionFieldSchema: ISchema = {
},
column3: {
type: 'void',
'x-decorator': 'TableColumnDecorator',
'x-component': 'VoidTable.Column',
'x-decorator': 'Table.Column.Decorator',
'x-component': 'Table.Column',
properties: {
interface: {
'x-component': 'CollectionField',
@ -162,7 +163,7 @@ export const collectionFieldSchema: ISchema = {
column4: {
type: 'void',
title: '{{ t("Actions") }}',
'x-component': 'VoidTable.Column',
'x-component': 'Table.Column',
properties: {
actions: {
type: 'void',

15
packages/client/src/collection-manager/Configuration/schemas/collections.ts
View File

@ -80,6 +80,7 @@ export const collectionSchema: ISchema = {
title: '{{ t("Delete") }}',
'x-component': 'Action',
'x-component-props': {
useAction: '{{ cm.useBulkDestroyActionAndRefreshCM }}',
confirm: {
title: "{{t('Delete record')}}",
content: "{{t('Are you sure you want to delete it?')}}",
@ -141,9 +142,9 @@ export const collectionSchema: ISchema = {
table: {
type: 'void',
'x-uid': 'input',
'x-component': 'VoidTable',
'x-component': 'Table.Void',
'x-component-props': {
rowKey: 'id',
rowKey: 'name',
rowSelection: {
type: 'checkbox',
},
@ -152,8 +153,8 @@ export const collectionSchema: ISchema = {
properties: {
column1: {
type: 'void',
'x-decorator': 'TableColumnDecorator',
'x-component': 'VoidTable.Column',
'x-decorator': 'Table.Column.Decorator',
'x-component': 'Table.Column',
properties: {
title: {
'x-component': 'CollectionField',
@ -163,8 +164,8 @@ export const collectionSchema: ISchema = {
},
column2: {
type: 'void',
'x-decorator': 'TableColumnDecorator',
'x-component': 'VoidTable.Column',
'x-decorator': 'Table.Column.Decorator',
'x-component': 'Table.Column',
properties: {
name: {
type: 'string',
@ -176,7 +177,7 @@ export const collectionSchema: ISchema = {
column3: {
type: 'void',
title: '{{ t("Actions") }}',
'x-component': 'VoidTable.Column',
'x-component': 'Table.Column',
properties: {
actions: {
type: 'void',

10
packages/client/src/collection-manager/ResourceActionProvider.tsx
View File

@ -4,7 +4,7 @@ import { useCollectionManager } from '.';
import { CollectionProvider, useRecord } from '..';
import { useAPIClient, useRequest } from '../api-client';
export const ResourceActionContext = createContext<Result<any, any>>(null);
export const ResourceActionContext = createContext<Result<any, any> & { state?: any; setState?: any }>(null);
interface ResourceActionProviderProps {
type?: 'association' | 'collection';
@ -82,5 +82,11 @@ export const useDataSourceFromRAC = (options: any) => {
export const useResourceContext = () => {
const { type, resource, collection, association } = useContext(ResourceContext);
return { type, resource, collection, association, targetKey: association?.targetKey || collection?.targetKey || 'id' };
return {
type,
resource,
collection,
association,
targetKey: association?.targetKey || collection?.targetKey || 'id',
};
};

23
packages/client/src/collection-manager/action-hooks.ts
View File

@ -74,12 +74,18 @@ export const useDestroyAction = () => {
};
export const useBulkDestroyAction = () => {
const { refresh } = useResourceActionContext();
const { state, setState, refresh } = useResourceActionContext();
const { resource, targetKey } = useResourceContext();
const { [targetKey]: filterByTk } = useRecord();
return {
async run() {
await resource.destroy({ filterByTk });
await resource.destroy({
filter: {
[targetKey]: {
$in: state?.selectedRowKeys || [],
},
},
});
setState?.({ selectedRowKeys: [] });
refresh();
},
};
@ -125,3 +131,14 @@ export const useDestroyActionAndRefreshCM = () => {
},
};
};
export const useBulkDestroyActionAndRefreshCM = () => {
const { run } = useBulkDestroyAction();
const { refreshCM } = useCollectionManager();
return {
async run() {
await run();
await refreshCM();
},
};
};

45
packages/client/src/schema-component/antd/array-table/index.md
View File

@ -1,45 +0,0 @@
---
nav:
path: /client
group:
path: /schema-components
---
# ArrayTable - 表格（数据录入） <Badge>待定</Badge>
ArrayTable 更侧重于数据录入，如果需要动态的表格数据展示，请使用 [VoidTable](void-table)。
## JSON Schema
ArrayTable 的 props 与 antd 的 [Table](https://ant.design/components/table/#API) 基本一致。但并不直接用 Table 组件的 columns 和 dataSource。dataSource 由表单提供，默认值写在 default 里；为了更好的支持 columns 的渲染，添加了 ArrayTable.Column 用于配置表格列，ArrayTable.Column 写在 properties 里，属性与 antd 的 [Table.Column](https://ant.design/components/table/#Column) 一致。
```ts
{
type: 'array',
'x-component': 'ArrayTable',
default: [
{ id: 1, name: 'Name1' },
{ id: 2, name: 'Name2' },
{ id: 3, name: 'Name3' },
],
properties: {
column1: {
type: 'void',
'x-component': 'ArrayTable.Column',
'x-component-props': {
title: 'Name',
},
properties: {
name: {
type: 'string',
'x-component': 'Input',
},
},
},
},
}
```
## Examples
<code src="./demos/demo1.tsx"/>

6
packages/client/src/schema-component/antd/array-table/index.ts
View File

@ -1,6 +0,0 @@
export * from './ArrayTable';
export * from './TableColumnActionBar';
export * from './TableColumnDecorator';
export * from './TableColumnDeigner';
export * from './TableRecordActionDesigner';

7
packages/client/src/schema-component/antd/form/Form.tsx
View File

@ -104,7 +104,12 @@ Form.Designer = () => {
const { name, title } = useCollection();
return (
<GeneralSchemaDesigner title={title || name}>
<SchemaSettings.Remove />
<SchemaSettings.Remove
removeParentsIfNoChildren
breakRemoveOn={{
'x-component': 'Grid',
}}
/>
</GeneralSchemaDesigner>
);
};

5
packages/client/src/schema-component/antd/grid/demos/demo3.tsx
View File

@ -9,8 +9,7 @@ import {
Markdown,
SchemaComponent,
SchemaComponentProvider,
SchemaInitializerProvider,
VoidTable
SchemaInitializerProvider
} from '@nocobase/client';
import React from 'react';
@ -39,7 +38,7 @@ const schema: ISchema = {
export default function App() {
return (
<SchemaComponentProvider components={{ BlockItem, Block, Grid, CardItem, Markdown, Form, VoidTable }}>
<SchemaComponentProvider components={{ BlockItem, Block, Grid, CardItem, Markdown, Form }}>
<SchemaInitializerProvider>
<SchemaComponent schema={schema} />
</SchemaInitializerProvider>

4
packages/client/src/schema-component/antd/index.ts
View File

@ -1,5 +1,4 @@
export * from './action';
export * from './array-table';
export * from './block-item';
export * from './calendar';
export * from './card-item';
@ -22,12 +21,11 @@ export * from './page';
export * from './password';
export * from './radio';
export * from './record-picker';
export * from './row-selection';
export * from './select';
export * from './space';
export * from './table';
export * from './tabs';
export * from './time-picker';
export * from './tree-select';
export * from './upload';
export * from './void-table';

35
packages/client/src/schema-component/antd/row-selection/demos/apiClient.ts
View File

@ -1,35 +0,0 @@
import { uid } from '@formily/shared';
import { APIClient } from '@nocobase/client';
import MockAdapter from 'axios-mock-adapter';
import _ from 'lodash';
export const apiClient = new APIClient();
const mock = new MockAdapter(apiClient.axios);
const sleep = (value: number) => new Promise((resolve) => setTimeout(resolve, value));
mock.onGet('/posts:list').reply(async (config) => {
// const [{ pageSize }] = config.params;
const pageSize = config.params.pageSize || 10;
const page = config.params.page || 1;
console.log(pageSize, page, config.params);
await sleep(1000);
return [
200,
{
data: _.range(pageSize).map((v) => {
return {
id: v + (page - 1) * pageSize,
name: uid(),
};
}),
meta: {
count: 100,
pageSize,
page,
},
},
];
});

88
packages/client/src/schema-component/antd/row-selection/demos/demo1.tsx
View File

@ -1,88 +0,0 @@
/**
* title: 勾选
*/
import { ISchema } from '@formily/react';
import {
APIClientProvider,
Input,
RowSelection,
SchemaComponent,
SchemaComponentProvider,
useAPIClient
} from '@nocobase/client';
import React from 'react';
import { apiClient } from './apiClient';
const schema: ISchema = {
type: 'object',
properties: {
hello: {
'x-component': 'Hello',
},
table1: {
type: 'string',
default: 1,
'x-uid': 'input',
'x-component': 'RowSelection',
'x-component-props': {
rowKey: 'id',
rowSelection: {
type: 'radio',
},
pagination: {
// current: 2,
pageSize: 2,
},
request: {
resource: 'posts',
action: 'list',
params: {
filter: {},
// pageSize: 5,
},
},
},
properties: {
column1: {
type: 'void',
title: 'Name',
'x-component': 'RowSelection.Column',
properties: {
name: {
type: 'string',
'x-component': 'Input',
'x-read-pretty': true,
},
},
},
},
},
},
};
const Hello = () => {
const api = useAPIClient();
return (
<div
onClick={() => {
const service = api.service('input');
if (!service) {
return;
}
service.run({ ...service.params[0], page: 3 });
}}
>
Hello
</div>
);
};
export default () => {
return (
<APIClientProvider apiClient={apiClient}>
<SchemaComponentProvider components={{ Hello, Input, RowSelection }}>
<SchemaComponent schema={schema} />
</SchemaComponentProvider>
</APIClientProvider>
);
};

90
packages/client/src/schema-component/antd/row-selection/index.md
View File

@ -1,90 +0,0 @@
---
nav:
path: /client
group:
path: /schema-components
---
# RowSelection - 行选择器 <Badge>待定</Badge>
用表格视图展示可选项数据，功能上与 Radio.Group 和 CheckBox.Group 一致。
## JSON Schema
[rowSelection](https://ant.design/components/table/#rowSelection)
单选
```ts
{
type: 'number',
'x-component': 'RowSelection',
'x-component-props': {
rowKey: 'id',
rowSelection: {
type: 'radio',
},
dataSource: [
{ id: 1, name: 'Name1' },
{ id: 2, name: 'Name2' },
{ id: 3, name: 'Name3' },
],
},
default: 1,
properties: {
column1: {
type: 'void',
'x-component': 'VoidTable.Column',
'x-component-props': {
title: 'Name',
},
properties: {
name: {
type: 'string',
'x-component': 'Input',
},
},
},
},
}
```
多选
```ts
{
type: 'number',
'x-component': 'RowSelection',
'x-component-props': {
rowKey: 'id',
rowSelection: {
type: 'radio',
},
dataSource: [
{ id: 1, name: 'Name1' },
{ id: 2, name: 'Name2' },
{ id: 3, name: 'Name3' },
],
},
default: 1,
properties: {
column1: {
type: 'void',
'x-component': 'VoidTable.Column',
'x-component-props': {
title: 'Name',
},
properties: {
name: {
type: 'string',
'x-component': 'Input',
},
},
},
},
}
```
## Examples
<code src="./demos/demo1.tsx">

1
packages/client/src/schema-component/antd/row-selection/index.ts
View File

@ -1 +0,0 @@
export * from './RowSelection';

17
packages/client/src/schema-component/antd/array-table/ArrayTable.tsx → packages/client/src/schema-component/antd/table/Table.Array.tsx
View File

@ -47,11 +47,6 @@ const useTableColumns = () => {
});
};
type ArrayTableType = React.FC<any> & {
Column?: React.FC<any>;
mixin?: (T: any) => void;
};
export const components = {
header: {
wrapper: (props) => {
@ -88,7 +83,7 @@ export const components = {
},
};
export const ArrayTable: ArrayTableType = observer((props) => {
export const TableArray: React.FC<any> = observer((props) => {
const field = useField<ArrayField>();
const columns = useTableColumns();
const { onChange, ...others } = props;
@ -98,13 +93,3 @@ export const ArrayTable: ArrayTableType = observer((props) => {
</div>
);
});
ArrayTable.Column = (props) => {
const field = useField();
console.log('field.title', field.title);
return <div>{field.title}</div>;
};
ArrayTable.mixin = (Table: any) => {
Table.Column = ArrayTable.Column;
};

0
packages/client/src/schema-component/antd/array-table/TableColumnActionBar.tsx → packages/client/src/schema-component/antd/table/Table.Column.ActionBar.tsx
View File

0
packages/client/src/schema-component/antd/array-table/TableColumnDecorator.tsx → packages/client/src/schema-component/antd/table/Table.Column.Decorator.tsx
View File

0
packages/client/src/schema-component/antd/array-table/TableColumnDeigner.tsx → packages/client/src/schema-component/antd/table/Table.Column.Deigner.tsx
View File

7
packages/client/src/schema-component/antd/table/Table.Column.tsx Normal file
View File

@ -0,0 +1,7 @@
import { useField } from '@formily/react';
import React from 'react';
export const TableColumn = (props) => {
const field = useField();
return <div>{field.title}</div>;
};

3
packages/client/src/schema-component/antd/array-table/TableRecordActionDesigner.tsx → packages/client/src/schema-component/antd/table/Table.RowActionDesigner.tsx
View File

@ -5,10 +5,9 @@ import React from 'react';
import { DragHandler } from '../../../schema-component';
import { useSchemaInitializer } from '../../../schema-initializer';
export const TableRecordActionDesigner = (props: any) => {
export const TableRowActionDesigner = (props: any) => {
const fieldSchema = useFieldSchema();
const { render } = useSchemaInitializer(fieldSchema['x-initializer']);
console.log("fieldSchema['x-initializer']", fieldSchema['x-initializer'])
return (
<div className={'general-schema-designer'}>
<div className={'general-schema-designer-icons'}>

13
packages/client/src/schema-component/antd/row-selection/RowSelection.tsx → packages/client/src/schema-component/antd/table/Table.RowSelection.tsx
View File

@ -3,20 +3,19 @@ import { observer, useField } from '@formily/react';
import { isArr, isValid } from '@formily/shared';
import { TableProps } from 'antd';
import React from 'react';
import { VoidTable } from '../void-table';
import { TableVoid } from './Table.Void';
type Props = TableProps<any> & { value?: any; onChange?: any; objectValue?: boolean; };
type Props = TableProps<any> & { value?: any; onChange?: any; objectValue?: boolean };
const toArr = (value: any) => (isArr(value) ? value : isValid(value) ? [value] : []);
export const RowSelection = observer((props: Props) => {
export const TableRowSelection = observer((props: Props) => {
const { rowKey = 'id', objectValue } = props;
const field = useField<Field>();
console.log('field.value', field.value)
const rowSelection: any = {
type: 'checkbox',
...props.rowSelection,
selectedRowKeys: toArr(field.value).map(val => typeof val === 'object' ? val[rowKey as any] : val),
selectedRowKeys: toArr(field.value).map((val) => (typeof val === 'object' ? val[rowKey as any] : val)),
onChange(selectedRowKeys: any[], selectedRows?: any) {
if (rowSelection.type === 'checkbox') {
props.onChange(objectValue ? selectedRows : selectedRowKeys);
@ -25,7 +24,5 @@ export const RowSelection = observer((props: Props) => {
}
},
};
return <VoidTable {...props} rowSelection={rowSelection} />;
return <TableVoid {...props} rowSelection={rowSelection} />;
});
VoidTable.mixin(RowSelection);

2
packages/client/src/schema-component/antd/void-table/VoidTable.Designer.tsx → packages/client/src/schema-component/antd/table/Table.Void.Designer.tsx
View File

@ -2,7 +2,7 @@ import React from 'react';
import { useCollection } from '../../../collection-manager';
import { GeneralSchemaDesigner, SchemaSettings } from '../../../schema-settings';
export const VoidTableDesigner = () => {
export const TableVoidDesigner = () => {
const { name, title } = useCollection();
return (
<GeneralSchemaDesigner title={title || name}>

40
packages/client/src/schema-component/antd/void-table/VoidTable.tsx → packages/client/src/schema-component/antd/table/Table.Void.tsx
View File

@ -6,21 +6,18 @@ import { cloneDeep } from 'lodash';
import React, { useMemo } from 'react';
import { AsyncDataProvider, useRequest } from '../../../';
import { useAttach } from '../../hooks';
import { ArrayTable } from '../array-table';
import { VoidTableDesigner } from './VoidTable.Designer';
import { TableArray } from './Table.Array';
type VoidTableProps = TableProps<any> & {
type TableVoidProps = TableProps<any> & {
request?: any;
useDataSource?: (options?: Options<any, any> & { uid?: string }, props?: any) => Result<any, any>;
};
type VoidTableType = React.FC<VoidTableProps> & {
Column?: React.FC<any>;
Designer?: any;
mixin?: (T: any) => void;
useDataSource?: (
options?: Options<any, any> & { uid?: string },
props?: any,
) => Result<any, any> & { state?: any; setState?: any };
};
const usePaginationProps = (props: TableProps<any> & { request?: any }, service): TablePaginationConfig | false => {
console.log('f.componentProps.pagination', props);
if (props.pagination === false) {
return false;
}
@ -72,12 +69,12 @@ const useDef = (options, props) => {
return useRequest(useRequestProps(props), options);
};
export const VoidTable: VoidTableType = observer((props) => {
export const TableVoid: React.FC<TableVoidProps> = observer((props) => {
const { useDataSource = useDef } = props;
const field = useField<Field>();
const fieldSchema = useFieldSchema();
const form = useMemo(() => createForm(), []);
const f = useAttach(form.createArrayField({ name: fieldSchema.name }));
const f = useAttach(form.createArrayField({ ...field.props, basePath: '' }));
const result = useDataSource(
{
uid: fieldSchema['x-uid'],
@ -94,21 +91,30 @@ export const VoidTable: VoidTableType = observer((props) => {
}
field.componentProps.pagination.current = data?.meta?.page || 1;
field.componentProps.pagination.pageSize = data?.meta?.pageSize || 10;
console.log('f.componentProps.pagination', field.componentProps.pagination);
},
},
props,
);
const others = {
rowSelection: props.rowSelection
? {
type: 'checkbox',
...props.rowSelection,
selectedRowKeys: result?.state?.selectedRowKeys || [],
onChange(selectedRowKeys: any[]) {
result?.setState?.({ selectedRowKeys });
},
}
: undefined,
};
return (
<AsyncDataProvider value={result}>
<FormContext.Provider value={form}>
<FieldContext.Provider value={f}>
<ArrayTable {...props} loading={result?.loading} pagination={usePaginationProps(props, result)} />
<TableArray {...props} {...others} loading={result?.loading} pagination={usePaginationProps(props, result)} />
</FieldContext.Provider>
</FormContext.Provider>
</AsyncDataProvider>
);
});
VoidTable.Designer = VoidTableDesigner;
VoidTable.mixin = ArrayTable.mixin;
ArrayTable.mixin(VoidTable);

32
packages/client/src/schema-component/antd/array-table/demos/demo1.tsx → packages/client/src/schema-component/antd/table/demos/demo1.tsx
View File

@ -1,9 +1,5 @@
/**
* title: 勾选
*/
import { FormItem } from '@formily/antd';
import { ISchema } from '@formily/react';
import { ArrayTable, Input, SchemaComponent, SchemaComponentProvider } from '@nocobase/client';
import { Input, SchemaComponent, SchemaComponentProvider, Table } from '@nocobase/client';
import React from 'react';
const schema: ISchema = {
@ -17,24 +13,18 @@ const schema: ISchema = {
{ id: 2, name: 'Name2' },
{ id: 3, name: 'Name3' },
],
'x-decorator': 'FormItem',
'x-component': 'ArrayTable',
'x-component': 'Table.Array',
'x-component-props': {
rowKey: 'id',
},
'x-reactions': {
target: 'read',
fulfill: {
state: {
value: '{{$self.value}}',
},
rowSelection: {
type: 'checkbox',
},
},
properties: {
column1: {
type: 'void',
title: 'Name',
'x-component': 'ArrayTable.Column',
'x-component': 'Table.Column',
properties: {
name: {
type: 'string',
@ -45,22 +35,12 @@ const schema: ISchema = {
},
},
},
read: {
type: 'array',
title: `阅读模式`,
'x-read-pretty': true,
'x-decorator': 'FormItem',
'x-component': 'ArrayTable',
'x-component-props': {
rowKey: 'id',
},
},
},
};
export default () => {
return (
<SchemaComponentProvider components={{ Input, ArrayTable, FormItem }}>
<SchemaComponentProvider components={{ Table, Input }}>
<SchemaComponent schema={schema} />
</SchemaComponentProvider>
);

47
packages/client/src/schema-component/antd/table/demos/demo2.tsx Normal file
View File

@ -0,0 +1,47 @@
import { ISchema } from '@formily/react';
import { Input, SchemaComponent, SchemaComponentProvider, Table } from '@nocobase/client';
import React from 'react';
const schema: ISchema = {
type: 'object',
properties: {
input: {
type: 'array',
title: `编辑模式`,
'x-component': 'Table.Void',
'x-component-props': {
rowKey: 'id',
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,
},
},
},
},
},
},
};
export default () => {
return (
<SchemaComponentProvider components={{ Table, Input }}>
<SchemaComponent schema={schema} />
</SchemaComponentProvider>
);
};

47
packages/client/src/schema-component/antd/table/demos/demo3.tsx Normal file
View File

@ -0,0 +1,47 @@
import { ISchema } from '@formily/react';
import { Input, SchemaComponent, SchemaComponentProvider, Table } from '@nocobase/client';
import React from 'react';
const schema: ISchema = {
type: 'object',
properties: {
input: {
type: 'array',
title: `编辑模式`,
'x-component': 'Table.RowSelection',
'x-component-props': {
rowKey: 'id',
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,
},
},
},
},
},
},
};
export default () => {
return (
<SchemaComponentProvider components={{ Table, Input }}>
<SchemaComponent schema={schema} />
</SchemaComponentProvider>
);
};

20
packages/client/src/schema-component/antd/table/index.md Normal file
View File

@ -0,0 +1,20 @@
# Table
表格有三个使用场景
- `Table.Void`
- `Table.RowSelection`
- `Table.Array`
## Table.Array
<code src="./demos/demo1.tsx" />
## Table.Void
<code src="./demos/demo2.tsx" />
## Table.RowSelection
<code src="./demos/demo3.tsx" />

23
packages/client/src/schema-component/antd/table/index.tsx Normal file
View File

@ -0,0 +1,23 @@
import { TableArray } from './Table.Array';
import { TableColumn } from './Table.Column';
import { TableColumnActionBar } from './Table.Column.ActionBar';
import { TableColumnDecorator } from './Table.Column.Decorator';
import { TableColumnDeigner } from './Table.Column.Deigner';
import { TableRowActionDesigner } from './Table.RowActionDesigner';
import { TableRowSelection } from './Table.RowSelection';
import { TableVoid } from './Table.Void';
import { TableVoidDesigner } from './Table.Void.Designer';
export const Table: any = () => null;
Table.Array = TableArray;
Table.Void = TableVoid;
Table.Void.Designer = TableVoidDesigner;
Table.RowSelection = TableRowSelection;
Table.Column = TableColumn;
Table.Column.ActionBar = TableColumnActionBar;
Table.Column.Decorator = TableColumnDecorator;
Table.Column.Deigner = TableColumnDeigner;
Table.RowActionDesigner = TableRowActionDesigner;

39
packages/client/src/schema-component/antd/void-table/demos/apiClient.ts
View File

@ -1,39 +0,0 @@
import { uid } from '@formily/shared';
import { APIClient } from '@nocobase/client';
import MockAdapter from 'axios-mock-adapter';
import _ from 'lodash';
export const apiClient = new APIClient();
const mock = new MockAdapter(apiClient.axios);
const sleep = (value: number) => new Promise((resolve) => setTimeout(resolve, value));
mock.onGet('/posts:list').reply(async (config) => {
// const [{ pageSize }] = config.params;
const pageSize = config.params.pageSize || 10;
const page = config.params.page || 1;
console.log(pageSize, page, config.params);
await sleep(1000);
return [
200,
{
data: _.range(pageSize).map((v) => {
return {
id: v + (page - 1) * pageSize,
name: uid(),
date: '2022-01-02 22:22:22',
createdBy: [
{ id: 1, name: 'name1' },
],
};
}),
meta: {
count: 100,
pageSize,
page,
},
},
];
});

87
packages/client/src/schema-component/antd/void-table/demos/demo1.tsx
View File

@ -1,87 +0,0 @@
/**
* title: 勾选
*/
import { ISchema } from '@formily/react';
import {
APIClientProvider,
Input,
SchemaComponent,
SchemaComponentProvider,
useAPIClient,
VoidTable
} from '@nocobase/client';
import React from 'react';
import { apiClient } from './apiClient';
const schema: ISchema = {
type: 'object',
properties: {
hello: {
'x-component': 'Hello',
},
table1: {
type: 'void',
'x-uid': 'input',
'x-component': 'VoidTable',
'x-component-props': {
rowKey: 'id',
rowSelection: {
type: 'checkbox',
},
pagination: {
current: 2,
pageSize: 2,
},
request: {
resource: 'posts',
action: 'list',
params: {
filter: {},
// pageSize: 5,
},
},
},
properties: {
column1: {
type: 'void',
title: 'Name',
'x-component': 'VoidTable.Column',
properties: {
name: {
type: 'string',
'x-component': 'Input',
'x-read-pretty': true,
},
},
},
},
},
},
};
const Hello = () => {
const api = useAPIClient();
return (
<div
onClick={() => {
const service = api.service('input');
if (!service) {
return;
}
service.run({ ...service.params[0], page: 3 });
}}
>
Hello
</div>
);
};
export default () => {
return (
<APIClientProvider apiClient={apiClient}>
<SchemaComponentProvider components={{ Hello, Input, VoidTable }}>
<SchemaComponent schema={schema} />
</SchemaComponentProvider>
</APIClientProvider>
);
};

238
packages/client/src/schema-component/antd/void-table/demos/demo2.tsx
View File

@ -1,238 +0,0 @@
import { ISchema, observer, useField, useFieldSchema } from '@formily/react';
import {
AntdSchemaComponentProvider,
APIClientProvider,
CollectionManagerProvider,
SchemaComponent,
SchemaComponentProvider
} from '@nocobase/client';
import { Button } from 'antd';
import React from 'react';
import { apiClient } from './apiClient';
const schema: ISchema = {
type: 'object',
properties: {
block1: {
type: 'void',
'x-decorator': 'CollectionProvider',
'x-decorator-props': {
name: 'posts',
},
'x-component': 'ResourceActionProvider',
'x-component-props': {
request: {
resource: 'posts',
action: 'list',
params: {
pageSize: 5,
filter: {},
sort: [],
appends: [],
},
},
},
properties: {
settings: {
'x-component': 'SimpleSettingsForm',
},
table1: {
type: 'void',
'x-uid': 'input',
'x-component': 'VoidTable',
'x-component-props': {
rowKey: 'id',
rowSelection: {
type: 'checkbox',
},
useDataSource: '{{ useDataSourceFromRAC }}',
},
properties: {
column1: {
type: 'void',
// title: 'ID',
'x-decorator': 'TableColumnDecorator',
'x-component': 'VoidTable.Column',
properties: {
id: {
type: 'number',
'x-component': 'CollectionField',
'x-read-pretty': true,
},
},
},
column2: {
type: 'void',
// title: 'Name',
'x-decorator': 'TableColumnDecorator',
'x-component': 'VoidTable.Column',
properties: {
name: {
type: 'string',
'x-component': 'CollectionField',
'x-read-pretty': true,
},
},
},
column3: {
type: 'void',
// title: 'Name',
'x-decorator': 'TableColumnDecorator',
'x-component': 'VoidTable.Column',
properties: {
date: {
type: 'string',
'x-component': 'CollectionField',
'x-read-pretty': true,
},
},
},
column4: {
type: 'void',
// title: 'Name',
'x-decorator': 'TableColumnDecorator',
'x-component': 'VoidTable.Column',
properties: {
createdBy: {
'x-component': 'CollectionField',
'x-read-pretty': true,
properties: {
item: {
'x-component': 'RecordPicker.SelectedItem',
properties: {
drawer1: {
'x-component': 'Action.Drawer',
type: 'void',
title: 'Drawer Title',
properties: {
hello1: {
'x-content': 'Hello',
title: 'T1',
},
footer1: {
'x-component': 'Action.Drawer.Footer',
type: 'void',
properties: {
close1: {
type: 'void',
title: 'Close',
'x-component': 'Action',
'x-component-props': {
// useAction: '{{ useCloseAction }}',
},
},
},
},
},
},
},
},
},
},
},
},
},
},
},
},
},
};
const collections = [
{
name: 'posts',
fields: [
{
type: 'integer',
name: 'id',
interface: 'input',
uiSchema: {
title: 'ID1',
type: 'number',
'x-component': 'InputNumber',
required: true,
description: 'description1',
} as ISchema,
},
{
type: 'string',
name: 'name',
interface: 'input',
uiSchema: {
title: 'Name1',
type: 'string',
'x-component': 'Input',
required: true,
description: 'description1',
} as ISchema,
},
{
type: 'string',
name: 'date',
interface: 'datetime',
uiSchema: {
type: 'boolean',
title: `Date1`,
'x-read-pretty': true,
'x-decorator': 'FormItem',
'x-component': 'DatePicker',
'x-component-props': {
dateFormat: 'YYYY/MM/DD',
// showTime: true,
},
},
},
{
type: 'belongsToMany',
name: 'createdBy',
target: 'users',
foreignKey: 'createdById',
uiSchema: {
type: 'array',
title: `创建人`,
// default: [
// { id: 1, name: 'name1' },
// { id: 2, name: 'name2' },
// ],
'x-decorator': 'FormItem',
'x-component': 'RecordPicker',
},
},
],
},
];
const SimpleSettingsForm = observer(() => {
const field = useField();
const fieldSchema = useFieldSchema();
return (
<div>
<Button
onClick={() => {
fieldSchema.parent['x-component-props']['request']['params']['pageSize'] = 20;
field.query('.').take((f) => {
f.componentProps.request.params.pageSize = 20;
});
}}
>
Edit
</Button>
<br />
<br />
</div>
);
});
export default () => {
return (
<APIClientProvider apiClient={apiClient}>
<SchemaComponentProvider>
<AntdSchemaComponentProvider>
<CollectionManagerProvider collections={collections}>
<SchemaComponent schema={schema} components={{ SimpleSettingsForm }} />
</CollectionManagerProvider>
</AntdSchemaComponentProvider>
</SchemaComponentProvider>
</APIClientProvider>
);
};

251
packages/client/src/schema-component/antd/void-table/index.md
View File

@ -1,251 +0,0 @@
---
nav:
path: /client
group:
path: /schema-components
---
# VoidTable - 表格（数据展示） <Badge>待定</Badge>
VoidTable 只用作数据展示，如果需要可以录入数据的表格字段，请使用 [ArrayTable](array-table)。
## Examples
VoidTable 的 props 与 antd 的 [Table](https://ant.design/components/table/#API) 一致。
### 基础使用
```tsx
import { ISchema } from '@formily/react';
import { uid } from '@formily/shared';
import {
APIClientProvider,
Input,
SchemaComponent,
SchemaComponentProvider,
useAPIClient,
VoidTable
} from '@nocobase/client';
import _ from 'lodash';
import React from 'react';
const schema: ISchema = {
type: 'object',
properties: {
table1: {
type: 'void',
'x-component': 'VoidTable',
'x-component-props': {
rowKey: 'id',
rowSelection: {
type: 'checkbox',
},
dataSource: _.range(5).map((v) => {
return {
id: v,
name: uid(),
};
}),
},
properties: {
column1: {
type: 'void',
title: 'Name',
'x-component': 'VoidTable.Column',
properties: {
name: {
type: 'string',
'x-component': 'Input',
'x-read-pretty': true,
},
},
},
},
},
},
};
export default () => {
return (
<SchemaComponentProvider components={{ Input, VoidTable }}>
<SchemaComponent schema={schema} />
</SchemaComponentProvider>
);
};
```
### 分页
```tsx
import { ISchema } from '@formily/react';
import { uid } from '@formily/shared';
import {
APIClientProvider,
Input,
SchemaComponent,
SchemaComponentProvider,
useAPIClient,
VoidTable
} from '@nocobase/client';
import _ from 'lodash';
import React from 'react';
const schema: ISchema = {
type: 'object',
properties: {
table1: {
type: 'void',
'x-component': 'VoidTable',
'x-component-props': {
rowKey: 'id',
rowSelection: {
type: 'checkbox',
},
dataSource: _.range(50).map((v) => {
return {
id: v,
name: uid(),
};
}),
},
properties: {
column1: {
type: 'void',
title: 'Name',
'x-component': 'VoidTable.Column',
properties: {
name: {
type: 'string',
'x-component': 'Input',
'x-read-pretty': true,
},
},
},
},
},
},
};
export default () => {
return (
<SchemaComponentProvider components={{ Input, VoidTable }}>
<SchemaComponent schema={schema} />
</SchemaComponentProvider>
);
};
```
### 不分页
```tsx
import { ISchema } from '@formily/react';
import { uid } from '@formily/shared';
import {
APIClientProvider,
Input,
SchemaComponent,
SchemaComponentProvider,
useAPIClient,
VoidTable
} from '@nocobase/client';
import _ from 'lodash';
import React from 'react';
const schema: ISchema = {
type: 'object',
properties: {
table1: {
type: 'void',
'x-uid': 'input',
'x-component': 'VoidTable',
'x-component-props': {
rowKey: 'id',
rowSelection: {
type: 'checkbox',
},
pagination: false,
dataSource: _.range(12).map((v) => {
return {
id: v,
name: uid(),
};
}),
},
properties: {
column1: {
type: 'void',
title: 'Name',
'x-component': 'VoidTable.Column',
properties: {
name: {
type: 'string',
'x-component': 'Input',
'x-read-pretty': true,
},
},
},
},
},
},
};
export default () => {
return (
<SchemaComponentProvider components={{ Input, VoidTable }}>
<SchemaComponent schema={schema} />
</SchemaComponentProvider>
);
};
```
### 异步数据
<code src="./demos/demo1.tsx">
### CollectionProvider + ResourceActionProvider
<code src="./demos/demo2.tsx">
大纲
```tsx | pure
<CollectionProvider> {/* 属于哪个 collection */}
<ResourceActionProvider> {/* 发起请求，将请求结果存到上下文共享给子组件 */}
<SettingsForm /> {/* 区块的配置表单 */}
<ActionBar /> {/* 操作区 */}
<Table/> {/* 具体的组件，如 Table、Form、Calendar 等 */}
</ResourceActionProvider>
</CollectionProvider>
```
通过 CollectionProvider 和 ResourceActionProvider 来解决数据区块配置和数据请求，与具体组件无关，所有区块通用。在里面可以放任意东西。
嵌套使用的情况
```tsx | pure
<CollectionProvider> {/* 属于哪个 collection */}
<ResourceActionProvider> {/* 发起请求，将请求结果存到上下文共享给子组件 */}
<SettingsForm /> {/* 区块的配置表单 */}
<ActionBar /> {/* 操作区 */}
<Table> {/* 具体的组件 */}
<Table.Column>
<SettingsForm /> {/* 表格列的配置表单 */}
<RecordProvider> {/* 列表数据的行记录 */}
<CollectionField>
<CollectionFieldProvider> {/* 是哪个字段 */}
<CollectionProvider> {/* 关联字段的关联表 collection */}
<ResourceActionProvider> {/* 可能也会发起请求，如查看详情 */}
<SettingsForm />
<ActionBar />
<Table />
</ResourceActionProvider>
</CollectionProvider>
</CollectionFieldProvider>
</CollectionField>
</RecordProvider>
</Table.Column>
<Table.Column></Table.Column> {/* 会有很多列 */}
</Table>
</ResourceActionProvider>
</CollectionProvider>
```

1
packages/client/src/schema-component/antd/void-table/index.ts
View File

@ -1 +0,0 @@
export * from './VoidTable';

8
packages/client/src/schema-initializer/Initializers/FormActionInitializers.tsx
View File

@ -1,17 +1,17 @@
// 普通表单的操作配置
export const FormActionInitializers = {
title: 'Configure actions',
title: '{{t("Configure actions")}}',
items: [
{
type: 'itemGroup',
title: 'Enable actions',
title: '{{t("Enable actions")}}',
children: [
{
type: 'item',
title: '{{ t("Submit") }}',
title: '{{t("Submit")}}',
component: 'ActionInitializer',
schema: {
title: '{{ t("Submit") }}',
title: '{{t("Submit")}}',
'x-action': 'submit',
'x-align': 'left',
'x-component': 'Action',

10
packages/client/src/schema-initializer/Initializers/Items/TableBlockInitializer.tsx
View File

@ -23,7 +23,7 @@ const createSchema = (collectionName) => {
},
},
},
'x-designer': 'VoidTable.Designer',
'x-designer': 'Table.Void.Designer',
'x-component': 'CardItem',
properties: {
actions: {
@ -39,7 +39,7 @@ const createSchema = (collectionName) => {
},
table: {
type: 'void',
'x-component': 'VoidTable',
'x-component': 'Table.Void',
'x-component-props': {
rowKey: 'id',
rowSelection: {
@ -52,9 +52,9 @@ const createSchema = (collectionName) => {
actions: {
type: 'void',
title: '{{ t("Actions") }}',
'x-decorator': 'TableColumnActionBar',
'x-component': 'VoidTable.Column',
'x-designer': 'TableRecordActionDesigner',
'x-decorator': 'Table.Column.ActionBar',
'x-component': 'Table.Column',
'x-designer': 'Table.RowActionDesigner',
'x-initializer': 'TableRecordActionInitializers',
properties: {
actions: {

2
packages/client/src/schema-initializer/Initializers/TableColumnInitializers.tsx
View File

@ -14,7 +14,7 @@ export const TableColumnInitializers = (props: any) => {
type: 'void',
'x-decorator': 'TableColumnDecorator',
'x-designer': 'TableColumnDeigner',
'x-component': 'VoidTable.Column',
'x-component': 'Table.Column',
properties: {
[s.name]: {
'x-read-pretty': true,