应纳税所得额计算及年均应纳税所得额计算 - Vue.js 代码示例 - 常规

应纳税所得额计算及年均应纳税所得额计算 - Vue.js 代码示例

本文将介绍如何使用 Vue.js 计算应纳税所得额和年均应纳税所得额，并提供示例代码和解释。

计算属性

首先，我们需要使用 Vue.js 的计算属性来计算应纳税所得额和年均应纳税所得额。计算属性会缓存计算结果，只有当依赖的属性发生变化时才会重新计算。

computed: {
  ...mapGetters(['companyId']),
  // 应纳税所得额计算
  acTaxableincome: function () {
    const { disposableCompensationIncome, taxExemptIncome, subtotal, deductionAllowedDonate } = this.form;
    const taxableAmount = disposableCompensationIncome - taxExemptIncome - subtotal - deductionAllowedDonate;
    return taxableAmount >= 0 ? taxableAmount : 0.0;
  },
  // 年均应纳税所得额计算
  acAnnualTaxableIncome() {
    const acTaxableIncome = this.acTaxableincome;
    const shareYearDegree = this.form.shareYearDegree;
    const AnnualTaxableIncome = acTaxableIncome / shareYearDegree;
    return AnnualTaxableIncome >= 0 ? AnnualTaxableIncome : 0.0;
  },
},

表单组件

接下来，我们需要使用 Vue.js 的表单组件来展示计算结果。

<el-form-item
  label="应纳税所得额:"
  prop="acTaxPiPersonCalculationSchedule.acTaxableIncome"
  style="width: 290px"
>
  {{ acTaxableincome }}
</el-form-item>
<el-form-item
  label="税率/预扣率："
  prop="acTaxPiPersonCalculationSchedule.taxRate"
  style="width: 290px"
>
  20%
</el-form-item>
<el-form-item
  label="速算扣除数："
  prop="acTaxPiPersonCalculationSchedule.quickCalculationDeduction"
  style="width: 290px"
>
  0.00
</el-form-item>
<el-row style="display: flex">
  <el-form-item
    label="年均应纳税所得额："
    prop="acTaxPiPersonCalculationSchedule.annualTaxableIncome"
    style="width: 290px; white-space: nowrap"
  >
    {{ acAnnualTaxableIncome }}
  </el-form-item>
  <el-form-item
    label="应纳税额："
    prop="acTaxPiPersonCalculationSchedule.acTaxableAmount"
    style="width: 290px"
  >
    {{ acTaxableamount }}
  </el-form-item>
</el-row>

表单数据

最后，我们需要在 data 属性中定义表单数据。

data() {
  return {
    form: {
      // 准予扣除的捐赠额
      deductionAllowedDonate: null,
      // 一次性补偿收入
      disposableCompensationIncome: null,
      // 年均减除费用
      averageAnnualDeductionCost: null,
      // 分均年度数
      shareYearDegree: null,
      // 	减除费用
      deductCost: null,
      companyId: null,
      personId: null,
      reportingPeriodDate: null,
      other: null,
      taxExemptIncome: null,
      // 备注
      remark: null,
      // 小计
      subtotal: null,
      // 减免税额
      reductionTaxAmount: null,
      // companyId: null,
      // incomeReportingCode: null,
      // 所得期间起
      incomePeriodDateStart: null,
      // 所得期间至
      incomePeriodDateEnd: null,
      // 应纳税额
      acTaxPiPersonVo: {
        // 人员id
        personId: null,
        // 姓名
        name: "",
        // 证件号码
        identificationNum: "",
        // 证件类型
        identificationType: "",
        // 工号
        employeeId: "",
        // 其他
      },
      acTaxPiPersonCalculationSchedule: {
        // 	应纳税额
        acTaxableAmount: 0,
        // 	减免税额
        acTaxSavings: 0,
        // 应纳税所得额
        acTaxableIncome: 0,
        // 已预缴税额
        prepaidTaxAmount: 0,
        // 税率/预扣率
        taxRate: 0,
        // 速算扣除数
        quickCalculationDeduction: 0,
        // 应补(退)税额
        payableTaxAmount: 0,
        // 累计应扣缴税额
        acDeductiblePaymentAmount: 0,
        // 	年均应纳税所得额（提前退休一次性补贴表）
        annualTaxableIncome: 0,
      },
    },
  };
}

问题排查

如果 acTaxableincome 没有计算回填值，可以检查以下几个方面：

检查 form 对象中的相关属性（disposableCompensationIncome、taxExemptIncome、subtotal 和 deductionAllowedDonate）是否有值。如果其中任何一个属性为空或未定义，可能会导致 acTaxableincome 计算结果为 NaN 或 undefined。
确保在 computed 属性中正确地引用了 form 对象。根据提供的代码，form 对象是在 data 中定义的，并且在 computed 属性中使用了 this.form 来引用它。确保没有其他重写或重新定义 form 对象的地方。
检查是否存在其他计算属性或方法可能会影响 acTaxableincome 的计算结果。确保没有其他计算属性或方法修改了 form 对象中的相关属性。
检查是否存在其他计算属性或方法可能导致 acTaxableincome 计算错误或抛出异常。如果在计算 acTaxableincome 时发生了错误，可能会导致该计算属性的值为空或未定义。

如果仍然无法确定问题所在，建议在浏览器的开发者工具中使用断点或添加日志语句来跟踪代码执行过程，以便确定 acTaxableincome 计算的具体问题所在。

总结

本文介绍了如何使用 Vue.js 计算应纳税所得额和年均应纳税所得额，并提供示例代码和解释。希望本文能够帮助您更好地理解如何使用 Vue.js 进行计算和数据展示。