fix(form): date组件初始化时不显示值

Tencent · Dec 9, 2024 · 0c665c6 · 0c665c6
1 parent 7a19b72
commit 0c665c6
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 22 deletions.
diff --git a/packages/design/src/types.ts b/packages/design/src/types.ts
@@ -107,6 +107,8 @@ export interface DatePickerProps {
   startPlaceholder?: string;
   endPlaceholder?: string;
   format?: string;
+  dateFormat?: string;
+  timeFormat?: string;
   /** 可选，绑定值的格式。 不指定则绑定值为 Date 对象 */
   valueFormat?: string;
   /** 在范围选择器里取消两个日期面板之间的联动 */

diff --git a/packages/form/src/containers/Container.vue b/packages/form/src/containers/Container.vue
@@ -45,7 +45,6 @@
         <template #label><span v-html="type === 'checkbox' ? '' : text" :title="config.labelTitle"></span></template>
         <TMagicTooltip v-if="tooltip">
           <component
-            :data-tmagic-form-item-prop="itemProp"
             :key="key(config)"
             :size="size"
             :is="tagName"
@@ -65,7 +64,6 @@
 
         <component
           v-else
-          :data-tmagic-form-item-prop="itemProp"
           :key="key(config)"
           :size="size"
           :is="tagName"

diff --git a/packages/form/src/fields/Date.vue b/packages/form/src/fields/Date.vue
@@ -30,7 +30,7 @@ const emit = defineEmits<{
 
 useAddField(props.prop);
 
-props.model[props.name] = datetimeFormatter(props.model[props.name], '', 'YYYY/MM/DD');
+props.model[props.name] = datetimeFormatter(props.model[props.name], '', props.config.valueFormat || 'YYYY/MM/DD');
 
 const changeHandler = (v: string) => {
   emit('change', v);

diff --git a/packages/form/src/fields/Daterange.vue b/packages/form/src/fields/Daterange.vue
@@ -22,7 +22,6 @@ import { ref, watch } from 'vue';
 import { TMagicDatePicker } from '@tmagic/design';
 
 import type { DaterangeConfig, FieldProps } from '../schema';
-import { datetimeFormatter } from '../utils/form';
 import { useAddField } from '../utils/useAddField';
 
 defineOptions({
@@ -35,7 +34,6 @@ const emit = defineEmits(['change']);
 
 useAddField(props.prop);
 
-// eslint-disable-next-line vue/no-setup-props-destructure
 const { names } = props.config;
 const value = ref<(Date | undefined)[] | null>([]);
 
@@ -48,8 +46,8 @@ if (props.model !== undefined) {
           value.value = [];
         }
         if (!start || !end) value.value = [];
-        if (start !== preStart) value.value[0] = new Date(start);
-        if (end !== preEnd) value.value[1] = new Date(end);
+        if (start !== preStart) value.value[0] = start;
+        if (end !== preEnd) value.value[1] = end;
       },
       {
         immediate: true,
@@ -58,8 +56,8 @@ if (props.model !== undefined) {
   } else if (props.name && props.model[props.name]) {
     watch(
       () => props.model[props.name],
-      (start, preStart) => {
-        if (start !== preStart) value.value = start.map((item: string) => (item ? new Date(item) : undefined));
+      (start) => {
+        value.value = start;
       },
       {
         immediate: true,
@@ -74,11 +72,7 @@ const setValue = (v: Date[] | Date) => {
       return;
     }
     if (Array.isArray(v)) {
-      props.model[item] = datetimeFormatter(
-        v[index]?.toString(),
-        '',
-        props.config.valueFormat || 'YYYY/MM/DD HH:mm:ss',
-      );
+      props.model[item] = v[index];
     } else {
       props.model[item] = undefined;
     }
@@ -89,18 +83,12 @@ const changeHandler = (v: Date[]) => {
   const value = v || [];
 
   if (props.name) {
-    emit(
-      'change',
-      value.map((item?: Date) => {
-        if (item) return datetimeFormatter(item, '', props.config.valueFormat || 'YYYY/MM/DD HH:mm:ss');
-        return undefined;
-      }),
-    );
+    emit('change', value);
   } else {
     if (names?.length) {
       setValue(value);
     }
-    emit('change', value);
+    emit('change', props.model);
   }
 };
 </script>