上个小节我们定义了后端的Web方法,经过Swagger测试之后,修改会议室信息是没问题的,那么本小节咱们去实现修改会议室信息的前端JS代码。
因为添加会议室和修改会议室信息共用同一个弹窗页面,弹窗页面的代码我们都已经写完了,所以我们要回到会议室管理页面编写JS代码来显示弹窗页面,然后传入要修改的会议室ID,让弹窗页面去查询该会议室的信息。
<el-button
type="text"
size="medium"
:disabled="!isAuth(['ROOT', 'MEETING_ROOM:UPDATE']) || scope.row.id == 0"
@click="updateHandle(scope.row.id)"
>
修改
</el-button>
meeting_room.vue
页面上的修改按钮点击事件回调函数是updateHandle()
,传入的参数是会议室ID,下面我们去声明这个函数。
updateHandle: function(id) {
this.addOrUpdateVisible = true;
this.$nextTick(() => {
this.$refs.addOrUpdate.init(id);
});
}
写完代码,同学们就可以运行前后端项目,修改一条部门信息试试。