From a7057d2568f58825a92f7f2abde2763114d1d180 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Mon, 8 Aug 2022 21:08:24 +0800
Subject: [PATCH] =?UTF-8?q?fix(form):=20daterange=E4=B8=8D=E4=BC=9A?=
 =?UTF-8?q?=E8=87=AA=E5=8A=A8=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/form/src/fields/Daterange.vue | 131 ++++++++++++++-----------
 packages/form/src/index.ts             |   2 +-
 packages/utils/src/index.ts            |   6 +-
 3 files changed, 82 insertions(+), 57 deletions(-)

diff --git a/packages/form/src/fields/Daterange.vue b/packages/form/src/fields/Daterange.vue
index 92acfe38..7ecb30fa 100644
--- a/packages/form/src/fields/Daterange.vue
+++ b/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>
diff --git a/packages/form/src/index.ts b/packages/form/src/index.ts
index 14b3dba2..5ea59a46 100644
--- a/packages/form/src/index.ts
+++ b/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);
diff --git a/packages/utils/src/index.ts b/packages/utils/src/index.ts
index dcd01c54..0a03590a 100644
--- a/packages/utils/src/index.ts
+++ b/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)) {