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

This commit is contained in:
dhb52 2024-06-17 14:21:25 +08:00
parent 964316b1f9
commit 1c7b0732e4
11 changed files with 76 additions and 107 deletions

View File

@ -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>

11
src/typings/api.d.ts vendored
View File

@ -272,8 +272,7 @@ declare namespace Api {
groupName?: string;
type: DashboardLineType;
mode?: DashboardLineMode;
startTime?: string;
endTime?: string;
datetimeRange?: [string, string] | null;
} & 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 */

View File

@ -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;
formattedValue.value = null;
tabParams.value.startTime = undefined;
tabParams.value.endTime = undefined;
tabParams.value.datetimeRange = null;
}
};
@ -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="formattedValue"
value-format="yyyy-MM-dd HH:mm:ss"
type="daterange"
class="w-300px lg:w-230px md:w-270px"
v-model:formatted-value="tabParams.datetimeRange"
type="datetimerange"
value-format="yyyy-MM-dd'T'HH:mm:ss"
class="w-400px"
clearable
:default-time="['00:00:00', '23:56:56']"
@update:formatted-value="onUpdateDate"
@clear="onClearDate"
/>

View File

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

View File

@ -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">
<DatetimeRange v-model:begin-date="model.beginDate" v-model:end-date="model.endDate" />
<NFormItemGi
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>

View File

@ -31,8 +31,7 @@ const { columns, columnChecks, data, getData, loading, mobilePagination, searchP
size: 10,
groupName: null,
sceneName: null,
beginDate: null,
endDate: null
datetimeRange: 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
},

View File

@ -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">
<DatetimeRange v-model:begin-date="model.beginDate" v-model:end-date="model.endDate" />
<NFormItemGi
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>

View File

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

View File

@ -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">
<DatetimeRange v-model:begin-date="model.beginDate" v-model:end-date="model.endDate" />
<NFormItemGi
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>

View File

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

View File

@ -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">
<DatetimeRange v-model:begin-date="model.beginDate" v-model:end-date="model.endDate" />
<NFormItemGi
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>