feat(sj_1.1.0-beta1): 重新封装DatetimeRange组件并复用

src/components/common/datetime-range.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import dayjs from 'dayjs';
+import { $t } from '@/locales';
+
+defineOptions({
+  name: 'DatetimeRange'
+});
+
+const DATETIME_FORMAT_ISO8601 = "yyyy-MM-dd'T'HH:mm:ss";
+
+/** 创建 `过去n个自然月` 时间区间 */
+const monthRange = (months: number) =>
+  [
+    dayjs()
+      .subtract(months - 1, 'month')
+      .startOf('month')
+      .valueOf(),
+    dayjs().endOf('day').valueOf()
+  ] as const;
+
+const modelValue = defineModel<[string, string] | null>('value');
+
+interface Props {
+  noDefault?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  noDefault: false
+});
+
+const onUpdateFormattedValue = (formattedValue: [string, string] | null) => {
+  modelValue.value = formattedValue;
+};
+
+const timestampValue = ref<[number, number] | null>(props.noDefault ? null : [...monthRange(1)]);
+
+const createShortcuts = () => {
+  const shortcuts: any = {};
+  shortcuts[$t('common.currentMonth')] = monthRange(1);
+  shortcuts[$t('common.lastMonth')] = monthRange(2);
+  shortcuts[$t('common.lastTwoMonth')] = monthRange(3);
+  return shortcuts;
+};
+</script>
+
+<template>
+  <NDatePicker
+    v-model:value="timestampValue"
+    type="datetimerange"
+    :value-format="DATETIME_FORMAT_ISO8601"
+    class="w-400px"
+    clearable
+    :default-time="['00:00:00', '23:56:56']"
+    :shortcuts="createShortcuts()"
+    :actions="['clear', 'confirm']"
+    @update:formatted-value="onUpdateFormattedValue"
+  />
+</template>
+
+<style scoped lang="scss"></style>

src/locales/langs/en-us.ts

@@ -185,7 +185,10 @@ const local: App.I18n.Schema = {
       }
     },
     updateDt: 'Updated Time',
-    createDt: 'Created Time'
+    createDt: 'Created Time',
+    currentMonth: 'Current Month',
+    lastMonth: 'Last Month',
+    lastTwoMonth: 'Last 2 Month'
   },
   request: {
     logout: 'Logout user after request failed',

src/locales/langs/zh-cn.ts

@@ -185,7 +185,10 @@ const local: App.I18n.Schema = {
       }
     },
     updateDt: '更新时间',
-    createDt: '创建时间'
+    createDt: '创建时间',
+    currentMonth: '当月',
+    lastMonth: '最近一月',
+    lastTwoMonth: '最近两月'
   },
   request: {
     logout: '请求失败后登出用户',

src/typings/app.d.ts

@@ -436,6 +436,9 @@ declare namespace App {
         };
         updateDt: string;
         createDt: string;
+        currentMonth: string;
+        lastMonth: string;
+        lastTwoMonth: string;
       };
       request: {
         logout: string;

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

@@ -4,6 +4,7 @@ import type { DataTableColumns } from 'naive-ui';
 import { $t } from '@/locales';
 import { useAppStore } from '@/store/modules/app';
 import { fetchAllGroupName, fetchJobLine, fetchRetryLine } from '@/service/api';
+import DatetimeRange from '@/components/common/datetime-range.vue';
 import TaskLineChart from './task-line-chart.vue';
 import TaskPieChart from './task-pie-chart.vue';
 
@@ -64,7 +65,7 @@ const onUpdateTab = (value: string) => {
   }
 };
 
-const onUpdateDate = (value: [string, string]) => {
+const onUpdateDate = (value: [string, string] | null) => {
   if (value) {
     tabParams.value.type = 'OTHERS';
   }
@@ -203,14 +204,10 @@ getGroupNames();
         <NRadioButton value="MONTH" :label="$t('page.home.retryTab.params.month')" />
         <NRadioButton value="YEAR" :label="$t('page.home.retryTab.params.year')" />
       </NRadioGroup>
-      <NDatePicker
+      <DatetimeRange
-        v-model:formatted-value="tabParams.datetimeRange"
+        v-model:value="tabParams.datetimeRange"
-        type="datetimerange"
+        no-default
-        value-format="yyyy-MM-dd'T'HH:mm:ss"
+        @update:value="onUpdateDate"
-        class="w-400px"
-        clearable
-        :default-time="['00:00:00', '23:56:56']"
-        @update:formatted-value="onUpdateDate"
         @clear="onClearDate"
       />
       <NSelect v-model:value="tabParams.groupName" :options="groupOptions" class="w-200px lg:w-150px md:w-170px" />

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

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import SelectGroup from '@/components/common/select-group.vue';
 import TaskBatchStatus from '@/components/common/task-batch-status.vue';
+import DatetimeRange from '@/components/common/datetime-range.vue';
 import { $t } from '@/locales';
 
 defineOptions({
@@ -42,14 +43,7 @@ function search() {
       path="datetimeRange"
       class="pr-24px"
     >
-      <NDatePicker
+      <DatetimeRange v-model:value="model.datetimeRange!" />
-        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/modules/dead-letter-search.vue

@@ -2,6 +2,7 @@
 import { $t } from '@/locales';
 import SelectGroup from '@/components/common/select-group.vue';
 import SelectScene from '@/components/common/select-scene.vue';
+import DatetimeRange from '@/components/common/datetime-range.vue';
 
 defineOptions({
   name: 'RetryDeadLetterSearch'
@@ -39,14 +40,7 @@ function search() {
       path="datetimeRange"
       class="pr-24px"
     >
-      <NDatePicker
+      <DatetimeRange v-model:value="model.datetimeRange!" />
-        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/modules/retry-log-search.vue

@@ -4,6 +4,7 @@ import { translateOptions } from '@/utils/common';
 import { retryTaskStatusTypeOptions } from '@/constants/business';
 import SelectGroup from '@/components/common/select-group.vue';
 import SelectScene from '@/components/common/select-scene.vue';
+import DatetimeRange from '@/components/common/datetime-range.vue';
 
 defineOptions({
   name: 'RetryLogSearch'
@@ -58,14 +59,7 @@ function search() {
       path="datetimeRange"
       class="pr-24px"
     >
-      <NDatePicker
+      <DatetimeRange v-model:value="model.datetimeRange!" />
-        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/modules/workflow-batch-search.vue

@@ -3,6 +3,7 @@ import { ref, watch } from 'vue';
 import { $t } from '@/locales';
 import SelectGroup from '@/components/common/select-group.vue';
 import TaskBatchStatus from '@/components/common/task-batch-status.vue';
+import DatetimeRange from '@/components/common/datetime-range.vue';
 
 import { fetchGetWorkflowNameList } from '@/service/api';
 
@@ -104,14 +105,7 @@ function translateOptions(options: Api.Workflow.Workflow[]) {
       path="datetimeRange"
       class="pr-24px"
     >
-      <NDatePicker
+      <DatetimeRange v-model:value="model.datetimeRange!" />
-        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>