vue实现销假功能
实现销假功能的基本思路
销假功能通常涉及前端表单提交、数据验证、与后端API交互等环节。以下基于Vue 3的Composition API实现方案：
表单组件结构
<template>
<form @submit.prevent="handleSubmit">
<div>
<label>请假类型</label>
<select v-model="formData.leaveType">
<option value="annual">年假</option>
<option value="sick">病假</option>
</select>
</div>
<div>
<label>销假原因</label>
<textarea v-model="formData.reason"></textarea>
</div>
<button type="submit">提交销假</button>
</form>
</template>数据与逻辑处理
import { reactive } from 'vue'
import axios from 'axios'
export default {
setup() {
const formData = reactive({
leaveType: '',
reason: '',
attachments: []
})
const handleSubmit = async () => {
try {
const response = await axios.post('/api/leave/cancel', formData)
console.log('销假成功', response.data)
} catch (error) {
console.error('销假失败', error)
}
}
return { formData, handleSubmit }
}
}表单验证增强
可引入VeeValidate进行验证：
import { useForm, useField } from 'vee-validate'
import * as yup from 'yup'
export default {
setup() {
const schema = yup.object({
leaveType: yup.string().required('必须选择请假类型'),
reason: yup.string().min(10, '销假原因至少10个字符')
})
const { handleSubmit } = useForm({ validationSchema: schema })
const { value: leaveType } = useField('leaveType')
const { value: reason } = useField('reason')
const onSubmit = handleSubmit(async (values) => {
await axios.post('/api/leave/cancel', values)
})
return { leaveType, reason, onSubmit }
}
}文件上传处理
添加附件上传功能：
<template>
<input type="file" @change="handleFileUpload" multiple>
</template>
<script>
const handleFileUpload = (event) => {
formData.attachments = Array.from(event.target.files)
}
</script>状态管理方案
对于复杂应用可使用Pinia管理状态：
// stores/leave.js
import { defineStore } from 'pinia'
export const useLeaveStore = defineStore('leave', {
actions: {
async cancelLeave(payload) {
return await axios.post('/api/leave/cancel', payload)
}
}
})注意事项
- 敏感操作应添加二次确认
- 提交按钮需添加防重复点击逻辑
- 错误处理应展示用户友好提示
- 生产环境应使用HTTPS加密通信
- 文件上传需考虑大小限制和类型限制
后端接口建议
前端需与后端约定以下接口规范：
- 请求方法：POST
- 路径：/api/leave/cancel
- 请求体：{ leaveType, reason, attachments }
- 成功响应：{ code: 200, data: {...} }
- 错误响应：{ code: 400, message: "错误描述" }
