<template> <div :class='calendarClass'> <context-menu-container> <template> <div class="event-legends"> <div :class="{'event-lengend':true, 'item1':true, 'event-disabled':!isShowlegend.item1}" @click="legendTrigger('item1')"> <div class="lengend-icon" style="background:rgba(235, 21, 21, 1);"></div> <span style="color:rgba(13, 190, 34, 1);">借书日记</span> </div> </div> <FullCalendar ref="calendar" :locale="$i18n.locale" height="parent" :firstDay="1" :eventLimit="true" :editable="!isSelectFirstDefault && true" :buttonText="buttonText" :header="header" :plugins="calendarPlugins" :events="searchEvents" :displayEventTime="displayEventTime" :customButtons="customButtons" :validRange="validRange" :defaultDate="defaultDate" :eventRender="eventRender" :navLinks="true" :navLinkDayClick ="onDayClick" @dateClick="onDateClick" @eventClick="onEventClick" @eventDrop="onEventDrop" defaultView="dayGridMonth"/> <modal v-model="modalVisible" width="250px" :title="$t('app.calendar.dateSelectModalTitle')" class-name='date-select-modal' @on-ok="gotoDate"> <el-date-picker style="width: 200px;" v-model="selectedGotoDate" type="date"></el-date-picker> </modal> </template> </context-menu-container> </div> </template> <script lang='tsx'> import { Vue, Component, Prop, Provide, Emit, Watch, Model,Inject } from 'vue-property-decorator'; import { CreateElement } from 'vue'; import { Subject, Subscription } from 'rxjs'; import { ControlInterface } from '@/interface/control'; import { UIActionTool,Util,ViewTool } from '@/utils'; import NavDataService from '@/service/app/navdata-service'; import AppCenterService from "@service/app/app-center-service"; import IBIZBOOKEntityService from '@/service/ibizbook/ibizbook-service'; import IBIZBOOKMONTHService from './ibizbookmonth-calendar-service'; import IBIZBOOKUIService from '@/uiservice/ibizbook/ibizbook-ui-service'; import FullCalendar from '@fullcalendar/vue' import dayGridPlugin from '@fullcalendar/daygrid' import timeGridPlugin from '@fullcalendar/timegrid'; import listPlugin from '@fullcalendar/list'; import interactionPlugin from '@fullcalendar/interaction'; import ContextMenu from '@components/context-menu/context-menu'; import UIService from '@/uiservice/ui-service'; @Component({ components: { FullCalendar, } }) export default class IBIZBOOKMONTHBase extends Vue implements ControlInterface { /** * 名称 * * @type {string} * @memberof IBIZBOOKMONTHBase */ @Prop() public name?: string; /** * 视图通讯对象 * * @type {Subject<ViewState>} * @memberof IBIZBOOKMONTHBase */ @Prop() public viewState!: Subject<ViewState>; /** * 应用上下文 * * @type {*} * @memberof IBIZBOOKMONTHBase */ @Prop() public context!: any; /** * 视图参数 * * @type {*} * @memberof IBIZBOOKMONTHBase */ @Prop() public viewparams!: any; /** * 视图状态事件 * * @public * @type {(Subscription | undefined)} * @memberof IBIZBOOKMONTHBase */ public viewStateEvent: Subscription | undefined; /** * 获取部件类型 * * @returns {string} * @memberof IBIZBOOKMONTHBase */ public getControlType(): string { return 'CALENDAR' } /** * 计数器服务对象集合 * * @type {Array<*>} * @memberof IBIZBOOKMONTHBase */ public counterServiceArray:Array<any> = []; /** * 建构部件服务对象 * * @type {IBIZBOOKMONTHService} * @memberof IBIZBOOKMONTHBase */ public service: IBIZBOOKMONTHService = new IBIZBOOKMONTHService({ $store: this.$store }); /** * 实体服务对象 * * @type {IBIZBOOKService} * @memberof IBIZBOOKMONTHBase */ public appEntityService: IBIZBOOKEntityService = new IBIZBOOKEntityService({ $store: this.$store }); /** * calendar_quicktoolbar 部件 click 事件 * * @param {*} [args={}] * @param {*} $event * @memberof IBIZBOOKMONTHBase */ public calendar_quicktoolbar_click($event: any, $event2?: any) { if (Object.is($event.tag, 'deuiaction1')) { this.calendar_quicktoolbar_deuiaction1_click(null, 'calendar_quicktoolbar', $event2); } if (Object.is($event.tag, 'deuiaction2')) { this.calendar_quicktoolbar_deuiaction2_click(null, 'calendar_quicktoolbar', $event2); } if (Object.is($event.tag, 'deuiaction3')) { this.calendar_quicktoolbar_deuiaction3_click(null, 'calendar_quicktoolbar', $event2); } } /** * cm 部件 click 事件 * * @param {*} [args={}] * @param {*} $event * @memberof IBIZBOOKMONTHBase */ public cm_click($event: any, $event2?: any) { if (Object.is($event.tag, 'deuiaction1')) { this.cm_deuiaction1_click(null, 'cm', $event2); } if (Object.is($event.tag, 'deuiaction2')) { this.cm_deuiaction2_click(null, 'cm', $event2); } if (Object.is($event.tag, 'deuiaction3')) { this.cm_deuiaction3_click(null, 'cm', $event2); } } /** * 逻辑事件 * * @param {*} [params={}] * @param {*} [tag] * @param {*} [$event] * @memberof */ public calendar_quicktoolbar_deuiaction1_click(params: any = {}, tag?: any, $event?: any) { // 参数 // 取数 let datas: any[] = []; let xData: any = null; // _this 指向容器对象 const _this: any = this; let paramJO:any = {}; let contextJO:any = {}; xData = this; if (_this.getDatas && _this.getDatas instanceof Function) { datas = [..._this.getDatas()]; } if(params){ datas = [params]; } // 界面行为 this.Save(datas, contextJO,paramJO, $event, xData,this,"IBIZBOOK"); } /** * 逻辑事件 * * @param {*} [params={}] * @param {*} [tag] * @param {*} [$event] * @memberof */ public calendar_quicktoolbar_deuiaction2_click(params: any = {}, tag?: any, $event?: any) { // 参数 // 取数 let datas: any[] = []; let xData: any = null; // _this 指向容器对象 const _this: any = this; let paramJO:any = {}; let contextJO:any = {}; xData = this; if (_this.getDatas && _this.getDatas instanceof Function) { datas = [..._this.getDatas()]; } if(params){ datas = [params]; } // 界面行为 this.Edit(datas, contextJO,paramJO, $event, xData,this,"IBIZBOOK"); } /** * 逻辑事件 * * @param {*} [params={}] * @param {*} [tag] * @param {*} [$event] * @memberof */ public calendar_quicktoolbar_deuiaction3_click(params: any = {}, tag?: any, $event?: any) { // 参数 // 取数 let datas: any[] = []; let xData: any = null; // _this 指向容器对象 const _this: any = this; let paramJO:any = {}; let contextJO:any = {}; xData = this; if (_this.getDatas && _this.getDatas instanceof Function) { datas = [..._this.getDatas()]; } if(params){ datas = [params]; } // 界面行为 this.Refresh(datas, contextJO,paramJO, $event, xData,this,"IBIZBOOK"); } /** * 逻辑事件 * * @param {*} [params={}] * @param {*} [tag] * @param {*} [$event] * @memberof */ public cm_deuiaction1_click(params: any = {}, tag?: any, $event?: any) { // 参数 // 取数 let datas: any[] = []; let xData: any = null; // _this 指向容器对象 const _this: any = this; let paramJO:any = {}; let contextJO:any = {}; xData = this; if (_this.getDatas && _this.getDatas instanceof Function) { datas = [..._this.getDatas()]; } if(params){ datas = [params]; } // 界面行为 this.Save(datas, contextJO,paramJO, $event, xData,this,"IBIZBOOK"); } /** * 逻辑事件 * * @param {*} [params={}] * @param {*} [tag] * @param {*} [$event] * @memberof */ public cm_deuiaction2_click(params: any = {}, tag?: any, $event?: any) { // 参数 // 取数 let datas: any[] = []; let xData: any = null; // _this 指向容器对象 const _this: any = this; let paramJO:any = {}; let contextJO:any = {}; xData = this; if (_this.getDatas && _this.getDatas instanceof Function) { datas = [..._this.getDatas()]; } if(params){ datas = [params]; } // 界面行为 this.Edit(datas, contextJO,paramJO, $event, xData,this,"IBIZBOOK"); } /** * 逻辑事件 * * @param {*} [params={}] * @param {*} [tag] * @param {*} [$event] * @memberof */ public cm_deuiaction3_click(params: any = {}, tag?: any, $event?: any) { // 参数 // 取数 let datas: any[] = []; let xData: any = null; // _this 指向容器对象 const _this: any = this; let paramJO:any = {}; let contextJO:any = {}; xData = this; if (_this.getDatas && _this.getDatas instanceof Function) { datas = [..._this.getDatas()]; } if(params){ datas = [params]; } // 界面行为 this.Refresh(datas, contextJO,paramJO, $event, xData,this,"IBIZBOOK"); } /** * 保存 * * @param {any[]} args 当前数据 * @param {any} contextJO 行为附加上下文 * @param {*} [params] 附加参数 * @param {*} [$event] 事件源 * @param {*} [xData] 执行行为所需当前部件 * @param {*} [actionContext] 执行行为上下文 * @memberof IBIZBOOKCalendarViewBase */ public Save(args: any[],contextJO?:any, params?: any, $event?: any, xData?: any,actionContext?:any,srfParentDeName?:string) { // 界面行为容器对象 _this const _this: any = this; if (xData && xData.save instanceof Function) { xData.save().then((response: any) => { if (!response || response.status !== 200) { return; } _this.$emit('viewdataschange', [{ ...response.data }]); }); } else if (_this.save && _this.save instanceof Function) { _this.save(); } } /** * 编辑 * * @param {any[]} args 当前数据 * @param {any} contextJO 行为附加上下文 * @param {*} [params] 附加参数 * @param {*} [$event] 事件源 * @param {*} [xData] 执行行为所需当前部件 * @param {*} [actionContext] 执行行为上下文 * @memberof IBIZBOOKCalendarViewBase */ public Edit(args: any[],contextJO?:any, params?: any, $event?: any, xData?: any,actionContext?:any,srfParentDeName?:string) { if (args.length === 0) { return; } const _this: any = this; if (_this.opendata && _this.opendata instanceof Function) { const data: any = { }; if (args.length > 0) { Object.assign(data, { ibizbook: args[0].ibizbook }) } _this.opendata([{ ...data }], args, params, $event, xData); } else { _this.$Notice.error({ title: '错误', desc: 'opendata 视图处理逻辑不存在,请添加!' }); } } /** * 刷新 * * @param {any[]} args 当前数据 * @param {any} contextJO 行为附加上下文 * @param {*} [params] 附加参数 * @param {*} [$event] 事件源 * @param {*} [xData] 执行行为所需当前部件 * @param {*} [actionContext] 执行行为上下文 * @memberof IBIZBOOKCalendarViewBase */ public Refresh(args: any[],contextJO?:any, params?: any, $event?: any, xData?: any,actionContext?:any,srfParentDeName?:string) { const _this: any = this; if (xData && xData.refresh && xData.refresh instanceof Function) { xData.refresh(args); } else if (_this.refresh && _this.refresh instanceof Function) { _this.refresh(args); } } /** * 转化数据 * * @param {any} args * @memberof IBIZBOOKMONTHBase */ public transformData(args: any) { let _this: any = this; if(_this.service && _this.service.handleRequestData instanceof Function && _this.service.handleRequestData('transform',_this.context,args)){ return _this.service.handleRequestData('transform',_this.context,args)['data']; } } /** * 关闭视图 * * @param {any} args * @memberof IBIZBOOKMONTHBase */ public closeView(args: any): void { let _this: any = this; _this.$emit('closeview', [args]); } /** * 计数器刷新 * * @memberof IBIZBOOKMONTHBase */ public counterRefresh(){ const _this:any =this; if(_this.counterServiceArray && _this.counterServiceArray.length >0){ _this.counterServiceArray.forEach((item:any) =>{ if(item.refreshData && item.refreshData instanceof Function){ item.refreshData(); } }) } } /** * 是否默认选中第一条数据 * * @type {boolean} * @memberof IBIZBOOKMONTHBase */ @Prop({ default: false }) public isSelectFirstDefault!: boolean; /** * 显示处理提示 * * @type {boolean} * @memberof IBIZBOOKMONTHBase */ @Prop({ default: true }) public showBusyIndicator?: boolean; /** * 部件行为--load * * @type {string} * @memberof IBIZBOOKMONTHBase */ @Prop() public loadAction!: string; /** * 打开新建数据视图 * * @type {any} * @memberof IBIZBOOKMONTHBase */ @Prop() public newdata: any; /** * 打开编辑数据视图 * * @type {any} * @memberof IBIZBOOKMONTHBase */ @Prop() public opendata: any; /** * 日历部件样式名 * * @public * @type {any[]} * @memberof IBIZBOOKMONTHBase */ public calendarClass: string = "calendar"; /** * this引用 * * @type {any} * @memberof IBIZBOOKMONTHBase */ public thisRef: any = this; /** * 选中事件element元素 * * @public * @type {any[]} * @memberof IBIZBOOKMONTHBase */ public selectedEventElement:any; /** * 是否显示事件时也显示时间 * * @public * @type {boolean} * @memberof IBIZBOOKMONTHBase */ public displayEventTime: boolean = true; /** * 引用插件集合 * * @public * @type {any[]} * @memberof IBIZBOOKMONTHBase */ public calendarPlugins: any[] = [ dayGridPlugin, timeGridPlugin, listPlugin, interactionPlugin ]; /** * 设置头部显示 * * @public * @type {} * @memberof IBIZBOOKMONTHBase */ public header: any = { left: 'prev,next today gotoDate', center: 'title', right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek' }; /** * 按钮文本集合 * * @public * @type {} * @memberof IBIZBOOKMONTHBase */ public buttonText: any = { today: '今天', month: '月', week: '周', day: '天', list: '列' }; /** * 自定义按钮集合 * * @public * @type {} * @memberof IBIZBOOKMONTHBase */ public customButtons: any = { gotoDate: { text: "跳转", click: this.openDateSelect } }; /** * 模态显示控制变量 * * @public * @type boolean * @memberof IBIZBOOKMONTHBase */ public modalVisible: boolean = false; /** * 跳转日期 * * @public * @type Date * @memberof IBIZBOOKMONTHBase */ public selectedGotoDate: Date = new Date(); /** * 打开时间选择模态 * * @public * @memberof IBIZBOOKMONTHBase */ public openDateSelect(){ this.modalVisible = true; } /** * 跳转到指定时间 * * @public * @memberof IBIZBOOKMONTHBase */ public gotoDate(){ let appCalendar: any = this.$refs.calendar; let api = appCalendar.getApi(); api.gotoDate(this.selectedGotoDate); } /** * 有效日期范围 * * @public * @type {} * @memberof IBIZBOOKMONTHBase */ public validRange: any = { start:"0000-01-01", end:"9999-12-31" }; /** * 默认加载日期 * * @public * @type {} * @memberof IBIZBOOKMONTHBase */ public defaultDate: any = this.$util.dateFormat(new Date()); /** * 设置按钮文本 * * @public * @memberof IBIZBOOKMONTHBase */ public setButtonText(){ this.buttonText.today = this.$t('app.calendar.today'), this.buttonText.month = this.$t('app.calendar.month'), this.buttonText.week = this.$t('app.calendar.week'), this.buttonText.day = this.$t('app.calendar.day'), this.buttonText.list = this.$t('app.calendar.list') this.customButtons.gotoDate.text = this.$t('app.calendar.gotoDate') } /** * 监听语言变化 * * @public * @memberof IBIZBOOKMONTHBase */ @Watch('$i18n.locale') public onLocaleChange(newval: any, val: any) { this.setButtonText(); } /** * 日程事件集合 * * @public * @type {any[]} * @memberof IBIZBOOKMONTHBase */ public events: any[] = []; /** * 日历项上下文菜单集合 * * @type {string[]} * @memberof IBIZBOOKMONTHBase */ public actionModel: any = { item1_deuiaction1: {name:'deuiaction1',nodeOwner:'item1',type: 'DEUIACTION', tag: 'Save', noprivdisplaymode:2, visabled: true, disabled: false}, item1_deuiaction2: {name:'deuiaction2',nodeOwner:'item1',type: 'DEUIACTION', tag: 'Edit', actiontarget: 'SINGLEKEY', noprivdisplaymode:2, visabled: true, disabled: false}, item1_deuiaction3: {name:'deuiaction3',nodeOwner:'item1',type: 'DEUIACTION', tag: 'Refresh', actiontarget: 'SINGLEKEY', noprivdisplaymode:2, visabled: true, disabled: false}, } /** * 备份日历项上下文菜单 * * @type {string[]} * @memberof IBIZBOOKMONTHBase */ public copyActionModel: any; /** * 日历样式类型 * * @public * @type {string} * @memberof IBIZBOOKMONTHBase */ public calendarType: string = "MONTH"; /** * 图例显示控制 * * @public * @type {any} * @memberof IBIZBOOKMONTHBase */ public isShowlegend: any = { item1:true, }; /** * 图例点击事件 * * @public * @memberof IBIZBOOKMONTHBase */ legendTrigger(itemType:string){ this.isShowlegend[itemType] = !this.isShowlegend[itemType]; this.refresh(); } /** * 查询参数缓存 * * @public * @type {any} * @memberof IBIZBOOKMONTHBase */ public searchArgCache: any = {}; /** * 搜索获取日程事件 * * @param {*} $event 日期信息 * @memberof IBIZBOOKMONTHBase */ 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 }; if(fetchInfo && fetchInfo.query){ Object.assign(arg,{query : fetchInfo.query}); } const parentdata: any = {}; this.$emit('beforeload', parentdata); Object.assign(arg, parentdata); let tempViewParams: any = parentdata.viewparams ? parentdata.viewparams : {}; Object.assign(tempViewParams, JSON.parse(JSON.stringify(this.viewparams))); Object.assign(arg, { viewparams: tempViewParams }); // 处理events数据 let _this = this; let handleEvents = ()=>{ if(_this.isSelectFirstDefault){ // 模拟$event数据 let tempEvent = JSON.parse(JSON.stringify(_this.events.length > 0?_this.events[0]:{})); _this.onEventClick(tempEvent,true); if(_this.events.length > 0){ _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) { if (response.data && response.data.message) { this.$Notice.error({ title: (this.$t('app.commonWords.wrong') as string), desc: response.data.message }); } return; } // 默认选中第一项 this.events = response.data; handleEvents(); }, (response: any) => { if (response && response.status === 401) { return; } this.$Notice.error({ title: (this.$t('app.commonWords.wrong') as string), desc: response.data && response.data.message ? response.data.message : "" }); }); } /** * 日期点击事件 * * @param {*} $event 日期信息 * @memberof IBIZBOOKMONTHBase */ public onDateClick($event: any) { let date = $event.date; let datestr = $event.dateStr; } /** * 获取编辑视图信息 * * @param {*} $event 事件信息 * @memberof IBIZBOOKMONTHBase */ public getEditView(deName: string) { let view: any = {}; switch(deName){ case "ibizbook": view = { viewname: 'ibizbookedit-view', height: 0, width: 0, title: this.$t('entities.ibizbook.views.editview.title'), placement: '', deResParameters: [], parameters: [{ pathName: 'ibizbooks', parameterName: 'ibizbook' }, { pathName: 'editview', parameterName: 'editview' } ], }; break; } return view; } /** * 日程点击事件 * * @param {*} $event calendar事件对象或event数据 * @param {*} isOriginData true:$event是原始event数据,false:是组件 * @param {*} $event timeline事件对象 * @memberof IBIZBOOKMONTHBase */ public onEventClick($event: any, isOriginData:boolean = false, $event2?: any) { // 处理event数据 let event: any = {}; if(isOriginData){ event = JSON.parse(JSON.stringify($event)); }else{ event = Object.assign({title: $event.event.title, start: $event.event.start, end: $event.event.end}, $event.event.extendedProps); } // 点击选中样式 let JSelement:any = null; if(!isOriginData && $event.el){ JSelement = $event.el; }else if(isOriginData && $event2 && $event2.currentTarget){ JSelement = $event2.currentTarget; } if(JSelement){ this.calendarClass = "calendar"; if(this.selectedEventElement){ this.selectedEventElement.classList.remove("selected-event"); } this.selectedEventElement = JSelement; this.selectedEventElement.classList.add("selected-event"); } // 处理上下文数据 let _this = this; let view: any = {}; let _context: any = Object.assign({},this.context); let _viewparams:any = Object.assign({start:event.start,end:event.end},this.viewparams); switch(event.itemType) { case "item1": _context.ibizbook = event.ibizbook; view = this.getEditView("ibizbook"); break; } this.selections = [event]; // 导航栏中不需要打开视图,只要抛出选中数据 if(this.isSelectFirstDefault){ this.$emit("selectionchange",this.selections); return; } // 根据打开模式打开视图 if(!view.viewname){ return; } else if (Object.is(view.placement, 'INDEXVIEWTAB') || Object.is(view.placement, '')) { const routePath = this.$viewTool.buildUpRoutePath(this.$route, this.context, view.deResParameters, view.parameters, [JSON.parse(JSON.stringify(_context))] , _viewparams); this.$router.push(routePath); } else { let container: Subject<any> = new Subject(); if (Object.is(view.placement, 'POPOVER')) { container = this.$apppopover.openPop(isOriginData ? $event2 : $event.jsEvent, view,JSON.parse(JSON.stringify(_context)), _viewparams); } else if (Object.is(view.placement, 'POPUPMODAL')) { container = this.$appmodal.openModal(view, JSON.parse(JSON.stringify(_context)), _viewparams); } else if (view.placement.startsWith('DRAWER')) { container = this.$appdrawer.openDrawer(view, JSON.parse(JSON.stringify(_context)), _viewparams); } container.subscribe((result: any) => { if (!result || !Object.is(result.ret, 'OK')) { return; } // 刷新日历 _this.refresh(); }); } } /** * 日历刷新 * * @memberof IBIZBOOKMONTHBase */ public refresh(args?:any) { if(Object.is(this.calendarType,"TIMELINE")){ this.searchEvents(); } else { let calendarApi = (this.$refs.calendar as any).getApi(); calendarApi.refetchEvents(); } } /** * 日程拖动事件 * * @param {*} $event 事件信息 * @memberof IBIZBOOKMONTHBase */ public onEventDrop($event: any) { if(this.isSelectFirstDefault){ return; } let arg: any = {}; let _context: any = Object.assign({},this.context); arg.start = this.$util.dateFormat($event.event.start); arg.end = this.$util.dateFormat($event.event.end); let itemType = $event.event._def.extendedProps.itemType; switch(itemType) { case "item1": arg.ibizbook = $event.event._def.extendedProps.ibizbook; _context.ibizbook = $event.event._def.extendedProps.ibizbook; break; } Object.assign(arg,{viewparams:this.viewparams}); const post: Promise<any> = this.service.update(itemType, JSON.parse(JSON.stringify(_context)), arg, this.showBusyIndicator); post.then((response: any) => { if (!response || response.status !== 200) { if (response.data && response.data.message) { this.$Notice.error({ title: (this.$t('app.commonWords.wrong') as string), desc: response.data.message }); } return; } }, (response: any) => { if (response && response.status === 401) { return; } this.$Notice.error({ title: (this.$t('app.commonWords.wrong') as string), desc: response.data && response.data.message ? response.data.message : "" }); }); } /** * 选中的数据 * * @returns {any[]} * @memberof IBIZBOOKMONTHBase */ public selections: any[] = []; /** * 应用状态事件 * * @public * @type {(Subscription | undefined)} * @memberof IBIZBOOKMONTHBase */ public appStateEvent: Subscription | undefined; /** * 获取多项数据 * * @returns {any[]} * @memberof IBIZBOOKMONTHBase */ public getDatas(): any[] { return this.selections; } /** * 获取单项数据 * * @returns {*} * @memberof IBIZBOOKMONTHBase */ public getData(): any { return null; } /** * vue 生命周期 * * @returns * @memberof IBIZBOOKMONTHBase */ public created() { this.setButtonText(); this.afterCreated(); } /** * 执行created后的逻辑 * * @memberof IBIZBOOKMONTHBase */ public afterCreated(){ if (this.viewState) { this.viewStateEvent = this.viewState.subscribe(({ tag, action, data }) => { if (!Object.is(tag, this.name)) { return; } }); } if(AppCenterService && AppCenterService.getMessageCenter()){ this.appStateEvent = AppCenterService.getMessageCenter().subscribe(({ name, action, data }) =>{ if(!Object.is(name,"IBIZBOOK")){ return; } if(Object.is(action,'appRefresh')){ this.refresh(); } }) } } /** * vue 生命周期 * * @memberof IBIZBOOKMONTHBase */ public mounted(){ this.afterMounted(); } /** * 执行mounted后的逻辑 * * @memberof IBIZBOOKMONTHBase */ public afterMounted(){ let appCalendar: any = this.$refs.calendar; if(appCalendar){ let api = appCalendar.getApi(); api.updateSize() } } /** * vue 生命周期 * * @memberof IBIZBOOKMONTHBase */ public destroyed() { this.afterDestroy(); } /** * 执行destroyed后的逻辑 * * @memberof IBIZBOOKMONTHBase */ public afterDestroy() { if (this.viewStateEvent) { this.viewStateEvent.unsubscribe(); } if(this.appStateEvent){ this.appStateEvent.unsubscribe(); } } /** * 工具栏模型 * * @type {*} * @memberof IBIZBOOKCalendarView */ public calendarviewcalendar_quicktoolbarModels: any = { deuiaction1: { name: 'deuiaction1', actiontarget: 'NONE', caption: '保存', disabled: false, type: 'DEUIACTION', visabled: true,noprivdisplaymode:2,dataaccaction: '', uiaction: { tag: 'Save', target: '' } }, deuiaction2: { name: 'deuiaction2', actiontarget: 'NONE', caption: '编辑', disabled: false, type: 'DEUIACTION', visabled: true,noprivdisplaymode:2,dataaccaction: '', uiaction: { tag: 'Edit', target: 'SINGLEKEY' } }, deuiaction3: { name: 'deuiaction3', actiontarget: 'NONE', caption: '刷新', disabled: false, type: 'DEUIACTION', visabled: true,noprivdisplaymode:2,dataaccaction: '', uiaction: { tag: 'Refresh', target: 'SINGLEKEY' } }, }; /** * 计算节点右键权限 * * @param {*} data 日历项数据 * @param {*} appEntityName 应用实体名称 * @returns * @memberof IBIZBOOKMONTHBase */ public async computeNodeState(data:any,appEntityName:string) { let service:any = await this.appEntityService.getService(appEntityName); if(this.copyActionModel && Object.keys(this.copyActionModel).length > 0) { if(service['Get'] && service['Get'] instanceof Function){ let tempContext:any = Util.deepCopy(this.context); tempContext[appEntityName] = data[appEntityName]; let targetData = await service.Get(tempContext,{}, false); let uiservice:any = await new UIService().getService(appEntityName); let result: any[] = ViewTool.calcActionItemAuthState(targetData.data,this.copyActionModel,uiservice); return this.copyActionModel; }else{ console.warn("获取数据异常"); return this.copyActionModel; } } } /** * 事件绘制回调 * * @param {*} info 信息 * @memberof IBIZBOOKMONTHBase */ public eventRender(info?:any,) { let data = Object.assign({title: info.event.title, start: info.event.start, end: info.event.end}, info.event.extendedProps); info.el.addEventListener('contextmenu', (event: MouseEvent) => { this.copyActionModel = {}; Object.values(this.actionModel).forEach((item:any) =>{ if(Object.is(item.nodeOwner,data.itemType)){ this.copyActionModel[item.name] = item; } }) if(Object.keys(this.copyActionModel).length === 0){ return; } let dataMapping:any ={'item1':'ibizbook'}; this.computeNodeState(data,dataMapping[data.itemType]).then((result:any) => { let flag:boolean = false; if(Object.values(result).length>0){ flag =Object.values(result).some((item:any) =>{ return item.visabled === true; }) } if(flag){ let props = { data: data, renderContent: this.renderContextMenu }; let component = ContextMenu; const vm:any = new Vue({ render(h) { return h(component, { props }); } }).$mount(); document.body.appendChild(vm.$el); const comp: any = vm.$children[0]; comp.showContextMenu(event.clientX, event.clientY); } }); }); } /** * 绘制右键菜单 * * @param {*} event * @returns * @memberof IBIZBOOKMONTHBase */ public renderContextMenu(event: any) { let content; if (event && event.itemType) { const data: any = JSON.parse(JSON.stringify(event)); this.selections = [event]; switch(event.itemType){ case "item1": content = this.renderContextMenuItem1(); break; } } return content; } /** * 绘制item1类型右键菜单 * * @returns * @memberof IBIZBOOKMONTHBase */ public renderContextMenuItem1() { return ( <dropdown class="tree-right-menu" trigger="custom" visible={true} on-on-click={($event: any) => this.cm_click({tag: $event})}> <dropdown-menu slot="list"> <dropdown-item name='deuiaction1' v-show={this.copyActionModel['deuiaction1'].visabled} disabled={this.copyActionModel['deuiaction1'].disabled}> <i class='fa fa-save'></i> 保存 </dropdown-item> <dropdown-item name='deuiaction2' v-show={this.copyActionModel['deuiaction2'].visabled} disabled={this.copyActionModel['deuiaction2'].disabled}> <i class='fa fa-edit'></i> 编辑 </dropdown-item> <dropdown-item name='deuiaction3' v-show={this.copyActionModel['deuiaction3'].visabled} disabled={this.copyActionModel['deuiaction3'].disabled}> <i class='fa fa-refresh'></i> 刷新 </dropdown-item> </dropdown-menu> </dropdown> ); } /** * 时间点击 * * @param {*} $event 当前时间 * @param {*} jsEvent 原生事件对象 * @returns * @memberof IBIZBOOKMONTHBase */ public onDayClick($event: any, jsEvent: any) { let content: any = this.renderBarMenu; const height = 3 * 34; const container = this.$apppopover.openPopover(jsEvent, content, "left-end", true, 103, height); } /** * 绘制快速工具栏项 * * @returns * @memberof IBIZBOOKMONTHBase */ public renderBarMenu() { return ( <div id="calendar-popover"> <dropdown class="tree-right-menu" trigger="custom" visible={true} on-on-click={($event: any) => this.calendar_quicktoolbar_click({tag: $event})}> <dropdown-menu slot="list"> <dropdown-item name="deuiaction1" v-show={this.calendarviewcalendar_quicktoolbarModels.deuiaction1.visabled} disabled={this.calendarviewcalendar_quicktoolbarModels.deuiaction1.disabled}> <i class="fa fa-save"></i> 保存 </dropdown-item> <dropdown-item name="deuiaction2" v-show={this.calendarviewcalendar_quicktoolbarModels.deuiaction2.visabled} disabled={this.calendarviewcalendar_quicktoolbarModels.deuiaction2.disabled}> <i class="fa fa-edit"></i> 编辑 </dropdown-item> <dropdown-item name="deuiaction3" v-show={this.calendarviewcalendar_quicktoolbarModels.deuiaction3.visabled} disabled={this.calendarviewcalendar_quicktoolbarModels.deuiaction3.disabled}> <i class="fa fa-refresh"></i> 刷新 </dropdown-item> </dropdown-menu> </dropdown> </div> ) } } </script> <style lang='less'> @import './ibizbookmonth-calendar.less'; </style>