[update] 收入合同项目关联接口联调；支出合同页面
This commit is contained in:
zhaoxiao
+509
@@ -0,0 +1,509 @@
|
||||
<template>
|
||||
<div>
|
||||
<page-header-title :is-level-one="false" :level-two-title="title"></page-header-title>
|
||||
<a-card :bordered="false">
|
||||
<a-spin :spinning="confirmLoading">
|
||||
<a-form :form="form">
|
||||
<!-- 主体信息-->
|
||||
<div>
|
||||
<div class="part-title">
|
||||
<div class="part-title-text">主体信息</div>
|
||||
</div>
|
||||
<a-row>
|
||||
<a-col :xxl="6" :xl="8" :sm="12">
|
||||
<a-form-item label="合同编号" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input placeholder="请输入合同编号"
|
||||
v-decorator="['contractNum',validatorRules.contractNum]"
|
||||
:maxLength='50'
|
||||
@change="e => {e.target.value = (e.target.value + '').trim()}"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xxl="6" :xl="8" :sm="12">
|
||||
<a-form-item label="合同名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input placeholder="请输入合同名称"
|
||||
v-decorator="['contractName',validatorRules.contractName]"
|
||||
:maxLength='50'
|
||||
@change="e => {e.target.value = (e.target.value + '').trim()}"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xxl="6" :xl="8" :sm="12">
|
||||
<a-form-item label="签订单位" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<company-select placeholder="请选择签订单位"
|
||||
v-decorator="['signedCompany',validatorRules.signedCompany]"
|
||||
@change="handleSignedCompanyChange"></company-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xxl="6" :xl="8" :sm="12">
|
||||
<a-form-item label="签订联系人" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<select-contacts placeholder="请选择签订联系人"
|
||||
:selected-company="selectedCompany"
|
||||
:init-contacts="selectedContact"
|
||||
v-decorator="['signedContactsId',validatorRules.signedContactsId]"></select-contacts>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xxl="6" :xl="8" :sm="12">
|
||||
<a-form-item label="是否开口" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-dict-select-tag v-decorator="['opening']"
|
||||
:triggerChange="true"
|
||||
placeholder="请选择是否开口"
|
||||
dictCode="yn"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xxl="6" :xl="8" :sm="12">
|
||||
<a-form-item label="负责人" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<select-principal placeholder="请选择负责人"
|
||||
v-decorator="['principalId',validatorRules.principalId]"
|
||||
@change="principalChange"></select-principal>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xxl="6" :xl="8" :sm="12">
|
||||
<a-form-item label="部门名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input placeholder="请输入部门名称"
|
||||
v-decorator="['departmentName']"
|
||||
:disabled="true"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xxl="6" :xl="8" :sm="12">
|
||||
<a-form-item label="签订合同总金额" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input placeholder="请输入签订合同总金额"
|
||||
v-decorator="['contractAmount',validatorRules.contractAmount]"
|
||||
:maxLength='50'
|
||||
@change="contractAmountChange"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xxl="6" :xl="8" :sm="12">
|
||||
<a-form-item label="税率" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input placeholder="请输入税率"
|
||||
v-decorator="['rate',validatorRules.rate]"
|
||||
:maxLength='50'
|
||||
@change="rateChange"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xxl="6" :xl="8" :sm="12">
|
||||
<a-form-item label="未税金额" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input placeholder="请输入未税金额"
|
||||
v-decorator="['noTaxAmount']"
|
||||
:maxLength='50'
|
||||
:disabled="true"
|
||||
@change="(e) => {e.target.value = (e.target.value.replace(/[^0-9.]/g,'')).trim()}"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
<!-- /主体信息-->
|
||||
<a-divider></a-divider>
|
||||
<!-- 日期节点-->
|
||||
<div>
|
||||
<div class="part-title">
|
||||
<div class="part-title-text">日期节点</div>
|
||||
</div>
|
||||
<a-row :gutter="30">
|
||||
<a-col :xxl="6" :xl="8" :sm="12">
|
||||
<a-form-item label="合同签订日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-date placeholder="请选择合同签订日期"
|
||||
style="width: 100%;"
|
||||
v-decorator="['contractDate']"
|
||||
:trigger-change="true"
|
||||
date-format="YYYY-MM-DD"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xxl="6" :xl="8" :sm="12">
|
||||
<a-form-item label="合同终止日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-date placeholder="请选择合同终止日期"
|
||||
style="width: 100%;"
|
||||
v-decorator="['terminationDate']"
|
||||
:trigger-change="true"
|
||||
date-format="YYYY-MM-DD"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xxl="6" :xl="8" :sm="12">
|
||||
<a-form-item label="合同约定主要时点" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-date placeholder="请选择合同约定主要时点"
|
||||
style="width: 100%;"
|
||||
v-decorator="['contractTimePoints']"
|
||||
:trigger-change="true"
|
||||
date-format="YYYY-MM-DD"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
<!-- /日期节点-->
|
||||
<a-divider></a-divider>
|
||||
<!-- 账款信息-->
|
||||
<div>
|
||||
<div class="part-title">
|
||||
<div class="part-title-text">账款信息</div>
|
||||
</div>
|
||||
<div>
|
||||
<a-row :gutter="30">
|
||||
<a-col :xxl="6" :xl="8" :sm="12">
|
||||
<a-form-item label="应收金额" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input placeholder="请输入应收金额"
|
||||
v-decorator="['accountsReceivableAmount',validatorRules.accountsReceivableAmount]"
|
||||
:maxLength='50'
|
||||
@change="accountsReceivableChange"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xxl="6" :xl="8" :sm="12">
|
||||
<a-form-item label="已收金额" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input placeholder="请输入已收金额"
|
||||
v-decorator="['amountReceived',validatorRules.amountReceived]"
|
||||
:maxLength='50'
|
||||
@change="amountReceivedChange"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xxl="6" :xl="8" :sm="12">
|
||||
<a-form-item label="未收金额" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input placeholder="请输入未收金额"
|
||||
:maxLength='50'
|
||||
v-decorator="['outstandingAmount']"
|
||||
:disabled="true"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xxl="6" :xl="8" :sm="12">
|
||||
<a-form-item label="赊账状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-dict-select-tag v-decorator="['accountStatus']"
|
||||
:triggerChange="true"
|
||||
placeholder="请选择赊账状态"
|
||||
dictCode="revenue_contract_account_status"
|
||||
:disabled="true"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /账款信息-->
|
||||
<a-divider></a-divider>
|
||||
<!-- 其他-->
|
||||
<div>
|
||||
<div class="part-title">
|
||||
<div class="part-title-text">其他信息</div>
|
||||
</div>
|
||||
<div>
|
||||
<a-row :gutter="30">
|
||||
<a-col :xxl="6" :xl="8" :sm="12">
|
||||
<a-form-item label="合同约定付款次数" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input placeholder="请输入合同约定付款次数"
|
||||
v-decorator="['contractPaymentTimes']"
|
||||
:maxLength='50'
|
||||
@change="e => {e.target.value = (e.target.value + '').trim()}"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xxl="6" :xl="8" :sm="12">
|
||||
<a-form-item label="是否打包" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-dict-select-tag v-decorator="['pack', validatorRules.pack]"
|
||||
:triggerChange="true"
|
||||
placeholder="请选择是否打包"
|
||||
dictCode="yn"
|
||||
@change="packageChange"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xxl="6" :xl="8" :sm="12">
|
||||
<a-form-item label="打包年份" :labelCol="labelCol" :wrapperCol="wrapperCol" v-if="isPackage">
|
||||
<j-year-date style="width:100%"
|
||||
placeholder="请选择打包年份"
|
||||
v-decorator="['packYear',validatorRules.packYear]"></j-year-date>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /其他-->
|
||||
<a-divider></a-divider>
|
||||
<!-- 分期信息-->
|
||||
<div>
|
||||
<div class="part-title">
|
||||
<div class="part-title-text">分期信息</div>
|
||||
</div>
|
||||
<installment-form ref="installmentForm" @ok="installmentFormOk"></installment-form>
|
||||
</div>
|
||||
<!-- /分期信息-->
|
||||
<a-form-item class="table-operator">
|
||||
<a-button type="primary" @click="handleSave">保存</a-button>
|
||||
<a-button @click="handleCancle">取消</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-spin>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PageHeaderTitle from '../../../../components/layouts/PageHeaderTitle'
|
||||
import { getRevenueContractById } from '../../../../api/incomePaymentsApi'
|
||||
import pick from 'lodash.pick'
|
||||
import InstallmentForm from '../../../../components/form/InstallmentForm'
|
||||
import CompanySelect from '../../../../components/company/CompanySelect'
|
||||
import SelectContacts from '../../../../components/company/SelectContacts'
|
||||
import SelectPrincipal from '../../../../components/company/SelectPrincipal'
|
||||
import { getAllUserList } from '../../../../api/api'
|
||||
import { postAction } from '../../../../api/manage'
|
||||
import JDate from '../../../../components/tools/JDate'
|
||||
import JYearDate from '../../../../components/jero/JYearDate'
|
||||
|
||||
export default {
|
||||
name: 'ExpenditureContractModule',
|
||||
components: { PageHeaderTitle, InstallmentForm, CompanySelect, SelectContacts, SelectPrincipal, JDate, JYearDate },
|
||||
data() {
|
||||
return {
|
||||
title: '',
|
||||
contractId: '',
|
||||
form: this.$form.createForm(this),
|
||||
confirmLoading: false,
|
||||
model: {},
|
||||
selectedCompany: null,
|
||||
selectedContact: null,
|
||||
rateNum: null,
|
||||
contractAmountNum: null,
|
||||
amountReceivedNum: null,
|
||||
accountsReceivableNum: null,
|
||||
isPackage: false,
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 10 }
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 14 }
|
||||
},
|
||||
validatorRules: {
|
||||
contractNum: {
|
||||
rules: [{ required: true, validator: this.checkContractNum }],
|
||||
validateTrigger: 'blur'
|
||||
},
|
||||
contractName: {
|
||||
rules: [{ required: true, validator: this.checkContractName }],
|
||||
validateTrigger: 'blur'
|
||||
},
|
||||
signedCompany: {
|
||||
rules: [{ required: true, message: '请选择签订单位' }],
|
||||
validateTrigger: 'change'
|
||||
},
|
||||
signedContactsId: {
|
||||
rules: [{ required: true, message: '请选择签订联系人' }],
|
||||
validateTrigger: 'blur'
|
||||
},
|
||||
principalId: {
|
||||
rules: [{ required: true, message: '请选择负责人' }],
|
||||
validateTrigger: 'blur'
|
||||
},
|
||||
contractAmount: {
|
||||
rules: [{ required: true, message: '请输入签订合同总金额' }],
|
||||
validateTrigger: 'blur'
|
||||
},
|
||||
rate: {
|
||||
rules: [{ required: true, message: '请输入税率' }],
|
||||
validateTrigger: 'blur'
|
||||
},
|
||||
accountsReceivableAmount: {
|
||||
rules: [{ required: true, message: '请输入应收金额' }],
|
||||
validateTrigger: 'blur'
|
||||
},
|
||||
amountReceived: {
|
||||
rules: [{ required: true, message: '请输入已收金额' }],
|
||||
validateTrigger: 'blur'
|
||||
},
|
||||
pack: {
|
||||
rules: [{ required: true, message: '请选择是否打包' }],
|
||||
validateTrigger: 'blur'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if (this.$route.query.hasOwnProperty.call(this.$route.query, 'contractId')) {
|
||||
this.contractId = this.$route.query.contractId
|
||||
this.edit(this.contractId)
|
||||
} else {
|
||||
this.add()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
add() {
|
||||
this.title = '新建支出合同'
|
||||
this.$refs.installmentForm.initInstallmentList([])
|
||||
},
|
||||
edit(id) {
|
||||
this.title = '编辑支出合同'
|
||||
this.confirmLoading = true
|
||||
const param = {
|
||||
id: id
|
||||
}
|
||||
getRevenueContractById(param).then(res => {
|
||||
let record
|
||||
record = res.result
|
||||
this.isSaved = true
|
||||
record.signedCompany = {
|
||||
id: record.signedCompanyId,
|
||||
companyName: record.signedCompanyTemporaryName
|
||||
}
|
||||
this.selectedCompany = record.signedCompany
|
||||
record.signedContactsId = record.signedContactsTemporaryId
|
||||
this.selectedContact = {
|
||||
id: record.signedContactsTemporaryId,
|
||||
name: record.signedContactsTemporaryName
|
||||
}
|
||||
this.$refs.installmentForm.initInstallmentList(record.listInstallment)
|
||||
this.model = Object.assign({}, record)
|
||||
this.$nextTick(() => {
|
||||
this.form.setFieldsValue(pick(this.model, 'contractNum', 'contractName', 'signedCompany', 'signedContactsId', 'opening', 'principalId', 'departmentName', 'contractAmount', 'rate', 'noTaxAmount', 'contractDate', 'terminationDate', 'contractTimePoints', 'accountsReceivableAmount', 'amountReceived', 'outstandingAmount', 'accountStatus', 'contractPaymentTimes', 'pack', 'packYear'))
|
||||
this.confirmLoading = false
|
||||
})
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 表单提交
|
||||
*/
|
||||
handleSave() {
|
||||
// 验证分期信息
|
||||
this.$refs.installmentForm.handleSave()
|
||||
this.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
this.confirmLoading = true
|
||||
if (this.installmentList && this.installmentList.length > 0) {
|
||||
let formData = {}
|
||||
values.signedCompanyId = values.signedCompany.id
|
||||
delete values.signedCompany
|
||||
formData.installment = this.installmentList
|
||||
formData.contract = Object.assign(this.model, values)
|
||||
console.log('表单提交数据', formData)
|
||||
let url = ''
|
||||
if (!this.model.id) {
|
||||
url = this.url.add
|
||||
} else {
|
||||
url = this.url.edit
|
||||
}
|
||||
postAction(url, formData).then(res => {
|
||||
if (res.success) {
|
||||
this.contractId = res.result.id
|
||||
this.edit(this.contractId)
|
||||
this.$message.success(res.message)
|
||||
// 保存上方表单信息，（应该在表单验证完全正确时置为true）
|
||||
this.isSaved = true
|
||||
} else {
|
||||
this.$message.warning(res.message)
|
||||
}
|
||||
}).finally(() => {
|
||||
this.confirmLoading = false
|
||||
})
|
||||
} else {
|
||||
this.confirmLoading = false
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
handleCancle() {
|
||||
this.model = {}
|
||||
},
|
||||
installmentFormOk(value) {
|
||||
this.installmentList = value.installmentList
|
||||
},
|
||||
/**
|
||||
* 选中企业变化
|
||||
* @param value
|
||||
*/
|
||||
handleSignedCompanyChange(value) {
|
||||
this.selectedCompany = value
|
||||
this.model.signedContactsId = undefined
|
||||
},
|
||||
/**
|
||||
* 负责人变化获取部门信息回显至部门名称
|
||||
* @param value
|
||||
*/
|
||||
principalChange(value) {
|
||||
let param = {
|
||||
id: value
|
||||
}
|
||||
getAllUserList(param).then(res => {
|
||||
this.model.departmentName = res.result[0].orgCodeTxt
|
||||
this.$nextTick(() => {
|
||||
this.form.setFieldsValue(pick(this.model, 'departmentName'))
|
||||
})
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 总签订金额修改
|
||||
* @param e
|
||||
*/
|
||||
contractAmountChange(e) {
|
||||
e.target.value = (e.target.value.replace(/[^0-9.]/g, '')).trim()
|
||||
this.contractAmountNum = e.target.value
|
||||
this.calculateNoTaxAmount()
|
||||
},
|
||||
/**
|
||||
* 税率修改
|
||||
* @param e
|
||||
*/
|
||||
rateChange(e) {
|
||||
e.target.value = (e.target.value.replace(/[^0-9.]/g, '')).trim()
|
||||
this.rateNum = e.target.value
|
||||
this.calculateNoTaxAmount()
|
||||
},
|
||||
/**
|
||||
* 计算未税金额
|
||||
*/
|
||||
calculateNoTaxAmount() {
|
||||
if (this.rateNum !== null && this.contractAmountNum !== null) {
|
||||
this.model.noTaxAmount = Number(this.contractAmountNum) / (1 + Number(this.rateNum))
|
||||
this.$nextTick(() => {
|
||||
this.form.setFieldsValue(pick(this.model, 'noTaxAmount'))
|
||||
})
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 应收金额输入
|
||||
* @param value
|
||||
*/
|
||||
accountsReceivableChange(e) {
|
||||
e.target.value = (e.target.value.replace(/[^0-9.]/g, '')).trim()
|
||||
this.accountsReceivableNum = e.target.value
|
||||
this.calculateOutstandingAmount()
|
||||
},
|
||||
/**
|
||||
* 已收金额输入
|
||||
* @param value
|
||||
*/
|
||||
amountReceivedChange(e) {
|
||||
e.target.value = (e.target.value.replace(/[^0-9.]/g, '')).trim()
|
||||
this.amountReceivedNum = e.target.value
|
||||
this.calculateOutstandingAmount()
|
||||
},
|
||||
/**
|
||||
* 计算未收金额和赊账状态
|
||||
*/
|
||||
calculateOutstandingAmount() {
|
||||
if (this.accountsReceivableNum !== null && this.amountReceivedNum !== null) {
|
||||
this.model.outstandingAmount = Number(this.accountsReceivableNum) - Number(this.amountReceivedNum)
|
||||
if (this.model.outstandingAmount === 0) {
|
||||
this.model.accountStatus = '3'
|
||||
} else if (this.model.outstandingAmount > 0 && this.model.outstandingAmount < Number(this.accountsReceivableNum)) {
|
||||
this.model.accountStatus = '2'
|
||||
} else if (this.model.outstandingAmount === Number(this.accountsReceivableNum)) {
|
||||
this.model.accountStatus = '1'
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
this.form.setFieldsValue(pick(this.model, 'outstandingAmount', 'accountStatus'))
|
||||
})
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 打包状态修改
|
||||
*/
|
||||
packageChange(value) {
|
||||
if (value === '1') {
|
||||
this.isPackage = true
|
||||
} else {
|
||||
this.isPackage = false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '~@assets/less/common.less';
|
||||
|
||||
.ant-divider-horizontal {
|
||||
margin: 20px 0;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user