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