From 391a21aee608e5aef2bc347d16d1b80653bd44f3 Mon Sep 17 00:00:00 2001 From: cuiwenlong7 Date: Thu, 25 Nov 2021 18:11:59 +0800 Subject: [PATCH 1/3] =?UTF-8?q?feat:=20=E8=A1=A8=E5=8D=95=E6=AD=A5?= =?UTF-8?q?=E9=AA=A4=E8=A1=A8=E5=8D=95=E6=8C=89=E9=92=AE=E8=87=AA=E5=AE=9A?= =?UTF-8?q?=E4=B9=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/steps/form/index.tsx | 86 +++++++++++++++++++++++++++++++--------- 1 file changed, 68 insertions(+), 18 deletions(-) diff --git a/src/steps/form/index.tsx b/src/steps/form/index.tsx index f9bf976..a9d2931 100644 --- a/src/steps/form/index.tsx +++ b/src/steps/form/index.tsx @@ -24,6 +24,25 @@ import StatementHelper, { StatementConfig } from '../../util/statement' * - validations: 全局校验 * * - condition: （全局校验子项中）校验条件 * * - message: 校验失败提示文本 + * - actions: 表单按钮列表 + * - * - type: 按钮操作类型 + * - * - * - submit: 提交 + * - * - * - cancel: 取消 + * - * - * - ccms: 自定义（搭建页面） + * - * - label: 按钮文案 + * - * - mode: 按钮形式 + * - * - * - normal: 普通按钮 + * - * - * - primary: 主按钮 + * - * - * - link: 链接 + * - * - condition: 展示条件 + * - * - page: 自定义操作 - 目标页面 + * - * - data: 自定义操作 - 参数 + * - * - callback: 自定义操作 - 回调 + * - * - * - type: 回调操作类型 + * - * - * - * - none: 无操作 + * - * - * - * - submit: 提交表单 + * - * - * - * - cancel: 取消表单 + * - * - fields: 表单项配置列表 */ export interface FormConfig extends StepConfig { type: 'form' @@ -34,24 +53,38 @@ export interface FormConfig extends StepConfig { */ fields?: FieldConfigs[], defaultValue?: ParamConfig, - hiddenSubmit?: boolean // 是否隐藏提交按钮 - hiddenCancel?: boolean // 是否隐藏取消按钮 - submitText?: string // 自定义确认按钮文本 - cancelText?: string // 自定义取消按钮文本 validations?: Array<{ condition?: ConditionConfig message?: StatementConfig }> - stringify?: string[] // 序列化字段 -} + actions: Array< + { + 'type': string, + 'label': string, + 'mode': string, + condition?: ConditionConfig + page?: any + data?: { + [key: string]: ParamConfig + } + callback?: { + type: string + } + }> | [] +stringify?: string[] // 序列化字段 +hiddenSubmit?: boolean // 是否隐藏提交按钮 TODO 待删除 +hiddenCancel?: boolean // 是否隐藏取消按钮 TODO 待删除 +submitText?: string // 自定义确认按钮文本 TODO 待删除 +cancelText?: string // 自定义取消按钮文本 TODO 待删除 +} /** * 全局校验 modal组件 - 入参格式 * message: 提示文案 */ -export interface IFormStepModal { + export interface IFormStepModal { message: string -} + } /** * 表单步骤组件 - UI渲染方法 - 入参格式 @@ -65,9 +98,16 @@ export interface IFormStepModal { */ export interface IForm { layout: 'horizontal' | 'vertical' | 'inline' + actions: Array< + { + 'label': string, + 'mode': string, + onClick: () => void + } + > + children: React.ReactNode[] onSubmit?: () => Promise onCancel?: () => Promise - children: React.ReactNode[] submitText?: string // 自定义确认按钮文本 cancelText?: string // 自定义取消按钮文本 } @@ -434,6 +474,8 @@ export default class FormStep extends Step { } } + handleButtonOperation = async () => {} + /** * 表单步骤组件 - UI渲染方法 * 各UI库需重写该方法 @@ -470,11 +512,12 @@ export default class FormStep extends Step { render() { const { data, - step - // config: { - // layout = 'horizontal', - // fields = [] - // } + step, + config: { + // layout = 'horizontal', + // fields = [] + actions + } } = this.props const layout = this.props.config?.layout || 'horizontal' @@ -492,10 +535,17 @@ export default class FormStep extends Step { {/* 渲染表单 */} {this.renderComponent({ layout, - onSubmit: this.props.config.hiddenSubmit ? undefined : async () => this.handleSubmit(), - onCancel: this.props.config.hiddenCancel ? undefined : async () => this.handleCancel(), - submitText: this.props.config?.submitText?.replace(/(^\s*)|(\s*$)/g, ""), - cancelText: this.props.config?.cancelText?.replace(/(^\s*)|(\s*$)/g, ""), + actions: actions + ? actions.map(action => ({ + label: action.label, + mode: action.mode, + onClick: async () => { this.handleButtonOperation } + })) + : [], + onSubmit: this.props.config.hiddenSubmit ? undefined : async () => this.handleSubmit(), // TODO 待删除 + onCancel: this.props.config.hiddenCancel ? undefined : async () => this.handleCancel(), // TODO 待删除 + submitText: this.props.config?.submitText?.replace(/(^\s*)|(\s*$)/g, ""), // TODO 待删除 + cancelText: this.props.config?.cancelText?.replace(/(^\s*)|(\s*$)/g, ""), // TODO 待删除 children: fields.map((formFieldConfig, formFieldIndex) => { if (!ConditionHelper(formFieldConfig.condition, { record: formValue, data, step })) { return null -- Gitee From 0214ab2e63332533ead4d82d39f8ecb236fcd423 Mon Sep 17 00:00:00 2001 From: cuiwenlong7 Date: Mon, 29 Nov 2021 19:38:59 +0800 Subject: [PATCH 2/3] =?UTF-8?q?feat:=20=E8=A1=A8=E5=8D=95=E6=AD=A5?= =?UTF-8?q?=E9=AA=A4=E6=8C=89=E9=92=AE=E8=87=AA=E5=AE=9A=E4=B9=89actions?= =?UTF-8?q?=E9=85=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/steps/form/index.tsx | 159 ++++++++++++++++++++++++++------------- 1 file changed, 105 insertions(+), 54 deletions(-) diff --git a/src/steps/form/index.tsx b/src/steps/form/index.tsx index a9d2931..b5ba158 100644 --- a/src/steps/form/index.tsx +++ b/src/steps/form/index.tsx @@ -8,6 +8,7 @@ import ParamHelper from '../../util/param' import { cloneDeep, get, set, unset } from 'lodash' import ConditionHelper, { ConditionConfig } from '../../util/condition' import StatementHelper, { StatementConfig } from '../../util/statement' +import OperationHelper, { OperationConfig } from '../../util/operation' /** * 表单步骤配置文件格式定义 @@ -22,27 +23,9 @@ import StatementHelper, { StatementConfig } from '../../util/statement' * - submitText: 自定义确认按钮文本 * - cancelText: 自定义取消按钮文本 * - validations: 全局校验 - * * - condition: （全局校验子项中）校验条件 - * * - message: 校验失败提示文本 - * - actions: 表单按钮列表 - * - * - type: 按钮操作类型 - * - * - * - submit: 提交 - * - * - * - cancel: 取消 - * - * - * - ccms: 自定义（搭建页面） - * - * - label: 按钮文案 - * - * - mode: 按钮形式 - * - * - * - normal: 普通按钮 - * - * - * - primary: 主按钮 - * - * - * - link: 链接 - * - * - condition: 展示条件 - * - * - page: 自定义操作 - 目标页面 - * - * - data: 自定义操作 - 参数 - * - * - callback: 自定义操作 - 回调 - * - * - * - type: 回调操作类型 - * - * - * - * - none: 无操作 - * - * - * - * - submit: 提交表单 - * - * - * - * - cancel: 取消表单 - * - * - fields: 表单项配置列表 + * - * - condition: （全局校验子项中）校验条件 + * - * - message: 校验失败提示文本 + * - actions: 表单步骤按钮列表 */ export interface FormConfig extends StepConfig { type: 'form' @@ -57,20 +40,7 @@ export interface FormConfig extends StepConfig { condition?: ConditionConfig message?: StatementConfig }> - actions: Array< - { - 'type': string, - 'label': string, - 'mode': string, - condition?: ConditionConfig - page?: any - data?: { - [key: string]: ParamConfig - } - callback?: { - type: string - } - }> | [] + actions: Array | [] stringify?: string[] // 序列化字段 hiddenSubmit?: boolean // 是否隐藏提交按钮 TODO 待删除 hiddenCancel?: boolean // 是否隐藏取消按钮 TODO 待删除 @@ -78,6 +48,37 @@ submitText?: string // 自定义确认按钮文本 TODO 待删除 cancelText?: string // 自定义取消按钮文本 TODO 待删除 } + + +/** + * 表单步骤按钮列表按钮项配置 + * - type: 按钮操作类型 + * - * - submit: 提交 + * - * - cancel: 取消 + * - * - ccms: 自定义（搭建页面） + * - label: 按钮文案 + * - mode: 按钮形式 + * - * - normal: 普通按钮 + * - * - primary: 主按钮 + * - * - link: 链接 + * - condition: 展示条件 + * - callback: 自定义操作 - 回调 + * - * - type: 回调操作类型 + * - * - * - none: 无操作 + * - * - * - submit: 提交表单 + * - * - * - cancel: 取消表单 + */ + export interface ActionConfig { + type: 'submit' | 'cancel' | 'ccms', + label: string, + mode: 'normal' | 'primary' | 'link', + condition?: ConditionConfig + handle?: OperationConfig + callback?: { + type: 'none' | 'submit' | 'cancel' + } + } + /** * 全局校验 modal组件 - 入参格式 * message: 提示文案 @@ -98,13 +99,7 @@ cancelText?: string // 自定义取消按钮文本 TODO 待删除 */ export interface IForm { layout: 'horizontal' | 'vertical' | 'inline' - actions: Array< - { - 'label': string, - 'mode': string, - onClick: () => void - } - > + actions?: React.ReactNode[] children: React.ReactNode[] onSubmit?: () => Promise onCancel?: () => Promise @@ -112,6 +107,19 @@ export interface IForm { cancelText?: string // 自定义取消按钮文本 } + +/** + * 表单步骤按钮config + * - label: 按钮文案 + * - type: 按钮形式 + * - onClick: 按钮操作 + */ + export interface IButtonProps { + label: string + mode: 'normal' | 'primary' | 'link' + onClick: () => void +} + /** * 表单项容器组件 - UI渲染方法 - 入参格式 * - key: react需要的unique key @@ -156,6 +164,7 @@ interface FormState { export default class FormStep extends Step { // 各表单项对应的类型所使用的UI组件的类 getALLComponents = (type: any): typeof Field => getALLComponents[type] + OperationHelper = OperationHelper // 各表单项所使用的UI组件的实例 formFields: Array | null> = [] @@ -473,9 +482,17 @@ export default class FormStep extends Step { }) } } - - handleButtonOperation = async () => {} - +/** + * 处理表单步骤按钮列表按钮项回调 + * @param action 按钮项配置 + */ + handleCallback = async (action: ActionConfig) => { + const callbackType = action.callback?.type + if (callbackType) { + if (callbackType === 'submit') { this.handleSubmit() } + else if (callbackType === 'cancel') { this.handleCancel() } + } + } /** * 表单步骤组件 - UI渲染方法 * 各UI库需重写该方法 @@ -486,6 +503,15 @@ export default class FormStep extends Step { 您当前使用的UI版本没有实现Form组件。 } +/** + * 表单步骤按钮项button组件 + * @param props + */ + renderButtonComponent = (props: IButtonProps) => { + return + 您当前使用的UI版本没有实现FormButton组件。 + + } /** * 表单项组件 - UI渲染方法 @@ -529,21 +555,46 @@ export default class FormStep extends Step { formData } = this.state + let actions_ + if (Object.prototype.toString.call(actions) === '[object Array]') { + actions_ = [] + for (let index=0,len =actions.length; index < len; index++) { + if (!ConditionHelper(actions[index].condition, { record: formValue, data, step })) { + continue + } + const OperationHelperWrapper = { await this.handleCallback(actions[index])}} + > + {(onClick) => ( + this.renderButtonComponent({ + label: actions[index].label || '', + mode: actions[index].mode, + onClick + }) + )} + + actions_.push(OperationHelperWrapper) + } + } + if (ready) { return ( {/* 渲染表单 */} {this.renderComponent({ layout, - actions: actions - ? actions.map(action => ({ - label: action.label, - mode: action.mode, - onClick: async () => { this.handleButtonOperation } - })) - : [], - onSubmit: this.props.config.hiddenSubmit ? undefined : async () => this.handleSubmit(), // TODO 待删除 - onCancel: this.props.config.hiddenCancel ? undefined : async () => this.handleCancel(), // TODO 待删除 + actions: actions_, + onSubmit: async () => this.handleSubmit(), // TODO 待删除 + onCancel: async () => this.handleCancel(), // TODO 待删除 submitText: this.props.config?.submitText?.replace(/(^\s*)|(\s*$)/g, ""), // TODO 待删除 cancelText: this.props.config?.cancelText?.replace(/(^\s*)|(\s*$)/g, ""), // TODO 待删除 children: fields.map((formFieldConfig, formFieldIndex) => { -- Gitee From 768166a3a3048c4e0cdfcb457057b5484fa17992 Mon Sep 17 00:00:00 2001 From: niuxiaoguang Date: Wed, 1 Dec 2021 10:39:02 +0800 Subject: [PATCH 3/3] =?UTF-8?q?feat:=20=E6=A0=BC=E5=BC=8F=E5=8C=96?= =?UTF-8?q?=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/steps/form/index.tsx | 117 +++++++++++++++++++-------------------- 1 file changed, 58 insertions(+), 59 deletions(-) diff --git a/src/steps/form/index.tsx b/src/steps/form/index.tsx index b5ba158..b1308dc 100644 --- a/src/steps/form/index.tsx +++ b/src/steps/form/index.tsx @@ -41,12 +41,11 @@ export interface FormConfig extends StepConfig { message?: StatementConfig }> actions: Array | [] -stringify?: string[] // 序列化字段 -hiddenSubmit?: boolean // 是否隐藏提交按钮 TODO 待删除 -hiddenCancel?: boolean // 是否隐藏取消按钮 TODO 待删除 -submitText?: string // 自定义确认按钮文本 TODO 待删除 -cancelText?: string // 自定义取消按钮文本 TODO 待删除 - + stringify?: string[] // 序列化字段 + hiddenSubmit?: boolean // 是否隐藏提交按钮 TODO 待删除 + hiddenCancel?: boolean // 是否隐藏取消按钮 TODO 待删除 + submitText?: string // 自定义确认按钮文本 TODO 待删除 + cancelText?: string // 自定义取消按钮文本 TODO 待删除 } @@ -68,24 +67,24 @@ cancelText?: string // 自定义取消按钮文本 TODO 待删除 * - * - * - submit: 提交表单 * - * - * - cancel: 取消表单 */ - export interface ActionConfig { - type: 'submit' | 'cancel' | 'ccms', - label: string, - mode: 'normal' | 'primary' | 'link', - condition?: ConditionConfig - handle?: OperationConfig - callback?: { - type: 'none' | 'submit' | 'cancel' - } - } +export interface ActionConfig { + type: 'submit' | 'cancel' | 'ccms', + label: string, + mode: 'normal' | 'primary' | 'link', + condition?: ConditionConfig + handle?: OperationConfig + callback?: { + type: 'none' | 'submit' | 'cancel' + } +} /** * 全局校验 modal组件 - 入参格式 * message: 提示文案 */ - export interface IFormStepModal { +export interface IFormStepModal { message: string - } +} /** * 表单步骤组件 - UI渲染方法 - 入参格式 @@ -114,7 +113,7 @@ export interface IForm { * - type: 按钮形式 * - onClick: 按钮操作 */ - export interface IButtonProps { +export interface IButtonProps { label: string mode: 'normal' | 'primary' | 'link' onClick: () => void @@ -263,13 +262,13 @@ export default class FormStep extends Step { handleSubmit = async () => { let data: any = {} let canSubmit = true - + if (this.props.config.validations) { for (const validation of this.props.config.validations) { if (!ConditionHelper(validation.condition, { record: this.state.formValue, data: this.props.data, step: this.props.step })) { canSubmit = false const message = StatementHelper(validation.message, { record: this.state.formValue, data: this.props.data, step: this.props.step }) || '未填写失败文案或失败文案配置异常' - this.renderModalComponent({message}) + this.renderModalComponent({ message }) return null } } @@ -482,16 +481,16 @@ export default class FormStep extends Step { }) } } -/** - * 处理表单步骤按钮列表按钮项回调 - * @param action 按钮项配置 - */ + /** + * 处理表单步骤按钮列表按钮项回调 + * @param action 按钮项配置 + */ handleCallback = async (action: ActionConfig) => { - const callbackType = action.callback?.type - if (callbackType) { - if (callbackType === 'submit') { this.handleSubmit() } - else if (callbackType === 'cancel') { this.handleCancel() } - } + const callbackType = action.callback?.type + if (callbackType) { + if (callbackType === 'submit') { this.handleSubmit() } + else if (callbackType === 'cancel') { this.handleCancel() } + } } /** * 表单步骤组件 - UI渲染方法 @@ -503,10 +502,10 @@ export default class FormStep extends Step { 您当前使用的UI版本没有实现Form组件。 } -/** - * 表单步骤按钮项button组件 - * @param props - */ + /** + * 表单步骤按钮项button组件 + * @param props + */ renderButtonComponent = (props: IButtonProps) => { return 您当前使用的UI版本没有实现FormButton组件。 @@ -529,9 +528,9 @@ export default class FormStep extends Step { * 各UI库需重写该方法 * @param props */ - renderModalComponent= (props: IFormStepModal) => { + renderModalComponent = (props: IFormStepModal) => { return new Promise((resolve) => { - resolve(null) + resolve(null) }) } @@ -554,34 +553,34 @@ export default class FormStep extends Step { formValue, formData } = this.state - + let actions_ if (Object.prototype.toString.call(actions) === '[object Array]') { actions_ = [] - for (let index=0,len =actions.length; index < len; index++) { + for (let index = 0, len = actions.length; index < len; index++) { if (!ConditionHelper(actions[index].condition, { record: formValue, data, step })) { continue } const OperationHelperWrapper = { await this.handleCallback(actions[index])}} - > - {(onClick) => ( - this.renderButtonComponent({ - label: actions[index].label || '', - mode: actions[index].mode, - onClick - }) - )} - + key={index} + config={actions[index].handle} + datas={{ record: formValue, data: this.props.data, step: this.props.step }} + checkPageAuth={this.props.checkPageAuth} + loadPageURL={this.props.loadPageURL} + loadPageFrameURL={this.props.loadPageFrameURL} + loadPageConfig={this.props.loadPageConfig} + baseRoute={this.props.baseRoute} + loadDomain={this.props.loadDomain} + callback={async () => { await this.handleCallback(actions[index]) }} + > + {(onClick) => ( + this.renderButtonComponent({ + label: actions[index].label || '', + mode: actions[index].mode, + onClick + }) + )} + actions_.push(OperationHelperWrapper) } } @@ -593,8 +592,8 @@ export default class FormStep extends Step { {this.renderComponent({ layout, actions: actions_, - onSubmit: async () => this.handleSubmit(), // TODO 待删除 - onCancel: async () => this.handleCancel(), // TODO 待删除 + onSubmit: this.props.config.hiddenSubmit ? undefined : async () => this.handleSubmit(), // TODO 待删除 + onCancel: this.props.config.hiddenCancel ? undefined : async () => this.handleCancel(), // TODO 待删除 submitText: this.props.config?.submitText?.replace(/(^\s*)|(\s*$)/g, ""), // TODO 待删除 cancelText: this.props.config?.cancelText?.replace(/(^\s*)|(\s*$)/g, ""), // TODO 待删除 children: fields.map((formFieldConfig, formFieldIndex) => { -- Gitee