mirror of
https://gitee.com/nocobase/nocobase.git
synced 2025-05-05 21:49:25 +08:00
feat: support event setting panel
This commit is contained in:
Jian Lu
parent
6258662d62
commit
f959a1aa34
@ -42,14 +42,14 @@ export function useSubmitEvents() {
|
||||
{
|
||||
name: 'afterSubmit',
|
||||
title: '表单提交后',
|
||||
params: {
|
||||
values: {
|
||||
title: '表单值',
|
||||
type: 'object',
|
||||
description: '表单提交后的值',
|
||||
properties: fieldsMap,
|
||||
},
|
||||
},
|
||||
// params: {
|
||||
// values: {
|
||||
// title: '表单值',
|
||||
// type: 'object',
|
||||
// description: '表单提交后的值',
|
||||
// properties: fieldsMap,
|
||||
// },
|
||||
// },
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
@ -22,5 +22,5 @@ export function ActionParamSelect(props: { action: EventActionSetting }) {
|
||||
value: params[key]?.name || key,
|
||||
...params[key],
|
||||
}));
|
||||
return <Select options={options} {...rest}></Select>;
|
||||
return <Select options={options} {...rest} style={{ minWidth: 150 }}></Select>;
|
||||
}
|
||||
|
||||
@ -30,5 +30,14 @@ export const ActionSelect = observer((props: any) => {
|
||||
}
|
||||
};
|
||||
const _value = value ? [value.definition, `${value.definition}.${value.event}.${value.uid}`] : [];
|
||||
return <Cascader placeholder="请选择动作" options={options} onChange={_onChange} value={_value} {...rest} />;
|
||||
return (
|
||||
<Cascader
|
||||
placeholder="请选择动作"
|
||||
options={options}
|
||||
onChange={_onChange}
|
||||
value={_value}
|
||||
style={{ minWidth: 300 }}
|
||||
{...rest}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
@ -0,0 +1,89 @@
|
||||
/**
|
||||
* 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 { Filter, useFilterOptions } from '../Filter';
|
||||
import { ArrayBase } from '@formily/antd-v5';
|
||||
import { css } from '@emotion/css';
|
||||
import { getShouldChange } from '../../../schema-settings/VariableInput';
|
||||
import { DynamicComponentProps } from '../../../schema-component/antd/filter/DynamicComponent';
|
||||
import { VariableInput } from '../../../schema-settings/VariableInput';
|
||||
import { uniqBy } from 'lodash';
|
||||
import { useVariableOptions } from './hooks/useVariableOptions';
|
||||
|
||||
export default function ConditionSelect(props: any) {
|
||||
const recordValues = ArrayBase.useRecord();
|
||||
const filterOptions = useFilterOptions(recordValues);
|
||||
const variableOptions = useVariableOptions();
|
||||
console.log('filterOptions', filterOptions, props);
|
||||
|
||||
return (
|
||||
<Filter
|
||||
className={css`
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin-left: 10px;
|
||||
`}
|
||||
dynamicComponent={(props: DynamicComponentProps) => {
|
||||
const { collectionField } = props;
|
||||
return (
|
||||
<VariableInput
|
||||
{...props}
|
||||
// form={form}
|
||||
// record={record}
|
||||
shouldChange={getShouldChange({
|
||||
// collectionField,
|
||||
// variables,
|
||||
// localVariables,
|
||||
// getAllCollectionsInheritChain,
|
||||
})}
|
||||
returnScope={(scope) => {
|
||||
return uniqBy([...scope, ...variableOptions], 'key');
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
// 'x-use-component-props': () => {
|
||||
// return {
|
||||
// options: filterOptions,
|
||||
// className: css`
|
||||
// position: relative;
|
||||
// width: 100%;
|
||||
// margin-left: 10px;
|
||||
// `,
|
||||
// };
|
||||
// },
|
||||
|
||||
// 'x-component-props': {
|
||||
// collectionName,
|
||||
// dynamicComponent: (props: DynamicComponentProps) => {
|
||||
// const { collectionField } = props;
|
||||
// return (
|
||||
// <VariableInput
|
||||
// {...props}
|
||||
// form={form}
|
||||
// record={record}
|
||||
// shouldChange={getShouldChange({
|
||||
// collectionField,
|
||||
// variables,
|
||||
// localVariables,
|
||||
// getAllCollectionsInheritChain,
|
||||
// })}
|
||||
// returnScope={(scope) => {
|
||||
// return uniqBy([...scope, ...variableOptions], 'key');
|
||||
// }}
|
||||
// />
|
||||
// );
|
||||
// },
|
||||
// },
|
||||
@ -8,7 +8,7 @@
|
||||
*/
|
||||
|
||||
import { css } from '@emotion/css';
|
||||
import { observer, useFieldSchema } from '@formily/react';
|
||||
import { observer, useField, useFieldSchema, useForm } from '@formily/react';
|
||||
import React, { useMemo } from 'react';
|
||||
import { useCollectionManager_deprecated } from '../../../collection-manager';
|
||||
import { useCollectionParentRecordData } from '../../../data-source/collection-record/CollectionRecordProvider';
|
||||
@ -24,7 +24,7 @@ import { ActionsField } from './Actions';
|
||||
import { FormProvider, createSchemaField } from '@formily/react';
|
||||
import { ArrayCollapse } from '../components/LinkageHeader';
|
||||
import { Filter } from '../Filter';
|
||||
import { ArrayBase } from '@formily/antd-v5';
|
||||
import { ArrayBase, Select, DatePicker, Editable, Input, ArrayItems, FormItem } from '@formily/antd-v5';
|
||||
import { useFilterOptions } from './hooks/useFilterOptions';
|
||||
import { EventDefinition, EventSetting } from '../../types';
|
||||
import { useVariableOptions } from './hooks/useVariableOptions';
|
||||
@ -32,7 +32,34 @@ import { uniqBy } from 'lodash';
|
||||
import { AddBtn, DeleteBtn } from './AddBtn';
|
||||
import { ActionSelect } from './ActionSelect';
|
||||
import { ActionParamSelect } from './ActionParamSelect';
|
||||
import { Space } from 'antd';
|
||||
import { useFormBlockContext } from '../../../block-provider';
|
||||
import ConditionSelect from './ConditionSelect';
|
||||
import { actionsSchema } from './schemas/actions';
|
||||
|
||||
const SchemaField = createSchemaField({
|
||||
components: {
|
||||
FormItem,
|
||||
DatePicker,
|
||||
Editable,
|
||||
Space, // 使用antd包内的Space组件，包含Compact
|
||||
Compact: Space.Compact,
|
||||
Input,
|
||||
Select,
|
||||
ArrayItems,
|
||||
ArrayCollapse,
|
||||
Filter,
|
||||
ActionSelect,
|
||||
ActionParamSelect,
|
||||
ConditionSelect,
|
||||
},
|
||||
scope: {
|
||||
emptyParams(field, target) {
|
||||
const params = field.query('.params').take(1);
|
||||
params.value = [];
|
||||
},
|
||||
},
|
||||
});
|
||||
export interface Props {
|
||||
dynamicComponent: any;
|
||||
definitions: EventDefinition[];
|
||||
@ -44,25 +71,26 @@ export const ActionsSetting = withDynamicSchemaProps(
|
||||
const array = ArrayBase.useArray();
|
||||
const recordValues = ArrayBase.useRecord();
|
||||
const index = ArrayBase.useIndex();
|
||||
const {
|
||||
definitions,
|
||||
options,
|
||||
defaultValues,
|
||||
collectionName,
|
||||
form,
|
||||
variables,
|
||||
localVariables,
|
||||
record,
|
||||
dynamicComponent,
|
||||
} = props;
|
||||
const { definitions, options, defaultValues, collectionName, variables, localVariables, record, dynamicComponent } =
|
||||
props;
|
||||
const { getAllCollectionsInheritChain } = useCollectionManager_deprecated();
|
||||
const parentRecordData = useCollectionParentRecordData();
|
||||
|
||||
const { form } = useFormBlockContext();
|
||||
const filterOptions = useFilterOptions(recordValues);
|
||||
const variableOptions = useVariableOptions();
|
||||
console.log('variableOptions', variableOptions);
|
||||
const components = useMemo(
|
||||
() => ({
|
||||
ArrayCollapse,
|
||||
Filter,
|
||||
Space,
|
||||
ActionParamSelect,
|
||||
ActionSelect,
|
||||
ConditionSelect,
|
||||
}),
|
||||
[],
|
||||
);
|
||||
|
||||
const components = useMemo(() => ({ ArrayCollapse, Filter }), []);
|
||||
const schema = useMemo(
|
||||
() => ({
|
||||
type: 'object',
|
||||
@ -102,129 +130,13 @@ export const ActionsSetting = withDynamicSchemaProps(
|
||||
'x-content': '{{ t("Condition") }}',
|
||||
},
|
||||
condition: {
|
||||
'x-component': 'Filter',
|
||||
'x-use-component-props': () => {
|
||||
return {
|
||||
options: filterOptions,
|
||||
className: css`
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin-left: 10px;
|
||||
`,
|
||||
};
|
||||
},
|
||||
'x-component-props': {
|
||||
collectionName,
|
||||
dynamicComponent: (props: DynamicComponentProps) => {
|
||||
const { collectionField } = props;
|
||||
return (
|
||||
<VariableInput
|
||||
{...props}
|
||||
form={form}
|
||||
record={record}
|
||||
shouldChange={getShouldChange({
|
||||
collectionField,
|
||||
variables,
|
||||
localVariables,
|
||||
getAllCollectionsInheritChain,
|
||||
})}
|
||||
returnScope={(scope) => {
|
||||
return uniqBy([...scope, ...variableOptions], 'key');
|
||||
}}
|
||||
/>
|
||||
);
|
||||
},
|
||||
},
|
||||
'x-component': 'ConditionSelect',
|
||||
},
|
||||
actionsTitle: {
|
||||
'x-component': 'h4',
|
||||
'x-content': '{{ t("动作") }}',
|
||||
},
|
||||
actionsBlock: {
|
||||
type: 'void',
|
||||
properties: {
|
||||
actions: {
|
||||
type: 'array',
|
||||
'x-component': 'ArrayItems',
|
||||
items: {
|
||||
type: 'object',
|
||||
'x-component': 'Space',
|
||||
properties: {
|
||||
action: {
|
||||
type: 'string',
|
||||
'x-component': ActionSelect,
|
||||
},
|
||||
|
||||
params: {
|
||||
type: 'array',
|
||||
'x-component': 'ArrayItems',
|
||||
items: {
|
||||
type: 'object',
|
||||
'x-component': 'Space',
|
||||
'x-component-props': {
|
||||
direction: 'vertical',
|
||||
style: {
|
||||
marginBottom: '10px',
|
||||
},
|
||||
},
|
||||
properties: {
|
||||
key: {
|
||||
type: 'string',
|
||||
'x-component': ActionParamSelect,
|
||||
'x-reactions': {
|
||||
dependencies: ['...action'],
|
||||
fulfill: {
|
||||
schema: {
|
||||
'x-component-props': {
|
||||
action: '{{$deps[0]}}',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
value: {
|
||||
type: 'string',
|
||||
'x-component': 'Input',
|
||||
'x-reactions': {
|
||||
dependencies: ['...action'],
|
||||
fulfill: {
|
||||
schema: {
|
||||
'x-component-props': {
|
||||
action: '{{$deps[0]}}',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
delete: {
|
||||
type: 'void',
|
||||
'x-component': DeleteBtn,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
add: {
|
||||
type: 'void',
|
||||
'x-component': AddBtn,
|
||||
'x-component-props': {
|
||||
addKey: '.params',
|
||||
text: '{{ t("添加参数") }}',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
add: {
|
||||
type: 'void',
|
||||
'x-component': AddBtn,
|
||||
'x-component-props': {
|
||||
addKey: '.actions',
|
||||
text: '{{ t("添加动作") }}',
|
||||
},
|
||||
},
|
||||
},
|
||||
// 'x-component': ActionsField,
|
||||
},
|
||||
actionsBlock: actionsSchema,
|
||||
},
|
||||
},
|
||||
remove: {
|
||||
@ -236,7 +148,7 @@ export const ActionsSetting = withDynamicSchemaProps(
|
||||
properties: {
|
||||
add: {
|
||||
type: 'void',
|
||||
title: '{{ t("Add actions") }}',
|
||||
title: '{{ t("添加规则") }}',
|
||||
'x-component': 'ArrayCollapse.Addition',
|
||||
'x-reactions': {
|
||||
dependencies: ['rules'],
|
||||
@ -269,7 +181,18 @@ export const ActionsSetting = withDynamicSchemaProps(
|
||||
[dynamicComponent, fieldSchema, options],
|
||||
);
|
||||
|
||||
return <SchemaComponent components={components} schema={schema} />;
|
||||
return (
|
||||
<SchemaComponent
|
||||
components={components}
|
||||
schema={schema}
|
||||
scope={{
|
||||
emptyParams: (field, target) => {
|
||||
const params = field.query('.params').take(1);
|
||||
params.value = [];
|
||||
},
|
||||
}}
|
||||
/>
|
||||
);
|
||||
|
||||
// return (
|
||||
// // 这里使用 SubFormProvider 包裹，是为了让子表格的联动规则中 “当前对象” 的配置显示正确
|
||||
|
||||
@ -0,0 +1,103 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
|
||||
const actionParamsSchema = {
|
||||
type: 'void',
|
||||
properties: {
|
||||
params: {
|
||||
type: 'array',
|
||||
'x-component': 'ArrayItems',
|
||||
items: {
|
||||
type: 'object',
|
||||
'x-decorator': 'Space.Compact',
|
||||
'x-decorator-props': {
|
||||
style: {
|
||||
marginBottom: 8,
|
||||
},
|
||||
},
|
||||
properties: {
|
||||
key: {
|
||||
type: 'string',
|
||||
'x-component': 'ActionParamSelect',
|
||||
'x-reactions': {
|
||||
dependencies: ['...action'],
|
||||
fulfill: {
|
||||
schema: {
|
||||
'x-component-props': {
|
||||
action: '{{$deps[0]}}',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
value: { type: 'string', 'x-component': 'Input' },
|
||||
removeBtn: {
|
||||
type: 'void',
|
||||
'x-component': 'ArrayItems.Remove',
|
||||
'x-component-props': { type: 'default', style: { paddingRight: 6 } },
|
||||
},
|
||||
},
|
||||
},
|
||||
properties: {
|
||||
addBtn: {
|
||||
type: 'void',
|
||||
'x-component': 'ArrayItems.Addition',
|
||||
title: '{{ t("添加参数") }}',
|
||||
'x-component-props': { block: false, type: 'link' },
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const actionsSchema = {
|
||||
type: 'void',
|
||||
properties: {
|
||||
actions: {
|
||||
type: 'array',
|
||||
'x-component': 'ArrayItems',
|
||||
items: {
|
||||
type: 'object',
|
||||
'x-component': 'Space',
|
||||
'x-component-props': {
|
||||
align: 'start',
|
||||
style: {
|
||||
marginBottom: 8,
|
||||
},
|
||||
},
|
||||
properties: {
|
||||
action: {
|
||||
type: 'string',
|
||||
'x-component': 'ActionSelect',
|
||||
'x-reactions': {
|
||||
effects: ['onFieldValueChange'],
|
||||
fulfill: {
|
||||
run: 'emptyParams($self,$target)',
|
||||
},
|
||||
},
|
||||
},
|
||||
paramsBlock: actionParamsSchema,
|
||||
removeBtn: {
|
||||
type: 'void',
|
||||
'x-component': 'ArrayItems.Remove',
|
||||
},
|
||||
},
|
||||
},
|
||||
properties: {
|
||||
add: {
|
||||
type: 'void',
|
||||
'x-component': 'ArrayItems.Addition',
|
||||
title: '{{ t("添加动作") }}',
|
||||
'x-component-props': { block: false, type: 'link' },
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
// 'x-component': ActionsField,
|
||||
};
|
||||
@ -44,7 +44,7 @@ export default function EventSelect(props: {
|
||||
<TreeSelect
|
||||
value={selectedEvent}
|
||||
dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
|
||||
placeholder="Please select"
|
||||
placeholder="选择事件"
|
||||
allowClear
|
||||
treeDefaultExpandAll
|
||||
onChange={(value) => {
|
||||
|
||||
@ -0,0 +1,424 @@
|
||||
/**
|
||||
* 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 { observer, useField, useFieldSchema, useForm } from '@formily/react';
|
||||
import React, { useMemo } from 'react';
|
||||
import { useCollectionManager_deprecated } from '../../../collection-manager';
|
||||
import { useCollectionParentRecordData } from '../../../data-source/collection-record/CollectionRecordProvider';
|
||||
import { CollectionProvider } from '../../../data-source/collection/CollectionProvider';
|
||||
import { withDynamicSchemaProps } from '../../../hoc/withDynamicSchemaProps';
|
||||
import { RecordProvider } from '../../../record-provider';
|
||||
import { SchemaComponent, useProps } from '../../../schema-component';
|
||||
import { SubFormProvider } from '../../../schema-component/antd/association-field/hooks';
|
||||
import { DynamicComponentProps } from '../../../schema-component/antd/filter/DynamicComponent';
|
||||
import { FilterContext } from '../../../schema-component/antd/filter/context';
|
||||
import { VariableInput, getShouldChange } from '../../../schema-settings/VariableInput/VariableInput';
|
||||
import { ActionsField } from './Actions';
|
||||
import { FormProvider, createSchemaField } from '@formily/react';
|
||||
import { ArrayCollapse } from '../components/LinkageHeader';
|
||||
import { Filter } from '../Filter';
|
||||
import { ArrayBase, Select, DatePicker, Editable, Input, ArrayItems, FormItem } from '@formily/antd-v5';
|
||||
import { useFilterOptions } from './hooks/useFilterOptions';
|
||||
import { EventDefinition, EventSetting } from '../../types';
|
||||
import { useVariableOptions } from './hooks/useVariableOptions';
|
||||
import { uniqBy } from 'lodash';
|
||||
import { AddBtn, DeleteBtn } from './AddBtn';
|
||||
import { ActionSelect } from './ActionSelect';
|
||||
import { ActionParamSelect } from './ActionParamSelect';
|
||||
import { Space } from 'antd';
|
||||
import { useFormBlockContext } from '../../../block-provider';
|
||||
import ConditionSelect from './ConditionSelect';
|
||||
|
||||
const SchemaField = createSchemaField({
|
||||
components: {
|
||||
FormItem,
|
||||
DatePicker,
|
||||
Editable,
|
||||
Space, // 使用antd包内的Space组件，包含Compact
|
||||
Compact: Space.Compact,
|
||||
Input,
|
||||
Select,
|
||||
ArrayItems,
|
||||
ArrayCollapse,
|
||||
Filter,
|
||||
ActionSelect,
|
||||
ActionParamSelect,
|
||||
ConditionSelect,
|
||||
},
|
||||
scope: {
|
||||
emptyParams(field, target) {
|
||||
const params = field.query('.params').take(1);
|
||||
params.value = [];
|
||||
},
|
||||
},
|
||||
});
|
||||
export interface Props {
|
||||
dynamicComponent: any;
|
||||
definitions: EventDefinition[];
|
||||
}
|
||||
|
||||
export const ActionsSetting = withDynamicSchemaProps(
|
||||
observer((props: Props) => {
|
||||
const fieldSchema = useFieldSchema();
|
||||
const array = ArrayBase.useArray();
|
||||
const recordValues = ArrayBase.useRecord();
|
||||
const index = ArrayBase.useIndex();
|
||||
const { definitions, options, defaultValues, collectionName, variables, localVariables, record, dynamicComponent } =
|
||||
props;
|
||||
const { getAllCollectionsInheritChain } = useCollectionManager_deprecated();
|
||||
const parentRecordData = useCollectionParentRecordData();
|
||||
const { form } = useFormBlockContext();
|
||||
const filterOptions = useFilterOptions(recordValues);
|
||||
const variableOptions = useVariableOptions();
|
||||
console.log('variableOptions', variableOptions);
|
||||
const components = useMemo(() => ({ ArrayCollapse, Filter }), []);
|
||||
|
||||
const schema = useMemo(
|
||||
() => ({
|
||||
type: 'object',
|
||||
properties: {
|
||||
rules: {
|
||||
type: 'array',
|
||||
// default: defaultValues,
|
||||
'x-component': 'ArrayCollapse',
|
||||
'x-decorator': 'FormItem',
|
||||
'x-component-props': {
|
||||
accordion: true,
|
||||
titleRender: (item: any, index: number) => {
|
||||
return `动作 ${index + 1}`;
|
||||
},
|
||||
showEmpty: false,
|
||||
},
|
||||
items: {
|
||||
type: 'object',
|
||||
'x-component': 'ArrayCollapse.CollapsePanel',
|
||||
'x-component-props': {
|
||||
// extra: <EnableLinkage />,
|
||||
},
|
||||
properties: {
|
||||
layout: {
|
||||
type: 'void',
|
||||
'x-component': 'FormLayout',
|
||||
'x-component-props': {
|
||||
labelStyle: {
|
||||
marginTop: '6px',
|
||||
},
|
||||
labelCol: 8,
|
||||
wrapperCol: 16,
|
||||
},
|
||||
properties: {
|
||||
conditionsTitle: {
|
||||
'x-component': 'h4',
|
||||
'x-content': '{{ t("Condition") }}',
|
||||
},
|
||||
condition: {
|
||||
'x-component': 'Filter',
|
||||
'x-use-component-props': () => {
|
||||
return {
|
||||
options: filterOptions,
|
||||
className: css`
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin-left: 10px;
|
||||
`,
|
||||
};
|
||||
},
|
||||
'x-component-props': {
|
||||
collectionName,
|
||||
dynamicComponent: (props: DynamicComponentProps) => {
|
||||
const { collectionField } = props;
|
||||
return (
|
||||
<VariableInput
|
||||
{...props}
|
||||
form={form}
|
||||
record={record}
|
||||
shouldChange={getShouldChange({
|
||||
collectionField,
|
||||
variables,
|
||||
localVariables,
|
||||
getAllCollectionsInheritChain,
|
||||
})}
|
||||
returnScope={(scope) => {
|
||||
return uniqBy([...scope, ...variableOptions], 'key');
|
||||
}}
|
||||
/>
|
||||
);
|
||||
},
|
||||
},
|
||||
},
|
||||
actionsTitle: {
|
||||
'x-component': 'h4',
|
||||
'x-content': '{{ t("动作") }}',
|
||||
},
|
||||
actionsBlock: {
|
||||
type: 'void',
|
||||
properties: {
|
||||
actions: {
|
||||
type: 'array',
|
||||
'x-component': 'ArrayItems',
|
||||
items: {
|
||||
type: 'object',
|
||||
'x-component': 'Space',
|
||||
properties: {
|
||||
action: {
|
||||
type: 'string',
|
||||
'x-component': ActionSelect,
|
||||
},
|
||||
|
||||
params: {
|
||||
type: 'array',
|
||||
'x-component': 'ArrayItems',
|
||||
items: {
|
||||
type: 'object',
|
||||
'x-component': 'Space',
|
||||
'x-component-props': {
|
||||
direction: 'vertical',
|
||||
style: {
|
||||
marginBottom: '10px',
|
||||
},
|
||||
},
|
||||
properties: {
|
||||
key: {
|
||||
type: 'string',
|
||||
'x-component': ActionParamSelect,
|
||||
'x-reactions': {
|
||||
dependencies: ['...action'],
|
||||
fulfill: {
|
||||
schema: {
|
||||
'x-component-props': {
|
||||
action: '{{$deps[0]}}',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
value: {
|
||||
type: 'string',
|
||||
'x-component': 'Input',
|
||||
'x-reactions': {
|
||||
dependencies: ['...action'],
|
||||
fulfill: {
|
||||
schema: {
|
||||
'x-component-props': {
|
||||
action: '{{$deps[0]}}',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
delete: {
|
||||
type: 'void',
|
||||
'x-component': DeleteBtn,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
add: {
|
||||
type: 'void',
|
||||
'x-component': AddBtn,
|
||||
'x-component-props': {
|
||||
addKey: '.params',
|
||||
text: '{{ t("添加参数") }}',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
add: {
|
||||
type: 'void',
|
||||
'x-component': AddBtn,
|
||||
'x-component-props': {
|
||||
addKey: '.actions',
|
||||
text: '{{ t("添加动作") }}',
|
||||
},
|
||||
},
|
||||
},
|
||||
// 'x-component': ActionsField,
|
||||
},
|
||||
},
|
||||
},
|
||||
remove: {
|
||||
type: 'void',
|
||||
'x-component': 'ArrayCollapse.Remove',
|
||||
},
|
||||
},
|
||||
},
|
||||
properties: {
|
||||
add: {
|
||||
type: 'void',
|
||||
title: '{{ t("Add actions") }}',
|
||||
'x-component': 'ArrayCollapse.Addition',
|
||||
'x-reactions': {
|
||||
dependencies: ['rules'],
|
||||
fulfill: {
|
||||
state: {
|
||||
// disabled: '{{$deps[0].length >= 3}}',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
[
|
||||
collectionName,
|
||||
defaultValues,
|
||||
form,
|
||||
getAllCollectionsInheritChain,
|
||||
localVariables,
|
||||
options,
|
||||
props,
|
||||
record,
|
||||
variables,
|
||||
filterOptions,
|
||||
],
|
||||
);
|
||||
const value = useMemo(
|
||||
() => ({ field: options, fieldSchema, dynamicComponent, options: options || [] }),
|
||||
[dynamicComponent, fieldSchema, options],
|
||||
);
|
||||
|
||||
console.log('schema filterOptions', filterOptions);
|
||||
|
||||
return (
|
||||
<SchemaField>
|
||||
<SchemaField.Array
|
||||
name="rules"
|
||||
x-component="ArrayCollapse"
|
||||
x-component-props={{ accordion: true, titleRender: (item: any, index: number) => `动作 ${index + 1}` }}
|
||||
>
|
||||
<SchemaField.Object>
|
||||
<SchemaField.Void x-component="ArrayCollapse.Remove" />
|
||||
<SchemaField.Void x-component="h4" x-content="条件" />
|
||||
<SchemaField.Object
|
||||
name="condition"
|
||||
x-component="ConditionSelect"
|
||||
x-use-component-props={() => {
|
||||
return {
|
||||
options: filterOptions,
|
||||
className: css`
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin-left: 10px;
|
||||
`,
|
||||
};
|
||||
}}
|
||||
x-component-props={{
|
||||
collectionName,
|
||||
dynamicComponent: (props: DynamicComponentProps) => {
|
||||
const { collectionField } = props;
|
||||
return (
|
||||
<VariableInput
|
||||
{...props}
|
||||
// form={form}
|
||||
record={record}
|
||||
shouldChange={getShouldChange({
|
||||
collectionField,
|
||||
variables,
|
||||
localVariables,
|
||||
getAllCollectionsInheritChain,
|
||||
})}
|
||||
/>
|
||||
);
|
||||
},
|
||||
}}
|
||||
/>
|
||||
|
||||
<SchemaField.Void x-component="h4" x-content="动作" />
|
||||
|
||||
<SchemaField.Array name="actions" x-component="ArrayItems">
|
||||
<SchemaField.Object
|
||||
x-decorator="Space"
|
||||
x-decorator-props={{
|
||||
align: 'start',
|
||||
style: {
|
||||
marginBottom: 8,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<SchemaField.String
|
||||
name="action"
|
||||
x-component="ActionSelect"
|
||||
x-reactions={{
|
||||
effects: ['onFieldValueChange'],
|
||||
fulfill: {
|
||||
run: 'emptyParams($self,$target)',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<SchemaField.Array name="params" x-component="ArrayItems">
|
||||
<SchemaField.Object
|
||||
x-decorator="Space.Compact"
|
||||
x-decorator-props={{
|
||||
style: {
|
||||
marginBottom: 8,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<SchemaField.String
|
||||
name="key"
|
||||
x-component="ActionParamSelect"
|
||||
x-reactions={{
|
||||
dependencies: ['...action'],
|
||||
fulfill: {
|
||||
schema: {
|
||||
'x-component-props': {
|
||||
action: '{{$deps[0]}}',
|
||||
},
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<SchemaField.String name="value" x-component="Input" />
|
||||
<SchemaField.Void
|
||||
x-component="ArrayItems.Remove"
|
||||
x-component-props={{ type: 'default', style: { paddingRight: 6 } }}
|
||||
/>
|
||||
</SchemaField.Object>
|
||||
<SchemaField.Void
|
||||
x-component="ArrayItems.Addition"
|
||||
title="添加参数"
|
||||
x-component-props={{ block: false, type: 'link' }}
|
||||
/>
|
||||
</SchemaField.Array>
|
||||
<SchemaField.Void x-component="ArrayItems.Remove" />
|
||||
</SchemaField.Object>
|
||||
<SchemaField.Void
|
||||
x-component="ArrayItems.Addition"
|
||||
title="添加动作"
|
||||
x-component-props={{ block: false, type: 'link' }}
|
||||
/>
|
||||
</SchemaField.Array>
|
||||
</SchemaField.Object>
|
||||
<SchemaField.Void x-component="ArrayCollapse.Addition" title="添加规则" />
|
||||
</SchemaField.Array>
|
||||
</SchemaField>
|
||||
);
|
||||
|
||||
// return <SchemaComponent components={components} schema={schema} />;
|
||||
|
||||
// return (
|
||||
// // 这里使用 SubFormProvider 包裹，是为了让子表格的联动规则中 “当前对象” 的配置显示正确
|
||||
// // <FormProvider form={form}>
|
||||
// <SubFormProvider value={{ value: null, collection: { name: collectionName } as any }}>
|
||||
// <RecordProvider record={record} parent={parentRecordData}>
|
||||
// <FilterContext.Provider value={value}>
|
||||
// <CollectionProvider name={collectionName}>
|
||||
// <SchemaComponent components={components} schema={schema} />
|
||||
// </CollectionProvider>
|
||||
// </FilterContext.Provider>
|
||||
// </RecordProvider>
|
||||
// </SubFormProvider>
|
||||
// // </FormProvider>
|
||||
// );
|
||||
}),
|
||||
{ displayName: 'ActionsSetting' },
|
||||
);
|
||||
@ -0,0 +1,290 @@
|
||||
/**
|
||||
* 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 { observer, useFieldSchema } from '@formily/react';
|
||||
import React, { useMemo } from 'react';
|
||||
import { useCollectionManager_deprecated } from '../../../collection-manager';
|
||||
import { useCollectionParentRecordData } from '../../../data-source/collection-record/CollectionRecordProvider';
|
||||
import { CollectionProvider } from '../../../data-source/collection/CollectionProvider';
|
||||
import { withDynamicSchemaProps } from '../../../hoc/withDynamicSchemaProps';
|
||||
import { RecordProvider } from '../../../record-provider';
|
||||
import { SchemaComponent, useProps } from '../../../schema-component';
|
||||
import { SubFormProvider } from '../../../schema-component/antd/association-field/hooks';
|
||||
import { DynamicComponentProps } from '../../../schema-component/antd/filter/DynamicComponent';
|
||||
import { FilterContext } from '../../../schema-component/antd/filter/context';
|
||||
import { VariableInput, getShouldChange } from '../../../schema-settings/VariableInput/VariableInput';
|
||||
import { ActionsField } from './Actions';
|
||||
import { FormProvider, createSchemaField } from '@formily/react';
|
||||
import { ArrayCollapse } from '../components/LinkageHeader';
|
||||
import { Filter } from '../Filter';
|
||||
import { ArrayBase } from '@formily/antd-v5';
|
||||
import { useFilterOptions } from './hooks/useFilterOptions';
|
||||
import { EventDefinition, EventSetting } from '../../types';
|
||||
import { useVariableOptions } from './hooks/useVariableOptions';
|
||||
import { uniqBy } from 'lodash';
|
||||
import { AddBtn, DeleteBtn } from './AddBtn';
|
||||
import { ActionSelect } from './ActionSelect';
|
||||
import { ActionParamSelect } from './ActionParamSelect';
|
||||
|
||||
export interface Props {
|
||||
dynamicComponent: any;
|
||||
definitions: EventDefinition[];
|
||||
}
|
||||
|
||||
export const ActionsSetting = withDynamicSchemaProps(
|
||||
observer((props: Props) => {
|
||||
const fieldSchema = useFieldSchema();
|
||||
const array = ArrayBase.useArray();
|
||||
const recordValues = ArrayBase.useRecord();
|
||||
const index = ArrayBase.useIndex();
|
||||
const {
|
||||
definitions,
|
||||
options,
|
||||
defaultValues,
|
||||
collectionName,
|
||||
form,
|
||||
variables,
|
||||
localVariables,
|
||||
record,
|
||||
dynamicComponent,
|
||||
} = props;
|
||||
const { getAllCollectionsInheritChain } = useCollectionManager_deprecated();
|
||||
const parentRecordData = useCollectionParentRecordData();
|
||||
|
||||
const filterOptions = useFilterOptions(recordValues);
|
||||
const variableOptions = useVariableOptions();
|
||||
console.log('variableOptions', variableOptions);
|
||||
|
||||
const components = useMemo(() => ({ ArrayCollapse, Filter }), []);
|
||||
const schema = useMemo(
|
||||
() => ({
|
||||
type: 'object',
|
||||
properties: {
|
||||
rules: {
|
||||
type: 'array',
|
||||
// default: defaultValues,
|
||||
'x-component': 'ArrayCollapse',
|
||||
'x-decorator': 'FormItem',
|
||||
'x-component-props': {
|
||||
accordion: true,
|
||||
titleRender: (item: any, index: number) => {
|
||||
return `动作 ${index + 1}`;
|
||||
},
|
||||
showEmpty: false,
|
||||
},
|
||||
items: {
|
||||
type: 'object',
|
||||
'x-component': 'ArrayCollapse.CollapsePanel',
|
||||
'x-component-props': {
|
||||
// extra: <EnableLinkage />,
|
||||
},
|
||||
properties: {
|
||||
layout: {
|
||||
type: 'void',
|
||||
'x-component': 'FormLayout',
|
||||
'x-component-props': {
|
||||
labelStyle: {
|
||||
marginTop: '6px',
|
||||
},
|
||||
labelCol: 8,
|
||||
wrapperCol: 16,
|
||||
},
|
||||
properties: {
|
||||
conditionsTitle: {
|
||||
'x-component': 'h4',
|
||||
'x-content': '{{ t("Condition") }}',
|
||||
},
|
||||
condition: {
|
||||
'x-component': 'Filter',
|
||||
'x-use-component-props': () => {
|
||||
return {
|
||||
options: filterOptions,
|
||||
className: css`
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin-left: 10px;
|
||||
`,
|
||||
};
|
||||
},
|
||||
'x-component-props': {
|
||||
collectionName,
|
||||
dynamicComponent: (props: DynamicComponentProps) => {
|
||||
const { collectionField } = props;
|
||||
return (
|
||||
<VariableInput
|
||||
{...props}
|
||||
form={form}
|
||||
record={record}
|
||||
shouldChange={getShouldChange({
|
||||
collectionField,
|
||||
variables,
|
||||
localVariables,
|
||||
getAllCollectionsInheritChain,
|
||||
})}
|
||||
returnScope={(scope) => {
|
||||
return uniqBy([...scope, ...variableOptions], 'key');
|
||||
}}
|
||||
/>
|
||||
);
|
||||
},
|
||||
},
|
||||
},
|
||||
actionsTitle: {
|
||||
'x-component': 'h4',
|
||||
'x-content': '{{ t("动作") }}',
|
||||
},
|
||||
actionsBlock: {
|
||||
type: 'void',
|
||||
properties: {
|
||||
actions: {
|
||||
type: 'array',
|
||||
'x-component': 'ArrayItems',
|
||||
items: {
|
||||
type: 'object',
|
||||
'x-component': 'Space',
|
||||
properties: {
|
||||
action: {
|
||||
type: 'string',
|
||||
'x-component': ActionSelect,
|
||||
},
|
||||
|
||||
params: {
|
||||
type: 'array',
|
||||
'x-component': 'ArrayItems',
|
||||
items: {
|
||||
type: 'object',
|
||||
'x-component': 'Space',
|
||||
'x-component-props': {
|
||||
direction: 'vertical',
|
||||
style: {
|
||||
marginBottom: '10px',
|
||||
},
|
||||
},
|
||||
properties: {
|
||||
key: {
|
||||
type: 'string',
|
||||
'x-component': ActionParamSelect,
|
||||
'x-reactions': {
|
||||
dependencies: ['...action'],
|
||||
fulfill: {
|
||||
schema: {
|
||||
'x-component-props': {
|
||||
action: '{{$deps[0]}}',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
value: {
|
||||
type: 'string',
|
||||
'x-component': 'Input',
|
||||
'x-reactions': {
|
||||
dependencies: ['...action'],
|
||||
fulfill: {
|
||||
schema: {
|
||||
'x-component-props': {
|
||||
action: '{{$deps[0]}}',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
delete: {
|
||||
type: 'void',
|
||||
'x-component': DeleteBtn,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
add: {
|
||||
type: 'void',
|
||||
'x-component': AddBtn,
|
||||
'x-component-props': {
|
||||
addKey: '.params',
|
||||
text: '{{ t("添加参数") }}',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
add: {
|
||||
type: 'void',
|
||||
'x-component': AddBtn,
|
||||
'x-component-props': {
|
||||
addKey: '.actions',
|
||||
text: '{{ t("添加动作") }}',
|
||||
},
|
||||
},
|
||||
},
|
||||
// 'x-component': ActionsField,
|
||||
},
|
||||
},
|
||||
},
|
||||
remove: {
|
||||
type: 'void',
|
||||
'x-component': 'ArrayCollapse.Remove',
|
||||
},
|
||||
},
|
||||
},
|
||||
properties: {
|
||||
add: {
|
||||
type: 'void',
|
||||
title: '{{ t("Add actions") }}',
|
||||
'x-component': 'ArrayCollapse.Addition',
|
||||
'x-reactions': {
|
||||
dependencies: ['rules'],
|
||||
fulfill: {
|
||||
state: {
|
||||
// disabled: '{{$deps[0].length >= 3}}',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
[
|
||||
collectionName,
|
||||
defaultValues,
|
||||
form,
|
||||
getAllCollectionsInheritChain,
|
||||
localVariables,
|
||||
options,
|
||||
props,
|
||||
record,
|
||||
variables,
|
||||
filterOptions,
|
||||
],
|
||||
);
|
||||
const value = useMemo(
|
||||
() => ({ field: options, fieldSchema, dynamicComponent, options: options || [] }),
|
||||
[dynamicComponent, fieldSchema, options],
|
||||
);
|
||||
|
||||
return <SchemaComponent components={components} schema={schema} />;
|
||||
|
||||
// return (
|
||||
// // 这里使用 SubFormProvider 包裹，是为了让子表格的联动规则中 “当前对象” 的配置显示正确
|
||||
// // <FormProvider form={form}>
|
||||
// <SubFormProvider value={{ value: null, collection: { name: collectionName } as any }}>
|
||||
// <RecordProvider record={record} parent={parentRecordData}>
|
||||
// <FilterContext.Provider value={value}>
|
||||
// <CollectionProvider name={collectionName}>
|
||||
// <SchemaComponent components={components} schema={schema} />
|
||||
// </CollectionProvider>
|
||||
// </FilterContext.Provider>
|
||||
// </RecordProvider>
|
||||
// </SubFormProvider>
|
||||
// // </FormProvider>
|
||||
// );
|
||||
}),
|
||||
{ displayName: 'ActionsSetting' },
|
||||
);
|
||||
@ -47,12 +47,11 @@ export const EventSettingItem = (props) => {
|
||||
const collectionName = 't_aierml1wni1';
|
||||
const options = useLinkageCollectionFilterOptions(collectionName);
|
||||
const linkageOptions = useLinkageCollectionFieldOptions(collectionName, readPretty);
|
||||
const { form } = useFormBlockContext();
|
||||
const ff = useFormBlockContext();
|
||||
const variables = useVariables();
|
||||
const localVariables = useLocalVariables();
|
||||
const { type: formBlockType } = useFormBlockType();
|
||||
const record = useRecord();
|
||||
|
||||
return (
|
||||
<SchemaSettingsModalItem
|
||||
title={'Event Setting'}
|
||||
@ -122,7 +121,7 @@ export const EventSettingItem = (props) => {
|
||||
category: 'default',
|
||||
elementType: 'field',
|
||||
collectionName,
|
||||
form,
|
||||
// form,
|
||||
variables,
|
||||
localVariables,
|
||||
record,
|
||||
|
||||
@ -75,7 +75,7 @@ export interface EventSetting {
|
||||
}
|
||||
export interface EventActionSetting {
|
||||
definition: string;
|
||||
event: string;
|
||||
action: string;
|
||||
uid?: string;
|
||||
params?: Array<EventActionSettingParams>;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user