Bladeren bron

去除双击设置日期时间段改为单击图标设置

liuyanpeng 1 jaar geleden
bovenliggende
commit
0cf019fba6
1 gewijzigde bestanden met toevoegingen van 34 en 38 verwijderingen
  1. 34 38
      src/shelf/DeviceTimingSwitcher.vue

+ 34 - 38
src/shelf/DeviceTimingSwitcher.vue

@@ -15,9 +15,7 @@
             >
               <template #dropdownRender="{ menuNode: menu }">
                 <div>
-                  <div
-                    v-if="deviceOptions && deviceOptions.length > 0" class="select-all-option"
-                  >
+                  <div v-if="deviceOptions && deviceOptions.length > 0" class="select-all-option">
                     <a-checkbox :checked="isAllSelected" @change="toggleSelectAll">
                       {{ isAllSelected ? "取消全选" : "全选" }}
                     </a-checkbox>
@@ -99,8 +97,12 @@
                     workday: isWorkday(date.date),
                     disabled: isDateDisabled(date.date) || date.outOfYearRange || isCalendarDisabled,
                     'out-of-year-range': date.outOfYearRange,
-                  }" @click="handleDateClick(date.date)" @dblclick="handleDateDblClick(date.date)"
+                  }" @click="handleDateClick(date.date)"
                 >
+                  <FieldTimeOutlined
+                    v-if="!isDateDisabled(date.date) && !date.outOfYearRange && !isCalendarDisabled"
+                    class="time-setting-icon" @click.stop="handleDateDblClick(date.date, true)"
+                  />
                   <span class="day-number">{{ date.day }}</span>
                   <span v-if="isDateSelected(date.date)" class="check-mark">✓</span>
                   <span v-if="isWorkday(date.date)" class="workday-label">工作日</span>
@@ -154,6 +156,7 @@ import {
   DeleteOutlined,
   PlusOutlined,
   WarningTwoTone,
+  FieldTimeOutlined,
 } from '@ant-design/icons-vue';
 import { ajaxApi, ajaxApiGet, debounce } from './util.js';
 import dayjs from 'dayjs';
@@ -400,40 +403,13 @@ const isWorkday = date => {
   return workdaysList.value.includes(dateStr);
 };
 
-// 添加一个点击计时器和点击状态变量
-const clickTimer = ref(null);
-const clickCount = ref(0);
-
 // 处理日期点击事件
 const handleDateClick = date => {
-  // 如果日历被禁用,则不执行任何操作
   if (isCalendarDisabled.value) {
     message.warning('请先选择终端');
     return;
   }
-
-  // 增加点击计数
-  clickCount.value++;
-
-  // 如果是第一次点击,设置定时器
-  if (clickCount.value === 1) {
-    clickTimer.value = setTimeout(() => {
-      // 定时器到期,说明这是单击而不是双击的一部分
-      if (clickCount.value === 1) {
-        // 执行单击逻辑
-        processSingleClick(date);
-      }
-      // 重置点击计数
-      clickCount.value = 0;
-    }, 200); // 200毫秒的等待时间
-  } else {
-    // 第二次点击,取消定时器
-    clearTimeout(clickTimer.value);
-    // 重置点击计数
-    clickCount.value = 0;
-    // 处理双击事件
-    handleDateDblClick(date, true);
-  }
+  processSingleClick(date);
 };
 
 const processSingleClick = date => {
@@ -741,8 +717,6 @@ const saveSelections = () => {
     });
     return;
   }
-
-
   // console.log('合并后的日期数量:', finalDates.length);
   // console.log('取消的日期数量:', validCanceledDates.length);
   // console.log('cancelDtos', cancelDtos);
@@ -806,7 +780,6 @@ const loadDefaultTimeRanges = () => {
   message.success('已加载默认时间段');
 };
 
-
 // 设置时间段,区分普通设置和双击日期设置
 const setTimerRange = () => {
   // 重置当前编辑的日期,表示这是通过按钮打开的
@@ -1348,6 +1321,29 @@ onMounted(() => {
   border-color: #1890ff;
 }
 
+.time-setting-icon {
+  position: absolute;
+  top: 4px;
+  left: 4px;
+  font-size: 16px;
+  color: #1890ff;
+  opacity: 0.7;
+  transition: opacity 0.2s;
+  z-index: 2;
+  background-color: rgba(255, 255, 255, 0.7);
+  border-radius: 50%;
+  padding: 2px;
+  cursor: pointer;
+}
+
+.time-setting-icon:hover {
+  opacity: 1;
+}
+
+.calendar-day:hover .time-setting-icon {
+  opacity: 1;
+}
+
 .day-number {
   font-size: 16px;
   color: #333;
@@ -1416,13 +1412,13 @@ onMounted(() => {
   max-height: 300px;
   overflow-y: auto;
   padding: 0 4px;
-  margin-bottom: 16px;
+  margin-bottom: 8px;
 }
 
 .time-range-item {
   display: flex;
   align-items: center;
-  margin-bottom: 16px;
+  margin-bottom: 8px;
   background-color: #fafafa;
   padding: 12px;
   border-radius: 6px;
@@ -1443,7 +1439,7 @@ onMounted(() => {
 .add-time-range {
   display: flex;
   justify-content: space-between;
-  margin-top: 16px;
+  margin-top: 8px;
 }
 
 /* 响应式调整 */