vue实现销假功能
实现销假功能的基本思路
销假功能通常涉及前端表单提交、数据验证、与后端API交互等环节。以下以Vue 3 + Element Plus为例，展示核心实现方法。
表单组件设计
<template>
<el-form :model="leaveForm" :rules="rules" ref="formRef">
<el-form-item label="请假类型" prop="leaveType">
<el-select v-model="leaveForm.leaveType">
<el-option label="年假" value="annual"></el-option>
<el-option label="病假" value="sick"></el-option>
</el-select>
</el-form-item>
<el-form-item label="销假时间" prop="cancelTime">
<el-date-picker
v-model="leaveForm.cancelTime"
type="datetime"
placeholder="选择销假时间">
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">提交销假</el-button>
</el-form-item>
</el-form>
</template>数据与验证规则
<script setup>
import { ref } from 'vue'
const formRef = ref(null)
const leaveForm = ref({
leaveId: '', // 请假记录ID
leaveType: '',
cancelTime: ''
})
const rules = {
leaveType: [
{ required: true, message: '请选择请假类型', trigger: 'change' }
],
cancelTime: [
{ required: true, message: '请选择销假时间', trigger: 'change' }
]
}
</script>提交逻辑实现
const submitForm = async () => {
try {
await formRef.value.validate()
const response = await axios.post('/api/leave/cancel', {
leaveId: leaveForm.value.leaveId,
cancelTime: leaveForm.value.cancelTime
})
ElMessage.success('销假成功')
emit('success') // 触发成功事件
} catch (error) {
ElMessage.error(error.response?.data?.message || '销假失败')
}
}状态管理建议
对于需要全局管理的销假状态，可以使用Pinia：
// stores/leaveStore.js
import { defineStore } from 'pinia'
export const useLeaveStore = defineStore('leave', {
state: () => ({
cancelledLeaves: []
}),
actions: {
async cancelLeave(leaveId) {
const res = await cancelLeaveApi(leaveId)
this.cancelledLeaves.push(res.data)
return res
}
}
})注意事项
- 确保销假时间晚于请假开始时间
- 处理重复提交问题（可通过按钮loading状态）
- 考虑添加销假原因文本输入字段
- 移动端适配可能需要调整日期选择器样式
后端API应验证请假记录是否存在、是否已销假等业务规则，返回相应的状态码和提示信息。
