refactor(sj_1.1.0-beta1): 时间筛选条件统一方案

src/components/common/datetime-range.vue

@@ -1,67 +0,0 @@
-<script setup lang="ts">
-import dayjs from 'dayjs';
-import { ref, watch } from 'vue';
-
-defineOptions({
-  name: 'DatetimeRange'
-});
-
-interface Props {
-  beginDate?: number | null;
-  endDate?: number | null;
-}
-
-const props = defineProps<Props>();
-
-interface Emits {
-  (e: 'update:beginDate', beginDate: number | null): void;
-  (e: 'update:endDate', endDate: number | null): void;
-}
-const emit = defineEmits<Emits>();
-
-const dateRange = ref<[number, number] | undefined>(getDefaultDate());
-
-watch(
-  () => [props.beginDate, props.endDate],
-  val => {
-    if (!val[0] && !val[1]) {
-      dateRange.value = undefined;
-    }
-  }
-);
-
-watch(
-  () => dateRange.value,
-  val => {
-    emit('update:beginDate', val ? val[0] : null);
-    emit('update:endDate', val ? val[1] : null);
-  },
-  { immediate: true }
-);
-
-function getDefaultDate(): [number, number] {
-  const endOfDayTimestamp = dayjs().endOf('day').valueOf();
-  const startOfDayOneMonthAgoTimestamp = dayjs().subtract(1, 'month').startOf('day').valueOf();
-  return [startOfDayOneMonthAgoTimestamp, endOfDayTimestamp];
-}
-
-function initDefaultDate() {
-  const beginDate = props.beginDate;
-  if (typeof beginDate === 'number' && beginDate) {
-    dateRange.value![0] = beginDate;
-  }
-
-  const endDate = props.endDate;
-  if (typeof endDate === 'number' && endDate) {
-    dateRange.value![1] = endDate;
-  }
-}
-
-initDefaultDate();
-</script>
-
-<template>
-  <NDatePicker v-model:value="dateRange" class="w-full" type="datetimerange" clearable />
-</template>
-
-<style scoped lang="scss"></style>

src/typings/api.d.ts

@@ -272,8 +272,7 @@ declare namespace Api {
       groupName?: string;
       type: DashboardLineType;
       mode?: DashboardLineMode;
-      startTime?: string;
+      datetimeRange?: [string, string] | null;
-      endTime?: string;
     } & CommonSearchParams;
 
     /**
@@ -703,7 +702,7 @@ declare namespace Api {
         Api.RetryDeadLetter.DeadLetter,
         'id' | 'uniqueId' | 'groupName' | 'sceneName' | 'idempotentId' | 'bizNo' | 'taskType' | 'createDt'
       > &
-        CommonSearchParams & { beginDate: number; endDate: number }
+        CommonSearchParams & { datetimeRange?: [string, string] }
     >;
 
     /** DeadLetter list */
