From a0a2242341c3555ba0402250d38da4124d3062aa Mon Sep 17 00:00:00 2001
From: teeniechen <teeniechen@tencent.com>
Date: Tue, 5 Sep 2023 20:22:59 +0800
Subject: [PATCH] =?UTF-8?q?feat(form):=20=E6=97=B6=E9=97=B4=E5=AE=B9?=
 =?UTF-8?q?=E5=99=A8=E5=A2=9E=E5=8A=A0=E6=AF=8F=E6=97=A5=E5=91=A8=E6=9C=9F?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/form/src/fields/Timerange.vue | 76 ++++++++++++++++++++++++++
 packages/form/src/index.ts             |  3 +
 2 files changed, 79 insertions(+)
 create mode 100644 packages/form/src/fields/Timerange.vue

diff --git a/packages/form/src/fields/Timerange.vue b/packages/form/src/fields/Timerange.vue
new file mode 100644
index 00000000..89ba8138
--- /dev/null
+++ b/packages/form/src/fields/Timerange.vue
@@ -0,0 +1,76 @@
+<template>
+  <TMagicTimePicker
+    v-model="value"
+    is-range
+    range-separator="-"
+    start-placeholder="开始时间"
+    end-placeholder="结束时间"
+    :size="size"
+    :unlink-panels="true"
+    :disabled="disabled"
+    :default-time="config.defaultTime"
+    @change="changeHandler"
+  ></TMagicTimePicker>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch } from 'vue';
+
+import { TMagicTimePicker } from '@tmagic/design';
+import { datetimeFormatter } from '@tmagic/utils';
+
+import type { DaterangeConfig, FieldProps } from '../schema';
+import { useAddField } from '../utils/useAddField';
+
+defineOptions({
+  name: 'MFormTimeRange',
+});
+
+const props = defineProps<FieldProps<DaterangeConfig>>();
+
+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>([]);
+
+if (props.model !== undefined && 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] = start;
+      if (end !== preEnd) value.value[1] = end;
+    },
+    {
+      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 (names?.length) {
+    setValue(value);
+  }
+  emit('change', value);
+};
+</script>
diff --git a/packages/form/src/index.ts b/packages/form/src/index.ts
index 3a7813d2..24046100 100644
--- a/packages/form/src/index.ts
+++ b/packages/form/src/index.ts
@@ -45,6 +45,7 @@ import Switch from './fields/Switch.vue';
 import Text from './fields/Text.vue';
 import Textarea from './fields/Textarea.vue';
 import Time from './fields/Time.vue';
+import Timerange from './fields/Timerange.vue';
 import { setConfig } from './utils/config';
 import Form from './Form.vue';
 import FormDialog from './FormDialog.vue';
@@ -76,6 +77,7 @@ export { default as MTime } from './fields/Time.vue';
 export { default as MCheckbox } from './fields/Checkbox.vue';
 export { default as MSwitch } from './fields/Switch.vue';
 export { default as MDaterange } from './fields/Daterange.vue';
+export { default as MTimerange } from './fields/Timerange.vue';
 export { default as MColorPicker } from './fields/ColorPicker.vue';
 export { default as MCheckboxGroup } from './fields/CheckboxGroup.vue';
 export { default as MRadioGroup } from './fields/RadioGroup.vue';
@@ -117,6 +119,7 @@ export default {
     app.component('m-fields-date', Date);
     app.component('m-fields-datetime', DateTime);
     app.component('m-fields-daterange', Daterange);
+    app.component('m-fields-timerange', Timerange);
     app.component('m-fields-time', Time);
     app.component('m-fields-checkbox', Checkbox);
     app.component('m-fields-switch', Switch);