@formily-design/formily-antd 1.0.20 → 1.0.22
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm/components/Cascader/preview.js +82 -3
- package/esm/components/DatePicker/preview.js +22 -2
- package/esm/components/Field/index.d.ts +1 -0
- package/esm/components/Field/index.js +1 -0
- package/esm/components/Field/shared.d.ts +1 -1
- package/esm/components/Field/shared.js +3 -3
- package/esm/components/Field/valueMapping.d.ts +78 -0
- package/esm/components/Field/valueMapping.js +227 -0
- package/esm/locales/Cascader.d.ts +39 -0
- package/esm/locales/Cascader.js +39 -0
- package/esm/locales/DatePicker.js +30 -0
- package/esm/schemas/Cascader.js +5 -0
- package/lib/components/Cascader/preview.js +81 -2
- package/lib/components/DatePicker/preview.js +23 -3
- package/lib/components/Field/index.d.ts +1 -0
- package/lib/components/Field/index.js +1 -0
- package/lib/components/Field/shared.d.ts +1 -1
- package/lib/components/Field/shared.js +3 -3
- package/lib/components/Field/valueMapping.d.ts +78 -0
- package/lib/components/Field/valueMapping.js +233 -0
- package/lib/locales/Cascader.d.ts +39 -0
- package/lib/locales/Cascader.js +39 -0
- package/lib/locales/DatePicker.js +30 -0
- package/lib/schemas/Cascader.js +5 -0
- package/package.json +8 -8
|
@@ -1,24 +1,103 @@
|
|
|
1
1
|
import { Cascader as FormilyCascader } from '@formily/antd-v5';
|
|
2
|
-
import { createBehavior, createResource } from '@formily-design/core';
|
|
3
|
-
import { createFieldSchema } from '../Field';
|
|
2
|
+
import { VALUE_MAPPING_CARDINALITY_MULTIPLE, VALUE_MAPPING_SCHEMA_KEY, VALUE_MAPPING_SCOPE_RELATIVE, VALUE_MAPPING_SCOPE_SOURCE, VALUE_MAPPING_TARGET_FIELDS, VALUE_MAPPING_TARGET_OBJECT, createBehavior, createResource, } from '@formily-design/core';
|
|
3
|
+
import { createFieldSchema } from '../Field/shared';
|
|
4
|
+
import { createValueMappingGroup } from '../Field/valueMapping';
|
|
4
5
|
import { AllSchemas } from '../../schemas';
|
|
5
6
|
import { AllLocales } from '../../locales';
|
|
7
|
+
// 这些路径同时被 value-mapping 公共 reaction 和映射位置设置项读取,避免组件配置各自维护协议路径。
|
|
8
|
+
const valueMappingFieldsPath = `${VALUE_MAPPING_SCHEMA_KEY}.target.fields`;
|
|
9
|
+
const valueMappingTargetTypePath = `${VALUE_MAPPING_SCHEMA_KEY}.target.type`;
|
|
10
|
+
const multiplePath = 'x-component-props.multiple';
|
|
11
|
+
/**
|
|
12
|
+
* Cascader 复用 tuple adapter;字段数量由动态 ArrayItems 管理,target 则根据 multiple
|
|
13
|
+
* 和映射位置设置在运行时解析,从而让公共 value-mapping helper 不依赖 Cascader 属性。
|
|
14
|
+
*/
|
|
15
|
+
const ValueMappingGroup = createValueMappingGroup({
|
|
16
|
+
adapter: 'tuple',
|
|
17
|
+
fields: {
|
|
18
|
+
type: 'dynamic',
|
|
19
|
+
path: valueMappingFieldsPath,
|
|
20
|
+
token: 'fieldPath',
|
|
21
|
+
},
|
|
22
|
+
cardinality: { path: multiplePath },
|
|
23
|
+
target: {
|
|
24
|
+
resolve: ({ form, cardinality }) => {
|
|
25
|
+
// 多选业务值必须是对象数组,因此强制使用当前字段 object/source。
|
|
26
|
+
if (cardinality === VALUE_MAPPING_CARDINALITY_MULTIPLE) {
|
|
27
|
+
return {
|
|
28
|
+
type: VALUE_MAPPING_TARGET_OBJECT,
|
|
29
|
+
scope: VALUE_MAPPING_SCOPE_SOURCE,
|
|
30
|
+
};
|
|
31
|
+
}
|
|
32
|
+
// 单选允许在当前字段对象和同级字段之间切换,默认沿用当前字段。
|
|
33
|
+
return form.getValuesIn(valueMappingTargetTypePath) ===
|
|
34
|
+
VALUE_MAPPING_TARGET_FIELDS
|
|
35
|
+
? {
|
|
36
|
+
type: VALUE_MAPPING_TARGET_FIELDS,
|
|
37
|
+
scope: VALUE_MAPPING_SCOPE_RELATIVE,
|
|
38
|
+
includeSource: false,
|
|
39
|
+
}
|
|
40
|
+
: {
|
|
41
|
+
type: VALUE_MAPPING_TARGET_OBJECT,
|
|
42
|
+
scope: VALUE_MAPPING_SCOPE_SOURCE,
|
|
43
|
+
};
|
|
44
|
+
},
|
|
45
|
+
},
|
|
46
|
+
settingsProperties: {
|
|
47
|
+
// 映射位置是组件专属的设置 UI,最终只影响 target.type;scope/includeSource 由 resolver 固定。
|
|
48
|
+
[valueMappingTargetTypePath]: {
|
|
49
|
+
type: 'string',
|
|
50
|
+
title: '{{$node.getMessage("settings.value-mapping-group.mappingPosition")}}',
|
|
51
|
+
enum: [
|
|
52
|
+
{
|
|
53
|
+
value: VALUE_MAPPING_TARGET_OBJECT,
|
|
54
|
+
label: '{{$node.getMessage("settings.value-mapping-group.currentField")}}',
|
|
55
|
+
},
|
|
56
|
+
{
|
|
57
|
+
value: VALUE_MAPPING_TARGET_FIELDS,
|
|
58
|
+
label: '{{$node.getMessage("settings.value-mapping-group.siblingFields")}}',
|
|
59
|
+
},
|
|
60
|
+
],
|
|
61
|
+
'x-decorator': 'FormItem',
|
|
62
|
+
'x-decorator-props': {
|
|
63
|
+
tooltip: '{{$node.getMessage("settings.value-mapping-group.multipleOnlyCurrent")}}',
|
|
64
|
+
},
|
|
65
|
+
'x-component': 'Radio.Group',
|
|
66
|
+
'x-component-props': {
|
|
67
|
+
optionType: 'button',
|
|
68
|
+
defaultValue: VALUE_MAPPING_TARGET_OBJECT,
|
|
69
|
+
},
|
|
70
|
+
'x-reactions': (field) => {
|
|
71
|
+
const fields = field.form.getValuesIn(valueMappingFieldsPath);
|
|
72
|
+
const multiple = field.form.getValuesIn(multiplePath);
|
|
73
|
+
// 没有字段行时不显示位置选项;multiple 开启后位置只能是当前字段。
|
|
74
|
+
field.visible = Array.isArray(fields) && fields.length > 0;
|
|
75
|
+
field.disabled = multiple === true;
|
|
76
|
+
},
|
|
77
|
+
},
|
|
78
|
+
},
|
|
79
|
+
});
|
|
6
80
|
export const Cascader = FormilyCascader;
|
|
81
|
+
// 将 Cascader 注册为可选中的设计器行为,并挂载专属属性面板配置。
|
|
7
82
|
Cascader.Behavior = createBehavior({
|
|
8
83
|
name: 'Cascader',
|
|
9
84
|
extends: ['Field'],
|
|
10
85
|
selector: (node) => node.props['x-component'] === 'Cascader',
|
|
11
86
|
designerProps: {
|
|
12
|
-
propsSchema: createFieldSchema(AllSchemas.Cascader
|
|
87
|
+
propsSchema: createFieldSchema(AllSchemas.Cascader, undefined, {
|
|
88
|
+
'value-mapping-group': ValueMappingGroup,
|
|
89
|
+
}),
|
|
13
90
|
},
|
|
14
91
|
designerLocales: AllLocales.Cascader,
|
|
15
92
|
});
|
|
93
|
+
// 将 Cascader 注册到资源面板,拖入画布时生成默认 Field Schema。
|
|
16
94
|
Cascader.Resource = createResource({
|
|
17
95
|
icon: 'CascaderSource',
|
|
18
96
|
elements: [
|
|
19
97
|
{
|
|
20
98
|
componentName: 'Field',
|
|
21
99
|
props: {
|
|
100
|
+
type: 'array',
|
|
22
101
|
title: 'Cascader',
|
|
23
102
|
'x-decorator': 'FormItem',
|
|
24
103
|
'x-component': 'Cascader',
|
|
@@ -1,8 +1,26 @@
|
|
|
1
1
|
import { DatePicker as FormilyDatePicker } from '@formily/antd-v5';
|
|
2
2
|
import { createBehavior, createResource } from '@formily-design/core';
|
|
3
|
-
import { createFieldSchema } from '../Field';
|
|
3
|
+
import { createFieldSchema } from '../Field/shared';
|
|
4
|
+
import { createValueMappingGroup } from '../Field/valueMapping';
|
|
4
5
|
import { AllSchemas } from '../../schemas';
|
|
5
6
|
import { AllLocales } from '../../locales';
|
|
7
|
+
const ValueMappingGroup = createValueMappingGroup({
|
|
8
|
+
adapter: 'tuple',
|
|
9
|
+
fields: {
|
|
10
|
+
type: 'fixed',
|
|
11
|
+
paths: [
|
|
12
|
+
'x-value-mapping.target.fields.0.path',
|
|
13
|
+
'x-value-mapping.target.fields.1.path',
|
|
14
|
+
],
|
|
15
|
+
tokens: ['startPath', 'endPath'],
|
|
16
|
+
},
|
|
17
|
+
cardinality: 'single',
|
|
18
|
+
target: {
|
|
19
|
+
type: 'fields',
|
|
20
|
+
scope: 'relative',
|
|
21
|
+
includeSource: false,
|
|
22
|
+
},
|
|
23
|
+
});
|
|
6
24
|
export const DatePicker = FormilyDatePicker;
|
|
7
25
|
DatePicker.Behavior = createBehavior({
|
|
8
26
|
name: 'DatePicker',
|
|
@@ -17,7 +35,9 @@ DatePicker.Behavior = createBehavior({
|
|
|
17
35
|
extends: ['Field'],
|
|
18
36
|
selector: (node) => node.props['x-component'] === 'DatePicker.RangePicker',
|
|
19
37
|
designerProps: {
|
|
20
|
-
propsSchema: createFieldSchema(AllSchemas.DatePicker.RangePicker
|
|
38
|
+
propsSchema: createFieldSchema(AllSchemas.DatePicker.RangePicker, undefined, {
|
|
39
|
+
'value-mapping-group': ValueMappingGroup,
|
|
40
|
+
}),
|
|
21
41
|
},
|
|
22
42
|
designerLocales: AllLocales.DateRangePicker,
|
|
23
43
|
});
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { ISchema } from '@formily/json-schema';
|
|
2
2
|
export declare const createComponentSchema: (component: ISchema, decorator: ISchema) => Record<string, ISchema | undefined>;
|
|
3
|
-
export declare const createFieldSchema: (component?: ISchema, decorator?: ISchema) => ISchema;
|
|
3
|
+
export declare const createFieldSchema: (component?: ISchema, decorator?: ISchema, additionalGroups?: Record<string, ISchema>) => ISchema;
|
|
4
4
|
export declare const createVoidFieldSchema: (component?: ISchema, decorator?: ISchema) => ISchema;
|
|
@@ -64,10 +64,10 @@ export const createComponentSchema = (component, decorator) => {
|
|
|
64
64
|
},
|
|
65
65
|
};
|
|
66
66
|
};
|
|
67
|
-
export const createFieldSchema = (component, decorator = AllSchemas.FormItem) => {
|
|
67
|
+
export const createFieldSchema = (component, decorator = AllSchemas.FormItem, additionalGroups = {}) => {
|
|
68
68
|
return {
|
|
69
69
|
type: 'object',
|
|
70
|
-
properties: Object.assign({ 'field-group': {
|
|
70
|
+
properties: Object.assign(Object.assign({ 'field-group': {
|
|
71
71
|
type: 'void',
|
|
72
72
|
'x-component': 'CollapseItem',
|
|
73
73
|
properties: {
|
|
@@ -170,7 +170,7 @@ export const createFieldSchema = (component, decorator = AllSchemas.FormItem) =>
|
|
|
170
170
|
'x-component': 'Switch',
|
|
171
171
|
},
|
|
172
172
|
},
|
|
173
|
-
} }, createComponentSchema(component, decorator)),
|
|
173
|
+
} }, additionalGroups), createComponentSchema(component, decorator)),
|
|
174
174
|
};
|
|
175
175
|
};
|
|
176
176
|
export const createVoidFieldSchema = (component, decorator = AllSchemas.FormItem) => {
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
import type { ISchema, IScopeContext, SchemaReaction } from '@formily/json-schema';
|
|
2
|
+
import type { Form } from '@formily/core';
|
|
3
|
+
import { VALUE_MAPPING_TARGET_FIELDS, VALUE_MAPPING_TARGET_OBJECT, VALUE_MAPPING_SCOPE_RELATIVE, VALUE_MAPPING_SCOPE_SOURCE } from '@formily-design/core';
|
|
4
|
+
import type { ValueMappingCardinality, ValueMappingTargetValidationError } from '@formily-design/core';
|
|
5
|
+
export type { ValueMappingTargetValidationError } from '@formily-design/core';
|
|
6
|
+
/** 固定字段由组件属性直接提供;动态字段由设置器中的 ArrayItems 提供。 */
|
|
7
|
+
export type ValueMappingSettingsFieldSource = {
|
|
8
|
+
type: 'fixed';
|
|
9
|
+
paths: string[];
|
|
10
|
+
tokens: string[];
|
|
11
|
+
} | {
|
|
12
|
+
type: 'dynamic';
|
|
13
|
+
path: string;
|
|
14
|
+
token: string;
|
|
15
|
+
};
|
|
16
|
+
export type ValueMappingSettingsCardinality =
|
|
17
|
+
/** 固定 cardinality 适合 RangePicker 等属性已知的组件。 */
|
|
18
|
+
ValueMappingCardinality
|
|
19
|
+
/** 动态 cardinality 从组件属性路径读取,供 Cascader.multiple 等属性联动。 */
|
|
20
|
+
| {
|
|
21
|
+
path: string;
|
|
22
|
+
};
|
|
23
|
+
/** 设置器侧只描述 target 的选择项,具体 fields 由 reaction 在运行时补全。 */
|
|
24
|
+
export type ValueMappingSettingsTarget = {
|
|
25
|
+
type: typeof VALUE_MAPPING_TARGET_FIELDS;
|
|
26
|
+
scope: typeof VALUE_MAPPING_SCOPE_RELATIVE;
|
|
27
|
+
includeSource: boolean;
|
|
28
|
+
} | {
|
|
29
|
+
type: typeof VALUE_MAPPING_TARGET_OBJECT;
|
|
30
|
+
scope: typeof VALUE_MAPPING_SCOPE_SOURCE;
|
|
31
|
+
};
|
|
32
|
+
/** 根据当前设置表单状态解析 target,使公共 helper 不需要识别具体组件。 */
|
|
33
|
+
export type ValueMappingSettingsTargetResolver = {
|
|
34
|
+
resolve(context: {
|
|
35
|
+
form: Form;
|
|
36
|
+
cardinality: ValueMappingCardinality;
|
|
37
|
+
}): ValueMappingSettingsTarget;
|
|
38
|
+
};
|
|
39
|
+
export type ValueMappingSettingsTargetSource = ValueMappingSettingsTarget | ValueMappingSettingsTargetResolver;
|
|
40
|
+
export interface ICreateValueMappingSettingsReactionOptions {
|
|
41
|
+
/** adapter 名称写入协议,转换实现由 designer runtime 注册。 */
|
|
42
|
+
adapter: string;
|
|
43
|
+
/** 映射字段的来源及设置器字段路径。 */
|
|
44
|
+
fields: ValueMappingSettingsFieldSource;
|
|
45
|
+
/** 固定值或组件属性驱动的 cardinality。 */
|
|
46
|
+
cardinality: ValueMappingSettingsCardinality;
|
|
47
|
+
/** 静态 target 或依赖 form/cardinality 的 target resolver。 */
|
|
48
|
+
target: ValueMappingSettingsTargetSource;
|
|
49
|
+
/** 将协议校验错误转换为当前语言的设置器文案。 */
|
|
50
|
+
getMessage: (error: ValueMappingTargetValidationError, scope: IScopeContext) => string | undefined;
|
|
51
|
+
}
|
|
52
|
+
export interface IValueMappingGroupOptions extends Omit<ICreateValueMappingSettingsReactionOptions, 'getMessage'> {
|
|
53
|
+
/** value-mapping 分组使用的 locale 命名空间。 */
|
|
54
|
+
localeKey?: string;
|
|
55
|
+
/** 由具体组件追加的配置项,例如 Cascader 的映射位置单选框。 */
|
|
56
|
+
settingsProperties?: Record<string, ISchema>;
|
|
57
|
+
}
|
|
58
|
+
export declare const validateValueMappingTargetPaths: (paths: unknown[], allowEmpty?: boolean) => ValueMappingTargetValidationError | undefined;
|
|
59
|
+
/**
|
|
60
|
+
* 创建统一处理协议同步、动态字段和校验反馈的设置 reaction。
|
|
61
|
+
* reaction 先读取设置状态,再决定删除协议、反馈错误或写入 canonical v1 协议。
|
|
62
|
+
*/
|
|
63
|
+
export declare const createValueMappingSettingsReaction: ({ adapter, fields, cardinality, target, getMessage, }: ICreateValueMappingSettingsReactionOptions) => SchemaReaction;
|
|
64
|
+
/**
|
|
65
|
+
* 创建组件属性面板中的新 v1 value-mapping 分组。
|
|
66
|
+
* 具体组件可通过 settingsProperties 注入额外设置,但协议同步仍由公共 reaction 负责。
|
|
67
|
+
*/
|
|
68
|
+
export declare const createValueMappingGroup: ({ localeKey, settingsProperties, ...options }: IValueMappingGroupOptions) => {
|
|
69
|
+
type: string;
|
|
70
|
+
'x-component': string;
|
|
71
|
+
'x-component-props': {
|
|
72
|
+
defaultExpand: boolean;
|
|
73
|
+
};
|
|
74
|
+
'x-reactions': SchemaReaction[];
|
|
75
|
+
properties: {
|
|
76
|
+
[x: string]: any;
|
|
77
|
+
};
|
|
78
|
+
};
|
|
@@ -0,0 +1,227 @@
|
|
|
1
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
|
+
var t = {};
|
|
3
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4
|
+
t[p] = s[p];
|
|
5
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
6
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
8
|
+
t[p[i]] = s[p[i]];
|
|
9
|
+
}
|
|
10
|
+
return t;
|
|
11
|
+
};
|
|
12
|
+
import { untracked } from '@formily/reactive';
|
|
13
|
+
import { VALUE_MAPPING_CARDINALITY_MULTIPLE, VALUE_MAPPING_CARDINALITY_SINGLE, VALUE_MAPPING_SCHEMA_KEY, VALUE_MAPPING_TARGET_FIELDS, VALUE_MAPPING_TARGET_OBJECT, VALUE_MAPPING_VERSION, validateValueMappingFieldPaths, } from '@formily-design/core';
|
|
14
|
+
/** 防止清空字段时 reaction 的同步更新与异步清理互相重复。 */
|
|
15
|
+
const pendingMappingCleanups = new WeakSet();
|
|
16
|
+
/** 只有输入过非空文本才显示“不完整”字段的校验反馈。 */
|
|
17
|
+
const hasInputText = (value) => typeof value === 'string' && Boolean(value.trim());
|
|
18
|
+
export const validateValueMappingTargetPaths = (paths, allowEmpty = true) =>
|
|
19
|
+
// 设置器允许固定字段全部为空来表达删除配置;动态字段则由调用方传入对应规则。
|
|
20
|
+
validateValueMappingFieldPaths(paths, { allowEmpty });
|
|
21
|
+
/** 将静态值或组件属性中的 truthy 值统一映射为协议 cardinality。 */
|
|
22
|
+
const getCardinality = (form, cardinality) => {
|
|
23
|
+
if (typeof cardinality === 'string')
|
|
24
|
+
return cardinality;
|
|
25
|
+
return form.getValuesIn(cardinality.path)
|
|
26
|
+
? VALUE_MAPPING_CARDINALITY_MULTIPLE
|
|
27
|
+
: VALUE_MAPPING_CARDINALITY_SINGLE;
|
|
28
|
+
};
|
|
29
|
+
/** 在写入协议前解析静态 target 或组件提供的动态 target。 */
|
|
30
|
+
const resolveTarget = (form, cardinality, target) => {
|
|
31
|
+
if ('resolve' in target) {
|
|
32
|
+
return target.resolve({ form, cardinality });
|
|
33
|
+
}
|
|
34
|
+
return target;
|
|
35
|
+
};
|
|
36
|
+
/** 读取设置器当前字段值,并同时返回用于反馈错误的字段路径。 */
|
|
37
|
+
const getFieldSettings = (form, fields) => {
|
|
38
|
+
if (fields.type === 'fixed') {
|
|
39
|
+
// 通过 query 优先读取已注册字段值,兼容设置器字段尚未注册时的 form 值。
|
|
40
|
+
return {
|
|
41
|
+
values: fields.paths.map((path) => {
|
|
42
|
+
let fieldValue;
|
|
43
|
+
form.query(path).take((field) => {
|
|
44
|
+
fieldValue = field === null || field === void 0 ? void 0 : field.value;
|
|
45
|
+
});
|
|
46
|
+
return fieldValue === undefined ? form.getValuesIn(path) : fieldValue;
|
|
47
|
+
}),
|
|
48
|
+
paths: fields.paths,
|
|
49
|
+
dynamic: false,
|
|
50
|
+
};
|
|
51
|
+
}
|
|
52
|
+
// 动态字段的每一行都映射到协议中的一个 fields 项,路径顺序必须保持一致。
|
|
53
|
+
const current = form.getValuesIn(fields.path);
|
|
54
|
+
const values = Array.isArray(current) ? current : [];
|
|
55
|
+
return {
|
|
56
|
+
values: values.map((item) => item === null || item === void 0 ? void 0 : item.path),
|
|
57
|
+
paths: values.map((_, index) => `${fields.path}.${index}.path`),
|
|
58
|
+
dynamic: true,
|
|
59
|
+
};
|
|
60
|
+
};
|
|
61
|
+
const syncValueMappingProtocol = (form, values, adapter, cardinality, target, fields) => {
|
|
62
|
+
// 协议只保存规范化后的 path;设置器仍保留同一顺序,便于 ArrayItems 增删和排序。
|
|
63
|
+
const normalizedFields = values.map((path) => ({
|
|
64
|
+
path: typeof path === 'string' ? path.trim() : '',
|
|
65
|
+
}));
|
|
66
|
+
const targetValue = target.type === VALUE_MAPPING_TARGET_FIELDS
|
|
67
|
+
? {
|
|
68
|
+
type: VALUE_MAPPING_TARGET_FIELDS,
|
|
69
|
+
scope: target.scope,
|
|
70
|
+
fields: normalizedFields,
|
|
71
|
+
includeSource: target.includeSource === true,
|
|
72
|
+
}
|
|
73
|
+
: {
|
|
74
|
+
type: VALUE_MAPPING_TARGET_OBJECT,
|
|
75
|
+
scope: target.scope,
|
|
76
|
+
fields: normalizedFields,
|
|
77
|
+
};
|
|
78
|
+
const next = {
|
|
79
|
+
version: VALUE_MAPPING_VERSION,
|
|
80
|
+
adapter,
|
|
81
|
+
cardinality,
|
|
82
|
+
target: targetValue,
|
|
83
|
+
};
|
|
84
|
+
const current = form.getValuesIn(VALUE_MAPPING_SCHEMA_KEY);
|
|
85
|
+
// 避免 reaction 在每次运行时重复写入,减少设置表单的二次 reaction。
|
|
86
|
+
if (JSON.stringify(current) !== JSON.stringify(next)) {
|
|
87
|
+
form.setValuesIn(VALUE_MAPPING_SCHEMA_KEY, next);
|
|
88
|
+
}
|
|
89
|
+
// 动态 ArrayItems 需要保持用户对字段顺序的修改;协议本身与设置数组共用同一顺序。
|
|
90
|
+
if (fields.type === 'dynamic') {
|
|
91
|
+
const currentFields = form.getValuesIn(fields.path);
|
|
92
|
+
if (JSON.stringify(currentFields) !== JSON.stringify(normalizedFields)) {
|
|
93
|
+
form.setValuesIn(fields.path, normalizedFields);
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
};
|
|
97
|
+
const syncValueMappingErrors = (form, paths, values, error, message, dynamic) => {
|
|
98
|
+
// 动态行需要立即提示空项;固定字段只有在用户输入过时才提示 incomplete。
|
|
99
|
+
paths.forEach((path, index) => {
|
|
100
|
+
form.query(path).take((field) => {
|
|
101
|
+
if (!(field === null || field === void 0 ? void 0 : field.setSelfErrors))
|
|
102
|
+
return;
|
|
103
|
+
const hasInput = hasInputText(values[index]);
|
|
104
|
+
const show = Boolean(error && (dynamic || error !== 'incomplete' || hasInput));
|
|
105
|
+
field.setSelfErrors(show && message ? [message] : []);
|
|
106
|
+
});
|
|
107
|
+
});
|
|
108
|
+
};
|
|
109
|
+
const shouldDeleteMapping = (values, fields) => {
|
|
110
|
+
// 动态字段“零行”与固定字段“所有值为空”都表示移除完整协议。
|
|
111
|
+
if (fields.type === 'dynamic') {
|
|
112
|
+
return values.length === 0;
|
|
113
|
+
}
|
|
114
|
+
return values.every((value) => !hasInputText(value));
|
|
115
|
+
};
|
|
116
|
+
/**
|
|
117
|
+
* 创建统一处理协议同步、动态字段和校验反馈的设置 reaction。
|
|
118
|
+
* reaction 先读取设置状态,再决定删除协议、反馈错误或写入 canonical v1 协议。
|
|
119
|
+
*/
|
|
120
|
+
export const createValueMappingSettingsReaction = ({ adapter, fields, cardinality, target, getMessage, }) => {
|
|
121
|
+
return (_field, reactionScope) => {
|
|
122
|
+
const form = reactionScope === null || reactionScope === void 0 ? void 0 : reactionScope.$form;
|
|
123
|
+
if (!form)
|
|
124
|
+
return;
|
|
125
|
+
const settings = getFieldSettings(form, fields);
|
|
126
|
+
const error = validateValueMappingFieldPaths(settings.values, {
|
|
127
|
+
allowEmpty: fields.type === 'fixed',
|
|
128
|
+
});
|
|
129
|
+
const message = error ? getMessage(error, reactionScope) : undefined;
|
|
130
|
+
const empty = shouldDeleteMapping(settings.values, fields);
|
|
131
|
+
untracked(() => {
|
|
132
|
+
syncValueMappingErrors(form, settings.paths, settings.values, error, message, settings.dynamic);
|
|
133
|
+
});
|
|
134
|
+
if (empty) {
|
|
135
|
+
// 清空操作可能触发多次 reaction,放到微任务中读取最新状态后再删除协议。
|
|
136
|
+
if (form.getValuesIn(VALUE_MAPPING_SCHEMA_KEY) !== undefined &&
|
|
137
|
+
!pendingMappingCleanups.has(form)) {
|
|
138
|
+
pendingMappingCleanups.add(form);
|
|
139
|
+
Promise.resolve().then(() => {
|
|
140
|
+
pendingMappingCleanups.delete(form);
|
|
141
|
+
const latest = getFieldSettings(form, fields);
|
|
142
|
+
if (shouldDeleteMapping(latest.values, fields) &&
|
|
143
|
+
form.getValuesIn(VALUE_MAPPING_SCHEMA_KEY) !== undefined) {
|
|
144
|
+
form.deleteValuesIn(VALUE_MAPPING_SCHEMA_KEY);
|
|
145
|
+
}
|
|
146
|
+
});
|
|
147
|
+
}
|
|
148
|
+
return;
|
|
149
|
+
}
|
|
150
|
+
const currentCardinality = getCardinality(form, cardinality);
|
|
151
|
+
// target 必须在 cardinality 确定后解析,保证 Cascader.multiple 切换时协议组合合法。
|
|
152
|
+
syncValueMappingProtocol(form, settings.values, adapter, currentCardinality, resolveTarget(form, currentCardinality, target), fields);
|
|
153
|
+
};
|
|
154
|
+
};
|
|
155
|
+
const createFixedFieldsSchema = (fields, localeKey) => {
|
|
156
|
+
// 固定字段直接生成多个 Input,字段名即协议中对应的 settings path。
|
|
157
|
+
const getLocaleMessage = (token) => `{{$node.getMessage("settings.${localeKey}.${token}")}}`;
|
|
158
|
+
return fields.paths.reduce((properties, path, index) => {
|
|
159
|
+
properties[path] = {
|
|
160
|
+
type: 'string',
|
|
161
|
+
title: getLocaleMessage(fields.tokens[index]),
|
|
162
|
+
'x-decorator': 'FormItem',
|
|
163
|
+
'x-decorator-props': { feedbackLayout: 'loose' },
|
|
164
|
+
'x-component': 'Input',
|
|
165
|
+
'x-component-props': { allowClear: true },
|
|
166
|
+
};
|
|
167
|
+
return properties;
|
|
168
|
+
}, {});
|
|
169
|
+
};
|
|
170
|
+
const createDynamicFieldsSchema = (fields, localeKey) => ({
|
|
171
|
+
// 动态字段使用 ArrayItems 承载可变数量的映射项,顺序就是 tuple 层级顺序。
|
|
172
|
+
[fields.path]: {
|
|
173
|
+
type: 'array',
|
|
174
|
+
default: [],
|
|
175
|
+
'x-component': 'ArrayItems',
|
|
176
|
+
items: {
|
|
177
|
+
type: 'object',
|
|
178
|
+
'x-decorator': 'ArrayItems.Item',
|
|
179
|
+
'x-decorator-props': {
|
|
180
|
+
type: 'divide',
|
|
181
|
+
style: { borderBottom: 'none' },
|
|
182
|
+
},
|
|
183
|
+
properties: {
|
|
184
|
+
// remove 只负责删除当前行;字段顺序由 ArrayItems 自身维护。
|
|
185
|
+
path: {
|
|
186
|
+
type: 'string',
|
|
187
|
+
title: `{{$node.getMessage("settings.${localeKey}.${fields.token}")}}`,
|
|
188
|
+
'x-decorator': 'FormItem',
|
|
189
|
+
'x-decorator-props': { feedbackLayout: 'loose' },
|
|
190
|
+
'x-component': 'Input',
|
|
191
|
+
'x-component-props': { allowClear: true },
|
|
192
|
+
},
|
|
193
|
+
remove: {
|
|
194
|
+
type: 'void',
|
|
195
|
+
'x-component': 'ArrayItems.Remove',
|
|
196
|
+
},
|
|
197
|
+
},
|
|
198
|
+
},
|
|
199
|
+
properties: {
|
|
200
|
+
addition: {
|
|
201
|
+
type: 'void',
|
|
202
|
+
'x-component': 'ArrayItems.Addition',
|
|
203
|
+
'x-component-props': { style: { marginBottom: 8 } },
|
|
204
|
+
},
|
|
205
|
+
},
|
|
206
|
+
},
|
|
207
|
+
});
|
|
208
|
+
/**
|
|
209
|
+
* 创建组件属性面板中的新 v1 value-mapping 分组。
|
|
210
|
+
* 具体组件可通过 settingsProperties 注入额外设置,但协议同步仍由公共 reaction 负责。
|
|
211
|
+
*/
|
|
212
|
+
export const createValueMappingGroup = (_a) => {
|
|
213
|
+
var { localeKey = 'value-mapping-group', settingsProperties } = _a, options = __rest(_a, ["localeKey", "settingsProperties"]);
|
|
214
|
+
const fieldProperties = options.fields.type === 'fixed'
|
|
215
|
+
? createFixedFieldsSchema(options.fields, localeKey)
|
|
216
|
+
: createDynamicFieldsSchema(options.fields, localeKey);
|
|
217
|
+
const properties = Object.assign(Object.assign({}, fieldProperties), settingsProperties);
|
|
218
|
+
return {
|
|
219
|
+
type: 'void',
|
|
220
|
+
'x-component': 'CollapseItem',
|
|
221
|
+
'x-component-props': { defaultExpand: false },
|
|
222
|
+
'x-reactions': [
|
|
223
|
+
createValueMappingSettingsReaction(Object.assign(Object.assign({}, options), { getMessage: (error, reactionScope) => { var _a; return (_a = reactionScope.$node) === null || _a === void 0 ? void 0 : _a.getMessage(`settings.${localeKey}.${error}`); } })),
|
|
224
|
+
],
|
|
225
|
+
properties,
|
|
226
|
+
};
|
|
227
|
+
};
|
|
@@ -7,6 +7,7 @@ export declare const Cascader: {
|
|
|
7
7
|
title: string;
|
|
8
8
|
tooltip: string;
|
|
9
9
|
};
|
|
10
|
+
multiple: string;
|
|
10
11
|
displayRender: {
|
|
11
12
|
title: string;
|
|
12
13
|
tooltip: string;
|
|
@@ -16,6 +17,18 @@ export declare const Cascader: {
|
|
|
16
17
|
tooltip: string;
|
|
17
18
|
};
|
|
18
19
|
};
|
|
20
|
+
'value-mapping-group': {
|
|
21
|
+
title: string;
|
|
22
|
+
fieldPath: string;
|
|
23
|
+
mappingPosition: string;
|
|
24
|
+
currentField: string;
|
|
25
|
+
siblingFields: string;
|
|
26
|
+
multipleOnlyCurrent: string;
|
|
27
|
+
empty: string;
|
|
28
|
+
incomplete: string;
|
|
29
|
+
duplicate: string;
|
|
30
|
+
invalid: string;
|
|
31
|
+
};
|
|
19
32
|
};
|
|
20
33
|
};
|
|
21
34
|
'en-US': {
|
|
@@ -26,6 +39,7 @@ export declare const Cascader: {
|
|
|
26
39
|
title: string;
|
|
27
40
|
tooltip: string;
|
|
28
41
|
};
|
|
42
|
+
multiple: string;
|
|
29
43
|
displayRender: {
|
|
30
44
|
title: string;
|
|
31
45
|
tooltip: string;
|
|
@@ -35,6 +49,18 @@ export declare const Cascader: {
|
|
|
35
49
|
tooltip: string;
|
|
36
50
|
};
|
|
37
51
|
};
|
|
52
|
+
'value-mapping-group': {
|
|
53
|
+
title: string;
|
|
54
|
+
fieldPath: string;
|
|
55
|
+
mappingPosition: string;
|
|
56
|
+
currentField: string;
|
|
57
|
+
siblingFields: string;
|
|
58
|
+
multipleOnlyCurrent: string;
|
|
59
|
+
empty: string;
|
|
60
|
+
incomplete: string;
|
|
61
|
+
duplicate: string;
|
|
62
|
+
invalid: string;
|
|
63
|
+
};
|
|
38
64
|
};
|
|
39
65
|
};
|
|
40
66
|
'ko-KR': {
|
|
@@ -45,6 +71,7 @@ export declare const Cascader: {
|
|
|
45
71
|
title: string;
|
|
46
72
|
tooltip: string;
|
|
47
73
|
};
|
|
74
|
+
multiple: string;
|
|
48
75
|
displayRender: {
|
|
49
76
|
title: string;
|
|
50
77
|
tooltip: string;
|
|
@@ -54,6 +81,18 @@ export declare const Cascader: {
|
|
|
54
81
|
tooltip: string;
|
|
55
82
|
};
|
|
56
83
|
};
|
|
84
|
+
'value-mapping-group': {
|
|
85
|
+
title: string;
|
|
86
|
+
fieldPath: string;
|
|
87
|
+
mappingPosition: string;
|
|
88
|
+
currentField: string;
|
|
89
|
+
siblingFields: string;
|
|
90
|
+
multipleOnlyCurrent: string;
|
|
91
|
+
empty: string;
|
|
92
|
+
incomplete: string;
|
|
93
|
+
duplicate: string;
|
|
94
|
+
invalid: string;
|
|
95
|
+
};
|
|
57
96
|
};
|
|
58
97
|
};
|
|
59
98
|
};
|
package/esm/locales/Cascader.js
CHANGED
|
@@ -7,6 +7,7 @@ export const Cascader = {
|
|
|
7
7
|
title: '选择时触发',
|
|
8
8
|
tooltip: '点选每级菜单选项值都会发生变化',
|
|
9
9
|
},
|
|
10
|
+
multiple: '多选',
|
|
10
11
|
displayRender: {
|
|
11
12
|
title: '渲染函数',
|
|
12
13
|
tooltip: '选择后展示的渲染函数,默认为label => label.join("/") ',
|
|
@@ -16,6 +17,18 @@ export const Cascader = {
|
|
|
16
17
|
tooltip: '默认值:{ label: "label", value: "value", children: "children" }',
|
|
17
18
|
},
|
|
18
19
|
},
|
|
20
|
+
'value-mapping-group': {
|
|
21
|
+
title: '数据映射',
|
|
22
|
+
fieldPath: '业务字段路径',
|
|
23
|
+
mappingPosition: '映射位置',
|
|
24
|
+
currentField: '当前字段',
|
|
25
|
+
siblingFields: '同级字段',
|
|
26
|
+
multipleOnlyCurrent: '多选模式仅支持映射到当前字段',
|
|
27
|
+
empty: '至少配置一个业务字段路径',
|
|
28
|
+
incomplete: '各级字段路径必须同时填写',
|
|
29
|
+
duplicate: '各级字段路径不能相同',
|
|
30
|
+
invalid: '请输入合法的相对字段路径',
|
|
31
|
+
},
|
|
19
32
|
},
|
|
20
33
|
},
|
|
21
34
|
'en-US': {
|
|
@@ -26,6 +39,7 @@ export const Cascader = {
|
|
|
26
39
|
title: 'Change On Select',
|
|
27
40
|
tooltip: 'Click on each level of menu option value will change',
|
|
28
41
|
},
|
|
42
|
+
multiple: 'Multiple',
|
|
29
43
|
displayRender: {
|
|
30
44
|
title: 'Display Render',
|
|
31
45
|
tooltip: 'The rendering function displayed after selection, the default is label => label.join("/") ',
|
|
@@ -35,6 +49,18 @@ export const Cascader = {
|
|
|
35
49
|
tooltip: 'Defaults:{ label: "label", value: "value", children: "children" }',
|
|
36
50
|
},
|
|
37
51
|
},
|
|
52
|
+
'value-mapping-group': {
|
|
53
|
+
title: 'Data Mapping',
|
|
54
|
+
fieldPath: 'Business field path',
|
|
55
|
+
mappingPosition: 'Mapping position',
|
|
56
|
+
currentField: 'Current field',
|
|
57
|
+
siblingFields: 'Sibling fields',
|
|
58
|
+
multipleOnlyCurrent: 'Multiple mode only supports mapping to the current field',
|
|
59
|
+
empty: 'Configure at least one business field path',
|
|
60
|
+
incomplete: 'All field paths are required',
|
|
61
|
+
duplicate: 'Field paths must be different',
|
|
62
|
+
invalid: 'Enter a valid relative field path',
|
|
63
|
+
},
|
|
38
64
|
},
|
|
39
65
|
},
|
|
40
66
|
'ko-KR': {
|
|
@@ -45,6 +71,7 @@ export const Cascader = {
|
|
|
45
71
|
title: '선택 시 변경',
|
|
46
72
|
tooltip: '메뉴 옵션 값의 레벨을 클릭하면 변경됩니다.',
|
|
47
73
|
},
|
|
74
|
+
multiple: '다중 선택',
|
|
48
75
|
displayRender: {
|
|
49
76
|
title: '디스플레이 렌더링',
|
|
50
77
|
tooltip: '선택 후 실행되는 렌더링 함수로 기본 값은 label => label.join("/") ',
|
|
@@ -54,6 +81,18 @@ export const Cascader = {
|
|
|
54
81
|
tooltip: '기본 값:{ label: "label", value: "value", children: "children" }',
|
|
55
82
|
},
|
|
56
83
|
},
|
|
84
|
+
'value-mapping-group': {
|
|
85
|
+
title: '데이터 매핑',
|
|
86
|
+
fieldPath: '업무 필드 경로',
|
|
87
|
+
mappingPosition: '매핑 위치',
|
|
88
|
+
currentField: '현재 필드',
|
|
89
|
+
siblingFields: '동급 필드',
|
|
90
|
+
multipleOnlyCurrent: '다중 선택 모드에서는 현재 필드 매핑만 지원됩니다',
|
|
91
|
+
empty: '하나 이상의 업무 필드 경로를 입력하세요',
|
|
92
|
+
incomplete: '모든 필드 경로를 입력하세요',
|
|
93
|
+
duplicate: '필드 경로는 달라야 합니다',
|
|
94
|
+
invalid: '올바른 상대 필드 경로를 입력하세요',
|
|
95
|
+
},
|
|
57
96
|
},
|
|
58
97
|
},
|
|
59
98
|
};
|