Merge branch 'fields-flow-modal' of github.com:nocobase/nocobase into fields-flow-modal

# Conflicts:
#	packages/core/client/src/flow/components/EllipsisWithTooltip.tsx
#	packages/core/client/src/flow/components/ExpiresRadio/index.tsx
#	packages/core/client/src/flow/components/index.tsx
#	packages/core/client/src/flow/models/data-blocks/form/components/EllipsisWithTooltip.tsx
#	packages/core/client/src/flow/models/data-blocks/form/components/ExpiresRadio/index.tsx
#	packages/core/client/src/flow/models/data-blocks/form/components/index.tsx
#	packages/core/client/src/flow/models/data-blocks/form/fields/AssociationSelectFieldModel/index.tsx
#	packages/core/client/src/flow/models/data-blocks/form/fields/DateTimeFieldModel/DateTimeFieldModel.tsx
#	packages/core/client/src/flow/models/data-blocks/form/fields/DateTimeFieldModel/UnixTimestampFieldModel.tsx
#	packages/core/client/src/flow/models/data-blocks/form/fields/MarkdownFieldModel/index.tsx
#	packages/core/client/src/flow/models/form/components/EllipsisWithTooltip.tsx
#	packages/core/client/src/flow/models/form/components/ExpiresRadio/index.tsx
#	packages/core/client/src/flow/models/form/components/index.tsx
This commit is contained in:
chenos 2025-06-19 23:13:50 +08:00
commit 772ff9daad
23 changed files with 652 additions and 377 deletions

View File

