From dc21859d550b7e09e341bc55f1dc6b10cc0cf0c6 Mon Sep 17 00:00:00 2001 From: chenos Date: Thu, 24 Feb 2022 15:16:21 +0800 Subject: [PATCH] feat: improve code --- packages/actions/src/actions/list.ts | 7 +- .../Configuration/schemas/roleCollections.ts | 12 +- .../src/acl/Configuration/schemas/roles.ts | 14 +- .../client/src/api-client/hooks/useRequest.ts | 8 +- .../Configuration/AddFieldAction.tsx | 2 +- .../Configuration/ArrayTable.tsx | 25 -- .../Configuration/EditFieldAction.tsx | 2 +- .../Configuration/schemas/collectionFields.ts | 23 +- .../Configuration/schemas/collections.ts | 15 +- .../ResourceActionProvider.tsx | 10 +- .../src/collection-manager/action-hooks.ts | 23 +- .../antd/array-table/index.md | 45 ---- .../antd/array-table/index.ts | 6 - .../src/schema-component/antd/form/Form.tsx | 7 +- .../antd/grid/demos/demo3.tsx | 5 +- .../client/src/schema-component/antd/index.ts | 4 +- .../antd/row-selection/demos/apiClient.ts | 35 --- .../antd/row-selection/demos/demo1.tsx | 88 ------ .../antd/row-selection/index.md | 90 ------- .../antd/row-selection/index.ts | 1 - .../ArrayTable.tsx => table/Table.Array.tsx} | 17 +- .../Table.Column.ActionBar.tsx} | 0 .../Table.Column.Decorator.tsx} | 0 .../Table.Column.Deigner.tsx} | 0 .../antd/table/Table.Column.tsx | 7 + .../Table.RowActionDesigner.tsx} | 3 +- .../Table.RowSelection.tsx} | 13 +- .../Table.Void.Designer.tsx} | 2 +- .../VoidTable.tsx => table/Table.Void.tsx} | 40 +-- .../{array-table => table}/demos/demo1.tsx | 32 +-- .../antd/table/demos/demo2.tsx | 47 ++++ .../antd/table/demos/demo3.tsx | 47 ++++ .../src/schema-component/antd/table/index.md | 20 ++ .../src/schema-component/antd/table/index.tsx | 23 ++ .../antd/void-table/demos/apiClient.ts | 39 --- .../antd/void-table/demos/demo1.tsx | 87 ------ .../antd/void-table/demos/demo2.tsx | 238 ----------------- .../schema-component/antd/void-table/index.md | 251 ------------------ .../schema-component/antd/void-table/index.ts | 1 - .../Initializers/FormActionInitializers.tsx | 8 +- .../Items/TableBlockInitializer.tsx | 10 +- .../Initializers/TableColumnInitializers.tsx | 2 +- 42 files changed, 272 insertions(+), 1037 deletions(-) delete mode 100644 packages/client/src/collection-manager/Configuration/ArrayTable.tsx delete mode 100644 packages/client/src/schema-component/antd/array-table/index.md delete mode 100644 packages/client/src/schema-component/antd/array-table/index.ts delete mode 100644 packages/client/src/schema-component/antd/row-selection/demos/apiClient.ts delete mode 100644 packages/client/src/schema-component/antd/row-selection/demos/demo1.tsx delete mode 100644 packages/client/src/schema-component/antd/row-selection/index.md delete mode 100644 packages/client/src/schema-component/antd/row-selection/index.ts rename packages/client/src/schema-component/antd/{array-table/ArrayTable.tsx => table/Table.Array.tsx} (86%) rename packages/client/src/schema-component/antd/{array-table/TableColumnActionBar.tsx => table/Table.Column.ActionBar.tsx} (100%) rename packages/client/src/schema-component/antd/{array-table/TableColumnDecorator.tsx => table/Table.Column.Decorator.tsx} (100%) rename packages/client/src/schema-component/antd/{array-table/TableColumnDeigner.tsx => table/Table.Column.Deigner.tsx} (100%) create mode 100644 packages/client/src/schema-component/antd/table/Table.Column.tsx rename packages/client/src/schema-component/antd/{array-table/TableRecordActionDesigner.tsx => table/Table.RowActionDesigner.tsx} (83%) rename packages/client/src/schema-component/antd/{row-selection/RowSelection.tsx => table/Table.RowSelection.tsx} (69%) rename packages/client/src/schema-component/antd/{void-table/VoidTable.Designer.tsx => table/Table.Void.Designer.tsx} (91%) rename packages/client/src/schema-component/antd/{void-table/VoidTable.tsx => table/Table.Void.tsx} (75%) rename packages/client/src/schema-component/antd/{array-table => table}/demos/demo1.tsx (52%) create mode 100644 packages/client/src/schema-component/antd/table/demos/demo2.tsx create mode 100644 packages/client/src/schema-component/antd/table/demos/demo3.tsx create mode 100644 packages/client/src/schema-component/antd/table/index.md create mode 100644 packages/client/src/schema-component/antd/table/index.tsx delete mode 100644 packages/client/src/schema-component/antd/void-table/demos/apiClient.ts delete mode 100644 packages/client/src/schema-component/antd/void-table/demos/demo1.tsx delete mode 100644 packages/client/src/schema-component/antd/void-table/demos/demo2.tsx delete mode 100644 packages/client/src/schema-component/antd/void-table/index.md delete mode 100644 packages/client/src/schema-component/antd/void-table/index.ts diff --git a/packages/actions/src/actions/list.ts b/packages/actions/src/actions/list.ts index dbf58e65b..f16768d6a 100644 --- a/packages/actions/src/actions/list.ts +++ b/packages/actions/src/actions/list.ts @@ -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), }; } diff --git a/packages/client/src/acl/Configuration/schemas/roleCollections.ts b/packages/client/src/acl/Configuration/schemas/roleCollections.ts index 7522dcb43..16f72a73b 100644 --- a/packages/client/src/acl/Configuration/schemas/roleCollections.ts +++ b/packages/client/src/acl/Configuration/schemas/roleCollections.ts @@ -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', diff --git a/packages/client/src/acl/Configuration/schemas/roles.ts b/packages/client/src/acl/Configuration/schemas/roles.ts index 805a6487d..34b54b7ff 100644 --- a/packages/client/src/acl/Configuration/schemas/roles.ts +++ b/packages/client/src/acl/Configuration/schemas/roles.ts @@ -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', diff --git a/packages/client/src/api-client/hooks/useRequest.ts b/packages/client/src/api-client/hooks/useRequest.ts index be7e23a42..cdd9e0330 100644 --- a/packages/client/src/api-client/hooks/useRequest.ts +++ b/packages/client/src/api-client/hooks/useRequest.ts @@ -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

