From 651cc37b98c2f496bbaa42704f801d4ac0af58bb Mon Sep 17 00:00:00 2001
From: wujingjing <gersonwu@qq.com>
Date: 星期五, 08 十一月 2024 11:39:35 +0800
Subject: [PATCH] time range disabled
---
src/components/chat/chatComponents/summaryCom/components/recordSet/components/TimeRange.vue | 94 ++++++++++++++++++++++++++++++----------------
1 files changed, 61 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 668f35c..a9ea3cd 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>
@@ -32,12 +33,19 @@
<div class="ml-2 inline-flex items-center space-x-2 text-[14px]">
<div
@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)"
+ class="border border-solid rounded-md px-2 py-1 cursor-pointer"
+ :class="{
+ 'bg-[#1677ff]': parseInt(item) === quickPickValue,
+ 'text-white': parseInt(item) === quickPickValue,
+ 'bg-[#f5f7fa]': isSharePage,
+ 'text-[#a9acb3]': isSharePage,
+ 'border-[#dcdfe6]': isSharePage,
+ '!cursor-not-allowed': isSharePage,
+ }"
+ v-for="item in Object.keys(timeRangeMapTitle)"
:key="item"
>
- {{ timeRangeEnumMapTitle[item] }}
+ {{ timeRangeMapTitle[item] }}
</div>
</div>
</div>
@@ -46,10 +54,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 { ref, type PropType, computed, watch, nextTick } from 'vue';
import type { TimeRangeParam } from '../types';
-import type { TimeRangeEnum } from './types';
-import { timeRangeEnumMapTitle, timeRangeEnumMapValue } from './types';
+import { TimeRangeEnum, TimeStepValue, monthTimeRangeEnumMapTitle } from './types';
+import { dayTimeRangeEnumMapTitle, timeRangeEnumMapValue } from './types';
import {
CURRENT_DAY,
DEFAULT_FORMATS_DATE,
@@ -60,6 +68,7 @@
} from '/@/components/form/datepicker/constants';
import { formatDate } from '/@/utils/formatTime';
import moment from 'moment';
+import { isSharePage } from '/@/stores/chatRoom';
const valueFormat = DEFAULT_FORMATS_DATE + ' ' + DEFAULT_FORMATS_TIME;
const props = defineProps({
@@ -71,57 +80,76 @@
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 (props.disabled) return;
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 (props.disabled) return;
+
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 (props.disabled) return;
+
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