上个小节我们用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);
    });
},