feat(form): 时间容器增加每日周期显示

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>

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);