Skip to content

iBiz-Vue-R7
iBiz-Vue-R7
提交 a0cf9cbe 编写于 作者: JunZai's avatar JunZai
浏览文件
操作

update

上级 e6dba7c9
隐藏空白字符变更
内嵌 并排
正在显示 包含 53 行增加 和 399 行删除
@CONTROL/甘特图部件/CONTROL-BASE.vue.ftl
浏览文件 @ a0cf9cbe
......@@ -2,29 +2,9 @@
../../@MACRO/LANG_FUN.ftl
</#ibizinclude>
<template>
<div :class='ganttClass'>
<FullCalendar
ref="calendar"
: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>
<gantt-elastic :class="ganttClass" :tasks="tasks" :options="options" :dynamic-style="dynamicStyle">
<gantt-elastic-header :options="options" slot="header"></gantt-elastic-header>
</gantt-elastic>
</template>
<#assign import_block>
import FullCalendar from '@fullcalendar/vue'
......@@ -42,14 +22,6 @@ FullCalendar,
../@MACRO/CONTROL/CONTROL_HEADER-BASE.vue.ftl
</#ibizinclude>
/**
* 是否默认选中第一条数据
*
* @type {boolean}
* @memberof ${srfclassname('${ctrl.codeName}')}
*/
@Prop({ default: false }) public isSelectFirstDefault!: boolean;
/**
* 显示处理提示
*
......@@ -67,7 +39,7 @@ FullCalendar,
@Prop() public loadAction!: string;
/**
* 日历部件样式名
* 部件样式名
*
* @public
* @type {any[]}
......@@ -76,146 +48,58 @@ FullCalendar,
public ganttClass: string = "gantt";
/**
* 选中事件element元素
* 配置参数
*
* @public
* @type {any[]}
* @memberof ${srfclassname('${ctrl.codeName}')}
*/
public selectedEventElement:any;
/**
* 引用插件集合
*
* @public
* @type {any[]}
* @memberof ${srfclassname('${ctrl.codeName}')}
*/
public calendarPlugins: any[] = [
dayGridPlugin,
timeGridPlugin,
listPlugin,
interactionPlugin
];
/**
* 设置头部显示
*
* @public
* @type {}
* @memberof ${srfclassname('${ctrl.codeName}')}
*/
public header: any = {
left: 'prev,next today gotoDate',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
};
/**
* 按钮文本集合
*
* @public
* @type {}
* @memberof ${srfclassname('${ctrl.codeName}')}
*/
public buttonText: any = {
today: '今天',
month: '月',
week: '周',
day: '天',
list: '列'
};
/**
* 自定义按钮集合
*
* @public
* @type {}
* @memberof ${srfclassname('${ctrl.codeName}')}
*/
public customButtons: any = {
gotoDate: {
text: "跳转",
click: this.openDateSelect
public options: any = {
isflex: true,
maxRows: 100,
title: {
label: "aaa",
html: true
},
calendar: {
hour: {
display: false
}
},
chart: {
progress: {
bar: false
},
expander: {
display: true
},
},
taskList: {
expander: {
straight: false
},
columns: [
{
id: 1,
label: '名称',
value: 'label',
width: 150
}
]
}
};
/**
* 模态显示控制变量
*
* @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
* @type {any[]}
* @memberof ${srfclassname('${ctrl.codeName}')}
*/
public gotoDate(){
let appGantt: any = this.$refs.gantt;
let api = appGantt.getApi();
api.gotoDate(this.selectedGotoDate);
}
public dynamicStyle: any = {
/**
* 有效日期范围
*
* @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,
* @type {any[]}
* @memberof ${srfclassname('${ctrl.codeName}')}
*/
public events: any[] = [];
public tasks: any[] = [];
/**
* 日历样式类型
......@@ -268,23 +152,7 @@ FullCalendar,
return;
}
// 默认选中第一项
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.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();
}
this.tasks = response.data;
}, (response: any) => {
if (response && response.status === 401) {
return;
......@@ -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,
}
/**
* 日程点击事件
* 点击事件
*
* @param {*} $event calendar事件对象或event数据
* @param {*} isOriginData true：$event是原始event数据，false：是组件
......@@ -362,134 +219,19 @@ FullCalendar,
* @memberof ${srfclassname('${ctrl.codeName}')}
*/
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}')}
*/
public refresh() {
if(Object.is(this.ganttType,"TIMELINE")){
this.searchEvents();
} else {
let calendarApi = (this.$refs.gantt as any).getApi();
calendarApi.refetchEvents();
}
this.searchEvents();
}
/**
* 日程拖动事件
*
* @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,
* @memberof ${srfclassname('${ctrl.codeName}')}
*/
public created() {
<#if ctrl.getCalendarStyle?? && ctrl.getCalendarStyle() == 'TIMELINE'>
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>
......
@CONTROL/甘特图部件/CONTROL.less.ftl
浏览文件 @ a0cf9cbe
......@@ -6,54 +6,8 @@
@import '~@fullcalendar/timegrid/main.css';
@import '~@fullcalendar/list/main.css';
.calendar{
height:100%;
.el-timeline{
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;
}
.gantt {
.gantt-elastic__main-view-container {
flex-grow: 1;
}
}
\ No newline at end of file
@CONTROL/甘特图部件/MODEL.ts.ftl
浏览文件 @ a0cf9cbe
......@@ -62,11 +62,11 @@
case "${ganttItem.getItemType()}":
dataItems = [...dataItems,
{
name: '${appDataEntity.getCodeName()?lower_case}',
name: 'id',
prop: '${appDataEntity.getKeyPSAppDEField().getCodeName()?lower_case}'
},
{
name: 'title',
name: 'label',
prop: '${appDataEntity.getMajorPSAppDEField().getCodeName()?lower_case}'
},
{
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或