diff --git a/docs/src/components/common-ui/vben-form.md b/docs/src/components/common-ui/vben-form.md index 0ed02384..48772bfa 100644 --- a/docs/src/components/common-ui/vben-form.md +++ b/docs/src/components/common-ui/vben-form.md @@ -473,6 +473,8 @@ export interface FormSchema< fieldName: string; /** 帮助信息 */ help?: CustomRenderType; + /** 是否隐藏表单项 */ + hide?: boolean; /** 表单的标签(如果是一个string,会用于默认必选规则的消息提示) */ label?: CustomRenderType; /** 自定义组件内部渲染 */ diff --git a/packages/@core/ui-kit/form-ui/src/form-api.ts b/packages/@core/ui-kit/form-ui/src/form-api.ts index ef970e0e..1c4a7600 100644 --- a/packages/@core/ui-kit/form-ui/src/form-api.ts +++ b/packages/@core/ui-kit/form-ui/src/form-api.ts @@ -360,7 +360,6 @@ export class FormApi { return true; }); const filteredFields = fieldMergeFn(fields, form.values); - this.handleStringToArrayFields(filteredFields); form.setValues(filteredFields, shouldValidate); } @@ -370,7 +369,6 @@ export class FormApi { const form = await this.getForm(); await form.submitForm(); const rawValues = toRaw(await this.getValues()); - this.handleArrayToStringFields(rawValues); await this.state?.handleSubmit?.(rawValues); return rawValues; @@ -470,16 +468,31 @@ export class FormApi { return this.form; } - private handleArrayToStringFields = (originValues: Record) => { + private handleMultiFields = (originValues: Record) => { const arrayToStringFields = this.state?.arrayToStringFields; if (!arrayToStringFields || !Array.isArray(arrayToStringFields)) { return; } const processFields = (fields: string[], separator: string = ',') => { - this.processFields(fields, separator, originValues, (value, sep) => - Array.isArray(value) ? value.join(sep) : value, - ); + this.processFields(fields, separator, originValues, (value, sep) => { + if (Array.isArray(value)) { + return value.join(sep); + } else if (typeof value === 'string') { + // 处理空字符串的情况 + if (value === '') { + return []; + } + // 处理复杂分隔符的情况 + const escapedSeparator = sep.replaceAll( + /[.*+?^${}()|[\]\\]/g, + String.raw`\$&`, + ); + return value.split(new RegExp(escapedSeparator)); + } else { + return value; + } + }); }; // 处理简单数组格式 ['field1', 'field2', ';'] 或 ['field1', 'field2'] @@ -515,8 +528,7 @@ export class FormApi { const values = { ...originValues }; const fieldMappingTime = this.state?.fieldMappingTime; - this.handleStringToArrayFields(values); - + this.handleMultiFields(values); if (!fieldMappingTime || !Array.isArray(fieldMappingTime)) { return values; } @@ -562,65 +574,6 @@ export class FormApi { return values; }; - private handleStringToArrayFields = (originValues: Record) => { - const arrayToStringFields = this.state?.arrayToStringFields; - if (!arrayToStringFields || !Array.isArray(arrayToStringFields)) { - return; - } - - const processFields = (fields: string[], separator: string = ',') => { - this.processFields(fields, separator, originValues, (value, sep) => { - if (typeof value !== 'string') { - return value; - } - // 处理空字符串的情况 - if (value === '') { - return []; - } - // 处理复杂分隔符的情况 - const escapedSeparator = sep.replaceAll( - /[.*+?^${}()|[\]\\]/g, - String.raw`\$&`, - ); - return value.split(new RegExp(escapedSeparator)); - }); - }; - - // 处理简单数组格式 ['field1', 'field2', ';'] 或 ['field1', 'field2'] - if (arrayToStringFields.every((item) => typeof item === 'string')) { - const lastItem = - arrayToStringFields[arrayToStringFields.length - 1] || ''; - const fields = - lastItem.length === 1 - ? arrayToStringFields.slice(0, -1) - : arrayToStringFields; - const separator = lastItem.length === 1 ? lastItem : ','; - processFields(fields, separator); - return; - } - - // 处理嵌套数组格式 [['field1'], ';'] - arrayToStringFields.forEach((fieldConfig) => { - if (Array.isArray(fieldConfig)) { - const [fields, separator = ','] = fieldConfig; - if (Array.isArray(fields)) { - processFields(fields, separator); - } else if (typeof originValues[fields] === 'string') { - const value = originValues[fields]; - if (value === '') { - originValues[fields] = []; - } else { - const escapedSeparator = separator.replaceAll( - /[.*+?^${}()|[\]\\]/g, - String.raw`\$&`, - ); - originValues[fields] = value.split(new RegExp(escapedSeparator)); - } - } - } - }); - }; - private processFields = ( fields: string[], separator: string, diff --git a/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue b/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue index 5c0374cb..b308b251 100644 --- a/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue +++ b/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue @@ -41,6 +41,7 @@ const { emptyStateValue, fieldName, formFieldProps, + hide, label, labelClass, labelWidth, @@ -95,7 +96,7 @@ const currentRules = computed(() => { }); const visible = computed(() => { - return isIf.value && isShow.value; + return !hide && isIf.value && isShow.value; }); const shouldRequired = computed(() => { @@ -285,7 +286,7 @@ onUnmounted(() => {