From fb0ec05ff8aa3bfb1b01d8372537e3018d653dec Mon Sep 17 00:00:00 2001 From: Netfan Date: Tue, 14 Jan 2025 18:15:00 +0800 Subject: [PATCH] perf: improve fieldMappingTime to support format function (#5392) --- docs/src/components/common-ui/vben-form.md | 4 ++-- packages/@core/ui-kit/form-ui/src/form-api.ts | 3 +++ packages/@core/ui-kit/form-ui/src/types.ts | 9 +++++++-- 3 files changed, 12 insertions(+), 4 deletions(-) diff --git a/docs/src/components/common-ui/vben-form.md b/docs/src/components/common-ui/vben-form.md index a15c366f0..0193e0704 100644 --- a/docs/src/components/common-ui/vben-form.md +++ b/docs/src/components/common-ui/vben-form.md @@ -316,7 +316,7 @@ useVbenForm 返回的第二个参数，是一个对象，包含了一些表单 | collapsed | 是否折叠，在`showCollapseButton`为`true`时生效 | `boolean` | `false` | | collapseTriggerResize | 折叠时，触发`resize`事件 | `boolean` | `false` | | collapsedRows | 折叠时保持的行数 | `number` | `1` | -| fieldMappingTime | 用于将表单内的数组值值映射成 2 个字段 | `[string, [string, string],Nullable?][]` | - | +| fieldMappingTime | 用于将表单内的数组值值映射成 2 个字段 | `[string, [string, string],Nullable\|[string,string]\|((any,string)=>any)?][]` | - | | commonConfig | 表单项的通用配置，每个配置都会传递到每个表单项，表单项可覆盖 | `FormCommonConfig` | - | | schema | 表单项的每一项配置 | `FormSchema[]` | - | | submitOnEnter | 按下回车健时提交表单 | `boolean` | false | @@ -324,7 +324,7 @@ useVbenForm 返回的第二个参数，是一个对象，包含了一些表单 ::: tip fieldMappingTime -此属性用于将表单内的数组值映射成 2 个字段，例如：`[['timeRange', ['startTime', 'endTime'], 'YYYY-MM-DD']]`，`timeRange`应当是一个至少具有2个成员的数组类型的值。Form会将`timeRange`的值前两个值分别按照格式掩码`YYYY-MM-DD`格式化后映射到`startTime`和`endTime`字段上。如果明确地将格式掩码设为null，则原值映射而不进行格式化（适用于非日期时间字段）。 +此属性用于将表单内的数组值映射成 2 个字段，它应当传入一个数组，数组的每一项是一个映射规则，规则的第一个成员是一个字符串，表示需要映射的字段名，第二个成员是一个数组，表示映射后的字段名，第三个成员是一个可选的格式掩码，用于格式化日期时间字段；也可以提供一个格式化函数（参数分别为当前值和当前字段名，返回格式化后的值）。如果明确地将格式掩码设为null，则原值映射而不进行格式化（适用于非日期时间字段）。例如：`[['timeRange', ['startTime', 'endTime'], 'YYYY-MM-DD']]`，`timeRange`应当是一个至少具有2个成员的数组类型的值。Form会将`timeRange`的值前两个值分别按照格式掩码`YYYY-MM-DD`格式化后映射到`startTime`和`endTime`字段上。每一项的第三个参数是一个可选的格式掩码， ::: 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 a2877cbff..2d1e971ab 100644 --- a/packages/@core/ui-kit/form-ui/src/form-api.ts +++ b/packages/@core/ui-kit/form-ui/src/form-api.ts @@ -371,6 +371,9 @@ export class FormApi { if (format === null) { values[startTimeKey] = startTime; values[endTimeKey] = endTime; + } else if (isFunction(format)) { + values[startTimeKey] = format(startTime, startTimeKey); + values[endTimeKey] = format(endTime, endTimeKey); } else { const [startTimeFormat, endTimeFormat] = Array.isArray(format) ? format diff --git a/packages/@core/ui-kit/form-ui/src/types.ts b/packages/@core/ui-kit/form-ui/src/types.ts index 07a2afd43..dd007292f 100644 --- a/packages/@core/ui-kit/form-ui/src/types.ts +++ b/packages/@core/ui-kit/form-ui/src/types.ts @@ -4,7 +4,7 @@ import type { ZodTypeAny } from 'zod'; import type { Component, HtmlHTMLAttributes, Ref } from 'vue'; import type { VbenButtonProps } from '@vben-core/shadcn-ui'; -import type { ClassType, MaybeComputedRef, Nullable } from '@vben-core/typings'; +import type { ClassType, MaybeComputedRef } from '@vben-core/typings'; import type { FormApi } from './form-api'; @@ -224,7 +224,12 @@ export type HandleResetFn = ( export type FieldMappingTime = [ string, [string, string], - ([string, string] | Nullable)?, + ( + | ((value: any, fieldName: string) => any) + | [string, string] + | null + | string + )?, ][]; export interface FormSchema<