当前位置：首页 > VUE

vue实现薪资管理

2026-03-10 03:05:09VUE

Vue实现薪资管理系统方案

技术栈选择 Vue 3 + Element Plus + Axios + Vuex/Pinia

核心功能模块

员工信息管理
薪资结构配置
考勤数据对接
薪资计算引擎
报表生成导出

基础项目搭建

使用Vite初始化项目：

vue实现薪资管理

npm create vite@latest salary-system --template vue

安装必要依赖：

npm install element-plus axios vuex pinia vue-router

员工信息管理组件

创建EmployeeTable.vue组件：

vue实现薪资管理

<template>
  <el-table :data="employees">
    <el-table-column prop="name" label="姓名"/>
    <el-table-column prop="position" label="职位"/>
    <el-table-column prop="baseSalary" label="基本工资"/>
  </el-table>
</template>

<script setup>
import { ref } from 'vue'

const employees = ref([
  { id: 1, name: '张三', position: '前端工程师', baseSalary: 15000 }
])
</script>

薪资计算逻辑

创建salaryCalculator.js工具类：

export function calculateSalary(base, attendance, bonuses) {
  const attendanceDeduction = (22 - attendance.days) * base / 22
  const total = base + bonuses - attendanceDeduction
  return {
    gross: total,
    insurance: total * 0.175,
    tax: calculateTax(total)
  }
}

function calculateTax(amount) {
  // 个税计算逻辑
}

状态管理方案

使用Pinia创建store：

// stores/salary.js
import { defineStore } from 'pinia'

export const useSalaryStore = defineStore('salary', {
  state: () => ({
    salaryRecords: []
  }),
  actions: {
    async fetchSalaries() {
      const res = await axios.get('/api/salaries')
      this.salaryRecords = res.data
    }
  }
})

路由配置示例

// router/index.js
import { createRouter } from 'vue-router'

const routes = [
  {
    path: '/salary',
    component: () => import('@/views/SalaryView.vue')
  }
]

报表导出功能

使用xlsx库实现导出：

import * as XLSX from 'xlsx'

function exportToExcel(data) {
  const ws = XLSX.utils.json_to_sheet(data)
  const wb = XLSX.utils.book_new()
  XLSX.utils.book_append_sheet(wb, ws, "薪资报表")
  XLSX.writeFile(wb, "salary_report.xlsx")
}