From 516d0b8dc8cd5cb2b82312303c316462b1220172 Mon Sep 17 00:00:00 2001 From: Netfan Date: Thu, 9 Jan 2025 22:49:28 +0800 Subject: [PATCH] fix: form `fieldMappingTime` improve and `modelPropName` support (#5335) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 表单的fieldMappingTime支持将格式化掩码设为null以便原值映射，这样可以支持非日期时间类型的组件； * 表单增加modelPropName设置组件的双向绑定属性名，用于支持未提前注册的双向绑定属性为非默认名称的组件。 * 增加一些经常会有人提到的组合字段演示， --- docs/src/components/common-ui/vben-form.md | 13 +++++- packages/@core/ui-kit/form-ui/src/form-api.ts | 24 ++++++----- .../form-ui/src/form-render/form-field.vue | 7 ++-- .../ui-kit/form-ui/src/form-render/form.vue | 2 + packages/@core/ui-kit/form-ui/src/types.ts | 11 +++-- packages/styles/src/antd/index.css | 6 ++- playground/src/views/examples/form/custom.vue | 31 ++++++++++++-- .../examples/form/modules/two-fields.vue | 42 +++++++++++++++++++ 8 files changed, 115 insertions(+), 21 deletions(-) create mode 100644 playground/src/views/examples/form/modules/two-fields.vue diff --git a/docs/src/components/common-ui/vben-form.md b/docs/src/components/common-ui/vben-form.md index 8d27c08d5..a15c366f0 100644 --- a/docs/src/components/common-ui/vben-form.md +++ b/docs/src/components/common-ui/vben-form.md @@ -316,12 +316,18 @@ useVbenForm 返回的第二个参数，是一个对象，包含了一些表单 | collapsed | 是否折叠，在`showCollapseButton`为`true`时生效 | `boolean` | `false` | | collapseTriggerResize | 折叠时，触发`resize`事件 | `boolean` | `false` | | collapsedRows | 折叠时保持的行数 | `number` | `1` | -| fieldMappingTime | 用于将表单内时间区域组件的数组值映射成 2 个字段 | `[string, [string, string], string?][]` | - | +| fieldMappingTime | 用于将表单内的数组值值映射成 2 个字段 | `[string, [string, string],Nullable?][]` | - | | commonConfig | 表单项的通用配置，每个配置都会传递到每个表单项，表单项可覆盖 | `FormCommonConfig` | - | | schema | 表单项的每一项配置 | `FormSchema[]` | - | | submitOnEnter | 按下回车健时提交表单 | `boolean` | false | | submitOnChange | 字段值改变时提交表单(内部防抖，这个属性一般用于表格的搜索表单) | `boolean` | false | +::: tip fieldMappingTime + +此属性用于将表单内的数组值映射成 2 个字段，例如：`[['timeRange', ['startTime', 'endTime'], 'YYYY-MM-DD']]`，`timeRange`应当是一个至少具有2个成员的数组类型的值。Form会将`timeRange`的值前两个值分别按照格式掩码`YYYY-MM-DD`格式化后映射到`startTime`和`endTime`字段上。如果明确地将格式掩码设为null，则原值映射而不进行格式化（适用于非日期时间字段）。 + +::: + ### TS 类型说明 ::: details ActionButtonOptions @@ -406,6 +412,11 @@ export interface FormCommonConfig { * 所有表单项的label宽度 */ labelWidth?: number; + /** + * 所有表单项的model属性名。使用自定义组件时可通过此配置指定组件的model属性名。已经在modelPropNameMap中注册的组件不受此配置影响 + * @default "modelValue" + */ + modelPropName?: string; /** * 所有表单项的wrapper样式 */ 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 173e1ba1d..a3c320bd0 100644 --- a/packages/@core/ui-kit/form-ui/src/form-api.ts +++ b/packages/@core/ui-kit/form-ui/src/form-api.ts @@ -368,17 +368,21 @@ export class FormApi { } const [startTime, endTime] = values[field]; - const [startTimeFormat, endTimeFormat] = Array.isArray(format) - ? format - : [format, format]; - - values[startTimeKey] = startTime - ? formatDate(startTime, startTimeFormat) - : undefined; - values[endTimeKey] = endTime - ? formatDate(endTime, endTimeFormat) - : undefined; + if (format === null) { + values[startTimeKey] = startTime; + values[endTimeKey] = endTime; + } else { + const [startTimeFormat, endTimeFormat] = Array.isArray(format) + ? format + : [format, format]; + values[startTimeKey] = startTime + ? formatDate(startTime, startTimeFormat) + : undefined; + values[endTimeKey] = endTime + ? formatDate(endTime, endTimeFormat) + : undefined; + } // delete values[field]; Reflect.deleteProperty(values, field); }, 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 cce1d4a00..7fa942e45 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 { label, labelClass, labelWidth, + modelPropName, renderComponentContent, rules, } = defineProps< @@ -202,9 +203,9 @@ function fieldBindEvent(slotProps: Record) { const modelValue = slotProps.componentField.modelValue; const handler = slotProps.componentField['onUpdate:modelValue']; - const bindEventField = isString(component) - ? componentBindEventMap.value?.[component] - : null; + const bindEventField = + modelPropName || + (isString(component) ? componentBindEventMap.value?.[component] : null); let value = modelValue; // antd design 的一些组件会传递一个 event 对象 diff --git a/packages/@core/ui-kit/form-ui/src/form-render/form.vue b/packages/@core/ui-kit/form-ui/src/form-render/form.vue index 448322708..ff827c42a 100644 --- a/packages/@core/ui-kit/form-ui/src/form-render/form.vue +++ b/packages/@core/ui-kit/form-ui/src/form-render/form.vue @@ -98,6 +98,7 @@ const computedSchema = computed( hideRequiredMark = false, labelClass = '', labelWidth = 100, + modelPropName = '', wrapperClass = '', } = mergeWithArrayOverride(props.commonConfig, props.globalCommonConfig); return (props.schema || []).map((schema, index) => { @@ -118,6 +119,7 @@ const computedSchema = computed( hideLabel, hideRequiredMark, labelWidth, + modelPropName, wrapperClass, ...schema, commonComponentProps: componentProps, diff --git a/packages/@core/ui-kit/form-ui/src/types.ts b/packages/@core/ui-kit/form-ui/src/types.ts index 5de5620d4..25b4c7ee2 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 } from '@vben-core/typings'; +import type { ClassType, Nullable } from '@vben-core/typings'; import type { FormApi } from './form-api'; @@ -197,6 +197,11 @@ export interface FormCommonConfig { * 所有表单项的label宽度 */ labelWidth?: number; + /** + * 所有表单项的model属性名 + * @default "modelValue" + */ + modelPropName?: string; /** * 所有表单项的wrapper样式 */ @@ -219,7 +224,7 @@ export type HandleResetFn = ( export type FieldMappingTime = [ string, [string, string], - ([string, string] | string)?, + ([string, string] | Nullable)?, ][]; export interface FormSchema< @@ -330,7 +335,7 @@ export interface VbenFormProps< */ actionWrapperClass?: ClassType; /** - * 表单字段映射成时间格式 + * 表单字段映射 */ fieldMappingTime?: FieldMappingTime; /** diff --git a/packages/styles/src/antd/index.css b/packages/styles/src/antd/index.css index 33766b6f9..ed822fdca 100644 --- a/packages/styles/src/antd/index.css +++ b/packages/styles/src/antd/index.css @@ -21,7 +21,7 @@ .form-valid-error { /** select 选择器的样式 */ - .ant-select .ant-select-selector { + .ant-select:not(.valid-success) .ant-select-selector:not(.valid-success) { border-color: hsl(var(--destructive)) !important; } @@ -39,6 +39,10 @@ border-color: hsl(var(--destructive)); box-shadow: 0 0 0 2px rgb(255 38 5 / 6%); } + + .ant-input:not(.valid-success) { + border-color: hsl(var(--destructive)) !important; + } } /** 区间选择器下面来回切换时的样式 */ diff --git a/playground/src/views/examples/form/custom.vue b/playground/src/views/examples/form/custom.vue index a035e597b..7fab17a6c 100644 --- a/playground/src/views/examples/form/custom.vue +++ b/playground/src/views/examples/form/custom.vue @@ -1,11 +1,13 @@ +