From 022a757742c70b3106d817461464e821b537e794 Mon Sep 17 00:00:00 2001 From: wujingjing <gersonwu@qq.com> Date: 星期二, 05 十一月 2024 13:20:40 +0800 Subject: [PATCH] process loading bug;报告 --- src/components/chat/chatComponents/summaryCom/components/recordSet/components/TimeRange.vue | 81 ++++++++++++++++++++++++---------------- 1 files changed, 48 insertions(+), 33 deletions(-) diff --git a/src/components/chat/chatComponents/summaryCom/components/recordSet/components/TimeRange.vue b/src/components/chat/chatComponents/summaryCom/components/recordSet/components/TimeRange.vue index 961eb9d..005ad19 100644 --- a/src/components/chat/chatComponents/summaryCom/components/recordSet/components/TimeRange.vue +++ b/src/components/chat/chatComponents/summaryCom/components/recordSet/components/TimeRange.vue @@ -2,7 +2,7 @@ <div class="flex items-center"> <div class="flex items-center space-x-1"> <div - class="ywicon icon-pre" + class="ywifont ywicon-pre" :class="{ 'cursor-not-allowed': !offsetClickIsAllow, 'cursor-pointer': offsetClickIsAllow }" @click="preDayClick" ></div> @@ -17,13 +17,14 @@ :disabled-date="disabledDate" :clearable="false" :disabled="disabled" + @change="datePickerChange" > <template v-for="(value, name) in $slots" #[name]="slotData"> <slot :name="name" v-bind="slotData || {}"></slot> </template> </el-date-picker> <div - class="ywicon icon-next" + class="ywifont ywicon-next" :class="{ 'cursor-not-allowed': !offsetClickIsAllow, 'cursor-pointer': offsetClickIsAllow }" @click="nextDayClick" ></div> @@ -34,10 +35,10 @@ @click="quickPickRangeClick(parseInt(item))" class="border border-solid rounded-md px-2 cursor-pointer" :class="{ 'bg-[#1677ff]': parseInt(item) === quickPickValue, 'text-white': parseInt(item) === quickPickValue }" - v-for="item in Object.keys(timeRangeEnumMapTitle)" + v-for="item in Object.keys(timeRangeMapTitle)" :key="item" > - {{ timeRangeEnumMapTitle[item] }} + {{ timeRangeMapTitle[item] }} </div> </div> </div> @@ -46,10 +47,10 @@ <script setup lang="ts"> import { ElDatePicker } from 'element-plus'; import { definePropType } from 'element-plus/es/utils/vue/props/runtime'; -import { ref, type PropType, computed, watch } from 'vue'; -import type { TimestampParam } from '../types'; -import type { TimeRangeEnum } from './types'; -import { timeRangeEnumMapTitle, timeRangeEnumMapValue } from './types'; +import { ref, type PropType, computed, watch, nextTick } from 'vue'; +import type { TimeRangeParam } from '../types'; +import { TimeRangeEnum, TimeStepValue, monthTimeRangeEnumMapTitle } from './types'; +import { dayTimeRangeEnumMapTitle, timeRangeEnumMapValue } from './types'; import { CURRENT_DAY, DEFAULT_FORMATS_DATE, @@ -64,64 +65,78 @@ const valueFormat = DEFAULT_FORMATS_DATE + ' ' + DEFAULT_FORMATS_TIME; const props = defineProps({ data: { - type: Object as PropType<TimestampParam>, + type: Object as PropType<TimeRangeParam>, }, disabled: { type: Boolean, default: false, }, }); + +const getRangeMapTitle = (timeStep: TimeStepValue) => { + switch (timeStep) { + case TimeStepValue.Day: + return dayTimeRangeEnumMapTitle; + case TimeStepValue.Month: + return monthTimeRangeEnumMapTitle; + default: + return dayTimeRangeEnumMapTitle; + } +}; + +const timeRangeMapTitle = getRangeMapTitle(props.data?.origin?.time_step); const dateValue = defineModel({ type: definePropType<[string, string]>(Array), }); const emit = defineEmits(['change']); -/** - * 闇�瑕佸 dateValue 鏍煎紡鍖栵紝dataValue 缁撴潫鏃堕棿涓嶆槸23:59:59 - */ -const formatDateValue = computed({ - get: () => { - if (!dateValue.value) return null; - return [moment(dateValue.value[0]).format('YYYY-MM-DD 00:00:00'), moment(dateValue.value[1]).format('YYYY-MM-DD 23:59:59')] as [ - string, - string - ]; - }, - set: (value) => { - dateValue.value = value; - }, -}); +const dateChange = () => { + nextTick(() => { + emit('change', dateValue.value); + }); +}; const disabledDate = (date: Date) => { return date > CURRENT_DAY; +}; + +const resetQuickPickValue = () => { + quickPickValue.value = null; }; const quickPickValue = ref<TimeRangeEnum>(null); const quickPickRangeClick = (val: TimeRangeEnum) => { if (quickPickValue.value === val) return; quickPickValue.value = val; - formatDateValue.value = timeRangeEnumMapValue[val]().map((item) => formatDate(item)) as [string, string]; + dateValue.value = timeRangeEnumMapValue[val]().map((item) => formatDate(item)) as [string, string]; + dateChange(); }; const offsetClickIsAllow = computed(() => !!dateValue.value && !props.disabled); const preDayClick = () => { if (!dateValue.value) return; dateValue.value[0] = moment(dateValue.value[0]).subtract(1, 'day').format('YYYY-MM-DD HH:mm:ss'); - dateValue.value = [...dateValue.value]; + dateChange(); + + resetQuickPickValue(); }; const nextDayClick = () => { if (!dateValue.value) return; dateValue.value[1] = moment(dateValue.value[1]).add(1, 'day').format('YYYY-MM-DD HH:mm:ss'); - dateValue.value = [...dateValue.value]; + dateChange(); + + resetQuickPickValue(); }; -watch( - () => formatDateValue.value, - (val) => { - emit('change', val); - } -); +const datePickerChange = (va) => { + resetQuickPickValue(); + dateChange(); +}; + +defineExpose({ + formatDateValue: dateValue, +}); </script> <style scoped lang="scss"> :deep(.el-date-editor .el-range__close-icon--hidden) { -- Gitblit v1.9.3