lxm--日历图例

@CONTROL/日历部件/CONTROL-BASE.vue.ftl

@@ -18,6 +18,16 @@
           </el-timeline-item>
         </el-timeline>
 <#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
           ref="calendar"
           :locale="$i18n.locale"
@@ -100,20 +110,6 @@ FullCalendar,
      */
     public selectedEventElement:any;
 
-    /**
-     * 引用插件集合
-     *
-     * @public
-     * @type {any[]}
-     * @memberof ${srfclassname('${ctrl.codeName}')}
-     */
-    public calendarPlugins: any[] = [
-        dayGridPlugin, 
-        timeGridPlugin, 
-        listPlugin, 
-        interactionPlugin
-    ];
-
     /**
      * 设置头部显示
      *
@@ -261,6 +257,42 @@ FullCalendar,
      */
     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,
      * @memberof ${srfclassname('${ctrl.codeName}')}
      */
     public searchEvents(fetchInfo?:any, successCallback?:any, failureCallback?:any ) {
+        // 处理请求参数
         let start = (fetchInfo && fetchInfo.start) ? this.$util.dateFormat(fetchInfo.start) : null;
         let end = (fetchInfo && fetchInfo.end) ? this.$util.dateFormat(fetchInfo.end) : null;
         let arg = { start: start, end: end };
@@ -275,6 +308,36 @@ FullCalendar,
             Object.assign(arg,{query : fetchInfo.query});
         }
         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);
         post.then((response: any) => {
             if (!response || response.status !== 200) {
@@ -285,22 +348,7 @@ FullCalendar,
             }
             // 默认选中第一项
             this.events = response.data;
-            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";
-            }
-            if(successCallback){
-                successCallback(this.events);
-            }
-            // 刷新日历的大小（仅fullcalendar组件使用）
-            if(!Object.is(this.calendarType,"TIMELINE")){
-                let appCalendar: any = this.$refs.calendar;
-                let api = appCalendar.getApi();
-                api.updateSize();
-            }
+            handleEvents();
         }, (response: any) => {
             if (response && response.status === 401) {
                 return;

@CONTROL/日历部件/CONTROL.less.ftl

@@ -11,6 +11,35 @@
   .el-timeline{
     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,