上个小节我们用Swagger测试了searchById和update方法，数据查询和修改都没什么问题。那么这节课我们应该去写前端JS代码，执行修改罚款单流程。
一、熟悉前端页面
因为添加罚款和修改罚款公用一个弹窗页面，所以amect-add-or-update.vue页面咱们已经很熟悉了，我们就重点看一下它的init()函数是怎么初始化弹窗页面的。
init: function(id) {
let that = this;
that.dataForm.id = id || 0;
that.visible = true;
that.$nextTick(() => {
that.$refs['dataForm'].resetFields();
//查询违纪类型列表数据
that.$http('amect_type/searchAllAmectType', 'GET', {}, true, function(resp) {
that.amectTypeList = resp.list;
});
//查询用户列表数据
that.$http('user/searchAllUser', 'GET', null, true, function(resp) {
let temp = [];
for (let one of resp.list) {
temp.push({ key: one.id, label: one.name });
}
that.users = temp;
});
if (id) {
//查询罚款信息
that.$http('amect/searchById', 'POST', { id: id }, true, function(resp) {
that.dataForm.typeId = resp.typeId;
that.dataForm.amount = resp.amount + '';
that.dataForm.reason = resp.reason;
});
}
});
},
二、显示弹窗页面，传入参数
在amect.vue页面上，每条罚款记录的右侧都有修改按钮，但是这个修改按钮能不能点击，取决于当前用户是否有对应的权限，而且该条罚款记录还得是未支付的状态。
<el-button
type="text"
size="medium"
:disabled="!(isAuth(['ROOT', 'AMECT:UPDATE']) && scope.row.status != '已缴纳')"
@click="updateHandle(scope.row.id)"
>
修改
</el-button>
修改按钮点击事件的回调函数是updateHandle()，而且还要传入修改记录的id值。
updateHandle: function(id) {
this.addOrUpdateVisible = true;
this.$nextTick(() => {
this.$refs.addOrUpdate.init(id);
});
},