process loading bug；报告

wujingjing

2024-11-05 022a757742c70b3106d817461464e821b537e794

 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) {