个人所得税申报 - 收入及免税收入信息填写

<el-form ref="form" :model="form" :rules="rules" label-width="120px">
  <el-row style="display: flex">
    <el-form-item label="姓名:" prop="acTaxPiPersonVo.personId" width="220px">
      <el-select v-model="form.acTaxPiPersonVo.personId" placeholder="请选择姓名">
        <el-option v-for="item in personInfo" :key="item.id" :label="item.name" :value="item.personId"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="证件类型：" prop="acTaxPiPersonVo.identificationType">
      <el-select v-model="form.acTaxPiPersonVo.identificationType" placeholder="请选择证件类型" :disabled="isEditing">
        <el-option v-for="item in personInfo" :key="item.id" :label="item.identificationType | getType" :value="item.identificationType"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="所得期间起:" prop="incomePeriodDateStart">
      <el-date-picker clearable size="small" v-model="form.incomePeriodDateStart" type="date" value-format="yyyy-MM-dd" placeholder="选择所得期间起" style="width: 170px" :picker-options="datePickerOptions" :disabled="isEditing"></el-date-picker>
    </el-form-item>
  </el-row>
  <el-row style="display: flex">
    <el-form-item label="工号：" prop="acTaxPiPersonVo.employeeId">
      <el-input v-model="form.acTaxPiPersonVo.employeeId" placeholder="请输入工号"></el-input>
    </el-form-item>
    <el-form-item label="证件号码：" prop="acTaxPiPersonVo.identificationNum">
      <el-select v-model="form.acTaxPiPersonVo.identificationNum" placeholder="请选择证件号码" :disabled="isEditing">
        <el-option v-for="item in personInfo" :key="item.id" :label="item.identificationNum" :value="item.identificationNum"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label=" 所得期间止:" prop="incomePeriodDateEnd">
      <el-date-picker clearable style="width: 170px" size="small" v-model="form.incomePeriodDateEnd" type="date" value-format="yyyy-MM-dd" placeholder="选择 所得期间止" :picker-options="datePicker" :disabled="isEditing"></el-date-picker>
    </el-form-item>
  </el-row>
  <div class="title">
    <div class="line"></div>
    <div class="fonts">本期收入及免税收入</div>
  </div>
  <el-row style="display: flex">
    <el-form-item label="收入:" prop="income" style="margin-left: -5px" @input="onIncomeChange">
      <el-input v-model="form.income" placeholder="请输入收入"></el-input>
    </el-form-item>
    <el-form-item label="费用：" prop="cost" style="margin-left: -40px">
      <el-input v-model="form.cost" placeholder="请输入费用：" :disabled="isEditing"></el-input>
    </el-form-item>
    <el-form-item label="免税收入:" prop="taxExemptIncome">
      <el-input v-model="form.taxExemptIncome" placeholder="请输入免税收入" :disabled="isEditing"></el-input>
    </el-form-item>
  </el-row>
  <div class="title">
    <div class="line"></div>
    <div class="fonts">本期其他扣除</div>
  </div>
  <el-row style="display: flex">
    <el-form-item label="其他:" prop="other" style="margin-left: -5px">
      <el-input v-model="form.other" placeholder="请输入其他"></el-input>
    </el-form-item>
    <el-form-item label="小计:" prop="subtotal" style="margin-left: -40px">
      <el-input v-model="form.subtotal" placeholder="请输入小计" :disabled="isEditing"></el-input>
    </el-form-item>
    <el-form-item label="减免税额:" prop="reductionTaxAmount">
      <el-input v-model="form.reductionTaxAmount" placeholder="请输入减免税额"></el-input>
    </el-form-item>
  </el-row>
  <div class="title">
    <div class="line"></div>
    <div class="fonts">税款计算</div>
  </div>
  <el-row style="display: flex">
    <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>
  <el-row style="display: flex">
    <el-form-item label="应纳税额：" prop="acTaxPiPersonCalculationSchedule.acTaxableAmount" style="width: 290px">
      {{ acTaxableamount }}
    </el-form-item>
    <el-form-item label="减免税额：" prop="acTaxPiPersonCalculationSchedule.acTaxSavings" style="width: 290px">
      0.00
    </el-form-item>
    <el-form-item label="应扣缴税额：" prop="acTaxPiPersonCalculationSchedule.acDeductiblePaymentAmount" style="width: 290px">
      {{ acDeductibleAmount }}
    </el-form-item>
  </el-row>
  <el-row style="display: flex">
    <el-form-item label="已预缴税额：" prop="acTaxPiPersonCalculationSchedule.prepaidTaxAmount" style="width: 290px">
      0.00
    </el-form-item>
    <el-form-item label="应补(退)税额：" prop="acTaxPiPersonCalculationSchedule.payableTaxAmount" style="width: 290px">
      {{ payableTaxamount }}
    </el-form-item>
  </el-row>
  <el-form-item label="备注:" prop="remark" style="width: 860px">
    <el-input v-model="form.remark" placeholder="请输入备注"></el-input>
  </el-form-item>
