569 lines
18 KiB
Vue
569 lines
18 KiB
Vue
<template>
|
|
<j-modal
|
|
:title="title"
|
|
:width="width"
|
|
:visible="visible"
|
|
:confirmLoading="confirmLoading"
|
|
switchFullscreen
|
|
@ok="handleOk"
|
|
@cancel="handleCancel"
|
|
cancelText="关闭">
|
|
<a-spin :spinning="confirmLoading">
|
|
<a-form :form="form">
|
|
<a-row>
|
|
<a-col :xl="12" :sm="24">
|
|
<a-form-item label="开票金额" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
|
<a-input placeholder="请输入开票金额"
|
|
v-decorator="['invoiceAmount',validatorRules.invoiceAmount]"
|
|
:maxLength='50'
|
|
@blur="invoicingAmountBlur"
|
|
@change="(e) => {e.target.value = (e.target.value.replace(/[^0-9.-]/g,'')).trim()}"></a-input>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :xl="12" :sm="24">
|
|
<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-col>
|
|
</a-row>
|
|
<a-row>
|
|
<a-col :xl="12" :sm="24">
|
|
<a-form-item label="开票时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
|
<j-date placeholder="请选择开票时间"
|
|
style="width: 100%;"
|
|
v-decorator="['billDate', validatorRules.billDate]"
|
|
:trigger-change="true"
|
|
v-bind="$attrs"
|
|
date-format="YYYY-MM-DD"/>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :xl="12" :sm="24" v-if="isFinancial">
|
|
<a-form-item label="邮寄联系人" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
|
<select-contacts
|
|
placeholder="请选择邮寄联系人"
|
|
v-decorator="['contactId',validatorRules.contactId]"
|
|
v-bind="$attrs"
|
|
:maxLength='50'
|
|
@change="postContactChange"></select-contacts>
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
<a-row v-if="isFinancial">
|
|
<a-col :xl="12" :sm="24">
|
|
<a-form-item label="邮政编码" :labelCol="labelCol" :wrapperCol="wrapperCol" class="form-item-postcode">
|
|
<a-input placeholder="请输入邮政编码"
|
|
v-decorator="['postalCode', validatorRules.postalCode]"
|
|
:maxLength='6'
|
|
@change="e => {e.target.value = (e.target.value + '').trim()}"></a-input>
|
|
<a class="search-postcode" href="https://www.youbianku.com" target="_blank">查询邮编</a>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :xl="12" :sm="24">
|
|
<a-form-item label="通讯地址" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
|
<a-input placeholder="请输入通讯地址"
|
|
:maxLength='50'
|
|
v-decorator="['contactAddress',validatorRules.contactAddress]"
|
|
@change="e => {e.target.value = (e.target.value + '').trim()}"></a-input>
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
<a-row>
|
|
<a-col :xl="12" :sm="24">
|
|
<a-form-item label="发票附件" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
|
<j-upload
|
|
file-type-error-message="请上传发票附件"
|
|
:return-id="true"
|
|
v-decorator="['invoiceFileId', validatorRules.invoiceFileId]"
|
|
:trigger-change="true"
|
|
></j-upload>
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
</a-form>
|
|
|
|
<a-table
|
|
ref="table"
|
|
size="middle"
|
|
bordered
|
|
rowKey="id"
|
|
:columns="columns"
|
|
:dataSource="dataSource"
|
|
class="j-table-force-nowrap">
|
|
<template slot="text" slot-scope="text">
|
|
<j-ellipsis :value="text" :length="18"></j-ellipsis>
|
|
</template>
|
|
|
|
<!-- 输入-->
|
|
<template slot="input-text" slot-scope="text, record, index">
|
|
<a-input placeholder="请输入备注"
|
|
:maxLength='50'
|
|
v-model="remarkList[index]"
|
|
@change="e => {e.target.value = (e.target.value + '').trim()}"></a-input>
|
|
</template>
|
|
|
|
<!-- 税率-->
|
|
<template slot="tax-rate" slot-scope="text,record">
|
|
<j-dict-select-tag style="width: 100%" @input="changeRate(record)" placeholder="请选择税率" dict-code="rate" v-model="record.taxRate"></j-dict-select-tag>
|
|
</template>
|
|
|
|
</a-table>
|
|
</a-spin>
|
|
</j-modal>
|
|
</template>
|
|
|
|
<script>
|
|
import JDate from '../../../components/tools/JDate'
|
|
import {money} from '../../../utils/validate'
|
|
import {addZero} from '../../../utils/util'
|
|
import {addPayBill} from '../../../api/incomePaymentsApi'
|
|
import SelectContacts from '../../../components/company/SelectContacts'
|
|
import {getContactsById} from '../../../api/api'
|
|
import pick from 'lodash.pick'
|
|
import JUpload from '@comp/jero/JUpload'
|
|
|
|
export default {
|
|
name: 'BatchInvoicingModule',
|
|
components: {JUpload, JDate, SelectContacts},
|
|
props: {
|
|
// 选中的项目信息
|
|
selectedData: {
|
|
type: Array,
|
|
required: false,
|
|
default: () => {
|
|
return []
|
|
}
|
|
},
|
|
visible: {
|
|
type: Boolean,
|
|
required: false,
|
|
default: false
|
|
},
|
|
// 是否为财务管理到账开票
|
|
isFinancial: {
|
|
type: Boolean,
|
|
required: false,
|
|
default: false
|
|
},
|
|
// 打包联系人id
|
|
packContactId: {
|
|
type: String,
|
|
required: false,
|
|
default: ''
|
|
}
|
|
},
|
|
watch: {
|
|
visible(value) {
|
|
if (value) {
|
|
this.open()
|
|
}
|
|
},
|
|
packContactId(value) {
|
|
if (value) {
|
|
this.postContactChange(value)
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
title: '批量开票',
|
|
width: 1200,
|
|
confirmLoading: false,
|
|
form: this.$form.createForm(this),
|
|
labelCol: {
|
|
xs: {span: 24},
|
|
sm: {span: 6}
|
|
},
|
|
wrapperCol: {
|
|
xs: {span: 24},
|
|
sm: {span: 18}
|
|
},
|
|
remarksLabelCol: {
|
|
xs: {span: 24},
|
|
sm: {span: 3}
|
|
},
|
|
remarksWrapperCol: {
|
|
xs: {span: 24},
|
|
sm: {span: 21}
|
|
},
|
|
columns: [
|
|
{
|
|
title: '序号',
|
|
dataIndex: '',
|
|
key: 'rowIndex',
|
|
width: 60,
|
|
align: 'center',
|
|
customRender: function (t, r, index) {
|
|
return parseInt(index) + 1
|
|
}
|
|
}, {
|
|
title: '打包项目名称',
|
|
align: 'center',
|
|
dataIndex: 'chargeProject',
|
|
scopedSlots: {customRender: 'text'}
|
|
}, {
|
|
title: '待确收金额',
|
|
align: 'center',
|
|
width: 100,
|
|
dataIndex: 'receivableAmount'
|
|
},
|
|
{
|
|
title: '已开票金额',
|
|
align: 'center',
|
|
width: 100,
|
|
dataIndex: 'invoiceAmount'
|
|
},
|
|
{
|
|
title: '本次开票金额',
|
|
align: 'center',
|
|
width: 140,
|
|
dataIndex: 'thisInvoicingAmount'
|
|
},
|
|
{
|
|
title: '税率',
|
|
align: 'center',
|
|
width: 120,
|
|
dataIndex: 'taxRate',
|
|
scopedSlots: {customRender: 'tax-rate'}
|
|
},
|
|
{
|
|
title: '税额',
|
|
align: 'center',
|
|
width: 100,
|
|
dataIndex: 'tax',
|
|
},
|
|
{
|
|
title: '未税额',
|
|
align: 'center',
|
|
width: 100,
|
|
dataIndex: 'noTaxAmount',
|
|
},
|
|
{
|
|
title: '备注',
|
|
align: 'center',
|
|
width: 200,
|
|
dataIndex: 'remark',
|
|
scopedSlots: {customRender: 'input-text'}
|
|
}
|
|
],
|
|
dataSource: [],
|
|
remarkList: [], // 备注列表
|
|
validatorRules: {
|
|
invoiceAmount: {
|
|
rules: [{required: true, validator: this.checkMoney}],
|
|
validateTrigger: 'blur'
|
|
},
|
|
billNo: {
|
|
rules: [{required: true, message: '请输入开票号'}],
|
|
validateTrigger: 'blur'
|
|
},
|
|
billDate: {
|
|
rules: [{required: true, message: '请选择开票时间'}],
|
|
validateTrigger: 'change'
|
|
},
|
|
contactId: {
|
|
rules: [{required: true, message: '请选择邮寄联系人'}],
|
|
validateTrigger: 'change'
|
|
},
|
|
postalCode: {
|
|
rules: [{required: true, message: '请输入邮政编码'}],
|
|
validateTrigger: 'blur'
|
|
},
|
|
contactAddress: {
|
|
rules: [{required: true, message: '请输入通讯地址'}],
|
|
validateTrigger: 'blur'
|
|
},
|
|
invoiceFileId: {
|
|
rules: [{ required: false, message: '请上传发票附件' }],
|
|
validateTrigger: 'change'
|
|
}
|
|
},
|
|
inputInvoicingAmount: null, // 输入的开票金额
|
|
sumAmountOwed: 0, // 总未开票金额,
|
|
sumInvoiceAmount: 0, // 总已开票金额
|
|
packContact: {}, // 邮寄联系人信息
|
|
// 用于提交的表格数据
|
|
submitDataSource: []
|
|
}
|
|
},
|
|
methods: {
|
|
addZero,
|
|
/**
|
|
* 计算本项目开票金额的税额与未税额
|
|
* */
|
|
changeRate(record){
|
|
// 获取本次开票金额 税率
|
|
let {thisInvoicingAmount,taxRate} = record
|
|
// 计算本次开票金额的 税额与未税额
|
|
if(!thisInvoicingAmount) return
|
|
record.noTaxAmount = (thisInvoicingAmount / (1 + taxRate * 1)).toFixed(2)
|
|
record.tax = (thisInvoicingAmount - record.noTaxAmount).toFixed(2)
|
|
},
|
|
/**
|
|
* 获取补0的数据
|
|
* @param value
|
|
* @returns {*}
|
|
*/
|
|
getAddZero(value) {
|
|
let e = {
|
|
target: {
|
|
value: value.toString()
|
|
}
|
|
}
|
|
this.addZero(e)
|
|
return e.target.value
|
|
},
|
|
loadData() {
|
|
// 计算项目未开票金额信息
|
|
this.dataSource.forEach(item => {
|
|
let amountOwed = Number(item.receivableAmount) - Number(item.invoiceAmount)
|
|
item.amountOwed = this.getAddZero(amountOwed)
|
|
item.thisInvoicingAmount = 0
|
|
// 清空上一次的税额 未税额
|
|
item.tax = ''
|
|
item.noTaxAmount = ''
|
|
this.sumAmountOwed += Number(item.amountOwed)
|
|
this.sumInvoiceAmount += Number(item.invoiceAmount)
|
|
// 设置默认税率 0.06
|
|
item.taxRate = '0.06'
|
|
})
|
|
this.$forceUpdate()
|
|
},
|
|
/**
|
|
* blur时分配金额
|
|
*/
|
|
invoicingAmountBlur(e) {
|
|
this.addZero(e)
|
|
e.target.value = (e.target.value.replace(/[^0-9.-]/g, '')).trim()
|
|
this.inputInvoicingAmount = Number(e.target.value)
|
|
this.clearThisTimeAmount()
|
|
this.calculateThisTimeAmount()
|
|
},
|
|
/**
|
|
* 邮寄联系人变化
|
|
* @param value
|
|
*/
|
|
postContactChange(value) {
|
|
console.log(value)
|
|
// value不为undefined
|
|
if (value) {
|
|
getContactsById({id: value}).then(res => {
|
|
let obj = {
|
|
postalCode: res.result.postalCode,
|
|
contactAddress: res.result.contactAddress
|
|
}
|
|
if (this.packContactId) {
|
|
this.packContact = obj
|
|
this.packContact.contactId = value
|
|
} else {
|
|
this.form.setFieldsValue(pick(obj, 'postalCode', 'contactAddress'))
|
|
}
|
|
})
|
|
return
|
|
}
|
|
// value为undefined，清除邮政编码和通讯地址
|
|
const obj = {
|
|
postalCode: undefined,
|
|
contactAddress: undefined
|
|
}
|
|
this.form.setFieldsValue(pick(obj, 'postalCode', 'contactAddress'))
|
|
},
|
|
/**
|
|
* 清空本次开票金额
|
|
* @returns {Promise<unknown>}
|
|
*/
|
|
clearThisTimeAmount() {
|
|
this.dataSource.forEach(item => {
|
|
item.thisInvoicingAmount = 0
|
|
})
|
|
},
|
|
/**
|
|
* 计算此次开票信息
|
|
*/
|
|
calculateThisTimeAmount() {
|
|
console.log(123)
|
|
// if (this.inputInvoicingAmount === null) {
|
|
// this.$message.warn('开票金额不得为0')
|
|
// return
|
|
// }
|
|
if (this.inputInvoicingAmount > this.sumAmountOwed) {
|
|
this.$message.warn('开票金额大于当前未开票金额，输入有误！')
|
|
return
|
|
}
|
|
if (this.inputInvoicingAmount < 0 && this.sumInvoiceAmount === 0) {
|
|
this.$message.warn('当前总开票金额为0，不可输入小于0的开票金额')
|
|
return
|
|
}
|
|
// 用于计算的数据
|
|
let changeInputAmount = this.inputInvoicingAmount
|
|
// 清除要提交的数据
|
|
this.submitDataSource = []
|
|
for (let i = 0; i < this.dataSource.length; i++) {
|
|
let item = this.dataSource[i]
|
|
//输入来款金额为0，给选中的项目添加来款阶段，来款金额为0
|
|
if (this.inputInvoicingAmount === 0) {
|
|
item.thisInvoicingAmount = this.getAddZero(this.inputInvoicingAmount)
|
|
this.$set(this.dataSource, i, item)
|
|
this.$set(this.submitDataSource, i, item)
|
|
continue
|
|
}
|
|
// 输入的来款金额>0
|
|
if (this.inputInvoicingAmount > 0) {
|
|
// 分配剩下的>0才能继续走分配
|
|
if (changeInputAmount > 0) {
|
|
// 输入的来款金额是否 >= 当前项目欠款
|
|
if (changeInputAmount >= Number(item.amountOwed)) {
|
|
item.thisInvoicingAmount = this.getAddZero(Number(item.amountOwed))
|
|
changeInputAmount -= Number(item.amountOwed)
|
|
} else {
|
|
// 输入的来款金额小于当前项目欠款且剩余的输入来款金额大于0，则将剩余全部来款算入当前项目的此次来款
|
|
item.thisInvoicingAmount = this.getAddZero(changeInputAmount)
|
|
changeInputAmount = 0
|
|
}
|
|
this.$set(this.submitDataSource, i, item)
|
|
} else {
|
|
item.thisInvoicingAmount = this.getAddZero(0)
|
|
}
|
|
this.$set(this.dataSource, i, item)
|
|
continue
|
|
}
|
|
// 输入的来款金额<0
|
|
if (this.inputInvoicingAmount < 0) {
|
|
// 分配剩下的<0 && 已收金额 > 0才能继续走分配
|
|
if (changeInputAmount < 0 && Number(item.invoiceAmount) > 0) {
|
|
// 若当前项目的实收 + 分配剩余 > 0，将当前全部分配给这个项目且将剩余清0
|
|
if (Number(item.invoiceAmount) + changeInputAmount >= 0) {
|
|
item.thisInvoicingAmount = this.getAddZero(changeInputAmount)
|
|
changeInputAmount = 0
|
|
} else {
|
|
item.thisInvoicingAmount = this.getAddZero(-Number(item.invoiceAmount))
|
|
changeInputAmount += Number(item.invoiceAmount)
|
|
}
|
|
this.$set(this.submitDataSource, i, item)
|
|
} else {
|
|
item.thisInvoicingAmount = this.getAddZero(0)
|
|
}
|
|
this.$set(this.dataSource, i, item)
|
|
}
|
|
|
|
}
|
|
// 计算税额 与未税额
|
|
this.dataSource.forEach(m => {
|
|
this.changeRate(m)
|
|
})
|
|
// this.dataSource.forEach((item, index) => {
|
|
// // 当前项目欠款是否 >0
|
|
// if (Number(item.amountOwed) > 0 && Number(item.amountOwed) !== Number(item.invoiceAmount)) {
|
|
// if (this.inputInvoicingAmount > 0) {
|
|
// // 输入的开票金额是否 >= 当前项目欠款
|
|
// if (this.inputInvoicingAmount >= Number(item.amountOwed)) {
|
|
// item.thisInvoicingAmount = this.getAddZero(Number(item.amountOwed))
|
|
// this.inputInvoicingAmount -= Number(item.amountOwed)
|
|
// } else {
|
|
// // 输入的开票金额小于当前项目欠款且剩余的输入开票金额大于0，则将剩余全部开票算入当前项目的此次开票
|
|
// if (this.inputInvoicingAmount > 0) {
|
|
// item.thisInvoicingAmount = this.getAddZero(this.inputInvoicingAmount)
|
|
// this.inputInvoicingAmount = 0
|
|
// }
|
|
// }
|
|
// } else {
|
|
// item.thisInvoicingAmount = this.getAddZero(this.inputInvoicingAmount)
|
|
// this.inputInvoicingAmount = 0
|
|
// }
|
|
// }
|
|
// this.$set(this.dataSource, index, item)
|
|
// })
|
|
},
|
|
handleOk() {
|
|
if (this.inputInvoicingAmount > this.sumAmountOwed) {
|
|
this.$message.warn('开票金额大于当前未开票金额，输入有误！')
|
|
return
|
|
}
|
|
if (this.inputInvoicingAmount < 0 && this.sumInvoiceAmount === 0) {
|
|
this.$message.warn('当前总开票金额为0，不可输入小于0的开票金额')
|
|
return
|
|
}
|
|
if (this.confirmLoading) {
|
|
return
|
|
}
|
|
this.confirmLoading = true
|
|
this.form.validateFields((err, values) => {
|
|
if (!err) {
|
|
let bmpList = []
|
|
// let data = this.dataSource.filter(tt => tt.thisInvoicingAmount !== 0 && tt.thisInvoicingAmount)
|
|
this.submitDataSource.forEach((item, index) => {
|
|
let obj = {
|
|
invoiceAmount: item.thisInvoicingAmount,
|
|
projectId: item.id,
|
|
projectType: item.projectType,
|
|
tax:item.tax,
|
|
taxRate:item.taxRate,
|
|
noTaxAmount:item.noTaxAmount,
|
|
remark: this.remarkList[index]
|
|
}
|
|
bmpList.push(obj)
|
|
})
|
|
let param = values
|
|
if (this.packContactId) {
|
|
param = Object.assign(param, this.packContact)
|
|
}
|
|
param.bmpList = bmpList
|
|
addPayBill(param).then(res => {
|
|
if (res.success) {
|
|
this.$message.success(res.message)
|
|
this.close()
|
|
this.$emit('ok')
|
|
} else {
|
|
this.$message.warn(res.message)
|
|
}
|
|
}).finally(() => {
|
|
setTimeout(() => {
|
|
this.confirmLoading = false
|
|
}, 1000)
|
|
})
|
|
} else {
|
|
this.confirmLoading = false
|
|
}
|
|
})
|
|
},
|
|
handleCancel() {
|
|
this.close()
|
|
},
|
|
open() {
|
|
this.dataSource = [...this.selectedData]
|
|
this.dataSource.forEach(() => {
|
|
this.remarkList.push('')
|
|
})
|
|
this.loadData()
|
|
},
|
|
close() {
|
|
this.form.resetFields()
|
|
this.clearThisTimeAmount()
|
|
this.dataSource = []
|
|
this.$forceUpdate()
|
|
this.$emit('update:visible', false)
|
|
},
|
|
/**
|
|
* 校验金额格式
|
|
* @param rules
|
|
* @param value
|
|
* @param callback
|
|
*/
|
|
checkMoney(rules, value, callback) {
|
|
if (value) {
|
|
if (money(value)) {
|
|
callback()
|
|
}
|
|
callback('请输入合法的金额数字,最多2位小数,10位整数')
|
|
}
|
|
callback('请输入开票金额')
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style> |