diff --git a/web/tenant/src/components/common/MobileRangeFilter.vue b/web/tenant/src/components/common/MobileRangeFilter.vue new file mode 100644 index 0000000..c30e1a8 --- /dev/null +++ b/web/tenant/src/components/common/MobileRangeFilter.vue @@ -0,0 +1,174 @@ + + + diff --git a/web/tenant/src/components/common/TableFilterForm.vue b/web/tenant/src/components/common/TableFilterForm.vue index 438673b..adf58c8 100644 --- a/web/tenant/src/components/common/TableFilterForm.vue +++ b/web/tenant/src/components/common/TableFilterForm.vue @@ -2,6 +2,7 @@ import { ref, computed, h } from 'vue' import { NForm, NFormItem, NInput, NSelect, NDatePicker, NInputNumber, NButton, NDrawer, NDrawerContent } from 'naive-ui' import Icon from './Icon.vue' +import MobileRangeFilter from './MobileRangeFilter.vue' // 表单字段配置类型 export interface FilterField { @@ -165,23 +166,41 @@ const renderField = (field: FilterField) => { }) case 'daterange': + // 移动端抽屉:用快捷范围 + 原生输入替代日历面板(面板固定宽度,移动端会溢出屏幕) + if (useDrawer.value) { + return h(MobileRangeFilter, { + modelValue: modelValue.value[field.key], + 'onUpdate:modelValue': (val: [number, number] | null) => { modelValue.value[field.key] = val }, + type: 'daterange', + shortcuts: field.shortcuts || defaultShortcuts, + }) + } return h(NDatePicker, { value: modelValue.value[field.key], 'onUpdate:value': (val: [number, number] | null) => { modelValue.value[field.key] = val }, type: 'daterange', placeholder: field.placeholder || '选择日期范围', - style: { width: useDrawer.value ? '100%' : (field.width || '280px') }, + style: { width: field.width || '280px' }, clearable: field.clearable !== false, }) case 'datetimerange': + // 移动端抽屉:用快捷范围 + 原生输入替代日历面板(面板固定宽度,移动端会溢出屏幕) + if (useDrawer.value) { + return h(MobileRangeFilter, { + modelValue: modelValue.value[field.key], + 'onUpdate:modelValue': (val: [number, number] | null) => { modelValue.value[field.key] = val }, + type: 'datetimerange', + shortcuts: field.shortcuts || defaultShortcuts, + }) + } return h(NDatePicker, { value: modelValue.value[field.key], 'onUpdate:value': (val: [number, number] | null) => { modelValue.value[field.key] = val }, type: 'datetimerange', shortcuts: field.shortcuts || defaultShortcuts, placeholder: field.placeholder || '选择时间范围', - style: { width: useDrawer.value ? '100%' : (field.width || '400px') }, + style: { width: field.width || '400px' }, clearable: field.clearable !== false, actions: ['clear', 'confirm'], }) diff --git a/web/tenant/src/views/Layout.vue b/web/tenant/src/views/Layout.vue index 5fb5e0d..d23a15c 100644 --- a/web/tenant/src/views/Layout.vue +++ b/web/tenant/src/views/Layout.vue @@ -233,7 +233,7 @@ onBeforeUnmount(() => {