fm453/nocobase
1
0
Fork 0
mirror of https://gitee.com/nocobase/nocobase.git synced 2025-07-01 18:52:20 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: virtual table

Browse Source
This commit is contained in:
chenos 2025-06-29 20:12:44 +08:00
parent d938325bc6
commit 0a85a5a83f
4 changed files with 27 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/core/client/src/flow/FlowPage.tsx
View File

@ -20,7 +20,7 @@ function InternalFlowPage({ uid, ...props }) {
return ( return (
<FlowModelRenderer <FlowModelRenderer
model={model} model={model}
fallback={<SkeletonFallback />} fallback={<SkeletonFallback style={{ margin: 16 }} />}
hideRemoveInSettings hideRemoveInSettings
showFlowSettings={{ showBackground: false, showBorder: false }} showFlowSettings={{ showBackground: false, showBorder: false }}
{...props} {...props}
@ -106,7 +106,7 @@ export const RemoteFlowModelRenderer = (props) => {
}, },
); );
if (loading || !data?.uid) { if (loading || !data?.uid) {
return <SkeletonFallback />; return <SkeletonFallback style={{ margin: 16 }} />;
} }
return <InternalFlowPage uid={data.uid} {...rest} />; return <InternalFlowPage uid={data.uid} {...rest} />;
}; };

4
packages/core/client/src/flow/components/SkeletonFallback.tsx
View File

@ -10,9 +10,9 @@
import { Card, Skeleton, Spin } from 'antd'; import { Card, Skeleton, Spin } from 'antd';
import React from 'react'; import React from 'react';
export function SkeletonFallback() { export function SkeletonFallback(props) {
return ( return (
<Card style={{ margin: 16 }}> <Card {...props}>
<Skeleton paragraph={{ rows: 3 }} /> <Skeleton paragraph={{ rows: 3 }} />
</Card> </Card>
); );

4
packages/core/client/src/flow/models/base/GridModel.tsx
View File

@ -18,12 +18,13 @@ import {
FlowsFloatContextMenu, FlowsFloatContextMenu,
useStepSettingContext, useStepSettingContext,
} from '@nocobase/flow-engine'; } from '@nocobase/flow-engine';
import { tval } from '@nocobase/utils/client';
import { Alert, Space } from 'antd'; import { Alert, Space } from 'antd';
import _ from 'lodash'; import _ from 'lodash';
import React, { useState } from 'react'; import React, { useState } from 'react';
import { tval } from '@nocobase/utils/client';
import { Grid } from '../../components/Grid'; import { Grid } from '../../components/Grid';
import JsonEditor from '../../components/JsonEditor'; import JsonEditor from '../../components/JsonEditor';
import { SkeletonFallback } from '../../components/SkeletonFallback';
import { BlockModel } from './BlockModel'; import { BlockModel } from './BlockModel';
type GridModelStructure = { type GridModelStructure = {
@ -111,6 +112,7 @@ export class GridModel extends FlowModel<GridModelStructure> {
<FlowModelRenderer <FlowModelRenderer
model={item} model={item}
key={item.uid} key={item.uid}
fallback={<SkeletonFallback />}
showFlowSettings={{ showBackground: false }} showFlowSettings={{ showBackground: false }}
showErrorFallback showErrorFallback
/> />

21
packages/core/client/src/flow/models/data-blocks/table/TableModel.tsx
View File

@ -22,6 +22,7 @@ import {
import { tval } from '@nocobase/utils/client'; import { tval } from '@nocobase/utils/client';
import { Card, Space, Spin, Table } from 'antd'; import { Card, Space, Spin, Table } from 'antd';
import classNames from 'classnames'; import classNames from 'classnames';
import { t } from 'i18next';
import _ from 'lodash'; import _ from 'lodash';
import React, { useRef } from 'react'; import React, { useRef } from 'react';
import { ActionModel } from '../../base/ActionModel'; import { ActionModel } from '../../base/ActionModel';
@ -257,13 +258,15 @@ export class TableModel extends DataBlockModel<TableModelStructure> {
tableLayout="fixed" tableLayout="fixed"
rowKey={this.collection.filterTargetKey} rowKey={this.collection.filterTargetKey}
rowSelection={{ rowSelection={{
columnWidth: 50,
type: 'checkbox', type: 'checkbox',
onChange: (_, selectedRows) => { onChange: (_, selectedRows) => {
this.resource.setSelectedRows(selectedRows); this.resource.setSelectedRows(selectedRows);
}, },
selectedRowKeys: this.resource.getSelectedRows().map((row) => row.id), selectedRowKeys: this.resource.getSelectedRows().map((row) => row.id),
}} }}
scroll={{ x: 'max-content', y: 'calc(100vh - 300px)' }} virtual={this.props.virtual}
scroll={{ x: 'max-content', y: 'calc(100vh - 200px)' }}
dataSource={this.resource.getData()} dataSource={this.resource.getData()}
columns={this.getColumns()} columns={this.getColumns()}
pagination={{ pagination={{
@ -272,6 +275,7 @@ export class TableModel extends DataBlockModel<TableModelStructure> {
total: this.resource.getMeta('count'), total: this.resource.getMeta('count'),
}} }}
onChange={(pagination) => { onChange={(pagination) => {
console.log('onChange pagination:', pagination);
this.resource.setPage(pagination.current); this.resource.setPage(pagination.current);
this.resource.setPageSize(pagination.pageSize); this.resource.setPageSize(pagination.pageSize);
this.resource.loading = true; this.resource.loading = true;
@ -288,6 +292,21 @@ TableModel.registerFlow({
key: 'default', key: 'default',
auto: true, auto: true,
steps: { steps: {
virtual: {
title: tval('Virtual'),
uiSchema: {
virtual: {
'x-component': 'Switch',
'x-decorator': 'FormItem',
},
},
defaultParams: {
virtual: false,
},
handler(ctx, params) {
ctx.model.setProps('virtual', params.virtual);
},
},
enableEditable: { enableEditable: {
title: tval('Editable'), title: tval('Editable'),
uiSchema: { uiSchema: {