income_payments_client/src/views/financialManagement/arriveAndInvoicing/modules/InvoicingModule.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="['invoiceAmount',validatorRules.invoiceAmount]"
                   :maxLength='50'
                   @blur="addZero"
                   @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="请输入开票号"
                   v-decorator="['billNo',validatorRules.billNo]"
                   :maxLength='50'
                   @change="e => {e.target.value = (e.target.value + '').trim()}"></a-input>
        </a-form-item>
        <a-form-item label="开票日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <j-date placeholder="请选择开票日期"
                  style="width: 100%;"
                  v-decorator="['billDate',validatorRules.billDate]"
                  :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 JDate from '../../../../components/tools/JDate'
import pick from 'lodash.pick'
import { money } from '../../../../utils/validate'
import { addPayBill, addPaymentPhase, editAmountPhase, editPayBill } from '../../../../api/incomePaymentsApi'
import { addZero } from '../../../../utils/util'
import { getContactsById } from '../../../../api/api'

export default {
  name: 'InvoicingModule',
  components: { JDate },
  props: {
    // 项目id
    projectId: {
      type: String,
      required: false,
      default: null
    },
    // 项目类型
    projectType: {
      type: [Number, String],
      required: false,
      default: null
    },
    // 项目名称
    projectName: {
      type: String,
      required: false,
      default: null
    },
    // 企业名称
    chargeCompanyName: {
      type: String,
      required: false,
      default: null
    },
    // 项目邮寄联系人
    mailContactsId: {
      type: String,
      required: false,
      default: null
    }
  },
  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: {
        invoiceAmount: {
          rules: [{ required: true, validator: this.checkMoney }],
          validateTrigger: 'blur'
        },
        billNo: {
          rules: [{ required: true, message: '请输入开票号' }],
          validateTrigger: 'blur'
        },
        billDate: {
          rules: [{ required: true, message: '请选择开票日期' }],
          validateTrigger: 'change'
        }
      },
      postalCode: '', // 邮寄联系人邮编
    }
  },
  methods: {
    addZero,
    add() {
      this.edit({})
    },
    edit(record) {
      this.form.resetFields()
      this.model = Object.assign({}, record)
      this.getMailContactPostalCode()
      this.visible = true
      this.$nextTick(() => {
        this.form.setFieldsValue(pick(this.model, 'invoiceAmount', 'billNo', 'billDate', 'remark'))
      })
    },
    getMailContactPostalCode() {
      getContactsById({id: this.mailContactsId}).then(res => {
        this.postalCode = res.result.postalCode
      })
    },
    handleOk() {
      if (this.confirmLoading) {
        return
      }
      this.confirmLoading = true
      this.form.validateFields((err, values) => {
        if (!err) {
          // values.chargeCompanyName = this.chargeCompanyName
          values.projectName = this.projectName
          values.contactId = this.mailContactsId
          values.postalCode = this.postalCode
          const formData = Object.assign(this.model, values)
          console.log('表单提交数据', formData)
          let okHttpMethod
          if (this.model.id) {
            okHttpMethod = editPayBill(formData)
          } else {
            let addData = formData
            let bmpList = [
              {
                invoiceAmount: formData.invoiceAmount,
                projectId: this.projectId,
                projectType: this.projectType,
                remark: formData.remark
              }
            ]
            addData.bmpList = bmpList
            delete addData.projectName
            delete addData.remark
            okHttpMethod = addPayBill(addData)
          }
          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
    },
    /**
     * 校验金额格式
     * @param rules
     * @param value
     * @param callback
     */
    checkMoney(rules, value, callback) {
      if (value) {
        if (money(value)) {
          callback()
          return
        }
        callback('请输入合法的金额数字,最多2位小数,10位正数')
      }
      callback('请输入到账金额')
    }
  }
}
</script>

<style scoped>

</style>