( service: AxiosRequestConfig

| ResourceActionOptions

| FunctionService, options: Options & { 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

( } }, }); - return result; + return { ...result, state, setState }; } const result = useReq( async (params = {}) => { @@ -56,5 +60,5 @@ export function useRequest

( }, }, ); - return result; + return { ...result, state, setState }; } diff --git a/packages/client/src/collection-manager/Configuration/AddFieldAction.tsx b/packages/client/src/collection-manager/Configuration/AddFieldAction.tsx index 1fce39b09..4ca2d3f36 100644 --- a/packages/client/src/collection-manager/Configuration/AddFieldAction.tsx +++ b/packages/client/src/collection-manager/Configuration/AddFieldAction.tsx @@ -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 => { diff --git a/packages/client/src/collection-manager/Configuration/ArrayTable.tsx b/packages/client/src/collection-manager/Configuration/ArrayTable.tsx deleted file mode 100644 index ae32a36c5..000000000 --- a/packages/client/src/collection-manager/Configuration/ArrayTable.tsx +++ /dev/null @@ -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 ( - { - console.log('onChange', value); - onChange(value); - }} - /> - ); -}); - -ArrayTable.displayName = 'ArrayTable' - -ArrayTable.Column = () => { - return -} - -ArrayBase.mixin(ArrayTable) - diff --git a/packages/client/src/collection-manager/Configuration/EditFieldAction.tsx b/packages/client/src/collection-manager/Configuration/EditFieldAction.tsx index 07b9021d6..cff9ed931 100644 --- a/packages/client/src/collection-manager/Configuration/EditFieldAction.tsx +++ b/packages/client/src/collection-manager/Configuration/EditFieldAction.tsx @@ -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) { diff --git a/packages/client/src/collection-manager/Configuration/schemas/collectionFields.ts b/packages/client/src/collection-manager/Configuration/schemas/collectionFields.ts index 60aaebab3..f394bcda7 100644 --- a/packages/client/src/collection-manager/Configuration/schemas/collectionFields.ts +++ b/packages/client/src/collection-manager/Configuration/schemas/collectionFields.ts @@ -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', diff --git a/packages/client/src/collection-manager/Configuration/schemas/collections.ts b/packages/client/src/collection-manager/Configuration/schemas/collections.ts index 2abdeb56a..ec99dc5ec 100644 --- a/packages/client/src/collection-manager/Configuration/schemas/collections.ts +++ b/packages/client/src/collection-manager/Configuration/schemas/collections.ts @@ -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', diff --git a/packages/client/src/collection-manager/ResourceActionProvider.tsx b/packages/client/src/collection-manager/ResourceActionProvider.tsx index 7cd7ddd04..8dbe04876 100644 --- a/packages/client/src/collection-manager/ResourceActionProvider.tsx +++ b/packages/client/src/collection-manager/ResourceActionProvider.tsx @@ -4,7 +4,7 @@ import { useCollectionManager } from '.'; import { CollectionProvider, useRecord } from '..'; import { useAPIClient, useRequest } from '../api-client'; -export const ResourceActionContext = createContext>(null); +export const ResourceActionContext = createContext & { 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', + }; }; diff --git a/packages/client/src/collection-manager/action-hooks.ts b/packages/client/src/collection-manager/action-hooks.ts index 6b172787b..05e0fc769 100644 --- a/packages/client/src/collection-manager/action-hooks.ts +++ b/packages/client/src/collection-manager/action-hooks.ts @@ -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(); + }, + }; +}; diff --git a/packages/client/src/schema-component/antd/array-table/index.md b/packages/client/src/schema-component/antd/array-table/index.md deleted file mode 100644 index dc0ab5946..000000000 --- a/packages/client/src/schema-component/antd/array-table/index.md +++ /dev/null @@ -1,45 +0,0 @@ ---- -nav: - path: /client -group: - path: /schema-components ---- - -# ArrayTable - 表格（数据录入） 待定 - -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 - - \ No newline at end of file diff --git a/packages/client/src/schema-component/antd/array-table/index.ts b/packages/client/src/schema-component/antd/array-table/index.ts deleted file mode 100644 index 76cf14f72..000000000 --- a/packages/client/src/schema-component/antd/array-table/index.ts +++ /dev/null @@ -1,6 +0,0 @@ -export * from './ArrayTable'; -export * from './TableColumnActionBar'; -export * from './TableColumnDecorator'; -export * from './TableColumnDeigner'; -export * from './TableRecordActionDesigner'; - diff --git a/packages/client/src/schema-component/antd/form/Form.tsx b/packages/client/src/schema-component/antd/form/Form.tsx index d92717147..79f557983 100644 --- a/packages/client/src/schema-component/antd/form/Form.tsx +++ b/packages/client/src/schema-component/antd/form/Form.tsx @@ -104,7 +104,12 @@ Form.Designer = () => { const { name, title } = useCollection(); return ( - + ); }; diff --git a/packages/client/src/schema-component/antd/grid/demos/demo3.tsx b/packages/client/src/schema-component/antd/grid/demos/demo3.tsx index a7da5e35f..05616e8b2 100644 --- a/packages/client/src/schema-component/antd/grid/demos/demo3.tsx +++ b/packages/client/src/schema-component/antd/grid/demos/demo3.tsx @@ -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 ( - + diff --git a/packages/client/src/schema-component/antd/index.ts b/packages/client/src/schema-component/antd/index.ts index 3172528c1..476de87b3 100644 --- a/packages/client/src/schema-component/antd/index.ts +++ b/packages/client/src/schema-component/antd/index.ts @@ -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'; diff --git a/packages/client/src/schema-component/antd/row-selection/demos/apiClient.ts b/packages/client/src/schema-component/antd/row-selection/demos/apiClient.ts deleted file mode 100644 index 4ff7f027b..000000000 --- a/packages/client/src/schema-component/antd/row-selection/demos/apiClient.ts +++ /dev/null @@ -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, - }, - }, - ]; -}); - diff --git a/packages/client/src/schema-component/antd/row-selection/demos/demo1.tsx b/packages/client/src/schema-component/antd/row-selection/demos/demo1.tsx deleted file mode 100644 index c3d0c471e..000000000 --- a/packages/client/src/schema-component/antd/row-selection/demos/demo1.tsx +++ /dev/null @@ -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 ( -

{ - const service = api.service('input'); - if (!service) { - return; - } - service.run({ ...service.params[0], page: 3 }); - }} - > - Hello -
- ); -}; - -export default () => { - return ( - - - - - - ); -}; diff --git a/packages/client/src/schema-component/antd/row-selection/index.md b/packages/client/src/schema-component/antd/row-selection/index.md deleted file mode 100644 index 82ce5b099..000000000 --- a/packages/client/src/schema-component/antd/row-selection/index.md +++ /dev/null @@ -1,90 +0,0 @@ ---- -nav: - path: /client -group: - path: /schema-components ---- - -# RowSelection - 行选择器 待定 - -用表格视图展示可选项数据，功能上与 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 - - diff --git a/packages/client/src/schema-component/antd/row-selection/index.ts b/packages/client/src/schema-component/antd/row-selection/index.ts deleted file mode 100644 index 0569ee0ac..000000000 --- a/packages/client/src/schema-component/antd/row-selection/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './RowSelection'; diff --git a/packages/client/src/schema-component/antd/array-table/ArrayTable.tsx b/packages/client/src/schema-component/antd/table/Table.Array.tsx similarity index 86% rename from packages/client/src/schema-component/antd/array-table/ArrayTable.tsx rename to packages/client/src/schema-component/antd/table/Table.Array.tsx index ac1dbf00d..51fe8409d 100644 --- a/packages/client/src/schema-component/antd/array-table/ArrayTable.tsx +++ b/packages/client/src/schema-component/antd/table/Table.Array.tsx @@ -47,11 +47,6 @@ const useTableColumns = () => { }); }; -type ArrayTableType = React.FC & { - Column?: React.FC; - 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 = observer((props) => { const field = useField(); const columns = useTableColumns(); const { onChange, ...others } = props; @@ -98,13 +93,3 @@ export const ArrayTable: ArrayTableType = observer((props) => { ); }); - -ArrayTable.Column = (props) => { - const field = useField(); - console.log('field.title', field.title); - return
{field.title}
; -}; - -ArrayTable.mixin = (Table: any) => { - Table.Column = ArrayTable.Column; -}; diff --git a/packages/client/src/schema-component/antd/array-table/TableColumnActionBar.tsx b/packages/client/src/schema-component/antd/table/Table.Column.ActionBar.tsx similarity index 100% rename from packages/client/src/schema-component/antd/array-table/TableColumnActionBar.tsx rename to packages/client/src/schema-component/antd/table/Table.Column.ActionBar.tsx diff --git a/packages/client/src/schema-component/antd/array-table/TableColumnDecorator.tsx b/packages/client/src/schema-component/antd/table/Table.Column.Decorator.tsx similarity index 100% rename from packages/client/src/schema-component/antd/array-table/TableColumnDecorator.tsx rename to packages/client/src/schema-component/antd/table/Table.Column.Decorator.tsx diff --git a/packages/client/src/schema-component/antd/array-table/TableColumnDeigner.tsx b/packages/client/src/schema-component/antd/table/Table.Column.Deigner.tsx similarity index 100% rename from packages/client/src/schema-component/antd/array-table/TableColumnDeigner.tsx rename to packages/client/src/schema-component/antd/table/Table.Column.Deigner.tsx diff --git a/packages/client/src/schema-component/antd/table/Table.Column.tsx b/packages/client/src/schema-component/antd/table/Table.Column.tsx new file mode 100644 index 000000000..7c360ca5a --- /dev/null +++ b/packages/client/src/schema-component/antd/table/Table.Column.tsx @@ -0,0 +1,7 @@ +import { useField } from '@formily/react'; +import React from 'react'; + +export const TableColumn = (props) => { + const field = useField(); + return
{field.title}
; +}; diff --git a/packages/client/src/schema-component/antd/array-table/TableRecordActionDesigner.tsx b/packages/client/src/schema-component/antd/table/Table.RowActionDesigner.tsx similarity index 83% rename from packages/client/src/schema-component/antd/array-table/TableRecordActionDesigner.tsx rename to packages/client/src/schema-component/antd/table/Table.RowActionDesigner.tsx index 00e8e46cf..73aa6d901 100644 --- a/packages/client/src/schema-component/antd/array-table/TableRecordActionDesigner.tsx +++ b/packages/client/src/schema-component/antd/table/Table.RowActionDesigner.tsx @@ -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 (
diff --git a/packages/client/src/schema-component/antd/row-selection/RowSelection.tsx b/packages/client/src/schema-component/antd/table/Table.RowSelection.tsx similarity index 69% rename from packages/client/src/schema-component/antd/row-selection/RowSelection.tsx rename to packages/client/src/schema-component/antd/table/Table.RowSelection.tsx index 447a027a8..1a541ab21 100644 --- a/packages/client/src/schema-component/antd/row-selection/RowSelection.tsx +++ b/packages/client/src/schema-component/antd/table/Table.RowSelection.tsx @@ -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 & { value?: any; onChange?: any; objectValue?: boolean; }; +type Props = TableProps & { 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(); - 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 ; + return ; }); - -VoidTable.mixin(RowSelection); diff --git a/packages/client/src/schema-component/antd/void-table/VoidTable.Designer.tsx b/packages/client/src/schema-component/antd/table/Table.Void.Designer.tsx similarity index 91% rename from packages/client/src/schema-component/antd/void-table/VoidTable.Designer.tsx rename to packages/client/src/schema-component/antd/table/Table.Void.Designer.tsx index d58f0e843..dde65b4c1 100644 --- a/packages/client/src/schema-component/antd/void-table/VoidTable.Designer.tsx +++ b/packages/client/src/schema-component/antd/table/Table.Void.Designer.tsx @@ -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 ( diff --git a/packages/client/src/schema-component/antd/void-table/VoidTable.tsx b/packages/client/src/schema-component/antd/table/Table.Void.tsx similarity index 75% rename from packages/client/src/schema-component/antd/void-table/VoidTable.tsx rename to packages/client/src/schema-component/antd/table/Table.Void.tsx index 886728323..0ed9bb704 100644 --- a/packages/client/src/schema-component/antd/void-table/VoidTable.tsx +++ b/packages/client/src/schema-component/antd/table/Table.Void.tsx @@ -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 & { +type TableVoidProps = TableProps & { request?: any; - useDataSource?: (options?: Options & { uid?: string }, props?: any) => Result; -}; - -type VoidTableType = React.FC & { - Column?: React.FC; - Designer?: any; - mixin?: (T: any) => void; + useDataSource?: ( + options?: Options & { uid?: string }, + props?: any, + ) => Result & { state?: any; setState?: any }; }; const usePaginationProps = (props: TableProps & { 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 = observer((props) => { const { useDataSource = useDef } = props; const field = useField(); 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 ( - + ); }); - -VoidTable.Designer = VoidTableDesigner; -VoidTable.mixin = ArrayTable.mixin; -ArrayTable.mixin(VoidTable); diff --git a/packages/client/src/schema-component/antd/array-table/demos/demo1.tsx b/packages/client/src/schema-component/antd/table/demos/demo1.tsx similarity index 52% rename from packages/client/src/schema-component/antd/array-table/demos/demo1.tsx rename to packages/client/src/schema-component/antd/table/demos/demo1.tsx index 5eec566fb..cda89d513 100644 --- a/packages/client/src/schema-component/antd/array-table/demos/demo1.tsx +++ b/packages/client/src/schema-component/antd/table/demos/demo1.tsx @@ -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 ( - + ); diff --git a/packages/client/src/schema-component/antd/table/demos/demo2.tsx b/packages/client/src/schema-component/antd/table/demos/demo2.tsx new file mode 100644 index 000000000..f2d34d182 --- /dev/null +++ b/packages/client/src/schema-component/antd/table/demos/demo2.tsx @@ -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 ( + + + + ); +}; diff --git a/packages/client/src/schema-component/antd/table/demos/demo3.tsx b/packages/client/src/schema-component/antd/table/demos/demo3.tsx new file mode 100644 index 000000000..2dd2fa34b --- /dev/null +++ b/packages/client/src/schema-component/antd/table/demos/demo3.tsx @@ -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 ( + + + + ); +}; diff --git a/packages/client/src/schema-component/antd/table/index.md b/packages/client/src/schema-component/antd/table/index.md new file mode 100644 index 000000000..0c38c56ca --- /dev/null +++ b/packages/client/src/schema-component/antd/table/index.md @@ -0,0 +1,20 @@ +# Table + +表格有三个使用场景 + +- `Table.Void` +- `Table.RowSelection` +- `Table.Array` + + +## Table.Array + + + +## Table.Void + + + +## Table.RowSelection + + diff --git a/packages/client/src/schema-component/antd/table/index.tsx b/packages/client/src/schema-component/antd/table/index.tsx new file mode 100644 index 000000000..4729f4f59 --- /dev/null +++ b/packages/client/src/schema-component/antd/table/index.tsx @@ -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; diff --git a/packages/client/src/schema-component/antd/void-table/demos/apiClient.ts b/packages/client/src/schema-component/antd/void-table/demos/apiClient.ts deleted file mode 100644 index ffc6a7220..000000000 --- a/packages/client/src/schema-component/antd/void-table/demos/apiClient.ts +++ /dev/null @@ -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, - }, - }, - ]; -}); - diff --git a/packages/client/src/schema-component/antd/void-table/demos/demo1.tsx b/packages/client/src/schema-component/antd/void-table/demos/demo1.tsx deleted file mode 100644 index 6ec03c79d..000000000 --- a/packages/client/src/schema-component/antd/void-table/demos/demo1.tsx +++ /dev/null @@ -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 ( -
{ - const service = api.service('input'); - if (!service) { - return; - } - service.run({ ...service.params[0], page: 3 }); - }} - > - Hello -
- ); -}; - -export default () => { - return ( - - - - - - ); -}; diff --git a/packages/client/src/schema-component/antd/void-table/demos/demo2.tsx b/packages/client/src/schema-component/antd/void-table/demos/demo2.tsx deleted file mode 100644 index 05f20c0df..000000000 --- a/packages/client/src/schema-component/antd/void-table/demos/demo2.tsx +++ /dev/null @@ -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 ( -
- -
-
-
- ); -}); - -export default () => { - return ( - - - - - - - - - - ); -}; diff --git a/packages/client/src/schema-component/antd/void-table/index.md b/packages/client/src/schema-component/antd/void-table/index.md deleted file mode 100644 index f78b924e2..000000000 --- a/packages/client/src/schema-component/antd/void-table/index.md +++ /dev/null @@ -1,251 +0,0 @@ ---- -nav: - path: /client -group: - path: /schema-components ---- - -# VoidTable - 表格（数据展示） 待定 - -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 ( - - - - ); -}; -``` - -### 分页 - -```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 ( - - - - ); -}; -``` - -### 不分页 - -```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 ( - - - - ); -}; -``` - -### 异步数据 - - - -### CollectionProvider + ResourceActionProvider - - - -大纲 - -```tsx | pure - {/* 属于哪个 collection */} - {/* 发起请求，将请求结果存到上下文共享给子组件 */} - {/* 区块的配置表单 */} - {/* 操作区 */} - {/* 具体的组件，如 Table、Form、Calendar 等 */} - - -``` - -通过 CollectionProvider 和 ResourceActionProvider 来解决数据区块配置和数据请求，与具体组件无关，所有区块通用。在里面可以放任意东西。 - -嵌套使用的情况 - -```tsx | pure - {/* 属于哪个 collection */} - {/* 发起请求，将请求结果存到上下文共享给子组件 */} - {/* 区块的配置表单 */} - {/* 操作区 */} -
{/* 具体的组件 */} - - {/* 表格列的配置表单 */} - {/* 列表数据的行记录 */} - - {/* 是哪个字段 */} - {/* 关联字段的关联表 collection */} - {/* 可能也会发起请求，如查看详情 */} - - -
- - - - - - - {/* 会有很多列 */} -
- - -``` diff --git a/packages/client/src/schema-component/antd/void-table/index.ts b/packages/client/src/schema-component/antd/void-table/index.ts deleted file mode 100644 index 4679e657a..000000000 --- a/packages/client/src/schema-component/antd/void-table/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './VoidTable'; diff --git a/packages/client/src/schema-initializer/Initializers/FormActionInitializers.tsx b/packages/client/src/schema-initializer/Initializers/FormActionInitializers.tsx index 26e85e5c5..81fa8b2c4 100644 --- a/packages/client/src/schema-initializer/Initializers/FormActionInitializers.tsx +++ b/packages/client/src/schema-initializer/Initializers/FormActionInitializers.tsx @@ -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', diff --git a/packages/client/src/schema-initializer/Initializers/Items/TableBlockInitializer.tsx b/packages/client/src/schema-initializer/Initializers/Items/TableBlockInitializer.tsx index 6eb622e2c..5f739cb86 100644 --- a/packages/client/src/schema-initializer/Initializers/Items/TableBlockInitializer.tsx +++ b/packages/client/src/schema-initializer/Initializers/Items/TableBlockInitializer.tsx @@ -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: { diff --git a/packages/client/src/schema-initializer/Initializers/TableColumnInitializers.tsx b/packages/client/src/schema-initializer/Initializers/TableColumnInitializers.tsx index 09c9f2070..1b6864e89 100644 --- a/packages/client/src/schema-initializer/Initializers/TableColumnInitializers.tsx +++ b/packages/client/src/schema-initializer/Initializers/TableColumnInitializers.tsx @@ -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,