提交 2b31664f 编写于 作者: WodahsOrez's avatar WodahsOrez

lxm--日历图例

上级 0edc9fbf
...@@ -18,6 +18,16 @@ ...@@ -18,6 +18,16 @@
</el-timeline-item> </el-timeline-item>
</el-timeline> </el-timeline>
<#else> <#else>
<div class="event-legends">
<#if ctrl.getPSSysCalendarItems()??>
<#list ctrl.getPSSysCalendarItems() as calendarItem>
<div :class="{'event-lengend':true, '${calendarItem.getItemType()}':true, 'event-disabled':!isShowlegend.${calendarItem.getItemType()}}" @click="legendTrigger('${calendarItem.getItemType()}')">
<div class="lengend-icon" style="background:${calendarItem.getBKColor()};"></div>
<span style="color:${calendarItem.getColor()};">${calendarItem.getName()}</span>
</div>
</#list>
</#if>
</div>
<FullCalendar <FullCalendar
ref="calendar" ref="calendar"
:locale="$i18n.locale" :locale="$i18n.locale"
...@@ -100,20 +110,6 @@ FullCalendar, ...@@ -100,20 +110,6 @@ FullCalendar,
*/ */
public selectedEventElement:any; public selectedEventElement:any;
/**
* 引用插件集合
*
* @public
* @type {any[]}
* @memberof ${srfclassname('${ctrl.codeName}')}
*/
public calendarPlugins: any[] = [
dayGridPlugin,
timeGridPlugin,
listPlugin,
interactionPlugin
];
/** /**
* 设置头部显示 * 设置头部显示
* *
...@@ -261,6 +257,42 @@ FullCalendar, ...@@ -261,6 +257,42 @@ FullCalendar,
*/ */
public calendarType: string = "${ctrl.getCalendarStyle()}"; public calendarType: string = "${ctrl.getCalendarStyle()}";
/**
* 图例显示控制
*
* @public
* @type {any}
* @memberof ${srfclassname('${ctrl.codeName}')}
*/
public isShowlegend: any = {
<#if ctrl.getPSSysCalendarItems()??>
<#list ctrl.getPSSysCalendarItems() as calendarItem>
${calendarItem.getItemType()}:true,
</#list>
</#if>
};
/**
* 图例点击事件
*
* @public
* @memberof ${srfclassname('${ctrl.codeName}')}
*/
legendTrigger(itemType:string){
this.isShowlegend[itemType] = !this.isShowlegend[itemType];
this.refresh();
}
/**
* 查询参数缓存
*
* @public
* @type {any}
* @memberof ${srfclassname('${ctrl.codeName}')}
*/
*/
public searchArgCache: any = {};
/** /**
* 搜索获取日程事件 * 搜索获取日程事件
* *
...@@ -268,6 +300,7 @@ FullCalendar, ...@@ -268,6 +300,7 @@ FullCalendar,
* @memberof ${srfclassname('${ctrl.codeName}')} * @memberof ${srfclassname('${ctrl.codeName}')}
*/ */
public searchEvents(fetchInfo?:any, successCallback?:any, failureCallback?:any ) { public searchEvents(fetchInfo?:any, successCallback?:any, failureCallback?:any ) {
// 处理请求参数
let start = (fetchInfo && fetchInfo.start) ? this.$util.dateFormat(fetchInfo.start) : null; let start = (fetchInfo && fetchInfo.start) ? this.$util.dateFormat(fetchInfo.start) : null;
let end = (fetchInfo && fetchInfo.end) ? this.$util.dateFormat(fetchInfo.end) : null; let end = (fetchInfo && fetchInfo.end) ? this.$util.dateFormat(fetchInfo.end) : null;
let arg = { start: start, end: end }; let arg = { start: start, end: end };
...@@ -275,6 +308,36 @@ FullCalendar, ...@@ -275,6 +308,36 @@ FullCalendar,
Object.assign(arg,{query : fetchInfo.query}); Object.assign(arg,{query : fetchInfo.query});
} }
Object.assign(arg,{viewparams:this.viewparams}); Object.assign(arg,{viewparams:this.viewparams});
// 处理events数据
let _this = this;
let handleEvents = ()=>{
if(_this.isSelectFirstDefault){
// 模拟$event数据
let tempEvent = JSON.parse(JSON.stringify(_this.events[0]));
_this.onEventClick(tempEvent,true);
_this.events[0].className = "select-first-event";
_this.calendarClass = "calendar select-first-calendar";
}
let filterEvents = this.events.filter((event:any)=>{
return _this.isShowlegend[event.itemType];
});
if(successCallback){
successCallback(filterEvents);
}
// 刷新日历的大小(仅fullcalendar组件使用)
if(!Object.is(_this.calendarType,"TIMELINE")){
let appCalendar: any = _this.$refs.calendar;
let api = appCalendar.getApi();
api.updateSize();
}
}
if(JSON.stringify(arg) === JSON.stringify(this.searchArgCache)){
handleEvents();
return;
}else{
this.searchArgCache = arg;
}
const post: Promise<any> = this.service.search(this.loadAction, JSON.parse(JSON.stringify(this.context)), arg, this.showBusyIndicator); const post: Promise<any> = this.service.search(this.loadAction, JSON.parse(JSON.stringify(this.context)), arg, this.showBusyIndicator);
post.then((response: any) => { post.then((response: any) => {
if (!response || response.status !== 200) { if (!response || response.status !== 200) {
...@@ -285,22 +348,7 @@ FullCalendar, ...@@ -285,22 +348,7 @@ FullCalendar,
} }
// 默认选中第一项 // 默认选中第一项
this.events = response.data; this.events = response.data;
if(this.isSelectFirstDefault){ handleEvents();
// 模拟$event数据
let tempEvent = JSON.parse(JSON.stringify(this.events[0]));
this.onEventClick(tempEvent,true);
this.events[0].className = "select-first-event";
this.calendarClass = "calendar select-first-calendar";
}
if(successCallback){
successCallback(this.events);
}
// 刷新日历的大小(仅fullcalendar组件使用)
if(!Object.is(this.calendarType,"TIMELINE")){
let appCalendar: any = this.$refs.calendar;
let api = appCalendar.getApi();
api.updateSize();
}
}, (response: any) => { }, (response: any) => {
if (response && response.status === 401) { if (response && response.status === 401) {
return; return;
......
...@@ -11,6 +11,35 @@ ...@@ -11,6 +11,35 @@
.el-timeline{ .el-timeline{
padding-left: 2px; padding-left: 2px;
} }
.event-legends{
width: 100%;
text-align: center;
.event-lengend{
display: inline-block;
margin-left: 10px;
height: 20px;
.lengend-icon{
display: inline-block;
width: 30px;
height: 20px;
border-radius: 5px;
}
span{
display: inline-block;
margin-left: 5px;
line-height: 20px;
vertical-align: top;
}
}
.event-lengend.event-disabled{
.lengend-icon{
background:#cccccc !important;
}
span{
color:#cccccc !important;
}
}
}
} }
// 选中样式 // 选中样式
.calendar .selected-event, .calendar .selected-event,
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册