全部开发者教程

企业级在线办公系统

上个小节我们定义了后端的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);
    });
}

写完代码,同学们就可以运行前后端项目,修改一条部门信息试试。

索引目录