console
var ratio = {
yanglao: 0.08,
shiye: 0.002,
yiliao: 0.02,
gongjijin: 0.12
};
var month_data = {
id: 0,
shouru: 25401,
jishu: 25401,
fujiakouchu: 0,
mianzhengkouchu: 5000,
leijishouru: 0,
leijishebaokouchu: 0,
leijifujiakouchu: 0,
leijimianzhengkouchu: 0,
yingjiaoshui: 0,
leijijiaoshui: 0,
shuihoushouru: 0,
leijiyingnashuisuode: 0
};
var year_data = [];
for (let i = 0; i < 12; i++) {
let data = Object.assign({}, month_data, {id: i + 1});
year_data.push(data);
}
Vue.component('total', {});
Vue.component('month-node', {
props: ['node_data', 'year_data', 'month', 'same_shouru', 'same_jishu', 'same_fujiakouchu'],
template: '<div class="swiper-slide">' +
'<div class="month">{{ node_data.id }} <span class="shuihou">{{ shuihoushouru.toFixed(2) }}</span></div>' +
'<ul class="node">' +
'<li><span class="desc">税前收入</span><input v-bind:disabled="same_shouru" class="num" type="number" number v-bind:value="node_data.shouru" v-on:input="oninputshouru($event.target.value)"></li>' +
'<li><span class="desc">社保基数</span><input v-bind:disabled="same_jishu" class="num" type="number" number v-bind:value="node_data.jishu" v-on:input="oninputjishu($event.target.value)"></li>' +
'<li><span class="desc">附加扣除</span><input v-bind:disabled="same_fujiakouchu" class="num" type="number" number v-bind:value="node_data.fujiakouchu" v-on:input="oninputfujiakouchu($event.target.value)"></li>' +
'<li><span class="desc">养老保险</span><span class="num">{{ yanglao.toFixed(2) }}</span></li>' +
'<li><span class="desc">医疗保险</span><span class="num">{{ yiliao.toFixed(2) }}</span></li>' +
'<li><span class="desc">失业保险</span><span class="num">{{ shiye.toFixed(2) }}</span></li>' +
'<li><span class="desc">公积金</span><span class="num">{{ gongjijin.toFixed(2) }}</span></li>' +
'<li><span class="desc">社保扣除</span><span class="num">{{ shebaokouchu.toFixed(2) }}</span></li>' +
'<li><span class="desc">累计收入</span><span class="num">{{ leijishouru.toFixed(2) }}</span></li>' +
'<li><span class="desc">累计社保扣除</span><span class="num">{{ leijishebaokouchu.toFixed(2) }}</span></li>' +
'<li><span class="desc">累计专项扣除</span><span class="num">{{ leijifujiakouchu.toFixed(2) }}</span></li>' +
'<li><span class="desc">累计免征扣除</span><span class="num">{{ leijimianzhengkouchu.toFixed(2) }}</span></li>' +
'<li><span class="desc">累计应纳税所得额</span><span class="num">{{ leijiyingnashuisuode.toFixed(2) }}</span></li>' +
'<li><span class="desc">累计预扣预缴税额</span><span class="num">{{ leijijiaoshui.toFixed(2) }}</span></li>' +
'<li><span class="desc">本期预扣预缴税额</span><span class="num">{{ yingjiaoshui.toFixed(2) }}</span></li>' +
'</ul></div>',
methods: {
calc_tax: function (number) {
return number <= 36000 ? number * 0.03
: number <= 144000 ? number * 0.1 - 2520
: number <= 300000 ? number * 0.2 - 16920
: number <= 420000 ? number * 0.25 - 31920
: number <= 660000 ? number * 0.3 - 52920
: number <= 960000 ? number * 0.35 - 85920
: number * 0.45 - 181920
},
oninputshouru: function (val) {
this.$set(this.node_data, 'shouru', parseFloat(val));
},
oninputjishu: function (val) {
this.$set(this.node_data, 'jishu', parseFloat(val));
},
oninputfujiakouchu: function (val) {
this.$set(this.node_data, 'fujiakouchu', parseFloat(val));
}
},
computed: {
yanglao: function () {
return this.node_data.jishu * ratio.yanglao;
},
yiliao: function () {
return this.node_data.jishu * ratio.yiliao + 3;
},
shiye: function () {
return this.node_data.jishu * ratio.shiye;
},
gongjijin: function () {
return this.node_data.jishu * ratio.gongjijin;
},
shebaokouchu: function () {
return this.yanglao + this.yiliao + this.shiye + this.gongjijin;
},
leijishouru: function () {
this.node_data.leijishouru = this.node_data.shouru + (this.node_data.id == 1 ? 0 : this.year_data[this.month - 2].leijishouru);
return this.node_data.leijishouru;
},
leijishebaokouchu: function () {
this.node_data.leijishebaokouchu = this.shebaokouchu + (this.node_data.id == 1 ? 0 : this.year_data[this.month - 2].leijishebaokouchu);
return this.node_data.leijishebaokouchu;
},
leijifujiakouchu: function () {
this.node_data.leijifujiakouchu = this.node_data.fujiakouchu + (this.node_data.id == 1 ? 0 : this.year_data[this.month - 2].leijifujiakouchu);
return this.node_data.leijifujiakouchu;
},
leijimianzhengkouchu: function () {
this.node_data.leijimianzhengkouchu = this.node_data.mianzhengkouchu + (this.node_data.id == 1 ? 0 : this.year_data[this.month - 2].leijimianzhengkouchu);
return this.node_data.leijimianzhengkouchu;
},
leijiyingnashuisuode: function () {
this.node_data.leijiyingnashuisuode = this.node_data.leijishouru - this.node_data.leijishebaokouchu
- this.node_data.leijimianzhengkouchu - this.node_data.leijifujiakouchu;
return this.node_data.leijiyingnashuisuode;
},
leijijiaoshui: function () {
this.node_data.leijijiaoshui = this.node_data.id == 1 ? 0 : (this.year_data[this.month - 2].yingjiaoshui + this.year_data[this.month - 2].leijijiaoshui);
return this.node_data.leijijiaoshui;
},
yingjiaoshui: function () {
let tax = this.calc_tax(this.node_data.leijiyingnashuisuode);
console.log(this.node_data.id, this.node_data.leijiyingnashuisuode);
this.node_data.yingjiaoshui = tax - this.node_data.leijijiaoshui;
return this.node_data.yingjiaoshui;
},
shuihoushouru: function () {
this.node_data.shuihoushouru = this.node_data.shouru - this.shebaokouchu - this.node_data.yingjiaoshui;
return this.node_data.shuihoushouru;
}
}
});
var app = new Vue({
el: '#app',
data: {
year_data: year_data,
same_shouru: true,
same_shouru_number: month_data.shouru,
same_jishu: true,
same_jishu_number: month_data.jishu,
same_fujiakouchu: true,
same_fujiakouchu_number: 0
},
methods: {
shouru_change: function () {
if (this.same_shouru) {
for (let i = 0; i < 12; i++) {
this.year_data[i].shouru = this.same_shouru_number;
}
}
},
jishu_change: function () {
if (this.same_jishu) {
for (let i = 0; i < 12; i++) {
this.year_data[i].jishu = this.same_jishu_number;
}
}
},
fujiakouchu_change: function () {
if (this.same_fujiakouchu) {
for (let i = 0; i < 12; i++) {
this.year_data[i].fujiakouchu = this.same_fujiakouchu_number;
}
}
}
},
computed: {
total_shuihou: function () {
var total = 0;
for (let i = 0; i < 12; i++) {
total += this.year_data[i].shuihoushouru;
}
return total;
}
},
mounted: function () {
var mySwiper = new Swiper('.swiper-container', {
init: true,
direction: 'horizontal',
loop: false,
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: true
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
scrollbar: {
el: '.swiper-scrollbar',
hide: true
},
})
}
})
<div id="app" class="swiper-container">
<div class="swiper-pagination"></div>
<div class="swiper-wrapper">
<div class="swiper-slide">
<div id="total">
<div id="stat"><span class="desc">全年税后收入</span><br><span class="number">{{ total_shuihou.toFixed(2) }}</span></div>
<ul>
<li>税前收入 <input v-model.number="same_shouru_number" type="number" @change="shouru_change">
相同 <input type="checkbox" v-model="same_shouru" @change="shouru_change"></li>
<li>社保基数 <input v-model.number="same_jishu_number" type="number" @change="jishu_change">
相同 <input type="checkbox" v-model="same_jishu" @change="jishu_change"></li>
<li>附加扣除 <input v-model.number="same_fujiakouchu_number" type="number" @change="fujiakouchu_change">
相同 <input type="checkbox" v-model="same_fujiakouchu" @change="fujiakouchu_change"></li>
</ul>
<div style="clear: both"></div>
</div>
</div>
<month-node v-for="node in year_data" v-bind:year_data="year_data" v-bind:month="node.id"
v-bind:node_data="node" v-bind:key="node.id"
v-bind:same_shouru="same_shouru" v-bind:same_jishu="same_jishu"
v-bind:same_fujiakouchu="same_fujiakouchu">
</month-node>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
body {
font: normal 100% Helvetica, Arial, sans-serif;
padding: 0;
margin: 0;
}
#app {
max-width: 600px;
}
ul {
overflow: hidden;
list-style: none;
padding: 0.5em 3em 2.5em 3em;
}
#total ul {
font-size: larger;
}
ul.node {
margin: 0 auto;
}
li {
padding: .2em .2em;
}
li .num {
position: absolute;
right: 3em;
}
li input[type="number"] {
width: 4em;
}
div.month {
background-color: #2f669f;
color: white;
padding: .2em 1.5em .2em 1.5em;
font-size: 2em;
}
div.month span.shuihou {
ont-size: 1em;
float: right;
}
input[type="number"] {
font-size: 100%;
text-align: right;
}
#stat {
background-color: #2f669f;
color: white;
padding: 1em 2em .2em 2em;
}
#stat span.desc {
font-size: x-large;
}
#stat span.number {
font-size: 3em;
}
.swiper-container {
width: 100%;
height: 100%;
}