fix: form fieldMappingTime improve and modelPropName support (#5335)

* 表单的fieldMappingTime支持将格式化掩码设为null以便原值映射，这样可以支持非日期时间类型的组件；
* 表单增加modelPropName设置组件的双向绑定属性名，用于支持未提前注册的双向绑定属性为非默认名称的组件。
* 增加一些经常会有人提到的组合字段演示，

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);
       },

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<string, any>) {
   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 对象

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,

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<string>)?,
 ][];
 
 export interface FormSchema<
@@ -330,7 +335,7 @@ export interface VbenFormProps<
    */
   actionWrapperClass?: ClassType;
   /**
-   * 表单字段映射成时间格式
+   * 表单字段映射
    */
   fieldMappingTime?: FieldMappingTime;
   /**

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;
+  }
 }
 
 /** 区间选择器下面来回切换时的样式 */