feat(form): 时间容器支持设置多个时间段以及设置每日周期

packages/form/src/fields/Daterange.vue

@@ -1,22 +1,32 @@
 <template>
-  <TMagicDatePicker
-    v-model="value"
-    type="datetimerange"
-    range-separator="-"
-    start-placeholder="开始日期"
-    end-placeholder="结束日期"
-    :size="size"
-    :unlink-panels="true"
-    :disabled="disabled"
-    :default-time="config.defaultTime"
-    @change="changeHandler"
-  ></TMagicDatePicker>
+  <div>
+    <div v-for="(item, index) in list" :key="index">
+      <TMagicDatePicker
+        v-model="list[index]"
+        type="datetimerange"
+        range-separator="-"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"
+        :size="size"
+        :unlink-panels="true"
+        :disabled="disabled"
+        :default-time="config.defaultTime"
+        @change="changeHandler($event, index)"
+      ></TMagicDatePicker>
+      <span v-show="list.length > 1">
+        &nbsp;
+        <TMagicIcon class="m-table-delete-icon" @click="removeHandler(index)"><Delete /></TMagicIcon>
+      </span>
+    </div>
+    <TMagicButton v-if="addable" size="small" type="primary" plain @click="newHandler()">新增一行</TMagicButton>
+  </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
+import { Delete } from '@element-plus/icons-vue';
 
-import { TMagicDatePicker } from '@tmagic/design';
+import { TMagicButton, TMagicDatePicker, TMagicIcon } from '@tmagic/design';
 import { datetimeFormatter } from '@tmagic/utils';
 
 import type { DaterangeConfig, FieldProps } from '../schema';
@@ -35,6 +45,8 @@ useAddField(props.prop);
 // eslint-disable-next-line vue/no-setup-props-destructure
 const { names } = props.config;
 const value = ref<(Date | undefined)[] | null>([]);
+const list = ref<any>([[]]);
+const addable = computed(() => Boolean(props.config.addable));
 
 if (props.model !== undefined) {
   if (names?.length) {
@@ -47,6 +59,7 @@ if (props.model !== undefined) {
         if (!start || !end) value.value = [];
         if (start !== preStart) value.value[0] = new Date(start);
         if (end !== preEnd) value.value[1] = new Date(end);
+        list.value[0] = value.value;
       },
       {
         immediate: true,
@@ -56,7 +69,11 @@ if (props.model !== undefined) {
     watch(
       () => props.model[props.name],
       (start, preStart) => {
-        if (start !== preStart) value.value = start.map((item: string) => (item ? new Date(item) : undefined));
+        if (Array.isArray(start) && start.length > 0) {
+          list.value = start;
+          return;
+        }
+        if (start !== preStart) list.value[0] = start.map((item: string) => (item ? new Date(item) : undefined));
       },
       {
         immediate: true,
@@ -78,17 +95,20 @@ const setValue = (v: Date[] | Date) => {
   });
 };
 
-const changeHandler = (v: Date[]) => {
+const changeHandler = (v: Date[], index: number) => {
   const value = v || [];
 
   if (props.name) {
-    emit(
-      'change',
-      value.map((item?: Date) => {
-        if (item) return datetimeFormatter(item, '');
-        return undefined;
-      }),
-    );
+    const dateTime = value.map((item?: Date) => {
+      if (item) return datetimeFormatter(item, '');
+      return undefined;
+    });
+    if (list.value.length === 1) {
+      emit('change', dateTime);
+      return;
+    }
+    list.value[index] = dateTime;
+    emit('change', list.value);
   } else {
     if (names?.length) {
       setValue(value);
@@ -96,4 +116,13 @@ const changeHandler = (v: Date[]) => {
     emit('change', value);
   }
 };
+
+const newHandler = () => {
+  list.value.push([]);
+};
+
+const removeHandler = (index: number) => {
+  list.value.splice(index, 1);
+  emit('change', list.value);
+};
 </script>

packages/form/src/fields/Timerange.vue

@@ -0,0 +1,79 @@
+<template>
+  <div>
+    <div v-for="(item, index) in list" :key="index">
+      <TMagicTimePicker
+        v-model="list[index]"
+        is-range
+        range-separator="-"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        :size="size"
+        :unlink-panels="true"
+        :disabled="disabled"
+        :default-time="config.defaultTime"
+        @change="changeHandler($event, index)"
+      ></TMagicTimePicker>
+      <span v-show="list.length > 1">
+        &nbsp;
+        <TMagicIcon class="m-table-delete-icon" @click="removeHandler(index)"><Delete /></TMagicIcon>
+      </span>
+    </div>
+    <TMagicButton v-if="addable" size="small" type="primary" plain @click="newHandler()">新增一行</TMagicButton>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref, watch } from 'vue';
+import { Delete } from '@element-plus/icons-vue';
+
+import { TMagicButton, TMagicIcon, 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 list = ref<any>([[]]);
+const addable = computed(() => Boolean(props.config.addable));
+if (props.name && props.model[props.name]) {
+  watch(
+    () => props.model[props.name],
+    (ranges) => {
+      if (Array.isArray(ranges) && ranges.length > 0) {
+        list.value = ranges;
+      }
+    },
+    {
+      immediate: true,
+    },
+  );
+}
+
+const changeHandler = (v: Date[], index: number) => {
+  const value = v || [];
+  list.value[index] = value.map((item?: Date) => {
+    if (item) return datetimeFormatter(item, '');
+    return undefined;
+  });
+  emit('change', list.value);
+};
+
+const newHandler = () => {
+  list.value.push([]);
+};
+
+const removeHandler = (index: number) => {
+  list.value.splice(index, 1);
+  emit('change', list.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';
@@ -118,6 +120,7 @@ export default {
     app.component('m-fields-datetime', DateTime);
     app.component('m-fields-daterange', Daterange);
     app.component('m-fields-time', Time);
+    app.component('m-fields-timerange', Timerange);
     app.component('m-fields-checkbox', Checkbox);
     app.component('m-fields-switch', Switch);
     app.component('m-fields-color-picker', ColorPicker);