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>

实现完整的销假功能需要前后端配合，前端主要负责数据收集、验证和展示，后端处理业务逻辑和持久化存储。根据实际需求可增加审批流程、附件上传等扩展功能。