@@ -1080,7 +1079,7 @@ declare namespace Api {
     /** JobBatch search params */
     type JobBatchSearchParams = CommonType.RecordNullable<
       Pick<Api.JobBatch.JobBatch, 'groupName' | 'jobName' | 'taskBatchStatus'> &
-        CommonSearchParams & { beginDate: number; endDate: number }
+        CommonSearchParams & { datetimeRange?: [string, string] }
     >;
 
     /** JobBatch list */
@@ -1116,7 +1115,7 @@ declare namespace Api {
     /** workflowBatch search params */
     type WorkflowBatchSearchParams = CommonType.RecordNullable<
       Pick<Api.WorkflowBatch.WorkflowBatch, 'workflowId' | 'groupName' | 'taskBatchStatus'> &
-        CommonSearchParams & { beginDate: number; endDate: number }
+        CommonSearchParams & { datetimeRange?: [string, string] }
     >;
 
     /** workflowBatch list */
@@ -1166,7 +1165,7 @@ declare namespace Api {
     /** retryLog search params */
     type RetryLogSearchParams = CommonType.RecordNullable<
       Pick<Api.RetryLog.RetryLog, 'uniqueId' | 'groupName' | 'sceneName' | 'idempotentId' | 'bizNo' | 'retryStatus'> &
-        CommonSearchParams & { beginDate: number; endDate: number }
+        CommonSearchParams & { datetimeRange?: [string, string] }
     >;
 
     /** retryLog list */

src/views/home/modules/task-tab.vue

@@ -26,12 +26,9 @@ const tabParams = ref<Api.Dashboard.DashboardLineParams>({
   type: 'WEEK',
   page: 1,
   size: 6,
-  mode: 'JOB'
+  mode: 'JOB',
+  datetimeRange: null
 });
-const dateRange = ref<[number, number] | null>();
-const formattedValue = ref<[string, string] | null>(
-  tabParams.value.startTime && tabParams.value.endTime ? [tabParams.value.startTime, tabParams.value.endTime] : null
-);
 
 const getData = async () => {
   const { data: lineData, error } =
@@ -70,23 +67,16 @@ const onUpdateTab = (value: string) => {
 const onUpdateDate = (value: [string, string]) => {
   if (value) {
     tabParams.value.type = 'OTHERS';
-    tabParams.value.startTime = value[0];
-    tabParams.value.endTime = value[1];
   }
 };
 
 const onClearDate = () => {
   tabParams.value.type = 'WEEK';
-  tabParams.value.startTime = undefined;
-  tabParams.value.endTime = undefined;
 };
 
 const onUpdateType = (value: string) => {
   if (value !== 'OTHERS') {
-    dateRange.value = null;
+    tabParams.value.datetimeRange = null;
-    formattedValue.value = null;
-    tabParams.value.startTime = undefined;
-    tabParams.value.endTime = undefined;
   }
 };
 
@@ -214,12 +204,12 @@ getGroupNames();
         <NRadioButton value="YEAR" :label="$t('page.home.retryTab.params.year')" />
       </NRadioGroup>
       <NDatePicker
-        v-model:value="dateRange"
+        v-model:formatted-value="tabParams.datetimeRange"
-        v-model:formatted-value="formattedValue"
+        type="datetimerange"
-        value-format="yyyy-MM-dd HH:mm:ss"
+        value-format="yyyy-MM-dd'T'HH:mm:ss"
-        type="daterange"
+        class="w-400px"
-        class="w-300px lg:w-230px md:w-270px"
         clearable
+        :default-time="['00:00:00', '23:56:56']"
         @update:formatted-value="onUpdateDate"
         @clear="onClearDate"
       />

src/views/job/batch/index.vue

@@ -27,8 +27,10 @@ const { columnChecks, columns, data, getData, loading, mobilePagination, searchP
     groupName: null,
     jobName: null,
     taskBatchStatus: null,
-    beginDate: null,
+    datetimeRange: null
-    endDate: null
+
+    // beginDate: null,
+    // endDate: null
   },
   searchParams: {
     jobName,

src/views/job/batch/modules/job-batch-search.vue

@@ -36,8 +36,20 @@ function search() {
     <NFormItemGi span="24 s:12 m:6" :label="$t('page.jobBatch.taskBatchStatus')" path="taskBatchStatus" class="pr-24px">
       <TaskBatchStatus v-model:value="model.taskBatchStatus" />
     </NFormItemGi>
-    <NFormItemGi span="24 s:24 m:15 l:12 xl:9" :label="$t('page.common.createTime')" path="createTime" class="pr-24px">
+    <NFormItemGi
-      <DatetimeRange v-model:begin-date="model.beginDate" v-model:end-date="model.endDate" />
+      span="24 s:24 m:15 l:12 xl:9"
+      :label="$t('page.common.createTime')"
+      path="datetimeRange"
+      class="pr-24px"
+    >
+      <NDatePicker
+        v-model:formatted-value="model.datetimeRange"
+        class="w-full"
+        type="datetimerange"
+        value-format="yyyy-MM-dd'T'HH:mm:ss"
+        :default-time="['00:00:00', '23:56:56']"
+        clearable
+      />
     </NFormItemGi>
   </SearchForm>
 </template>

src/views/retry/dead-letter/index.vue

@@ -31,8 +31,7 @@ const { columns, columnChecks, data, getData, loading, mobilePagination, searchP
     size: 10,
     groupName: null,
     sceneName: null,
-    beginDate: null,
+    datetimeRange: null
-    endDate: null
     // if you want to use the searchParams in Form, you need to define the following properties, and the value is null
     // the value can not be undefined, otherwise the property in Form will not be reactive
   },

src/views/retry/dead-letter/modules/dead-letter-search.vue

@@ -33,8 +33,20 @@ function search() {
     <NFormItemGi span="24 s:12 m:6" :label="$t('page.retryLog.sceneName')" path="sceneName" class="pr-24px">
       <SelectScene v-model:value="model.sceneName" :group-name="model.groupName as string" />
     </NFormItemGi>
-    <NFormItemGi span="24 s:24 m:15 l:12 xl:9" :label="$t('page.common.createTime')" path="createTime" class="pr-24px">
+    <NFormItemGi
-      <DatetimeRange v-model:begin-date="model.beginDate" v-model:end-date="model.endDate" />
+      span="24 s:24 m:15 l:12 xl:9"
+      :label="$t('page.common.createTime')"
+      path="datetimeRange"
+      class="pr-24px"
+    >
+      <NDatePicker
+        v-model:formatted-value="model.datetimeRange"
+        class="w-full"
+        type="datetimerange"
+        value-format="yyyy-MM-dd'T'HH:mm:ss"
+        :default-time="['00:00:00', '23:56:56']"
+        clearable
+      />
     </NFormItemGi>
   </SearchForm>
 </template>

src/views/retry/log/index.vue

@@ -32,8 +32,7 @@ const { columns, columnChecks, data, getData, loading, mobilePagination, searchP
     idempotentId: null,
     bizNo: null,
     retryStatus: null,
-    beginDate: null,
+    datetimeRange: null
-    endDate: null
   },
   searchParams: {
     retryStatus

src/views/retry/log/modules/retry-log-search.vue

@@ -52,8 +52,20 @@ function search() {
         clearable
       />
     </NFormItemGi>
-    <NFormItemGi span="24 s:24 m:15 l:12 xl:9" :label="$t('page.common.createTime')" path="createTime" class="pr-24px">
+    <NFormItemGi
-      <DatetimeRange v-model:begin-date="model.beginDate" v-model:end-date="model.endDate" />
+      span="24 s:24 m:15 l:12 xl:9"
+      :label="$t('page.common.createTime')"
+      path="datetimeRange"
+      class="pr-24px"
+    >
+      <NDatePicker
+        v-model:formatted-value="model.datetimeRange"
+        class="w-full"
+        type="datetimerange"
+        value-format="yyyy-MM-dd'T'HH:mm:ss"
+        :default-time="['00:00:00', '23:56:56']"
+        clearable
+      />
     </NFormItemGi>
   </SearchForm>
 </template>

src/views/workflow/batch/index.vue

@@ -23,8 +23,7 @@ const { columns, columnChecks, data, getData, loading, mobilePagination, searchP
     workflowId: null,
     groupName: null,
     taskBatchStatus: null,
-    beginDate: null,
+    datetimeRange: null
-    endDate: null
   },
   searchParams: {
     workflowId,

src/views/workflow/batch/modules/workflow-batch-search.vue

@@ -67,8 +67,20 @@ groupNameUpdate('');
     >
       <TaskBatchStatus v-model:value="model.taskBatchStatus" />
     </NFormItemGi>
-    <NFormItemGi span="24 s:24 m:15 l:12 xl:9" :label="$t('page.common.createTime')" path="createTime" class="pr-24px">
+    <NFormItemGi
-      <DatetimeRange v-model:begin-date="model.beginDate" v-model:end-date="model.endDate" />
+      span="24 s:24 m:15 l:12 xl:9"
+      :label="$t('page.common.createTime')"
+      path="datetimeRange"
+      class="pr-24px"
+    >
+      <NDatePicker
+        v-model:formatted-value="model.datetimeRange"
+        class="w-full"
+        type="datetimerange"
+        value-format="yyyy-MM-dd'T'HH:mm:ss"
+        :default-time="['00:00:00', '23:56:56']"
+        clearable
+      />
     </NFormItemGi>
   </SearchForm>
 </template>