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)
    }
  }
})

注意事项

1. 敏感操作应添加二次确认
2. 提交按钮需添加防重复点击逻辑
3. 错误处理应展示用户友好提示
4. 生产环境应使用HTTPS加密通信
5. 文件上传需考虑大小限制和类型限制

后端接口建议

前端需与后端约定以下接口规范：

• 请求方法：POST
• 路径：/api/leave/cancel
• 请求体：{ leaveType, reason, attachments }
• 成功响应：{ code: 200, data: {...} }
• 错误响应：{ code: 400, message: "错误描述" }