diff --git a/src/components/formFields/code/index.tsx b/src/components/formFields/code/index.tsx index 09d8f2756346807bd594a43e2d3f66f7533b7bd3..17a0087135cc7d7b73bc935239ec63156b2ee25f 100644 --- a/src/components/formFields/code/index.tsx +++ b/src/components/formFields/code/index.tsx @@ -8,6 +8,10 @@ import { getBoolean } from '../../../util/value' * - height: 代码编辑器高度 * - theme: 编辑器主题风格 * - fullScreen: 是否支持全屏 + * - maxLength: 最大字符长度 + * - minLength: 最小字符长度 + * - cjkLength: 中文占字符数 + * - regExp: 正则校验配置 */ export interface CodeFieldConfig extends FieldConfig { type: 'code' @@ -15,6 +19,10 @@ export interface CodeFieldConfig extends FieldConfig { height: number theme: 'white' | 'black' fullScreen: boolean + maxLength?: number + minLength?: number + cjkLength?: number + regExp?: { expression: string, message?: string } } export interface ICodeField { @@ -61,7 +69,11 @@ export default class CodeField extends Field= 0 && valueMaxLength.length > maxLength) { + errors.push(new FieldError(`最长可输入${maxLength}个字符。`)) + } + } + + if (minLength !== undefined) { + let valueMinLength = value + if (cjkLength !== undefined) { + let valueMinCJKLength = '' + for (let valueMinCJKIndex = 0; valueMinCJKIndex < cjkLength; valueMinCJKIndex++) { + valueMinCJKLength += '*' + } + valueMinLength = valueMinLength.replace(/[\u4e00-\u9fa5]/g, valueMinCJKLength) + } + if (valueMinLength && minLength >= 0 && valueMinLength.length < minLength) { + errors.push(new FieldError(`最短需输入${minLength}个字符。`)) + } + } + + if (regExp !== undefined) { + if (!(new RegExp(regExp.expression)).test(value)) { + if (regExp.message) { + errors.push(new FieldError(regExp.message)) + } else { + errors.push(new FieldError('格式错误')) + } + } + } return errors.length ? errors : true } diff --git a/src/components/formFields/common.tsx b/src/components/formFields/common.tsx index 3bc88d361158dc56e79381a519e1ef4936722f45..7cb767bd07822f7af0775dfd369928852baafb20 100644 --- a/src/components/formFields/common.tsx +++ b/src/components/formFields/common.tsx @@ -1,11 +1,12 @@ import React from 'react' +import marked from 'marked' import { ColumnsConfig, ParamConfig } from '../../interface' import { FieldConfigs as getFieldConfigs } from './' import ParamHelper from '../../util/param' import { updateCommonPrefixItem } from '../../util/value' import { ConditionConfig } from '../../util/condition' -import { StatementConfig } from '../../util/statement' +import StatementHelper, { StatementConfig} from '../../util/statement' import { PageListItem } from '../../main' import { isEqual, get } from 'lodash' @@ -37,6 +38,11 @@ export interface FieldConfig { disabled?: boolean display?: 'none' defaultValue?: ParamConfig, + subLabelConfig?: { + enable: boolean + mode: 'plain' | 'markdown' | 'html' + content: StatementConfig + } condition?: ConditionConfig extra?: StatementConfig columns?: ColumnsConfig @@ -174,6 +180,27 @@ export class Field extends React.Component< didMount: () => Promise = async () => { } + /** + * 根据mode不同,处理subLabel内容 + * @param config 子项config + * @returns + */ + + handleSubLabelContent (config) { + if (config?.subLabelConfig?.enable) { + const content = StatementHelper({ statement: config.subLabelConfig?.content?.statement || '', params: config.subLabelConfig?.content?.params || [] }, { data: this.props.data, step: this.props.step }).replace(/(^\s*)|(\s*$)/g, '') + const mode = config.subLabelConfig?.mode + switch (mode) { + case 'markdown': + return
+ case 'html': + return
+ } + return
{content}
+ } + return undefined + } + /** * 上报param依赖字段名称 * @param field diff --git a/src/components/formFields/form/index.tsx b/src/components/formFields/form/index.tsx index f5c0f57d2e7b0b2f7b0a219cfc451f0fbfaf6cff..25a229f95cfb7379351fcae47dc86e23c576c495 100644 --- a/src/components/formFields/form/index.tsx +++ b/src/components/formFields/form/index.tsx @@ -45,6 +45,7 @@ export interface IFormFieldItem { export interface IFormFieldItemField { index: number label: string + subLabel?: React.ReactNode required: boolean status: 'normal' | 'error' | 'loading' description?: string @@ -488,6 +489,7 @@ export default class FormField extends Field extends Field extends React.Component< } }; + +/** + * 步骤 根据mode不同,处理subLabel内容\ + * @param config 子项config + * @returns + */ + + handleSubLabelContent (config) { + if (config?.subLabelConfig?.enable) { + const content = StatementHelper({ statement: config.subLabelConfig?.content?.statement || '', params: config.subLabelConfig?.content?.params || [] }, { data: this.props.data, step: this.props.step }).replace(/(^\s*)|(\s*$)/g, '') + const mode = config.subLabelConfig?.mode + switch (mode) { + case 'markdown': + return
+ case 'html': + return
+ } + return
{content}
+ } + return undefined + } + stepPush = () => { this.props.onMount() } diff --git a/src/steps/form/index.tsx b/src/steps/form/index.tsx index cd077f19bf51e281df6548f347ab3b12cf7d3578..1685d1159d5381a8b85f963849388bbad69918ba 100644 --- a/src/steps/form/index.tsx +++ b/src/steps/form/index.tsx @@ -154,6 +154,7 @@ export interface IButtonProps { export interface IFormItem { key: string | number, label: string, + subLabel?: React.ReactNode status: 'normal' | 'error' | 'loading' required: boolean description?: string @@ -699,6 +700,7 @@ export default class FormStep extends Step { // ts对clas const renderData = { key: formFieldIndex, label: formFieldConfig.label, + subLabel: this.handleSubLabelContent(formFieldConfig), columns: columns?.enable ? { type: formFieldConfig.columns?.type || columns?.type || 'span',