diff --git a/src/components/formFields/common.tsx b/src/components/formFields/common.tsx index 80fb4ca8f4a7569dc9188b681c532a6bc8bbbd87..9b2f8f63c329062e373db4f5a986529eb31380b2 100644 --- a/src/components/formFields/common.tsx +++ b/src/components/formFields/common.tsx @@ -4,6 +4,8 @@ import { ParamConfig } from '../../interface' import { FieldConfigs as getFieldConfigs } from './' import ParamHelper from '../../util/param' import { ConditionConfig } from '../../util/condition' +import { StatementConfig } from '../../util/statement' + /** * 表单项基类配置文件格式定义 * - field: 表单项字段名 @@ -33,6 +35,7 @@ export interface FieldConfig { display?: 'none' defaultValue?: ParamConfig, condition?: ConditionConfig + extra?: StatementConfig } /** @@ -177,7 +180,7 @@ export class Field extends React.Component< export class FieldError { message: string - constructor(message: string) { + constructor (message: string) { this.message = message } } diff --git a/src/components/formFields/form/index.tsx b/src/components/formFields/form/index.tsx index 1e871bd0cc31b95f52f4e0904d4fcf65491cb638..d95ddeaeedadd3d4e9843f6ea100c67d497c0e56 100644 --- a/src/components/formFields/form/index.tsx +++ b/src/components/formFields/form/index.tsx @@ -4,6 +4,7 @@ import getALLComponents from '../' import { getValue, listItemMove, setValue, getBoolean } from '../../../util/value' import { cloneDeep } from 'lodash' import ConditionHelper from '../../../util/condition' +import StatementHelper from '../../../util/statement' export interface FormFieldConfig extends FieldConfig { type: 'form' @@ -47,6 +48,7 @@ export interface IFormFieldItemField { status: 'normal' | 'error' | 'loading' description?: string message?: string + extra?: string layout: 'horizontal' | 'vertical' | 'inline' fieldType: string children: React.ReactNode @@ -475,79 +477,82 @@ export default class FormField extends Field await this.handleInsert() : undefined, canCollapse, children: ( - this.state.didMount ? (Array.isArray(value) ? value : []).map((itemValue: any, index: number) => { - return - {this.renderItemComponent({ - index, - isLastIndex: value.length - 1 === index, - title: primaryField !== undefined ? getValue(itemValue, primaryField, '').toString() : index.toString(), - removeText: removeText === undefined - ? `删除 ${label}` - : removeText, - onRemove: canRemove ? async () => await this.handleRemove(index) : undefined, - onSort: canSort ? async (sortType: 'up' | 'down') => await this.handleSort(index, sortType) : undefined, - canCollapse, - children: (fields || []).map((formFieldConfig, fieldIndex) => { - if (!ConditionHelper(formFieldConfig.condition, { record: itemValue, data: this.props.data, step: this.props.step })) { - if (!this.formFieldsMountedList[index]) this.formFieldsMountedList[index] = [] - this.formFieldsMountedList[index][fieldIndex] = false - return null - } - const FormField = this.getALLComponents(formFieldConfig.type) || Field + this.state.didMount + ? (Array.isArray(value) ? value : []).map((itemValue: any, index: number) => { + return + {this.renderItemComponent({ + index, + isLastIndex: value.length - 1 === index, + title: primaryField !== undefined ? getValue(itemValue, primaryField, '').toString() : index.toString(), + removeText: removeText === undefined + ? `删除 ${label}` + : removeText, + onRemove: canRemove ? async () => await this.handleRemove(index) : undefined, + onSort: canSort ? async (sortType: 'up' | 'down') => await this.handleSort(index, sortType) : undefined, + canCollapse, + children: (fields || []).map((formFieldConfig, fieldIndex) => { + if (!ConditionHelper(formFieldConfig.condition, { record: itemValue, data: this.props.data, step: this.props.step })) { + if (!this.formFieldsMountedList[index]) this.formFieldsMountedList[index] = [] + this.formFieldsMountedList[index][fieldIndex] = false + return null + } + const FormField = this.getALLComponents(formFieldConfig.type) || Field - let status = ((this.state.formDataList[index] || [])[fieldIndex] || {}).status || 'normal' + let status = ((this.state.formDataList[index] || [])[fieldIndex] || {}).status || 'normal' - if (['group', 'import_subform', 'object', 'tabs', 'form'].some((type) => type === formFieldConfig.type)) { - status = 'normal' - } - // 渲染表单项容器 - return ( -
- { - this.renderItemFieldComponent({ - index: fieldIndex, - label: formFieldConfig.label, - status, - message: ((this.state.formDataList[index] || [])[fieldIndex] || {}).message || '', - required: getBoolean(formFieldConfig.required), - layout: formLayout, - fieldType: formFieldConfig.type, - children: ( - | null) => { - if (fieldRef) { - if (!this.formFieldsList[index]) this.formFieldsList[index] = [] - this.formFieldsList[index][fieldIndex] = fieldRef - this.handleMount(index, fieldIndex) - } - }} - form={this.props.form} - formLayout={formLayout} - value={getValue(value[index], formFieldConfig.field)} - record={value[index]} - data={cloneDeep(data)} - step={step} - config={formFieldConfig} - onChange={(value: any) => this.handleChange(index, fieldIndex, value)} - onValueSet={async (path, value, validation) => this.handleValueSet(index, fieldIndex, path, value, validation)} - onValueUnset={async (path, validation) => this.handleValueUnset(index, fieldIndex, path, validation)} - onValueListAppend={async (path, value, validation) => this.handleValueListAppend(index, fieldIndex, path, value, validation)} - onValueListSplice={async (path, _index, count, validation) => this.handleValueListSplice(index, fieldIndex, path, _index, count, validation)} - onValueListSort={async (path, _index, sortType, validation) => await this.handleValueListSort(index, fieldIndex, path, _index, sortType, validation)} - baseRoute={this.props.baseRoute} - loadDomain={async (domain: string) => await this.props.loadDomain(domain)} - /> - ) - }) + if (['group', 'import_subform', 'object', 'tabs', 'form'].some((type) => type === formFieldConfig.type)) { + status = 'normal' } -
- ) - }) - }) + // 渲染表单项容器 + return ( +
+ { + this.renderItemFieldComponent({ + index: fieldIndex, + label: formFieldConfig.label, + status, + message: ((this.state.formDataList[index] || [])[fieldIndex] || {}).message || '', + extra: StatementHelper(formFieldConfig.extra, { record: this.props.record, data: this.props.data, step: this.props.step }), + required: getBoolean(formFieldConfig.required), + layout: formLayout, + fieldType: formFieldConfig.type, + children: ( + | null) => { + if (fieldRef) { + if (!this.formFieldsList[index]) this.formFieldsList[index] = [] + this.formFieldsList[index][fieldIndex] = fieldRef + this.handleMount(index, fieldIndex) + } + }} + form={this.props.form} + formLayout={formLayout} + value={getValue(value[index], formFieldConfig.field)} + record={value[index]} + data={cloneDeep(data)} + step={step} + config={formFieldConfig} + onChange={(value: any) => this.handleChange(index, fieldIndex, value)} + onValueSet={async (path, value, validation) => this.handleValueSet(index, fieldIndex, path, value, validation)} + onValueUnset={async (path, validation) => this.handleValueUnset(index, fieldIndex, path, validation)} + onValueListAppend={async (path, value, validation) => this.handleValueListAppend(index, fieldIndex, path, value, validation)} + onValueListSplice={async (path, _index, count, validation) => this.handleValueListSplice(index, fieldIndex, path, _index, count, validation)} + onValueListSort={async (path, _index, sortType, validation) => await this.handleValueListSort(index, fieldIndex, path, _index, sortType, validation)} + baseRoute={this.props.baseRoute} + loadDomain={async (domain: string) => await this.props.loadDomain(domain)} + /> + ) + }) + } +
+ ) + }) + }) + } +
} -
- } - ) : [] + ) + : [] ) }) } diff --git a/src/components/formFields/group/index.tsx b/src/components/formFields/group/index.tsx index 7c036bc906585f04cb93e89f08418425bd1050ef..2f28e438391745dba42bb794af2bcd2c8d150e83 100644 --- a/src/components/formFields/group/index.tsx +++ b/src/components/formFields/group/index.tsx @@ -5,6 +5,7 @@ import getALLComponents, { FieldConfigs } from '../' import { IFormItem } from '../../../steps/form' import { cloneDeep } from 'lodash' import ConditionHelper from '../../../util/condition' +import StatementHelper from '../../../util/statement' export interface GroupFieldConfig extends FieldConfig { type: 'group' @@ -282,75 +283,78 @@ export default class GroupField extends Field {this.renderComponent({ - children: this.state.didMount ? (this.props.config.fields || []).map((formFieldConfig, formFieldIndex) => { - if (!ConditionHelper(formFieldConfig.condition, { record: value, data: this.props.data, step: this.props.step })) { - this.formFieldsMounted[formFieldIndex] = false - return null - } - let hidden: boolean = true - let display: boolean = true - - if (formFieldConfig.type === 'hidden') { - hidden = true - display = false - } - - if (formFieldConfig.display === 'none') { - hidden = true - display = false - } - - const FormField = this.getALLComponents(formFieldConfig.type) || Field - - let status = (this.state.formData[formFieldIndex] || {}).status || 'normal' - - if (['group', 'import_subform', 'object', 'tabs', 'form'].some((type) => type === formFieldConfig.type)) { - status = 'normal' - } - - const renderData = { - key: formFieldIndex, - label: formFieldConfig.label, - status, - message: (this.state.formData[formFieldIndex] || {}).message || '', - required: getBoolean(formFieldConfig.required), - layout: formLayout, - visitable: display, - fieldType: formFieldConfig.type, - children: ( - | null) => { - if (formField) { - this.formFields[formFieldIndex] = formField - this.handleMount(formFieldIndex) - } - }} - form={this.props.form} - formLayout={formLayout} - value={getValue(value, formFieldConfig.field)} - record={record} - data={cloneDeep(data)} - step={step} - config={formFieldConfig} - onChange={async (value: any) => { await this.handleChange(formFieldIndex, value) }} - onValueSet={async (path, value, validation) => this.handleValueSet(formFieldIndex, path, value, validation)} - onValueUnset={async (path, validation) => this.handleValueUnset(formFieldIndex, path, validation)} - onValueListAppend={async (path, value, validation) => this.handleValueListAppend(formFieldIndex, path, value, validation)} - onValueListSplice={async (path, index, count, validation) => this.handleValueListSplice(formFieldIndex, path, index, count, validation)} - onValueListSort={async (path, index, sortType, validation) => this.handleValueListSort(formFieldIndex, path, index, sortType, validation)} - baseRoute={this.props.baseRoute} - loadDomain={async (domain: string) => await this.props.loadDomain(domain)} - /> - ) - } - // 渲染表单项容器 - return ( - hidden - ? this.renderItemComponent(renderData) - : - ) - }) : [] + children: this.state.didMount + ? (this.props.config.fields || []).map((formFieldConfig, formFieldIndex) => { + if (!ConditionHelper(formFieldConfig.condition, { record: value, data: this.props.data, step: this.props.step })) { + this.formFieldsMounted[formFieldIndex] = false + return null + } + let hidden: boolean = true + let display: boolean = true + + if (formFieldConfig.type === 'hidden') { + hidden = true + display = false + } + + if (formFieldConfig.display === 'none') { + hidden = true + display = false + } + + const FormField = this.getALLComponents(formFieldConfig.type) || Field + + let status = (this.state.formData[formFieldIndex] || {}).status || 'normal' + + if (['group', 'import_subform', 'object', 'tabs', 'form'].some((type) => type === formFieldConfig.type)) { + status = 'normal' + } + + const renderData = { + key: formFieldIndex, + label: formFieldConfig.label, + status, + message: (this.state.formData[formFieldIndex] || {}).message || '', + extra: StatementHelper(formFieldConfig.extra, { record: this.props.record, data: this.props.data, step: this.props.step }), + required: getBoolean(formFieldConfig.required), + layout: formLayout, + visitable: display, + fieldType: formFieldConfig.type, + children: ( + | null) => { + if (formField) { + this.formFields[formFieldIndex] = formField + this.handleMount(formFieldIndex) + } + }} + form={this.props.form} + formLayout={formLayout} + value={getValue(value, formFieldConfig.field)} + record={record} + data={cloneDeep(data)} + step={step} + config={formFieldConfig} + onChange={async (value: any) => { await this.handleChange(formFieldIndex, value) }} + onValueSet={async (path, value, validation) => this.handleValueSet(formFieldIndex, path, value, validation)} + onValueUnset={async (path, validation) => this.handleValueUnset(formFieldIndex, path, validation)} + onValueListAppend={async (path, value, validation) => this.handleValueListAppend(formFieldIndex, path, value, validation)} + onValueListSplice={async (path, index, count, validation) => this.handleValueListSplice(formFieldIndex, path, index, count, validation)} + onValueListSort={async (path, index, sortType, validation) => this.handleValueListSort(formFieldIndex, path, index, sortType, validation)} + baseRoute={this.props.baseRoute} + loadDomain={async (domain: string) => await this.props.loadDomain(domain)} + /> + ) + } + // 渲染表单项容器 + return ( + hidden + ? this.renderItemComponent(renderData) + : + ) + }) + : [] })} ) diff --git a/src/components/formFields/importSubform/index.tsx b/src/components/formFields/importSubform/index.tsx index 5a297c7824a24f21f3df4e773d622b976ef11433..bfda6b163c4a9e399c2991da3a7d9386983306f4 100644 --- a/src/components/formFields/importSubform/index.tsx +++ b/src/components/formFields/importSubform/index.tsx @@ -7,6 +7,7 @@ import { IFormItem } from '../../../steps/form' import { cloneDeep } from 'lodash' import ConditionHelper from '../../../util/condition' import InterfaceHelper, { InterfaceConfig } from '../../../util/interface' +import StatementHelper from '../../../util/statement' /** * 子表单配置项 @@ -366,76 +367,78 @@ export default class ImportSubformField extends Field {this.renderComponent({ - children: this.state.didMount ? (Array.isArray(this.state.fields) ? this.state.fields : []).map((formFieldConfig, formFieldIndex) => { - if (!ConditionHelper(formFieldConfig.condition, { record: value, data, step })) { - this.formFieldsMounted[formFieldIndex] = false - return null - } - let hidden: boolean = true - let display: boolean = true - - if (formFieldConfig.type === 'hidden') { - hidden = true - display = false - } - - if (formFieldConfig.display === 'none') { - hidden = true - display = false - } - - const FormField = this.getALLComponents(formFieldConfig.type) || Field - - let status = (this.state.formData[formFieldIndex] || {}).status || 'normal' - - if (['group', 'import_subform', 'object', 'tabs', 'form'].some((type) => type === formFieldConfig.type)) { - status = 'normal' - } - - const renderData = { - key: formFieldIndex, - label: formFieldConfig.label, - status, - message: (this.state.formData[formFieldIndex] || {}).message || '', - extra: (formFieldConfig as any).extra || null, - required: getBoolean(formFieldConfig.required), - layout: formLayout, - visitable: display, - fieldType: formFieldConfig.type, - children: ( - | null) => { - if (formField) { - this.formFields[formFieldIndex] = formField - this.handleMount(formFieldIndex) - } - }} - form={this.props.form} - formLayout={formLayout} - value={getValue(value, this.getFullpath(formFieldConfig.field))} - record={record} - data={cloneDeep(data)} - step={step} - config={formFieldConfig} - onChange={async (value: any) => { await this.handleChange(formFieldIndex, value) }} - onValueSet={async (path, value, validation) => this.handleValueSet(formFieldIndex, path, value, validation)} - onValueUnset={async (path, validation) => this.handleValueUnset(formFieldIndex, path, validation)} - onValueListAppend={async (path, value, validation) => this.handleValueListAppend(formFieldIndex, path, value, validation)} - onValueListSplice={async (path, index, count, validation) => this.handleValueListSplice(formFieldIndex, path, index, count, validation)} - onValueListSort={async (path, index, sortType, validation) => this.handleValueListSort(formFieldIndex, path, index, sortType, validation)} - baseRoute={this.props.baseRoute} - loadDomain={async (domain: string) => await this.props.loadDomain(domain)} - /> - ) - } - // 渲染表单项容器 - return ( - hidden - ? this.renderItemComponent(renderData) - : - ) - }) : [] + children: this.state.didMount + ? (Array.isArray(this.state.fields) ? this.state.fields : []).map((formFieldConfig, formFieldIndex) => { + if (!ConditionHelper(formFieldConfig.condition, { record: value, data, step })) { + this.formFieldsMounted[formFieldIndex] = false + return null + } + let hidden: boolean = true + let display: boolean = true + + if (formFieldConfig.type === 'hidden') { + hidden = true + display = false + } + + if (formFieldConfig.display === 'none') { + hidden = true + display = false + } + + const FormField = this.getALLComponents(formFieldConfig.type) || Field + + let status = (this.state.formData[formFieldIndex] || {}).status || 'normal' + + if (['group', 'import_subform', 'object', 'tabs', 'form'].some((type) => type === formFieldConfig.type)) { + status = 'normal' + } + + const renderData = { + key: formFieldIndex, + label: formFieldConfig.label, + status, + message: (this.state.formData[formFieldIndex] || {}).message || '', + extra: StatementHelper(formFieldConfig.extra, { record: this.props.record, data: this.props.data, step: this.props.step }), + required: getBoolean(formFieldConfig.required), + layout: formLayout, + visitable: display, + fieldType: formFieldConfig.type, + children: ( + | null) => { + if (formField) { + this.formFields[formFieldIndex] = formField + this.handleMount(formFieldIndex) + } + }} + form={this.props.form} + formLayout={formLayout} + value={getValue(value, this.getFullpath(formFieldConfig.field))} + record={record} + data={cloneDeep(data)} + step={step} + config={formFieldConfig} + onChange={async (value: any) => { await this.handleChange(formFieldIndex, value) }} + onValueSet={async (path, value, validation) => this.handleValueSet(formFieldIndex, path, value, validation)} + onValueUnset={async (path, validation) => this.handleValueUnset(formFieldIndex, path, validation)} + onValueListAppend={async (path, value, validation) => this.handleValueListAppend(formFieldIndex, path, value, validation)} + onValueListSplice={async (path, index, count, validation) => this.handleValueListSplice(formFieldIndex, path, index, count, validation)} + onValueListSort={async (path, index, sortType, validation) => this.handleValueListSort(formFieldIndex, path, index, sortType, validation)} + baseRoute={this.props.baseRoute} + loadDomain={async (domain: string) => await this.props.loadDomain(domain)} + /> + ) + } + // 渲染表单项容器 + return ( + hidden + ? this.renderItemComponent(renderData) + : + ) + }) + : [] })} ) diff --git a/src/components/formFields/object/index.tsx b/src/components/formFields/object/index.tsx index 574313f51058a8404663fd6e460d6412e233bb99..39fb603eca6cf9d90947f6d27574f368d6ccd9f5 100644 --- a/src/components/formFields/object/index.tsx +++ b/src/components/formFields/object/index.tsx @@ -1,9 +1,10 @@ -import { Field, FieldConfig, FieldConfigs, FieldError, FieldProps, IField } from "../common"; +import { Field, FieldConfig, FieldConfigs, FieldError, FieldProps, IField } from '../common' import getALLComponents from '../' -import React from "react"; -import ConditionHelper from "../../../util/condition"; -import { cloneDeep } from "lodash"; -import { getValue, setValue } from "../../../util/value"; +import React from 'react' +import ConditionHelper from '../../../util/condition' +import { cloneDeep } from 'lodash' +import { getValue, setValue } from '../../../util/value' +import StatementHelper from '../../../util/statement' export interface ObjectFieldConfig extends FieldConfig { type: 'object' @@ -18,7 +19,6 @@ export interface IObjectField { children: React.ReactNode[] } - export interface IObjectFieldItem { key: string removeText: string @@ -33,6 +33,7 @@ export interface IObjectFieldItemField { status: 'normal' | 'error' | 'loading' description?: string message?: string + extra?: string layout: 'horizontal' | 'vertical' | 'inline' visitable: boolean fieldType: string @@ -68,7 +69,7 @@ export default class ObjectField extends Field { - let data: any = {}; + const data: any = {} const keys = Object.keys(this.props.value) for (const key of keys) { @@ -140,7 +141,7 @@ export default class ObjectField extends Field extends Field extends Field { const keys = Object.keys(this.props.value || {}) let i = 1 - while(keys.includes(`item_${i}`)) { + while (keys.includes(`item_${i}`)) { i++ } @@ -214,10 +215,10 @@ export default class ObjectField extends Field { this.formFieldsList[next] = this.formFieldsList[prev] delete this.formFieldsList[prev] - + this.formFieldsMountedList[next] = this.formFieldsMountedList[prev] delete this.formFieldsMountedList[prev] - + await this.setState(({ formDataList }) => { formDataList[next] = formDataList[prev] delete formDataList[prev] @@ -262,7 +263,7 @@ export default class ObjectField extends Field extends Field extends Field extends Field extends Field extends Field { return @@ -365,25 +366,25 @@ export default class ObjectField extends Field { - return + return 您当前使用的UI版本没有实现FormField组件的renderItemComponent方法。 - } + } - /** + /** * 用于展示子表单组件中的每一子项中的每一个子表单项组件 - * @param props - * @returns + * @param props + * @returns */ renderItemFieldComponent = (props: IObjectFieldItemField) => { - return + return 您当前使用的UI版本没有实现FormField组件的renderItemFieldComponent方法。 - } + } render = () => { const { @@ -403,93 +404,96 @@ export default class ObjectField extends Field await this.handleInsert(), children: ( - this.state.didMount ? this.props.value && Object.keys(this.props.value).map((key: string) => { - return ( - - {this.renderItemComponent({ - key, - removeText: removeText === undefined ? `删除 ${label}` : removeText, - onChange: async (value) => await this.handleChangeKey(key, value), - onRemove: async () => await this.handleRemove(key), - children: (Array.isArray(this.props.config.fields) ? this.props.config.fields : []).map((formFieldConfig, formFieldIndex) => { - if (!ConditionHelper(formFieldConfig.condition, { record: this.props.record, data: this.props.data, step: this.props.step })) { - if (!this.formFieldsMountedList[key]) this.formFieldsMountedList[key] = [] - this.formFieldsMountedList[key][formFieldIndex] = false - return null - } - let hidden: boolean = true - let display: boolean = true - - if (formFieldConfig.type === 'hidden') { - hidden = true - display = false - } - - if (formFieldConfig.display === 'none') { - hidden = true - display = false - } - - const FormField = this.getALLComponents(formFieldConfig.type) || Field - - let status = ((this.state.formDataList[key] || [])[formFieldIndex] || {}).status || 'normal' - - if (['group', 'import_subform', 'object', 'tabs', 'form'].some((type) => type === formFieldConfig.type)) { - status = 'normal' - } - - // 渲染表单项容器 - if (hidden) { - return ( + this.state.didMount + ? this.props.value && Object.keys(this.props.value).map((key: string) => { + return ( + + {this.renderItemComponent({ + key, + removeText: removeText === undefined ? `删除 ${label}` : removeText, + onChange: async (value) => await this.handleChangeKey(key, value), + onRemove: async () => await this.handleRemove(key), + children: (Array.isArray(this.props.config.fields) ? this.props.config.fields : []).map((formFieldConfig, formFieldIndex) => { + if (!ConditionHelper(formFieldConfig.condition, { record: this.props.record, data: this.props.data, step: this.props.step })) { + if (!this.formFieldsMountedList[key]) this.formFieldsMountedList[key] = [] + this.formFieldsMountedList[key][formFieldIndex] = false + return null + } + let hidden: boolean = true + let display: boolean = true + + if (formFieldConfig.type === 'hidden') { + hidden = true + display = false + } + + if (formFieldConfig.display === 'none') { + hidden = true + display = false + } + + const FormField = this.getALLComponents(formFieldConfig.type) || Field + + let status = ((this.state.formDataList[key] || [])[formFieldIndex] || {}).status || 'normal' + + if (['group', 'import_subform', 'object', 'tabs', 'form'].some((type) => type === formFieldConfig.type)) { + status = 'normal' + } + + // 渲染表单项容器 + if (hidden) { + return ( this.renderItemFieldComponent({ index: formFieldIndex, label: formFieldConfig.label, status, message: ((this.state.formDataList[key] || [])[formFieldIndex] || {}).message || '', + extra: StatementHelper(formFieldConfig.extra, { record: this.props.record, data: this.props.data, step: this.props.step }), layout: this.props.formLayout, visitable: display, fieldType: formFieldConfig.type, children: ( - | null) => { - if (formField) { - if (!this.formFieldsList[key]) this.formFieldsList[key] = [] - this.formFieldsList[key][formFieldIndex] = formField - this.handleMount(key, formFieldIndex) - } - }} - formLayout={this.props.formLayout} - form={this.props.form} - value={getValue(value[key], formFieldConfig.field)} - record={value[key]} - data={cloneDeep(this.props.data)} - step={this.props.step} - config={formFieldConfig} - onChange={(value: any) => this.handleChange(key, formFieldIndex, value)} - onValueSet={async (path, value, validation) => this.handleValueSet(key, formFieldIndex, path, value, validation)} - onValueUnset={async (path, validation) => this.handleValueUnset(key, formFieldIndex, path, validation)} - onValueListAppend={async (path, value, validation) => this.handleValueListAppend(key, formFieldIndex, path, value, validation)} - onValueListSplice={async (path, _index, count, validation) => this.handleValueListSplice(key, formFieldIndex, path, _index, count, validation)} - onValueListSort={async (path, _index, sortType, validation) => this.handleValueListSort(key, formFieldIndex, path, _index, sortType, validation)} - baseRoute={this.props.baseRoute} - loadDomain={async (domain: string) => this.props.loadDomain(domain)} - /> + | null) => { + if (formField) { + if (!this.formFieldsList[key]) this.formFieldsList[key] = [] + this.formFieldsList[key][formFieldIndex] = formField + this.handleMount(key, formFieldIndex) + } + }} + formLayout={this.props.formLayout} + form={this.props.form} + value={getValue(value[key], formFieldConfig.field)} + record={value[key]} + data={cloneDeep(this.props.data)} + step={this.props.step} + config={formFieldConfig} + onChange={(value: any) => this.handleChange(key, formFieldIndex, value)} + onValueSet={async (path, value, validation) => this.handleValueSet(key, formFieldIndex, path, value, validation)} + onValueUnset={async (path, validation) => this.handleValueUnset(key, formFieldIndex, path, validation)} + onValueListAppend={async (path, value, validation) => this.handleValueListAppend(key, formFieldIndex, path, value, validation)} + onValueListSplice={async (path, _index, count, validation) => this.handleValueListSplice(key, formFieldIndex, path, _index, count, validation)} + onValueListSort={async (path, _index, sortType, validation) => this.handleValueListSort(key, formFieldIndex, path, _index, sortType, validation)} + baseRoute={this.props.baseRoute} + loadDomain={async (domain: string) => this.props.loadDomain(domain)} + /> ) }) - ) - } else { - return - } - }) - })} - - ) - }) : [] + ) + } else { + return + } + }) + })} + + ) + }) + : [] ) }) } ) } -} \ No newline at end of file +} diff --git a/src/components/formFields/tabs/index.tsx b/src/components/formFields/tabs/index.tsx index e6392230c2625ffd2d56b2ca731f03e9f5667140..a32b1157b5b184b5c38df4136ce26cb4743a4a6d 100644 --- a/src/components/formFields/tabs/index.tsx +++ b/src/components/formFields/tabs/index.tsx @@ -4,6 +4,7 @@ import React from 'react' import ConditionHelper from '../../../util/condition' import { cloneDeep } from 'lodash' import { getValue, setValue, getBoolean } from '../../../util/value' +import StatementHelper from '../../../util/statement' export type TabsFieldConfig = TabsFieldConfig_Same | TabsFieldConfig_Diff @@ -46,6 +47,7 @@ export interface ITabsFieldItemField { status: 'normal' | 'error' | 'loading' description?: string message?: string + extra?: string layout: 'horizontal' | 'vertical' | 'inline' fieldType: string children: React.ReactNode @@ -366,88 +368,91 @@ export default class TabsField extends Field { - const fields = this.props.config.mode === 'same' ? (this.props.config.fields || []) : (((this.props.config.tabs || [])[index] || {}).fields || []) - return ( - - {this.renderItemComponent({ - key: index.toString(), - label: tab.label, - children: fields.map((formFieldConfig, formFieldIndex) => { - if (!ConditionHelper(formFieldConfig.condition, { record: this.props.record, data: this.props.data, step: this.props.step })) { - if (!this.formFieldsMountedList[index]) this.formFieldsMountedList[index] = [] - this.formFieldsMountedList[index][formFieldIndex] = false - return null - } - let hidden: boolean = true - let display: boolean = true - - if (formFieldConfig.type === 'hidden') { - hidden = true - display = false - } - - if (formFieldConfig.display === 'none') { - hidden = true - display = false - } - - const FormField = this.getALLComponents(formFieldConfig.type) || Field - - let status = ((this.state.formDataList[index] || [])[formFieldIndex] || {}).status || 'normal' - - if (['group', 'import_subform', 'object', 'tabs', 'form'].some((type) => type === formFieldConfig.type)) { - status = 'normal' - } - - // 渲染表单项容器 - if (hidden) { - return ( -
- {this.renderItemFieldComponent({ - index: formFieldIndex, - label: formFieldConfig.label, - status, - message: ((this.state.formDataList[index] || [])[formFieldIndex] || {}).message || '', - required: getBoolean(formFieldConfig.required), - layout: this.props.formLayout, - fieldType: formFieldConfig.type, - children: ( - | null) => { - if (!this.formFieldsList[index]) this.formFieldsList[index] = [] - this.formFieldsList[index][formFieldIndex] = formField - this.handleMount(index, formFieldIndex) - }} - form={this.props.form} - formLayout={this.props.formLayout} - value={getValue(getValue(value, tab.field), formFieldConfig.field)} - record={getValue(value, tab.field)} - data={cloneDeep(this.props.data)} - step={this.props.step} - config={formFieldConfig} - onChange={(value: any) => this.handleChange(index, formFieldIndex, value)} - onValueSet={async (path, value, validation) => this.handleValueSet(index, formFieldIndex, path, value, validation)} - onValueUnset={async (path, validation) => this.handleValueUnset(index, formFieldIndex, path, validation)} - onValueListAppend={async (path, value, validation) => this.handleValueListAppend(index, formFieldIndex, path, value, validation)} - onValueListSplice={async (path, _index, count, validation) => this.handleValueListSplice(index, formFieldIndex, path, _index, count, validation)} - onValueListSort={async (path, _index, sortType, validation) => this.handleValueListSort(index, formFieldIndex, path, _index, sortType, validation)} - baseRoute={this.props.baseRoute} - loadDomain={async (domain: string) => await this.props.loadDomain(domain)} - /> - ) - })} -
- ) - } else { - return - } - }) - })} - - ) - }) : [] + this.state.didMount + ? (this.props.config.tabs || []).map((tab: any, index: number) => { + const fields = this.props.config.mode === 'same' ? (this.props.config.fields || []) : (((this.props.config.tabs || [])[index] || {}).fields || []) + return ( + + {this.renderItemComponent({ + key: index.toString(), + label: tab.label, + children: fields.map((formFieldConfig, formFieldIndex) => { + if (!ConditionHelper(formFieldConfig.condition, { record: this.props.record, data: this.props.data, step: this.props.step })) { + if (!this.formFieldsMountedList[index]) this.formFieldsMountedList[index] = [] + this.formFieldsMountedList[index][formFieldIndex] = false + return null + } + let hidden: boolean = true + let display: boolean = true + + if (formFieldConfig.type === 'hidden') { + hidden = true + display = false + } + + if (formFieldConfig.display === 'none') { + hidden = true + display = false + } + + const FormField = this.getALLComponents(formFieldConfig.type) || Field + + let status = ((this.state.formDataList[index] || [])[formFieldIndex] || {}).status || 'normal' + + if (['group', 'import_subform', 'object', 'tabs', 'form'].some((type) => type === formFieldConfig.type)) { + status = 'normal' + } + + // 渲染表单项容器 + if (hidden) { + return ( +
+ {this.renderItemFieldComponent({ + index: formFieldIndex, + label: formFieldConfig.label, + status, + message: ((this.state.formDataList[index] || [])[formFieldIndex] || {}).message || '', + required: getBoolean(formFieldConfig.required), + extra: StatementHelper(formFieldConfig.extra, { record: this.props.record, data: this.props.data, step: this.props.step }), + layout: this.props.formLayout, + fieldType: formFieldConfig.type, + children: ( + | null) => { + if (!this.formFieldsList[index]) this.formFieldsList[index] = [] + this.formFieldsList[index][formFieldIndex] = formField + this.handleMount(index, formFieldIndex) + }} + form={this.props.form} + formLayout={this.props.formLayout} + value={getValue(getValue(value, tab.field), formFieldConfig.field)} + record={getValue(value, tab.field)} + data={cloneDeep(this.props.data)} + step={this.props.step} + config={formFieldConfig} + onChange={(value: any) => this.handleChange(index, formFieldIndex, value)} + onValueSet={async (path, value, validation) => this.handleValueSet(index, formFieldIndex, path, value, validation)} + onValueUnset={async (path, validation) => this.handleValueUnset(index, formFieldIndex, path, validation)} + onValueListAppend={async (path, value, validation) => this.handleValueListAppend(index, formFieldIndex, path, value, validation)} + onValueListSplice={async (path, _index, count, validation) => this.handleValueListSplice(index, formFieldIndex, path, _index, count, validation)} + onValueListSort={async (path, _index, sortType, validation) => this.handleValueListSort(index, formFieldIndex, path, _index, sortType, validation)} + baseRoute={this.props.baseRoute} + loadDomain={async (domain: string) => await this.props.loadDomain(domain)} + /> + ) + })} +
+ ) + } else { + return + } + }) + })} + + ) + }) + : [] ) }) } diff --git a/src/steps/form/index.tsx b/src/steps/form/index.tsx index d7a2b7c59d4d5b8c178114293aeaf6f1834ec2e9..5c641fa4dbaa4c428496bab23801e5476689ebb8 100644 --- a/src/steps/form/index.tsx +++ b/src/steps/form/index.tsx @@ -675,6 +675,7 @@ export default class FormStep extends Step { label: formFieldConfig.label, status, message: formData[formFieldIndex]?.message || '', + extra: StatementHelper(formFieldConfig.extra, { data: this.props.data, step: this.props.step }), required: getBoolean(formFieldConfig.required), layout, visitable: display,