8/19 账单-时间类型-自然/滚动

src/components/QuarterSelect/index.vue

@@ -0,0 +1,126 @@
+<template>
+  <div class="quarter-select">
+    <!-- 输入框，点击弹出popover -->
+    <el-popover v-model:visible="popoverVisible" placement="bottom-start" trigger="manual" width="240">
+      <div class="quarter-panel">
+        <!-- 年份切换 -->
+        <div class="year-header">
+          <el-button icon="ArrowLeft" size="small" circle @click="prevYear" />
+          <span class="current-year">{{ currentYear }}年</span>
+          <el-button icon="ArrowRight" size="small" circle @click="nextYear" />
+        </div>
+        <!-- 四个季度按钮 -->
+        <div class="quarter-buttons">
+          <el-button
+            v-for="q in 4"
+            :key="q"
+            style="margin: 0"
+            :type="isSelected(currentYear, q) ? 'primary' : ''"
+            :disabled="isDisabledQuarter(currentYear, q)"
+            @click="handleSelect(currentYear, q)"
+          >
+            第{{ q }}季度
+          </el-button>
+        </div>
+      </div>
+      <!-- 触发源 -->
+      <template #reference>
+        <el-input
+          :model-value="displayText"
+          placeholder="请选择季度"
+          readonly
+          suffix-icon="Calendar"
+          @click="popoverVisible = true"
+          clearable
+          @clear="handleClear"
+        />
+      </template>
+    </el-popover>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+
+// 外部v‑model绑定
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: '' // "2026‑1"
+  }
+});
+const emit = defineEmits(['update:modelValue', 'change']);
+
+// popover弹窗
+const popoverVisible = ref(false);
+
+// 解析回显的季度值 2026‑1
+const parseQuarter = (str) => {
+  if (!str) return { year: new Date().getFullYear(), quarter: null };
+  const [y, q] = str.split('-').map(Number);
+  return { year: y, quarter: q };
+};
+
+const { year: initYear } = parseQuarter(props.modelValue);
+const currentYear = ref(initYear);
+console.log(currentYear.value, typeof currentYear.value);
+
+// 输入框展示文本
+const displayText = computed(() => {
+  if (!props.modelValue) return '';
+  console.log(props.modelValue, props.modelValue.trim().split('-'));
+  const [y, q] = props.modelValue.split('-').map(Number);
+  return `${y}年${q}季度`;
+});
+
+// 是否选中该季度
+const isSelected = (y, q) => {
+  return props.modelValue === `${y}-${q}`;
+};
+
+// --------------------------
+// 【这里写你的禁用逻辑】仿照 disabled‑date
+// return true 禁用该季度
+// --------------------------
+const isDisabledQuarter = () => {
+  return false;
+};
+
+// 切换年份
+const prevYear = () => currentYear.value--;
+const nextYear = () => currentYear.value++;
+
+// 选中季度
+const handleSelect = (y, q) => {
+  const val = `${y}-${q}`;
+  emit('update:modelValue', val);
+  emit('change', val);
+  popoverVisible.value = false;
+};
+
+// 清空
+const handleClear = () => {
+  emit('update:modelValue', '');
+  emit('change', '');
+};
+</script>
+
+<style scoped>
+.quarter-panel {
+  padding: 12px;
+}
+.year-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12px;
+}
+.current-year {
+  font-weight: 500;
+}
+.quarter-buttons {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+}
+</style>