590 lines
22 KiB
Vue
590 lines
22 KiB
Vue
<template>
|
|
<div class="app-container">
|
|
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="88px">
|
|
<el-form-item label="员工姓名" prop="name">
|
|
<el-input
|
|
v-model="queryParams.name"
|
|
placeholder="请输入员工姓名"
|
|
clearable
|
|
@keyup.enter.native="handleQuery"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="工资月份" prop="month">
|
|
<el-date-picker clearable
|
|
v-model="queryParams.month"
|
|
type="month"
|
|
value-format="yyyy-MM"
|
|
placeholder="请选择工资月份">
|
|
</el-date-picker>
|
|
</el-form-item>
|
|
<el-form-item label="部门：" prop="deptId">
|
|
<treeselect v-model="form.deptId" :options="deptOptions" style="width: 240px" :show-count="true" placeholder="请选择归属部门" />
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
|
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
|
|
<el-row :gutter="10" class="mb8">
|
|
<el-col :span="1.5">
|
|
<el-button
|
|
type="primary"
|
|
plain
|
|
icon="el-icon-plus"
|
|
size="mini"
|
|
@click="handleAdd"
|
|
v-hasPermi="['finance:financeDetail:add']"
|
|
>计算工资</el-button>
|
|
</el-col>
|
|
<el-col :span="1.5">
|
|
|
|
<!--handleExport-->
|
|
<el-button
|
|
type="warning"
|
|
plain
|
|
icon="el-icon-download"
|
|
size="mini"
|
|
@click="submitFormExport"
|
|
v-hasPermi="['finance:financeDetail:export']"
|
|
>导出</el-button>
|
|
</el-col>
|
|
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
|
</el-row>
|
|
|
|
<el-table v-loading="loading" :data="detailList">
|
|
<!-- <el-table-column type="selection" width="55" align="center" /> -->
|
|
<el-table-column label="员工姓名" align="center" prop="name" />
|
|
<el-table-column label="工资月份" align="center" prop="month" width="100">
|
|
<template slot-scope="scope">
|
|
<span>{{ parseTime(scope.row.month, '{y}-{m}') }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="所属公司" align="center" prop="wbFlag" />
|
|
<el-table-column label="部门名称" align="center" prop="deptName" />
|
|
<el-table-column label="基本工资" align="center" prop="basicSalary" />
|
|
<el-table-column label="岗位工资" align="center" prop="jobSalary" />
|
|
<el-table-column label="日薪" align="center" prop="dailyWage" />
|
|
<el-table-column label="时薪" align="center" prop="hoursSalary" />
|
|
<el-table-column label="加班工资" align="center" prop="overtimeSalary" />
|
|
<el-table-column label="学历补助" align="center" prop="levelSubsidies" />
|
|
<el-table-column label="合同补助" align="center" prop="contractSubsidies" />
|
|
<el-table-column label="工龄工资" align="center" prop="senioritySalary" />
|
|
<el-table-column label="社保补助" align="center" prop="socialSubsidies" />
|
|
<el-table-column label="全勤奖" align="center" prop="fullSubsidies" />
|
|
<el-table-column label="夜班补助" align="center" prop="nightSubsidies" />
|
|
<el-table-column label="夜餐补助" align="center" prop="dinnerSubsidies" />
|
|
<el-table-column label="其他补助" align="center" prop="subsidyOrBonus" />
|
|
<el-table-column label="缺勤扣款" align="center" prop="absenteeismSalary" />
|
|
<el-table-column label="补助扣款" align="center" prop="absenteeismSubsidies" />
|
|
<el-table-column label="餐费扣款" align="center" prop="mealFee" />
|
|
<el-table-column label="其他扣款" align="center" prop="deductions" />
|
|
<el-table-column label="应发工资" align="center" prop="salary" />
|
|
<el-table-column label="代缴保险" align="center" prop="payInsurance" />
|
|
<el-table-column label="养老保险" align="center" prop="endowmentInsurance" />
|
|
<el-table-column label="医疗保险" align="center" prop="medicalInsurance" />
|
|
<el-table-column label="工伤保险" align="center" prop="employmentInjuryInsurance" />
|
|
<el-table-column label="生育保险" align="center" prop="maternityInsurance" />
|
|
<el-table-column label="失业保险" align="center" prop="unemploymentInsurance" />
|
|
<el-table-column label="公积金" align="center" prop="accumulationFund" />
|
|
<el-table-column label="税前工资" align="center" prop="salaryBeforeTax" />
|
|
<el-table-column label="累计已发工资" align="center" prop="totalWages" />
|
|
<el-table-column label="累计已发" align="center" prop="totalWagesOther" />
|
|
<el-table-column label="年度免征额" align="center" prop="annualExemptionAmount" />
|
|
<el-table-column label="累计专项附加扣除" align="center" prop="specialDeduction" />
|
|
<el-table-column label="应纳税所得额" align="center" prop="taxableIncome" />
|
|
<el-table-column label="税率" align="center" prop="taxRate" />
|
|
<el-table-column label="速算扣除数" align="center" prop="slowDownTheDeduction" />
|
|
<el-table-column label="累计已缴税额" align="center" prop="aggregatePersonalIncomeTax" />
|
|
<el-table-column label="累计税额" align="center" prop="aggregateTax" />
|
|
<el-table-column label="本月应缴个税" align="center" prop="taxPayable" />
|
|
<el-table-column label="实发工资" align="center" prop="netPayroll" />
|
|
<el-table-column label="备注" align="center" prop="remarks" />
|
|
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
|
<template slot-scope="scope">
|
|
<el-button
|
|
size="mini"
|
|
type="text"
|
|
icon="el-icon-edit"
|
|
@click="handleUpdate(scope.row)"
|
|
v-hasPermi="['finance:financeDetail:edit']"
|
|
>修改</el-button>
|
|
<el-button
|
|
size="mini"
|
|
type="text"
|
|
icon="el-icon-delete"
|
|
@click="handleDelete(scope.row)"
|
|
v-hasPermi="['finance:financeDetail:remove']"
|
|
>删除</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
<pagination
|
|
v-show="total>0"
|
|
:total="total"
|
|
:page.sync="queryParams.pageNum"
|
|
:limit.sync="queryParams.pageSize"
|
|
@pagination="getList"
|
|
/>
|
|
|
|
<!-- 工资计算对话框 -->
|
|
<el-dialog :title="title" v-dialog-drag :visible.sync="openCount" width="400px" append-to-body>
|
|
<el-form ref="form" :model="form" :rules="rules" label-width="88px">
|
|
<el-form-item label="工资月份" prop="month">
|
|
<el-date-picker clearable
|
|
v-model="form.month"
|
|
type="month"
|
|
value-format="yyyy-MM"
|
|
placeholder="请选择工资月份">
|
|
</el-date-picker>
|
|
</el-form-item>
|
|
</el-form>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button type="primary" @click="submitColuntForm">确 定</el-button>
|
|
<el-button @click="openCount = false">取 消</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
|
|
<!-- 添加或修改工资详情对话框 -->
|
|
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
|
|
<el-form ref="form" :model="form" :rules="rules" label-width="88px">
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<el-form-item label="员工姓名" prop="name">
|
|
<el-input v-model="form.name" placeholder="请输入员工姓名" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="工资月份" prop="month">
|
|
<el-date-picker clearable
|
|
v-model="form.month"
|
|
type="month"
|
|
value-format="yyyy-MM"
|
|
placeholder="请选择工资月份">
|
|
</el-date-picker>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<el-form-item label="部门：" prop="deptId">
|
|
<treeselect v-model="form.deptId" :options="deptOptions" style="width: 240px" :show-count="true" placeholder="请选择归属部门" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="基本工资" prop="basicSalary">
|
|
<el-input v-model="form.basicSalary" placeholder="请输入基本工资" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<el-form-item label="岗位工资" prop="jobSalary">
|
|
<el-input v-model="form.jobSalary" placeholder="请输入岗位工资" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="日薪" prop="dailyWage">
|
|
<el-input v-model="form.dailyWage" placeholder="请输入日薪" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<el-form-item label="时薪" prop="hoursSalary">
|
|
<el-input v-model="form.hoursSalary" placeholder="请输入时薪" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="加班工资" prop="overtimeSalary">
|
|
<el-input v-model="form.overtimeSalary" placeholder="请输入加班工资" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<el-form-item label="学历补助" prop="levelSubsidies">
|
|
<el-input v-model="form.levelSubsidies" placeholder="请输入学历补助" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="合同补助" prop="contractSubsidies">
|
|
<el-input v-model="form.contractSubsidies" placeholder="请输入合同补助" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<el-form-item label="工龄工资" prop="senioritySalary">
|
|
<el-input v-model="form.senioritySalary" placeholder="请输入工龄工资" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="社保补助" prop="socialSubsidies">
|
|
<el-input v-model="form.socialSubsidies" placeholder="请输入社保补助" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<el-form-item label="全勤奖" prop="fullSubsidies">
|
|
<el-input v-model="form.fullSubsidies" placeholder="请输入全勤奖" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="夜班补助" prop="nightSubsidies">
|
|
<el-input v-model="form.nightSubsidies" placeholder="请输入夜班补助" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<el-form-item label="夜餐补助" prop="dinnerSubsidies">
|
|
<el-input v-model="form.dinnerSubsidies" placeholder="请输入夜餐补助" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="其他补助" prop="subsidyOrBonus">
|
|
<el-input v-model="form.subsidyOrBonus" placeholder="请输入其他补助" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<el-form-item label="缺勤扣款" prop="absenteeismSalary">
|
|
<el-input v-model="form.absenteeismSalary" placeholder="请输入缺勤扣款" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="补助扣款" prop="absenteeismSubsidies">
|
|
<el-input v-model="form.absenteeismSubsidies" placeholder="请输入补助扣款" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<el-form-item label="餐费扣款" prop="mealFee">
|
|
<el-input v-model="form.mealFee" placeholder="请输入餐费扣款" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="其他扣款" prop="deductions">
|
|
<el-input v-model="form.deductions" placeholder="请输入其他扣款" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<el-form-item label="应发工资" prop="salary">
|
|
<el-input v-model="form.salary" placeholder="请输入应发工资" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="代缴保险" prop="payInsurance">
|
|
<el-input v-model="form.payInsurance" placeholder="请输入代缴保险" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<el-form-item label="税前工资" prop="salaryBeforeTax">
|
|
<el-input v-model="form.salaryBeforeTax" placeholder="请输入税前工资" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="累计已发工资" prop="totalWages">
|
|
<el-input v-model="form.totalWages" placeholder="请输入累计已发工资" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<el-form-item label="年度免征额" prop="annualExemptionAmount">
|
|
<el-input v-model="form.annualExemptionAmount" placeholder="请输入年度免征额" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="累计专项附加扣除" prop="specialDeduction">
|
|
<el-input v-model="form.specialDeduction" placeholder="请输入累计专项附加扣除" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<el-form-item label="应纳税所得额" prop="taxableIncome">
|
|
<el-input v-model="form.taxableIncome" placeholder="请输入应纳税所得额" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="税率" prop="taxRate">
|
|
<el-input v-model="form.taxRate" placeholder="请输入税率" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<el-form-item label="速算扣除数" prop="slowDownTheDeduction">
|
|
<el-input v-model="form.slowDownTheDeduction" placeholder="请输入速算扣除数" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="累计已缴税额" prop="aggregatePersonalIncomeTax">
|
|
<el-input v-model="form.aggregatePersonalIncomeTax" placeholder="请输入累计已缴税额" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<el-form-item label="本月应缴个税" prop="taxPayable">
|
|
<el-input v-model="form.taxPayable" placeholder="请输入本月应缴个税" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="实发工资" prop="netPayroll">
|
|
<el-input v-model="form.netPayroll" placeholder="请输入实发工资" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="24">
|
|
<el-form-item label="备注" prop="remarks">
|
|
<el-input v-model="form.remarks" placeholder="请输入备注" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
</el-form>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button type="primary" @click="submitForm">确 定</el-button>
|
|
<el-button @click="cancel">取 消</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
<!-- 导出工资单管理对话框 -->
|
|
<el-dialog :title="title" :visible.sync="openExport" width="400px" append-to-body>
|
|
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
|
<el-form-item label="工资月份" prop="month">
|
|
<el-date-picker clearable
|
|
v-model="form.month"
|
|
type="month"
|
|
value-format="yyyy-MM"
|
|
placeholder="请选择工资月份">
|
|
</el-date-picker>
|
|
</el-form-item>
|
|
</el-form>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button type="primary" @click="submitFormExport">确 定</el-button>
|
|
<el-button @click="openExport=false">取 消</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { listDetail, getDetail, delDetail, addDetail, updateDetail,exportgzd } from "@/api/finance/financeDetail";
|
|
import Treeselect from "@riophae/vue-treeselect";
|
|
import { listAllDepts } from '@/api/system/dept';
|
|
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
|
|
|
export default {
|
|
name: "FinanceDetail",
|
|
components: {Treeselect},
|
|
data() {
|
|
return {
|
|
// 遮罩层
|
|
loading: true,
|
|
// 显示搜索条件
|
|
showSearch: true,
|
|
openExport: false,
|
|
// 总条数
|
|
total: 0,
|
|
// 工资详情表格数据
|
|
detailList: [],
|
|
deptOptions: [],
|
|
// 弹出层标题
|
|
title: "",
|
|
// 是否显示弹出层
|
|
open: false,
|
|
openCount: false,
|
|
// 查询参数
|
|
queryParams: {
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
name: null,
|
|
month: null,
|
|
deptId: null,
|
|
},
|
|
// 表单参数
|
|
form: {},
|
|
// 表单校验
|
|
rules: {}
|
|
};
|
|
},
|
|
created() {
|
|
this.getList();
|
|
this.getDeptList();
|
|
},
|
|
methods: {
|
|
/** 获取部门 */
|
|
getDeptList(){
|
|
listAllDepts().then(response => {
|
|
this.deptOptions = response;
|
|
});
|
|
},
|
|
/** 查询工资详情列表 */
|
|
getList() {
|
|
this.loading = true;
|
|
listDetail(this.queryParams).then(response => {
|
|
this.detailList = response.rows;
|
|
this.total = response.total;
|
|
this.loading = false;
|
|
});
|
|
},
|
|
// 取消按钮
|
|
cancel() {
|
|
this.open = false;
|
|
this.reset();
|
|
},
|
|
// 表单重置
|
|
reset() {
|
|
this.form = {
|
|
name: null,
|
|
month: null,
|
|
wbFlag: null,
|
|
deptId: null,
|
|
basicSalary: null,
|
|
jobSalary: null,
|
|
dailyWage: null,
|
|
hoursSalary: null,
|
|
overtimeSalary: null,
|
|
levelSubsidies: null,
|
|
contractSubsidies: null,
|
|
senioritySalary: null,
|
|
socialSubsidies: null,
|
|
fullSubsidies: null,
|
|
nightSubsidies: null,
|
|
dinnerSubsidies: null,
|
|
subsidyOrBonus: null,
|
|
absenteeismSalary: null,
|
|
absenteeismSubsidies: null,
|
|
mealFee: null,
|
|
deductions: null,
|
|
salary: null,
|
|
payInsurance: null,
|
|
endowmentInsurance: null,
|
|
medicalInsurance: null,
|
|
employmentInjuryInsurance: null,
|
|
maternityInsurance: null,
|
|
unemploymentInsurance: null,
|
|
accumulationFund: null,
|
|
salaryBeforeTax: null,
|
|
totalWages: null,
|
|
totalWagesOther: null,
|
|
annualExemptionAmount: null,
|
|
specialDeduction: null,
|
|
taxableIncome: null,
|
|
taxRate: null,
|
|
slowDownTheDeduction: null,
|
|
aggregatePersonalIncomeTax: null,
|
|
aggregateTax: null,
|
|
taxPayable: null,
|
|
netPayroll: null,
|
|
remarks: null,
|
|
};
|
|
this.resetForm("form");
|
|
},
|
|
/** 搜索按钮操作 */
|
|
handleQuery() {
|
|
this.queryParams.pageNum = 1;
|
|
this.getList();
|
|
},
|
|
/** 重置按钮操作 */
|
|
resetQuery() {
|
|
this.resetForm("queryForm");
|
|
this.handleQuery();
|
|
},
|
|
/** 新增按钮操作 */
|
|
handleAdd() {
|
|
this.reset();
|
|
this.openCount = true;
|
|
this.title = "计算工资";
|
|
},
|
|
/** 修改按钮操作 */
|
|
handleUpdate(row) {
|
|
this.reset();
|
|
getDetail(row.id).then(response => {
|
|
this.form = response.data;
|
|
this.open = true;
|
|
this.title = "修改工资详情";
|
|
});
|
|
},
|
|
/** 提交按钮 */
|
|
submitForm() {
|
|
this.$refs["form"].validate(valid => {
|
|
if (valid) {
|
|
if (this.form.id != null) {
|
|
updateDetail(this.form).then(response => {
|
|
this.$modal.msgSuccess("修改成功");
|
|
this.open = false;
|
|
this.getList();
|
|
});
|
|
}
|
|
}
|
|
});
|
|
},
|
|
/** 删除按钮操作 */
|
|
handleDelete(row) {
|
|
const ids = row.id || this.ids;
|
|
this.$modal.confirm('是否确认删除姓名为"' + row.name + '"的数据项？').then(function() {
|
|
return delDetail(row.id);
|
|
}).then(() => {
|
|
this.getList();
|
|
this.$modal.msgSuccess("删除成功");
|
|
}).catch(() => {});
|
|
},
|
|
/** 计算工资 */
|
|
submitColuntForm(){
|
|
this.$refs["form"].validate(valid => {
|
|
if (valid) {
|
|
addDetail(this.form).then(response => {
|
|
this.$modal.msgSuccess("新增成功");
|
|
this.openCount = false;
|
|
this.getList();
|
|
});
|
|
}
|
|
});
|
|
},
|
|
/** 导出按钮操作 */
|
|
handleExport() {
|
|
this.openExport = true;
|
|
this.title = "工资汇总单";
|
|
},
|
|
submitFormExport(){
|
|
let param = this.form;
|
|
// exportPayroll(param).then(response => {
|
|
// this.downloadExcel(response.msg);
|
|
// this.openExport = false;
|
|
// })
|
|
console.log(1)
|
|
if(this.queryParams.month == '' || this.queryParams.month == null){
|
|
this.$message({
|
|
message: '请选择月份',
|
|
type: 'warning'
|
|
});
|
|
}else{
|
|
exportgzd({
|
|
month:this.queryParams.month
|
|
}).then(response => {
|
|
this.downloadExcel(response.msg);
|
|
this.openExport = false;
|
|
})
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
}
|
|
};
|
|
</script>
|