上个小节我们测试了用Swagger测试了Web方法，可以查询到周日历和会议概要信息。既然后端程序没有问题了，接下来该写前端程序了。

后端Web方法返回的周日历数据是数组格式的，在前端页面上面用起来不方面，我们要把数组转换成JSON对象，前端页面用这样的数据就很简单了，适合页面控件的渲染。

[
  {title:"测试会议1", date:"2021-07-31", start:"09:00", time:2, ……} ,
  {title:"测试会议2", date:"2021-07-31", start:"15:30", time:2, ……} ,
]

{
  "2021-07-31#09:00": {title:"测试会议1", date:"2021-07-31", start:"09:00", time:2, ……} ,
  "2021-07-31#15:30": {title:"测试会议2", date:"2021-07-31", start:"15:30", time:2, ……} ,
}

一、编写JS获取周日历数据

周日历界面想要显示会议卡片，需要我们先要把数据查询出来。我们按照会议室名称查找，才能进入到周日历界面，所以我们不应该写loadDataList()函数，而是要在searchHandle()函数中，我们继续编写剩余的代码。

searchHandle: function() {
    ……
    //查询甘特图数据
    if (that.dataForm.name == null || that.dataForm.name == '') {
        ……
    }
    //查询周日历数据
    else {
        that.$refs['dataForm'].validate(valid => {
            if (valid) {
                that.$refs['dataForm'].clearValidate();
                let data = {
                    name: that.dataForm.name,
                    mold: that.dataForm.mold
                };
                //日历控件的值默认为null，有具体日期的日历被清除日期之后，值为空字符串
                if (that.dataForm.date != null && that.dataForm.date != '') {
                    data.date = dayjs(that.dataForm.date).format('YYYY-MM-DD');
                }
                that.$http('meeting/searchOfflineMeetingInWeek', 'POST', data, true, function(resp) {
                    let map = {};
                    //视图层输出会议卡片做判断遍历数组太麻烦，所以把周日历数据从数组转换成JSON对象
                    for (let one of resp.list) {
                        map[`${one.date}#${one.start}`] = one;
                    }
                    that.calendar.map = map;
                    //周日历表头标题
                    that.calendar.days = resp.days;
                    that.mode = 'calendar';
                });
            } else {
                return false;
            }
        });
    }
},

二、周日历的视图层

周日历的视图层主要做了两件事，渲染表头标题文字，输出会议卡片，这两件事情都是用for循环做的。

<div class="calendar" v-show="mode == 'calendar'">
    <div class="row">
        <div class="cell">时间</div>
        <div class="cell" v-for="one in calendar.days">{{ one.date }}（{{ one.day }}）</div>
    </div>
    <div class="row" v-for="(one, index) in time">
        <div class="cell-time" v-if="time[index + 1] != null">{{ one }} ~ {{ time[index + 1] }}</div>
        <div class="cell" v-for="day in calendar.days" v-if="time[index + 1] != null">
            <div
                class="meeting"
                v-if="calendar.map.hasOwnProperty(`${day.date}#${one}`)"
                :style="
                    'height:' +
                        calendar.map[day.date + '#' + one].time * 31 +
                        'px; line-height:' +
                        calendar.map[day.date + '#' + one].time * 31 +
                        'px'
                "
                :ref="`${day.date}#${one}`"
                @click="
                    infoHandle(calendar.map[day.date + '#' + one].id, calendar.map[day.date + '#' + one].status)
                "
            >
                <SvgIcon
                    name="close"
                    class="icon-svg-close"
                    v-if="
                        calendar.map[`${day.date}#${one}`].isCreator == 'true' &&
                            [1, 3].includes(calendar.map[`${day.date}#${one}`].status)
                    "
                    @click.stop="deleteHandle(`${day.date}#${one}`)"
                />
                {{ calendar.map[`${day.date}#${one}`].title }}
            </div>
        </div>
    </div>
</div>