feat(form): 新增数字范围控件

packages/form/src/fields/NumberRange.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="m-fields-number-range">
+    <TMagicInput
+      v-model="model[name][0]"
+      clearable
+      :size="size"
+      :disabled="disabled"
+      @change="minChangeHandler"
+    ></TMagicInput>
+    <span class="split-tag">-</span>
+    <TMagicInput
+      v-model="model[name][1]"
+      clearable
+      :size="size"
+      :disabled="disabled"
+      @change="maxChangeHandler"
+    ></TMagicInput>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { TMagicInput } from '@tmagic/design';
+
+import type { NumberRangeConfig } from '../schema';
+import { useAddField } from '../utils/useAddField';
+
+defineOptions({
+  name: 'MFormNumberRange',
+});
+
+const props = defineProps<{
+  config: NumberRangeConfig;
+  model: any;
+  initValues?: any;
+  values?: any;
+  name: string;
+  prop: string;
+  disabled?: boolean;
+  size?: 'large' | 'default' | 'small';
+  lastValues?: Record<string, any>;
+}>();
+
+const emit = defineEmits<{
+  change: [values: [number, number]];
+}>();
+
+useAddField(props.prop);
+
+if (!Array.isArray(props.model[props.name])) {
+  props.model[props.name] = [];
+}
+
+const minChangeHandler = (v: string) => {
+  emit('change', [Number(v), props.model[props.name][1]]);
+};
+
+const maxChangeHandler = (v: string) => {
+  emit('change', [props.model[props.name][0], Number(v)]);
+};
+</script>

packages/form/src/index.ts

@@ -38,6 +38,7 @@ import DynamicField from './fields/DynamicField.vue';
 import Hidden from './fields/Hidden.vue';
 import Link from './fields/Link.vue';
 import Number from './fields/Number.vue';
+import NumberRange from './fields/NumberRange.vue';
 import RadioGroup from './fields/RadioGroup.vue';
 import Select from './fields/Select.vue';
 import Switch from './fields/Switch.vue';
@@ -66,6 +67,7 @@ export { default as MTable } from './containers/Table.vue';
 export { default as MGroupList } from './containers/GroupList.vue';
 export { default as MText } from './fields/Text.vue';
 export { default as MNumber } from './fields/Number.vue';
+export { default as MNumberRange } from './fields/NumberRange.vue';
 export { default as MTextarea } from './fields/Textarea.vue';
 export { default as MHidden } from './fields/Hidden.vue';
 export { default as MDate } from './fields/Date.vue';
@@ -109,6 +111,7 @@ export default {
     app.component('m-form-tab', Tabs);
     app.component('m-fields-text', Text);
     app.component('m-fields-number', Number);
+    app.component('m-fields-number-range', NumberRange);
     app.component('m-fields-textarea', Textarea);
     app.component('m-fields-hidden', Hidden);
     app.component('m-fields-date', Date);

packages/form/src/schema.ts

@@ -339,6 +339,13 @@ export interface NumberConfig extends FormItem {
   placeholder?: string;
 }
 
+/**
+ * 数值范围
+ */
+export interface NumberRangeConfig extends FormItem {
+  type?: 'number-range';
+}
+
 /**
  * 隐藏域
  */

packages/form/src/theme/index.scss

@@ -9,3 +9,4 @@
 @use "./table.scss";
 @use "./select.scss";
 @use "./tabs.scss";
+@use "./number-range.scss";

packages/form/src/theme/number-range.scss

@@ -0,0 +1,8 @@
+.m-fields-number-range {
+  display: flex;
+  align-items: center;
+
+  .split-tag {
+    margin: 0 5px;
+  }
+}

packages/form/src/utils/form.ts

@@ -174,7 +174,7 @@ const getDefaultValue = function (mForm: FormState | undefined, { defaultValue,
     return false;
   }
 
-  if (multiple) {
+  if (multiple || type === 'number-range') {
     return [];
   }