当前位置：首页 > VUE

vue实现销假功能

2026-03-09 17:24:54VUE

实现销假功能的基本思路

销假功能通常涉及前端表单提交、数据验证、与后端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)
    }
  }
})