From 77c6aa3b4f09a9944d7f0f45c0ac423b7bc805b3 Mon Sep 17 00:00:00 2001 From: wangailin Date: Wed, 23 Feb 2022 16:07:56 +0800 Subject: [PATCH 1/5] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E8=A1=A8?= =?UTF-8?q?=E5=8D=95=E9=9A=90=E8=97=8F=E9=A1=B9=E6=8F=90=E4=BA=A4=E6=97=B6?= =?UTF-8?q?=E7=9A=84=E6=A0=A1=E9=AA=8C=E9=80=BB=E8=BE=91=EF=BC=9B=E4=BC=98?= =?UTF-8?q?=E5=8C=96=E8=A1=A8=E5=8D=95=E9=A1=B9=E6=A0=A1=E9=AA=8C=E7=9A=84?= =?UTF-8?q?=E6=96=87=E6=A1=88=EF=BC=9B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/formFields/form/index.tsx | 8 +++++++- src/components/formFields/group/index.tsx | 12 ++++++++++-- src/components/formFields/tabs/index.tsx | 10 +++++++--- src/steps/form/index.tsx | 2 +- 4 files changed, 25 insertions(+), 7 deletions(-) diff --git a/src/components/formFields/form/index.tsx b/src/components/formFields/form/index.tsx index d95ddea..94d287f 100644 --- a/src/components/formFields/form/index.tsx +++ b/src/components/formFields/form/index.tsx @@ -127,6 +127,7 @@ export default class FormField extends Field = [] const formDataList = cloneDeep(this.state.formDataList) @@ -143,6 +144,10 @@ export default class FormField extends Field 0) { - errors.push(new FieldError(`子项中存在${childrenError}个错误。`)) + errors.push(new FieldError(`${this.props.config.label || ''} ${childrenErrorMsg.map(err => `${err.name}:${err.msg}`).join('; ')}`)) } return errors.length ? errors : true @@ -494,6 +499,7 @@ export default class FormField extends Field = [] const formData = cloneDeep(this.state.formData) for (const fieldIndex in (this.props.config.fields || [])) { const formItem = this.formFields[fieldIndex] + const formConfig = this.props.config.fields?.[fieldIndex] if (formItem !== null && formItem !== undefined) { const validation = await formItem.validate(getValue(value, (this.props.config.fields || [])[fieldIndex].field)) - if (validation === true || this.formFieldsMounted[fieldIndex] === false) { + if (validation === true) { formData[fieldIndex] = { status: 'normal' } } else { childrenError++ formData[fieldIndex] = { status: 'error', message: validation[0].message } + childrenErrorMsg.push({ + name: formConfig?.label, + msg: validation[0].message + }) + console.log(formData[fieldIndex], 'group') } } } @@ -88,7 +95,7 @@ export default class GroupField extends Field 0) { - errors.push(new FieldError(`子项中存在${childrenError}个错误。`)) + errors.push(new FieldError(`${this.props.config.label || ''}子项中存在${childrenError}个错误。\n ${childrenErrorMsg.map(err => `${err.name}:${err.msg}`).join('; ')}。`)) } return errors.length ? errors : true @@ -307,6 +314,7 @@ export default class GroupField extends Field { if (!ConditionHelper(formFieldConfig.condition, { record: value, data: this.props.data, step: this.props.step })) { this.formFieldsMounted[formFieldIndex] = false + this.formFields[formFieldIndex] = null return null } let hidden: boolean = true diff --git a/src/components/formFields/tabs/index.tsx b/src/components/formFields/tabs/index.tsx index a32b115..51e252a 100644 --- a/src/components/formFields/tabs/index.tsx +++ b/src/components/formFields/tabs/index.tsx @@ -113,6 +113,7 @@ export default class TabsField extends Field = [] const formDataList = cloneDeep(this.state.formDataList) @@ -127,12 +128,15 @@ export default class TabsField extends Field extends Field 0) { - errors.push(new FieldError(`子项中存在${childrenError}个错误。`)) + errors.push(new FieldError(`${this.props.config.label || ''}子项中存在${childrenError}个错误。\n ${childrenErrorMsg.map(err => `${err.name}:${err.msg}`).join('; ')}。`)) } return errors.length ? errors : true @@ -380,6 +383,7 @@ export default class TabsField extends Field { if (formField && formFieldConfig) { const value = await formField.get() const validation = await formField.validate(value) - if (validation !== true) { console.warn('表单项中存在问题', value, formFieldConfig) this.formData[formFieldIndex] = { status: 'error', message: validation[0].message, name: formFieldConfig.label } @@ -661,6 +660,7 @@ export default class FormStep extends Step { children: fields.map((formFieldConfig, formFieldIndex) => { if (!ConditionHelper(formFieldConfig.condition, { record: formValue, data, step })) { this.formFieldsMounted[formFieldIndex] = false + this.formFields[formFieldIndex] = null return null } let hidden: boolean = true -- Gitee From 7fdd246c933ebbe859615ff3a80639179920d9c6 Mon Sep 17 00:00:00 2001 From: wangailin Date: Wed, 23 Feb 2022 16:09:45 +0800 Subject: [PATCH 2/5] =?UTF-8?q?feat:=20=E8=AF=A6=E6=83=85=E9=A1=B5?= =?UTF-8?q?=E6=96=B0=E5=A2=9E=E8=87=AA=E5=AE=9A=E4=B9=89=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=EF=BC=9B=20=E8=A1=A8=E6=A0=BC=E5=A2=9E=E5=8A=A0=E6=8C=89?= =?UTF-8?q?=E9=92=AE=E9=85=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/detail/common.tsx | 2 + src/components/detail/custom/index.tsx | 95 ++++++++++++++++++++++++++ src/components/detail/group/index.tsx | 1 + src/components/detail/index.tsx | 11 +-- src/index.tsx | 1 + src/steps/detail/index.tsx | 1 + src/steps/table/index.tsx | 6 ++ 7 files changed, 113 insertions(+), 4 deletions(-) create mode 100644 src/components/detail/custom/index.tsx diff --git a/src/components/detail/common.tsx b/src/components/detail/common.tsx index 57902c1..adcf97c 100644 --- a/src/components/detail/common.tsx +++ b/src/components/detail/common.tsx @@ -76,6 +76,8 @@ export interface DetailFieldProps { data: any[], step: number, config: C + // 挂载引用 + detail?: React.ReactNode // TODO 待删除 onChange: (value: T) => Promise // 事件：设置值 diff --git a/src/components/detail/custom/index.tsx b/src/components/detail/custom/index.tsx new file mode 100644 index 0000000..19a582f --- /dev/null +++ b/src/components/detail/custom/index.tsx @@ -0,0 +1,95 @@ +import React, { RefObject } from 'react' +import { DetailField, DetailFieldConfig, DetailFieldProps, IDetailField } from '../common' +import { loadMicroApp, MicroApp } from 'qiankun' +import moment from 'moment' +import { cloneDeep } from 'lodash' + +export interface CustomDetailConfig extends DetailFieldConfig { + type: 'custom' + entry: string +} + +export default class CustomDtail extends DetailField implements IDetailField { + identifier: string = '' + entry: string = '' + container: RefObject = React.createRef() + customField: MicroApp | null = null + _get: () => Promise = async () => this.props.value + + componentDidMount () { + this.loadCustomField(this.props.config.entry) + } + + getSnapshotBeforeUpdate () { + const snapshot: string[] = [] + if (this.entry !== this.props.config.entry) { + snapshot.push('entry') + } + return snapshot + } + + get = async (): Promise => { + return await this._get() + } + + bindGet = async (get: () => Promise): Promise => { + this._get = get + } + + componentDidUpdate (_: DetailFieldProps, __: {}, snapshot: string[]) { + if (snapshot.includes('entry')) { + this.loadCustomField(this.props.config.entry) + } else { + if (this.customField && this.customField.update) { + this.customField.update({ + value: this.props.value, + record: this.props.record, + data: cloneDeep(this.props.data), + step: this.props.step, + config: this.props.config, + detail: this.props.detail, + onChange: this.props.onChange, + onValueSet: this.props.onValueSet, + onValueUnset: this.props.onValueUnset, + onValueListAppend: this.props.onValueListAppend, + onValueListSplice: this.props.onValueListSplice, + base: this.props.baseRoute, + loadDomain: this.props.loadDomain + }) + } + } + } + + loadCustomField = (entry: string) => { + if (this.container.current && entry) { + this.entry = this.props.config.entry + this.identifier = `custom|${moment().format('x')}|${Math.floor(Math.random() * 1000)}` + this.customField = loadMicroApp({ + name: this.identifier, + entry, + container: this.container.current, + props: { + value: this.props.value, + record: this.props.record, + data: cloneDeep(this.props.data), + step: this.props.step, + config: this.props.config, + detail: this.props.detail, + onChange: this.props.onChange, + onValueSet: this.props.onValueSet, + onValueUnset: this.props.onValueUnset, + onValueListAppend: this.props.onValueListAppend, + onValueListSplice: this.props.onValueListSplice, + base: this.props.baseRoute, + loadDomain: this.props.loadDomain + } + }) + } + } + + render = () => { + return ( +
+ ) + } +} diff --git a/src/components/detail/group/index.tsx b/src/components/detail/group/index.tsx index 1dd5220..6d0dcf1 100644 --- a/src/components/detail/group/index.tsx +++ b/src/components/detail/group/index.tsx @@ -274,6 +274,7 @@ export default class GroupField extends DetailField { await this.handleChange(detailFieldIndex, value) }} onValueSet={async (path, value, validation) => this.handleValueSet(detailFieldIndex, path, value, validation)} onValueUnset={async (path, validation) => this.handleValueUnset(detailFieldIndex, path, validation)} diff --git a/src/components/detail/index.tsx b/src/components/detail/index.tsx index 24ae057..0d661f1 100644 --- a/src/components/detail/index.tsx +++ b/src/components/detail/index.tsx @@ -2,7 +2,7 @@ import TextField, { TextFieldConfig } from './text' import EnumDetail, { EnumDetailConfig } from './enum' import StatementDetail, { StatementDetailConfig } from './statement' - +import CustomDetail, { CustomDetailConfig } from './custom' import GroupField, { GroupFieldConfig } from './group' import ImportSubformField, { ImportSubformFieldConfig } from './importSubform' @@ -14,19 +14,22 @@ export type DetailFieldConfigs = EnumDetailConfig | StatementDetailConfig | GroupFieldConfig | - ImportSubformFieldConfig + ImportSubformFieldConfig | + CustomDetailConfig export type componentType = 'text' | 'group' | 'detail_enum' | 'statement' | - 'import_subform' + 'import_subform' | + 'custom' export default { group: GroupField, text: TextField, import_subform: ImportSubformField, detail_enum: EnumDetail, - statement: StatementDetail + statement: StatementDetail, + custom: CustomDetail } diff --git a/src/index.tsx b/src/index.tsx index b193a05..5e8ec9d 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -58,6 +58,7 @@ export { default as DetailEunmField } from './components/detail/enum' export { default as DetailStatementField } from './components/detail/statement' export { default as DetailTextField } from './components/detail/text' export { default as DetailImportSubformField } from './components/detail/importSubform' +export { default as CustomDetail } from './components/detail/custom' export { default as HeaderStep } from './steps/header' diff --git a/src/steps/detail/index.tsx b/src/steps/detail/index.tsx index 0ff404c..3823d28 100644 --- a/src/steps/detail/index.tsx +++ b/src/steps/detail/index.tsx @@ -456,6 +456,7 @@ export default class DetailStep extends Step { value={detailFieldConfig.field !== undefined ? getValue(detailValue, detailFieldConfig.field) || detailFieldConfig.defaultValue : undefined} record={detailValue} data={cloneDeep(data)} + detail={this} step={step} config={detailFieldConfig} onChange={async (value: any) => { await this.handleChange(detailFieldIndex, value) }} diff --git a/src/steps/table/index.tsx b/src/steps/table/index.tsx index 66a364d..5df516f 100644 --- a/src/steps/table/index.tsx +++ b/src/steps/table/index.tsx @@ -51,6 +51,7 @@ export interface TableOperationGroupConfig { label?: string level?: 'normal' | 'primary' | 'danger' operations: Array + align: 'left' | 'right' } /** @@ -64,6 +65,7 @@ export interface TableOperationConfig { confirm?: { enable: false } | TableOperationConfirmConfig handle: TableCCMSOperationConfig | TableLinkOperationConfig condition?: ConditionConfig + align: 'left' | 'right' } export interface TableCCMSOperationConfig { @@ -154,6 +156,7 @@ export interface ITableStepTableOperation { export interface ITableStepRowOperationButton { label: string level: 'normal' | 'primary' | 'danger' + align: 'left' | 'right' disabled?: boolean onClick: () => Promise } @@ -164,6 +167,7 @@ export interface ITableStepRowOperationButton { export interface ITableStepRowOperationGroup { label?: string children: React.ReactNode[] + align: 'left' | 'right' } /** @@ -732,6 +736,7 @@ export default class TableStep extends Step { : this.renderRowOperationButtonComponent({ label: operation.label, level: operation.level || 'normal', + align: operation.align, onClick: async () => { await this.handleRowOperation(operation, record) } })} @@ -741,6 +746,7 @@ export default class TableStep extends Step { {this.renderRowOperationGroupComponent({ label: operation.label, + align: operation.align, children: (operation.operations || []).map((operation) => { if (!ConditionHelper(operation.condition, { record, data, step })) { return null -- Gitee From 6c3284b1fa1c4522372da30f49db4db4bad4a776 Mon Sep 17 00:00:00 2001 From: wangailin Date: Wed, 23 Feb 2022 16:58:26 +0800 Subject: [PATCH 3/5] =?UTF-8?q?feat:=20=E7=BD=AE=E7=A9=BA=E6=B7=BB?= =?UTF-8?q?=E5=8A=A0=E5=89=8D=E7=BD=AE=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/formFields/form/index.tsx | 2 +- src/components/formFields/group/index.tsx | 2 +- src/components/formFields/tabs/index.tsx | 2 +- src/steps/form/index.tsx | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/formFields/form/index.tsx b/src/components/formFields/form/index.tsx index 94d287f..111ac3c 100644 --- a/src/components/formFields/form/index.tsx +++ b/src/components/formFields/form/index.tsx @@ -499,7 +499,7 @@ export default class FormField extends Field { if (!ConditionHelper(formFieldConfig.condition, { record: value, data: this.props.data, step: this.props.step })) { this.formFieldsMounted[formFieldIndex] = false - this.formFields[formFieldIndex] = null + this.formFields && (this.formFields[formFieldIndex] = null) return null } let hidden: boolean = true diff --git a/src/components/formFields/tabs/index.tsx b/src/components/formFields/tabs/index.tsx index 51e252a..0ed46c2 100644 --- a/src/components/formFields/tabs/index.tsx +++ b/src/components/formFields/tabs/index.tsx @@ -383,7 +383,7 @@ export default class TabsField extends Field { children: fields.map((formFieldConfig, formFieldIndex) => { if (!ConditionHelper(formFieldConfig.condition, { record: formValue, data, step })) { this.formFieldsMounted[formFieldIndex] = false - this.formFields[formFieldIndex] = null + this.formFields && (this.formFields[formFieldIndex] = null) return null } let hidden: boolean = true -- Gitee From 874ddfef764481498d8e684d1b3dee0d5015b2e7 Mon Sep 17 00:00:00 2001 From: wangailin Date: Fri, 15 Apr 2022 18:34:42 +0800 Subject: [PATCH 4/5] fix: del align --- src/steps/table/index.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/steps/table/index.tsx b/src/steps/table/index.tsx index 08fe85e..b8ad46e 100644 --- a/src/steps/table/index.tsx +++ b/src/steps/table/index.tsx @@ -59,7 +59,6 @@ export interface TableOperationGroupConfig { label?: string level?: 'normal' | 'primary' | 'danger' operations: Array - align: 'left' | 'right' } /** @@ -85,7 +84,6 @@ export interface TableOperationConfig { condition?: ConditionConfig modalWidthMode?: 'none' | 'percentage' | 'pixel' modalWidthValue?: string | number - align: 'left' | 'right' } export interface TableCCMSOperationConfig { @@ -181,7 +179,6 @@ export interface ITableStepTableOperation { export interface ITableStepRowOperationButton { label: string level: 'normal' | 'primary' | 'danger' - align: 'left' | 'right' disabled?: boolean onClick: () => Promise } @@ -191,8 +188,7 @@ export interface ITableStepRowOperationButton { */ export interface ITableStepRowOperationGroup { label?: string - children: React.ReactNode[] - align: 'left' | 'right' + children: React.ReactNode[] } /** -- Gitee From 57081599bb43c3ccfaa91f4ce81d6a68893c8831 Mon Sep 17 00:00:00 2001 From: wangailin Date: Fri, 15 Apr 2022 18:35:53 +0800 Subject: [PATCH 5/5] fix: align --- src/steps/table/index.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/steps/table/index.tsx b/src/steps/table/index.tsx index b8ad46e..fa0b40e 100644 --- a/src/steps/table/index.tsx +++ b/src/steps/table/index.tsx @@ -188,7 +188,7 @@ export interface ITableStepRowOperationButton { */ export interface ITableStepRowOperationGroup { label?: string - children: React.ReactNode[] + children: React.ReactNode[] } /** @@ -808,7 +808,6 @@ export default class TableStep extends Step { : this.renderRowOperationButtonComponent({ label: operation.label, level: operation.level || 'normal', - align: operation.align, onClick: async () => { await this.handleRowOperation(operation, record) } })} @@ -818,7 +817,6 @@ export default class TableStep extends Step { {this.renderRowOperationDropdownComponent({ label: operation.label, - align: operation.align, children: (operation.operations || []).map((operation) => { if (!ConditionHelper(operation.condition, { record, data, step })) { return null -- Gitee