微调

frontend/src/components/TimeControl/index.vue

@@ -22,6 +22,7 @@
         v-model='startDate'
         type='date'
         placeholder='起始时间'
+        @change="emitDateChange" 
         :disabled-date="disableStartDate"
         :readonly="timeUnit != '自定义'"
       ></el-date-picker>
@@ -31,6 +32,7 @@
         v-model='endDate'
         type='date'
         placeholder='结束时间'
+        @change="emitDateChange" 
         :disabled-date="disableEndDate"
         :readonly="timeUnit !== '自定义'"
       ></el-date-picker>
@@ -45,7 +47,7 @@
         <div class='left_triangle'></div>
       </el-button>
       <el-button class='triangle-button' type='primary' @click='goToCurrent'>
-        本{{ timeUnit }}
+       当前
       </el-button>
       <el-button
         style='width: 10px;'
@@ -63,21 +65,50 @@
 
 
 <script setup lang="ts">
-    import { watch,computed, ref,reactive ,onMounted, defineProps, defineEmits } from 'vue';
+    import {  ref ,onMounted, defineProps, defineEmits } from 'vue';
+ 
+ // 定义时间单位的类型
+interface TimeUnit {
+  label: string;
+  value: string;
+}
+// 定义组件的props，包含包括和排除的时间单位
+ const props = defineProps({
+                include: {
+                  type: Array as () => string[],
+                  default: () => ['日', '周', '月', '季度', '年', '自定义'],
+                },
+                exclude: {
+                  type: Array as () => string[],
+                  default: () => [],
+                },
+                default: {
+                  type: String,
+                  default: '日',
+                },
+});
 
-    const timeUnit = ref<string>('日'); // 默认选择按周
+    // 定义事件
+    const emit = defineEmits<{
+        (e: 'update-dates', startDate: Date, endDate: Date): void;
+    }>();
+    const timeUnit = ref<string>(props.default); // 默认选择
     const startDate = ref<Date>(new Date()); // 起始日期
     const endDate = ref<Date>(new Date()); // 结束日期
     const isNextDisabled = ref<boolean>(false); // 控制下一周期按钮的禁用状态
     const today = ref<Date>(new Date()); // 当前日期
-    const timeUnits = [
-      { label: '日', value: '日' },
-      { label: '周', value: '周' },
-      { label: '月', value: '月' },
-      { label: '季度', value: '季度' },
-      { label: '年', value: '年' },
-      { label: '自定义', value: '自定义' },
-    ];
+    // 过滤出可用的时间单位
+    const timeUnits = ref<TimeUnit[]>(
+      props.include.filter(unit => !props.exclude.includes(unit)).map(unit => ({
+        label: unit,
+        value: unit,
+      }))
+    );
+
+    // 发出日期变化事件
+    const emitDateChange = () => {
+      emit('update-dates', startDate.value, endDate.value);
+    };
 
     // 在组件挂载时更新日期范围
     onMounted(() => {
@@ -92,6 +123,8 @@
         startDate.value = new Date(new Date().setDate(new Date().getDate() - 1))
         endDate.value = new Date()
       }
+      timeUnit.value = unit;
+      emitDateChange(); // 变化时也发出更新事件
       updateNextButtonStatus()
     }
     const updateDateRange = () =>  {
@@ -218,3 +251,4 @@
 <style scoped lang='scss'>
 @import "./index.scss";
 </style>
+