income_payments_client/src/views/financialManagement/arriveAndInvoicing/modules/ArriveModule.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="['amountReceived',validatorRules.amountReceived]"
                   :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-item label="来款日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <j-date placeholder="请选择来款日期"
                  style="width: 100%;"
                  v-decorator="['paymentDate',validatorRules.paymentDate]"
                  :trigger-change="true"
                  date-format="YYYY-MM-DD"/>
        </a-form-item>
        <a-form-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-textarea
            placeholder="请输入备注"
            v-decorator="['remark']"
            :auto-size="{ minRows: 3, maxRows: 6 }"
            :maxLength='200'
            @change="e => {e.target.value = (e.target.value + '').trim()}"/>
        </a-form-item>
      </a-form>
    </a-spin>
  </j-modal>
</template>

<script>
import pick from 'lodash.pick'
import JDate from '../../../../components/tools/JDate'
import { addPaymentPhase, editAmountPhase } from '../../../../api/incomePaymentsApi'
import { addZero } from '../../../../utils/util'
import { TaxOperateMixin } from './TaxOperateMixin'
import JDictSelectTag from '@comp/dict/JDictSelectTag'

export default {
  name: 'ArriveModule',
  components: { JDate,JDictSelectTag },
  mixins: [TaxOperateMixin],
  props: {
    // 项目id
    projectId: {
      type: String,
      required: false,
      default: null
    },
    // 项目类型
    projectType: {
      type: [Number, String],
      required: false,
      default: null
    },
    // 项目是否需要发票
    needInvoice: {
      type: [Number, String],
      required: false,
      default: null
    },
  },
  watch: {
    // 监听是否需要发票 然后修改响应的税率值
    needInvoice(value) {
      this.taxRate = value ? 0.06 : 0
    }
  },
  data() {
    return {
      title: '来款信息',
      width: 600,
      visible: false,
      confirmLoading: false,
      form: this.$form.createForm(this),
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 18 }
      },
      validatorRules: {
        amountReceived: {
          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,
    add() {
      this.edit({})
    },
    /**
     * 改变税率计算 到账金额 与税额
     * */
    changeRate(val){
      this.taxRate = val
      let amount = this.form.getFieldValue('amountReceived')
      if(!amount) return
      let obj =  this.calcOtherNumber(amount)
      this.$nextTick(() => {
        this.form.setFieldsValue( {tax:obj.noTaxAmount,noTaxAmount: obj.tax})
      })
    },
    edit(record) {
      this.form.resetFields()
      this.model = Object.assign({}, record)
      this.visible = true
      this.$nextTick(() => {
        this.form.setFieldsValue(pick(this.model, 'amountReceived', 'tax', 'taxRate','noTaxAmount', 'paymentDate', 'remark'))
      })
    },
    handleOk() {
      if (this.confirmLoading) {
        return
      }
      this.confirmLoading = true
      this.form.validateFields((err, values) => {
        if (!err) {
          values.projectId = this.projectId
          values.projectType = this.projectType
          const obj = Object.assign(this.model, values)
          let okHttpMethod
          if (this.model.id) {
            okHttpMethod = editAmountPhase(obj)
          } else {
            let arr = []
            arr.push(obj)
            okHttpMethod = addPaymentPhase(arr)
          }
          okHttpMethod.then(res => {
            if (res.success) {
              this.$message.success(res.message)
              this.$emit('ok')
              this.close()
            } else {
              this.$message.warn(res.message)
            }
          }).finally(() => {
            setTimeout(() => {
              this.confirmLoading = false
            }, 1000)
          })
        } else {
          this.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>