fix(form): timerange新增value format配置,默认为HH:mm:ss

packages/form/src/fields/Timerange.vue

@@ -1,6 +1,6 @@
 <template>
   <TMagicTimePicker
-    :model-value="value"
+    v-model="value"
     is-range
     range-separator="-"
     start-placeholder="开始时间"
@@ -9,16 +9,20 @@
     :unlink-panels="true"
     :disabled="disabled"
     :default-time="config.defaultTime"
-    @update:model-value="changeHandler"
+    :format="config.format || 'HH:mm:ss'"
+    :value-format="config.valueFormat || 'HH:mm:ss'"
+    @change="changeHandler"
   ></TMagicTimePicker>
 </template>
 
 <script lang="ts" setup>
-import { ref, watch } from 'vue';
+import { onUnmounted, ref, watch } from 'vue';
+import dayjs from 'dayjs';
 
 import { TMagicTimePicker } from '@tmagic/design';
 
-import type { DaterangeConfig, FieldProps } from '../schema';
+import type { ChangeRecord, DaterangeConfig, FieldProps } from '../schema';
+import { datetimeFormatter } from '../utils/form';
 import { useAddField } from '../utils/useAddField';
 
 defineOptions({
@@ -32,43 +36,83 @@ const emit = defineEmits(['change']);
 useAddField(props.prop);
 
 const { names } = props.config;
-const value = ref<(Date | undefined)[] | null>([]);
+const value = ref<(Date | string | undefined)[] | null>([]);
 
-if (props.model !== undefined && names?.length) {
+const getFullDatetime = (item: string) => (item ? `${dayjs().format('YYYY/MM/DD')} ${item}` : '');
-  watch(
+const getFormat = () => `YYYY/MM/DD ${props.config.valueFormat || 'HH:mm:ss'}`;
+const timeFormatter = (time: string, format: string) =>
+  (datetimeFormatter(getFullDatetime(time), '', format) as string).substring(11);
+
+if (props.model !== undefined) {
+  if (names?.length) {
+    const unWatch = watch(
       [() => props.model[names[0]], () => props.model[names[1]]],
       ([start, end], [preStart, preEnd]) => {
         if (!value.value) {
           value.value = [];
         }
+
+        const format = getFormat();
         if (!start || !end) value.value = [];
-      if (start !== preStart) value.value[0] = start;
+        if (start !== preStart) value.value[0] = timeFormatter(start, format);
-      if (end !== preEnd) value.value[1] = end;
+        if (end !== preEnd) value.value[1] = timeFormatter(end, format);
       },
       {
         immediate: true,
       },
     );
+    onUnmounted(() => {
+      unWatch();
+    });
+  } else if (props.name) {
+    const unWatch = watch(
+      () => props.model[props.name],
+      (v = []) => {
+        if (Array.isArray(v)) {
+          value.value = v.map((item: string) => (item ? timeFormatter(item, getFormat()) : undefined));
+        } else {
+          value.value = [];
+        }
+      },
+      {
+        immediate: true,
+      },
+    );
+    onUnmounted(() => {
+      unWatch();
+    });
+  }
 }
 
-const setValue = (v: Date[] | Date) => {
+const changeHandler = (v: Date[]) => {
-  names?.forEach((item, index) => {
+  const value = v || [];
+
+  if (props.name) {
+    emit('change', value);
+  } else {
+    if (props.config.names?.length) {
+      const newChangeRecords: ChangeRecord[] = [];
+      props.config.names.forEach((item, index) => {
         if (!props.model) {
           return;
         }
         if (Array.isArray(v)) {
-      props.model[item] = v[index];
+          newChangeRecords.push({
+            propPath: props.prop ? `${props.prop}.${item}` : item,
+            value: v[index],
+          });
         } else {
-      props.model[item] = undefined;
+          newChangeRecords.push({
+            propPath: props.prop ? `${props.prop}.${item}` : item,
+            value: undefined,
+          });
         }
       });
-};
 
-const changeHandler = (v: Date[]) => {
+      emit('change', props.model, {
-  const value = v || [];
+        changeRecords: newChangeRecords,
-  if (names?.length) {
+      });
-    setValue(value);
+    }
   }
-  emit('change', value);
 };
 </script>