From f1fc4c998858169a6e24a8f86a56cd8690fd0a2f Mon Sep 17 00:00:00 2001 From: lijisanxiong <1518062161@qq.com> Date: Thu, 24 Jul 2025 22:07:45 +0800 Subject: [PATCH 01/13] =?UTF-8?q?feat=EF=BC=9A=E6=97=A5=E5=8E=86=E4=BA=8B?= =?UTF-8?q?=E4=BB=B6=E9=A1=B9=E6=94=AF=E6=8C=81=E9=BB=98=E8=AE=A4=E5=91=88?= =?UTF-8?q?=E7=8E=B0=E8=83=8C=E6=99=AF=E8=89=B2=E4=B8=BA=E4=B8=BB=E9=A2=98?= =?UTF-8?q?=E8=89=B2=EF=BC=8C=E6=9C=AA=E9=85=8D=E7=BD=AE=E6=95=B0=E6=8D=AE?= =?UTF-8?q?=E6=BA=90=E8=83=8C=E6=99=AF=E8=89=B2=E6=97=B6=EF=BC=8C=E8=BE=B9?= =?UTF-8?q?=E6=A1=86=E6=BF=80=E6=B4=BB=E8=89=B2=E6=94=B9=E4=B8=BA=E9=BB=91?= =?UTF-8?q?=E8=89=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/control/calendar/calendar-util.ts | 69 ++++++++++++++ src/control/calendar/calendar.scss | 17 +++- src/control/calendar/calendar.tsx | 91 ++++++++++++++++++- .../calendar-daily/use-calendar-daily.ts | 12 ++- .../calendar-week/use-calendar-week.ts | 12 ++- 5 files changed, 187 insertions(+), 14 deletions(-) diff --git a/src/control/calendar/calendar-util.ts b/src/control/calendar/calendar-util.ts index a4b942e1..e237508c 100644 --- a/src/control/calendar/calendar-util.ts +++ b/src/control/calendar/calendar-util.ts @@ -1,3 +1,4 @@ +import { Namespace } from '@ibiz-template/core'; import dayjs from 'dayjs'; /** @@ -51,3 +52,71 @@ export const isTimeBetween = (_argrs: { dayjs(date).isBefore(endTime, unit)) ); }; + +/** + * 用于处理日历图例 + * + * @export + * @param {Namespace} ns 菜单样式处理命名空间 + */ +export function useCalendarLegend(ns: Namespace): { + getFontColor: () => string; + getBkColor: (_index: number) => string; + getActBdrColors: (_index: number) => string; +} { + /** + * @description 获取css变量值 + * @param {string} varName + * @return {*} + */ + const getVarValue = (varName: string): string => { + const root = document.documentElement; + return getComputedStyle(root).getPropertyValue(varName); + }; + + // 图例背景色 + const bgColors = [ + // 首个颜色用主题色 + getVarValue(`${ns.cssVarName('color-primary')}`), + '#2196F3', + '#4CAF50', + '#3F51B5', + '#FF9800', + '#673AB7', + '#757575', + ]; + + // 图例边框激活色 + const actBdrColors = bgColors.map(() => + getVarValue(`${ns.cssVarName('color-black')}`), + ); + + /** + * @description 获取背景颜色 + * @param {number} _index + * @returns {string} + */ + const getBkColor = (_index: number): string => { + return bgColors[_index] || bgColors[0]; + }; + + /** + * @description 获取激活背景颜色 + * @param {number} _index + * @returns {string} + */ + const getActBdrColors = (_index: number): string => { + return ( + actBdrColors[_index] || getVarValue(`${ns.cssVarName('color-primary')}`) + ); + }; + + /** + * @description 获取字体颜色 + * @returns {string} + */ + const getFontColor = (): string => { + return getVarValue(`${ns.cssVarName('color-primary-text')}`); + }; + return { getFontColor, getBkColor, getActBdrColors }; +} diff --git a/src/control/calendar/calendar.scss b/src/control/calendar/calendar.scss index bfe15445..fdf51f56 100644 --- a/src/control/calendar/calendar.scss +++ b/src/control/calendar/calendar.scss @@ -9,6 +9,10 @@ $control-calendar: ( margin: getCssVar(spacing, extra-tight), ); +$control-calendar-item: ( + color: none, +); + @include b(control-calendar) { @include set-component-css-var(control-calendar, $control-calendar); @@ -51,7 +55,7 @@ $control-calendar: ( } .el-calendar__header { - flex-wrap: wrap; + flex-wrap: nowrap; } .el-calendar-table, @@ -110,11 +114,11 @@ $control-calendar: ( border-left: none; &.is-begin-time { - border-left: solid 0.5px getCssVar(control-calendar, border-color); + border-left: solid 0.5px var(#{getCssVarName(control-calendar,item-active-border-color)}, #{getCssVar(control-calendar, border-color)}); } &.is-end-time { - border-right: solid 0.5px getCssVar(control-calendar, border-color); + border-right: solid 0.5px var(#{getCssVarName(control-calendar,item-active-border-color)}, #{getCssVar(control-calendar, border-color)}); } } @@ -146,7 +150,10 @@ $control-calendar: ( @include b(control-calendar-item) { @include set-component-css-var(control-calendar, $control-calendar); + @include set-component-css-var(control-calendar-item, $control-calendar-item); + #{getCssVarName(color, text, 2)}: getCssVar(control-calendar-item, color); + #{getCssVarName(editor, default, text, color)}: getCssVar(control-calendar-item, color); height: 100%; padding: getCssVar(control-calendar, item-padding); margin-bottom: getCssVar(control-calendar, margin); @@ -165,7 +172,7 @@ $control-calendar: ( @include when(active) { background-color: getCssVar(control-calendar, active-bg-color); - border: solid 0.5px getCssVar(control-calendar, border-color); + border: solid 0.5px var(#{getCssVarName(control-calendar,item-active-border-color)}, #{getCssVar(control-calendar, border-color)}); } } @@ -210,4 +217,4 @@ $control-calendar: ( .el-timeline { padding-left: 0; } -} +} \ No newline at end of file diff --git a/src/control/calendar/calendar.tsx b/src/control/calendar/calendar.tsx index d1f90461..99fedb35 100644 --- a/src/control/calendar/calendar.tsx +++ b/src/control/calendar/calendar.tsx @@ -4,6 +4,7 @@ import { IBizCustomRender, useControlController, useNamespace, + useUIStore, } from '@ibiz-template/vue3-util'; import { defineComponent, @@ -33,7 +34,11 @@ import dayjs from 'dayjs'; import { showTitle } from '@ibiz-template/core'; import { MenuItem } from '@imengyu/vue3-context-menu'; import CustomCalendar from './components/custom-calendar'; -import { getWeekRange, isTimeBetween } from './calendar-util'; +import { + getWeekRange, + isTimeBetween, + useCalendarLegend, +} from './calendar-util'; import './calendar.scss'; export const CalendarControl = defineComponent({ @@ -75,10 +80,67 @@ export const CalendarControl = defineComponent({ (...args) => new CalendarController(...args), ); const ns = useNamespace(`control-${c.model.controlType!.toLowerCase()}`); + const { UIStore } = useUIStore(); + + const { getFontColor, getBkColor, getActBdrColors } = useCalendarLegend(ns); + const calendarRef = ref(); const curPopover = ref(); const showDateRange = ref(c.controlParams.showmode === 'daterange'); const showDateList = ref(c.controlParams.showmode === 'expand'); + + // 日历图例数据计算颜色值 + const bgColorMap = new Map(); + const legendItems = ref([]); + // 存在图例的日历样式 + const legendType = ['DAY', 'WEEK', 'MONTH']; + // 计算甘特样式 + const calcLegend = (): void => { + legendItems.value = c.state.legends.map((_item, index) => { + const tempItem = { + ..._item, + isShow: true, + }; + + // 没有图例的日历样式不附加默认背景颜色 + if ( + !c.model.calendarStyle || + !legendType.includes(c.model.calendarStyle) + ) + return tempItem; + + // 如果数据源配置了背景色，则边框激活色为主题激活色 + if (!_item.bkcolor) { + Object.assign(tempItem, { + bkcolor: getBkColor(index), + actBdrColor: getActBdrColors(index), + }); + } else { + bgColorMap.set(_item.id, _item.bkcolor); + } + if (!_item.color) + Object.assign(tempItem, { + color: getFontColor(), + }); + return tempItem; + }); + }; + watch( + () => c.state.legends, + () => { + calcLegend(); + }, + { deep: true }, + ); + + // 适配主题切换 + watch( + () => UIStore.theme, + () => { + calcLegend(); + }, + ); + // 气泡框对应显示日期 const popoverValue = ref(''); @@ -166,9 +228,15 @@ export const CalendarControl = defineComponent({ * @return {*} {IData} */ const calcItemStyle = (data: ICalendarItemData): IData => { + const _legend = legendItems.value.find( + _item => _item.id === data.itemType, + ); return { color: data.color, backgroundColor: data.bkColor, + [`${ns.cssVarBlockName('item-color')}`]: data.color, + [`${ns.cssVarBlockName('item-active-border-color')}`]: + _legend?.actBdrColor, }; }; @@ -205,7 +273,18 @@ export const CalendarControl = defineComponent({ return result; }); } - return calendarItems; + return calendarItems.map(_item => { + const targetLegend = legendItems.value.find((legendItem: IData) => + Object.is(legendItem.id, _item.itemType), + ); + if (!targetLegend) return _item; + + // 数据内没有颜色时，赋值为初始化的颜色 + if (!_item.bkColor) + Object.assign(_item, { bkColor: targetLegend.bkcolor }); + if (!_item.color) Object.assign(_item, { color: targetLegend.color }); + return _item; + }); }; // *上下文菜单相关 / @@ -404,6 +483,7 @@ export const CalendarControl = defineComponent({ showDateRange, showDateList, popoverValue, + legendItems, selectDate, calcItemStyle, calcCalendarItems, @@ -774,7 +854,7 @@ export const CalendarControl = defineComponent({ ref='calendarRef' viewType={this.c.model.calendarStyle} events={this.c.state.items} - legends={this.c.state.legends} + legends={this.legendItems} multiple={!this.c.state.singleSelect} selectedData={this.c.state.selectedData} onEventClick={(value: IParams) => { @@ -787,6 +867,11 @@ export const CalendarControl = defineComponent({ const item = data[0]; if (item) this.c.onDbRowClick(item); }} + onEventContextmenu={(value: IParams) => { + const { data, evt } = value; + const item = data[0]; + if (item && evt) this.onNodeContextmenu(item, evt); + }} > {slots} diff --git a/src/control/calendar/components/calendar-daily/use-calendar-daily.ts b/src/control/calendar/components/calendar-daily/use-calendar-daily.ts index ab3d908c..4664d4d0 100644 --- a/src/control/calendar/components/calendar-daily/use-calendar-daily.ts +++ b/src/control/calendar/components/calendar-daily/use-calendar-daily.ts @@ -152,9 +152,9 @@ export const useCalendarDaily = ( Object.assign(tempItem, { styleTop }); } if (!event?.bkColor) { - const bkColor = targetLegend - ? targetLegend.bkcolor - : handleBkColor(tempColors, event.itemType); + const bkColor = + (targetLegend && targetLegend.bkcolor) || + handleBkColor(tempColors, event.itemType); Object.assign(tempItem, { bkColor }); } if (tempItem.bkColor) { @@ -163,6 +163,12 @@ export const useCalendarDaily = ( bkColorFade: tempBkColor, }); } + if (!event?.color) { + const tempColor = targetLegend && targetLegend.color; + Object.assign(tempItem, { + color: tempColor, + }); + } // 计算边框显示 if (tempItem?.height && (tempItem as IParams)?.height > 10) { const border = '1px solid #FFF'; diff --git a/src/control/calendar/components/calendar-week/use-calendar-week.ts b/src/control/calendar/components/calendar-week/use-calendar-week.ts index a8b6e85c..cc070278 100644 --- a/src/control/calendar/components/calendar-week/use-calendar-week.ts +++ b/src/control/calendar/components/calendar-week/use-calendar-week.ts @@ -284,9 +284,9 @@ export const useCalendarWeek = ( } Object.assign(tempEventContent, { height, styleTop, timeRange }); if (!event?.bkColor) { - const bkColor = targetLegend - ? targetLegend.bkcolor - : handleBkColor(tempColors, event.itemType); + const bkColor = + (targetLegend && targetLegend.bkcolor) || + handleBkColor(tempColors, event.itemType); Object.assign(tempEventContent, { bkColor }); } if (tempEventContent.bkColor) { @@ -295,6 +295,12 @@ export const useCalendarWeek = ( bkColorFade: tempBkColor, }); } + if (!event?.color) { + const tempColor = targetLegend && targetLegend.color; + Object.assign(tempEventContent, { + color: tempColor, + }); + } // 计算边框显示 if ( tempEventContent?.height && -- Gitee From 4cc93ee02ecb325f25bc69070f62865eacca85ed Mon Sep 17 00:00:00 2001 From: lijisanxiong <1518062161@qq.com> Date: Thu, 24 Jul 2025 22:11:37 +0800 Subject: [PATCH 02/13] =?UTF-8?q?feat=EF=BC=9A=E6=97=A5=E5=8E=86=E7=BB=9F?= =?UTF-8?q?=E4=B8=80=E5=9B=BE=E4=BE=8B=E6=98=BE=E7=A4=BA=E6=A0=B7=E5=BC=8F?= =?UTF-8?q?=EF=BC=8C=E6=9C=88=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4=E5=9B=BE?= =?UTF-8?q?=E4=BE=8B=E7=BB=98=E5=88=B6=E4=BD=8D=E7=BD=AE=E5=8F=8A=E6=94=AF?= =?UTF-8?q?=E6=8C=81=E5=9B=BE=E4=BE=8B=E7=82=B9=E5=87=BB=E5=90=8E=E6=98=BE?= =?UTF-8?q?=E7=A4=BA=E6=88=96=E9=9A=90=E8=97=8F=E7=9B=B8=E5=85=B3=E6=95=B0?= =?UTF-8?q?=E6=8D=AE=E7=9A=84=E8=83=BD=E5=8A=9B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/control/calendar/calendar.scss | 33 +++++++++++-- src/control/calendar/calendar.tsx | 78 +++++++++++++++++++----------- 2 files changed, 80 insertions(+), 31 deletions(-) diff --git a/src/control/calendar/calendar.scss b/src/control/calendar/calendar.scss index fdf51f56..d3db9c1f 100644 --- a/src/control/calendar/calendar.scss +++ b/src/control/calendar/calendar.scss @@ -190,6 +190,7 @@ $control-calendar-item: ( @include b(control-calendar-content-title) { line-height: getCssVar(editor, default, line-height); + white-space: nowrap; } @include b(control-calendar-content-header) { @@ -201,15 +202,41 @@ $control-calendar-item: ( & > * + * { margin-left: getCssVar(control-calendar, item-padding); } + + .el-button-group { + display: flex; + } } @include b(control-calendar-legend) { display: flex; - justify-content: flex-end; + justify-content: center; width: 100%; - & > * + * { - margin-left: getCssVar(spacing, base-loose); + @include e('item') { + display: flex; + align-items: center; + padding: 0 getCssVar('spacing', 'tight'); + line-height: 1em; + cursor: pointer; + + @include m('tip') { + display: inline-block; + width: 1.5em; + height: 0.9em; + margin-right: getCssVar('spacing', 'extra-tight'); + border-radius: getCssVar(border, radius, extra, small); + } + + @include m('text') { + display: inline-block; + width: auto; + max-width: 100px; + overflow: hidden; + text-align: left; + text-overflow: ellipsis; + white-space: nowrap; + } } } diff --git a/src/control/calendar/calendar.tsx b/src/control/calendar/calendar.tsx index 99fedb35..3a0df2b2 100644 --- a/src/control/calendar/calendar.tsx +++ b/src/control/calendar/calendar.tsx @@ -89,6 +89,11 @@ export const CalendarControl = defineComponent({ const showDateRange = ref(c.controlParams.showmode === 'daterange'); const showDateList = ref(c.controlParams.showmode === 'expand'); + // 月样式图例点击切换显示与隐藏 + const monthLegendClick = (_item: IData): void => { + Object.assign(_item, { isShow: !_item.isShow }); + }; + // 日历图例数据计算颜色值 const bgColorMap = new Map(); const legendItems = ref([]); @@ -249,6 +254,12 @@ export const CalendarControl = defineComponent({ const calcCalendarItems = (date: Date): ICalendarItemData[] => { const weekRange = getWeekRange(date); const calendarItems = c.state.items.filter((item: ICalendarItemData) => { + // 适配图例显隐逻辑 + const _legend = legendItems.value.find( + legend => legend.id === item.itemType, + ); + if (_legend && !_legend.isShow) return false; + if (!showDateRange.value) { return dayjs(date).isSame(item.beginTime, 'day'); } @@ -279,7 +290,7 @@ export const CalendarControl = defineComponent({ ); if (!targetLegend) return _item; - // 数据内没有颜色时，赋值为初始化的颜色 + // 图例没有配置颜色时，赋默认颜色 if (!_item.bkColor) Object.assign(_item, { bkColor: targetLegend.bkcolor }); if (!_item.color) Object.assign(_item, { color: targetLegend.color }); @@ -488,6 +499,7 @@ export const CalendarControl = defineComponent({ calcItemStyle, calcCalendarItems, onNodeContextmenu, + monthLegendClick, }; }, render() { @@ -703,6 +715,43 @@ export const CalendarControl = defineComponent({ header: ({ date }: { date: string }): VNode[] => { return [ {date}, +
+ {this.legendItems && + this.legendItems.length > 1 && + this.legendItems.map((_legend: IData) => { + let label = _legend.name!; + const _model = this.c.model.sysCalendarItems?.find( + _calendarItem => _calendarItem.id === _legend.id, + ); + if (_model?.nameLanguageRes) { + label = ibiz.i18n.t( + _model.nameLanguageRes.lanResTag!, + _model.name, + ); + } + return ( +
this.monthLegendClick(_legend)} + > +
+
+ {label} +
+
+ ); + })} +
,
, -
- {this.c.model.sysCalendarItems && - this.c.model.sysCalendarItems.length > 1 && - this.c.model.sysCalendarItems?.map( - (calendarItem: IData) => { - let label = calendarItem.name!; - if (calendarItem.nameLanguageRes) { - label = ibiz.i18n.t( - calendarItem.nameLanguageRes.lanResTag!, - calendarItem.name, - ); - } - return ( -
-
- {label} -
- ); - }, - )} -
, ]; }, 'date-cell': ({ data }: { data: IData }): VNode => { -- Gitee From 756d96443100f131aaea728e25fc4b205470e943 Mon Sep 17 00:00:00 2001 From: lijisanxiong <1518062161@qq.com> Date: Thu, 24 Jul 2025 22:31:08 +0800 Subject: [PATCH 03/13] =?UTF-8?q?feat=EF=BC=9A=E6=97=A5=E5=8E=86=E5=91=A8?= =?UTF-8?q?=E3=80=81=E5=A4=A9=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4=E7=A7=BB?= =?UTF-8?q?=E5=85=A5=E6=B0=94=E6=B3=A1=E6=A0=B7=E5=BC=8F=EF=BC=8C=E9=80=82?= =?UTF-8?q?=E9=85=8D=E6=B0=94=E6=B3=A1=E5=8F=AA=E5=9C=A8=E9=83=A8=E4=BB=B6?= =?UTF-8?q?=E5=8F=82=E6=95=B0showdetail=3Dtrue=E5=B9=B6=E4=B8=94=E9=85=8D?= =?UTF-8?q?=E7=BD=AE=E4=BA=86=E5=B8=83=E5=B1=80=E9=9D=A2=E6=9D=BF=E6=97=B6?= =?UTF-8?q?=E6=89=8D=E4=BC=9A=E6=98=BE=E7=A4=BA=EF=BC=8C=E9=80=82=E9=85=8D?= =?UTF-8?q?=E5=A4=B4=E9=83=A8=E7=9A=84=E4=BA=8B=E4=BB=B6=E6=B0=94=E6=B3=A1?= =?UTF-8?q?=E6=98=BE=E7=A4=BA=E9=80=BB=E8=BE=91=E4=B8=8E=E5=86=85=E5=AE=B9?= =?UTF-8?q?=E5=8C=BA=E4=BF=9D=E6=8C=81=E4=B8=80=E8=87=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../calendar-daily/calendar-daily.scss | 46 +++++-- .../calendar-daily/calendar-daily.tsx | 113 +++++++++++++---- .../calendar-week/calendar-week.scss | 27 +++- .../calendar-week/calendar-week.tsx | 117 ++++++++---------- 4 files changed, 196 insertions(+), 107 deletions(-) diff --git a/src/control/calendar/components/calendar-daily/calendar-daily.scss b/src/control/calendar/components/calendar-daily/calendar-daily.scss index dd5f6fe0..26a18e89 100644 --- a/src/control/calendar/components/calendar-daily/calendar-daily.scss +++ b/src/control/calendar/components/calendar-daily/calendar-daily.scss @@ -237,12 +237,18 @@ } // 面板项popper @include e(event-popover) { - padding: 0; + position: relative; width: auto; height: auto; - position: relative; + padding: 0; + &.el-popover.el-popper { - padding: 24px 12px 8px 12px; + padding: 8px; + } + + // 当配置了 showdetail=true, 并且配置了布局面板时才会显示气泡 + &:has(.#{bem('control-calendar-item-default')}) { + display: none !important; } @include m(body) { @@ -252,33 +258,49 @@ } @include m(scroll) { width: auto; - height: auto; min-width: 200px; - min-height: 100px; + height: auto; + max-height: 80%; overflow: auto; + pointer-events: none; + + .#{bem('control-calendar-item')} { + &:last-child { + margin-bottom: 0; + } + @include when(active) { + background-color: transparent; + border-color: transparent; + } + } } @include m(close) { position: absolute; - right: 8px; top: 8px; + right: 8px; + display: none; cursor: pointer; + &:hover { .el-icon { - background: var(--ibiz-color-primary); + background: getCssVar(color, primary); border-radius: 50%; + svg { - fill: #FFF; + fill: getCssVar(color, white); } } } } + .el-icon { - font-size: 20px; - min-height: 24px; - min-width: 24px; display: flex; - justify-content: center; align-items: center; + justify-content: center; + min-width: 24px; + min-height: 24px; + font-size: 20px; + svg { fill: var(--el-text-color-secondary); } diff --git a/src/control/calendar/components/calendar-daily/calendar-daily.tsx b/src/control/calendar/components/calendar-daily/calendar-daily.tsx index 9a6a709e..72f3c75c 100644 --- a/src/control/calendar/components/calendar-daily/calendar-daily.tsx +++ b/src/control/calendar/components/calendar-daily/calendar-daily.tsx @@ -1,8 +1,9 @@ +/* eslint-disable @typescript-eslint/explicit-function-return-type */ import { defineComponent, onMounted, onUnmounted, watch } from 'vue'; import { useNamespace } from '@ibiz-template/vue3-util'; import { showTitle } from '@ibiz-template/core'; import { IUIEvent, calendarDailyEmits, calendarDailyProps } from '../interface'; -import { isToday } from '../util'; +import { closeIcon, handlePopClose, isToday } from '../util'; import { useCalendarDaily } from './use-calendar-daily'; import './calendar-daily.scss'; @@ -77,6 +78,14 @@ export const CalendarDaily = defineComponent({ slotNme: string, classEName: string, ) => { + let title = `${event.text || ''}`; + // 适配内容区移入不显示时间范围提示 + if (location === 'header' && event.timeRange) + title = `${title} ${event.timeRange || ''}`; + // 根据环境变量判断是否展示title + title = showTitle(title) || ''; + // 如果配置了显示详情，则内容区不用显示快捷提示，提示由气泡展示 + if (props.showDetail) title = ''; return (
eventClick(event, 'head')} style={eventContentStyle} + title={title} > {slots[slotNme] ? ( slots[slotNme]?.({ data: event }) ) : (
{event.icon && ( { + if (!props.showDetail) { + return content; + } + // 适配弹框内详情不要背景色 + const _tempEvent = { ...event, color: '', bkColor: '' }; + return ( + + {{ + reference: () => content, + default: () => { + return ( +
+
handlePopClose(el)} + v-html={closeIcon} + >
+
+ {slots?.event ? ( + slots.event?.({ data: _tempEvent }) + ) : ( +
{`${ + event.text || '' + } ${event.timeRange || ''}`}
+ )} +
+
+ ); + }, + }} + + ); + }; + /** * 绘制头部 */ @@ -143,22 +200,30 @@ export const CalendarDaily = defineComponent({
- {events.value.map((event: IUIEvent, index: number) => { - const eventBoxStyle = {}; - const eventContentStyle = { - color: event.color, - background: event.bkColorFade, - }; - return renderEventItem( - 'header', - eventBoxStyle, - eventContentStyle, - event, - index, - 'head-event', - 'allday-info', - ); - })} + {events.value.length > 0 ? ( + events.value.map((event: IUIEvent, index: number) => { + const eventBoxStyle = {}; + const eventContentStyle = { + background: event.bkColorFade, + }; + const tempContent = renderEventItem( + 'header', + eventBoxStyle, + eventContentStyle, + event, + index, + 'head-event', + 'allday-info', + ); + return renderPopover( + tempContent as unknown as Element, + event, + 'bottom', + ); + }) + ) : ( + + )}
@@ -221,7 +286,6 @@ export const CalendarDaily = defineComponent({ const eventContentStyle = { background: event.bkColorFade, 'border-left': `3px solid ${event.bkColor}`, - color: event.color, }; const tempContent = renderEventItem( 'content', @@ -229,10 +293,13 @@ export const CalendarDaily = defineComponent({ eventContentStyle, event, index, - 'event', + '', 'time-pane', ); - return tempContent; + return renderPopover( + tempContent as unknown as Element, + event, + ); })}
diff --git a/src/control/calendar/components/calendar-week/calendar-week.scss b/src/control/calendar/components/calendar-week/calendar-week.scss index 6dd7c0d9..02a8c8dc 100644 --- a/src/control/calendar/components/calendar-week/calendar-week.scss +++ b/src/control/calendar/components/calendar-week/calendar-week.scss @@ -238,7 +238,12 @@ padding: 0; &.el-popover.el-popper { - padding: 24px 12px 8px; + padding: 8px; + } + + // 当配置了 showdetail 参数，只有配置了布局面板时才会显示气泡 + &:has(.#{bem('control-calendar-item-default')}) { + display: none !important; } @include m(body) { @@ -248,24 +253,36 @@ } @include m(scroll) { width: auto; - min-width: 450px; + min-width: 200px; height: auto; - min-height: 200px; + max-height: 80%; overflow: auto; + pointer-events: none; + + .#{bem('control-calendar-item')} { + &:last-child { + margin-bottom: 0; + } + @include when(active) { + background-color: transparent; + border-color: transparent; + } + } } @include m(close) { position: absolute; top: 8px; right: 8px; + display: none; cursor: pointer; &:hover { .el-icon { - background: var(--ibiz-color-primary); + background: getCssVar(color, primary); border-radius: 50%; svg { - fill: #FFF; + fill: getCssVar(color, white); } } } diff --git a/src/control/calendar/components/calendar-week/calendar-week.tsx b/src/control/calendar/components/calendar-week/calendar-week.tsx index b8bef589..f51194e7 100644 --- a/src/control/calendar/components/calendar-week/calendar-week.tsx +++ b/src/control/calendar/components/calendar-week/calendar-week.tsx @@ -1,4 +1,5 @@ -import { defineComponent, onMounted, onUnmounted, ref, watch } from 'vue'; +/* eslint-disable @typescript-eslint/explicit-function-return-type */ +import { defineComponent, onMounted, onUnmounted, watch } from 'vue'; import { useNamespace } from '@ibiz-template/vue3-util'; import { showTitle } from '@ibiz-template/core'; import { IUIEvent, calendarWeekEmits, calendarWeekProps } from '../interface'; @@ -30,12 +31,6 @@ export const CalendarWeek = defineComponent({ handleUIEvents, } = useCalendarWeek(props, emit); - // 当前悬浮项 - const hoverItem = ref(''); - - // 控制项popover显示 - const visible = ref(false); - watch( () => props.selectedData, () => { @@ -83,30 +78,6 @@ export const CalendarWeek = defineComponent({ } }); - /** - * 显示popover - * - * @param {IUIEvent} event - */ - const onMouseenter = (event: IUIEvent) => { - hoverItem.value = String(event.id); - visible.value = true; - }; - - // 项点击 - const onClickCalendarItem = () => { - visible.value = false; - }; - - /** - * 隐藏popover - * - */ - const onMouseleavee = () => { - hoverItem.value = ''; - visible.value = false; - }; - /** * 绘制事件项 * @param {string} location 绘制位置 @@ -126,36 +97,38 @@ export const CalendarWeek = defineComponent({ slotNme: string, classEName: string, ) => { + let title = `${event.text || ''}`; + // 适配内容区移入不显示时间范围提示 + if (location === 'header' && event.timeRange) + title = `${title} ${event.timeRange || ''}`; + // 根据环境变量判断是否展示title + title = showTitle(title) || ''; + // 如果配置了显示详情，则内容区不用显示快捷提示，提示由气泡展示 + if (props.showDetail) title = ''; + return (
onMouseenter(event)} - onMouseleave={onMouseleavee} - onClick={onClickCalendarItem} >