</el-form>
<script>
reset() {
  (this.form = {
    personId: null,
    other: null,
    // 应纳税额
    cost: null,
    // 应纳税额
    taxExemptIncome: null,
    // 备注
    remark: null,
    // 小计
    subtotal: null,
    // 减免税额
    reductionTaxAmount: null,
    // companyId: null,
    // incomeReportingCode: null,
    // 所得期间起
    incomePeriodDateStart: null,
    // 所得期间至
    incomePeriodDateEnd: null,
    // 应纳税额
    acTaxPiPersonVo: {
      // 人员id
      personId: null,
      // 姓名
      name: null,
      // 证件号码
      identificationNum: null,
      // 证件类型
      identificationType: null,
      // 工号
      employeeId: null,
      // 其他
    },
    acTaxPiPersonCalculationSchedule: {
      acTaxableAmount: null,
      // 	减免税额
      acTaxSavings: null,
      // 应纳税所得额
      acTaxableIncome: null,
      // 已预缴税额
      prepaidTaxAmount: null,
      // 税率/预扣率
      taxRate: null,
      // 速算扣除数
      quickCalculationDeduction: null,
      // 应补(退)税额
      payableTaxAmount: null,
      // 累计应扣缴税额
      acDeductiblePaymentAmount: null,
    },
  }),
  // this.form.acTaxPiPersonVo.identificationNum = null;
  // this.form.acTaxPiPersonVo.identificationType = null;
  // this.form = {};
  this.resetForm("form");
}
submitForm() {
  console.log(this.form.incomePeriodDateEnd, "person");
  this.$refs["form"].validate((valid) => {
    if (valid) {
      this.$refs.form.validateField();
      this.form.acTaxPiPersonCalculationSchedule.acTaxableIncome = this.acTaxableincome;
      this.form.acTaxPiPersonCalculationSchedule.acTaxableAmount = this.acTaxableamount;
      this.form.acTaxPiPersonCalculationSchedule.acDeductiblePaymentAmount = this.acDeductibleAmount;
      this.form.acTaxPiPersonCalculationSchedule.payableTaxAmount = this.payableTaxamount;
      this.form.reportingPeriodDate = this.collection;
      if (this.form.personId != null) {
        this.form.companyId = this.companyId;
        updateReportingRoyaltiesIncome(this.form).then((response) => {
          console.log(this.form.incomePeriodDateEnd, "edit");
          this.msgSuccess("修改成功");
          this.open = false;
          this.getList();
        });
      } else {
        this.form.acTaxPiPersonCalculationSchedule.taxRate = this.defaultTax;
        this.form.personId = this.form.acTaxPiPersonVo.personId;
        // this.form.reportingPeriodDate = this.collection;
        this.form.companyId = this.companyId;
        console.log(this.form.personId, "acTaxPiPersonVo");
        addReportingRoyaltiesIncome(this.form).then((response) => {
          console.log(response, "resssssssssss");
          this.msgSuccess("新增成功");
          this.open = false;
          this.getList();
        });
      }
    } else {
      console.log("error submit!!");
      return false;
    }
  });
},
</script>
<style>
/*  .fonts {
    font-weight: bold;
    font-size: 16px;
    margin: 0;
    margin-left: 40px;
  }
  .line {
    background-color: #ccc;
    height: 1px;
    margin: 0;
    margin-left: 40px;
    width: 100%;
  }
  .title {
    width: 860px;
    height: 30px;
  } */
</style>