<template> <div class="main main-paySlips main-paySlips-month" id="main_index"> <div class="slips-mid"> <div class="slips-mid-top"> <p>实发工资(元)</p> <h3> <span >¥{{ Number(obj[0].currentRealWage).toFixed(2) | get_thousand_num }}</span > </h3> </div> <div class="slips-mid-bottom"> <p> <label>收入来源</label> <span>{{ obj[0].abbrName }}</span> </p> <p> <label>保存账户</label> <span>{{ obj[0].bankNo }}</span> </p> <p> <label>发放时间</label> <span>{{ obj[0].payTime }}</span> </p> </div> </div> <div class="slips-bottom"> <h3>工资明细</h3> <hr /> <div class="pay-detail-box"> <p> <label>本次收入</label> <span >¥{{ (Number(obj[0].currentRealWage) - Number(obj[0].currentBaseOldInsurance) - Number(obj[0].currentBaseHealthInsurance) - Number(obj[0].currentUnemploymentInsurance) - Number(obj[0].currentFund) - Number(obj[0].currentTaxDeduction)) | get_thousand_num }}</span > </p> <p> <label>养老保险</label> <span class="green" >-{{ Number(obj[0].currentBaseOldInsurance).toFixed(2) | get_thousand_num }}</span > </p> <p> <label>医疗保险</label> <span class="green" >-{{ Number(obj[0].currentBaseHealthInsurance).toFixed(2) | get_thousand_num }}</span > </p> <p> <label>失业保险</label> <span class="green" >-{{ Number(obj[0].currentUnemploymentInsurance).toFixed(2) | get_thousand_num }}</span > </p> <p> <label>住房公积金</label> <span class="green" >-{{ Number(obj[0].currentFund).toFixed(2) | get_thousand_num }}</span > </p> <p> <label>代扣个税</label> <span class="green" >-{{ Number(obj[0].currentTaxDeduction).toFixed(2) | get_thousand_num }}</span > </p> <p class="wages"> <label>实发工资</label> <span >-{{ Number(obj[0].currentRealWage).toFixed(2) | get_thousand_num }}</span > </p> </div> </div> </div> </template> <script lang="ts"> import "../assets/css/labor.css"; import Vue from "vue"; import { Component } from "vue-property-decorator"; @Component({}) export default class PaySlipsMonth extends Vue { private obj: any = [ { no: "", abbrName: "", currentRealWage: 0, currentBaseOldInsurance: 0, cardType: "", bankNo: "", currentFund: 0, payTime: "", currentIncome: 0, currentUnemploymentInsurance: 0, cardNo: "", currentBaseHealthInsurance: 0, name: "", bankName: "", bankOpen: "", currentTaxDeduction: 0 } ]; private id: any = ""; private getSalaryInfo(): void { let params = { id: this.id }; this.$server.EmployeeService.getSalaryInfoDetail(params) .then((res: any) => { // console.log("res=" + JSON.stringify(res) + "工资条信息"); this.obj = res; console.log("obj=", JSON.stringify(this.obj)); }) .catch((error: any) => {}); } init() { this.id = this.$route.query.id; this.getSalaryInfo(); // this.obj = { // rescode: 0, // data: [ // { // no: "GZ20200608160345451651972", // abbrName: "1022服务商Q", // currentRealWage: 500000, // current_base_old_insurance: 10000, // card_type: "居民身份证", // bank_no: "6214833401590859", // current_fund: 3000, // pay_time: "2020-06-08", // current_income: 650000, // current_unemployment_insurance: 2000, // card_no: "330881199511043934", // current_base_health_insurance: 5000, // name: "李鹏飞", // bank_name: "招商银行", // bank_open: "招商银行中华北大街支行", // current_tax_deduction: 5000 // } // ] // }; } created() { console.log("this.id=", this.id); this.init(); } } </script> <style lang="less"> .green { color: #70b603 !important; } </style>