代码拉取完成，页面将自动刷新
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>计算应退税额</title>
<link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.14/theme-chalk/index.min.css" rel="stylesheet" />
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.14/index.min.js"></script>
<style>
.form-content {
text-align: center;
width: 600px;
margin: 0 auto;
border: 1px solid #ccc;
padding: 20px;
}
.form-title {
font-size: 24px;
font-weight: bold;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div id="app">
<el-form :model="formModel" label-width="140px" class="form-content">
<div class="form-title">应退税额计算</div>
<el-form-item label="年总收入" prop="yearTotal">
<el-input-number v-model="formModel.yearTotal" :min="0"></el-input-number>
</el-form-item>
<el-form-item label="已缴纳税额" prop="alreadyTax">
<el-input-number v-model="formModel.alreadyTax" :min="0"></el-input-number>
</el-form-item>
<el-form-item label="五险一金总额(年)" prop="socialMoney">
<template #label>
五险一金总额
<el-tooltip class="item" effect="dark" content="打开个税查看个人月收入的本期专项扣除*12" placement="top-start">
<i class="el-icon-question"></i>
</el-tooltip>
</template>
<el-input-number v-model="formModel.socialMoney" :min="0"></el-input-number>
</el-form-item>
<el-form-item label="专项附加扣除" prop="specialMoney">
<el-input-number v-model="formModel.specialMoney" :min="0"></el-input-number>
<div>
<el-button type="primary" @click="handleChooseSpecialMoney" style="margin-top: 10px">查看专项附加扣除标准</el-button>
</div>
</el-form-item>
<el-form-item label="需要纳税的部分"> {{getNeedMoney }} </el-form-item>
<el-form-item label="应退/缴税额"> {{getBackMoney}} </el-form-item>
</el-form>
<el-dialog title="专项附加扣除" :visible.sync="dialogVisible" width="600px" :before-close="handleClose">
<el-table :data="specialList" border stripe>
<el-table-column label="类别" prop="title"></el-table-column>
<el-table-column label="扣费标准" prop="standard"></el-table-column>
<el-table-column label="描述" prop="describe"></el-table-column>
</el-table>
</el-dialog>
</div>
<script>
var vue = new Vue({
el: "#app",
data() {
return {
formModel: {
yearTotal: undefined,
alreadyTax: undefined,
socialMoney: undefined,
specialMoney: undefined
},
noTax: 60000,
dialogVisible: false,
rateList: [
{
min: 0,
max: 36000,
rate: 0.03,
num: 0
},
{
min: 36000,
max: 144000,
rate: 0.1,
num: 2520
},
{
min: 144000,
max: 300000,
rate: 0.2,
num: 16920
},
{
min: 300000,
max: 420000,
rate: 0.25,
num: 31920
},
{
min: 420000,
max: 660000,
rate: 0.3,
num: 52920
},
{
min: 660000,
max: 960000,
rate: 0.35,
num: 85920
},
{
min: 960000,
max: Number.POSITIVE_INFINITY,
rate: 0.45,
num: 181920
}
],
specialList: [
{
title: "子女教育",
standard: "2000元/月/每孩",
describe: "一个孩子一个月2000，最后结果取年，例如填了该项1个孩子，则该项年专项附加为1*2000*12=24000元"
},
{
title: "继续教育",
standard: "学历类每月400，其他类拿证当年按3600算",
describe: "学历类一个月400，一年4800，非学历类直接按3600算"
},
{
title: "大病医疗",
standard: "80000内据实扣除",
describe: "80000内据实扣除"
},
{
title: "住房贷款(和租房二选一)",
standard: "1000/月",
describe: "一年12000，直接按12000算"
},
{
title: "租房(和贷款二选一)",
standard: "直辖市/省会 1500/月，市籍人口>100万 1100/月，其他800/月",
describe: "省会/直辖市按18000，市籍>100万按13200，其他按9600"
},
{
title: "赡养老人",
standard: "建议根据上一年度的实际填写",
describe: "建议根据上一年度的实际填写"
},
{
title: "三岁以下婴幼儿照护",
standard: "2000元/月/每孩",
describe: "一个孩子一个月2000，最后结果取年，例如填了该项1个孩子，则该项年专项附加为1*2000*12=24000元"
}
]
};
},
computed: {
getNeedMoney() {
const { yearTotal, socialMoney, specialMoney } = this.formModel;
if (this.isEmpty(yearTotal) || this.isEmpty(socialMoney) || this.isEmpty(specialMoney)) return 0;
if (this.formModel.yearTotal <= this.noTax) return 0;
return parseFloat((this.formModel.yearTotal - this.noTax - this.formModel.socialMoney - this.formModel.specialMoney).toFixed(2));
},
getBackMoney() {
const { yearTotal, alreadyTax, socialMoney, specialMoney } = this.formModel;
if (this.isEmpty(yearTotal) || this.isEmpty(alreadyTax) || this.isEmpty(socialMoney) || this.isEmpty(specialMoney)) return 0;
const findItem = this.rateList.find((item) => item.min <= this.getNeedMoney && item.max > this.getNeedMoney);
if (!findItem) return 0;
return (this.formModel.alreadyTax - (this.getNeedMoney * findItem.rate - findItem.num)).toFixed(2);
}
},
methods: {
isEmpty(value) {
return !value && value !== 0;
},
handleChooseSpecialMoney() {
this.dialogVisible = true;
},
handleClose() {
this.dialogVisible = false;
}
}
});
</script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手