FEATURE: Form表单添加fieldMapToTime格式化时间范围字段

[lztbwlkj]

Version

Vben Admin V5

Description

参照V2的版本实现的格式化时间范围字段方法

//添加的文件位置： packages/@core/ui-kit/form-ui/src/types.ts
export type FieldMapToTime = [
  string,
  [string, string],
  ([string, string] | string)?,
][];

//添加的文件位置： packages/@core/ui-kit/form-ui/src/components/form-actions.vue
async function handleSubmit(e: Event) {
  e?.preventDefault();
  e?.stopPropagation();
  const { valid } = await form.validate();
  if (!valid) {
    return;
  }

  const values = handleRangeTimeValue(toRaw(form.values));
  await unref(rootProps).handleSubmit?.(values);
}

async function handleReset(e: Event) {
  e?.preventDefault();
  e?.stopPropagation();
  const props = unref(rootProps);

  const values = toRaw(form.values);
  // 清理时间字段
  props.fieldMapToTime &&
    props.fieldMapToTime.forEach(([_, [startTimeKey, endTimeKey]]) => {
      delete values[startTimeKey];
      delete values[endTimeKey];
    });

  if (isFunction(props.handleReset)) {
    await props.handleReset?.(values);
  } else {
    form.resetForm();
  }
}

/**
 * @description: Processing time interval parameters
 */

function handleRangeTimeValue(values: Record<string, any>) {
  const fieldMapToTime = unref(rootProps).fieldMapToTime;

  if (!fieldMapToTime) return values;

  if (!Array.isArray(fieldMapToTime)) {
    return values;
  }

  fieldMapToTime.forEach(
    ([field, [startTimeKey, endTimeKey], format = 'YYYY-MM-DD']) => {
      if (!values[field]) {
        delete values[field];
        return;
      }

      const [startTime, endTime] = values[field];
      const [startTimeFormat, endTimeFormat] = Array.isArray(format)
        ? format
        : [format, format];

      values[startTimeKey] = startTime
        ? formatTime(startTime, startTimeFormat)
        : undefined;
      values[endTimeKey] = endTime
        ? formatTime(endTime, endTimeFormat)
        : undefined;

      delete values[field];
    },
  );

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

使用方法

const [Grid, gridApi] = useVbenVxeGrid({
  formOptions: {
    schema: searchFormSchema,
    showCollapseButton: searchFormSchema.length > 3,
    // 格式化日期
    fieldMapToTime: [
      ['createTime', ['createTimeBegin', 'createTimeEnd'], 'YYYY-MM-DD'],
    ],
  },
  gridOptions,
});

Proposed Solution

希望官方大大能实现这个小功能

Alternatives Considered

No response

Additional Context

No response

Validations

• Read the docs
• Ensure the code is up to date. (Some issues have been fixed in the latest version)
• I have searched the existing issues and checked that my issue does not duplicate any existing issues.

[DesignHhuang]

你都写好了，怎么不直接提pr