上节课我们写好了后端的Java代码，用Swagger测试，可以成功添加罚款记录。那么本小节我们切换到前端项目，把前端代码给实现了。

一、熟悉弹窗页面

添加违纪罚款的弹窗页面是amect-add-or-update.vue，添加罚款和修改罚款记录都是用这个弹窗页面。下面我们来看看弹窗页面的模型层都定义了什么东西？

data: function() {
    return {
        visible: false,
        dataForm: {
            id: null,
            typeId: null,
            amount: null,
            reason: null,
            members: []
        },
        amectTypeList: [],
        users: [],
        dataRule: {
            typeId: [{ required: true, message: '罚款类型为必填' }],
            amount: [
                {
                    required: true,
                    pattern: '(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)',
                    message: '罚款金额格式错误'
                }
            ],
            reason: [{ required: true, message: '罚款原因为必填' }],
            members: [
                { required: true, trigger: 'blur', message: '必须设置当事人' },
                { required: false, trigger: 'change', message: '必须设置当事人' }
            ]
        }
    };
},

视图层部分的标签页不复杂，跟模型层的变量都能对应上。

<el-dialog
    :title="!dataForm.id ? '新增罚款记录' : '修改罚款记录'"
    :close-on-click-modal="false"
    v-model="visible"
    width="692px"
>
    <el-form :model="dataForm" ref="dataForm" :rules="dataRule" label-width="60px">
        <el-form-item label="类型" prop="typeId">
            <el-select v-model="dataForm.typeId" placeholder="罚款类型" size="medium" style="width:40%">
                <el-option v-for="one in amectTypeList" :label="one.type" :value="one.id" />
            </el-select>
            <span class="desc">必须选择一个罚款类型，罚款金额可以自动生成</span>
        </el-form-item>
        <el-form-item label="金额" prop="amount">
            <el-input v-model="dataForm.amount" size="medium" style="width:40%" placeholder="罚款金额" clearable />
            <span class="desc">元</span>
        </el-form-item>
        <el-form-item label="原因" prop="reason">
            <el-input
                type="textarea"
                :rows="2"
                placeholder="罚款原因"
                v-model="dataForm.reason"
                size="medium"
                resize="none"
                maxlength="200"
                show-word-limit
                clearable="clearable"
            />
        </el-form-item>
        <el-form-item label="成员" prop="members" v-if="dataForm.id == 0">
            <el-transfer
                v-model="dataForm.members"
                :data="users"
                :titles="['员工', '当事人']"
                filterable
                filter-placeholder="请输入姓名"
            />
        </el-form-item>
    </el-form>
    <template #footer>
        <span class="dialog-footer">
            <el-button size="medium" @click="visible = false">取消</el-button>
            <el-button type="primary" size="medium" @click="dataFormSubmit">确定</el-button>
        </span>
    </template>
</el-dialog>

二、引用弹窗页面

在amect.vue页面，引用了弹窗页面，所以我们才能调用弹窗页面。

<template>
    <div>
        ……
        <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="loadDataList"></add-or-update>
        ……
    </div>
</template>
<script>
import AddOrUpdate from './amect-add-or-update.vue';
export default {
    components: {
        AddOrUpdate
    },
    ……
}
</script>

三、提交表单，添加罚款记录

弹窗页面中的确定按钮绑定了点击事件回调函数，所以我们来把这个函数给声明一下。

<el-button type="primary" size="medium" @click="dataFormSubmit">确定</el-button>

dataFormSubmit: function() {
    let that = this;
    let data = {
        userId: that.dataForm.members,
        amount: that.dataForm.amount,
        typeId: that.dataForm.typeId,
        reason: that.dataForm.reason
    };
    if (that.dataForm.id) {
        data.id = that.dataForm.id;
    }
    this.$refs['dataForm'].validate(valid => {
        if (valid) {
            that.$http(`amect/${!that.dataForm.id ? 'insert' : 'update'}`, 'POST', data, true, function(resp) {
                if (resp.rows > 0) {
                    that.visible = false;
                    that.$emit('refreshDataList');
                    that.$message({
                        message: '操作成功',
                        type: 'success',
                        duration: 1200
                    });
                } else {
                    that.$message({
                        message: '操作失败',
                        type: 'error',
                        duration: 1200
                    });
                }
            });
        }
    });
}

四、显示弹窗页面

在amect.vue页面中，声明新增按钮的点击事件回调函数，然后大家就可以调试添加新角色功能了。

<el-button
    size="medium"
    type="primary"
    :disabled="!isAuth(['ROOT', 'AMECT:INSERT'])"
    @click="addHandle()"
>
    新增
</el-button>

addHandle: function() {
    this.addOrUpdateVisible = true;
    this.$nextTick(() => {
        this.$refs.addOrUpdate.init();
    });
},