上节课我们用Swagger测试Web方法，可以成功添加请假记录，并且审批请假的工作流实例也创建出来了。那么这节课我们把前端页面的JS代码实现了，就可以用浏览器测试我要请假功能了。

一、熟悉弹窗页面

我要请假弹窗页面是leave-add.vue，内容并不复杂，既没有动态的下拉列表，也没有穿梭框。下面我们来看看弹窗页面的模型层都定义了什么东西？

data: function() {
    return {
        visible: false,
        dataForm: {
            reason: null,
            startDate: null,
            startTime: null,
            endDate: null,
            endTime: null,
            type: null
        },
        disabledDate(date) {
            //新建请假禁止选择过去的日期
            return dayjs(date.toLocaleDateString()).isBefore(new Date().toLocaleDateString());
        },
        dataRule: {
            reason: [{ required: true, message: '请假原因不能为空' }],
            startDate: [{ required: true, message: '开始日期不能为空' }],
            startTime: [{ required: true, message: '开始时间不能为空' }],
            endDate: [{ required: true, message: '截止日期不能为空' }],
            endTime: [{ required: true, message: '截止时间不能为空' }],
            type: [{ required: true, message: '请假类型不能为空' }]
        }
    };
},

视图层的HTML标签页比较简单，请假时间范围从08:30-20:30，间隔为半小时。

<el-dialog title="请假申请" :close-on-click-modal="false" v-model="visible" width="450px">
    <el-form :model="dataForm" ref="dataForm" :rules="dataRule" label-width="80px">
        <el-form-item label="请假原因" prop="reason">
            <el-input
                type="textarea"
                v-model="dataForm.reason"
                placeholder="请假原因"
                :autosize="{ minRows: 4, maxRows: 6 }"
                clearable="clearable"
            />
        </el-form-item>
        <el-form-item label="开始日期">
            <el-row type="flex" justify="space-between">
                <el-col :span="12">
                    <el-form-item prop="startDate" class="form-item">
                        <el-date-picker
                            v-model="dataForm.startDate"
                            value-format="yyyy-MM-dd"
                            type="date"
                            placeholder="开始日期"
                            style="width: 100%;"
                            :disabledDate="disabledDate"
                            clearable="clearable"
                        ></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="11">
                    <el-form-item prop="startTime" class="form-item">
                        <el-time-select
                            v-model="dataForm.startTime"
                            start='08:30'
                            step='00:30'
                            end='20:30'
                            value-format="HH:mm"
                            placeholder="选择时间"
                            style="width: 100%;"
                        ></el-time-select>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form-item>
        <el-form-item label="截止日期">
            <el-row type="flex" justify="space-between">
                <el-col :span="12">
                    <el-form-item prop="endDate" class="form-item">
                        <el-date-picker
                            v-model="dataForm.endDate"
                            value-format="yyyy-MM-dd"
                            type="date"
                            placeholder="截止日期"
                            style="width: 100%;"
                            :disabledDate="disabledDate"
                            clearable="clearable"
                        ></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="11">
                    <el-form-item prop="endTime" class="form-item">
                        <el-time-select
                            v-model="dataForm.endTime"
                            value-format="HH:mm"
                            start='08:30'
                            step='00:30'
                            end='20:30'
                            placeholder="选择时间"
                            style="width: 100%;"
                        ></el-time-select>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form-item>
        <el-form-item label="请假类型" prop="type">
            <el-radio-group v-model="dataForm.type">
                <el-radio :label="1">病假</el-radio>
                <el-radio :label="2">事假</el-radio>
            </el-radio-group>
        </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>

二、引用弹窗页面

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

<template>
    <div>
        ……
        <leave-add v-if="addVisible" ref="add" @refreshDataList="loadDataList"></leave-add>
        ……
    </div>
</template>
<script>
import LeaveAdd from './leave-add.vue';
export default {
    components: {
        LeaveAdd
    },
    ……
}
</script>

三、提交表单，添加新部门

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

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

dataFormSubmit: function() {
    let that = this;
    let data = {
        reason: that.dataForm.reason,
        start: dayjs(that.dataForm.startDate).format('YYYY-MM-DD') + ' ' + that.dataForm.startTime + ':00',
        end: dayjs(that.dataForm.endDate).format('YYYY-MM-DD') + ' ' + that.dataForm.endTime + ':00',
        type: that.dataForm.type
    };
    this.$refs['dataForm'].validate(valid => {
        if (valid) {
            that.$http('leave/insert', 'POST', data, true, function(resp) {
                if (resp.rows == 1) {
                    that.visible = false;
                    that.$message({
                        message: '操作成功',
                        type: 'success',
                        duration: 1200
                    });
                    setTimeout(function() {
                        that.$emit('refreshDataList');
                    }, 1200);
                } else {
                    that.$message({
                        message: '操作失败',
                        type: 'error',
                        duration: 1200
                    });
                }
            });
        }
    });
}

四、显示弹窗页面

在leave.vue页面中，声明我要请假按钮的点击事件回调函数，然后大家就可以调试创建请假申请了。

<el-button type="danger" size="medium" @click="addHandle()">我要请假</el-button>

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