当前位置：首页 > VUE

vue实现销假功能

2026-01-17 11:58:53VUE

实现销假功能的Vue方案

在Vue中实现销假功能通常需要结合前端界面、状态管理和后端API交互。以下是完整的实现方案：

基础组件结构

创建请假表单组件LeaveForm.vue：

<template>
  <form @submit.prevent="submitLeave">
    <div>
      <label>请假类型</label>
      <select v-model="form.leaveType">
        <option value="annual">年假</option>
        <option value="sick">病假</option>
      </select>
    </div>

    <div>
      <label>开始时间</label>
      <input type="datetime-local" v-model="form.startTime">
    </div>

    <div>
      <label>结束时间</label>
      <input type="datetime-local" v-model="form.endTime">
    </div>

    <button type="submit">提交申请</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        leaveType: 'annual',
        startTime: '',
        endTime: ''
      }
    }
  },
  methods: {
    async submitLeave() {
      try {
        await this.$store.dispatch('applyLeave', this.form)
        alert('申请成功')
      } catch (error) {
        console.error(error)
      }
    }
  }
}
</script>

状态管理（Vuex）

在store中配置请假相关状态和操作：

// store/modules/leave.js
export default {
  state: {
    leaves: [],
    isLoading: false
  },
  mutations: {
    SET_LEAVES(state, leaves) {
      state.leaves = leaves
    },
    SET_LOADING(state, status) {
      state.isLoading = status
    }
  },
  actions: {
    async applyLeave({ commit }, formData) {
      commit('SET_LOADING', true)
      const response = await api.post('/leaves', formData)
      commit('SET_LOADING', false)
      return response
    },

    async cancelLeave({ commit }, leaveId) {
      commit('SET_LOADING', true)
      await api.delete(`/leaves/${leaveId}`)
      commit('SET_LOADING', false)
    }
  }
}

销假功能实现

创建销假组件CancelLeave.vue：

<template>
  <div v-if="leaves.length">
    <h3>我的请假记录</h3>
    <ul>
      <li v-for="leave in leaves" :key="leave.id">
        {{ leave.type }} - {{ leave.start }}至{{ leave.end }}
        <button @click="cancelLeave(leave.id)">撤销申请</button>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState('leave', ['leaves'])
  },
  methods: {
    ...mapActions('leave', ['cancelLeave']),
    async loadLeaves() {
      await this.$store.dispatch('leave/fetchLeaves')
    }
  },
  created() {
    this.loadLeaves()
  }
}
</script>

路由配置

在路由文件中配置相关页面：

const routes = [
  {
    path: '/leave/apply',
    component: () => import('./views/LeaveForm.vue')
  },
  {
    path: '/leave/cancel',
    component: () => import('./views/CancelLeave.vue')
  }
]

API服务层

创建API服务文件api/leave.js：

import axios from 'axios'

export default {
  applyLeave(data) {
    return axios.post('/api/leaves', data)
  },

  cancelLeave(id) {
    return axios.delete(`/api/leaves/${id}`)
  },

  getLeaves() {
    return axios.get('/api/leaves')
  }
}

表单验证

为请假表单添加验证逻辑：

// 在LeaveForm组件中添加
methods: {
  validateForm() {
    if (!this.form.startTime || !this.form.endTime) {
      throw new Error('请选择完整时间范围')
    }
    if (new Date(this.form.startTime) > new Date(this.form.endTime)) {
      throw new Error('开始时间不能晚于结束时间')
    }
  },

  async submitLeave() {
    try {
      this.validateForm()
      await this.$store.dispatch('applyLeave', this.form)
      this.$router.push('/leave/cancel')
    } catch (error) {
      alert(error.message)
    }
  }
}