mirror of
https://gitee.com/nocobase/nocobase.git
synced 2025-07-01 18:52:20 +08:00
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
commit
772ff9daad
@ -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({
|
||||
dataSource: 'options',
|
||||
}),
|
||||
mapProps(
|
||||
{
|
||||
dataSource: 'options',
|
||||
},
|
||||
(props) => {
|
||||
return {
|
||||
...props,
|
||||
};
|
||||
},
|
||||
),
|
||||
);
|
||||
|
||||
export { ExpiresRadio, DateFormatCom };
|
||||
169
packages/core/client/src/flow/flowSetting/DateTimeFormat.tsx
Normal file
169
packages/core/client/src/flow/flowSetting/DateTimeFormat.tsx
Normal 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,
|
||||
};
|
||||
},
|
||||
};
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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);
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
36
packages/core/client/src/flow/models/common/utils.ts
Normal file
36
packages/core/client/src/flow/models/common/utils.ts
Normal 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;
|
||||
};
|
||||
};
|
||||
@ -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 {
|
||||
|
||||
@ -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({
|
||||
|
||||
@ -10,4 +10,3 @@
|
||||
export * from './DateTimeWithoutTzFieldModel';
|
||||
export * from './DateTimeWithTzFieldModel';
|
||||
export * from './DateOnlyFieldModel';
|
||||
export * from './UnixTimestampFieldModel';
|
||||
|
||||
@ -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';
|
||||
|
||||
@ -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 });
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
@ -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)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
}
|
||||
}
|
||||
@ -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,
|
||||
};
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
@ -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',
|
||||
@ -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)}
|
||||
</>
|
||||
);
|
||||
@ -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)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
}
|
||||
}
|
||||
@ -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)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
}
|
||||
}
|
||||
@ -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';
|
||||
@ -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';
|
||||
|
||||
@ -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',
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
Loading…
x
Reference in New Issue
Block a user