feat(sj_1.1.0_beta1): 新增时间范围查询组件

src/components/common/datetime-range.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+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): void;
+  (e: 'update:endDate', endDate: number): void;
+}
+const emit = defineEmits<Emits>();
+
+const dateRange = ref<[number, number]>(getDefaultDate());
+
+watch(
+  () => props.beginDate,
+  beginDate => {
+    if (typeof beginDate === 'number' && beginDate) {
+      dateRange.value[0] = beginDate;
+    }
+  },
+  { immediate: true }
+);
+
+watch(
+  () => props.endDate,
+  endDate => {
+    if (typeof endDate === 'number' && endDate) {
+      dateRange.value[1] = endDate;
+    }
+  },
+  { immediate: true }
+);
+
+function getDefaultDate(): [number, number] {
+  const currentDate = new Date();
+  const currentTime = currentDate.getTime();
+  currentDate.setMonth(currentDate.getMonth() - 1);
+  return [currentDate.getTime(), currentTime];
+}
+
+function onChange(value: [number, number]) {
+  emit('update:beginDate', value[0]);
+  emit('update:endDate', value[1]);
+}
+</script>
+
+<template>
+  <NDatePicker v-model:value="dateRange" class="w-full" type="datetimerange" clearable @update:value="onChange" />
+</template>
+
+<style scoped lang="scss"></style>

src/components/common/search-form.vue

@@ -10,6 +10,7 @@ defineOptions({
 
 interface Props {
   model: Record<string, any>;
+  btnSpan?: string;
 }
 
 const props = defineProps<Props>();
@@ -41,14 +42,14 @@ async function search() {
 
 const btnSpan = computed(() => {
   const keyNum = Object.keys(props.model).length - 2;
-  return `24 m:12 m:${(4 - (keyNum % 4)) * 6}`;
+  return props.btnSpan || `24 m:12 m:${(4 - (keyNum % 4)) * 6}`;
 });
 </script>
 
 <template>
   <NCard :title="title" :bordered="false" size="small" class="card-wrapper">
     <NForm ref="formRef" :model="model" label-placement="left" :label-width="80" :show-feedback="appStore.isMobile">
-      <NGrid responsive="screen" item-responsive :y-gap="5">
+      <NGrid responsive="screen" item-responsive :y-gap="8">
         <slot></slot>
         <NFormItemGi :y-gap="8" :span="btnSpan" class="pr-24px lg:p-t-0 md:p-t-16px">
           <NSpace class="min-w-172px w-full" justify="end">

src/typings/api.d.ts

@@ -1079,7 +1079,8 @@ declare namespace Api {
 
     /** JobBatch search params */
     type JobBatchSearchParams = CommonType.RecordNullable<
-      Pick<Api.JobBatch.JobBatch, 'groupName' | 'jobName' | 'taskBatchStatus'> & CommonSearchParams
+      Pick<Api.JobBatch.JobBatch, 'groupName' | 'jobName' | 'taskBatchStatus'> &
+        CommonSearchParams & { beginDate: number; endDate: number }
     >;
 
     /** JobBatch list */

src/views/job/batch/index.vue

@@ -26,7 +26,9 @@ const { columnChecks, columns, data, getData, loading, mobilePagination, searchP
     size: 10,
     groupName: null,
     jobName: null,
-    taskBatchStatus: null
+    taskBatchStatus: null,
+    beginDate: null,
+    endDate: null
   },
   searchParams: {
     jobName,

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

@@ -26,7 +26,7 @@ function search() {
 </script>
 
 <template>
-  <SearchForm :model="model" @search="search" @reset="reset">
+  <SearchForm btn-span="24 s:24 m:9 l:12 xl:15" :model="model" @search="search" @reset="reset">
     <NFormItemGi span="24 s:12 m:6" :label="$t('page.jobBatch.groupName')" path="groupName" class="pr-24px">
       <SelectGroup v-model:value="model.groupName" />
     </NFormItemGi>
@@ -36,6 +36,9 @@ 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">
+      <DatetimeRange v-model:begin-date="model.beginDate" v-model:end-date="model.endDate" />
+    </NFormItemGi>
   </SearchForm>
 </template>