diff --git a/src/components/detail/common.tsx b/src/components/detail/common.tsx index adcf97c2995ecb4cf17908ba8fd5a096b41ea470..c72bb7a81b2f77e35a302df120e58549f75e7e43 100644 --- a/src/components/detail/common.tsx +++ b/src/components/detail/common.tsx @@ -81,13 +81,13 @@ export interface DetailFieldProps { // TODO 待删除 onChange: (value: T) => Promise // 事件：设置值 - onValueSet: (path: string, value: T, validation: true | DetailFieldError[]) => Promise + onValueSet: (path: string, value: T, options?: { noPathCombination?: true }) => Promise // // 事件：置空值 - onValueUnset: (path: string, validation: true | DetailFieldError[]) => Promise + onValueUnset: (path: string, options?: { noPathCombination?: true }) => Promise // 事件：修改值 - 列表 - 追加 - onValueListAppend: (path: string, value: any, validation: true | DetailFieldError[]) => Promise + onValueListAppend: (path: string, value: any, options?: { noPathCombination?: true }) => Promise // 事件：修改值 - 列表 - 删除 - onValueListSplice: (path: string, index: number, count: number, validation: true | DetailFieldError[]) => Promise + onValueListSplice: (path: string, index: number, count: number, options?: { noPathCombination?: true }) => Promise baseRoute: string, loadDomain: (domain: string) => Promise } diff --git a/src/components/detail/enum/index.tsx b/src/components/detail/enum/index.tsx index c79b2cf054310511baceae49e1cd7c387808179b..d30c108ef80c92c9c9d5a544c6c540f5e1565501 100644 --- a/src/components/detail/enum/index.tsx +++ b/src/components/detail/enum/index.tsx @@ -1,6 +1,5 @@ -import { config } from 'process' import React from 'react' -import { DetailField, DetailFieldConfig, DetailFieldError, DetailFieldProps, IDetailField } from '../common' +import { DetailField, DetailFieldConfig, IDetailField } from '../common' export interface EnumDetailConfig extends DetailFieldConfig { type: 'detail_enum' diff --git a/src/components/detail/group/index.tsx b/src/components/detail/group/index.tsx index 6d0dcf1a038e70a2ad7a76c8f15c0feac0845fbf..d6533e46d7257f4d1bced2488973950006860240 100644 --- a/src/components/detail/group/index.tsx +++ b/src/components/detail/group/index.tsx @@ -1,7 +1,7 @@ import React from 'react' import { cloneDeep } from 'lodash' import { setValue, getValue } from '../../../util/value' -import { DetailField, DetailFieldConfig, DetailFieldError, DetailFieldProps, IDetailField } from '../common' +import { DetailField, DetailFieldConfig, DetailFieldProps, IDetailField } from '../common' import getALLComponents, { DetailFieldConfigs } from '../' import { IDetailItem } from '../../../steps/detail' import ConditionHelper from '../../../util/condition' @@ -10,6 +10,7 @@ import { ColumnsConfig } from '../../../interface' export interface GroupFieldConfig extends DetailFieldConfig { type: 'group' fields: DetailFieldConfigs[] + childColumns?: ColumnsConfig } export interface IGroupField { @@ -19,7 +20,6 @@ export interface IGroupField { } interface IGroupFieldState { - detailData: { status: 'normal' | 'error' | 'loading', message?: string }[] } export default class GroupField extends DetailField implements IDetailField { @@ -32,9 +32,7 @@ export default class GroupField extends DetailField) { super(props) - this.state = { - detailData: [] - } + this.state = {} } get = async () => { @@ -67,22 +65,6 @@ export default class GroupField extends DetailField { - detailData[detailFieldIndex] = { status: 'normal' } - return { detailData: cloneDeep(detailData) } - }) - } else { - await this.setState(({ detailData }) => { - detailData[detailFieldIndex] = { status: 'error', message: validation[0].message } - return { detailData: cloneDeep(detailData) } - }) - } await detailField?.didMount() } } @@ -117,79 +99,35 @@ export default class GroupField extends DetailField { + handleValueSet = async (detailFieldIndex: number, path: string, value: any, options?: { noPathCombination?: true }) => { const detailFieldConfig = (this.props.config.fields || [])[detailFieldIndex] if (detailFieldConfig) { - const fullPath = detailFieldConfig.field === '' || path === '' ? `${detailFieldConfig.field}${path}` : `${detailFieldConfig.field}.${path}` - await this.props.onValueSet(fullPath, value, true) - - const detailData = cloneDeep(this.state.detailData) - if (validation === true) { - detailData[detailFieldIndex] = { status: 'normal' } - } else { - detailData[detailFieldIndex] = { status: 'error', message: validation[0].message } - } - - this.setState({ - detailData - }) + const fullPath = options && options.noPathCombination ? path : (detailFieldConfig.field === '' || path === '' ? `${detailFieldConfig.field}${path}` : `${detailFieldConfig.field}.${path}`) + await this.props.onValueSet(fullPath, value) } } - handleValueUnset = async (detailFieldIndex: number, path: string, validation: true | DetailFieldError[]) => { + handleValueUnset = async (detailFieldIndex: number, path: string, options?: { noPathCombination?: true }) => { const detailFieldConfig = (this.props.config.fields || [])[detailFieldIndex] if (detailFieldConfig) { - const fullPath = detailFieldConfig.field === '' || path === '' ? `${detailFieldConfig.field}${path}` : `${detailFieldConfig.field}.${path}` - await this.props.onValueUnset(fullPath, true) - - const detailData = cloneDeep(this.state.detailData) - if (validation === true) { - detailData[detailFieldIndex] = { status: 'normal' } - } else { - detailData[detailFieldIndex] = { status: 'error', message: validation[0].message } - } - - this.setState({ - detailData - }) + const fullPath = options && options.noPathCombination ? path : (detailFieldConfig.field === '' || path === '' ? `${detailFieldConfig.field}${path}` : `${detailFieldConfig.field}.${path}`) + await this.props.onValueUnset(fullPath) } } - handleValueListAppend = async (detailFieldIndex: number, path: string, value: any, validation: true | DetailFieldError[]) => { + handleValueListAppend = async (detailFieldIndex: number, path: string, value: any, options?: { noPathCombination?: true }) => { const detailFieldConfig = (this.props.config.fields || [])[detailFieldIndex] if (detailFieldConfig) { - const fullPath = detailFieldConfig.field === '' || path === '' ? `${detailFieldConfig.field}${path}` : `${detailFieldConfig.field}.${path}` - await this.props.onValueListAppend(fullPath, value, true) - - const detailData = cloneDeep(this.state.detailData) - if (validation === true) { - detailData[detailFieldIndex] = { status: 'normal' } - } else { - detailData[detailFieldIndex] = { status: 'error', message: validation[0].message } - } - - this.setState({ - detailData - }) + const fullPath = options && options.noPathCombination ? path : (detailFieldConfig.field === '' || path === '' ? `${detailFieldConfig.field}${path}` : `${detailFieldConfig.field}.${path}`) + await this.props.onValueListAppend(fullPath, value) } } - handleValueListSplice = async (detailFieldIndex: number, path: string, index: number, count: number, validation: true | DetailFieldError[]) => { + handleValueListSplice = async (detailFieldIndex: number, path: string, index: number, count: number, options?: { noPathCombination?: true }) => { const detailFieldConfig = (this.props.config.fields || [])[detailFieldIndex] if (detailFieldConfig) { - const fullPath = detailFieldConfig.field === '' || path === '' ? `${detailFieldConfig.field}${path}` : `${detailFieldConfig.field}.${path}` - await this.props.onValueListSplice(fullPath, index, count, true) - - const detailData = cloneDeep(this.state.detailData) - if (validation === true) { - detailData[detailFieldIndex] = { status: 'normal' } - } else { - detailData[detailFieldIndex] = { status: 'error', message: validation[0].message } - } - - this.setState({ - detailData - }) + const fullPath = options && options.noPathCombination ? path : (detailFieldConfig.field === '' || path === '' ? `${detailFieldConfig.field}${path}` : `${detailFieldConfig.field}.${path}`) + await this.props.onValueListSplice(fullPath, index, count) } } @@ -223,6 +161,7 @@ export default class GroupField extends DetailField {this.renderComponent({ + columns: config?.columns?.enable ? config.columns : undefined, children: (this.props.config.fields || []).map((detailFieldConfig, detailFieldIndex) => { if (!ConditionHelper(detailFieldConfig.condition, { record: value, data: this.props.data, step: this.props.step })) { this.detailFieldsMounted[detailFieldIndex] = false @@ -248,11 +187,11 @@ 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)} - onValueListAppend={async (path, value, validation) => this.handleValueListAppend(detailFieldIndex, path, value, validation)} - onValueListSplice={async (path, index, count, validation) => this.handleValueListSplice(detailFieldIndex, path, index, count, validation)} + onValueSet={async (path, value, options) => this.handleValueSet(detailFieldIndex, path, value, options)} + onValueUnset={async (path, options) => this.handleValueUnset(detailFieldIndex, path, options)} + onValueListAppend={async (path, value, options) => this.handleValueListAppend(detailFieldIndex, path, value, options)} + onValueListSplice={async (path, index, count, options) => this.handleValueListSplice(detailFieldIndex, path, index, count, options)} baseRoute={this.props.baseRoute} loadDomain={async (domain: string) => await this.props.loadDomain(domain)} /> diff --git a/src/components/detail/importSubform/index.tsx b/src/components/detail/importSubform/index.tsx index 9828bbc31b080c71e60f28acbb6840d1224c4d83..dbcb395cfb033b42e5412c415e0d609104e23255 100644 --- a/src/components/detail/importSubform/index.tsx +++ b/src/components/detail/importSubform/index.tsx @@ -12,14 +12,16 @@ import { ColumnsConfig } from '../../../interface' /** * 子表单配置项 - * - withConfig: 拓展配置 - * - * - enable: 是否开启 - * - * - dataField: （序列化）数据 - * - * - configField: （序列化）配置 + * - configFrom: 配置来源(get用途) + * - * - type: 'data' | 'interface' // 来源类型 + * - * - dataField: 值来源字段 // 仅type为data时生效 + * - * - configField: 配置来源字段 // 仅type为data时生效 + * - * - interface: 来源接口配置 // 仅type为interface时生效 */ export interface ImportSubformFieldConfig extends DetailFieldConfig { type: 'import_subform', configFrom?: ImportSubformConfigFromData | ImportSubformConfigFromInterface + childColumns?: ColumnsConfig } interface ImportSubformConfigFromData { @@ -44,7 +46,7 @@ interface IImportSubformFieldState { formData: { status: 'normal' | 'error' | 'loading', message?: string }[] } -export default class ImportSubformField extends DetailField implements IDetailField { +export default class DetailImportSubformField extends DetailField implements IDetailField { // 各表单项对应的类型所使用的UI组件的类 getALLComponents = (type: any): typeof Display => getALLComponents[type] @@ -97,42 +99,42 @@ export default class ImportSubformField extends DetailField { + handleValueSet = async (formFieldIndex: number, path: string, value: any, options?: { noPathCombination?: true }) => { const formFieldConfig = (this.state.fields || [])[formFieldIndex] if (formFieldConfig) { - const fullPath = this.getFullpath(formFieldConfig.field, path) - await this.props.onValueSet(fullPath, value, true) + const fullPath = options && options.noPathCombination ? path : this.getFullpath(formFieldConfig.field, path) + await this.props.onValueSet(fullPath, value) } } - handleValueUnset = async (formFieldIndex: number, path: string) => { + handleValueUnset = async (formFieldIndex: number, path: string, options?: { noPathCombination?: true }) => { const formFieldConfig = (this.state.fields || [])[formFieldIndex] if (formFieldConfig) { - const fullPath = this.getFullpath(formFieldConfig.field, path) - await this.props.onValueUnset(fullPath, true) + const fullPath = options && options.noPathCombination ? path : this.getFullpath(formFieldConfig.field, path) + await this.props.onValueUnset(fullPath) } } - handleValueListAppend = async (formFieldIndex: number, path: string, value: any) => { + handleValueListAppend = async (formFieldIndex: number, path: string, value: any, options?: { noPathCombination?: true }) => { const formFieldConfig = (this.state.fields || [])[formFieldIndex] if (formFieldConfig) { - const fullPath = this.getFullpath(formFieldConfig.field, path) - await this.props.onValueListAppend(fullPath, value, true) + const fullPath = options && options.noPathCombination ? path : this.getFullpath(formFieldConfig.field, path) + await this.props.onValueListAppend(fullPath, value) } } - handleValueListSplice = async (formFieldIndex: number, path: string, index: number, count: number) => { + handleValueListSplice = async (formFieldIndex: number, path: string, index: number, count: number, options?: { noPathCombination?: true }) => { const formFieldConfig = (this.state.fields || [])[formFieldIndex] if (formFieldConfig) { - const fullPath = this.getFullpath(formFieldConfig.field, path) - await this.props.onValueListSplice(fullPath, index, count, true) + const fullPath = options && options.noPathCombination ? path : this.getFullpath(formFieldConfig.field, path) + await this.props.onValueListSplice(fullPath, index, count) } } @@ -205,6 +207,7 @@ export default class ImportSubformField extends DetailField {this.renderComponent({ + columns: config?.columns?.enable ? config.columns : undefined, children: this.state.didMount ? fields.map((formFieldConfig, formFieldIndex) => { if (!ConditionHelper(formFieldConfig.condition, { record: value, data, step })) { @@ -222,6 +225,15 @@ export default class ImportSubformField extends DetailField this.handleValueSet(formFieldIndex, path, value)} - onValueUnset={async (path) => this.handleValueUnset(formFieldIndex, path)} - onValueListAppend={async (path, value) => this.handleValueListAppend(formFieldIndex, path, value)} - onValueListSplice={async (path, index, count) => this.handleValueListSplice(formFieldIndex, path, index, count)} + onValueSet={async (path, value, options) => this.handleValueSet(formFieldIndex, path, value, options)} + onValueUnset={async (path, options) => this.handleValueUnset(formFieldIndex, path, options)} + onValueListAppend={async (path, value, options) => this.handleValueListAppend(formFieldIndex, path, value, options)} + onValueListSplice={async (path, index, count, options) => this.handleValueListSplice(formFieldIndex, path, index, count, options)} baseRoute={this.props.baseRoute} loadDomain={async (domain: string) => await this.props.loadDomain(domain)} /> diff --git a/src/components/formFields/code/index.tsx b/src/components/formFields/code/index.tsx new file mode 100644 index 0000000000000000000000000000000000000000..69aabb9503427d5467ecc36e0b4302f148cf9a05 --- /dev/null +++ b/src/components/formFields/code/index.tsx @@ -0,0 +1,152 @@ +import React, { KeyboardEvent } from 'react' +import { Field, FieldConfig, FieldError, IField } from '../common' +import { getBoolean } from '../../../util/value' + +/** + * code编辑器配置项 + * - codeType: 语言类型 + * - height: 代码编辑器高度 + * - theme: 编辑器主题风格 + * - fullScreen: 是否支持全屏 + */ +export interface CodeFieldConfig extends FieldConfig { + type: 'code' + codeType: 'xml' | 'json' | 'javascript' | 'java' + height: number + theme: 'white' | 'black' + fullScreen: boolean +} + +export interface ICodeField { + codeType: 'xml' | 'json' | 'javascript' | 'java' + fullScreenStatus: boolean + height: number + theme: 'white' | 'black' + value: string + onChange: (value: string) => Promise +} + +/** + * code编辑器配置项 + * - codeType: 语言类型 + * - height: 代码编辑器高度 + * - onResetValue: 编辑器重置为默认值 + * - fullScreen: 是否支持全屏 + * - fullScreenStatus: 编辑器是不是处于全屏状态 + */ +export interface ICodeFieldContainer { + fullScreen: boolean + fullScreenStatus: boolean + theme: 'white' | 'black' + children: React.ReactNode + onResetValue: (value: string) => Promise + keydownCallback: (value: KeyboardEvent) => Promise + enterFull: () => void + exitFull: () => void +} +interface State { + fullScreenStatus: boolean // 编辑器是不是处于全屏状态 +} +export default class CodeField extends Field implements IField { + state:State = { + fullScreenStatus: false + } + + reset: () => Promise = async () => { + const defaults = await this.defaultValue() + return (defaults === undefined) ? '' : defaults + } + + validate = async (value: string): Promise => { + const { + config: { + label, + required + } + } = this.props + + const errors: FieldError[] = [] + + if (getBoolean(required)) { + if (value === '' || value === undefined || value === null || String(value).trim() === '') { + errors.push(new FieldError(`输入${label}`)) + return errors + } + } + + return errors.length ? errors : true + } + + keydownCallback = (e: KeyboardEvent) => { + const keyCode = e.keyCode || e.which || e.charCode + const ctrlKey = e.ctrlKey || e.metaKey + if (this.props.config.fullScreen) { + if ((e.key === 'j' || keyCode === 74) && ctrlKey) { + this.enterFull() + } else if ((e.key === 'Escape' || keyCode === 27)) { + this.exitFull() + } + } + } + + enterFull = () => { + this.setState({ fullScreenStatus: true }) + } + + exitFull = () => { + this.setState({ fullScreenStatus: false }) + } + + renderContainer = (props: ICodeFieldContainer) => { + return + 您当前使用的UI版本没有实现CodeField的container组件。 +
+ +
+ + } + + renderComponent = (props: ICodeField) => { + return + 您当前使用的UI版本没有实现CodeField组件。 +
+ +
+ + } + + render = () => { + const { + value, + config: { + theme, + fullScreen, + height, + codeType + } + } = this.props + const { fullScreenStatus } = this.state + + return ( + + {this.renderContainer({ + fullScreenStatus, + fullScreen, + theme, + onResetValue: async (defaultCodeValue: string) => await this.props.onValueSet('', defaultCodeValue, await this.validate(defaultCodeValue)), + keydownCallback: async (e: KeyboardEvent) => await this.keydownCallback(e), + enterFull: this.enterFull, + exitFull: this.exitFull, + children: this.renderComponent({ + codeType, + fullScreenStatus, + value, + theme, + height, + onChange: async (value: string) => await this.props.onValueSet('', value, await this.validate(value)) + }) + })} + + ) + } +} diff --git a/src/components/formFields/common.tsx b/src/components/formFields/common.tsx index 9539759b1304936677c5c761ee15c365b09314af..412bb047530001e2f022bd3b230346387577d989 100644 --- a/src/components/formFields/common.tsx +++ b/src/components/formFields/common.tsx @@ -83,16 +83,16 @@ export interface FieldProps { config: C // TODO 待删除 onChange: (value: T) => Promise - // 事件：设置值 - onValueSet: (path: string, value: T, validation: true | FieldError[]) => Promise + // 事件：设置值 noPathCombination：为true时不做路径拼接 + onValueSet: (path: string, value: T, validation: true | FieldError[], options?: { noPathCombination?: true }) => Promise // 事件：置空值 - onValueUnset: (path: string, validation: true | FieldError[]) => Promise + onValueUnset: (path: string, validation: true | FieldError[], options?: { noPathCombination?: true }) => Promise // 事件：修改值 - 列表 - 追加 - onValueListAppend: (path: string, value: any, validation: true | FieldError[]) => Promise + onValueListAppend: (path: string, value: any, validation: true | FieldError[], options?: { noPathCombination?: true }) => Promise // 事件：修改值 - 列表 - 删除 - onValueListSplice: (path: string, index: number, count: number, validation: true | FieldError[]) => Promise + onValueListSplice: (path: string, index: number, count: number, validation: true | FieldError[], options?: { noPathCombination?: true }) => Promise // 事件：修改值 - 列表 - 修改顺序 - onValueListSort: (path: string, index: number, sortType: 'up' | 'down', validation: true | FieldError[]) => Promise + onValueListSort: (path: string, index: number, sortType: 'up' | 'down', validation: true | FieldError[], options?: { noPathCombination?: true }) => Promise baseRoute: string, loadDomain: (domain: string) => Promise } @@ -187,13 +187,13 @@ export interface DisplayProps { step: number, config: C, // 事件：设置值 - onValueSet: (path: string, value: T, validation: true | FieldError[]) => Promise + onValueSet: (path: string, value: T, options?: { noPathCombination?: true }) => Promise // 事件：置空值 - onValueUnset: (path: string, validation: true | FieldError[]) => Promise + onValueUnset: (path: string, options?: { noPathCombination?: true }) => Promise // 事件：修改值 - 列表 - 追加 - onValueListAppend: (path: string, value: any, validation: true | FieldError[]) => Promise + onValueListAppend: (path: string, value: any, options?: { noPathCombination?: true }) => Promise // 事件：修改值 - 列表 - 删除 - onValueListSplice: (path: string, index: number, count: number, validation: true | FieldError[]) => Promise + onValueListSplice: (path: string, index: number, count: number, options?: { noPathCombination?: true }) => Promise baseRoute: string, loadDomain: (domain: string) => Promise } diff --git a/src/components/formFields/diffCode/index.tsx b/src/components/formFields/diffCode/index.tsx new file mode 100644 index 0000000000000000000000000000000000000000..eea5d6f1114aa0573612d5e6b0c1598e8592f228 --- /dev/null +++ b/src/components/formFields/diffCode/index.tsx @@ -0,0 +1,146 @@ +import React, { KeyboardEvent } from 'react' +import { get } from 'lodash' +import { Field, FieldConfig, FieldError, IField } from '../common' + +/** + * diffCode编辑器配置项 + * - codeType: 语言类型 + * - height: 代码编辑器高度 + * - theme: 编辑器主题风格 + * - fullScreen: 是否支持全屏 + * - originalCodeField: 代码原始值入参字段 + * - modifiedCodeField: 代码修改值入参字段 + */ +export interface DiffCodeFieldConfig extends FieldConfig { + type: 'diffcode' + codeType: 'xml' | 'json' | 'javascript' | 'java' + height: number + theme: 'white' | 'black' + fullScreen: boolean + originalCodeField: string + modifiedCodeField: string +} + +export interface IDiffCodeField { + codeType: 'xml' | 'json' | 'javascript' | 'java' + fullScreenStatus: boolean + height: number + theme: 'white' | 'black' + originalCode: string + modifiedCode: string +} + +/** + * diffCode编辑器配置项 + * - codeType: 语言类型 + * - height: 代码编辑器高度 + * - fullScreen: 是否支持全屏 + * - fullScreenStatus: 编辑器是不是处于全屏状态 + */ +export interface IDiffCodeFieldContainer { + fullScreen: boolean + fullScreenStatus: boolean + theme: 'white' | 'black' + children: React.ReactNode + keydownCallback: (value: KeyboardEvent) => Promise + enterFull: () => void + exitFull: () => void +} +interface DiffCodeFieldValue { + [field: string]: any +} +interface State { + fullScreenStatus: boolean // 编辑器是不是处于全屏状态 +} + +export default class DiffCodeField extends Field implements IField { + state:State = { + fullScreenStatus: false + } + + get: () => Promise = async () => { + return {} + } + + reset: () => Promise = async () => { + const defaults = await this.defaultValue() + return (defaults === undefined) ? '' : defaults + } + + validate = async (value: DiffCodeFieldValue): Promise => { + return true + } + + keydownCallback = (e: KeyboardEvent) => { + const keyCode = e.keyCode || e.which || e.charCode + const ctrlKey = e.ctrlKey || e.metaKey + if (this.props.config.fullScreen) { + if ((e.key === 'j' || keyCode === 74) && ctrlKey) { + this.enterFull() + } else if ((e.key === 'Escape' || keyCode === 27)) { + this.exitFull() + } + } + } + + enterFull = () => { + this.setState({ fullScreenStatus: true }) + } + + exitFull = () => { + this.setState({ fullScreenStatus: false }) + } + + renderContainer = (props: IDiffCodeFieldContainer) => { + return + 您当前使用的UI版本没有实现CodeField的container组件。 +
+
+ + } + + renderComponent = (props: IDiffCodeField) => { + return + 您当前使用的UI版本没有实现CodeField组件。 +
+
+ + } + + render = () => { + const { + value, + config: { + theme, + fullScreen, + height, + codeType, + originalCodeField, + modifiedCodeField + } + } = this.props + const { fullScreenStatus } = this.state + const originalCode = get(value, originalCodeField) || '' + const modifiedCode = get(value, modifiedCodeField) || '' + return ( + + {this.renderContainer({ + fullScreenStatus, + fullScreen, + theme, + keydownCallback: async (e: KeyboardEvent) => await this.keydownCallback(e), + enterFull: this.enterFull, + exitFull: this.exitFull, + children: this.renderComponent({ + codeType, + fullScreenStatus, + originalCode, + modifiedCode, + theme, + height + }) + })} + + ) + } +} diff --git a/src/components/formFields/form/index.tsx b/src/components/formFields/form/index.tsx index 111ac3ce1c2df25f3433b15b3bd9e105e340184f..5a07d68512d763e87197958ad3535098e3fb2520 100644 --- a/src/components/formFields/form/index.tsx +++ b/src/components/formFields/form/index.tsx @@ -136,7 +136,7 @@ export default class FormField extends Field { + handleValueSet = async (index: number, formFieldIndex: number, path: string, value: any, validation: true | FieldError[], options?: { noPathCombination?: true }) => { const formFieldConfig = (this.props.config.fields || [])[formFieldIndex] if (formFieldConfig) { - const fullPath = formFieldConfig.field === '' || path === '' ? `${formFieldConfig.field}${path}` : `${formFieldConfig.field}.${path}` + const fullPath = options && options.noPathCombination ? path : (formFieldConfig.field === '' || path === '' ? `${formFieldConfig.field}${path}` : `${formFieldConfig.field}.${path}`) await this.props.onValueSet(`[${index}]${fullPath}`, value, true) const formDataList = cloneDeep(this.state.formDataList) @@ -346,10 +346,10 @@ export default class FormField extends Field { + handleValueUnset = async (index: number, formFieldIndex: number, path: string, validation: true | FieldError[], options?: { noPathCombination?: true }) => { const formFieldConfig = (this.props.config.fields || [])[formFieldIndex] if (formFieldConfig) { - const fullPath = formFieldConfig.field === '' || path === '' ? `${formFieldConfig.field}${path}` : `${formFieldConfig.field}.${path}` + const fullPath = options && options.noPathCombination ? path : (formFieldConfig.field === '' || path === '' ? `${formFieldConfig.field}${path}` : `${formFieldConfig.field}.${path}`) await this.props.onValueUnset(`[${index}]${fullPath}`, true) const formDataList = cloneDeep(this.state.formDataList) @@ -365,10 +365,10 @@ export default class FormField extends Field { + handleValueListAppend = async (index: number, formFieldIndex: number, path: string, value: any, validation: true | FieldError[], options?: { noPathCombination?: true }) => { const formFieldConfig = (this.props.config.fields || [])[formFieldIndex] if (formFieldConfig) { - const fullPath = formFieldConfig.field === '' || path === '' ? `${formFieldConfig.field}${path}` : `${formFieldConfig.field}.${path}` + const fullPath = options && options.noPathCombination ? path : (formFieldConfig.field === '' || path === '' ? `${formFieldConfig.field}${path}` : `${formFieldConfig.field}.${path}`) await this.props.onValueListAppend(`[${index}]${fullPath}`, value, true) const formDataList = cloneDeep(this.state.formDataList) @@ -384,10 +384,10 @@ export default class FormField extends Field { + handleValueListSplice = async (index: number, formFieldIndex: number, path: string, _index: number, count: number, validation: true | FieldError[], options?: { noPathCombination?: true }) => { const formFieldConfig = (this.props.config.fields || [])[formFieldIndex] if (formFieldConfig) { - const fullPath = formFieldConfig.field === '' || path === '' ? `${formFieldConfig.field}${path}` : `${formFieldConfig.field}.${path}` + const fullPath = options && options.noPathCombination ? path : (formFieldConfig.field === '' || path === '' ? `${formFieldConfig.field}${path}` : `${formFieldConfig.field}.${path}`) await this.props.onValueListSplice(`[${index}]${fullPath}`, _index, count, true) const formDataList = cloneDeep(this.state.formDataList) @@ -403,10 +403,10 @@ export default class FormField extends Field { + handleValueListSort = async (index: number, formFieldIndex: number, path: string, _index: number, sortType: 'up' | 'down', validation: true | FieldError[], options?: { noPathCombination?: true }) => { const formFieldConfig = (this.props.config.fields || [])[formFieldIndex] if (formFieldConfig) { - const fullPath = formFieldConfig.field === '' || path === '' ? `${formFieldConfig.field}${path}` : `${formFieldConfig.field}.${path}` + const fullPath = options && options.noPathCombination ? path : (formFieldConfig.field === '' || path === '' ? `${formFieldConfig.field}${path}` : `${formFieldConfig.field}.${path}`) await this.props.onValueListSort(`[${index}]${fullPath}`, _index, sortType, true) const formDataList = cloneDeep(this.state.formDataList) @@ -539,11 +539,11 @@ export default class FormField extends Field 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)} + onValueSet={async (path, value, validation, options) => this.handleValueSet(index, fieldIndex, path, value, validation, options)} + onValueUnset={async (path, validation, options) => this.handleValueUnset(index, fieldIndex, path, validation, options)} + onValueListAppend={async (path, value, validation, options) => this.handleValueListAppend(index, fieldIndex, path, value, validation, options)} + onValueListSplice={async (path, _index, count, validation, options) => this.handleValueListSplice(index, fieldIndex, path, _index, count, validation, options)} + onValueListSort={async (path, _index, sortType, validation, options) => await this.handleValueListSort(index, fieldIndex, path, _index, sortType, validation, options)} 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 da312b8f2c90353b250a6f6274eca510ddbd89f0..36f2baff86bab2682108d840d44a24949ba581b1 100644 --- a/src/components/formFields/group/index.tsx +++ b/src/components/formFields/group/index.tsx @@ -73,7 +73,7 @@ export default class GroupField extends Field { + handleValueSet = async (formFieldIndex: number, path: string, value: any, validation: true | FieldError[], options?: { noPathCombination?: true }) => { const formFieldConfig = (this.props.config.fields || [])[formFieldIndex] if (formFieldConfig) { - const fullPath = formFieldConfig.field === '' || path === '' ? `${formFieldConfig.field}${path}` : `${formFieldConfig.field}.${path}` + const fullPath = options && options.noPathCombination ? path : (formFieldConfig.field === '' || path === '' ? `${formFieldConfig.field}${path}` : `${formFieldConfig.field}.${path}`) await this.props.onValueSet(fullPath, value, true) const formData = cloneDeep(this.state.formData) if (validation === true) { @@ -207,10 +207,10 @@ export default class GroupField extends Field { + handleValueUnset = async (formFieldIndex: number, path: string, validation: true | FieldError[], options?: { noPathCombination?: true }) => { const formFieldConfig = (this.props.config.fields || [])[formFieldIndex] if (formFieldConfig) { - const fullPath = formFieldConfig.field === '' || path === '' ? `${formFieldConfig.field}${path}` : `${formFieldConfig.field}.${path}` + const fullPath = options && options.noPathCombination ? path : (formFieldConfig.field === '' || path === '' ? `${formFieldConfig.field}${path}` : `${formFieldConfig.field}.${path}`) await this.props.onValueUnset(fullPath, true) const formData = cloneDeep(this.state.formData) if (validation === true) { @@ -225,10 +225,10 @@ export default class GroupField extends Field { + handleValueListAppend = async (formFieldIndex: number, path: string, value: any, validation: true | FieldError[], options?: { noPathCombination?: true }) => { const formFieldConfig = (this.props.config.fields || [])[formFieldIndex] if (formFieldConfig) { - const fullPath = formFieldConfig.field === '' || path === '' ? `${formFieldConfig.field}${path}` : `${formFieldConfig.field}.${path}` + const fullPath = options && options.noPathCombination ? path : (formFieldConfig.field === '' || path === '' ? `${formFieldConfig.field}${path}` : `${formFieldConfig.field}.${path}`) await this.props.onValueListAppend(fullPath, value, true) const formData = cloneDeep(this.state.formData) if (validation === true) { @@ -243,10 +243,10 @@ export default class GroupField extends Field { + handleValueListSplice = async (formFieldIndex: number, path: string, index: number, count: number, validation: true | FieldError[], options?: { noPathCombination?: true }) => { const formFieldConfig = (this.props.config.fields || [])[formFieldIndex] if (formFieldConfig) { - const fullPath = formFieldConfig.field === '' || path === '' ? `${formFieldConfig.field}${path}` : `${formFieldConfig.field}.${path}` + const fullPath = options && options.noPathCombination ? path : (formFieldConfig.field === '' || path === '' ? `${formFieldConfig.field}${path}` : `${formFieldConfig.field}.${path}`) await this.props.onValueListSplice(fullPath, index, count, true) const formData = cloneDeep(this.state.formData) if (validation === true) { @@ -261,10 +261,10 @@ export default class GroupField extends Field { + handleValueListSort = async (formFieldIndex: number, path: string, index: number, sortType: 'up' | 'down', validation: true | FieldError[], options?: { noPathCombination?: true }) => { const formFieldConfig = (this.props.config.fields || [])[formFieldIndex] if (formFieldConfig) { - const fullPath = formFieldConfig.field === '' || path === '' ? `${formFieldConfig.field}${path}` : `${formFieldConfig.field}.${path}` + const fullPath = options && options.noPathCombination ? path : (formFieldConfig.field === '' || path === '' ? `${formFieldConfig.field}${path}` : `${formFieldConfig.field}.${path}`) await this.props.onValueListSort(fullPath, index, sortType, true) const formData = cloneDeep(this.state.formData) if (validation === true) { @@ -375,11 +375,11 @@ export default class GroupField extends Field { 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)} + onValueSet={async (path, value, validation, options) => this.handleValueSet(formFieldIndex, path, value, validation, options)} + onValueUnset={async (path, validation, options) => this.handleValueUnset(formFieldIndex, path, validation, options)} + onValueListAppend={async (path, value, validation, options) => this.handleValueListAppend(formFieldIndex, path, value, validation, options)} + onValueListSplice={async (path, index, count, validation, options) => this.handleValueListSplice(formFieldIndex, path, index, count, validation, options)} + onValueListSort={async (path, index, sortType, validation, options) => this.handleValueListSort(formFieldIndex, path, index, sortType, validation, options)} baseRoute={this.props.baseRoute} loadDomain={async (domain: string) => await this.props.loadDomain(domain)} /> diff --git a/src/components/formFields/importSubform/index.tsx b/src/components/formFields/importSubform/index.tsx index 5735eb9ac76be88b0f40b90b7af81d263cb5af57..fda69c44ca3534705fc02769c0b463b89137b6bc 100644 --- a/src/components/formFields/importSubform/index.tsx +++ b/src/components/formFields/importSubform/index.tsx @@ -4,7 +4,7 @@ import { setValue, getValue, getBoolean } from '../../../util/value' import { Field, FieldConfig, FieldError, FieldProps, IField } from '../common' import getALLComponents, { FieldConfigs } from '../' import { IFormItem } from '../../../steps/form' -import { cloneDeep } from 'lodash' +import { cloneDeep, isEqual } from 'lodash' import ConditionHelper from '../../../util/condition' import InterfaceHelper, { InterfaceConfig } from '../../../util/interface' import StatementHelper from '../../../util/statement' @@ -12,7 +12,12 @@ import { ColumnsConfig } from '../../../interface' /** * 子表单配置项 - * - withConfig: 拓展配置 + * - configFrom: 配置来源(get用途) + * - * - type: 'data' | 'interface' // 来源类型 + * - * - dataField: 值来源字段 // 仅type为data时生效 + * - * - configField: 配置项来源字段 // 仅type为data时生效 + * - * - interface: 来源接口配置 // 仅type为interface时生效 + * - withConfig: 拓展配置(set用途) * - * - enable: 是否开启 * - * - dataField: （序列化）数据 * - * - configField: （序列化）配置 @@ -20,6 +25,7 @@ import { ColumnsConfig } from '../../../interface' export interface ImportSubformFieldConfig extends FieldConfig { type: 'import_subform', interface?: InterfaceConfig + configFrom?: ImportSubformConfigFromData | ImportSubformConfigFromInterface withConfig?: { enable: boolean dataField: string @@ -27,7 +33,16 @@ export interface ImportSubformFieldConfig extends FieldConfig { } childColumns?: ColumnsConfig } +interface ImportSubformConfigFromData { + type: 'data' + dataField?: string + configField?: string +} +interface ImportSubformConfigFromInterface { + type: 'interface' + interface?: InterfaceConfig +} export interface IImportSubformField { columns?: ColumnsConfig children: React.ReactNode[] @@ -85,7 +100,7 @@ export default class ImportSubformField extends Field { + handleValueSet = async (formFieldIndex: number, path: string, value: any, validation: true | FieldError[], options?: { noPathCombination?: true }) => { const formFieldConfig = (this.state.fields || [])[formFieldIndex] if (formFieldConfig) { - const fullPath = this.getFullpath(formFieldConfig.field, path) + const fullPath = options && options.noPathCombination ? path : this.getFullpath(formFieldConfig.field, path) await this.props.onValueSet(fullPath, value, true) const formData = cloneDeep(this.state.formData) @@ -233,10 +248,10 @@ export default class ImportSubformField extends Field { + handleValueUnset = async (formFieldIndex: number, path: string, validation: true | FieldError[], options?: { noPathCombination?: true }) => { const formFieldConfig = (this.state.fields || [])[formFieldIndex] if (formFieldConfig) { - const fullPath = this.getFullpath(formFieldConfig.field, path) + const fullPath = options && options.noPathCombination ? path : this.getFullpath(formFieldConfig.field, path) await this.props.onValueUnset(fullPath, true) const formData = cloneDeep(this.state.formData) @@ -252,10 +267,10 @@ export default class ImportSubformField extends Field { + handleValueListAppend = async (formFieldIndex: number, path: string, value: any, validation: true | FieldError[], options?: { noPathCombination?: true }) => { const formFieldConfig = (this.state.fields || [])[formFieldIndex] if (formFieldConfig) { - const fullPath = this.getFullpath(formFieldConfig.field, path) + const fullPath = options && options.noPathCombination ? path : this.getFullpath(formFieldConfig.field, path) await this.props.onValueListAppend(fullPath, value, true) const formData = cloneDeep(this.state.formData) @@ -271,10 +286,10 @@ export default class ImportSubformField extends Field { + handleValueListSplice = async (formFieldIndex: number, path: string, index: number, count: number, validation: true | FieldError[], options?: { noPathCombination?: true }) => { const formFieldConfig = (this.state.fields || [])[formFieldIndex] if (formFieldConfig) { - const fullPath = this.getFullpath(formFieldConfig.field, path) + const fullPath = options && options.noPathCombination ? path : this.getFullpath(formFieldConfig.field, path) await this.props.onValueListSplice(fullPath, index, count, true) const formData = cloneDeep(this.state.formData) @@ -290,10 +305,10 @@ export default class ImportSubformField extends Field { + handleValueListSort = async (formFieldIndex: number, path: string, index: number, sortType: 'up' | 'down', validation: true | FieldError[], options?: { noPathCombination?: true }) => { const formFieldConfig = (this.state.fields || [])[formFieldIndex] if (formFieldConfig) { - const fullPath = this.getFullpath(formFieldConfig.field, path) + const fullPath = options && options.noPathCombination ? path : this.getFullpath(formFieldConfig.field, path) await this.props.onValueListSort(fullPath, index, sortType, true) const formData = cloneDeep(this.state.formData) @@ -309,6 +324,24 @@ export default class ImportSubformField extends Field { + let dataToUnstringfy = data + if (Object.prototype.toString.call(data) === '[object String]') { + try { + dataToUnstringfy = JSON.parse(data) + } catch (e) { + console.error('当前动态子表单接口响应数据格式不是合格的json字符串') + dataToUnstringfy = [] + } + } + return dataToUnstringfy + } + renderComponent = (props: IImportSubformField) => { return 您当前使用的UI版本没有实现ImportSubformField组件。 @@ -336,27 +369,36 @@ export default class ImportSubformField extends Field { - let dataToUnstringfy = data - let dataToStringfy = JSON.stringify(data) - if (Object.prototype.toString.call(data) === '[object String]') { - try { - dataToStringfy = data - dataToUnstringfy = JSON.parse(data) - } catch (e) { - console.error('当前动态子表单接口响应数据格式不是合格的json字符串') - dataToUnstringfy = [] - dataToStringfy = '[]' - } - } - (this.props.config.withConfig?.enable && this.props.config.withConfig?.configField) && this.props.onValueSet(this.props.config.withConfig.configField, data, true) - if (dataToStringfy !== JSON.stringify(this.state.fields)) { + const dataToUnstringfy = this.handleDataToUnstringfy(data) + if (this.props.config.withConfig?.enable && this.props.config.withConfig?.configField) this.props.onValueSet(this.props.config.withConfig.configField, data, true) + if (!isEqual(dataToUnstringfy, this.state.fields)) { this.setState({ fields: dataToUnstringfy }) @@ -364,7 +406,7 @@ export default class ImportSubformField extends Field } else { return ( @@ -434,11 +476,11 @@ export default class ImportSubformField extends Field { 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)} + onValueSet={async (path, value, validation, options) => this.handleValueSet(formFieldIndex, path, value, validation, options)} + onValueUnset={async (path, validation, options) => this.handleValueUnset(formFieldIndex, path, validation, options)} + onValueListAppend={async (path, value, validation, options) => this.handleValueListAppend(formFieldIndex, path, value, validation, options)} + onValueListSplice={async (path, index, count, validation, options) => this.handleValueListSplice(formFieldIndex, path, index, count, validation, options)} + onValueListSort={async (path, index, sortType, validation, options) => this.handleValueListSort(formFieldIndex, path, index, sortType, validation, options)} baseRoute={this.props.baseRoute} loadDomain={async (domain: string) => await this.props.loadDomain(domain)} /> diff --git a/src/components/formFields/index.tsx b/src/components/formFields/index.tsx index e7735a6dd6c6f12f256e6133b149ea6f00ea69cc..d7e901304b2416ed2dbb5be77ad3caae618d6696 100644 --- a/src/components/formFields/index.tsx +++ b/src/components/formFields/index.tsx @@ -23,6 +23,8 @@ import HiddenField from './hidden' import TabsField, { TabsFieldConfig } from './tabs' import MultipleTextField, { MultipleTextFieldConfig } from './multipleText' import CustomField, { CustomFieldConfig } from './custom' +import CodeField, { CodeFieldConfig } from './code' +import DiffCodeField, { DiffCodeFieldConfig } from './diffCode' import TextDisplay from './text/display' import RadioDisplay from './radio/display' @@ -67,7 +69,9 @@ export type FieldConfigs = ObjectFieldConfig | TabsFieldConfig | MultipleTextFieldConfig | - CustomFieldConfig + CustomFieldConfig | + CodeFieldConfig | + DiffCodeFieldConfig export type componentType = 'text' | @@ -93,7 +97,9 @@ export type componentType = 'object' | 'tabs' | 'multiple_text'| - 'custom' + 'custom' | + 'code' | + 'diffcode' export default { text: TextField, @@ -118,7 +124,9 @@ export default { hidden: HiddenField, tabs: TabsField, multiple_text: MultipleTextField, - custom: CustomField + custom: CustomField, + code: CodeField, + diffcode: DiffCodeField } export const display = { diff --git a/src/components/formFields/object/index.tsx b/src/components/formFields/object/index.tsx index b0de063901f60ff11be62e7d7e9855d0ae8abca5..12bb936df05eb7e42ca625b6651cca8063e21893 100644 --- a/src/components/formFields/object/index.tsx +++ b/src/components/formFields/object/index.tsx @@ -259,10 +259,10 @@ export default class ObjectField extends Field { + handleValueSet = async (key: string, formFieldIndex: number, path: string, value: any, validation: true | FieldError[], options?: { noPathCombination?: true }) => { const formFieldConfig = (this.props.config.fields || [])[formFieldIndex] if (formFieldConfig) { - const fullPath = formFieldConfig.field === '' || path === '' ? `${formFieldConfig.field}${path}` : `${formFieldConfig.field}.${path}` + const fullPath = options && options.noPathCombination ? path : (formFieldConfig.field === '' || path === '' ? `${formFieldConfig.field}${path}` : `${formFieldConfig.field}.${path}`) await this.props.onValueSet(fullPath === '' ? key : `${key}.${fullPath}`, value, true) const formDataList = cloneDeep(this.state.formDataList) @@ -278,10 +278,10 @@ export default class ObjectField extends Field { + handleValueUnset = async (key: string, formFieldIndex: number, path: string, validation: true | FieldError[], options?: { noPathCombination?: true }) => { const formFieldConfig = (this.props.config.fields || [])[formFieldIndex] if (formFieldConfig) { - const fullPath = formFieldConfig.field === '' || path === '' ? `${formFieldConfig.field}${path}` : `${formFieldConfig.field}.${path}` + const fullPath = options && options.noPathCombination ? path : (formFieldConfig.field === '' || path === '' ? `${formFieldConfig.field}${path}` : `${formFieldConfig.field}.${path}`) await this.props.onValueUnset(fullPath === '' ? key : `${key}.${fullPath}`, true) const formDataList = cloneDeep(this.state.formDataList) @@ -297,10 +297,10 @@ export default class ObjectField extends Field { + handleValueListAppend = async (key: string, formFieldIndex: number, path: string, value: any, validation: true | FieldError[], options?: { noPathCombination?: true }) => { const formFieldConfig = (this.props.config.fields || [])[formFieldIndex] if (formFieldConfig) { - const fullPath = formFieldConfig.field === '' || path === '' ? `${formFieldConfig.field}${path}` : `${formFieldConfig.field}.${path}` + const fullPath = options && options.noPathCombination ? path : (formFieldConfig.field === '' || path === '' ? `${formFieldConfig.field}${path}` : `${formFieldConfig.field}.${path}`) await this.props.onValueListAppend(fullPath === '' ? key : `${key}.${fullPath}`, value, true) const formDataList = cloneDeep(this.state.formDataList) @@ -316,10 +316,10 @@ export default class ObjectField extends Field { + handleValueListSplice = async (key: string, formFieldIndex: number, path: string, _index: number, count: number, validation: true | FieldError[], options?: { noPathCombination?: true }) => { const formFieldConfig = (this.props.config.fields || [])[formFieldIndex] if (formFieldConfig) { - const fullPath = formFieldConfig.field === '' || path === '' ? `${formFieldConfig.field}${path}` : `${formFieldConfig.field}.${path}` + const fullPath = options && options.noPathCombination ? path : (formFieldConfig.field === '' || path === '' ? `${formFieldConfig.field}${path}` : `${formFieldConfig.field}.${path}`) await this.props.onValueListSplice(fullPath === '' ? key : `${key}.${fullPath}`, _index, count, true) const formDataList = cloneDeep(this.state.formDataList) @@ -335,10 +335,10 @@ export default class ObjectField extends Field { + handleValueListSort = async (key: string, formFieldIndex: number, path: string, _index: number, sortType: 'up' | 'down', validation: true | FieldError[], options?: { noPathCombination?: true }) => { const formFieldConfig = (this.props.config.fields || [])[formFieldIndex] if (formFieldConfig) { - const fullPath = formFieldConfig.field === '' || path === '' ? `${formFieldConfig.field}${path}` : `${formFieldConfig.field}.${path}` + const fullPath = options && options.noPathCombination ? path : (formFieldConfig.field === '' || path === '' ? `${formFieldConfig.field}${path}` : `${formFieldConfig.field}.${path}`) await this.props.onValueListSort(fullPath === '' ? key : `${key}.${fullPath}`, _index, sortType, true) const formDataList = cloneDeep(this.state.formDataList) @@ -472,11 +472,11 @@ export default class ObjectField extends Field 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)} + onValueSet={async (path, value, validation, options) => this.handleValueSet(key, formFieldIndex, path, value, validation, options)} + onValueUnset={async (path, validation, options) => this.handleValueUnset(key, formFieldIndex, path, validation, options)} + onValueListAppend={async (path, value, validation, options) => this.handleValueListAppend(key, formFieldIndex, path, value, validation, options)} + onValueListSplice={async (path, _index, count, validation, options) => this.handleValueListSplice(key, formFieldIndex, path, _index, count, validation, options)} + onValueListSort={async (path, _index, sortType, validation, options) => this.handleValueListSort(key, formFieldIndex, path, _index, sortType, validation, options)} baseRoute={this.props.baseRoute} loadDomain={async (domain: string) => this.props.loadDomain(domain)} /> diff --git a/src/components/formFields/tabs/index.tsx b/src/components/formFields/tabs/index.tsx index 0ed46c21360d44cf9cc871bd736d31aff02ef703..2be57a1e901f59aa5f99bfb36c46631f5f19b80a 100644 --- a/src/components/formFields/tabs/index.tsx +++ b/src/components/formFields/tabs/index.tsx @@ -94,7 +94,7 @@ export default class TabsField extends Field extends Field extends Field { } - handleValueSet = async (index: number, formFieldIndex: number, path: string, value: any, validation: true | FieldError[]) => { + handleValueSet = async (index: number, formFieldIndex: number, path: string, value: any, validation: true | FieldError[], options?: { noPathCombination?: true }) => { const tab = (this.props.config.tabs || [])[index] const fields = this.props.config.mode === 'same' ? (this.props.config.fields || []) : (((this.props.config.tabs || [])[index] || {}).fields || []) const formFieldConfig = fields[formFieldIndex] if (formFieldConfig) { - const fieldPath = formFieldConfig.field === '' || path === '' ? `${formFieldConfig.field}${path}` : `${formFieldConfig.field}.${path}` + const fieldPath = options && options.noPathCombination ? path : (formFieldConfig.field === '' || path === '' ? `${formFieldConfig.field}${path}` : `${formFieldConfig.field}.${path}`) const fullPath = tab.field === '' || fieldPath === '' ? `${tab.field}${fieldPath}` : `${tab.field}.${fieldPath}` await this.props.onValueSet(fullPath, value, true) @@ -229,13 +229,13 @@ export default class TabsField extends Field { + handleValueUnset = async (index: number, formFieldIndex: number, path: string, validation: true | FieldError[], options?: { noPathCombination?: true }) => { const tab = (this.props.config.tabs || [])[index] const fields = this.props.config.mode === 'same' ? (this.props.config.fields || []) : (((this.props.config.tabs || [])[index] || {}).fields || []) const formFieldConfig = fields[formFieldIndex] if (formFieldConfig) { - const fieldPath = formFieldConfig.field === '' || path === '' ? `${formFieldConfig.field}${path}` : `${formFieldConfig.field}.${path}` + const fieldPath = options && options.noPathCombination ? path : (formFieldConfig.field === '' || path === '' ? `${formFieldConfig.field}${path}` : `${formFieldConfig.field}.${path}`) const fullPath = tab.field === '' || fieldPath === '' ? `${tab.field}${fieldPath}` : `${tab.field}.${fieldPath}` await this.props.onValueUnset(fullPath, true) @@ -253,13 +253,13 @@ export default class TabsField extends Field { + handleValueListAppend = async (index: number, formFieldIndex: number, path: string, value: any, validation: true | FieldError[], options?: { noPathCombination?: true }) => { const tab = (this.props.config.tabs || [])[index] const fields = this.props.config.mode === 'same' ? (this.props.config.fields || []) : (((this.props.config.tabs || [])[index] || {}).fields || []) const formFieldConfig = fields[formFieldIndex] if (formFieldConfig) { - const fieldPath = formFieldConfig.field === '' || path === '' ? `${formFieldConfig.field}${path}` : `${formFieldConfig.field}.${path}` + const fieldPath = options && options.noPathCombination ? path : (formFieldConfig.field === '' || path === '' ? `${formFieldConfig.field}${path}` : `${formFieldConfig.field}.${path}`) const fullPath = tab.field === '' || fieldPath === '' ? `${tab.field}${fieldPath}` : `${tab.field}.${fieldPath}` await this.props.onValueListAppend(fullPath, value, true) @@ -277,13 +277,13 @@ export default class TabsField extends Field { + handleValueListSplice = async (index: number, formFieldIndex: number, path: string, _index: number, count: number, validation: true | FieldError[], options?: { noPathCombination?: true }) => { const tab = (this.props.config.tabs || [])[index] const fields = this.props.config.mode === 'same' ? (this.props.config.fields || []) : (((this.props.config.tabs || [])[index] || {}).fields || []) const formFieldConfig = fields[formFieldIndex] if (formFieldConfig) { - const fieldPath = formFieldConfig.field === '' || path === '' ? `${formFieldConfig.field}${path}` : `${formFieldConfig.field}.${path}` + const fieldPath = options && options.noPathCombination ? path : (formFieldConfig.field === '' || path === '' ? `${formFieldConfig.field}${path}` : `${formFieldConfig.field}.${path}`) const fullPath = tab.field === '' || fieldPath === '' ? `${tab.field}${fieldPath}` : `${tab.field}.${fieldPath}` await this.props.onValueListSplice(fullPath, _index, count, true) @@ -301,13 +301,13 @@ export default class TabsField extends Field { + handleValueListSort = async (index: number, formFieldIndex: number, path: string, _index: number, sortType: 'up' | 'down', validation: true | FieldError[], options?: { noPathCombination?: true }) => { const tab = (this.props.config.tabs || [])[index] const fields = this.props.config.mode === 'same' ? (this.props.config.fields || []) : (((this.props.config.tabs || [])[index] || {}).fields || []) const formFieldConfig = fields[formFieldIndex] if (formFieldConfig) { - const fieldPath = formFieldConfig.field === '' || path === '' ? `${formFieldConfig.field}${path}` : `${formFieldConfig.field}.${path}` + const fieldPath = options && options.noPathCombination ? path : (formFieldConfig.field === '' || path === '' ? `${formFieldConfig.field}${path}` : `${formFieldConfig.field}.${path}`) const fullPath = tab.field === '' || fieldPath === '' ? `${tab.field}${fieldPath}` : `${tab.field}.${fieldPath}` await this.props.onValueListSort(fullPath, _index, sortType, true) @@ -436,11 +436,11 @@ export default class TabsField extends Field 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)} + onValueSet={async (path, value, validation, options) => this.handleValueSet(index, formFieldIndex, path, value, validation, options)} + onValueUnset={async (path, validation, options) => this.handleValueUnset(index, formFieldIndex, path, validation, options)} + onValueListAppend={async (path, value, validation, options) => this.handleValueListAppend(index, formFieldIndex, path, value, validation, options)} + onValueListSplice={async (path, _index, count, validation, options) => this.handleValueListSplice(index, formFieldIndex, path, _index, count, validation, options)} + onValueListSort={async (path, _index, sortType, validation, options) => this.handleValueListSort(index, formFieldIndex, path, _index, sortType, validation, options)} baseRoute={this.props.baseRoute} loadDomain={async (domain: string) => await this.props.loadDomain(domain)} /> diff --git a/src/components/formFields/upload/index.tsx b/src/components/formFields/upload/index.tsx index 5b8fc83ecb6a6ce2d1a7483372cbf60e3a772e7d..295ec68fab0477df190c1b3df09df4abbc522a4b 100644 --- a/src/components/formFields/upload/index.tsx +++ b/src/components/formFields/upload/index.tsx @@ -11,6 +11,7 @@ export interface UploadFieldConfigBasic extends FieldConfig { interface: InterfaceConfig requireField: string responseField: string + extraResponseField: Array<{from: string, to: string}> } export interface UploadFieldConfigImage extends UploadFieldConfigBasic { @@ -150,7 +151,6 @@ export default class UploadField extends Field { data: any[], step: number, config: T + // 挂载引用 + column?: React.ReactNode + baseRoute: string + loadDomain: (domain: string) => Promise } interface ColumnState { diff --git a/src/components/tableColumns/custom/index.tsx b/src/components/tableColumns/custom/index.tsx new file mode 100644 index 0000000000000000000000000000000000000000..15f1d54b4afcc7fdb342d1d3492adfae88ebd7db --- /dev/null +++ b/src/components/tableColumns/custom/index.tsx @@ -0,0 +1,76 @@ +import React, { RefObject } from 'react' +import Column, { ColumnConfig, ColumnProps, IColumn } from '../common' +import { loadMicroApp, MicroApp } from 'qiankun' +import moment from 'moment' +import { cloneDeep } from 'lodash' + +export interface CustomColumnConfig extends ColumnConfig { + type: 'custom' + entry: string +} + +export default class CustomColumn extends Column implements IColumn { + identifier: string = '' + entry: string = '' + container: RefObject = React.createRef() + customColumn: MicroApp | null = null + + componentDidMount () { + this.loadCustomColumn(this.props.config.entry) + } + + getSnapshotBeforeUpdate () { + const snapshot: string[] = [] + if (this.entry !== this.props.config.entry) { + snapshot.push('entry') + } + return snapshot + } + + componentDidUpdate (_: ColumnProps, __: {}, snapshot: string[]) { + if (snapshot.includes('entry')) { + this.loadCustomColumn(this.props.config.entry) + } else { + if (this.customColumn && this.customColumn.update) { + this.customColumn.update({ + value: this.props.value, + record: this.props.record, + data: cloneDeep(this.props.data), + step: this.props.step, + config: this.props.config, + column: this.props.column, + base: this.props.baseRoute, + loadDomain: this.props.loadDomain + }) + } + } + } + + loadCustomColumn = (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.customColumn = 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, + column: this.props.column, + base: this.props.baseRoute, + loadDomain: this.props.loadDomain + } + }) + } + } + + render = () => { + return ( +
+ ) + } +} diff --git a/src/components/tableColumns/index.tsx b/src/components/tableColumns/index.tsx index aa8159bee59ff9bb5b32d4cb6efe4c8e28f99d6d..ff52f9443bb24c2fdad21024a94272d152b7e250 100644 --- a/src/components/tableColumns/index.tsx +++ b/src/components/tableColumns/index.tsx @@ -7,6 +7,7 @@ import DatetimeColumn, { DatetimeColumnConfig } from './datetime' import DatetimeRangeColumn, { DatetimeRangeColumnConfig } from './datetimeRange' import MultirowColumn, { MultirowColumnConfig } from './multirowText' import ImageColumn, { ImageColumnConfig } from './image' +import CustomColumn, { CustomColumnConfig } from './custom' export interface componentType { type: 'text' @@ -17,6 +18,7 @@ export interface componentType { | 'Aenum' | 'multirowText' | 'image' + | 'custom' } export type ColumnConfigs = TextColumnConfig @@ -27,6 +29,7 @@ export type ColumnConfigs = TextColumnConfig | NumberColumnConfig | NumberRangeColumnConfig | ImageColumnConfig + | CustomColumnConfig export default { text: TextColumn, @@ -36,5 +39,6 @@ export default { Aenum: EnumColumn, number: NumberColumn, numberRange: NumberRangeColumn, - image: ImageColumn + image: ImageColumn, + custom: CustomColumn } diff --git a/src/index.tsx b/src/index.tsx index 5e8ec9d484c33000384fbafafe0123fef90dbc5d..367c2de88d75b84c5a1c6b124d2418a880428dda 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -26,6 +26,8 @@ export { default as HiddenField } from './components/formFields/hidden' export { default as TabsField } from './components/formFields/tabs' export { default as MultipleTextField } from './components/formFields/multipleText' export { default as CustomField } from './components/formFields/custom' +export { default as CodeField } from './components/formFields/code' +export { default as DiffCodeField } from './components/formFields/diffCode' export { default as TextDisplay } from './components/formFields/text/display' export { default as LongTextDisplay } from './components/formFields/longtext/display' @@ -50,6 +52,7 @@ export { default as NumberRangeColumn } from './components/tableColumns/numberRa export { default as MultirowTextColumn } from './components/tableColumns/multirowText' export { default as DatetimeRangeColumn } from './components/tableColumns/datetimeRange' export { default as ImageColumn } from './components/tableColumns/image' +export { default as CustomColumn } from './components/tableColumns/custom' export { default as FetchStep } from './steps/fetch' export { default as DetailStep } from './steps/detail' diff --git a/src/steps/detail/index.tsx b/src/steps/detail/index.tsx index 3823d2869dfc9a18383d693538b62b33630040e4..ed3870f35b942856a7659a2e97d069e9233aa746 100644 --- a/src/steps/detail/index.tsx +++ b/src/steps/detail/index.tsx @@ -98,7 +98,6 @@ export interface IDetailItem { interface DetailState { ready: boolean detailValue: { [field: string]: any } - detailData: { status: 'normal' | 'error' | 'loading', message?: string, name: string }[] } /** @@ -123,8 +122,7 @@ export default class DetailStep extends Step { super(props) this.state = { ready: false, - detailValue: {}, - detailData: [] + detailValue: {} } } @@ -142,8 +140,6 @@ export default class DetailStep extends Step { onMount } = this.props - const detailData = cloneDeep(this.state.detailData) - if (this.props.config.defaultValue) { let detailDefault = ParamHelper(this.props.config.defaultValue, { data, step }) if (this.props.config.unstringify) { @@ -160,14 +156,12 @@ export default class DetailStep extends Step { const detailFieldConfig = detailFieldsConfig[detailFieldIndex] const value = getValue(detailDefault, detailFieldConfig.field) this.detailValue = setValue(this.detailValue, detailFieldConfig.field, value) - detailData[detailFieldIndex] = { status: 'normal', name: detailFieldConfig.label } } } await this.setState({ ready: true, - detailValue: this.detailValue, - detailData: cloneDeep(detailData) + detailValue: this.detailValue }) // 表单初始化结束，展示表单界面。 @@ -180,8 +174,6 @@ export default class DetailStep extends Step { } this.detailFieldsMounted[detailFieldIndex] = true - const detailData = cloneDeep(this.state.detailData) - if (this.detailFields[detailFieldIndex]) { const detailField = this.detailFields[detailFieldIndex] if (detailField) { @@ -190,20 +182,12 @@ export default class DetailStep extends Step { const value = getValue(this.detailValue, detailFieldConfig.field) this.detailValue = setValue(this.detailValue, detailFieldConfig.field, value) - const validation = await detailField.validate(value) - if (validation === true) { - detailData[detailFieldIndex] = { status: 'normal', name: detailFieldConfig.label } - } else { - // 首次进入错误提示; - detailData[detailFieldIndex] = { status: 'error', message: validation[0].message, name: detailFieldConfig.label } - } await detailField.didMount() } } await this.setState({ - detailValue: this.detailValue, - detailData: cloneDeep(detailData) + detailValue: this.detailValue }) } @@ -224,23 +208,13 @@ export default class DetailStep extends Step { * @param value 目标值 */ handleChange = async (detailFieldIndex: number, value: any) => { - const detailData = cloneDeep(this.state.detailData) - const detailField = this.detailFields[detailFieldIndex] const detailFieldConfig = (this.props.config.fields || [])[detailFieldIndex] if (detailField && detailFieldConfig) { this.detailValue = setValue(this.detailValue, detailFieldConfig.field, value) - const validation = await detailField.validate(value) - if (validation === true) { - detailData[detailFieldIndex] = { status: 'normal', name: detailFieldConfig.label } - } else { - detailData[detailFieldIndex] = { status: 'error', message: validation[0].message, name: detailFieldConfig.label } - } - await this.setState({ - detailValue: this.detailValue, - detailData + detailValue: this.detailValue }) if (this.props.onChange) { this.props.onChange(this.detailValue) @@ -248,10 +222,10 @@ export default class DetailStep extends Step { } } - handleValueSet = async (detailFieldIndex: number, path: string, value: any, validation: true | DetailFieldError[]) => { + handleValueSet = async (detailFieldIndex: number, path: string, value: any, options?: { noPathCombination?: true }) => { const detailFieldConfig = (this.props.config.fields || [])[detailFieldIndex] if (detailFieldConfig) { - const fullPath = detailFieldConfig.field === '' || path === '' ? `${detailFieldConfig.field}${path}` : `${detailFieldConfig.field}.${path}` + const fullPath = options && options.noPathCombination ? path : (detailFieldConfig.field === '' || path === '' ? `${detailFieldConfig.field}${path}` : `${detailFieldConfig.field}.${path}`) set(this.detailValue, fullPath, value) this.setState({ @@ -260,22 +234,13 @@ export default class DetailStep extends Step { if (this.props.onChange) { this.props.onChange(this.detailValue) } - - if (validation === true) { - this.detailData[detailFieldIndex] = { status: 'normal', name: detailFieldConfig.label, hidden: false } - } else { - this.detailData[detailFieldIndex] = { status: 'error', message: validation[0].message, name: detailFieldConfig.label, hidden: false } - } - await this.setState({ - detailData: this.detailData - }) } } - handleValueUnset = async (detailFieldIndex: number, path: string, validation: true | DetailFieldError[]) => { + handleValueUnset = async (detailFieldIndex: number, path: string, options?: { noPathCombination?: true }) => { const detailFieldConfig = (this.props.config.fields || [])[detailFieldIndex] if (detailFieldConfig) { - const fullPath = detailFieldConfig.field === '' || path === '' ? `${detailFieldConfig.field}${path}` : `${detailFieldConfig.field}.${path}` + const fullPath = options && options.noPathCombination ? path : (detailFieldConfig.field === '' || path === '' ? `${detailFieldConfig.field}${path}` : `${detailFieldConfig.field}.${path}`) unset(this.detailValue, fullPath) this.setState({ @@ -284,23 +249,13 @@ export default class DetailStep extends Step { if (this.props.onChange) { this.props.onChange(this.detailValue) } - - if (validation === true) { - this.detailData[detailFieldIndex] = { status: 'normal', name: detailFieldConfig.label, hidden: false } - } else { - this.detailData[detailFieldIndex] = { status: 'error', message: validation[0].message, name: detailFieldConfig.label, hidden: false } - } - - await this.setState({ - detailData: this.detailData - }) } } - handleValueListAppend = async (detailFieldIndex: number, path: string, value: any, validation: true | DetailFieldError[]) => { + handleValueListAppend = async (detailFieldIndex: number, path: string, value: any, options?: { noPathCombination?: true }) => { const detailFieldConfig = (this.props.config.fields || [])[detailFieldIndex] if (detailFieldConfig) { - const fullPath = detailFieldConfig.field === '' || path === '' ? `${detailFieldConfig.field}${path}` : `${detailFieldConfig.field}.${path}` + const fullPath = options && options.noPathCombination ? path : (detailFieldConfig.field === '' || path === '' ? `${detailFieldConfig.field}${path}` : `${detailFieldConfig.field}.${path}`) const list = get(this.detailValue, fullPath, []) list.push(value) @@ -311,23 +266,13 @@ export default class DetailStep extends Step { if (this.props.onChange) { this.props.onChange(this.detailValue) } - - if (validation === true) { - this.detailData[detailFieldIndex] = { status: 'normal', name: detailFieldConfig.label, hidden: false } - } else { - this.detailData[detailFieldIndex] = { status: 'error', message: validation[0].message, name: detailFieldConfig.label, hidden: false } - } - - await this.setState({ - detailData: this.detailData - }) } } - handleValueListSplice = async (detailFieldIndex: number, path: string, index: number, count: number, validation: true | DetailFieldError[]) => { + handleValueListSplice = async (detailFieldIndex: number, path: string, index: number, count: number, options?: { noPathCombination?: true }) => { const detailFieldConfig = (this.props.config.fields || [])[detailFieldIndex] if (detailFieldConfig) { - const fullPath = detailFieldConfig.field === '' || path === '' ? `${detailFieldConfig.field}${path}` : `${detailFieldConfig.field}.${path}` + const fullPath = options && options.noPathCombination ? path : (detailFieldConfig.field === '' || path === '' ? `${detailFieldConfig.field}${path}` : `${detailFieldConfig.field}.${path}`) const list = get(this.detailValue, fullPath, []) list.splice(index, count) @@ -338,16 +283,6 @@ export default class DetailStep extends Step { if (this.props.onChange) { this.props.onChange(this.detailValue) } - - if (validation === true) { - this.detailData[detailFieldIndex] = { status: 'normal', name: detailFieldConfig.label, hidden: false } - } else { - this.detailData[detailFieldIndex] = { status: 'error', message: validation[0].message, name: detailFieldConfig.label, hidden: false } - } - - await this.setState({ - detailData: this.detailData - }) } } @@ -389,8 +324,7 @@ export default class DetailStep extends Step { const { ready, - detailValue, - detailData + detailValue } = this.state if (ready) { @@ -399,8 +333,8 @@ export default class DetailStep extends Step { {/* 渲染表单 */} {this.renderComponent({ layout, + columns: config.columns?.enable ? config.columns : undefined, onBack: this.props.config.hiddenBack ? undefined : async () => this.handleCancel(), - columns: config.columns, backText: this.props.config?.backText?.replace(/(^\s*)|(\s*$)/g, ''), children: fields.map((detailFieldConfig, detailFieldIndex) => { if (!ConditionHelper(detailFieldConfig.condition, { record: detailValue, data, step })) { @@ -432,13 +366,15 @@ export default class DetailStep extends Step { label: detailFieldConfig.label, // status: detailFieldConfig.field !== undefined ? getValue(detailData, detailFieldConfig.field, {}).status || 'normal' : 'normal', // message: detailFieldConfig.field !== undefined ? getValue(detailData, detailFieldConfig.field, {}).message || '' : '', - columns: { - type: detailFieldConfig.columns?.type || config.columns?.type || 'span', - value: detailFieldConfig.columns?.value || config.columns?.value || 1, - wrap: detailFieldConfig.columns?.wrap || config.columns?.wrap || false, - gap: detailFieldConfig.columns?.gap || config.columns?.gap || 0, - rowGap: detailFieldConfig.columns?.rowGap || config.columns?.rowGap || 0 - }, + columns: config.columns?.enable + ? { + type: detailFieldConfig.columns?.type || config.columns?.type || 'span', + value: detailFieldConfig.columns?.value || config.columns?.value || 1, + wrap: detailFieldConfig.columns?.wrap || config.columns?.wrap || false, + gap: detailFieldConfig.columns?.gap || config.columns?.gap || 0, + rowGap: detailFieldConfig.columns?.rowGap || config.columns?.rowGap || 0 + } + : undefined, layout, styles: detailFieldConfig.styles || {}, visitable: display, @@ -460,10 +396,10 @@ export default class DetailStep extends Step { step={step} config={detailFieldConfig} onChange={async (value: any) => { await this.handleChange(detailFieldIndex, value) }} - onValueSet={async (path, value, validation) => await this.handleValueSet(detailFieldIndex, path, value, validation)} - onValueUnset={async (path, validation) => await this.handleValueUnset(detailFieldIndex, path, validation)} - onValueListAppend={async (path, value, validation) => await this.handleValueListAppend(detailFieldIndex, path, value, validation)} - onValueListSplice={async (path, index, count, validation) => await this.handleValueListSplice(detailFieldIndex, path, index, count, validation)} + onValueSet={async (path, value) => await this.handleValueSet(detailFieldIndex, path, value)} + onValueUnset={async (path) => await this.handleValueUnset(detailFieldIndex, path)} + onValueListAppend={async (path, value) => await this.handleValueListAppend(detailFieldIndex, path, value)} + onValueListSplice={async (path, index, count) => await this.handleValueListSplice(detailFieldIndex, path, index, count)} baseRoute={this.props.baseRoute} loadDomain={async (domain: string) => await this.props.loadDomain(domain)} /> diff --git a/src/steps/filter/index.tsx b/src/steps/filter/index.tsx index 3f1bd371a4ba70596afeb6743f0f862c83b924db..416914895eb198ea9cea042df296ab6a0be46cc1 100644 --- a/src/steps/filter/index.tsx +++ b/src/steps/filter/index.tsx @@ -278,10 +278,10 @@ export default class FilterStep extends Step { } } - handleValueSet = async (formFieldIndex: number, path: string, value: any, validation: true | FieldError[]) => { + handleValueSet = async (formFieldIndex: number, path: string, value: any, validation: true | FieldError[], options?: { noPathCombination?: true }) => { const formFieldConfig = (this.props.config.fields || [])[formFieldIndex] if (formFieldConfig) { - const fullPath = formFieldConfig.field === '' || path === '' ? `${formFieldConfig.field}${path}` : `${formFieldConfig.field}.${path}` + const fullPath = options && options.noPathCombination ? path : (formFieldConfig.field === '' || path === '' ? `${formFieldConfig.field}${path}` : `${formFieldConfig.field}.${path}`) set(this.formValue, fullPath, value) this.setState({ @@ -303,10 +303,10 @@ export default class FilterStep extends Step { } } - handleValueUnset = async (formFieldIndex: number, path: string, validation: true | FieldError[]) => { + handleValueUnset = async (formFieldIndex: number, path: string, validation: true | FieldError[], options?: { noPathCombination?: true }) => { const formFieldConfig = (this.props.config.fields || [])[formFieldIndex] if (formFieldConfig) { - const fullPath = formFieldConfig.field === '' || path === '' ? `${formFieldConfig.field}${path}` : `${formFieldConfig.field}.${path}` + const fullPath = options && options.noPathCombination ? path : (formFieldConfig.field === '' || path === '' ? `${formFieldConfig.field}${path}` : `${formFieldConfig.field}.${path}`) unset(this.formValue, fullPath) this.setState({ @@ -328,10 +328,10 @@ export default class FilterStep extends Step { } } - handleValueListAppend = async (formFieldIndex: number, path: string, value: any, validation: true | FieldError[]) => { + handleValueListAppend = async (formFieldIndex: number, path: string, value: any, validation: true | FieldError[], options?: { noPathCombination?: true }) => { const formFieldConfig = (this.props.config.fields || [])[formFieldIndex] if (formFieldConfig) { - const fullPath = formFieldConfig.field === '' || path === '' ? `${formFieldConfig.field}${path}` : `${formFieldConfig.field}.${path}` + const fullPath = options && options.noPathCombination ? path : (formFieldConfig.field === '' || path === '' ? `${formFieldConfig.field}${path}` : `${formFieldConfig.field}.${path}`) const list = get(this.formValue, fullPath, []) list.push(value) @@ -355,10 +355,10 @@ export default class FilterStep extends Step { } } - handleValueListSplice = async (formFieldIndex: number, path: string, index: number, count: number, validation: true | FieldError[]) => { + handleValueListSplice = async (formFieldIndex: number, path: string, index: number, count: number, validation: true | FieldError[], options?: { noPathCombination?: true }) => { const formFieldConfig = (this.props.config.fields || [])[formFieldIndex] if (formFieldConfig) { - const fullPath = formFieldConfig.field === '' || path === '' ? `${formFieldConfig.field}${path}` : `${formFieldConfig.field}.${path}` + const fullPath = options && options.noPathCombination ? path : (formFieldConfig.field === '' || path === '' ? `${formFieldConfig.field}${path}` : `${formFieldConfig.field}.${path}`) const list = get(this.formValue, fullPath, []) list.splice(index, count) @@ -381,10 +381,11 @@ export default class FilterStep extends Step { }) } } - handleValueListSort = async (formFieldIndex: number, path: string, index: number, sortType: 'up' | 'down', validation: true | FieldError[]) => { + + handleValueListSort = async (formFieldIndex: number, path: string, index: number, sortType: 'up' | 'down', validation: true | FieldError[], options?: { noPathCombination?: true }) => { const formFieldConfig = (this.props.config.fields || [])[formFieldIndex] if (formFieldConfig) { - const fullPath = formFieldConfig.field === '' || path === '' ? `${formFieldConfig.field}${path}` : `${formFieldConfig.field}.${path}` + const fullPath = options && options.noPathCombination ? path : (formFieldConfig.field === '' || path === '' ? `${formFieldConfig.field}${path}` : `${formFieldConfig.field}.${path}`) const list = listItemMove(get(this.formValue, fullPath, []), index, sortType) set(this.formValue, fullPath, list) @@ -500,11 +501,11 @@ export default class FilterStep extends Step { step={step} config={formFieldConfig} onChange={async (value: any) => { await this.handleChange(formFieldIndex, value) }} - onValueSet={async (path, value, validation) => await this.handleValueSet(formFieldIndex, path, value, validation)} - onValueUnset={async (path, validation) => await this.handleValueUnset(formFieldIndex, path, validation)} - onValueListAppend={async (path, value, validation) => await this.handleValueListAppend(formFieldIndex, path, value, validation)} - onValueListSplice={async (path, index, count, validation) => await this.handleValueListSplice(formFieldIndex, path, index, count, validation)} - onValueListSort={async (path, index, sortType, validation) => await this.handleValueListSort(formFieldIndex, path, index, sortType, validation)} + onValueSet={async (path, value, validation, options) => await this.handleValueSet(formFieldIndex, path, value, validation, options)} + onValueUnset={async (path, validation, options) => await this.handleValueUnset(formFieldIndex, path, validation, options)} + onValueListAppend={async (path, value, validation, options) => await this.handleValueListAppend(formFieldIndex, path, value, validation, options)} + onValueListSplice={async (path, index, count, validation, options) => await this.handleValueListSplice(formFieldIndex, path, index, count, validation, options)} + onValueListSort={async (path, index, sortType, validation, options) => await this.handleValueListSort(formFieldIndex, path, index, sortType, validation, options)} baseRoute={this.props.baseRoute} loadDomain={async (domain: string) => await this.props.loadDomain(domain)} /> diff --git a/src/steps/form/index.tsx b/src/steps/form/index.tsx index e021e8cfb413d99eb45384b751048d875cf570f5..5e91489ad7db095eefd745217b00ad7da71f680f 100644 --- a/src/steps/form/index.tsx +++ b/src/steps/form/index.tsx @@ -312,7 +312,7 @@ export default class FormStep extends Step { if (this.formFields[formFieldIndex]) { const formField = this.formFields[formFieldIndex] const formFieldConfig = (this.props.config.fields || [])[formFieldIndex] - if (formField && formFieldConfig) { + if (formField && formFieldConfig && !formFieldConfig.disabled) { const value = await formField.get() const validation = await formField.validate(value) if (validation !== true) { @@ -389,10 +389,10 @@ export default class FormStep extends Step { } } - handleValueSet = async (formFieldIndex: number, path: string, value: any, validation: true | FieldError[]) => { + handleValueSet = async (formFieldIndex: number, path: string, value: any, validation: true | FieldError[], options?: { noPathCombination?: true }) => { const formFieldConfig = (this.props.config.fields || [])[formFieldIndex] if (formFieldConfig) { - const fullPath = formFieldConfig.field === '' || path === '' ? `${formFieldConfig.field}${path}` : `${formFieldConfig.field}.${path}` + const fullPath = options && options.noPathCombination ? path : (formFieldConfig.field === '' || path === '' ? `${formFieldConfig.field}${path}` : `${formFieldConfig.field}.${path}`) set(this.formValue, fullPath, value) this.setState({ @@ -416,10 +416,10 @@ export default class FormStep extends Step { } } - handleValueUnset = async (formFieldIndex: number, path: string, validation: true | FieldError[]) => { + handleValueUnset = async (formFieldIndex: number, path: string, validation: true | FieldError[], options?: { noPathCombination?: true }) => { const formFieldConfig = (this.props.config.fields || [])[formFieldIndex] if (formFieldConfig) { - const fullPath = formFieldConfig.field === '' || path === '' ? `${formFieldConfig.field}${path}` : `${formFieldConfig.field}.${path}` + const fullPath = options && options.noPathCombination ? path : (formFieldConfig.field === '' || path === '' ? `${formFieldConfig.field}${path}` : `${formFieldConfig.field}.${path}`) unset(this.formValue, fullPath) this.setState({ @@ -441,10 +441,10 @@ export default class FormStep extends Step { } } - handleValueListAppend = async (formFieldIndex: number, path: string, value: any, validation: true | FieldError[]) => { + handleValueListAppend = async (formFieldIndex: number, path: string, value: any, validation: true | FieldError[], options?: { noPathCombination?: true }) => { const formFieldConfig = (this.props.config.fields || [])[formFieldIndex] if (formFieldConfig) { - const fullPath = formFieldConfig.field === '' || path === '' ? `${formFieldConfig.field}${path}` : `${formFieldConfig.field}.${path}` + const fullPath = options && options.noPathCombination ? path : (formFieldConfig.field === '' || path === '' ? `${formFieldConfig.field}${path}` : `${formFieldConfig.field}.${path}`) let list = get(this.formValue, fullPath, []) if (!Array.isArray(list)) list = [] @@ -469,10 +469,10 @@ export default class FormStep extends Step { } } - handleValueListSplice = async (formFieldIndex: number, path: string, index: number, count: number, validation: true | FieldError[]) => { + handleValueListSplice = async (formFieldIndex: number, path: string, index: number, count: number, validation: true | FieldError[], options?: { noPathCombination?: true }) => { const formFieldConfig = (this.props.config.fields || [])[formFieldIndex] if (formFieldConfig) { - const fullPath = formFieldConfig.field === '' || path === '' ? `${formFieldConfig.field}${path}` : `${formFieldConfig.field}.${path}` + const fullPath = options && options.noPathCombination ? path : (formFieldConfig.field === '' || path === '' ? `${formFieldConfig.field}${path}` : `${formFieldConfig.field}.${path}`) const list = get(this.formValue, fullPath, []) list.splice(index, count) @@ -496,10 +496,10 @@ export default class FormStep extends Step { } } - handleValueListSort = async (formFieldIndex: number, path: string, index: number, sortType: 'up' | 'down', validation: true | FieldError[]) => { + handleValueListSort = async (formFieldIndex: number, path: string, index: number, sortType: 'up' | 'down', validation: true | FieldError[], options?: { noPathCombination?: true }) => { const formFieldConfig = (this.props.config.fields || [])[formFieldIndex] if (formFieldConfig) { - const fullPath = formFieldConfig.field === '' || path === '' ? `${formFieldConfig.field}${path}` : `${formFieldConfig.field}.${path}` + const fullPath = options && options.noPathCombination ? path : (formFieldConfig.field === '' || path === '' ? `${formFieldConfig.field}${path}` : `${formFieldConfig.field}.${path}`) const list = listItemMove(get(this.formValue, fullPath, []), index, sortType) set(this.formValue, fullPath, list) @@ -725,11 +725,11 @@ export default class FormStep extends Step { step={step} config={formFieldConfig} onChange={async (value: any) => { await this.handleChange(formFieldIndex, value) }} - onValueSet={async (path, value, validation) => await this.handleValueSet(formFieldIndex, path, value, validation)} - onValueUnset={async (path, validation) => await this.handleValueUnset(formFieldIndex, path, validation)} - onValueListAppend={async (path, value, validation) => await this.handleValueListAppend(formFieldIndex, path, value, validation)} - onValueListSplice={async (path, index, count, validation) => await this.handleValueListSplice(formFieldIndex, path, index, count, validation)} - onValueListSort={async (path, index, sortType, validation) => await this.handleValueListSort(formFieldIndex, path, index, sortType, validation)} + onValueSet={async (path, value, validation, options) => await this.handleValueSet(formFieldIndex, path, value, validation, options)} + onValueUnset={async (path, validation, options) => await this.handleValueUnset(formFieldIndex, path, validation, options)} + onValueListAppend={async (path, value, validation, options) => await this.handleValueListAppend(formFieldIndex, path, value, validation, options)} + onValueListSplice={async (path, index, count, validation, options) => await this.handleValueListSplice(formFieldIndex, path, index, count, validation, options)} + onValueListSort={async (path, index, sortType, validation, options) => await this.handleValueListSort(formFieldIndex, path, index, sortType, validation, options)} baseRoute={this.props.baseRoute} loadDomain={async (domain: string) => await this.props.loadDomain(domain)} /> diff --git a/src/steps/table/index.tsx b/src/steps/table/index.tsx index 0dad9a458e24a8f4e0bc219c7b3cd8d9d57f790e..e910a431d1175cbff2309514bfc6d3b10ba96456 100644 --- a/src/steps/table/index.tsx +++ b/src/steps/table/index.tsx @@ -2,6 +2,7 @@ import React from 'react' import queryString from 'query-string' import { getParam, getParamText, getValue } from '../../util/value' import getALLComponents, { ColumnConfigs } from '../../components/tableColumns' +import Column from '../../components/tableColumns/common' import Step, { StepConfig, StepProps } from '../common' import { ParamConfig } from '../../interface' import ColumnStyleComponent from './common/columnStyle' @@ -245,7 +246,7 @@ interface TableState { */ export default class TableStep extends Step { CCMS = CCMS - getALLComponents = (type: any) => getALLComponents[type] + getALLComponents = (type: any): typeof Column => getALLComponents[type] interfaceHelper = new InterfaceHelper() /** * 页面权限获取状态 @@ -554,11 +555,15 @@ export default class TableStep extends Step { const addfix = ['multirowText'].some((val) => val !== column.field) return {}} record={record} value={value} data={data} step={step} config={column} + column={this} + baseRoute={this.props.baseRoute} + loadDomain={async (domain: string) => await this.props.loadDomain(domain)} /> }