Skip to content

I
iBiz4jVue
提交 a0cf9cbe 编写于 作者: JunZai's avatar JunZai
浏览文件
操作

update

上级 e6dba7c9
显示空白字符变更
内嵌 并排
正在显示 包含 52 行增加 和 398 行删除
@CONTROL/甘特图部件/CONTROL-BASE.vue.ftl
浏览文件 @ a0cf9cbe
...@@ -2,29 +2,9 @@ ...@@ -2,29 +2,9 @@
../../@MACRO/LANG_FUN.ftl ../../@MACRO/LANG_FUN.ftl
</#ibizinclude> </#ibizinclude>
<template> <template>
<div :class='ganttClass'> <gantt-elastic :class="ganttClass" :tasks="tasks" :options="options" :dynamic-style="dynamicStyle">
<FullCalendar <gantt-elastic-header :options="options" slot="header"></gantt-elastic-header>
ref="calendar" </gantt-elastic>
:locale="$i18n.locale"
height="parent"
:firstDay="1"
:eventLimit="true"
:editable="!isSelectFirstDefault && true"
:buttonText="buttonText"
:header="header"
:plugins="calendarPlugins"
:events="searchEvents"
:customButtons="customButtons"
:validRange="validRange"
:defaultDate="defaultDate"
@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>
</div>
</template> </template>
<#assign import_block> <#assign import_block>
import FullCalendar from '@fullcalendar/vue' import FullCalendar from '@fullcalendar/vue'
...@@ -42,14 +22,6 @@ FullCalendar, ...@@ -42,14 +22,6 @@ FullCalendar,
../@MACRO/CONTROL/CONTROL_HEADER-BASE.vue.ftl ../@MACRO/CONTROL/CONTROL_HEADER-BASE.vue.ftl
</#ibizinclude> </#ibizinclude>
/**
* 是否默认选中第一条数据
*
* @type {boolean}
* @memberof ${srfclassname('${ctrl.codeName}')}
*/
@Prop({ default: false }) public isSelectFirstDefault!: boolean;
/** /**
* 显示处理提示 * 显示处理提示
* *
...@@ -67,7 +39,7 @@ FullCalendar, ...@@ -67,7 +39,7 @@ FullCalendar,
@Prop() public loadAction!: string; @Prop() public loadAction!: string;
/** /**
* 日历部件样式名 * 部件样式名
* *
* @public * @public
* @type {any[]} * @type {any[]}
...@@ -76,146 +48,58 @@ FullCalendar, ...@@ -76,146 +48,58 @@ FullCalendar,
public ganttClass: string = "gantt"; public ganttClass: string = "gantt";
/** /**
* 选中事件element元素 * 配置参数
*
* @public
* @type {any[]}
* @memberof ${srfclassname('${ctrl.codeName}')}
*/
public selectedEventElement:any;
/**
* 引用插件集合
* *
* @public * @public
* @type {any[]} * @type {any[]}
* @memberof ${srfclassname('${ctrl.codeName}')} * @memberof ${srfclassname('${ctrl.codeName}')}
*/ */
public calendarPlugins: any[] = [ public options: any = {
dayGridPlugin, isflex: true,
timeGridPlugin, maxRows: 100,
listPlugin, title: {
interactionPlugin label: "aaa",
]; html: true
},
/** calendar: {
* 设置头部显示 hour: {
* display: false
* @public }
* @type {} },
* @memberof ${srfclassname('${ctrl.codeName}')} chart: {
*/ progress: {
public header: any = { bar: false
left: 'prev,next today gotoDate', },
center: 'title', expander: {
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek' display: true
}; },
},
/** taskList: {
* 按钮文本集合 expander: {
* straight: false
* @public },
* @type {} columns: [
* @memberof ${srfclassname('${ctrl.codeName}')} {
*/ id: 1,
public buttonText: any = { label: '名称',
today: '今天', value: 'label',
month: '月', width: 150
week: '周', }
day: '天', ]
list: '列'
};
/**
* 自定义按钮集合
*
* @public
* @type {}
* @memberof ${srfclassname('${ctrl.codeName}')}
*/
public customButtons: any = {
gotoDate: {
text: "跳转",
click: this.openDateSelect
} }
}; };
/** /**
* 模态显示控制变量 * 样式
*
* @public
* @type boolean
* @memberof ${srfclassname('${ctrl.codeName}')}
*/
public modalVisible: boolean = false;
/**
* 跳转日期
*
* @public
* @type Date
* @memberof ${srfclassname('${ctrl.codeName}')}
*/
public selectedGotoDate: Date = new Date();
/**
* 打开时间选择模态
*
* @public
* @memberof ${srfclassname('${ctrl.codeName}')}
*/
public openDateSelect(){
this.modalVisible = true;
}
/**
* 跳转到指定时间
* *
* @public * @public
* @type {any[]}
* @memberof ${srfclassname('${ctrl.codeName}')} * @memberof ${srfclassname('${ctrl.codeName}')}
*/ */
public gotoDate(){ public dynamicStyle: any = {
let appGantt: any = this.$refs.gantt;
let api = appGantt.getApi();
api.gotoDate(this.selectedGotoDate);
}
/**
* 有效日期范围
*
* @public
* @type {}
* @memberof ${srfclassname('${ctrl.codeName}')}
*/
public validRange: any = {
start:"0000-01-01",
end:"9999-12-31"
}; };
/**
* 默认加载日期
*
* @public
* @type {}
* @memberof ${srfclassname('${ctrl.codeName}')}
*/
public defaultDate: any = this.$util.dateFormat(new Date());
/**
* 设置按钮文本
*
* @public
* @memberof ${srfclassname('${ctrl.codeName}')}
*/
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')
}
/** /**
* 监听语言变化 * 监听语言变化
* *
...@@ -234,7 +118,7 @@ FullCalendar, ...@@ -234,7 +118,7 @@ FullCalendar,
* @type {any[]} * @type {any[]}
* @memberof ${srfclassname('${ctrl.codeName}')} * @memberof ${srfclassname('${ctrl.codeName}')}
*/ */
public events: any[] = []; public tasks: any[] = [];
/** /**
* 日历样式类型 * 日历样式类型
...@@ -268,23 +152,7 @@ FullCalendar, ...@@ -268,23 +152,7 @@ FullCalendar,
return; return;
} }
// 默认选中第一项 // 默认选中第一项
this.events = response.data; this.tasks = 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.ganttClass = "gantt select-first-gantt";
}
if(successCallback){
successCallback(this.events);
}
// 刷新日历的大小（仅fullcalendar组件使用）
if(!Object.is(this.ganttType,"TIMELINE")){
let appGantt: any = this.$refs.gantt;
let api = appGantt.getApi();
api.updateSize();
}
}, (response: any) => { }, (response: any) => {
if (response && response.status === 401) { if (response && response.status === 401) {
return; return;
...@@ -293,17 +161,6 @@ FullCalendar, ...@@ -293,17 +161,6 @@ FullCalendar,
}); });
} }
/**
* 日期点击事件
*
* @param {*} $event 日期信息
* @memberof ${srfclassname('${ctrl.codeName}')}
*/
public onDateClick($event: any) {
let date = $event.date;
let datestr = $event.dateStr;
}
/** /**
* 获取编辑视图信息 * 获取编辑视图信息
* *
...@@ -354,7 +211,7 @@ FullCalendar, ...@@ -354,7 +211,7 @@ FullCalendar,
} }
/** /**
* 日程点击事件 * 点击事件
* *
* @param {*} $event calendar事件对象或event数据 * @param {*} $event calendar事件对象或event数据
* @param {*} isOriginData true：$event是原始event数据，false：是组件 * @param {*} isOriginData true：$event是原始event数据，false：是组件
...@@ -362,134 +219,19 @@ FullCalendar, ...@@ -362,134 +219,19 @@ FullCalendar,
* @memberof ${srfclassname('${ctrl.codeName}')} * @memberof ${srfclassname('${ctrl.codeName}')}
*/ */
public onEventClick($event: any, isOriginData:boolean = false, $event2?: any) { 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.ganttClass = "gantt";
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 itemType = event.itemType;
switch(itemType) {
<#if ctrl.getPSSysGanttItems()??>
<#list ctrl.getPSSysGanttItems() as ganttItem>
<#if ganttItem.getPSAppDataEntity()??>
<#assign _appde = ganttItem.getPSAppDataEntity() />
case "${ganttItem.getItemType()}":
_context.${_appde.getCodeName()?lower_case} = event.${_appde.getCodeName()?lower_case};
view = this.getEditView("${_appde.getCodeName()?lower_case}");
break;
</#if>
</#list>
</#if>
}
// 导航栏中不需要打开视图，只要抛出选中数据
if(this.isSelectFirstDefault){
_context.itemType = itemType;
this.selections = [_context];
this.$emit("selectionchange",[_context]);
return;
}
// 根据打开模式打开视图
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))] , JSON.parse(JSON.stringify(this.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)), JSON.parse(JSON.stringify(this.viewparams)));
} else if (Object.is(view.placement, 'POPUPMODAL')) {
container = this.$appmodal.openModal(view, JSON.parse(JSON.stringify(_context)), JSON.parse(JSON.stringify(this.viewparams)));
} else if (view.placement.startsWith('DRAWER')) {
container = this.$appdrawer.openDrawer(view, JSON.parse(JSON.stringify(_context)), JSON.parse(JSON.stringify(this.viewparams)));
}
container.subscribe((result: any) => {
if (!result || !Object.is(result.ret, 'OK')) {
return;
}
// 刷新日历
_this.refresh();
});
}
} }
/** /**
* 日历刷新 * 刷新
* *
* @memberof ${srfclassname('${ctrl.codeName}')} * @memberof ${srfclassname('${ctrl.codeName}')}
*/ */
public refresh() { public refresh() {
if(Object.is(this.ganttType,"TIMELINE")){
this.searchEvents(); this.searchEvents();
} else {
let calendarApi = (this.$refs.gantt as any).getApi();
calendarApi.refetchEvents();
}
} }
/**
* 日程拖动事件
*
* @param {*} $event 事件信息
* @memberof ${srfclassname('${ctrl.codeName}')}
*/
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) {
<#if ctrl.getPSSysGanttItems()??>
<#list ctrl.getPSSysGanttItems() as ganttItem>
<#if ganttItem.getPSAppDataEntity()??>
<#assign _appde = ganttItem.getPSAppDataEntity() />
case "${ganttItem.getItemType()}":
arg.${_appde.getCodeName()?lower_case} = $event.event._def.extendedProps.${_appde.getCodeName()?lower_case};
_context.${_appde.getCodeName()?lower_case} = $event.event._def.extendedProps.${_appde.getCodeName()?lower_case};
break;
</#if>
</#list>
</#if>
}
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.errorMessage) {
this.$Notice.error({ title: '错误', desc: response.errorMessage });
}
return;
}
}, (response: any) => {
if (response && response.status === 401) {
return;
}
this.$Notice.error({ title: '错误', desc: response.errorMessage });
});
}
/** /**
* 选中的数据 * 选中的数据
...@@ -526,50 +268,7 @@ FullCalendar, ...@@ -526,50 +268,7 @@ FullCalendar,
* @memberof ${srfclassname('${ctrl.codeName}')} * @memberof ${srfclassname('${ctrl.codeName}')}
*/ */
public created() { public created() {
<#if ctrl.getCalendarStyle?? && ctrl.getCalendarStyle() == 'TIMELINE'>
this.searchEvents(); this.searchEvents();
<#else>
this.setButtonText();
</#if>
this.afterCreated();
}
/**
* 执行created后的逻辑
*
* @memberof ${srfclassname('${ctrl.codeName}')}
*/
public afterCreated(){
if (this.viewState) {
this.viewStateEvent = this.viewState.subscribe(({ tag, action, data }) => {
if (!Object.is(tag, this.name)) {
return;
}
});
}
}
/**
* vue 生命周期
*
* @memberof ${srfclassname('${ctrl.codeName}')}
*/
public destroyed() {
this.afterDestroy();
}
/**
* 执行destroyed后的逻辑
*
* @memberof ${srfclassname('${ctrl.codeName}')}
*/
public afterDestroy() {
if (this.viewStateEvent) {
this.viewStateEvent.unsubscribe();
}
<#if destroyed_block??>
${destroyed_block}
</#if>
} }
<#ibizinclude> <#ibizinclude>
......
@CONTROL/甘特图部件/CONTROL.less.ftl
浏览文件 @ a0cf9cbe
...@@ -6,54 +6,8 @@ ...@@ -6,54 +6,8 @@
@import '~@fullcalendar/timegrid/main.css'; @import '~@fullcalendar/timegrid/main.css';
@import '~@fullcalendar/list/main.css'; @import '~@fullcalendar/list/main.css';
.calendar{ .gantt {
height:100%; .gantt-elastic__main-view-container {
.el-timeline{ flex-grow: 1;
padding-left: 2px;
}
}
// 选中样式
.calendar .selected-event,
.select-first-calendar .select-first-event{
border: 2px solid #ff8711 !important;
}
.calendar .selected-event:before,
.select-first-calendar .select-first-event:before{
content: '';
display: block;
position: absolute;
right: 0;
bottom: 0;
border: 9px solid #ff8711;
border-top-color: transparent;
border-left-color: transparent;
color: #fff;
}
.calendar .selected-event:after,
.select-first-calendar .select-first-event:after{
content: '';
display: block;
width: 4px;
height: 11px;
position: absolute;
right: 1px;
bottom: 0px;
border: 2px solid #fff;
border-top-color: transparent;
border-left-color: transparent;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
box-sizing: content-box;
}
// 选择跳转日期模态
.date-select-modal{
display: flex;
align-items: center;
justify-content: center;
.ivu-modal{
top: 0;
.ivu-modal-body {
text-align: center;
}
} }
} }
\ No newline at end of file
@CONTROL/甘特图部件/MODEL.ts.ftl
浏览文件 @ a0cf9cbe
...@@ -62,11 +62,11 @@ ...@@ -62,11 +62,11 @@
case "${ganttItem.getItemType()}": case "${ganttItem.getItemType()}":
dataItems = [...dataItems, dataItems = [...dataItems,
{ {
name: '${appDataEntity.getCodeName()?lower_case}', name: 'id',
prop: '${appDataEntity.getKeyPSAppDEField().getCodeName()?lower_case}' prop: '${appDataEntity.getKeyPSAppDEField().getCodeName()?lower_case}'
}, },
{ {
name: 'title', name: 'label',
prop: '${appDataEntity.getMajorPSAppDEField().getCodeName()?lower_case}' prop: '${appDataEntity.getMajorPSAppDEField().getCodeName()?lower_case}'
}, },
{ {
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或