Browse Source

perf: improve fieldMappingTime to support format function (#5392)

pull/5393/head
Netfan 1 year ago
committed by GitHub
parent
commit
fb0ec05ff8
No known key found for this signature in database GPG Key ID: B5690EEEBB952194
  1. 4
      docs/src/components/common-ui/vben-form.md
  2. 3
      packages/@core/ui-kit/form-ui/src/form-api.ts
  3. 9
      packages/@core/ui-kit/form-ui/src/types.ts

4
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<string>?][]` | - |
| fieldMappingTime | 用于将表单内的数组值值映射成 2 个字段 | `[string, [string, string],Nullable<string>\|[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`字段上。每一项的第三个参数是一个可选的格式掩码,
:::

3
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

9
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<string>)?,
(
| ((value: any, fieldName: string) => any)
| [string, string]
| null
| string
)?,
][];
export interface FormSchema<

Loading…
Cancel
Save