上个小节我们了解到前端页面甘特图是怎么设计出来的，特别是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();
},