diff --git a/packages/core/client/src/flow/models/data-blocks/tabulator/TabulatorModel.tsx b/packages/core/client/src/flow/models/data-blocks/tabulator/TabulatorModel.tsx index 224eee78a1..4dc84616a1 100644 --- a/packages/core/client/src/flow/models/data-blocks/tabulator/TabulatorModel.tsx +++ b/packages/core/client/src/flow/models/data-blocks/tabulator/TabulatorModel.tsx @@ -18,10 +18,10 @@ import { FlowsFloatContextMenu, MultiRecordResource, } from '@nocobase/flow-engine'; +import { tval } from '@nocobase/utils/client'; import { Button, Card, Pagination, Skeleton, Space } from 'antd'; import _ from 'lodash'; import React from 'react'; -import { tval } from '@nocobase/utils/client'; import { ColumnDefinition, TabulatorFull as Tabulator } from 'tabulator-tables'; import { ActionModel } from '../../base/ActionModel'; import { DataBlockModel } from '../../base/BlockModel'; @@ -77,13 +77,22 @@ TabulatorColumnModel.registerFlow({ steps: { step1: { async handler(ctx, params) { - if (!params.fieldPath) { - return; + if (!params.dataSourceKey || !params.collectionName || !params.fieldPath) { + throw new Error('dataSourceKey, collectionName and fieldPath are required parameters'); + } + if (!ctx.shared.currentBlockModel) { + throw new Error('Current block model is not set in shared context'); } if (ctx.model.collectionField) { return; } - const field = ctx.globals.dataSourceManager.getCollectionField(params.fieldPath); + const { dataSourceKey, collectionName, fieldPath } = params; + const field = ctx.globals.dataSourceManager.getCollectionField( + `${dataSourceKey}.${collectionName}.${fieldPath}`, + ); + if (!field) { + throw new Error(`Collection field not found: ${dataSourceKey}.${collectionName}.${fieldPath}`); + } ctx.model.collectionField = field; ctx.model.fieldPath = params.fieldPath; ctx.model.setProps('title', field.title); @@ -100,13 +109,7 @@ const Columns = observer(({ record, model, index }) => { {model.mapSubModels('actions', (action: ActionModel) => { const fork = action.createFork({}, `${index}`); return ( - } - showFlowSettings - key={fork.uid} - model={fork} - extraContext={{ currentRecord: record }} - /> + } showFlowSettings key={fork.uid} model={fork} /> ); })} @@ -170,8 +173,8 @@ export class TabulatorModel extends DataBlockModel { stepParams: { default: { step1: { - collectionName: this.collection.name, dataSourceKey: this.collection.dataSourceKey, + collectionName: this.collection.name, fieldPath, }, }, @@ -179,12 +182,12 @@ export class TabulatorModel extends DataBlockModel { subModels: { field: { // @ts-ignore - use: defaultOptions.use, + use: defaultOptions.use as any, stepParams: { default: { step1: { - collectionName: this.collection.name, dataSourceKey: this.collection.dataSourceKey, + collectionName: this.collection.name, fieldPath, }, }, @@ -202,8 +205,10 @@ export class TabulatorModel extends DataBlockModel { }, ]} onModelCreated={async (model: TabulatorColumnModel) => { - model.setSharedContext({ currentBlockModel: this }); await model.applyAutoFlows(); + }} + onSubModelAdded={async (model: TabulatorColumnModel) => { + this.addAppends(model.fieldPath, true); this.initTabulator(); }} />, @@ -224,7 +229,7 @@ export class TabulatorModel extends DataBlockModel { }); this.tabulator = new Tabulator(this.tabulatorRef.current, { layout: 'fitColumns', // fit columns to width of table (optional) - // height: '75vh', + height: '75vh', renderHorizontal: 'virtual', movableColumns: true, movableRows: true, @@ -256,14 +261,14 @@ export class TabulatorModel extends DataBlockModel { render() { return ( - + {/* {this.mapSubModels('actions', (action) => ( ))} - + */}
{ if (ctx.model.tabulator) { ctx.model.initTabulator(); @@ -332,6 +337,29 @@ TabulatorModel.registerFlow({ }); }, }, + editPageSize: { + title: tval('Edit page size'), + uiSchema: { + pageSize: { + 'x-component': 'Select', + 'x-decorator': 'FormItem', + enum: [ + { label: '10', value: 10 }, + { label: '20', value: 20 }, + { label: '50', value: 50 }, + { label: '100', value: 100 }, + { label: '200', value: 200 }, + ], + }, + }, + defaultParams: { + pageSize: 20, + }, + handler(ctx, params) { + ctx.model.resource.loading = true; + ctx.model.resource.setPageSize(params.pageSize); + }, + }, step2: { handler(ctx, params) { ctx.reactView.onRefReady(ctx.model.tabulatorRef, (el) => { @@ -339,6 +367,11 @@ TabulatorModel.registerFlow({ }); }, }, + refresh: { + async handler(ctx, params) { + await ctx.model.resource.refresh(); + }, + }, }, }); @@ -346,7 +379,7 @@ TabulatorModel.define({ title: tval('Tabulator'), group: tval('Content'), requiresDataSource: true, - hide: true, + // hide: true, defaultOptions: { use: 'TabulatorModel', }, diff --git a/packages/core/flow-engine/src/components/subModel/LazyDropdown.tsx b/packages/core/flow-engine/src/components/subModel/LazyDropdown.tsx index f3117ac730..5d86876a5e 100644 --- a/packages/core/flow-engine/src/components/subModel/LazyDropdown.tsx +++ b/packages/core/flow-engine/src/components/subModel/LazyDropdown.tsx @@ -7,10 +7,11 @@ * For more information, please refer to: https://www.nocobase.com/agreement. */ -import { Dropdown, DropdownProps, Input, Spin, Empty, InputProps } from 'antd'; -import React, { useEffect, useState, useMemo, useRef, FC } from 'react'; import { css } from '@emotion/css'; +import { Dropdown, DropdownProps, Empty, Input, InputProps, Spin } from 'antd'; +import React, { FC, useEffect, useMemo, useRef, useState } from 'react'; import { useFlowModel } from '../../hooks'; +import { useFlowEngine } from '../../provider'; // ==================== Types ==================== @@ -257,13 +258,13 @@ const createEmptyItem = (itemKey: string, t: (key: string) => string) => ({ // ==================== Main Component ==================== const LazyDropdown: React.FC & { menu: LazyDropdownMenuProps }> = ({ menu, ...props }) => { - const model = useFlowModel(); + const engine = useFlowEngine(); const [menuVisible, setMenuVisible] = useState(false); const [openKeys, setOpenKeys] = useState>(new Set()); const [rootItems, setRootItems] = useState([]); const [rootLoading, setRootLoading] = useState(false); const dropdownMaxHeight = useNiceDropdownMaxHeight(); - const t = model.translate; + const t = engine.translate.bind(engine); // 使用自定义 hooks const { loadedChildren, loadingKeys, handleLoadChildren } = useAsyncMenuItems(menuVisible, rootItems);