上个小节我们测试了用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>