income_payments_client/src/views/financialManagement/arriveAndInvoicing/modules/EditReceivableAmount.vue

<template>
  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    :confirmLoading="confirmLoading"
    switchFullscreen
    @ok="handleOk"
    @cancel="handleCancel"
    okText="保存"
    cancelText="关闭">
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item label="待确收金额" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input placeholder="请输入待确收金额"
                   v-decorator="['receivableAmount',validatorRules.receivableAmount]"
                   :maxLength='50'
                   @blur="addZeroAmount"
                   @change="e => e.target.value = (e.target.value.replace(/[^0-9-.]/g, '')).trim()"></a-input>
        </a-form-item>
       <!-- <a-form-item label="税率" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <j-dict-select-tag @change="changeRate" placeholder="请选择税率" dict-code="rate" :trigger-change="true"
                             v-decorator="['taxRate',validatorRules.taxRate]"></j-dict-select-tag>
        </a-form-item>
        <a-form-item label="税额" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input placeholder="请输入税额"
                   v-decorator="['tax',validatorRules.tax]"
                   :maxLength='50'
                   disabled
                   @change="e => e.target.value = (e.target.value.replace(/[^0-9-.]/g, '')).trim()"></a-input>
        </a-form-item>
        <a-form-item label="未税金额" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input placeholder="请输入未税金额"
                   disabled
                   v-decorator="['noTaxAmount',validatorRules.noTaxAmount]"
                   :maxLength='50'
                   @change="e => e.target.value = (e.target.value.replace(/[^0-9-.]/g, '')).trim()"></a-input>
        </a-form-item>-->
      </a-form>
    </a-spin>
  </j-modal>
</template>

<script>
import pick from 'lodash.pick'
import { addZero } from '../../../../utils/util'
import { TaxOperateMixin } from './TaxOperateMixin'
import {httpAction} from '@api/manage'

export default {
  name: 'EditReceivableAmount',
  props: {
    // 项目id
    projectId: {
      type: String,
      required: false,
      default: null
    },
    // 项目类型
    projectType: {
      type: [Number, String],
      required: false,
      default: null
    }
  },
  mixins: [TaxOperateMixin],
  watch: {
    // 监听是否需要发票 然后修改响应的税率值
    needInvoice(value) {
      this.taxRate = value ? 0.06 : 0
    }
  },
  data() {
    return {
      title: '修改待确收金额',
      width: 600,
      visible: false,
      confirmLoading: false,
      form: this.$form.createForm(this),
      model: {},
      url: {
        // 接口名称
        edit: '/paymentRecord/payPaymentRecord/editReceivableAmount'
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 18 }
      },
      validatorRules: {
        receivableAmount: {
          rules: [{ required: true, validator: this.checkMoney }],
          validateTrigger: 'blur'
        },
        taxRate: {
          rules: [{ required: true,message: '请选择税率'  }],
          validateTrigger: 'change',initialValue:'0.06'
        },
        noTaxAmount: {
          rules: [{required: true, validator: this.checkNoTaxMoney}],
          validateTrigger: 'blur'
        },
        tax: {
          rules: [{required: true, validator: this.checkTaxMoney}],
          validateTrigger: 'blur'
        },
        paymentDate: {
          rules: [{ required: true, message: '请选择来款日期' }],
          validateTrigger: 'change'
        }
      }
    }
  },
  methods: {
    addZero,
    edit(record) {
      this.visible = true
      this.form.resetFields()
      this.model = Object.assign({}, record)
      this.$nextTick(() => {
        this.form.setFieldsValue(pick(this.model, 'receivableAmount'))
        this.taxRate = this.form.getFieldValue('taxRate')
      })
    },
    /**
     * 改变税率计算 到账金额 与税额
     * */
    changeRate(val){
      this.taxRate = val
      let amount = this.form.getFieldValue('receivableAmount')
      if(!amount) return
      let obj =  this.calcOtherNumber(amount)
      this.$nextTick(() => {
        this.form.setFieldsValue( {tax:obj.tax,noTaxAmount: obj.noTaxAmount})
      })
    },
    handleOk() {
      if (this.confirmLoading) {
        return
      }
      const that = this
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true
          let method = 'post'
          let url = this.url.edit
          const formData = Object.assign({}, values)
          // 项目id
          formData.projectId = this.projectId
          // 项目类型
          formData.projectType = this.projectType
          httpAction(url, formData, method).then(res => {
            if (res.success) {
              that.$message.success(res.message)
              that.$emit('ok')
              that.handleCancel()
              that.confirmLoading = false
            } else {
              this.$message.warn(res.message)
            }
          }).finally(() => {
            that.confirmLoading = false
          })
        }
      })
    },
    handleCancel() {
      this.close()
    },
    close() {
      this.visible = false
    },
    // 校验金额格式
    checkMoney(rules, value, callback) {
      this.checkMoneyTemplate(rules, value, callback, '待确收金额')
    },
    checkNoTaxMoney(rules, value, callback) {
      this.checkMoneyTemplate(rules, value, callback, '未税金额')
    },
    checkTaxMoney(rules, value, callback) {
      this.checkMoneyTemplate(rules, value, callback, '税额')
    },
  }
}
</script>

<style scoped>

</style>