上个小节我们了解到前端页面甘特图是怎么设计出来的，特别是Ajax查询到的日程数据必须要二次加工之后，才能交给视图层显示，所以这节课我们写JS代码的时候要注意这个问题。
一、编写封装方法，获取分页数据
在offline_meeting.vue页面中，我们去定义loadDataList()函数，发出Ajax请求，加载分页数据。
loadDataList: function() {
let that = this;
that.dataListLoading = true;
let data = {
name: that.dataForm.name,
mold: that.dataForm.mold,
page: that.pageIndex,
length: that.pageSize
};
if (that.dataForm.date == null || that.dataForm.date == '') {
data.date = dayjs(new Date()).format('YYYY-MM-DD');
} else {
data.date = dayjs(that.dataForm.date).format('YYYY-MM-DD');
}
that.$http('meeting/searchOfflineMeetingByPage', 'POST', data, true, function(resp) {
let page = resp.page;
let temp = [];
for (let room of page.list) {
let json = {};
json.name = room.name;
json.meeting = {};
if (room.hasOwnProperty('meeting')) {
for (let meeting of room.meeting) {
let color;
if (meeting.status == 1) {
color = 'yellow';
} else if (meeting.status == 3) {
color = 'blue';
} else if (meeting.status == 4) {
color = 'pink';
} else if (meeting.status == 5) {
color = 'gray';
}
json.meeting[meeting.start] = meeting.time + '#' + color;
}
}
temp.push(json);
}
that.gantt.meetingRoom = temp;
that.totalCount = page.totalCount;
that.dataListLoading = false;
});
},
二、编写查询回调函数
接下来我们要实现条件查询按钮的点击事件回调函数，我们创建searchHandle()这个函数
searchHandle: function() {
let that = this;
//查询甘特图数据
if (that.dataForm.name == null || that.dataForm.name == '') {
that.$refs['dataForm'].validate(valid => {
if (valid) {
that.$refs['dataForm'].clearValidate();
that.dataForm.name = null;
if (that.pageIndex != 1) {
that.pageIndex = 1;
}
that.loadDataList();
that.mode = 'gantt';
} else {
return false;
}
});
}
},
//切换“我的会议”和“全部会议”时候触发事件的回调函数
changeHandle: function(val) {
this.searchHandle();
},
最后我们还要实现和分页控件相关的回调事件。
sizeChangeHandle: function(val) {
this.pageSize = val;
this.pageIndex = 1;
this.loadDataList();
},
currentChangeHandle: function(val) {
this.pageIndex = val;
this.loadDataList();
},