hzd/salaryAccounting
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

对接签名提交，工资详情查询

Browse Source
This commit is contained in:
1147680382@qq.com
2025-05-20 16:19:59 +08:00
parent d2c8a95723
commit 6545eed3f0
7 changed files with 1030 additions and 800 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/salaryDetails/salaryDetails.vue
+204 -116
View File
@@ -2,8 +2,8 @@
<view class="salary-details">
<!-- 顶部蓝色卡片 -->
<view class="salary-card">
<text class="date">2025年04月实发工资</text>
<text class="amount">3000.00</text>
<text class="date">{{dataInfo.year}}年{{dataInfo.month}}月实发工资</text>
<text class="amount">{{dataInfo.actualSalary}}</text>
<text class="tips">感谢您为公司的付出，辛苦了</text>
</view>
@@ -13,43 +13,43 @@
<view class="salary-items">
<view class="item">
<text class="label">基本工资</text>
<text class="value">2500</text>
<text class="value">{{dataInfo.baseSalary}}</text>
</view>
<view class="item">
<text class="label">年度绩效奖金</text>
<text class="value">500</text>
<text class="value">{{dataInfo.annualPerformanceBonus}}</text>
</view>
<view class="item">
<text class="label">月度绩效奖金</text>
<text class="value">500</text>
<text class="value">{{dataInfo.monthlyPerformanceBonus}}</text>
</view>
<view class="item">
<text class="label">其他奖金</text>
<text class="value">1000</text>
<text class="value">{{dataInfo.otherBonus}}</text>
</view>
<view class="item">
<text class="label">总经理补贴</text>
<text class="value">0</text>
<text class="value">{{dataInfo.managerAllowance}}</text>
</view>
<view class="item">
<text class="label">交通补贴</text>
<text class="value">50</text>
<text class="value">{{dataInfo.transportationAllowance}}</text>
</view>
<view class="item">
<text class="label">其他补贴</text>
<text class="value">0</text>
<text class="value">{{dataInfo.otherAllowance}}</text>
</view>
<view class="item">
<text class="label">工龄工资</text>
<text class="value">50</text>
<text class="value">{{dataInfo.senioritySalary}}</text>
</view>
<view class="item">
<text class="label">加班工资</text>
<text class="value">0</text>
<text class="value">{{dataInfo.overtimePay}}</text>
</view>
<view class="item total">
<text class="label">应发小计</text>
<text class="value highlight">5000</text>
<text class="value highlight">{{dataInfo.grossPaySummary}}</text>
</view>
</view>
</view>
@@ -60,43 +60,44 @@
<view class="salary-items">
<view class="item">
<text class="label">年度绩效奖金</text>
<text class="value">2500</text>
<text class="value">{{dataInfo.annualPerformanceDeduction}}</text>
</view>
<view class="item">
<text class="label">月度绩效奖金</text>
<text class="value">500</text>
<text class="value">{{dataInfo.monthlyPerformanceDeduction}}</text>
</view>
<view class="item">
<text class="label">事假</text>
<text class="value">500</text>
<text class="value">{{dataInfo.personalLeaveDeduction}}</text>
</view>
<view class="item">
<text class="label">病假</text>
<text class="value">1000</text>
<text class="value">{{dataInfo.sickLeaveDeduction}}</text>
</view>
<view class="item">
<text class="label">婚假、丧假、陪产假</text>
<text class="value">0</text>
<text
class="value">{{dataInfo.marriageLeaveDeduction}}、{{dataInfo.bereavementLeaveDeduction}}、{{dataInfo.paternityLeaveDeduction}}</text>
</view>
<view class="item">
<text class="label">迟到、早退</text>
<text class="value">50</text>
<text class="value">{{dataInfo.lateEarlyDeduction}}</text>
</view>
<view class="item">
<text class="label">签到、签退</text>
<text class="value">0</text>
<text class="value">{{dataInfo.missedCheckInOutDeduction}}</text>
</view>
<view class="item">
<text class="label">缺卡</text>
<text class="value">50</text>
<text class="value">{{dataInfo.absentCardDeduction}}</text>
</view>
<view class="item">
<text class="label">旷工</text>
<text class="value">0</text>
<text class="value">{{dataInfo.absenteeismDeduction}}</text>
</view>
<view class="item">
<text class="label">违纪</text>
<text class="value">0</text>
<text class="value">{{dataInfo.violationDeduction}}</text>
</view>
</view>
</view>
@@ -107,23 +108,23 @@
<view class="salary-items">
<view class="item">
<text class="label">基本养老</text>
<text class="value">2500</text>
<text class="value">{{dataInfo.basicPensionDeduction}}</text>
</view>
<view class="item">
<text class="label">失业保险</text>
<text class="value">500</text>
<text class="value">{{dataInfo.unemploymentInsuranceDeduction}}</text>
</view>
<view class="item">
<text class="label">基本医疗</text>
<text class="value">500</text>
<text class="value">{{dataInfo.basicMedicalDeduction}}</text>
</view>
<view class="item">
<text class="label">大额医疗</text>
<text class="value">1000</text>
<text class="value">{{dataInfo.medicalDeductionAmount}}</text>
</view>
<view class="item">
<text class="label">住房公积金</text>
<text class="value">0</text>
<text class="value">{{dataInfo.housingFundDeduction}}</text>
</view>
</view>
</view>
@@ -134,127 +135,214 @@
<view class="salary-items">
<view class="item">
<text class="label">其他扣款</text>
<text class="value">2500</text>
<text class="value">{{dataInfo.otherDeduction}}</text>
</view>
<view class="item">
<text class="label">个税</text>
<text class="value">500</text>
<text class="value">{{dataInfo.individualTaxDeduction}}</text>
</view>
<view class="item total">
<text class="label">扣款小计</text>
<text class="value highlight red">2000</text>
<text class="value highlight red">{{deductionTotle}}</text>
</view>
</view>
</view>
<!-- 备注 -->
<view class="salary-section"><view>备注</view></view>
<view class="salary-section">
<view>备注</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {};
},
created() {
this.$setNavigationBar('工资条');
}
};
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-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;
}
.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;
.amount {
font-size: 72rpx;
font-weight: 500;
margin-bottom: 30rpx;
}
.date {
font-size: 32rpx;
margin-bottom: 20rpx;
}
.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;
.amount {
font-size: 72rpx;
font-weight: 500;
margin-bottom: 30rpx;
}
&:last-child {
margin-bottom: 0;
}
.tips {
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 24rpx;
color: rgba(255, 255, 255, 0.6);
}
}
.label {
font-size: 28rpx;
color: #4b5563;
}
.salary-section {
background: #ffffff;
margin: 20rpx 30rpx 0;
border-radius: 12rpx;
padding: 30rpx;
.value {
font-size: 28rpx;
color: #4b5563;
}
.section-title {
font-size: 32rpx;
color: #111827;
font-weight: 500;
margin-bottom: 30rpx;
}
&.total {
margin-top: 20rpx;
padding-top: 20rpx;
border-top: 2rpx solid #e5e7eb;
.salary-items {
.item {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30rpx;
.label {
font-weight: 500;
&:last-child {
margin-bottom: 0;
}
.value.highlight {
font-weight: 700;
font-size: 32rpx;
color: #0078ff;
&.red {
color: #ff4d4f;
.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>
</style>