vue实现销假功能
实现销假功能的Vue方案
销假功能通常涉及表单提交、数据验证和与后端API的交互。以下是基于Vue 3的完整实现方案。
表单设计与数据绑定
创建销假申请表单组件，包含请假类型、时间范围、原因等字段。使用v-model进行双向数据绑定：
<template>
<form @submit.prevent="submitLeaveRequest">
<select v-model="form.leaveType">
<option value="annual">年假</option>
<option value="sick">病假</option>
</select>
<input type="date" v-model="form.startDate">
<input type="date" v-model="form.endDate">
<textarea v-model="form.reason"></textarea>
<button type="submit">提交申请</button>
</form>
</template>
<script setup>
import { reactive } from 'vue';
const form = reactive({
leaveType: 'annual',
startDate: '',
endDate: '',
reason: ''
});
</script>表单验证处理
使用Vuelidate或自定义验证方法确保数据有效性：
const validateForm = () => {
const errors = [];
if (!form.startDate) errors.push('请选择开始日期');
if (form.endDate < form.startDate) errors.push('结束日期不能早于开始日期');
return errors;
};API请求封装
创建独立服务文件处理HTTP请求：
// leaveService.js
import axios from 'axios';
export default {
async submitLeaveApplication(data) {
try {
const response = await axios.post('/api/leaves', data);
return response.data;
} catch (error) {
throw new Error('提交失败: ' + error.message);
}
}
}状态管理集成
对于复杂应用，建议使用Pinia管理销假状态：
// stores/leaveStore.js
import { defineStore } from 'pinia';
export const useLeaveStore = defineStore('leave', {
state: () => ({
applications: []
}),
actions: {
async submitApplication(formData) {
const response = await leaveService.submitLeaveApplication(formData);
this.applications.push(response);
}
}
});用户反馈与交互
提交后提供可视化反馈：
<script setup>
import { useLeaveStore } from '@/stores/leaveStore';
const store = useLeaveStore();
const submitLeaveRequest = async () => {
const errors = validateForm();
if (errors.length > 0) {
alert(errors.join('\n'));
return;
}
try {
await store.submitApplication(form);
alert('销假申请提交成功');
form.value = {}; // 重置表单
} catch (error) {
alert(error.message);
}
};
</script>响应式布局优化
使用UI框架如Element Plus增强用户体验：
<template>
<el-form :model="form" label-width="120px">
<el-form-item label="请假类型">
<el-select v-model="form.leaveType">
<el-option label="年假" value="annual"></el-option>
<el-option label="病假" value="sick"></el-option>
</el-select>
</el-form-item>
<el-form-item label="开始日期">
<el-date-picker v-model="form.startDate" type="date"></el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitLeaveRequest">提交</el-button>
</el-form-item>
</el-form>
</template>历史记录展示
添加申请历史查看功能：
<template>
<div v-for="app in store.applications" :key="app.id">
{{ app.leaveType }} - {{ app.status }}
</div>
</template>实现完整的销假功能需要前后端配合，前端主要负责数据收集、验证和展示，后端处理业务逻辑和持久化存储。根据实际需求可增加审批流程、附件上传等扩展功能。
