fix: 修复时间选择器手动输入无效的问题 (#89)

# Reviewed, transaction id: 15228
ielgnaw · Aug 14, 2024 · 7ca1ea2 · 7ca1ea2
1 parent ac9b794
commit 7ca1ea2
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 3 deletions.
diff --git a/src/dashboard-front/src/language/lang.ts b/src/dashboard-front/src/language/lang.ts
@@ -237,6 +237,7 @@ const lang: ILANG = {
   '访问地址': ['Access URL'],
   '子路径': ['Subpath'],
   '选择日期时间范围': ['Select date and time range'],
+  '输入的时间错误': ['Invalid Time Format'],
   '隐藏示例': ['Hide example'],
   '显示示例': ['Show example'],
   '创建时间': ['Create Time'],

diff --git a/src/dashboard-front/src/views/operate-data/access-log/index.vue b/src/dashboard-front/src/views/operate-data/access-log/index.vue
@@ -25,7 +25,10 @@
                     :use-shortcut-text="true"
                     :clearable="false"
                     :shortcut-selected-index="shortcutSelectedIndex"
-                    @shortcut-change="handleShortcutChange" @change="handlePickerChange" />
+                    @shortcut-change="handleShortcutChange"
+                    @change="handlePickerChange"
+                    @pick-success="handlePickerConfirm"
+                  />
                 </bk-form-item>
                 <bk-form-item :label="t('环境')">
                   <bk-select
@@ -687,6 +690,17 @@ const handlePickerChange = () => {
   });
 };
 
+// 处理用户自行输入日期，点击确认后的情况。v-model 不会自动更新，要从 picker 内部拿输入的日期。
+const handlePickerConfirm = () => {
+  const internalValue = datePickerRef.value?.internalValue;
+  if (internalValue) {
+    dateTimeRange.value = internalValue;
+    handlePickerChange();
+  } else {
+    Message({ theme: 'warning', message: t('输入的时间错误'), delay: 2000, dismissable: false });
+  }
+};
+
 const handleStageChange = (value: number) => {
   searchParams.value.stage_id = value;
   pagination.value.current = 1;

diff --git a/src/dashboard-front/src/views/operate-data/report/index.vue b/src/dashboard-front/src/views/operate-data/report/index.vue
@@ -432,7 +432,13 @@ const handleResourceChange = (value: any) => {
 };
 
 const handleTimeChange = () => {
-  getDataByDimension();
+  const internalValue = datePickerRef.value?.internalValue;
+  if (internalValue) {
+    dateTimeRange.value = internalValue;
+    getDataByDimension();
+  } else {
+    Message({ theme: 'warning', message: t('输入的时间错误'), delay: 2000, dismissable: false });
+  }
 };
 
 const handleShortcutChange = (value: any, index: number) => {

diff --git a/src/dashboard-front/src/views/operate-records/index.vue b/src/dashboard-front/src/views/operate-records/index.vue
@@ -100,6 +100,7 @@ import {
   TableEmptyConfType,
 } from './common/type';
 import { fetchApigwAuditLogs } from '@/http';
+import { Message } from 'bkui-vue';
 
 const { t } = i18n.global;
 const AccessLogStore = useAccessLog();
@@ -355,7 +356,13 @@ const getOpObjectTypeText = (type: string) => {
 };
 
 const handleTimeChange = () => {
-  setSearchTimeRange();
+  const internalValue = topDatePicker.value?.internalValue;
+  if (internalValue) {
+    dateTimeRange.value = internalValue;
+    setSearchTimeRange();
+  } else {
+    Message({ theme: 'warning', message: t('输入的时间错误'), delay: 2000, dismissable: false });
+  }
 };
 
 const handleTimeClear = () => {