fix(form): daterange不会自动更新

packages/form/src/fields/Daterange.vue

@@ -13,70 +13,91 @@
   ></el-date-picker>
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType, ref } from 'vue';
+<script lang="ts" setup>
+import { ref, watch } from 'vue';
 
 import { datetimeFormatter } from '@tmagic/utils';
 
 import { DaterangeConfig } from '../schema';
-import fieldProps from '../utils/fieldProps';
 import { useAddField } from '../utils/useAddField';
 
-export default defineComponent({
-  name: 'm-fields-daterange',
+const props = defineProps<{
+  config: DaterangeConfig;
+  model: any;
+  initValues?: any;
+  values?: any;
+  name: string;
+  prop: string;
+  disabled?: boolean;
+  size: 'mini' | 'small' | 'medium';
+}>();
 
-  props: {
-    ...fieldProps,
-    config: {
-      type: Object as PropType<DaterangeConfig>,
-      required: true,
-    },
-  },
+const emit = defineEmits(['change']);
 
-  emits: ['change'],
+useAddField(props.prop);
 
-  setup(props, { emit }) {
-    useAddField(props.prop);
+// eslint-disable-next-line vue/no-setup-props-destructure
+const { names } = props.config;
+const value = ref<(Date | undefined)[] | null>([]);
 
-    // eslint-disable-next-line vue/no-setup-props-destructure
-    const { names } = props.config;
-    const value = ref<(string | number)[]>([]);
-
-    if (props.model !== undefined) {
-      if (names?.length) {
-        value.value = names.map((item) => datetimeFormatter(props.model?.[item], ''));
-      } else if (props.name && props.model[props.name]) {
-        value.value = props.model[props.name].map((item: string) => datetimeFormatter(item, ''));
-      }
-    }
-
-    const setValue = (v: Date[] | Date) => {
-      if (names?.length && v instanceof Array) {
-        names.forEach((item, index) => {
-          if (props.model) {
-            props.model[item] = datetimeFormatter(v[index].toString(), '');
-          }
-        });
-      } else if (props.model && props.name && v instanceof Date) {
-        props.model[props.name] = datetimeFormatter(v.toString(), '');
-      } else if (names?.length) {
-        names.forEach((item) => {
-          if (props.model) {
-            props.model[item] = undefined;
-          }
-        });
-      } else if (props.name) {
-        props.model[props.name] = undefined;
-      }
-    };
-
-    return {
-      value,
-      changeHandler(v: Date[]) {
-        setValue(v);
-        emit('change', v);
+if (props.model !== undefined) {
+  if (names?.length) {
+    watch(
+      [() => props.model[names[0]], () => props.model[names[1]]],
+      ([start, end], [preStart, preEnd]) => {
+        if (!value.value) {
+          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);
       },
-    };
-  },
-});
+      {
+        immediate: true,
+      },
+    );
+  } 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));
+      },
+      {
+        immediate: true,
+      },
+    );
+  }
+}
+
+const setValue = (v: Date[] | Date) => {
+  names?.forEach((item, index) => {
+    if (!props.model) {
+      return;
+    }
+    if (Array.isArray(v)) {
+      props.model[item] = datetimeFormatter(v[index]?.toString(), '');
+    } else {
+      props.model[item] = undefined;
+    }
+  });
+};
+
+const changeHandler = (v: Date[]) => {
+  const value = v || [];
+
+  if (props.name) {
+    emit(
+      'change',
+      value.map((item?: Date) => {
+        if (item) return datetimeFormatter(item, '');
+        return undefined;
+      }),
+    );
+  } else {
+    if (names?.length) {
+      setValue(value);
+    }
+    emit('change', value);
+  }
+};
 </script>

packages/form/src/index.ts

@@ -111,7 +111,7 @@ const install = (app: App, opt: any) => {
   app.component(Time.name, Time);
   app.component(Checkbox.name, Checkbox);
   app.component(Switch.name, Switch);
-  app.component(Daterange.name, Daterange);
+  app.component('m-fields-daterange', Daterange);
   app.component('m-fields-color-picker', ColorPicker);
   app.component(CheckboxGroup.name, CheckboxGroup);
   app.component(RadioGroup.name, RadioGroup);

packages/utils/src/index.ts

@@ -34,7 +34,11 @@ export const sleep = (ms: number): Promise<void> =>
     }, ms);
   });
 
-export const datetimeFormatter = (v: string | Date, defaultValue = '-', format = 'YYYY-MM-DD HH:mm:ss'): any => {
+export const datetimeFormatter = (
+  v: string | Date,
+  defaultValue = '-',
+  format = 'YYYY-MM-DD HH:mm:ss',
+): string | number => {
   if (v) {
     let time = null;
     if (['x', 'timestamp'].includes(format)) {