个人所得税申报表单 - 收入、费用、税额填写指南

<template>
  <el-form ref="form" :model="form" :rules="rules" label-width="80px">
    <el-form-item label="姓名" v-if="form.acTaxPiPersonVo" prop="acTaxPiPersonVo.name">
      <el-input v-model="form.acTaxPiPersonVo.name" placeholder="请输入姓名" />
    </el-form-item>
    <el-form-item label="证件号码：" v-if="form.acTaxPiPersonVo" prop="acTaxPiPersonVo.identificationNum">
      <el-input v-model="form.acTaxPiPersonVo.identificationNum" placeholder="请输入证件号码" />
    </el-form-item>
    <el-form-item label="证件类型：" v-if="form.acTaxPiPersonVo" prop="acTaxPiPersonVo.identificationType">
      <el-input v-model="form.acTaxPiPersonVo.identificationType" placeholder="请输入证件类型" />
    </el-form-item>
    <el-form-item label="工号：" v-if="form.acTaxPiPersonVo" prop="acTaxPiPersonVo.employeeId">
      <el-input v-model="form.acTaxPiPersonVo.employeeId" placeholder="请输入工号" />
    </el-form-item>
    <el-form-item label="收入" prop="income">
      <el-input v-model="form.income" placeholder="请输入收入" />
    </el-form-item>
    <el-form-item label="费用，综合所得申报：" prop="cost">
      <el-input v-model="form.cost" placeholder="请输入费用，综合所得申报：" />
    </el-form-item>
    <el-form-item label="免税收入" prop="taxExemptIncome">
      <el-input v-model="form.taxExemptIncome" placeholder="请输入免税收入" />
    </el-form-item>
    <el-form-item label="其他" prop="other">
      <el-input v-model="form.other" placeholder="请输入其他" />
    </el-form-item>
    <el-form-item label="小计" prop="subtotal">
      <el-input v-model="form.subtotal" placeholder="请输入小计" />
    </el-form-item>
    <el-form-item label="减免税额" prop="reductionTaxAmount">
      <el-input v-model="form.reductionTaxAmount" placeholder="请输入减免税额" />
    </el-form-item>
    <el-form-item label="所得期间起 (税款所属期  2018-04-01  月初)" prop="incomePeriodDateStart">
      <el-date-picker
        clearable
        size="small"
        v-model="form.incomePeriodDateStart"
        type="date"
        value-format="yyyy-MM-dd"
        placeholder="选择所得期间起 (税款所属期  2018-04-01  月初)"
      ></el-date-picker>
    </el-form-item>
    <el-form-item label="所得期间止 (税款所属期  2018-04-31  月末)" prop="incomePeriodDateEnd">
      <el-date-picker
        clearable
        size="small"
        v-model="form.incomePeriodDateEnd"
        type="date"
        value-format="yyyy-MM-dd"
        placeholder="选择所得期间止 (税款所属期  2018-04-31  月末)"
      ></el-date-picker>
    </el-form-item>
    <el-form-item label="应纳税所得额" v-if="form.acTaxPiPersonCalculationSchedule" prop="acTaxPiPersonCalculationSchedule.acTaxableIncome">
      <el-input v-model="form.acTaxPiPersonCalculationSchedule.acTaxableIncome" placeholder="请输入应纳税所得额" />
    </el-form-item>
    <el-form-item label="税率/预扣率：" v-if="form.acTaxPiPersonCalculationSchedule" prop="acTaxPiPersonCalculationSchedule.taxRate">
      <el-input v-model="form.acTaxPiPersonCalculationSchedule.taxRate" placeholder="请输入税率/预扣率：" />
    </el-form-item>
    <el-form-item label="速算扣除数：" v-if="form.acTaxPiPersonCalculationSchedule" prop="acTaxPiPersonCalculationSchedule.quickCalculationDeduction">
      <el-input v-model="form.acTaxPiPersonCalculationSchedule.quickCalculationDeduction" placeholder="请输入速算扣除数：" />
    </el-form-item>
    <el-form-item label="应纳税额：" v-if="form.acTaxPiPersonCalculationSchedule" prop="acTaxPiPersonCalculationSchedule.acTaxableAmount">
      <el-input v-model="form.acTaxPiPersonCalculationSchedule.acTaxableAmount" placeholder="请输入应纳税额" />
    </el-form-item>
    <el-form-item label="减免税额：" v-if="form.acTaxPiPersonCalculationSchedule" prop="acTaxPiPersonCalculationSchedule.acTaxSavings">
      <el-input v-model="form.acTaxPiPersonCalculationSchedule.acTaxSavings" placeholder="请输入减免税额" />
    </el-form-item>
    <el-form-item label="应扣缴税额：" v-if="form.acTaxPiPersonCalculationSchedule" prop="acTaxPiPersonCalculationSchedule.acDeductiblePaymentAmount">
      <el-input v-model="form.acTaxPiPersonCalculationSchedule.acDeductiblePaymentAmount" placeholder="请输入应扣缴税额" />
    </el-form-item>
    <el-form-item label="已预缴税额：" v-if="form.acTaxPiPersonCalculationSchedule" prop="acTaxPiPersonCalculationSchedule.prepaidTaxAmount">
      <el-input v-model="form.acTaxPiPersonCalculationSchedule.prepaidTaxAmount" placeholder="请输入已预缴税额" />
    </el-form-item>
    <el-form-item label="应补(退)税额：" v-if="form.acTaxPiPersonCalculationSchedule" prop="acTaxPiPersonCalculationSchedule.payableTaxAmount">
      <el-input v-model="form.acTaxPiPersonCalculationSchedule.payableTaxAmount" placeholder="请输入应补(退)税额" />
    </el-form-item>
    <el-form-item label="备注" prop="remark">
      <el-input v-model="form.remark" placeholder="请输入备注" />
    </el-form-item>
  </el-form>
  <el-button type="primary" @click="submitForm">提交</el-button>
</template>
<script>
import { addReportingRoyaltiesIncome, updateReportingRoyaltiesIncome } from '@/api/income'

export default {
  data() {
    return {
      form: {
        personId: "",
        other: "",
        cost: "",
        taxExemptIncome: "",
        remark: "",
        subtotal: "",
        reductionTaxAmount: "",
        incomePeriodDateStart: "",
        incomePeriodDateEnd: "",
        acTaxPiPersonVo: {
          personId: "",
          name: "",
          income: "",
          identificationNum: "",
          identificationType: "",
          employeeId: "",
        },
        acTaxPiPersonCalculationSchedule: {
          acTaxableIncome: "",
          acTaxSavings: "",
          acTaxableAmount: "",
          taxRate: "",
          quickCalculationDeduction: "",
          acDeductiblePaymentAmount: "",
          prepaidTaxAmount: "",
          payableTaxAmount: "",
        },
      },
      rules: {
        // 添加表单验证规则
      }
    }
  },
  methods: {
    submitForm() {
      const formCopy = { ...this.form };
      delete formCopy.acTaxPiPersonVo;
      delete formCopy.acTaxPiPersonCalculationSchedule;
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.personId != null) {
            updateReportingRoyaltiesIncome(formCopy).then((response) => {
              this.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addReportingRoyaltiesIncome(formCopy)
              .then((response) => {
                console.log(response, 'resssssssssss')
                this.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              });
          }
        }
      });
    },
    msgSuccess(message) {
      this.$message({
        showClose: true,
        message: message,
        type: 'success'
      });
    },
    getList() {
      // 获取列表数据
    }
  }
}
</script>