|
@@ -263,10 +263,13 @@
|
|
|
v-for="day in calendarCells"
|
|
v-for="day in calendarCells"
|
|
|
:key="day.key"
|
|
:key="day.key"
|
|
|
:disabled="!day.date"
|
|
:disabled="!day.date"
|
|
|
- placement="bottom-start"
|
|
|
|
|
|
|
+ placement="auto"
|
|
|
effect="light"
|
|
effect="light"
|
|
|
popper-class="calendar-day-tooltip"
|
|
popper-class="calendar-day-tooltip"
|
|
|
- :popper-append-to-body="false"
|
|
|
|
|
|
|
+ :popper-append-to-body="true"
|
|
|
|
|
+ :popper-options="calendarTooltipPopperOptions"
|
|
|
|
|
+ :manual="true"
|
|
|
|
|
+ :value="activeCalendarTooltipKey === day.key"
|
|
|
:open-delay="120"
|
|
:open-delay="120"
|
|
|
:hide-after="0"
|
|
:hide-after="0"
|
|
|
:enterable="false"
|
|
:enterable="false"
|
|
@@ -304,6 +307,8 @@
|
|
|
<div
|
|
<div
|
|
|
class="calendar-cell"
|
|
class="calendar-cell"
|
|
|
:class="getCalendarDayClass(day)"
|
|
:class="getCalendarDayClass(day)"
|
|
|
|
|
+ @mouseenter="showCalendarTooltip(day)"
|
|
|
|
|
+ @mouseleave="hideCalendarTooltip(day)"
|
|
|
@click="day.date && openCalendarDayDrawer(day)"
|
|
@click="day.date && openCalendarDayDrawer(day)"
|
|
|
>
|
|
>
|
|
|
<div v-if="day.date" class="day-head">
|
|
<div v-if="day.date" class="day-head">
|
|
@@ -544,6 +549,19 @@
|
|
|
hasMore: true,
|
|
hasMore: true,
|
|
|
portals: [],
|
|
portals: [],
|
|
|
selectedCalendarType: 1,
|
|
selectedCalendarType: 1,
|
|
|
|
|
+ activeCalendarTooltipKey: '',
|
|
|
|
|
+ calendarTooltipPopperOptions: {
|
|
|
|
|
+ modifiers: {
|
|
|
|
|
+ preventOverflow: {
|
|
|
|
|
+ boundariesElement: 'viewport',
|
|
|
|
|
+ padding: 12
|
|
|
|
|
+ },
|
|
|
|
|
+ flip: {
|
|
|
|
|
+ boundariesElement: 'viewport',
|
|
|
|
|
+ padding: 12
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
calendarTypeOptions: [
|
|
calendarTypeOptions: [
|
|
|
{ label: '标准生产日历', shortLabel: '标准生产', value: 1 },
|
|
{ label: '标准生产日历', shortLabel: '标准生产', value: 1 },
|
|
|
{ label: '设备维护日历', shortLabel: '设备维护', value: 2 },
|
|
{ label: '设备维护日历', shortLabel: '设备维护', value: 2 },
|
|
@@ -801,10 +819,21 @@
|
|
|
console.log('day~~~', day);
|
|
console.log('day~~~', day);
|
|
|
this.selectedScheduleDate = day;
|
|
this.selectedScheduleDate = day;
|
|
|
},
|
|
},
|
|
|
|
|
+ showCalendarTooltip(day) {
|
|
|
|
|
+ if (day.date) {
|
|
|
|
|
+ this.activeCalendarTooltipKey = day.key;
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ hideCalendarTooltip(day) {
|
|
|
|
|
+ if (!day || this.activeCalendarTooltipKey === day.key) {
|
|
|
|
|
+ this.activeCalendarTooltipKey = '';
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
openCalendarDayDrawer(day) {
|
|
openCalendarDayDrawer(day) {
|
|
|
if (!day || !day.date) {
|
|
if (!day || !day.date) {
|
|
|
return;
|
|
return;
|
|
|
}
|
|
}
|
|
|
|
|
+ this.hideCalendarTooltip(day);
|
|
|
this.handleDateClick(day.date);
|
|
this.handleDateClick(day.date);
|
|
|
this.currentDay = {
|
|
this.currentDay = {
|
|
|
...day,
|
|
...day,
|