管理端-会议记录

本文是关于无纸化会议系统管理端会议记录的操作，本界面使用html+css+js进行开发，使用Vue框架和ElementUI进行辅助开发。管理员可以使用本网页查询会议记录并对会议进行操作，如将会议状态从未开始切换为即将开始，或者把即将开始的会议改为另一个会议。

网页分成两个部分，上方的显示条和下方的会议列表，上方的显示条显示的是即将开始的会议和正在进行中的会议，如果有即将开始的会议或者正在进行的会议，在显示条上就会显示有即将开始的会议或者正在进行的会议，如果既没有即将开始的会议，又没有正在进行的会议，那么就会显示当前暂无会议安排，因此，为了实现这个功能，我们需要从服务器获取会议列表，并将不同状态的会议存入到不同的会议列表中，部分实现代码如下：

created : function () {$.ajax({type:"GET",url:"http://paperless.ronwhite.online:10082/meeting/getMeetingList",data:{},success:function(re){if(re['code']==200){var ml = re['obj'];for(var i = 0; i < ml.length; i++){var meeting = ml[i];var mState = '';if(meeting['state']==100){mState = '未开始';}else if(meeting['state']==0){mState = '会议即将开始';}else if(meeting['state']==1){mState = '会议进行中';}else{mState = '已结束';}//新建一个会议信息对象var mi = {meetingId : meeting['uid'],meetingTitle : meeting['name'],meetintContent : meeting['content'],meetingBeginTime : meeting['beginTime'],meetingEndTime : meeting['endTime'],meetingState : mState};//将会议信息存入总会议列表meetingsListpage.meetingsList.push(mi);//将会议信息存入各自分类的会议列表if(meeting['state']==0){page.nextStartMeetingsList.push(mi);}else if(meeting['state']==1){page.underwayMeetingsList.push(mi);}else{page.notStartAndEndedMeetingsList.push(mi);}}//判断是否有即将开始的会议，给nextStartMeetingsListnotNull赋值if(page.nextStartMeetingsList.length==0){page.nextStartMeetingsListnotNull = false;}else{page.nextStartMeetingsListnotNull = true;}//判断是否有正在进行的会议，给underwayMeetingsListnotNull赋值if(page.underwayMeetingsList.length==0){page.underwayMeetingsListnotNull = false;}else{page.underwayMeetingsListnotNull = true;}//判断是否有即将开始或正在进行的会议，给haveNoMeetingOn赋值if(page.nextStartMeetingsList.length==0&&page.underwayMeetingsList.length==0){page.haveNoMeetingOn = true;}else{page.haveNoMeetingOn = false;}}}});}

下方的会议列表会显示当前未开始或已结束的会议，如下图所示：
在这里插入图片描述
可以看到，当前暂无会议安排，我们可以从下方的文件列表中选择一个未开始的会议，点击准备，就可以把该会议的状态变为即将开始，我们需要向服务器发出更改会议状态的请求，将该会议的状态从未开始变为即将进行，部分代码如下所示：

//暂无会议安排，直接将该会议设置为即将进行。
//将该会议从 notStartAndEndedMeetingsList中移除
for(var i = 0; i < this.notStartAndEndedMeetingsList.length; i++){var mInfo = this.notStartAndEndedMeetingsList[i];if(mInfo['meetingId']==row['meetingId']){this.notStartAndEndedMeetingsList.splice(this.notStartAndEndedMeetingsList.indexOf(mInfo),1);}
}//在nextStartMeetingsList中添加该会议
this.nextStartMeetingsList.push({meetingId : row['meetingId'],meetingTitle : row['meetingTitle'],meetintContent : row['meetintContent'],meetingBeginTime : row['meetingBeginTime'],meetingEndTime : row['meetingEndTime'],meetingState : '会议即将开始'
});//将nextStartMeetingsListnotNull设置为true,haveNoMeetingOn设置为false
this.nextStartMeetingsListnotNull = true;
this.haveNoMeetingOn = false;//将改变传到服务器
$.ajax({type:"POST",url:"http://paperless.ronwhite.online:10082/meeting/changeState",data:{meetingId : row['meetingId'],state : 0,},success:function(re){if(re['code']==200){alert("修改成功");}}
});

效果如下图所示：
在这里插入图片描述

如果我们想替换即将开始的会议，我们可以选择一个未开始的会议，点击准备按钮，这样我们就可以把即将开始的会议替换为当前会议，我们需要向服务器发出更改会议状态的请求，将该会议的状态从未开始变为即将进行，并把原来即将进行的会议的状态从即将开始变为未开始，部分代码如下所示：

replaceMeeting(){//替换会议//删掉nextStartMeetingsListnotNull中原来的会议并添加当前会议var lastMeeting = this.nextStartMeetingsList[0];this.nextStartMeetingsList = [];this.nextStartMeetingsList.push({meetingId : this.currentRow['meetingId'],meetingTitle : this.currentRow['meetingTitle'],meetintContent : this.currentRow['meetintContent'],meetingBeginTime : this.currentRow['meetingBeginTime'],meetingEndTime : this.currentRow['meetingEndTime'],meetingState : '会议即将开始'});//将当前会议从notStartAndEndedMeetingsList中删除，并添加被删除的会议for(var i = 0; i < this.notStartAndEndedMeetingsList.length; i++){var mInfo = this.notStartAndEndedMeetingsList[i];if(mInfo['meetingId']==this.currentRow['meetingId']){this.notStartAndEndedMeetingsList.splice(this.notStartAndEndedMeetingsList.indexOf(mInfo),1);}}this.notStartAndEndedMeetingsList.push({meetingId : lastMeeting['meetingId'],meetingTitle : lastMeeting['meetingTitle'],meetintContent : lastMeeting['meetintContent'],meetingBeginTime : lastMeeting['meetingBeginTime'],meetingEndTime : lastMeeting['meetingEndTime'],meetingState : '未开始'});//将改变传到服务器$.ajax({type:"POST",url:"http://paperless.ronwhite.online:10082/meeting/changeState",data:{meetingId : lastMeeting['meetingId'],state : 100,},success:function(re){if(re['code']==200){alert("修改成功");}}});$.ajax({type:"POST",url:"http://paperless.ronwhite.online:10082/meeting/changeState",data:{meetingId : this.currentRow['meetingId'],state : 0,},success:function(re){if(re['code']==200){alert("修改成功");}}});}