348 lines
9.4 KiB
Vue
348 lines
9.4 KiB
Vue
<template>
|
||
<view class="salary-details">
|
||
<!-- 顶部蓝色卡片 -->
|
||
<view class="salary-card">
|
||
<text class="date">{{dataInfo.year}}年{{dataInfo.month}}月实发工资</text>
|
||
<text class="amount">{{dataInfo.actualSalary}}</text>
|
||
<text class="tips">感谢您为公司的付出，辛苦了</text>
|
||
</view>
|
||
|
||
<!-- 收入项目 -->
|
||
<view class="salary-section">
|
||
<view class="section-title">收入项目</view>
|
||
<view class="salary-items">
|
||
<view class="item">
|
||
<text class="label">基本工资</text>
|
||
<text class="value">{{dataInfo.baseSalary}}</text>
|
||
</view>
|
||
<view class="item">
|
||
<text class="label">年度绩效奖金</text>
|
||
<text class="value">{{dataInfo.annualPerformanceBonus}}</text>
|
||
</view>
|
||
<view class="item">
|
||
<text class="label">月度绩效奖金</text>
|
||
<text class="value">{{dataInfo.monthlyPerformanceBonus}}</text>
|
||
</view>
|
||
<view class="item">
|
||
<text class="label">其他奖金</text>
|
||
<text class="value">{{dataInfo.otherBonus}}</text>
|
||
</view>
|
||
<view class="item">
|
||
<text class="label">总经理补贴</text>
|
||
<text class="value">{{dataInfo.managerAllowance}}</text>
|
||
</view>
|
||
<view class="item">
|
||
<text class="label">交通补贴</text>
|
||
<text class="value">{{dataInfo.transportationAllowance}}</text>
|
||
</view>
|
||
<view class="item">
|
||
<text class="label">其他补贴</text>
|
||
<text class="value">{{dataInfo.otherAllowance}}</text>
|
||
</view>
|
||
<view class="item">
|
||
<text class="label">工龄工资</text>
|
||
<text class="value">{{dataInfo.senioritySalary}}</text>
|
||
</view>
|
||
<view class="item">
|
||
<text class="label">加班工资</text>
|
||
<text class="value">{{dataInfo.overtimePay}}</text>
|
||
</view>
|
||
<view class="item total">
|
||
<text class="label">应发小计</text>
|
||
<text class="value highlight">{{dataInfo.grossPaySummary}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 扣除项目 -->
|
||
<view class="salary-section">
|
||
<view class="section-title">扣除项目</view>
|
||
<view class="salary-items">
|
||
<view class="item">
|
||
<text class="label">年度绩效奖金</text>
|
||
<text class="value">{{dataInfo.annualPerformanceDeduction}}</text>
|
||
</view>
|
||
<view class="item">
|
||
<text class="label">月度绩效奖金</text>
|
||
<text class="value">{{dataInfo.monthlyPerformanceDeduction}}</text>
|
||
</view>
|
||
<view class="item">
|
||
<text class="label">事假</text>
|
||
<text class="value">{{dataInfo.personalLeaveDeduction}}</text>
|
||
</view>
|
||
<view class="item">
|
||
<text class="label">病假</text>
|
||
<text class="value">{{dataInfo.sickLeaveDeduction}}</text>
|
||
</view>
|
||
<view class="item">
|
||
<text class="label">婚假、丧假、陪产假</text>
|
||
<text
|
||
class="value">{{dataInfo.marriageLeaveDeduction}}、{{dataInfo.bereavementLeaveDeduction}}、{{dataInfo.paternityLeaveDeduction}}</text>
|
||
</view>
|
||
<view class="item">
|
||
<text class="label">迟到、早退</text>
|
||
<text class="value">{{dataInfo.lateEarlyDeduction}}</text>
|
||
</view>
|
||
<view class="item">
|
||
<text class="label">签到、签退</text>
|
||
<text class="value">{{dataInfo.missedCheckInOutDeduction}}</text>
|
||
</view>
|
||
<view class="item">
|
||
<text class="label">缺卡</text>
|
||
<text class="value">{{dataInfo.absentCardDeduction}}</text>
|
||
</view>
|
||
<view class="item">
|
||
<text class="label">旷工</text>
|
||
<text class="value">{{dataInfo.absenteeismDeduction}}</text>
|
||
</view>
|
||
<view class="item">
|
||
<text class="label">违纪</text>
|
||
<text class="value">{{dataInfo.violationDeduction}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 福利 -->
|
||
<view class="salary-section">
|
||
<view class="section-title">福利</view>
|
||
<view class="salary-items">
|
||
<view class="item">
|
||
<text class="label">基本养老</text>
|
||
<text class="value">{{dataInfo.basicPensionDeduction}}</text>
|
||
</view>
|
||
<view class="item">
|
||
<text class="label">失业保险</text>
|
||
<text class="value">{{dataInfo.unemploymentInsuranceDeduction}}</text>
|
||
</view>
|
||
<view class="item">
|
||
<text class="label">基本医疗</text>
|
||
<text class="value">{{dataInfo.basicMedicalDeduction}}</text>
|
||
</view>
|
||
<view class="item">
|
||
<text class="label">大额医疗</text>
|
||
<text class="value">{{dataInfo.medicalDeductionAmount}}</text>
|
||
</view>
|
||
<view class="item">
|
||
<text class="label">住房公积金</text>
|
||
<text class="value">{{dataInfo.housingFundDeduction}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 其他 -->
|
||
<view class="salary-section">
|
||
<view class="section-title">其他</view>
|
||
<view class="salary-items">
|
||
<view class="item">
|
||
<text class="label">其他扣款</text>
|
||
<text class="value">{{dataInfo.otherDeduction}}</text>
|
||
</view>
|
||
<view class="item">
|
||
<text class="label">个税</text>
|
||
<text class="value">{{dataInfo.individualTaxDeduction}}</text>
|
||
</view>
|
||
<view class="item total">
|
||
<text class="label">扣款小计</text>
|
||
<text class="value highlight red">{{deductionTotle}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 备注 -->
|
||
<view class="salary-section">
|
||
<view>备注</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
getPayrollSheets
|
||
} from "../../api/create"
|
||
export default {
|
||
data() {
|
||
return {
|
||
month: "",
|
||
year: "",
|
||
dataInfo: {
|
||
absentCardDeduction: "",
|
||
absenteeismDeduction: '',
|
||
actualSalary: '',
|
||
annualPerformanceBonus: '',
|
||
annualPerformanceDeduction: '',
|
||
baseSalary: '',
|
||
basicMedicalDeduction: '',
|
||
basicPensionDeduction: '',
|
||
bereavementLeaveDeduction: '',
|
||
flag: '',
|
||
grossPaySummary: '',
|
||
housingFundDeduction: '',
|
||
individualTaxDeduction: '',
|
||
lateEarlyDeduction: '',
|
||
localMinimumWages: '',
|
||
managerAllowance: '',
|
||
marriageLeaveDeduction: '',
|
||
maternityLeaveDeduction: '',
|
||
medicalDeductionAmount: '',
|
||
missedCheckInOutDeduction: '',
|
||
month: '',
|
||
monthlyPerformanceBonus: '',
|
||
monthlyPerformanceDeduction: '',
|
||
otherAllowance: '',
|
||
otherBonus: '',
|
||
otherDeduction: '',
|
||
overtimePay: '',
|
||
paternityLeaveDeduction: '',
|
||
personalLeaveDeduction: '',
|
||
senioritySalary: '',
|
||
severeLateEarlyDeduction: '',
|
||
sickLeaveDeduction: '',
|
||
transportationAllowance: '',
|
||
unemploymentInsuranceDeduction: '',
|
||
userid: '',
|
||
violationDeduction: '',
|
||
year: '',
|
||
}
|
||
};
|
||
},
|
||
computed: {
|
||
deductionTotle() {
|
||
return Number(this.dataInfo.absentCardDeduction) +
|
||
Number(this.dataInfo.absenteeismDeduction) +
|
||
Number(this.dataInfo.annualPerformanceDeduction) +
|
||
Number(this.dataInfo.basicMedicalDeduction) +
|
||
Number(this.dataInfo.basicPensionDeduction) +
|
||
Number(this.dataInfo.bereavementLeaveDeduction) +
|
||
Number(this.dataInfo.housingFundDeduction) +
|
||
Number(this.dataInfo.individualTaxDeduction) +
|
||
Number(this.dataInfo.lateEarlyDeduction) +
|
||
Number(this.dataInfo.marriageLeaveDeduction) +
|
||
Number(this.dataInfo.maternityLeaveDeduction) +
|
||
Number(this.dataInfo.missedCheckInOutDeduction) +
|
||
Number(this.dataInfo.monthlyPerformanceDeduction) +
|
||
Number(this.dataInfo.paternityLeaveDeduction) +
|
||
Number(this.dataInfo.personalLeaveDeduction) +
|
||
Number(this.dataInfo.severeLateEarlyDeduction) +
|
||
Number(this.dataInfo.sickLeaveDeduction) +
|
||
Number(this.dataInfo.unemploymentInsuranceDeduction) +
|
||
Number(this.dataInfo.violationDeduction)
|
||
}
|
||
},
|
||
onLoad: function(option) {
|
||
const {
|
||
month,
|
||
year
|
||
} = option
|
||
this.month = option.month
|
||
this.year = option.year
|
||
this.$setNavigationBar('工资条');
|
||
this.getPayrollSheetsFun()
|
||
},
|
||
methods: {
|
||
async getPayrollSheetsFun() {
|
||
const res = await getPayrollSheets(this.year, this.month)
|
||
if (res.errcode == 0) {
|
||
this.dataInfo = res.result
|
||
}
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.salary-details {
|
||
min-height: 100vh;
|
||
background-color: #f8f9fa;
|
||
padding-bottom: 40rpx;
|
||
|
||
.salary-card {
|
||
margin: 0 auto;
|
||
box-sizing: border-box;
|
||
width: 690rpx;
|
||
height: 326rpx;
|
||
margin-top: 30rpx;
|
||
background: #0078ff;
|
||
padding: 54rpx 30rpx 42rpx 30rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
color: #ffffff;
|
||
border-radius: 20rpx;
|
||
|
||
.date {
|
||
font-size: 32rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.amount {
|
||
font-size: 72rpx;
|
||
font-weight: 500;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
.tips {
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: rgba(255, 255, 255, 0.6);
|
||
}
|
||
}
|
||
|
||
.salary-section {
|
||
background: #ffffff;
|
||
margin: 20rpx 30rpx 0;
|
||
border-radius: 12rpx;
|
||
padding: 30rpx;
|
||
|
||
.section-title {
|
||
font-size: 32rpx;
|
||
color: #111827;
|
||
font-weight: 500;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
.salary-items {
|
||
.item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 30rpx;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.label {
|
||
font-size: 28rpx;
|
||
color: #4b5563;
|
||
}
|
||
|
||
.value {
|
||
font-size: 28rpx;
|
||
color: #4b5563;
|
||
}
|
||
|
||
&.total {
|
||
margin-top: 20rpx;
|
||
padding-top: 20rpx;
|
||
border-top: 2rpx solid #e5e7eb;
|
||
|
||
.label {
|
||
font-weight: 500;
|
||
}
|
||
|
||
.value.highlight {
|
||
font-weight: 700;
|
||
font-size: 32rpx;
|
||
color: #0078ff;
|
||
|
||
&.red {
|
||
color: #ff4d4f;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |