时间范围筛选优化

2026-06-04 10:51:35 +08:00
parent 32f8e19bf1
commit ff61e815d8
6 changed files with 560 additions and 172 deletions
@@ -0,0 +1,91 @@
+<template>
+    <template v-if="variant === 'split'">
+        <el-form-item :label="label" :class="{ 'is-compact': compact }">
+            <el-radio-group v-model="timeType" :size="compact ? 'small' : 'default'" @change="emit('time-type-change')">
+                <el-radio-button label="today">今天</el-radio-button>
+                <el-radio-button label="yesterday">昨天</el-radio-button>
+                <el-radio-button label="week">最近7天</el-radio-button>
+                <el-radio-button label="month">本月</el-radio-button>
+                <el-radio-button label="custom">自定义</el-radio-button>
+            </el-radio-group>
+        </el-form-item>
+        <el-form-item v-if="timeType === 'custom'">
+            <el-date-picker
+                v-model="dateRangeModel"
+                type="daterange"
+                value-format="YYYY-MM-DD"
+                range-separator="至"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+                :size="compact ? 'small' : 'default'"
+                :style="{ width: pickerWidth }"
+                @change="emit('custom-change')"
+            />
+        </el-form-item>
+    </template>
+    <el-form-item v-else :label="label" :class="{ 'is-compact': compact }">
+        <div class="list-time-filter-inline">
+            <el-radio-group v-model="timeType" :size="compact ? 'small' : 'default'" @change="emit('time-type-change')">
+                <el-radio-button label="today">今天</el-radio-button>
+                <el-radio-button label="yesterday">昨天</el-radio-button>
+                <el-radio-button label="week">最近7天</el-radio-button>
+                <el-radio-button label="month">本月</el-radio-button>
+                <el-radio-button label="custom">自定义</el-radio-button>
+            </el-radio-group>
+            <el-date-picker
+                v-if="timeType === 'custom'"
+                v-model="dateRangeModel"
+                type="daterange"
+                value-format="YYYY-MM-DD"
+                range-separator="至"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+                :size="compact ? 'small' : 'default'"
+                :style="{ width: pickerWidth }"
+                @change="emit('custom-change')"
+            />
+        </div>
+    </el-form-item>
+</template>
+
+<script lang="ts" setup>
+import type { ListTimeType } from '@/hooks/useListTimeFilter'
+
+withDefaults(
+    defineProps<{
+        label?: string
+        /** split：与自录统计一致，两个 form-item；inline：处方订单筛选用单行 */
+        variant?: 'split' | 'inline'
+        pickerWidth?: string
+        /** 紧凑模式：small 尺寸 radio / 日期 */
+        compact?: boolean
+    }>(),
+    {
+        label: '时间范围',
+        variant: 'split',
+        pickerWidth: '260px',
+        compact: false,
+    }
+)
+
+const timeType = defineModel<ListTimeType>('timeType', { required: true })
+const dateRangeModel = defineModel<string[]>('dateRange', { default: () => [] })
+
+const emit = defineEmits<{
+    'time-type-change': []
+    'custom-change': []
+}>()
+</script>
+
+<style scoped lang="scss">
+.list-time-filter-inline {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 6px 8px;
+}
+
+:deep(.is-compact.el-form-item) {
+    margin-bottom: 0;
+}
+</style>