refactor(sj_1.1.0-beta1): 时间筛选条件统一方案
This commit is contained in:
parent
964316b1f9
commit
1c7b0732e4
@ -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
11
src/typings/api.d.ts
vendored
@ -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 */
|
||||
|
@ -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"
|
||||
/>
|
||||
|
@ -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,
|
||||
|
@ -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>
|
||||
|
@ -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
|
||||
},
|
||||
|
@ -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>
|
||||
|
@ -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
|
||||
|
@ -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>
|
||||
|
@ -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,
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user