@ -12,7 +12,7 @@ import dayjs from 'dayjs';
import { connect, mapProps } from '@formily/react';
import { useBoolean } from 'ahooks';
import { Input, Radio, Space, theme } from 'antd';
import React, { useEffect, useState } from 'react';
import React, { useEffect, useState, useMemo } from 'react';
const date = dayjs();
@ -51,6 +51,7 @@ const DateTimeFormatPreview = ({ content }) => {
};
const InternalExpiresRadio = (props) => {
console.log(props);
const { onChange, defaultValue, formats, picker } = props;
const [isCustom, { setFalse, setTrue }] = useBoolean(props.value && !formats.includes(props.value));
const [targetValue, setTargetValue] = useState(
@ -124,9 +125,16 @@ const InternalExpiresRadio = (props) => {
const ExpiresRadio = connect(
InternalExpiresRadio,
mapProps({
mapProps(
{
dataSource: 'options',
}),
},
(props) => {
return {
...props,
};
},
),
);
export { ExpiresRadio, DateFormatCom };

View File

@ -0,0 +1,169 @@
/**
* This file is part of the NocoBase (R) project.
* Copyright (c) 2020-2024 NocoBase Co., Ltd.
* Authors: NocoBase Team.
*
* This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
* For more information, please refer to: https://www.nocobase.com/agreement.
*/
import { css } from '@emotion/css';
import { getPickerFormat } from '@nocobase/utils/client';
import { ExpiresRadio, DateFormatCom } from '../components';
export const DateTimeFormat = {
title: 'Date display format',
name: 'dateDisplayFormat',
uiSchema: {
picker: {
type: 'string',
title: '{{t("Picker")}}',
'x-decorator': 'FormItem',
'x-component': 'Radio.Group',
description: '{{ t("Switching the picker, the value and default value will be cleared") }}',
enum: [
{
label: '{{t("Date")}}',
value: 'date',
},
{
label: '{{t("Month")}}',
value: 'month',
},
{
label: '{{t("Quarter")}}',
value: 'quarter',
},
{
label: '{{t("Year")}}',
value: 'year',
},
],
},
dateFormat: {
type: 'string',
title: '{{t("Date format")}}',
'x-component': ExpiresRadio,
'x-decorator': 'FormItem',
'x-decorator-props': {},
'x-component-props': {
className: css`
.ant-radio-wrapper {
display: flex;
margin: 5px 0px;
}
`,
defaultValue: 'dddd',
formats: ['MMMM Do YYYY', 'YYYY-MM-DD', 'MM/DD/YY', 'YYYY/MM/DD', 'DD/MM/YYYY'],
},
enum: [
{
label: DateFormatCom({ format: 'MMMM Do YYYY' }),
value: 'MMMM Do YYYY',
},
{
label: DateFormatCom({ format: 'YYYY-MM-DD' }),
value: 'YYYY-MM-DD',
},
{
label: DateFormatCom({ format: 'MM/DD/YY' }),
value: 'MM/DD/YY',
},
{
label: DateFormatCom({ format: 'YYYY/MM/DD' }),
value: 'YYYY/MM/DD',
},
{
label: DateFormatCom({ format: 'DD/MM/YYYY' }),
value: 'DD/MM/YYYY',
},
{
label: 'custom',
value: 'custom',
},
],
'x-reactions': [
(field) => {
const { picker } = field.form.values;
field.value = getPickerFormat(picker);
field.setComponentProps({ picker });
},
],
},
showTime: {
type: 'boolean',
'x-decorator': 'FormItem',
'x-component': 'Checkbox',
'x-content': '{{t("Show time")}}',
'x-reactions': [
{
dependencies: ['picker'],
fulfill: {
state: {
hidden: `{{ $form.values.picker !== 'date' || collectionField.type!== 'date' }}`,
},
},
},
],
},
timeFormat: {
type: 'string',
title: '{{t("Time format")}}',
'x-component': ExpiresRadio,
'x-decorator': 'FormItem',
'x-decorator-props': {
className: css`
margin-bottom: 0px;
`,
},
'x-component-props': {
className: css`
color: red;
.ant-radio-wrapper {
display: flex;
margin: 5px 0px;
}
`,
defaultValue: 'h:mm a',
formats: ['hh:mm:ss a', 'HH:mm:ss'],
timeFormat: true,
},
'x-reactions': [
(field) => {
const { showTime } = field.form.values || {};
field.hidden = !showTime;
},
],
enum: [
{
label: DateFormatCom({ format: 'hh:mm:ss a' }),
value: 'hh:mm:ss a',
},
{
label: DateFormatCom({ format: 'HH:mm:ss' }),
value: 'HH:mm:ss',
},
{
label: 'custom',
value: 'custom',
},
],
},
},
handler(ctx, params) {
ctx.model.flowEngine.flowSettings.registerScopes({
collectionField: ctx.model.collectionField,
});
ctx.model.setComponentProps({ ...params });
},
defaultParams: (ctx) => {
const { showTime, dateFormat, timeFormat, picker } = ctx.model.field.componentProps;
return {
picker: picker || 'date',
dateFormat: dateFormat || 'YYYY-MM-DD',
timeFormat: timeFormat,
showTime,
};
},
};

View File

@ -14,6 +14,7 @@ import { FlowEngineRunner } from './FlowEngineRunner';
import { MockFlowModelRepository } from './FlowModelRepository';
import { FlowRoute } from './FlowPage';
import * as models from './models';
import { DateTimeFormat } from './flowSetting/DateTimeFormat';
export class PluginFlowEngine extends Plugin {
async load() {
@ -49,6 +50,9 @@ export class PluginFlowEngine extends Plugin {
// Optionally, you can throw an error or handle it as needed
}
this.app.addProvider(FlowEngineRunner, {});
// 注册通用 flow
this.flowEngine.registerAction(DateTimeFormat);
}
}

View File

@ -1,289 +0,0 @@
/**
* This file is part of the NocoBase (R) project.
* Copyright (c) 2020-2024 NocoBase Co., Ltd.
* Authors: NocoBase Team.
*
* This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
* For more information, please refer to: https://www.nocobase.com/agreement.
*/
import { EditOutlined, SettingOutlined, QuestionCircleOutlined } from '@ant-design/icons';
import { css } from '@emotion/css';
import { observer } from '@formily/reactive-react';
import { AddActionModel, CollectionField, FlowModelRenderer, FlowsFloatContextMenu } from '@nocobase/flow-engine';
import { Space, TableColumnProps, Tooltip } from 'antd';
import React from 'react';
import { ActionModel } from './ActionModel';
import { FieldFlowModel, SupportedFieldInterfaces } from './FieldFlowModel';
import { QuickEditForm } from './QuickEditForm';
export class TableColumnModel extends FieldFlowModel {
static readonly supportedFieldInterfaces: SupportedFieldInterfaces = '*';
getColumnProps(): TableColumnProps {
const titleContent = (
<FlowsFloatContextMenu
model={this}
containerStyle={{ display: 'block', padding: '11px 8px', margin: '-11px -8px' }}
>
{this.props.title}
</FlowsFloatContextMenu>
);
return {
...this.props,
title: this.props.tooltip ? (
<span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
{titleContent}
<Tooltip title={this.props.tooltip}>
<QuestionCircleOutlined style={{ cursor: 'pointer' }} />
</Tooltip>
</span>
) : (
titleContent
),
ellipsis: true,
onCell: (record) => ({
className: css`
.edit-icon {
position: absolute;
display: none;
color: #1890ff;
margin-left: 8px;
cursor: pointer;
top: 50%;
right: 8px;
transform: translateY(-50%);
}
&:hover {
background: rgba(24, 144, 255, 0.1) !important;
}
&:hover .edit-icon {
display: inline-flex;
}
`,
}),
render: this.render(),
width: this.props.width || 200,
onHeaderCell: () => ({
className: css`
.ant-table-cell-content {
display: inline !important;
}
`,
}),
};
}
setComponentProps(props) {
this.setProps('componentProps', { ...(this.props.componentProps || {}), ...props });
}
renderQuickEditButton(record) {
return (
<Tooltip title="快速编辑">
<EditOutlined
className="edit-icon"
onClick={async (e) => {
e.stopPropagation();
await QuickEditForm.open({
flowEngine: this.flowEngine,
collectionField: this.field as CollectionField,
filterByTk: record.id,
});
await this.parent.resource.refresh();
}}
/>
</Tooltip>
);
}
render() {
return (value, record, index) => (
<>
{value}
{this.renderQuickEditButton(record)}
</>
);
}
}
TableColumnModel.define({
title: 'Table Column',
icon: 'TableColumn',
defaultOptions: {
use: 'TableColumnModel',
},
sort: 0,
});
const Columns = observer<any>(({ record, model, index }) => {
return (
<Space>
{model.mapSubModels('actions', (action: ActionModel) => {
const fork = action.createFork({}, `${index}`);
return (
<FlowModelRenderer
showFlowSettings
key={fork.uid}
model={fork}
extraContext={{ currentResource: model.parent.resource, currentRecord: record }}
/>
);
})}
</Space>
);
});
export class TableActionsColumnModel extends TableColumnModel {
static readonly supportedFieldInterfaces: SupportedFieldInterfaces = null;
getColumnProps() {
return {
...this.props,
title: (
<FlowsFloatContextMenu
model={this}
containerStyle={{ display: 'block', padding: '11px 8px', margin: '-11px -8px' }}
>
<Space>
{this.props.title || 'Actions'}
<AddActionModel
model={this}
subModelKey={'actions'}
items={() => [
{
key: 'view',
label: 'View',
createModelOptions: {
use: 'ViewActionModel',
},
},
{
key: 'link',
label: 'Link',
createModelOptions: {
use: 'LinkActionModel',
},
},
{
key: 'delete',
label: 'Delete',
createModelOptions: {
use: 'DeleteActionModel',
},
},
]}
>
<SettingOutlined />
</AddActionModel>
</Space>
</FlowsFloatContextMenu>
),
render: this.render(),
};
}
render() {
return (value, record, index) => <Columns record={record} model={this} index={index} />;
}
}
TableColumnModel.registerFlow({
key: 'default',
auto: true,
title: 'Basic',
steps: {
step1: {
handler(ctx, params) {
if (!params.fieldPath) {
return;
}
if (ctx.model.field) {
return;
}
const field = ctx.globals.dataSourceManager.getCollectionField(params.fieldPath);
ctx.model.field = field;
ctx.model.fieldPath = params.fieldPath;
ctx.model.setProps('dataIndex', field.name);
},
},
editColumTitle: {
title: 'Column title',
uiSchema: {
title: {
'x-component': 'Input',
'x-decorator': 'FormItem',
'x-component-props': {
placeholder: 'Column title',
},
},
},
defaultParams: (ctx) => {
return {
title: ctx.model.field?.title,
};
},
handler(ctx, params) {
ctx.model.setProps('title', params.title || ctx.model.field?.title);
},
},
editTooltip: {
title: 'Edit tooltip',
uiSchema: {
tooltip: {
'x-component': 'Input.TextArea',
'x-decorator': 'FormItem',
'x-component-props': {
placeholder: 'Edit tooltip',
},
},
},
handler(ctx, params) {
ctx.model.setProps('tooltip', params.tooltip);
},
},
editColumnWidth: {
title: 'Column width',
uiSchema: {
width: {
'x-component': 'NumberPicker',
'x-decorator': 'FormItem',
},
},
defaultParams: {
width: '200',
},
handler(ctx, params) {
ctx.model.setProps('width', params.width);
},
},
fixed: {
title: 'Fixed',
uiSchema: {
fixed: {
'x-component': 'Select',
'x-decorator': 'FormItem',
enum: [
{
value: 'none',
label: 'Not fixed',
},
{
value: 'left',
label: 'Left fixed',
},
{
value: 'right',
label: 'Right fixed',
},
],
},
},
defaultParams: {
fixed: 'none',
},
handler(ctx, params) {
ctx.model.setProps('fixed', params.fixed);
},
},
},
});

View File

@ -0,0 +1,36 @@
/**
* This file is part of the NocoBase (R) project.
* Copyright (c) 2020-2024 NocoBase Co., Ltd.
* Authors: NocoBase Team.
*
* This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
* For more information, please refer to: https://www.nocobase.com/agreement.
*/
import { isTitleField } from '../../../data-source';
export const loadTitleFieldOptions = (collectionField, dataSourceManager) => {
return async (field) => {
const form = field.form;
const compile = form?.designable?.compile || ((v) => v);
const collectionManager = collectionField?.collection?.collectionManager;
const target = collectionField?.options?.target;
if (!collectionManager || !target) return;
const targetCollection = collectionManager.getCollection(target);
const targetFields = targetCollection?.getFields?.() ?? [];
field.loading = true;
const options = targetFields
.filter((field) => isTitleField(dataSourceManager, field.options))
.map((field) => ({
value: field.name,
label: compile(field.options.uiSchema?.title) || field.name,
}));
field.dataSource = options;
field.loading = false;
};
};

View File

@ -9,7 +9,7 @@
import { css } from '@emotion/css';
import { DatePicker } from '@formily/antd-v5';
import { getPickerFormat } from '@nocobase/utils/client';
import { DateFormatCom, ExpiresRadio } from '../../components';
import { DateFormatCom, ExpiresRadio } from '../../../../../components';
import { FormFieldModel } from '../FormFieldModel';
export class DateTimeFieldModel extends FormFieldModel {

View File

@ -10,7 +10,7 @@ import dayjs from 'dayjs';
import { DateTimeFieldModel } from './DateTimeFieldModel';
export class DateTimeWithTzFieldModel extends DateTimeFieldModel {
static supportedFieldInterfaces = ['createdAt', 'datetime', 'updatedAt'];
static supportedFieldInterfaces = ['createdAt', 'datetime', 'updatedAt', 'unixTimestamp'];
setComponentProps(componentProps) {
super.setComponentProps({

View File

@ -10,4 +10,3 @@
export * from './DateTimeWithoutTzFieldModel';
export * from './DateTimeWithTzFieldModel';
export * from './DateOnlyFieldModel';
export * from './UnixTimestampFieldModel';

View File

@ -12,7 +12,7 @@ import { connect, mapProps, mapReadPretty } from '@formily/react';
import { Spin } from 'antd';
import React, { useMemo } from 'react';
import { useGlobalTheme } from '../../../../../../global-theme';
import { EllipsisWithTooltip } from '../../components';
import { EllipsisWithTooltip } from '../../../../../components';
import { FormFieldModel } from '../FormFieldModel';
import { useMarkdownStyles } from './style';
import { convertToText, useParseMarkdown } from './util';

View File

@ -0,0 +1,199 @@
/**
* This file is part of the NocoBase (R) project.
* Copyright (c) 2020-2024 NocoBase Co., Ltd.
* Authors: NocoBase Team.
*
* This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
* For more information, please refer to: https://www.nocobase.com/agreement.
*/
import { isArr, toArr } from '@formily/shared';
import { getDefaultFormat, str2moment } from '@nocobase/utils/client';
import { Tag } from 'antd';
import React from 'react';
import { getUniqueKeyFromCollection } from '../../../../../../collection-manager/interfaces/utils';
import { useCompile } from '../../../../../../schema-component/hooks';
import { loadTitleFieldOptions } from '../../../../common/utils';
import { TableColumnModel } from '../../TableColumnModel';
export function transformNestedData(inputData) {
const resultArray = [];
function recursiveTransform(data) {
if (data?.parent) {
const { parent } = data;
recursiveTransform(parent);
}
const { parent, ...other } = data;
resultArray.push(other);
}
if (inputData) {
recursiveTransform(inputData);
}
return resultArray;
}
const toValue = (value, placeholder) => {
if (value === null || value === undefined) {
return placeholder;
}
return value;
};
const getDatePickerLabels = (props): string => {
const format = getDefaultFormat(props) as string;
const m = str2moment(props.value, props);
const labels = m && m.isValid() ? m.format(format) : props.value;
return isArr(labels) ? labels.join('~') : labels;
};
const getLabelFormatValue = (labelUiSchema, value: any, isTag = false): any => {
const options = labelUiSchema?.enum;
if (Array.isArray(options) && value) {
const values = toArr(value).map((val) => {
const opt: any = options.find((option: any) => option.value === val);
if (isTag) {
return React.createElement(Tag, { color: opt?.color }, opt?.label);
}
return opt?.label;
});
return isTag ? values : values.join(', ');
}
switch (labelUiSchema?.['x-component']) {
case 'DatePicker':
return getDatePickerLabels({ ...labelUiSchema?.['x-component-props'], value });
default:
return value;
}
};
const getLabelUiSchema = (collectionManager, target, label) => {
const targetCollection = collectionManager.getCollection(target);
const targetLabelField = targetCollection.getField(label);
return targetLabelField.options.uiSchema;
};
const AssociationSelectReadPretty = (props) => {
const { value, fieldNames, collectionField, ellipsis, cm } = props;
const compile = useCompile();
const targetCollection = cm.getCollection(collectionField?.target);
const isTreeCollection = targetCollection?.template === 'tree';
const labelUiSchema = getLabelUiSchema(cm, collectionField?.target, fieldNames?.label);
const items = toArr(value)
.map((record, index) => {
if (!record) return null;
let rawLabel = record?.[fieldNames?.label || 'label'];
// 树形结构下转换为路径形式
if (isTreeCollection) {
const pathLabels = transformNestedData(record).map((o) => o?.[fieldNames?.label || 'label']);
rawLabel = pathLabels.join(' / ');
} else if (typeof rawLabel === 'object' && rawLabel !== null) {
rawLabel = JSON.stringify(rawLabel);
}
const compiledLabel = toValue(compile(rawLabel), 'N/A');
const text = getLabelFormatValue(compile(labelUiSchema), compiledLabel, true);
return (
<React.Fragment key={record?.[fieldNames.value] ?? index}>
{index > 0 && ','}
{text}
</React.Fragment>
);
})
.filter(Boolean);
return <span style={ellipsis ? null : { whiteSpace: 'normal' }}>{items}</span>;
};
export class AssociationSelectReadPrettyFieldModel extends TableColumnModel {
public static readonly supportedFieldInterfaces = [
'm2m',
'm2o',
'o2o',
'o2m',
'oho',
'obo',
'updatedBy',
'createdBy',
];
render() {
return (value, record, index) => {
return (
<>
{
<AssociationSelectReadPretty
{...this.getComponentProps()}
collectionField={this.collectionField.options}
value={value}
cm={this.collectionField.collection.dataSource.collectionManager}
/>
}
{this.renderQuickEditButton(record)}
</>
);
};
}
}
// //附加关系数据
// AssociationSelectReadPrettyFieldModel.registerFlow({
// key: 'appendsAssociationFields',
// auto: true,
// sort: 100,
// steps: {
// step1: {
// handler(ctx) {
// const resource = ctx.model.parent.resource;
// const { name } = ctx.model.field.options;
// resource.addAppends(name);
// console.log(ctx.model.parent.resource, name);
// resource.refresh();
// },
// },
// },
// });
//标题字段设置 todo 复用
AssociationSelectReadPrettyFieldModel.registerFlow({
key: 'fieldNames',
auto: true,
sort: 200,
steps: {
fieldNames: {
title: 'Title field',
uiSchema: {
label: {
'x-component': 'Select',
'x-decorator': 'FormItem',
'x-reactions': ['{{loadTitleFieldOptions(collectionField, dataSourceManager)}}'],
},
},
defaultParams: (ctx) => {
const { target } = ctx.model.field.options;
const collectionManager = ctx.model.field.collection.collectionManager;
const targetCollection = collectionManager.getCollection(target);
return {
label: ctx.model.getComponentProps().fieldNames?.label || targetCollection.options.titleField,
};
},
handler(ctx, params) {
const { target } = ctx.model.field.options;
const collectionManager = ctx.model.field.collection.collectionManager;
const targetCollection = collectionManager.getCollection(target);
ctx.model.flowEngine.flowSettings.registerScopes({
loadTitleFieldOptions,
collectionField: ctx.model.field,
dataSourceManager: ctx.app.dataSourceManager,
});
const filterKey = getUniqueKeyFromCollection(targetCollection.options as any);
const newFieldNames = {
value: filterKey,
label: params.label || targetCollection.options.titleField || filterKey,
};
ctx.model.setComponentProps({ fieldNames: newFieldNames });
},
},
},
});

View File

@ -0,0 +1,40 @@
/**
* This file is part of the NocoBase (R) project.
* Copyright (c) 2020-2024 NocoBase Co., Ltd.
* Authors: NocoBase Team.
*
* This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
* For more information, please refer to: https://www.nocobase.com/agreement.
*/
import { CheckOutlined, CloseOutlined } from '@ant-design/icons';
import { Checkbox } from 'antd';
import React, { FC } from 'react';
import { TableColumnModel } from '../TableColumnModel';
interface CheckboxReadPrettyProps {
showUnchecked?: boolean;
value?: boolean;
}
const ReadPretty: FC<CheckboxReadPrettyProps> = (props) => {
if (props.value) {
return <CheckOutlined style={{ color: '#52c41a' }} />;
}
return props.showUnchecked ? <CloseOutlined style={{ color: '#ff4d4f' }} /> : <Checkbox disabled />;
};
export class CheckboxFieldMode extends TableColumnModel {
public static readonly supportedFieldInterfaces = ['checkbox'];
render() {
return (value, record, index) => {
return (
<>
{<ReadPretty value={value} {...this.getComponentProps()} />}
{this.renderQuickEditButton(record)}
</>
);
};
}
}

View File

@ -0,0 +1,73 @@
/**
* This file is part of the NocoBase (R) project.
* Copyright (c) 2020-2024 NocoBase Co., Ltd.
* Authors: NocoBase Team.
*
* This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
* For more information, please refer to: https://www.nocobase.com/agreement.
*/
import { usePrefixCls } from '@formily/antd-v5/esm/__builtins__';
import { isArr } from '@formily/shared';
import { getDefaultFormat, str2moment } from '@nocobase/utils/client';
import cls from 'classnames';
import dayjs from 'dayjs';
import React from 'react';
import { TableColumnModel } from '../TableColumnModel';
const ReadPretty = (props: any) => {
const { value, picker = 'date' } = props;
const prefixCls = usePrefixCls('description-date-picker', props);
if (!value) {
return <div></div>;
}
const getLabels = () => {
const format = getDefaultFormat(props) as string;
const m = str2moment(value, props);
const labels = dayjs.isDayjs(m) ? m.format(format) : '';
return isArr(labels) ? labels.join('~') : labels;
};
return <div className={cls(prefixCls, props.className)}>{getLabels()}</div>;
};
export class DateTimeReadPrettyFieldModel extends TableColumnModel {
public static readonly supportedFieldInterfaces = [
'date',
'datetimeNoTz',
'createdAt',
'datetime',
'updatedAt',
'unixTimestamp',
];
render() {
return (value, record, index) => {
return (
<>
<ReadPretty value={value} {...this.getComponentProps()} />
{this.renderQuickEditButton(record)}
</>
);
};
}
}
DateTimeReadPrettyFieldModel.registerFlow({
key: 'key3',
auto: true,
sort: 1000,
title: 'Specific properties',
steps: {
dateFormat: {
use: 'dateDisplayFormat',
title: 'Date display format',
defaultParams: (ctx) => {
const { showTime, dateFormat, timeFormat, picker } = ctx.model.getComponentProps();
return {
picker: picker || 'date',
dateFormat: dateFormat || 'YYYY-MM-DD',
timeFormat: timeFormat,
showTime,
};
},
},
},
});

View File

@ -7,15 +7,15 @@
* For more information, please refer to: https://www.nocobase.com/agreement.
*/
import React from 'react';
import { useForm } from '@formily/react';
import { Select } from 'antd';
import React from 'react';
import { useTranslation } from 'react-i18next';
import { TableColumnModel } from '../../TableColumnModel';
import { TableColumnModel } from '../TableColumnModel';
import { InputNumberReadPretty } from '../components/InputNumberReadPretty';
export class NumberColumnModel extends TableColumnModel {
public static readonly supportedFieldInterfaces = ['number'];
export class NumberReadPrettyFieldModel extends TableColumnModel {
public static readonly supportedFieldInterfaces = ['number', 'integer'];
render() {
return (value, record, index) => {
return (
@ -45,7 +45,7 @@ const UnitConversion = () => {
);
};
NumberColumnModel.registerFlow({
NumberReadPrettyFieldModel.registerFlow({
key: 'format',
sort: 100,
title: 'Specific properties',

View File

@ -7,17 +7,28 @@
* For more information, please refer to: https://www.nocobase.com/agreement.
*/
import { isNum } from '@formily/shared';
import * as math from 'mathjs';
import React from 'react';
import { TableColumnModel } from '../../TableColumnModel';
import { TableColumnModel } from '../TableColumnModel';
import { InputNumberReadPretty } from '../components/InputNumberReadPretty';
export class PercentColumnModel extends TableColumnModel {
const isNumberLike = (index: any): index is number => isNum(index) || /^-?\d+(\.\d+)?$/.test(index);
const toValue = (value: any, callback: (v: number) => number) => {
if (isNumberLike(value)) {
return math.round(callback(value), 9);
}
return null;
};
export class PercentReadPrettyFieldModel extends TableColumnModel {
public static readonly supportedFieldInterfaces = ['percent'];
render() {
return (value, record, index) => {
const val = toValue(value, (v) => v * 100);
return (
<>
<InputNumberReadPretty value={value} />
<InputNumberReadPretty value={val} addonAfter="%" />
{this.renderQuickEditButton(record)}
</>
);

View File

@ -0,0 +1,46 @@
/**
* This file is part of the NocoBase (R) project.
* Copyright (c) 2020-2024 NocoBase Co., Ltd.
* Authors: NocoBase Team.
*
* This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
* For more information, please refer to: https://www.nocobase.com/agreement.
*/
import { Tag } from 'antd';
import React, { FC } from 'react';
import { TableColumnModel } from '../TableColumnModel';
const ReadPretty: FC<any> = (props) => {
const { value, dataSource } = props;
if (!value) {
return;
}
return (
<div>
{dataSource
.filter((option) => option.value == value)
.map((option, key) => (
<Tag key={key} color={option.color} icon={option.icon}>
{option.label}
</Tag>
))}
</div>
);
};
export class RadioGroupReadPrettyFieldModel extends TableColumnModel {
public static readonly supportedFieldInterfaces = ['radioGroup'];
render() {
return (value, record, index) => {
return (
<>
{<ReadPretty value={value} {...this.getComponentProps()} />}
{this.renderQuickEditButton(record)}
</>
);
};
}
}

View File

@ -0,0 +1,43 @@
/**
* This file is part of the NocoBase (R) project.
* Copyright (c) 2020-2024 NocoBase Co., Ltd.
* Authors: NocoBase Team.
*
* This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
* For more information, please refer to: https://www.nocobase.com/agreement.
*/
import { Tag } from 'antd';
import React from 'react';
import { TableColumnModel } from '../TableColumnModel';
import { getCurrentOptions } from '../utils/utils';
const fieldNames = {
label: 'label',
value: 'value',
color: 'color',
icon: 'icon',
};
export class SelectReadPrettyFieldModel extends TableColumnModel {
public static readonly supportedFieldInterfaces = ['select', 'multipleSelect'];
render() {
return (value, record, index) => {
const { dataSource } = this.getComponentProps();
const currentOptions = getCurrentOptions(value, dataSource, fieldNames);
const content =
value &&
currentOptions.map((option, index) => (
<Tag key={index} color={option[fieldNames.color]} icon={option.icon}>
{option[fieldNames.label]}
</Tag>
));
return (
<>
{content}
{this.renderQuickEditButton(record)}
</>
);
};
}
}

View File

@ -7,6 +7,10 @@
* For more information, please refer to: https://www.nocobase.com/agreement.
*/
export * from './SelectColumnModel';
export * from './NumberColumnModel';
export * from './PercentColumnModel';
export * from './SelectFieldModel';
export * from './NumberFieldModel';
export * from './PercentFieldModel';
export * from './AssociationSelectFieldModel';
export * from './CheckboxFieldMode';
export * from './RadioGroupFieldModel';
export * from './DateTimeFieldModel';

View File

@ -24,6 +24,7 @@ export * from './data-blocks/form/fields';
export * from './data-blocks/form/FormActionModel';
export * from './data-blocks/form/FormModel';
export * from './data-blocks/form/QuickEditForm';
export * from './data-blocks/table/fields';
export * from './data-blocks/table/TableActionsColumnModel';
export * from './data-blocks/table/TableColumnModel';
export * from './data-blocks/table/TableModel';

View File

@ -1,69 +0,0 @@
/**
* This file is part of the NocoBase (R) project.
* Copyright (c) 2020-2024 NocoBase Co., Ltd.
* Authors: NocoBase Team.
*
* This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
* For more information, please refer to: https://www.nocobase.com/agreement.
*/
import React from 'react';
import { Tag } from 'antd';
import { TableColumnModel } from '../../TableColumnModel';
import { getCurrentOptions } from '../utils/utils';
export class SelectTableColumnModel extends TableColumnModel {
public static readonly supportedFieldInterfaces = ['select', 'multipleSelect'];
dataSource;
fieldNames: { label: string; value: string; color?: string; icon?: any };
setDataSource(dataSource) {
this.dataSource = dataSource;
}
getDataSource() {
return this.dataSource;
}
setFieldNames(fieldNames) {
this.fieldNames = fieldNames;
}
getFieldNames() {
return this.fieldNames;
}
render() {
return (value, record, index) => {
const currentOptions = getCurrentOptions(value, this.dataSource, this.fieldNames);
const content =
value &&
currentOptions.map((option, index) => (
<Tag key={index} color={option[this.fieldNames.color]} icon={option.icon}>
{option[this.fieldNames.label]}
</Tag>
));
return (
<>
{content}
{this.renderQuickEditButton(record)}
</>
);
};
}
}
SelectTableColumnModel.registerFlow({
key: 'options',
auto: true,
sort: 100,
steps: {
step1: {
handler(ctx, params) {
ctx.model.setDataSource(ctx.model.field.enum);
ctx.model.setFieldNames({
label: 'label',
value: 'value',
color: 'color',
icon: 'icon',
});
},
},
},
});