From a07016214f58f95a18a2da0dbb8bf8849857a454 Mon Sep 17 00:00:00 2001
From: xlsea <m@xlsea.cn>
Date: Thu, 13 Jun 2024 09:58:56 +0800
Subject: [PATCH] =?UTF-8?q?feat(sj=5F1.1.0=5Fbeta1):=20=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E6=97=B6=E9=97=B4=E8=8C=83=E5=9B=B4=E6=9F=A5=E8=AF=A2=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/datetime-range.vue      | 60 +++++++++++++++++++
 src/components/common/search-form.vue         |  5 +-
 src/typings/api.d.ts                          |  3 +-
 src/views/job/batch/index.vue                 |  4 +-
 .../job/batch/modules/job-batch-search.vue    |  5 +-
 5 files changed, 72 insertions(+), 5 deletions(-)
 create mode 100644 src/components/common/datetime-range.vue

diff --git a/src/components/common/datetime-range.vue b/src/components/common/datetime-range.vue
new file mode 100644
index 0000000..0da5818
--- /dev/null
+++ b/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>
diff --git a/src/components/common/search-form.vue b/src/components/common/search-form.vue
index 991299e..d4ba9b4 100644
--- a/src/components/common/search-form.vue
+++ b/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">
diff --git a/src/typings/api.d.ts b/src/typings/api.d.ts
index 0a8350e..9cc03cf 100644
--- a/src/typings/api.d.ts
+++ b/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 */
diff --git a/src/views/job/batch/index.vue b/src/views/job/batch/index.vue
index 075c640..d618a1d 100644
--- a/src/views/job/batch/index.vue
+++ b/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,
diff --git a/src/views/job/batch/modules/job-batch-search.vue b/src/views/job/batch/modules/job-batch-search.vue
index 2df1836..d9e8fd7 100644
--- a/src/views/job/batch/modules/job-batch-search.vue
+++ b/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>