Files
income_payments_client/src/views/contractManagement/revenueContract/modules/RevenueContractModule.vue
T
2021-09-14 18:13:00 +08:00

791 lines
30 KiB
Vue

<template>
<div>
<page-header-title :is-level-one="false" :img-for-icon="IconImg" :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'
:disabled="isSaved"
@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'
:disabled="isSaved"
@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="请选择签订单位"
:disabled="isSaved"
v-decorator="['signedCompany',validatorRules.signedCompany]"
@change="handleSignedCompanyChange"></company-select>
</a-form-item>
</a-col>
<a-col :xxl="6" :xl="8" :sm="12" style="margin-bottom: -5px">
<a-form-item label="签订联系人" :labelCol="labelCol" :wrapperCol="wrapperCol">
<select-contacts placeholder="请选择签订联系人"
:selected-company="selectedCompany"
:init-contacts="selectedContact"
:is-cancel="isCancel"
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-row>
<a-col :span="20">
<a-input placeholder="请输入税率"
v-decorator="['rate',validatorRules.rate]"
:maxLength='50'
@change="rateChange"></a-input>
</a-col>
<a-col :span="1">%</a-col>
</a-row>
</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"
:disabled="isSaved"
@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" v-preventclick>保存</a-button>
<a-button @click="handleCancle">取消</a-button>
</a-form-item>
</a-form>
</a-spin>
</a-card>
<!-- 关联项目-->
<a-card :bordered="false" v-if="isSaved" class="associated-project">
<div class="part-title">
<div class="part-title-text">关联项目</div>
<a-button type="link" @click="chooseProject">选择项目
<a-icon type="right"></a-icon>
</a-button>
</div>
<associated-project
:contract-id="contractId"
ref="associatedProject"></associated-project>
</a-card>
<!-- 项目类型选择-->
<project-type-selection ref="projectTypeSelection" @ok="selectProjectTypeOk"></project-type-selection>
<!-- 普通项目选择-->
<select-project-module ref="selectProjectModule"
@ok="selectProjectOk"
:depart-id="departId"
:pack="Number(model.pack)"
:contract-id="model.id"
:project-type="projectType"
:default-contract-num="contractNum"
:default-charge-company="selectedCompany"></select-project-module>
<!-- 工作组项目选择-->
<select-working-group-project-module ref="selectWorkingGroupProjectModule"
@ok="selectProjectOk"
:default-contract-num="contractNum"
:pack="model.pack"
:contract-id="model.id"
:project-type="projectType"
:default-charge-company="selectedCompany"></select-working-group-project-module>
<!-- 会议项目选择-->
<select-meeting-project-module ref="selectMeetingProjectModule"
@ok="selectProjectOk"></select-meeting-project-module>
<!-- 会员项目选择-->
<select-member-project-module ref="selectMemberProjectModule"
@ok="selectProjectOk"></select-member-project-module>
</div>
</template>
<script>
import IconImg from '@/assets/imgs/icon/icon_revenue_contract.png'
import PageHeaderTitle from '@/components/layouts/PageHeaderTitle'
import CompanySelect from '../../../../components/company/CompanySelect'
import SelectContacts from '../../../../components/company/SelectContacts'
import SelectPrincipal from '../../../../components/company/SelectPrincipal'
import JDate from '../../../../components/tools/JDate'
import JYearDate from '../../../../components/jero/JYearDate'
import InstallmentForm from '../../../../components/form/InstallmentForm'
import ProjectTypeSelection from './ProjectTypeSelection'
import SelectProjectModule from './SelectProjectModule'
import pick from 'lodash.pick'
import { getAllUserList } from '../../../../api/api'
import { postAction } from '../../../../api/manage'
import { getRevenueContractById, queryUserByDepartId } from '../../../../api/incomePaymentsApi'
import { duplicateCheck } from '../../../../api/api'
import AssociatedProject from './AssociatedProject'
import SelectMeetingProjectModule from './SelectMeetingProjectModule'
import SelectMemberProjectModule from './SelectMemberProjectModule'
import { money } from '../../../../utils/validate'
import SelectWorkingGroupProjectModule from './SelectWorkingGroupProjectModule'
export default {
name: 'RevenueContractModule',
components: {
PageHeaderTitle,
CompanySelect,
SelectContacts,
SelectPrincipal,
JDate,
JYearDate,
InstallmentForm,
ProjectTypeSelection,
SelectProjectModule,
AssociatedProject,
SelectMeetingProjectModule,
SelectMemberProjectModule,
SelectWorkingGroupProjectModule
},
data() {
return {
IconImg,
form: this.$form.createForm(this),
confirmLoading: false,
model: {},
temporaryModel: {}, // 编辑数据临时保存
title: '',
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, validator: this.checkMoney }],
validateTrigger: 'blur'
},
rate: {
rules: [{ required: true, message: '请输入税率' }],
validateTrigger: 'blur'
},
accountsReceivableAmount: {
rules: [{ required: true, validator: this.checkMoney }],
validateTrigger: 'blur'
},
amountReceived: {
rules: [{ required: true, validator: this.checkMoney }],
validateTrigger: 'blur'
},
pack: {
rules: [{ required: true, message: '请选择是否打包' }],
validateTrigger: 'blur'
}
},
url: {
add: '/contract/payIncomeContract/add',
edit: '/contract/payIncomeContract/edit',
meetingProjectList: '',
memberProjectList: ''
},
selectedCompany: null, // 选中的企业
installmentList: [],
isSaved: false, // 是否保存上方数据
isPackage: false, // 是否打包,控制打包年份显隐
accountsReceivableNum: null, // 输入的应收金额
amountReceivedNum: null, // 输入的未收金额
contractAmountNum: null, // 输入的签订合同总金额
rateNum: null, // 输入的税率
selectedContact: null, // 联系人回显
associatedProjectLoading: false,
contractId: '', // 收入合同id
contractNum: '', // 合同号
isCancel: false, // 是否取消
departId: null, // 部门id普通项目列表查询
projectType: null //项目类型
}
},
mounted() {
// 判断是编辑还是新增
if (this.$route.query.hasOwnProperty.call(this.$route.query, 'revenueId')) {
this.contractId = this.$route.query.revenueId
this.contractNum = this.$route.query.contractNum
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
}
// 通过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.isPackage = record.pack === 1
// 处理分期信息回显
this.$refs.installmentForm.initInstallmentList(record.listInstallment)
// 获取应收金额和已收金额
this.accountsReceivableNum = record.accountsReceivableAmount
this.amountReceivedNum = record.amountReceived
this.model = Object.assign({}, record)
this.temporaryModel = 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 = this.temporaryModel
// 处理联系人信息回显
this.isCancel = true
this.model.signedContactsId = this.model.signedContactsTemporaryId
this.selectedContact = {
id: this.model.signedContactsTemporaryId,
name: this.model.signedContactsTemporaryName
}
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
})
},
installmentFormOk(value) {
this.installmentList = value.installmentList
},
/**
* 选中企业变化, 清空已选联系人信息
* @param value
*/
handleSignedCompanyChange(value) {
this.selectedCompany = value
this.model.signedContactsId = undefined
this.$nextTick(() => {
this.form.setFieldsValue(pick(this.model, 'signedContactsId'))
})
},
/**
* 负责人变化获取部门信息回显至部门名称
* @param value
*/
principalChange(value) {
let param = {
id: value
}
getAllUserList(param).then(res => {
if (res.success) {
this.model.departmentName = res.result[0].orgCodeTxt
this.$nextTick(() => {
this.form.setFieldsValue(pick(this.model, 'departmentName'))
})
} else {
console.log(res.message)
}
})
},
/**
* 打包状态修改
*/
packageChange(value) {
if (value === '1') {
this.isPackage = true
} else {
this.isPackage = false
}
},
/**
* 总签订金额修改
* @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 = Number(e.target.value) / 100
this.calculateNoTaxAmount()
},
/**
* 计算未税金额
*/
calculateNoTaxAmount() {
if (this.rateNum !== null && this.contractAmountNum !== null) {
let noTaxAmount = Number(this.contractAmountNum) / (1 + this.rateNum)
noTaxAmount = noTaxAmount.toFixed(2)
this.model.noTaxAmount = Number(noTaxAmount)
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)
// 未收金额 === 0,已付全款状态
if (this.model.outstandingAmount <= 0) {
this.model.accountStatus = '3'
// 未收金额 > 0 且 未收金额 < 应收金额,部分付款状态
} 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'))
})
}
},
/**
* 合同编号唯一性校验
* @param rules
* @param value
* @param callback
*/
checkContractNum(rules, value, callback) {
if (value) {
if (!this.model.id) {
const params = {
confusionCode: 'pay_contract_num',
fieldVal: value
}
duplicateCheck(params).then(res => {
if (res.success) {
callback()
} else {
callback('合同编号已存在')
}
})
return
}
callback()
} else {
callback('请输入合同编号')
}
},
/**
* 合同名称唯一性校验
* @param rules
* @param value
* @param callback
*/
checkContractName(rules, value, callback) {
if (value) {
if (!this.model.id) {
const params = {
confusionCode: 'pay_contract_name',
fieldVal: value
}
duplicateCheck(params).then(res => {
if (res.success) {
callback()
} else {
callback('合同名称已存在')
}
})
return
}
callback()
} else {
callback('请输入合同名称')
}
},
/**
* 校验金额格式
* @param rules
* @param value
* @param callback
*/
checkMoney(rules, value, callback) {
if (value) {
if (money(value)) {
callback()
return
}
callback('请输入正确格式的金额')
}
switch (rules.field) {
case 'contractAmount':
callback('请输入签订合同总金额')
break
case 'accountsReceivableAmount':
callback('请输入应收金额')
break
case 'amountReceived':
callback('请输入已收金额')
break
}
},
/**
* 选择关联项目
*/
chooseProject() {
this.$refs.projectTypeSelection.open()
},
/**
* 项目类型选择回调,动态传入表头数据
* @param type
*/
selectProjectTypeOk(type) {
this.projectType = type
switch (type) {
// 普通项目
case 1:
this.getUserDetailByUserId().then(res => {
this.departId = res
// 混入筛选条件
this.$refs.selectProjectModule.filters = {
chargeCompanyId: this.selectedCompany.id,
contractId: this.contractId,
departId: this.departId // 一个用户多部门情况下传给后端第一个部门id
}
// 获取负责人列表
this.$refs.selectProjectModule.departChange(this.departId)
// 打开弹窗
this.$refs.selectProjectModule.open()
})
break
// 工作组项目
case 2:
this.$refs.selectWorkingGroupProjectModule.filters = {
companyId: this.selectedCompany.id,
contractId: this.contractId
}
this.$refs.selectWorkingGroupProjectModule.open()
break
// 会议项目
case 3:
// 传入合同信息
this.$refs.selectMeetingProjectModule.open(this.model)
break
// 会员项目
case 4:
// 传入合同信息
this.$refs.selectMemberProjectModule.open(this.model)
break
}
},
/**
* 通过用户id获取用户信息
*/
getUserDetailByUserId() {
let param = {
id: this.model.principalId
}
return new Promise(resolve => {
queryUserByDepartId(param).then(res => {
resolve(res.result[0].departIds)
})
})
},
/**
* 项目选中回调
*/
selectProjectOk() {
this.$refs.associatedProject.loadAssociatedProject()
}
}
}
</script>
<style scoped lang="less">
@import '~@assets/less/common.less';
.associated-project {
margin-top: 2px;
}
.ant-divider-horizontal {
margin: 20px 0;
}
.ant-btn > .anticon + span, .ant-btn > span + .anticon {
margin-left: 0;
}
</style>