perf: formApi added validateAndSubmitForm & filedMapToTime renamed fieldMappingTime (#4842)

* perf: formApi added validateAndSubmitForm & filedMapToTime renamed fieldMappingTime

packages/@core/base/shared/package.json

@@ -84,6 +84,7 @@
     "@types/lodash.get": "catalog:",
     "@vue/shared": "catalog:",
     "clsx": "catalog:",
+    "dayjs": "^1.11.13",
     "defu": "catalog:",
     "lodash.clonedeep": "catalog:",
     "lodash.get": "catalog:",

packages/@core/base/shared/src/utils/date.ts

@@ -0,0 +1,18 @@
+import dayjs from 'dayjs';
+
+export function formatDate(time: number | string, format = 'YYYY-MM-DD') {
+  try {
+    const date = dayjs(time);
+    if (!date.isValid()) {
+      throw new Error('Invalid date');
+    }
+    return date.format(format);
+  } catch (error) {
+    console.error(`Error formatting date: ${error}`);
+    return time;
+  }
+}
+
+export function formatDateTime(time: number | string) {
+  return formatDate(time, 'YYYY-MM-DD HH:mm:ss');
+}

packages/@core/base/shared/src/utils/index.ts

@@ -1,4 +1,5 @@
 export * from './cn';
+export * from './date';
 export * from './diff';
 export * from './dom';
 export * from './inference';

packages/@core/ui-kit/form-ui/src/components/form-actions.vue

@@ -3,7 +3,12 @@ import { computed, toRaw, unref, watch } from 'vue';
 
 import { useSimpleLocale } from '@vben-core/composables';
 import { VbenExpandableArrow } from '@vben-core/shadcn-ui';
-import { cn, isFunction, triggerWindowResize } from '@vben-core/shared/utils';
+import {
+  cn,
+  formatDate,
+  isFunction,
+  triggerWindowResize,
+} from '@vben-core/shared/utils';
 
 import { COMPONENT_MAP } from '../config';
 import { injectFormProps } from '../use-form-context';
@@ -64,8 +69,8 @@ async function handleReset(e: Event) {
 
   const values = toRaw(form.values);
   // 清理时间字段
-  props.fieldMapToTime &&
-    props.fieldMapToTime.forEach(([_, [startTimeKey, endTimeKey]]) => {
+  props.fieldMappingTime &&
+    props.fieldMappingTime.forEach(([_, [startTimeKey, endTimeKey]]) => {
       delete values[startTimeKey];
       delete values[endTimeKey];
     });
@@ -78,15 +83,13 @@ async function handleReset(e: Event) {
 }
 
 function handleRangeTimeValue(values: Record<string, any>) {
-  const fieldMapToTime = unref(rootProps).fieldMapToTime;
+  const fieldMappingTime = unref(rootProps).fieldMappingTime;
 
-  if (!fieldMapToTime) return values;
-
-  if (!Array.isArray(fieldMapToTime)) {
+  if (!fieldMappingTime || !Array.isArray(fieldMappingTime)) {
     return values;
   }
 
-  fieldMapToTime.forEach(
+  fieldMappingTime.forEach(
     ([field, [startTimeKey, endTimeKey], format = 'YYYY-MM-DD']) => {
       if (!values[field]) {
         delete values[field];
@@ -99,10 +102,10 @@ function handleRangeTimeValue(values: Record<string, any>) {
         : [format, format];
 
       values[startTimeKey] = startTime
-        ? formatTime(startTime, startTimeFormat)
+        ? formatDate(startTime, startTimeFormat)
         : undefined;
       values[endTimeKey] = endTime
-        ? formatTime(endTime, endTimeFormat)
+        ? formatDate(endTime, endTimeFormat)
         : undefined;
 
       delete values[field];
@@ -112,32 +115,6 @@ function handleRangeTimeValue(values: Record<string, any>) {
   return values;
 }
 
-function formatTime(time: string, format: string): number | string {
-  const date = new Date(time);
-  const timestamp = (date: Date) => Math.floor(date.getTime() / 1000);
-
-  if (format === 'timestamp') return timestamp(date);
-  if (format === 'timestampStartDay')
-    return timestamp(
-      new Date(date.getFullYear(), date.getMonth(), date.getDate()),
-    );
-
-  const padZero = (num: number) => num.toString().padStart(2, '0');
-  const replacements: Record<string, string> = {
-    DD: padZero(date.getDate()),
-    HH: padZero(date.getHours()),
-    MM: padZero(date.getMonth() + 1),
-    mm: padZero(date.getMinutes()),
-    ss: padZero(date.getSeconds()),
-    YYYY: date.getFullYear().toString(),
-  };
-
-  return format.replaceAll(
-    /YYYY|MM|DD|HH|mm|ss/g,
-    (match) => replacements[match] || match,
-  );
-}
-
 watch(
   () => collapsed.value,
   () => {

packages/@core/ui-kit/form-ui/src/form-api.ts

@@ -303,4 +303,13 @@ export class FormApi {
     }
     return validateResult;
   }
+
+  async validateAndSubmitForm() {
+    const form = await this.getForm();
+    const { valid } = await form.validate();
+    if (!valid) {
+      return;
+    }
+    return await this.submitForm();
+  }
 }

packages/@core/ui-kit/form-ui/src/types.ts

@@ -206,7 +206,7 @@ export type HandleResetFn = (
   values: Record<string, any>,
 ) => Promise<void> | void;
 
-export type FieldMapToTime = [
+export type FieldMappingTime = [
   string,
   [string, string],
   ([string, string] | string)?,
@@ -272,10 +272,6 @@ export interface FormRenderProps<
    * 组件集合
    */
   componentMap: Record<BaseFormComponentType, Component>;
-  /**
-   * 表单字段映射成时间格式
-   */
-  fieldMapToTime?: FieldMapToTime;
   /**
    * 表单实例
    */
@@ -315,6 +311,10 @@ export interface VbenFormProps<
    * 表单操作区域class
    */
   actionWrapperClass?: ClassType;
+  /**
+   * 表单字段映射成时间格式
+   */
+  fieldMappingTime?: FieldMappingTime;
   /**
    * 表单重置回调
    */